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.