1 00:00:01,310 --> 00:00:03,420 All right now that we know 2 00:00:03,420 --> 00:00:05,720 what JavaScript actually is, 3 00:00:05,720 --> 00:00:07,960 let's now learn how to write code 4 00:00:07,960 --> 00:00:10,290 in a special JavaScript file 5 00:00:10,290 --> 00:00:13,333 and then how to run the code in the browser. 6 00:00:14,630 --> 00:00:18,660 Now to get started with the section and with this course, 7 00:00:18,660 --> 00:00:22,020 you need to start by downloading the starter code 8 00:00:22,020 --> 00:00:26,900 from this GitHub repository that I created for this course. 9 00:00:26,900 --> 00:00:31,020 So this repository is at this URL here, 10 00:00:31,020 --> 00:00:33,040 which in case you missed it 11 00:00:33,040 --> 00:00:35,223 is at the very beginning of the course. 12 00:00:35,223 --> 00:00:39,227 It's on the first text lecture of the first section. 13 00:00:39,227 --> 00:00:42,000 And in order to now actually download 14 00:00:42,000 --> 00:00:43,770 all of the starter code, 15 00:00:43,770 --> 00:00:47,470 all you need to do is to click on this green button here 16 00:00:47,470 --> 00:00:51,600 and then download zip, okay? 17 00:00:51,600 --> 00:00:55,350 Now, by the time you're watching this video GitHub 18 00:00:55,350 --> 00:01:00,150 which is this website where developers basically host code, 19 00:01:00,150 --> 00:01:03,520 so later this website might look a little bit different 20 00:01:03,520 --> 00:01:07,140 but just what probably for a green button, 21 00:01:07,140 --> 00:01:11,510 which then says, download zip, all right? 22 00:01:11,510 --> 00:01:15,910 Now, if you're on a smaller screen or maybe on mobile 23 00:01:15,910 --> 00:01:19,253 then this green button will actually not be visible here. 24 00:01:20,090 --> 00:01:23,490 So in that case, just scroll down a little bit here 25 00:01:23,490 --> 00:01:25,960 to the FAQ section 26 00:01:25,960 --> 00:01:28,570 and then here you have this link. 27 00:01:28,570 --> 00:01:31,280 So you can also download all the code 28 00:01:31,280 --> 00:01:33,063 by simply clicking this link here. 29 00:01:33,970 --> 00:01:38,730 And by the way, since we're already here in the FAQs, 30 00:01:38,730 --> 00:01:41,600 please make sure to also read all of them 31 00:01:41,600 --> 00:01:44,670 before you actually move on in the course. 32 00:01:44,670 --> 00:01:46,160 So you will probably have 33 00:01:46,160 --> 00:01:48,680 one of these questions at some point. 34 00:01:48,680 --> 00:01:50,280 And so it's easier 35 00:01:50,280 --> 00:01:54,690 to then simply find the answer right here, now okay? 36 00:01:54,690 --> 00:01:57,120 But that's it here for GitHub. 37 00:01:57,120 --> 00:02:01,470 Now let's go ahead and extract all of this data 38 00:02:01,470 --> 00:02:02,743 that we just downloaded. 39 00:02:03,690 --> 00:02:05,423 And so here we go. 40 00:02:06,720 --> 00:02:09,830 So this is the starter code 41 00:02:09,830 --> 00:02:12,380 and here you have basically one folder 42 00:02:12,380 --> 00:02:14,890 for each section or each project 43 00:02:14,890 --> 00:02:17,070 that we're building in the course. 44 00:02:17,070 --> 00:02:19,870 Then inside of each of these folders, 45 00:02:19,870 --> 00:02:23,140 you will always have one final folder 46 00:02:23,140 --> 00:02:24,723 and one starter folder. 47 00:02:25,700 --> 00:02:30,700 So you'll see that happens in all of these folders here. 48 00:02:30,707 --> 00:02:35,330 Now the final folder is basically the final version 49 00:02:35,330 --> 00:02:38,550 of the code as it looks by the end of the section 50 00:02:38,550 --> 00:02:41,060 or by the end of the project. 51 00:02:41,060 --> 00:02:44,290 And so in case something goes wrong in your code, 52 00:02:44,290 --> 00:02:46,470 while you're following the section 53 00:02:46,470 --> 00:02:49,803 please then compare your code with the final code 54 00:02:49,803 --> 00:02:53,282 that is included for each of the sections. 55 00:02:53,282 --> 00:02:55,660 And that will then allow you to find 56 00:02:55,660 --> 00:02:59,600 and fix any mistake that you might've made in your code 57 00:02:59,600 --> 00:03:02,927 so that you can keep going in the section. 58 00:03:02,927 --> 00:03:06,920 But anyway, what we're most interested in in the beginning 59 00:03:06,920 --> 00:03:09,260 is the starter code. 60 00:03:09,260 --> 00:03:12,430 So each of these folders has the starter code 61 00:03:12,430 --> 00:03:14,560 and that's basically the starting point 62 00:03:14,560 --> 00:03:17,763 of each of these sections or projects. 63 00:03:18,720 --> 00:03:22,120 So let's now actually direct this folder here 64 00:03:22,120 --> 00:03:23,540 onto the desktop 65 00:03:24,400 --> 00:03:27,293 and then I'm gonna open it up here separately. 66 00:03:28,200 --> 00:03:29,600 And in my case here 67 00:03:29,600 --> 00:03:32,863 since I'm actually the one writing the code first 68 00:03:32,863 --> 00:03:35,430 it doesn't make a lot of sense 69 00:03:35,430 --> 00:03:37,800 to have these two folders here. 70 00:03:37,800 --> 00:03:41,370 So I will actually go ahead and take the index out, 71 00:03:41,370 --> 00:03:43,760 but you should not do that. 72 00:03:43,760 --> 00:03:46,610 So you should use this starter folder here 73 00:03:46,610 --> 00:03:51,000 as your project folder in VS code, okay? 74 00:03:51,000 --> 00:03:53,560 But again, I will now delete these two 75 00:03:53,560 --> 00:03:55,430 because I don't need them here 76 00:03:55,430 --> 00:03:57,763 to build this course basically. 77 00:03:59,090 --> 00:04:02,773 But anyway, let's now open up a new VS code window. 78 00:04:04,290 --> 00:04:08,753 So new window and then here we click on open folder. 79 00:04:09,810 --> 00:04:12,950 And then we are already in the desktop. 80 00:04:12,950 --> 00:04:15,990 Let's just make the window a bit bigger here. 81 00:04:15,990 --> 00:04:19,650 And then I will select my project folder here. 82 00:04:19,650 --> 00:04:22,180 So in my case, that's going to be this folder. 83 00:04:22,180 --> 00:04:25,160 But again you should now use that starter folder 84 00:04:25,160 --> 00:04:28,410 that's in here as your project folder. 85 00:04:28,410 --> 00:04:31,743 So I think that's the best way for you to approach this. 86 00:04:32,770 --> 00:04:37,143 So with that project folder a selected, hit open. 87 00:04:38,380 --> 00:04:41,983 And then here we see the index.html file 88 00:04:41,983 --> 00:04:45,870 that we already had in our starter code. 89 00:04:45,870 --> 00:04:48,120 And this is an HTML file 90 00:04:48,120 --> 00:04:52,050 because usually JavaScript is attached to web pages. 91 00:04:52,050 --> 00:04:54,570 At least when we're building front end applications 92 00:04:54,570 --> 00:04:56,930 as we learned in the last video. 93 00:04:56,930 --> 00:05:01,480 So to start, we always need an HTML document like this 94 00:05:01,480 --> 00:05:04,240 because our JavaScript needs to be attached 95 00:05:04,240 --> 00:05:06,880 to an HTML document. 96 00:05:06,880 --> 00:05:10,150 Now in HTML, there is a script tag 97 00:05:10,150 --> 00:05:12,350 where we can write JavaScript. 98 00:05:12,350 --> 00:05:17,350 So let's do that here and a hat right beneath the style. 99 00:05:18,760 --> 00:05:21,070 And if you're completely new to HTML 100 00:05:21,070 --> 00:05:23,100 and have no idea how it works 101 00:05:23,100 --> 00:05:27,090 there is a very short crash course on HTML and CSS 102 00:05:27,090 --> 00:05:30,300 in section five of this course I believe. 103 00:05:30,300 --> 00:05:32,330 So if you want you can take that 104 00:05:32,330 --> 00:05:34,370 just to learn about the very basics 105 00:05:34,370 --> 00:05:37,993 of HTML and CSS in like 30 minutes or so. 106 00:05:39,630 --> 00:05:42,790 Anyway, let's not create this script tag here 107 00:05:42,790 --> 00:05:45,730 in which we will write or JavaScript now, 108 00:05:45,730 --> 00:05:48,920 because in the first video we wrote JavaScript 109 00:05:48,920 --> 00:05:50,050 in the console. 110 00:05:50,050 --> 00:05:53,950 Remember, but that's not how real development works. 111 00:05:53,950 --> 00:05:58,530 So instead of course we write the code in files. 112 00:05:58,530 --> 00:06:01,043 So let's just right for now the same code 113 00:06:01,043 --> 00:06:04,590 that we wrote in the first video. 114 00:06:04,590 --> 00:06:09,560 So let JS equal amazing. 115 00:06:09,560 --> 00:06:12,870 And then in JavaScript, we usually add a semi colon 116 00:06:12,870 --> 00:06:14,690 to the end of each line. 117 00:06:14,690 --> 00:06:16,610 And this will then let JavaScript know 118 00:06:16,610 --> 00:06:19,100 that we are done with this line. 119 00:06:19,100 --> 00:06:21,186 And it's actually not really mandatory. 120 00:06:21,186 --> 00:06:24,560 And you will see some people omit the semi-colons 121 00:06:24,560 --> 00:06:27,870 but I still consider it a good coding practice 122 00:06:27,870 --> 00:06:30,313 and I believe it makes the code a bit cleaner. 123 00:06:32,470 --> 00:06:35,260 So just like before we are then saying 124 00:06:35,260 --> 00:06:38,263 if JavaScript is amazing, 125 00:06:41,920 --> 00:06:44,373 then alert.JavaScript is fun. 126 00:06:50,520 --> 00:06:53,530 And once again don't worry yet about how 127 00:06:53,530 --> 00:06:55,793 this code here works, okay? 128 00:06:57,140 --> 00:06:58,540 Just type it for now 129 00:06:58,540 --> 00:07:02,140 and just have a general idea of what it does. 130 00:07:02,140 --> 00:07:04,490 Now to actually execute this code, 131 00:07:04,490 --> 00:07:08,070 so in this example to show this alert window, 132 00:07:08,070 --> 00:07:12,730 all we have to do is to open up index.html in the browser, 133 00:07:12,730 --> 00:07:15,740 because again this is where our JavaScript 134 00:07:15,740 --> 00:07:18,860 is now attached to, right? 135 00:07:18,860 --> 00:07:20,780 So let's do that. 136 00:07:20,780 --> 00:07:23,090 And so I'm going back to my desktop 137 00:07:25,200 --> 00:07:28,803 and then open this file with Google Chrome. 138 00:07:30,000 --> 00:07:32,140 And indeed right away 139 00:07:32,140 --> 00:07:35,840 we get this alert saying JavaScript is fun. 140 00:07:35,840 --> 00:07:39,510 And so that is coming from our index.html. 141 00:07:39,510 --> 00:07:43,010 We can click OK and then it finishes. 142 00:07:43,010 --> 00:07:48,010 And we see a starter file which is actually this text. 143 00:07:48,090 --> 00:07:50,953 So if you see in VS code, 144 00:07:51,900 --> 00:07:55,920 Java's good fundamentals part one in this H1 tag, 145 00:07:55,920 --> 00:07:58,020 is exactly what we see here. 146 00:07:58,020 --> 00:08:01,050 And so we opened up the right page and also, 147 00:08:01,050 --> 00:08:03,520 or JavaScript is working. 148 00:08:03,520 --> 00:08:05,530 So if we reload this page now 149 00:08:05,530 --> 00:08:07,643 we should see that alert window again. 150 00:08:08,850 --> 00:08:10,453 And indeed here it is. 151 00:08:12,460 --> 00:08:14,823 Okay, let's push this to the side. 152 00:08:16,519 --> 00:08:19,637 Here is the code from our previous lecture VS code 153 00:08:20,930 --> 00:08:24,770 and push it to the other side, okay? 154 00:08:24,770 --> 00:08:28,330 We can then get rid of this sidebar here that we don't need 155 00:08:28,330 --> 00:08:31,880 by hitting Command or Control + B 156 00:08:31,880 --> 00:08:34,073 or by clicking this file icon. 157 00:08:35,480 --> 00:08:38,230 And with this, we have enough space to see the editor 158 00:08:38,230 --> 00:08:40,840 and a browser here on the other side. 159 00:08:40,840 --> 00:08:44,150 So let me show you something very important now 160 00:08:44,150 --> 00:08:46,780 which is how to see results from our code 161 00:08:46,780 --> 00:08:49,290 here back in the browser. 162 00:08:49,290 --> 00:08:51,350 So let's take this math operations 163 00:08:51,350 --> 00:08:53,990 that we did in the previous lecture. 164 00:08:53,990 --> 00:08:58,990 So that was 40 plus eight plus 23 minus 10. 165 00:08:59,950 --> 00:09:01,360 Let's give it a save. 166 00:09:01,360 --> 00:09:03,120 And you see that JavaScript 167 00:09:03,120 --> 00:09:05,700 actually automatically formatted this code. 168 00:09:05,700 --> 00:09:06,840 And I will show you later 169 00:09:06,840 --> 00:09:10,040 how you can set that up for yourself. 170 00:09:10,040 --> 00:09:13,160 Anyway, if we now reload this page here 171 00:09:13,160 --> 00:09:15,743 where do you think this result will appear? 172 00:09:17,610 --> 00:09:20,580 So clearly it's not in this alert 173 00:09:20,580 --> 00:09:23,220 and it's also nowhere on this page 174 00:09:23,220 --> 00:09:26,763 because we didn't tell JavaScript to put it on the page. 175 00:09:27,620 --> 00:09:30,590 So let's open up the inspector here 176 00:09:30,590 --> 00:09:34,403 and that will do inspect and then the console. 177 00:09:35,430 --> 00:09:39,650 And then again increase the text command plus plus, 178 00:09:39,650 --> 00:09:40,823 and plus again. 179 00:09:41,970 --> 00:09:45,610 And just see that the result is also not in the console. 180 00:09:45,610 --> 00:09:46,790 So why is that? 181 00:09:46,790 --> 00:09:51,180 Why is this result not in a console like it was before? 182 00:09:51,180 --> 00:09:52,970 Well it's because the console 183 00:09:52,970 --> 00:09:55,350 is just an environment that was built 184 00:09:55,350 --> 00:09:57,800 to execute small pieces of code 185 00:09:57,800 --> 00:09:59,900 and then show results immediately. 186 00:09:59,900 --> 00:10:02,690 So just like we did in a previous lecture. 187 00:10:02,690 --> 00:10:04,200 But it doesn't show results 188 00:10:04,200 --> 00:10:07,610 of our operations in code by default. 189 00:10:07,610 --> 00:10:10,130 Now, if we still want to display results, 190 00:10:10,130 --> 00:10:13,940 for example from a calculation like this here in the console 191 00:10:13,940 --> 00:10:17,720 we need to tell JavaScript to explicitly output that result 192 00:10:17,720 --> 00:10:19,260 to the console. 193 00:10:19,260 --> 00:10:22,170 And we can do that using a special function 194 00:10:22,170 --> 00:10:26,330 called console.log, okay? 195 00:10:26,330 --> 00:10:31,330 And then if we take this code here and copy and paste it 196 00:10:31,410 --> 00:10:34,703 and then save it and then reload, 197 00:10:36,420 --> 00:10:38,320 we need to click OK 198 00:10:38,320 --> 00:10:40,863 so that JavaScript can move on to the next line. 199 00:10:41,730 --> 00:10:43,630 And then we actually get the results 200 00:10:43,630 --> 00:10:45,980 printed to the console here. 201 00:10:45,980 --> 00:10:47,370 And it actually says 202 00:10:47,370 --> 00:10:51,260 that it's coming from index.html at line 31. 203 00:10:51,260 --> 00:10:53,340 And so that's exactly the line 204 00:10:53,340 --> 00:10:55,633 where we did to this computation. 205 00:10:56,750 --> 00:10:58,900 Okay, But let's recap here 206 00:10:58,900 --> 00:11:02,770 because I know that this is confusing for many beginners. 207 00:11:02,770 --> 00:11:06,560 So in the last lecture we were already in the console. 208 00:11:06,560 --> 00:11:10,700 And so then there was no need for using console.log. 209 00:11:10,700 --> 00:11:12,800 We also needed to no script tag 210 00:11:12,800 --> 00:11:15,200 when we were in the console, right? 211 00:11:15,200 --> 00:11:17,880 But now we are actually in a script 212 00:11:17,880 --> 00:11:19,650 and no longer in the console. 213 00:11:19,650 --> 00:11:23,520 And so now we need to explicitly say console.log 214 00:11:23,520 --> 00:11:26,420 whenever we want to access the developer console 215 00:11:26,420 --> 00:11:29,000 like we did here, okay? 216 00:11:29,000 --> 00:11:31,830 So basically this is like building a bridge 217 00:11:31,830 --> 00:11:35,300 between script here and to develop a console 218 00:11:35,300 --> 00:11:38,700 on the other side that lives in the browser. 219 00:11:38,700 --> 00:11:40,620 And now to finish this lecture 220 00:11:40,620 --> 00:11:43,620 let's actually take this JavaScript code 221 00:11:43,620 --> 00:11:46,100 out of the HTML file 222 00:11:46,100 --> 00:11:49,850 and put it into its own separate JavaScript file. 223 00:11:49,850 --> 00:11:51,430 So what we have right now 224 00:11:51,430 --> 00:11:54,980 this script here is an inline script. 225 00:11:54,980 --> 00:11:57,920 And the only advantage of an inline script 226 00:11:57,920 --> 00:12:00,720 is that we don't have to load another file. 227 00:12:00,720 --> 00:12:01,970 But on the other hand 228 00:12:01,970 --> 00:12:05,340 it's pretty bad for separating the website content 229 00:12:05,340 --> 00:12:07,210 from the JavaScript logic. 230 00:12:07,210 --> 00:12:10,510 And so usually we use external JavaScript files 231 00:12:10,510 --> 00:12:13,270 as I just mentioned, okay? 232 00:12:13,270 --> 00:12:15,918 So let's come back to the sidebar here 233 00:12:15,918 --> 00:12:17,880 and create a new file 234 00:12:17,880 --> 00:12:21,510 which I'm gonna call script.js. 235 00:12:21,510 --> 00:12:23,550 And that's a pretty standard name 236 00:12:23,550 --> 00:12:27,710 for a JavaScript script, okay? 237 00:12:27,710 --> 00:12:30,320 So let's take that back, 238 00:12:30,320 --> 00:12:32,540 come here, copy this code 239 00:12:35,010 --> 00:12:36,720 and paste it here. 240 00:12:36,720 --> 00:12:38,700 And then once more VS code 241 00:12:38,700 --> 00:12:41,670 actually formatted the code here nicely. 242 00:12:41,670 --> 00:12:45,570 If it didn't on your computer, then just do that manually 243 00:12:45,570 --> 00:12:49,570 and I will show you later how to set that up, okay? 244 00:12:49,570 --> 00:12:52,223 And now we can get rid of this script here. 245 00:12:54,180 --> 00:12:57,430 Great, now we have a better separation of concerns 246 00:12:57,430 --> 00:12:59,770 between presentation and logic. 247 00:12:59,770 --> 00:13:01,420 And this also makes it easier 248 00:13:01,420 --> 00:13:04,400 to maintain code in the long run. 249 00:13:04,400 --> 00:13:08,140 All there is to do now is to link this JavaScript file 250 00:13:08,140 --> 00:13:09,610 to the HTML file 251 00:13:09,610 --> 00:13:13,127 because right now, HTML has no way of knowing 252 00:13:13,127 --> 00:13:16,110 where the code is actually located. 253 00:13:16,110 --> 00:13:19,670 So if we execute this code by reloading the browser, 254 00:13:19,670 --> 00:13:21,642 now nothing will happen. 255 00:13:21,642 --> 00:13:26,070 Again because this HTML file right now does not know 256 00:13:26,070 --> 00:13:28,670 where to find the JavaScript code. 257 00:13:28,670 --> 00:13:30,710 So let's do that connection. 258 00:13:30,710 --> 00:13:35,710 And we usually do that at the end of the body tag, okay? 259 00:13:35,890 --> 00:13:38,893 And actually we will use script again. 260 00:13:41,110 --> 00:13:43,000 All right, but now at this time 261 00:13:43,000 --> 00:13:46,970 we're not gonna put any code inside this script element 262 00:13:46,970 --> 00:13:50,393 but instead we are gonna specify the source attribute. 263 00:13:51,230 --> 00:13:54,340 So here all we need to do is to then specify 264 00:13:54,340 --> 00:13:58,350 the name of the script and the location. 265 00:13:58,350 --> 00:14:01,290 Now, in this case descript, 266 00:14:01,290 --> 00:14:03,310 so it descript.js file 267 00:14:03,310 --> 00:14:06,380 is in the same folder as index.html. 268 00:14:06,380 --> 00:14:07,787 So all we have to do here 269 00:14:07,787 --> 00:14:11,700 is to just write the file name like this. 270 00:14:11,700 --> 00:14:16,700 We don't have to specify the entire path to the file, okay? 271 00:14:16,740 --> 00:14:19,603 So if we save this now and reload, 272 00:14:20,670 --> 00:14:24,270 then you see that it's back to working. 273 00:14:24,270 --> 00:14:27,040 So we have this popup here again 274 00:14:27,040 --> 00:14:30,900 and then result of this computation. 275 00:14:30,900 --> 00:14:33,430 Now, if you didn't get the alert window 276 00:14:33,430 --> 00:14:35,510 or this output here, 277 00:14:35,510 --> 00:14:37,950 then that means that your script file 278 00:14:37,950 --> 00:14:42,710 is probably not correctly linked to the HTML file. 279 00:14:42,710 --> 00:14:46,720 So in that case, please make 100% sure 280 00:14:46,720 --> 00:14:48,330 that descript file 281 00:14:48,330 --> 00:14:52,870 is in the exact same folder as the HTML file. 282 00:14:52,870 --> 00:14:57,673 Also make sure that you correctly spelt script SRC 283 00:14:58,900 --> 00:15:01,780 just as they have it here in my HTML. 284 00:15:01,780 --> 00:15:04,080 And finally also make sure 285 00:15:04,080 --> 00:15:07,486 that you have no errors in your Java script code. 286 00:15:07,486 --> 00:15:11,820 So these are some common mistakes that I see people make 287 00:15:11,820 --> 00:15:15,573 which then leads to their script not being correctly linked. 288 00:15:16,640 --> 00:15:19,870 Okay, but anyway at this point, 289 00:15:19,870 --> 00:15:23,703 we no longer need index.html open here. 290 00:15:24,720 --> 00:15:27,410 And here we have only our code logic. 291 00:15:27,410 --> 00:15:30,120 The rest of the presentation is gone. 292 00:15:30,120 --> 00:15:33,453 And so this is much cleaner and much easier to work with. 293 00:15:34,530 --> 00:15:38,290 Great, so now you know how to link a JavaScript file 294 00:15:38,290 --> 00:15:42,730 to an HTML file and then how to run it all in the browser. 295 00:15:42,730 --> 00:15:45,140 And that means that you're now finally able 296 00:15:45,140 --> 00:15:48,540 to really start learning the JavaScript language. 297 00:15:48,540 --> 00:15:50,300 So see you in the next lecture 298 00:15:50,300 --> 00:15:52,613 where we're gonna start doing just that.