WEBVTT 0 00:01.310 --> 00:03.420 All right now that we know 1 00:03.420 --> 00:05.720 what JavaScript actually is, 2 00:05.720 --> 00:07.960 let's now learn how to write code 3 00:07.960 --> 00:10.290 in a special JavaScript file 4 00:10.290 --> 00:13.333 and then how to run the code in the browser. 5 00:14.630 --> 00:18.660 Now to get started with the section and with this course, 6 00:18.660 --> 00:22.020 you need to start by downloading the starter code 7 00:22.020 --> 00:26.900 from this GitHub repository that I created for this course. 8 00:26.900 --> 00:31.020 So this repository is at this URL here, 9 00:31.020 --> 00:33.040 which in case you missed it 10 00:33.040 --> 00:35.223 is at the very beginning of the course. 11 00:35.223 --> 00:39.227 It's on the first text lecture of the first section. 12 00:39.227 --> 00:42.000 And in order to now actually download 13 00:42.000 --> 00:43.770 all of the starter code, 14 00:43.770 --> 00:47.470 all you need to do is to click on this green button here 15 00:47.470 --> 00:51.600 and then download zip, okay? 16 00:51.600 --> 00:55.350 Now, by the time you're watching this video GitHub 17 00:55.350 --> 01:00.150 which is this website where developers basically host code, 18 01:00.150 --> 01:03.520 so later this website might look a little bit different 19 01:03.520 --> 01:07.140 but just what probably for a green button, 20 01:07.140 --> 01:11.510 which then says, download zip, all right? 21 01:11.510 --> 01:15.910 Now, if you're on a smaller screen or maybe on mobile 22 01:15.910 --> 01:19.253 then this green button will actually not be visible here. 23 01:20.090 --> 01:23.490 So in that case, just scroll down a little bit here 24 01:23.490 --> 01:25.960 to the FAQ section 25 01:25.960 --> 01:28.570 and then here you have this link. 26 01:28.570 --> 01:31.280 So you can also download all the code 27 01:31.280 --> 01:33.063 by simply clicking this link here. 28 01:33.970 --> 01:38.730 And by the way, since we're already here in the FAQs, 29 01:38.730 --> 01:41.600 please make sure to also read all of them 30 01:41.600 --> 01:44.670 before you actually move on in the course. 31 01:44.670 --> 01:46.160 So you will probably have 32 01:46.160 --> 01:48.680 one of these questions at some point. 33 01:48.680 --> 01:50.280 And so it's easier 34 01:50.280 --> 01:54.690 to then simply find the answer right here, now okay? 35 01:54.690 --> 01:57.120 But that's it here for GitHub. 36 01:57.120 --> 02:01.470 Now let's go ahead and extract all of this data 37 02:01.470 --> 02:02.743 that we just downloaded. 38 02:03.690 --> 02:05.423 And so here we go. 39 02:06.720 --> 02:09.830 So this is the starter code 40 02:09.830 --> 02:12.380 and here you have basically one folder 41 02:12.380 --> 02:14.890 for each section or each project 42 02:14.890 --> 02:17.070 that we're building in the course. 43 02:17.070 --> 02:19.870 Then inside of each of these folders, 44 02:19.870 --> 02:23.140 you will always have one final folder 45 02:23.140 --> 02:24.723 and one starter folder. 46 02:25.700 --> 02:30.700 So you'll see that happens in all of these folders here. 47 02:30.707 --> 02:35.330 Now the final folder is basically the final version 48 02:35.330 --> 02:38.550 of the code as it looks by the end of the section 49 02:38.550 --> 02:41.060 or by the end of the project. 50 02:41.060 --> 02:44.290 And so in case something goes wrong in your code, 51 02:44.290 --> 02:46.470 while you're following the section 52 02:46.470 --> 02:49.803 please then compare your code with the final code 53 02:49.803 --> 02:53.282 that is included for each of the sections. 54 02:53.282 --> 02:55.660 And that will then allow you to find 55 02:55.660 --> 02:59.600 and fix any mistake that you might've made in your code 56 02:59.600 --> 03:02.927 so that you can keep going in the section. 57 03:02.927 --> 03:06.920 But anyway, what we're most interested in in the beginning 58 03:06.920 --> 03:09.260 is the starter code. 59 03:09.260 --> 03:12.430 So each of these folders has the starter code 60 03:12.430 --> 03:14.560 and that's basically the starting point 61 03:14.560 --> 03:17.763 of each of these sections or projects. 62 03:18.720 --> 03:22.120 So let's now actually direct this folder here 63 03:22.120 --> 03:23.540 onto the desktop 64 03:24.400 --> 03:27.293 and then I'm gonna open it up here separately. 65 03:28.200 --> 03:29.600 And in my case here 66 03:29.600 --> 03:32.863 since I'm actually the one writing the code first 67 03:32.863 --> 03:35.430 it doesn't make a lot of sense 68 03:35.430 --> 03:37.800 to have these two folders here. 69 03:37.800 --> 03:41.370 So I will actually go ahead and take the index out, 70 03:41.370 --> 03:43.760 but you should not do that. 71 03:43.760 --> 03:46.610 So you should use this starter folder here 72 03:46.610 --> 03:51.000 as your project folder in VS code, okay? 73 03:51.000 --> 03:53.560 But again, I will now delete these two 74 03:53.560 --> 03:55.430 because I don't need them here 75 03:55.430 --> 03:57.763 to build this course basically. 76 03:59.090 --> 04:02.773 But anyway, let's now open up a new VS code window. 77 04:04.290 --> 04:08.753 So new window and then here we click on open folder. 78 04:09.810 --> 04:12.950 And then we are already in the desktop. 79 04:12.950 --> 04:15.990 Let's just make the window a bit bigger here. 80 04:15.990 --> 04:19.650 And then I will select my project folder here. 81 04:19.650 --> 04:22.180 So in my case, that's going to be this folder. 82 04:22.180 --> 04:25.160 But again you should now use that starter folder 83 04:25.160 --> 04:28.410 that's in here as your project folder. 84 04:28.410 --> 04:31.743 So I think that's the best way for you to approach this. 85 04:32.770 --> 04:37.143 So with that project folder a selected, hit open. 86 04:38.380 --> 04:41.983 And then here we see the index.html file 87 04:41.983 --> 04:45.870 that we already had in our starter code. 88 04:45.870 --> 04:48.120 And this is an HTML file 89 04:48.120 --> 04:52.050 because usually JavaScript is attached to web pages. 90 04:52.050 --> 04:54.570 At least when we're building front end applications 91 04:54.570 --> 04:56.930 as we learned in the last video. 92 04:56.930 --> 05:01.480 So to start, we always need an HTML document like this 93 05:01.480 --> 05:04.240 because our JavaScript needs to be attached 94 05:04.240 --> 05:06.880 to an HTML document. 95 05:06.880 --> 05:10.150 Now in HTML, there is a script tag 96 05:10.150 --> 05:12.350 where we can write JavaScript. 97 05:12.350 --> 05:17.350 So let's do that here and a hat right beneath the style. 98 05:18.760 --> 05:21.070 And if you're completely new to HTML 99 05:21.070 --> 05:23.100 and have no idea how it works 100 05:23.100 --> 05:27.090 there is a very short crash course on HTML and CSS 101 05:27.090 --> 05:30.300 in section five of this course I believe. 102 05:30.300 --> 05:32.330 So if you want you can take that 103 05:32.330 --> 05:34.370 just to learn about the very basics 104 05:34.370 --> 05:37.993 of HTML and CSS in like 30 minutes or so. 105 05:39.630 --> 05:42.790 Anyway, let's not create this script tag here 106 05:42.790 --> 05:45.730 in which we will write or JavaScript now, 107 05:45.730 --> 05:48.920 because in the first video we wrote JavaScript 108 05:48.920 --> 05:50.050 in the console. 109 05:50.050 --> 05:53.950 Remember, but that's not how real development works. 110 05:53.950 --> 05:58.530 So instead of course we write the code in files. 111 05:58.530 --> 06:01.043 So let's just right for now the same code 112 06:01.043 --> 06:04.590 that we wrote in the first video. 113 06:04.590 --> 06:09.560 So let JS equal amazing. 114 06:09.560 --> 06:12.870 And then in JavaScript, we usually add a semi colon 115 06:12.870 --> 06:14.690 to the end of each line. 116 06:14.690 --> 06:16.610 And this will then let JavaScript know 117 06:16.610 --> 06:19.100 that we are done with this line. 118 06:19.100 --> 06:21.186 And it's actually not really mandatory. 119 06:21.186 --> 06:24.560 And you will see some people omit the semi-colons 120 06:24.560 --> 06:27.870 but I still consider it a good coding practice 121 06:27.870 --> 06:30.313 and I believe it makes the code a bit cleaner. 122 06:32.470 --> 06:35.260 So just like before we are then saying 123 06:35.260 --> 06:38.263 if JavaScript is amazing, 124 06:41.920 --> 06:44.373 then alert.JavaScript is fun. 125 06:50.520 --> 06:53.530 And once again don't worry yet about how 126 06:53.530 --> 06:55.793 this code here works, okay? 127 06:57.140 --> 06:58.540 Just type it for now 128 06:58.540 --> 07:02.140 and just have a general idea of what it does. 129 07:02.140 --> 07:04.490 Now to actually execute this code, 130 07:04.490 --> 07:08.070 so in this example to show this alert window, 131 07:08.070 --> 07:12.730 all we have to do is to open up index.html in the browser, 132 07:12.730 --> 07:15.740 because again this is where our JavaScript 133 07:15.740 --> 07:18.860 is now attached to, right? 134 07:18.860 --> 07:20.780 So let's do that. 135 07:20.780 --> 07:23.090 And so I'm going back to my desktop 136 07:25.200 --> 07:28.803 and then open this file with Google Chrome. 137 07:30.000 --> 07:32.140 And indeed right away 138 07:32.140 --> 07:35.840 we get this alert saying JavaScript is fun. 139 07:35.840 --> 07:39.510 And so that is coming from our index.html. 140 07:39.510 --> 07:43.010 We can click OK and then it finishes. 141 07:43.010 --> 07:48.010 And we see a starter file which is actually this text. 142 07:48.090 --> 07:50.953 So if you see in VS code, 143 07:51.900 --> 07:55.920 Java's good fundamentals part one in this H1 tag, 144 07:55.920 --> 07:58.020 is exactly what we see here. 145 07:58.020 --> 08:01.050 And so we opened up the right page and also, 146 08:01.050 --> 08:03.520 or JavaScript is working. 147 08:03.520 --> 08:05.530 So if we reload this page now 148 08:05.530 --> 08:07.643 we should see that alert window again. 149 08:08.850 --> 08:10.453 And indeed here it is. 150 08:12.460 --> 08:14.823 Okay, let's push this to the side. 151 08:16.519 --> 08:19.637 Here is the code from our previous lecture VS code 152 08:20.930 --> 08:24.770 and push it to the other side, okay? 153 08:24.770 --> 08:28.330 We can then get rid of this sidebar here that we don't need 154 08:28.330 --> 08:31.880 by hitting Command or Control + B 155 08:31.880 --> 08:34.073 or by clicking this file icon. 156 08:35.480 --> 08:38.230 And with this, we have enough space to see the editor 157 08:38.230 --> 08:40.840 and a browser here on the other side. 158 08:40.840 --> 08:44.150 So let me show you something very important now 159 08:44.150 --> 08:46.780 which is how to see results from our code 160 08:46.780 --> 08:49.290 here back in the browser. 161 08:49.290 --> 08:51.350 So let's take this math operations 162 08:51.350 --> 08:53.990 that we did in the previous lecture. 163 08:53.990 --> 08:58.990 So that was 40 plus eight plus 23 minus 10. 164 08:59.950 --> 09:01.360 Let's give it a save. 165 09:01.360 --> 09:03.120 And you see that JavaScript 166 09:03.120 --> 09:05.700 actually automatically formatted this code. 167 09:05.700 --> 09:06.840 And I will show you later 168 09:06.840 --> 09:10.040 how you can set that up for yourself. 169 09:10.040 --> 09:13.160 Anyway, if we now reload this page here 170 09:13.160 --> 09:15.743 where do you think this result will appear? 171 09:17.610 --> 09:20.580 So clearly it's not in this alert 172 09:20.580 --> 09:23.220 and it's also nowhere on this page 173 09:23.220 --> 09:26.763 because we didn't tell JavaScript to put it on the page. 174 09:27.620 --> 09:30.590 So let's open up the inspector here 175 09:30.590 --> 09:34.403 and that will do inspect and then the console. 176 09:35.430 --> 09:39.650 And then again increase the text command plus plus, 177 09:39.650 --> 09:40.823 and plus again. 178 09:41.970 --> 09:45.610 And just see that the result is also not in the console. 179 09:45.610 --> 09:46.790 So why is that? 180 09:46.790 --> 09:51.180 Why is this result not in a console like it was before? 181 09:51.180 --> 09:52.970 Well it's because the console 182 09:52.970 --> 09:55.350 is just an environment that was built 183 09:55.350 --> 09:57.800 to execute small pieces of code 184 09:57.800 --> 09:59.900 and then show results immediately. 185 09:59.900 --> 10:02.690 So just like we did in a previous lecture. 186 10:02.690 --> 10:04.200 But it doesn't show results 187 10:04.200 --> 10:07.610 of our operations in code by default. 188 10:07.610 --> 10:10.130 Now, if we still want to display results, 189 10:10.130 --> 10:13.940 for example from a calculation like this here in the console 190 10:13.940 --> 10:17.720 we need to tell JavaScript to explicitly output that result 191 10:17.720 --> 10:19.260 to the console. 192 10:19.260 --> 10:22.170 And we can do that using a special function 193 10:22.170 --> 10:26.330 called console.log, okay? 194 10:26.330 --> 10:31.330 And then if we take this code here and copy and paste it 195 10:31.410 --> 10:34.703 and then save it and then reload, 196 10:36.420 --> 10:38.320 we need to click OK 197 10:38.320 --> 10:40.863 so that JavaScript can move on to the next line. 198 10:41.730 --> 10:43.630 And then we actually get the results 199 10:43.630 --> 10:45.980 printed to the console here. 200 10:45.980 --> 10:47.370 And it actually says 201 10:47.370 --> 10:51.260 that it's coming from index.html at line 31. 202 10:51.260 --> 10:53.340 And so that's exactly the line 203 10:53.340 --> 10:55.633 where we did to this computation. 204 10:56.750 --> 10:58.900 Okay, But let's recap here 205 10:58.900 --> 11:02.770 because I know that this is confusing for many beginners. 206 11:02.770 --> 11:06.560 So in the last lecture we were already in the console. 207 11:06.560 --> 11:10.700 And so then there was no need for using console.log. 208 11:10.700 --> 11:12.800 We also needed to no script tag 209 11:12.800 --> 11:15.200 when we were in the console, right? 210 11:15.200 --> 11:17.880 But now we are actually in a script 211 11:17.880 --> 11:19.650 and no longer in the console. 212 11:19.650 --> 11:23.520 And so now we need to explicitly say console.log 213 11:23.520 --> 11:26.420 whenever we want to access the developer console 214 11:26.420 --> 11:29.000 like we did here, okay? 215 11:29.000 --> 11:31.830 So basically this is like building a bridge 216 11:31.830 --> 11:35.300 between script here and to develop a console 217 11:35.300 --> 11:38.700 on the other side that lives in the browser. 218 11:38.700 --> 11:40.620 And now to finish this lecture 219 11:40.620 --> 11:43.620 let's actually take this JavaScript code 220 11:43.620 --> 11:46.100 out of the HTML file 221 11:46.100 --> 11:49.850 and put it into its own separate JavaScript file. 222 11:49.850 --> 11:51.430 So what we have right now 223 11:51.430 --> 11:54.980 this script here is an inline script. 224 11:54.980 --> 11:57.920 And the only advantage of an inline script 225 11:57.920 --> 12:00.720 is that we don't have to load another file. 226 12:00.720 --> 12:01.970 But on the other hand 227 12:01.970 --> 12:05.340 it's pretty bad for separating the website content 228 12:05.340 --> 12:07.210 from the JavaScript logic. 229 12:07.210 --> 12:10.510 And so usually we use external JavaScript files 230 12:10.510 --> 12:13.270 as I just mentioned, okay? 231 12:13.270 --> 12:15.918 So let's come back to the sidebar here 232 12:15.918 --> 12:17.880 and create a new file 233 12:17.880 --> 12:21.510 which I'm gonna call script.js. 234 12:21.510 --> 12:23.550 And that's a pretty standard name 235 12:23.550 --> 12:27.710 for a JavaScript script, okay? 236 12:27.710 --> 12:30.320 So let's take that back, 237 12:30.320 --> 12:32.540 come here, copy this code 238 12:35.010 --> 12:36.720 and paste it here. 239 12:36.720 --> 12:38.700 And then once more VS code 240 12:38.700 --> 12:41.670 actually formatted the code here nicely. 241 12:41.670 --> 12:45.570 If it didn't on your computer, then just do that manually 242 12:45.570 --> 12:49.570 and I will show you later how to set that up, okay? 243 12:49.570 --> 12:52.223 And now we can get rid of this script here. 244 12:54.180 --> 12:57.430 Great, now we have a better separation of concerns 245 12:57.430 --> 12:59.770 between presentation and logic. 246 12:59.770 --> 13:01.420 And this also makes it easier 247 13:01.420 --> 13:04.400 to maintain code in the long run. 248 13:04.400 --> 13:08.140 All there is to do now is to link this JavaScript file 249 13:08.140 --> 13:09.610 to the HTML file 250 13:09.610 --> 13:13.127 because right now, HTML has no way of knowing 251 13:13.127 --> 13:16.110 where the code is actually located. 252 13:16.110 --> 13:19.670 So if we execute this code by reloading the browser, 253 13:19.670 --> 13:21.642 now nothing will happen. 254 13:21.642 --> 13:26.070 Again because this HTML file right now does not know 255 13:26.070 --> 13:28.670 where to find the JavaScript code. 256 13:28.670 --> 13:30.710 So let's do that connection. 257 13:30.710 --> 13:35.710 And we usually do that at the end of the body tag, okay? 258 13:35.890 --> 13:38.893 And actually we will use script again. 259 13:41.110 --> 13:43.000 All right, but now at this time 260 13:43.000 --> 13:46.970 we're not gonna put any code inside this script element 261 13:46.970 --> 13:50.393 but instead we are gonna specify the source attribute. 262 13:51.230 --> 13:54.340 So here all we need to do is to then specify 263 13:54.340 --> 13:58.350 the name of the script and the location. 264 13:58.350 --> 14:01.290 Now, in this case descript, 265 14:01.290 --> 14:03.310 so it descript.js file 266 14:03.310 --> 14:06.380 is in the same folder as index.html. 267 14:06.380 --> 14:07.787 So all we have to do here 268 14:07.787 --> 14:11.700 is to just write the file name like this. 269 14:11.700 --> 14:16.700 We don't have to specify the entire path to the file, okay? 270 14:16.740 --> 14:19.603 So if we save this now and reload, 271 14:20.670 --> 14:24.270 then you see that it's back to working. 272 14:24.270 --> 14:27.040 So we have this popup here again 273 14:27.040 --> 14:30.900 and then result of this computation. 274 14:30.900 --> 14:33.430 Now, if you didn't get the alert window 275 14:33.430 --> 14:35.510 or this output here, 276 14:35.510 --> 14:37.950 then that means that your script file 277 14:37.950 --> 14:42.710 is probably not correctly linked to the HTML file. 278 14:42.710 --> 14:46.720 So in that case, please make 100% sure 279 14:46.720 --> 14:48.330 that descript file 280 14:48.330 --> 14:52.870 is in the exact same folder as the HTML file. 281 14:52.870 --> 14:57.673 Also make sure that you correctly spelt script SRC 282 14:58.900 --> 15:01.780 just as they have it here in my HTML. 283 15:01.780 --> 15:04.080 And finally also make sure 284 15:04.080 --> 15:07.486 that you have no errors in your Java script code. 285 15:07.486 --> 15:11.820 So these are some common mistakes that I see people make 286 15:11.820 --> 15:15.573 which then leads to their script not being correctly linked. 287 15:16.640 --> 15:19.870 Okay, but anyway at this point, 288 15:19.870 --> 15:23.703 we no longer need index.html open here. 289 15:24.720 --> 15:27.410 And here we have only our code logic. 290 15:27.410 --> 15:30.120 The rest of the presentation is gone. 291 15:30.120 --> 15:33.453 And so this is much cleaner and much easier to work with. 292 15:34.530 --> 15:38.290 Great, so now you know how to link a JavaScript file 293 15:38.290 --> 15:42.730 to an HTML file and then how to run it all in the browser. 294 15:42.730 --> 15:45.140 And that means that you're now finally able 295 15:45.140 --> 15:48.540 to really start learning the JavaScript language. 296 15:48.540 --> 15:50.300 So see you in the next lecture 297 15:50.300 --> 15:52.613 where we're gonna start doing just that.