WEBVTT 0 00:00.570 --> 00:07.140 So up till now we've been learning about Javascript and using it inside the Chrome Developer Tools console. 1 00:07.200 --> 00:10.140 Now this is the purest form of Javascript. 2 00:10.140 --> 00:15.640 We're seeing the code as it is and seeing what it does. But it's no use learning about it 3 00:15.660 --> 00:17.620 if we're not going to apply it to our web site, 4 00:17.640 --> 00:17.970 right? 5 00:18.060 --> 00:22.920 So in this lesson, I want to show you how we can incorporate Javascript into our web sites. 6 00:22.920 --> 00:27.630 So firstly I'm going to create a new folder alongside my other web development projects, and I'm going 7 00:27.630 --> 00:33.810 to call this one the DOM. And we're going to explain what the DOM or the Document Object Model is all 8 00:33.810 --> 00:34.290 about 9 00:34.440 --> 00:36.150 coming up really really soon. 10 00:36.270 --> 00:42.450 But we're going to add this into Atom, and I'm going to create a new HTML file called index.html. 11 00:42.480 --> 00:48.240 Now we're going to go through our traditional process of adding in the html boilerplate, giving our 12 00:48.240 --> 00:56.640 web site a title, which I'm just going to call My Website, and then I'm going to link it up with a 13 00:56.640 --> 01:03.200 stylesheet as well, which I'll just call styles.css, and we can create that in here as well, 14 01:04.380 --> 01:05.350 styles. 15 01:05.360 --> 01:06.190 css. 16 01:06.220 --> 01:11.230 Now it's completely blank and that's totally fine because we're not going to be using it for a while. And 17 01:11.260 --> 01:16.200 we're going to head back into our HTML, and we're just going to add a heading that says Hello. 18 01:16.350 --> 01:19.910 And this is all we have as our simple web site. 19 01:20.180 --> 01:23.590 And you can see it doesn't look very exciting at the moment. 20 01:23.600 --> 01:27.870 Now what if we wanted to insert some Javascript? 21 01:27.880 --> 01:33.940 So previously we've been working a lot with alerts, and what if we can get our web site to load up a 22 01:33.940 --> 01:35.290 Javascript alert? 23 01:35.290 --> 01:41.120 Now in the CSS module we explored all the various ways that you can inject CSS into your HTML web 24 01:41.120 --> 01:41.820 sites. 25 01:42.010 --> 01:45.690 And if you remember there were three ways that we can go about doing that. 26 01:45.700 --> 01:51.030 One is inline CSS, the next is internal, and the last one is external 27 01:51.110 --> 01:53.410 CSS, as we have over here. 28 01:53.650 --> 01:58.150 Now if you don't remember any of that or if you skipped over and you want to refresh yourself then you 29 01:58.150 --> 02:01.750 can head back to the CSS module where we talk about these things. 30 02:01.960 --> 02:04.420 Now Javascript works really similarly. 31 02:04.480 --> 02:11.630 So we can add inline Javascript by simply adding an attribute into the HTML tag. 32 02:11.830 --> 02:17.510 So, for example, in the body, I'm going to add an attribute called onload. 33 02:17.620 --> 02:25.030 And what this means is that when the body of our web site gets loaded up, then whatever Javascript we 34 02:25.030 --> 02:29.260 place inside these two quotation marks will get carried out. 35 02:29.260 --> 02:36.400 So what I'm going to say is that when our body is loaded up I'm going to create an alert, and the alert 36 02:36.430 --> 02:38.420 is going to say Hello. 37 02:38.710 --> 02:44.800 Now there's a bit of a problem here because you can see that the Javascript that gets created inline 38 02:45.170 --> 02:49.750 in our HTML has to be included inside some quotation marks. 39 02:49.870 --> 02:56.260 But in our alert we also want to have the string “Hello”, which is also enclosed by quotation marks. 40 02:56.410 --> 03:02.890 So you can see how this is confusing, because to the browser it might think that this is a string, and 41 03:03.040 --> 03:09.310 this is a string, and you can see it in fact is highlighting it exactly that way, because the green parts 42 03:09.350 --> 03:14.160 are the things that it thinks is a string and the orange part it's interpreting as code. 43 03:14.170 --> 03:20.410 So, in these situations, when we've got a quotation mark inside another set of quotation marks, what we 44 03:20.410 --> 03:24.880 have to do is we have to downgrade our quotation marks to a single quote. 45 03:25.120 --> 03:29.650 So instead of having double quotes we change it to a single quote and now it knows what we're talking 46 03:29.650 --> 03:30.290 about. 47 03:30.310 --> 03:35.110 This is one pair and this is another pair, and this makes perfect sense 48 03:35.110 --> 03:42.070 now. When the body element gets loaded up it's going to look inside these quotation marks to carry out 49 03:42.160 --> 03:45.550 all of the Javascript that's in here, and, to be complete, 50 03:45.580 --> 03:49.760 we should also just add a semi-colon there to close off that line of code. 51 03:50.050 --> 03:55.390 And this line of code is very familiar to us because we've been using it a lot in the previous modules 52 03:55.690 --> 03:58.680 and all it does is it creates an alert that says Hello. 53 03:58.690 --> 04:06.220 So now if I save my web page and I head over to Chrome and I hit refresh, then you can see, as soon as 54 04:06.220 --> 04:13.360 the body gets loaded up, we get an alert that says Hello. Now inline Javascript has a lot of the downsides 55 04:13.450 --> 04:16.570 of inline CSS. It’s not very modular, 56 04:16.580 --> 04:21.270 it’s difficult to debug, and it's also not good practice as well, 57 04:21.310 --> 04:23.610 so try to avoid that if you can. 58 04:23.620 --> 04:30.040 Now the next way of incorporating Javascript is internal Javascript. So can add it by simply using 59 04:30.100 --> 04:37.630 a script tag, and everything in between the script can simply be Javascript code. So we can write script 60 04:37.660 --> 04:39.460 type javascript, 61 04:39.460 --> 04:41.320 alert (“Hello”). 62 04:41.920 --> 04:44.710 And you can see this is just normal old Javascript, 63 04:44.710 --> 04:47.740 it doesn't have to be contained inside quotation marks this time, 64 04:47.740 --> 04:52.700 so we can go back to our default way of putting strings inside quotation marks. 65 04:52.930 --> 04:57.580 And now if I hit save you can see it does exactly the same thing. 66 04:57.670 --> 05:02.980 The browser will read through this web site line by line and, once it hits this script tag, it'll carry 67 05:02.980 --> 05:08.270 out the Javascript that's inside, which in this case is simply an alert that says Hello. 68 05:08.620 --> 05:13.860 Now finally we can also incorporate Javascript as an external file. 69 05:13.900 --> 05:21.010 So instead of having a simple script tag we can have a script tag that has an external source and we 70 05:21.010 --> 05:26.030 specify the location of that file inside the attribute src. 71 05:26.240 --> 05:29.720 And so let's go ahead and create a new file, 72 05:29.740 --> 05:34.170 and let's just call index.js to create the new Javascript file. 73 05:34.510 --> 05:38.490 And now we can point to it by saying index.js. 74 05:38.500 --> 05:46.440 So now if we hit save we can add our Javascript code in here and we can say again, same thing, 75 05:46.450 --> 05:48.070 create an alert that says Hello. 76 05:48.430 --> 05:49.890 So now when I refresh, 77 05:50.170 --> 05:51.540 exactly the same thing, 78 05:51.580 --> 05:56.620 even though there's no Javascript inside our HTML code at all. 79 05:56.710 --> 06:02.000 So this should be pretty familiar especially if you've already completed the CSS module. 80 06:02.020 --> 06:08.930 Now the thing that is interesting though is that the position inside the HTML document where we place the 81 06:08.930 --> 06:13.250 script tag matters a huge deal. With CSS, 82 06:13.250 --> 06:20.360 we tend to put it inside the head element so that it gets loaded up first before any of the content 83 06:20.390 --> 06:23.300 of our web site, which tends to be inside the body. 84 06:23.300 --> 06:31.550 And this is important because if we placed this CSS code right up the bottom of our web site, say just 85 06:31.610 --> 06:41.790 as our web site ends, let's say that we go into styles.css and we change the h1's color to red. 86 06:41.880 --> 06:49.560 Now what happens when we run our code is that the browser will go from top to bottom line by line and 87 06:49.650 --> 06:55.840 when it gets to the h1 it'll create a normal bog standard h1, black text, Serif font, 88 06:56.010 --> 07:04.380 and it's only much later on, once it hits the stylesheet, does it actually apply these styles, changing 89 07:04.380 --> 07:09.090 the color to red. So now, if I run. 90 07:09.150 --> 07:15.690 So now if I go back to my web site and I refresh it, you can see the first thing that happens is I get 91 07:15.780 --> 07:18.210 a h1 that gets generated 92 07:18.220 --> 07:19.540 that's black, 93 07:20.010 --> 07:21.530 so we're at this line. 94 07:21.680 --> 07:28.400 The next thing that happens is our script gets carried out which if you remember is to create the alert. 95 07:28.470 --> 07:30.250 So we're at the alert at this point. 96 07:30.410 --> 07:38.460 And now if I dismiss the script it goes onto the next line which is carrying out the instructions inside 97 07:38.830 --> 07:41.590 our stylesheet namely changing the color to red. 98 07:41.820 --> 07:49.500 So that's why, with CSS, you always want to put it right at the top, just below the title usually. But with 99 07:49.500 --> 07:57.690 Javascript it's the opposite story, because if inside our script we tried to change an HTML element that 100 07:57.750 --> 08:01.410 does not yet exist then it will fail. 101 08:01.410 --> 08:07.410 So I'm going to go inside my index.js and I'm going to write some Javascript code that looks 102 08:07.410 --> 08:16.050 inside our HTML document, looks for the selector that's h1, and then when it finds that element, I'm 103 08:16.050 --> 08:20.700 going to change its inner HTML, which is basically the text that's inside. 104 08:20.700 --> 08:22.770 So currently the inner HTML, 105 08:22.800 --> 08:30.330 so between the html elements, says Hello, but I'm going to change it to the string that's Good Bye instead. 106 08:30.330 --> 08:35.130 Don't worry if this looks unfamiliar, we're going to be digging much deeper into this in the coming lessons. 107 08:35.130 --> 08:36.800 Now here's the interesting part. 108 08:36.900 --> 08:46.380 If my script, which is trying to look for an h1 to change its text to Good Bye, is below the h1, 109 08:46.380 --> 08:51.990 so after the h1 has already been created, then you can see that it works. 110 08:51.990 --> 08:54.650 It found the h1 and it changed 111 08:54.680 --> 08:58.800 it's inner HTML, or rather the text, to Good Bye. But, 112 08:58.830 --> 09:04.050 if I move this script into the head which will get loaded up first, 113 09:04.110 --> 09:11.370 so as the browser reads from top to bottom it will hit the script and it will look inside our index.js 114 09:11.370 --> 09:17.440 and try to look for an h1 to change its text to Good Bye. 115 09:17.490 --> 09:21.560 But at this stage we don't have an h1 on the screen yet, 116 09:21.630 --> 09:23.940 so what is it going to change? 117 09:23.970 --> 09:25.330 So let's check this out. 118 09:25.380 --> 09:32.070 If I hit refresh you can see that we actually get an error in the console and it says that Cannot set 119 09:32.070 --> 09:34.760 property 'innerHTML' of null. 120 09:34.920 --> 09:40.620 And that's because, at the time point when we tried to run this script to look for an h1, there were 121 09:40.620 --> 09:41.610 no h1s. 122 09:41.610 --> 09:42.780 It didn't exist yet. 123 09:42.870 --> 09:44.410 So this was null, 124 09:44.580 --> 09:46.600 and that's why it didn't work. 125 09:46.740 --> 09:54.170 So best practice is always to put the script right at the end just before the closing body tag. 126 09:54.510 --> 10:00.150 And the added benefit of this is, if you have a lot of Javascript code, which usually is a little bit 127 10:00.150 --> 10:06.870 more time consuming to run, then at least all of the content of your web site will have been loaded up 128 10:06.870 --> 10:12.970 for the users to see, and the parts that they can't perceive, like the script code, happens afterwards, 129 10:12.990 --> 10:15.580 so your website looks like it loads faster, 130 10:15.810 --> 10:21.060 whereas if you put the script right at the top, and the browser has to go through all of the code before 131 10:21.070 --> 10:26.580 it can display all of the elements, then it might look like your web site is taking a long time to load 132 10:26.580 --> 10:29.370 up, which nobody has the patience for, right? Now, 133 10:29.400 --> 10:33.980 in the next lesson, we're going to learn more about this Document Object Model, 134 10:34.140 --> 10:40.090 and the technology that's enabling us to select and manipulate the HTML elements. 135 10:40.090 --> 10:43.460 So for all of that and more, I'll see you on the next lesson.