WEBVTT 1 00:00:01.110 --> 00:00:03.430 Now to close off this section, 2 00:00:03.430 --> 00:00:07.070 let's take a quick look at a couple of different events 3 00:00:07.070 --> 00:00:11.460 that occur in the DOM during a webpage's life cycle. 4 00:00:11.460 --> 00:00:13.390 And when we say lifecycle, 5 00:00:13.390 --> 00:00:15.390 we mean right from the moment 6 00:00:15.390 --> 00:00:19.313 that the page is first accessed, until the user leaves it. 7 00:00:20.980 --> 00:00:25.060 And let's do that right here at the end of this file. 8 00:00:25.060 --> 00:00:27.660 Now, the first event that we need to talk about 9 00:00:27.660 --> 00:00:30.950 is called DOM content loaded. 10 00:00:30.950 --> 00:00:33.550 And this event is fired by the document 11 00:00:33.550 --> 00:00:36.740 as soon as the HTML is completely parsed, 12 00:00:36.740 --> 00:00:39.910 which means that the HTML has been downloaded 13 00:00:39.910 --> 00:00:42.700 and been converted to the DOM tree. 14 00:00:42.700 --> 00:00:46.630 Also, all scripts must be downloaded and executed 15 00:00:46.630 --> 00:00:50.850 before the DOM content loaded event can happen. 16 00:00:50.850 --> 00:00:53.490 And of course we can listen to that event, 17 00:00:53.490 --> 00:00:56.230 and since it happens on the document, 18 00:00:56.230 --> 00:01:00.283 we call the add event listener method on the document. 19 00:01:01.307 --> 00:01:04.713 And then name of the event is, as I mentioned, 20 00:01:05.570 --> 00:01:08.243 DOM content loaded. 21 00:01:11.040 --> 00:01:11.873 All right, 22 00:01:13.300 --> 00:01:17.650 now this event does actually not wait for images and other 23 00:01:17.650 --> 00:01:20.200 external resources to load. 24 00:01:20.200 --> 00:01:25.180 Okay. So just HTML and JavaScript need to be loaded. 25 00:01:25.180 --> 00:01:29.260 So let's now take a look at this event or basically just 26 00:01:29.260 --> 00:01:30.893 lock something to the console. 27 00:01:31.820 --> 00:01:36.430 So HTML, parsed and DOM tree 28 00:01:38.650 --> 00:01:43.050 built, and we can also take a look at the event. 29 00:01:43.050 --> 00:01:44.630 Okay. 30 00:01:44.630 --> 00:01:45.523 So let's see. 31 00:01:46.670 --> 00:01:51.160 And so indeed we get the event here, right? 32 00:01:51.160 --> 00:01:54.590 Basically at the beginning and in this case, 33 00:01:54.590 --> 00:01:56.370 it's a bit hard to see. 34 00:01:56.370 --> 00:01:59.280 And so let's again, go tour a network tab 35 00:02:01.200 --> 00:02:06.200 and I'm decreasing it here and I will set it to fast 3G now. 36 00:02:07.390 --> 00:02:08.580 And down here, 37 00:02:08.580 --> 00:02:12.130 you can actually see the time that it takes for the event to 38 00:02:12.130 --> 00:02:13.290 be fired. 39 00:02:13.290 --> 00:02:16.630 So in this case, it was just 85 milliseconds. 40 00:02:16.630 --> 00:02:19.113 And so therefore it was a really fast. 41 00:02:20.290 --> 00:02:25.290 So let's try that again with a fast 3G connection. 42 00:02:25.310 --> 00:02:29.170 And so now it actually took two seconds for the JavaScript 43 00:02:29.170 --> 00:02:31.080 and the HTML to load, 44 00:02:31.080 --> 00:02:35.130 but you see that still after that some other code here or 45 00:02:35.130 --> 00:02:36.853 some other stuff kept loading. 46 00:02:37.950 --> 00:02:41.313 So that's probably all these images that we have here. 47 00:02:42.350 --> 00:02:44.950 And of course, as we keep scrolling, there these 48 00:02:44.950 --> 00:02:47.510 other images also start loading. So that's, 49 00:02:47.510 --> 00:02:48.610 what's happening here. 50 00:02:50.040 --> 00:02:51.700 All right. 51 00:02:51.700 --> 00:02:55.010 So this year we can now execute code that should only be 52 00:02:55.010 --> 00:02:58.640 executed after the DOM is available. 53 00:02:58.640 --> 00:02:59.500 And in fact, 54 00:02:59.500 --> 00:03:03.370 we want all our code only to be executed after the DOM is 55 00:03:03.370 --> 00:03:04.360 ready. 56 00:03:04.360 --> 00:03:05.430 Right? 57 00:03:05.430 --> 00:03:09.370 So does that mean that we should wrap our entire code into 58 00:03:09.370 --> 00:03:11.690 an event listener like this? 59 00:03:11.690 --> 00:03:15.240 So with a function like this, well, actually, no, 60 00:03:15.240 --> 00:03:17.060 we don't need to do that. 61 00:03:17.060 --> 00:03:19.470 And that's because we have to script tag, 62 00:03:19.470 --> 00:03:24.470 which is the one that imports or a JavaScript into the HTML, 63 00:03:24.480 --> 00:03:26.993 right. At the end of the body. 64 00:03:28.000 --> 00:03:31.410 So you see it is down here. 65 00:03:31.410 --> 00:03:34.450 So basically it's the last thing that is going to be read in 66 00:03:34.450 --> 00:03:35.840 the HTML. 67 00:03:35.840 --> 00:03:39.870 And so basically the browser will only find or script when 68 00:03:39.870 --> 00:03:43.830 the rest of the HTML is already parsed anyway. 69 00:03:43.830 --> 00:03:48.090 So when we have to script tag here at the end of the HTML, 70 00:03:48.090 --> 00:03:51.630 then we do not need to listen for the DOM content loaded 71 00:03:51.630 --> 00:03:53.770 event. Okay. 72 00:03:53.770 --> 00:03:57.200 Now there are also other ways of loading the JavaScript file 73 00:03:57.200 --> 00:03:58.530 with the script tag, 74 00:03:58.530 --> 00:04:01.790 but we're going to talk about that in the next lecture. 75 00:04:01.790 --> 00:04:04.660 Now, right now, if you're coming to vanilla, 76 00:04:04.660 --> 00:04:07.250 JavaScript from jQuery, 77 00:04:07.250 --> 00:04:11.030 then you're probably used to wrap all your code into a 78 00:04:11.030 --> 00:04:12.373 document ready function, which in JavaScript, 79 00:04:12.373 --> 00:04:17.373 or actually in jQuery, it looks something like this. 80 00:04:18.160 --> 00:04:21.650 And so this is equivalent to the DOM content loaded in 81 00:04:21.650 --> 00:04:23.510 vanilla JavaScript. 82 00:04:23.510 --> 00:04:24.480 Okay. 83 00:04:24.480 --> 00:04:29.480 But again, no such thing is necessary in regular JavaScript. 84 00:04:29.510 --> 00:04:30.650 Okay. 85 00:04:30.650 --> 00:04:31.483 Anyway, 86 00:04:31.483 --> 00:04:35.810 next up there is also the load event and the load event is 87 00:04:35.810 --> 00:04:40.750 fired by the window. As soon as not only the HTML is parsed, 88 00:04:40.750 --> 00:04:45.110 but also all the images and external resources like CSS 89 00:04:45.110 --> 00:04:47.600 files are also loaded. 90 00:04:47.600 --> 00:04:51.230 So basically when the complete page has finished loading is 91 00:04:51.230 --> 00:04:53.163 when this event gets fired. 92 00:04:55.290 --> 00:04:58.853 So as always, we can also then listen to that. 93 00:04:59.940 --> 00:05:00.917 So load., 94 00:05:03.550 --> 00:05:04.463 function, 95 00:05:07.334 --> 00:05:08.663 and then here we can log. 96 00:05:12.060 --> 00:05:14.623 Page fully loaded along with the event. 97 00:05:16.330 --> 00:05:18.380 So let's take a look here in our console. 98 00:05:20.370 --> 00:05:23.260 So we already got this event. And then at the end, 99 00:05:23.260 --> 00:05:27.793 when everything was finished, we also got this load event. 100 00:05:29.300 --> 00:05:32.900 So you see it's just a regular event object like we already 101 00:05:32.900 --> 00:05:33.950 know. 102 00:05:33.950 --> 00:05:35.110 And again, 103 00:05:35.110 --> 00:05:39.940 this load time actually appears down here in the network tap 104 00:05:39.940 --> 00:05:40.960 now, right? 105 00:05:40.960 --> 00:05:45.600 We can also see the amount of kilobytes that was downloaded. 106 00:05:45.600 --> 00:05:49.140 And so this network tab is really nice and it gives us a lot 107 00:05:49.140 --> 00:05:52.420 of information about loading our pages. 108 00:05:52.420 --> 00:05:55.500 And of course you can try to explore this network tab a 109 00:05:55.500 --> 00:05:56.973 little bit more on your own. 110 00:05:58.110 --> 00:05:58.943 Now, finally, 111 00:05:58.943 --> 00:06:02.470 the last event that I want to show you is the before unload 112 00:06:02.470 --> 00:06:05.863 event, which also gets fired on window. 113 00:06:06.870 --> 00:06:09.053 So window.add event listener. 114 00:06:09.920 --> 00:06:14.920 And so that's before unload. 115 00:06:19.930 --> 00:06:24.430 And this event here is created immediately before a user is 116 00:06:24.430 --> 00:06:27.100 about to leave a page. So for example, 117 00:06:27.100 --> 00:06:31.123 after clicking this close button here in the browser tab, 118 00:06:32.230 --> 00:06:37.150 so we can basically use this event to ask users if they are 119 00:06:37.150 --> 00:06:40.213 100% sure that they want to leave the page. 120 00:06:41.120 --> 00:06:43.380 Now in some browsers to make this work, 121 00:06:43.380 --> 00:06:47.940 we need to call prevent default here. In Chrome 122 00:06:47.940 --> 00:06:51.373 it's not necessary, but some browsers require it. 123 00:06:52.660 --> 00:06:55.743 And then we can also take a look at the event itself. 124 00:06:56.970 --> 00:06:59.363 Here let's remove that. 125 00:07:00.220 --> 00:07:04.320 And actually in order to display a leaving confirmation, 126 00:07:04.320 --> 00:07:08.720 we need to set the return value on the event to an empty 127 00:07:08.720 --> 00:07:10.260 string. 128 00:07:10.260 --> 00:07:13.280 So return value and an empty string. 129 00:07:13.280 --> 00:07:16.040 And this probably looks a bit weird, 130 00:07:16.040 --> 00:07:18.193 but this is for historical reasons. 131 00:07:19.080 --> 00:07:19.913 All right. 132 00:07:19.913 --> 00:07:22.870 So let me show you what happens as we try to close the tab 133 00:07:22.870 --> 00:07:23.703 now. 134 00:07:24.610 --> 00:07:27.810 And so now we get this pop up here, indeed, 135 00:07:27.810 --> 00:07:31.280 which asks us if we want to leave the site. 136 00:07:31.280 --> 00:07:32.890 Now a long time ago, 137 00:07:32.890 --> 00:07:36.990 developers were actually able to customize the message 138 00:07:36.990 --> 00:07:39.150 that was displayed here, but then of course, 139 00:07:39.150 --> 00:07:41.830 many people started to abuse this. 140 00:07:41.830 --> 00:07:46.460 And so now we can only see it as a generic message. 141 00:07:46.460 --> 00:07:48.733 So no matter what we write here, 142 00:07:50.270 --> 00:07:55.270 we will always get this same pop-up. 143 00:07:55.830 --> 00:07:56.663 Okay. 144 00:07:59.160 --> 00:08:01.860 So let's remove this and this can, 145 00:08:01.860 --> 00:08:03.740 of course sometimes be useful, 146 00:08:03.740 --> 00:08:06.530 but sometimes it's also a bit too much. 147 00:08:06.530 --> 00:08:09.870 So let's actually remove all of this year. 148 00:08:09.870 --> 00:08:10.703 Okay. 149 00:08:11.860 --> 00:08:14.493 Now we cannot even reload the page here. 150 00:08:18.160 --> 00:08:21.970 I will actually have to open up a new tab with this and 151 00:08:21.970 --> 00:08:22.963 close this one. 152 00:08:26.800 --> 00:08:28.380 Alright. 153 00:08:28.380 --> 00:08:31.040 So really please don't abuse 154 00:08:31.040 --> 00:08:34.820 this kind of feature because a message like this is of 155 00:08:34.820 --> 00:08:38.450 course pretty intrusive and it should only be displayed when 156 00:08:38.450 --> 00:08:39.710 necessary. 157 00:08:39.710 --> 00:08:43.550 So don't be one of these developers who abuses too much 158 00:08:43.550 --> 00:08:44.530 power. 159 00:08:44.530 --> 00:08:46.800 So the only time you should prompt the user, 160 00:08:46.800 --> 00:08:50.050 if they really want to leave the page is for example, 161 00:08:50.050 --> 00:08:53.200 when the user is leaving in the middle of filling out the 162 00:08:53.200 --> 00:08:57.700 form, or like writing a blog post or something like that. 163 00:08:57.700 --> 00:09:01.590 So a situation in which data could actually be lost by 164 00:09:01.590 --> 00:09:03.240 accident. 165 00:09:03.240 --> 00:09:05.410 And that's actually all I had to show you. 166 00:09:05.410 --> 00:09:08.950 So that's the three events that can be quite helpful in some 167 00:09:08.950 --> 00:09:13.950 situations. And specially this one, I would say now, right? 168 00:09:14.490 --> 00:09:17.020 And now in the next video to finish this section, 169 00:09:17.020 --> 00:09:21.040 we will take a closer look at this event and at different 170 00:09:21.040 --> 00:09:23.693 ways of loading scripts in HTML.