Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,110 --> 00:00:03,430
Now to close off this section,
2
2
00:00:03,430 --> 00:00:07,070
let's take a quick look at a couple of different events
3
3
00:00:07,070 --> 00:00:11,460
that occur in the DOM during a webpage's life cycle.
4
4
00:00:11,460 --> 00:00:13,390
And when we say lifecycle,
5
5
00:00:13,390 --> 00:00:15,390
we mean right from the moment
6
6
00:00:15,390 --> 00:00:19,313
that the page is first accessed, until the user leaves it.
7
7
00:00:20,980 --> 00:00:25,060
And let's do that right here at the end of this file.
8
8
00:00:25,060 --> 00:00:27,660
Now, the first event that we need to talk about
9
9
00:00:27,660 --> 00:00:30,950
is called DOM content loaded.
10
10
00:00:30,950 --> 00:00:33,550
And this event is fired by the document
11
11
00:00:33,550 --> 00:00:36,740
as soon as the HTML is completely parsed,
12
12
00:00:36,740 --> 00:00:39,910
which means that the HTML has been downloaded
13
13
00:00:39,910 --> 00:00:42,700
and been converted to the DOM tree.
14
14
00:00:42,700 --> 00:00:46,630
Also, all scripts must be downloaded and executed
15
15
00:00:46,630 --> 00:00:50,850
before the DOM content loaded event can happen.
16
16
00:00:50,850 --> 00:00:53,490
And of course we can listen to that event,
17
17
00:00:53,490 --> 00:00:56,230
and since it happens on the document,
18
18
00:00:56,230 --> 00:01:00,283
we call the add event listener method on the document.
19
19
00:01:01,307 --> 00:01:04,713
And then name of the event is, as I mentioned,
20
20
00:01:05,570 --> 00:01:08,243
DOM content loaded.
21
21
00:01:11,040 --> 00:01:11,873
All right,
22
22
00:01:13,300 --> 00:01:17,650
now this event does actually not wait for images and other
23
23
00:01:17,650 --> 00:01:20,200
external resources to load.
24
24
00:01:20,200 --> 00:01:25,180
Okay. So just HTML and JavaScript need to be loaded.
25
25
00:01:25,180 --> 00:01:29,260
So let's now take a look at this event or basically just
26
26
00:01:29,260 --> 00:01:30,893
lock something to the console.
27
27
00:01:31,820 --> 00:01:36,430
So HTML, parsed and DOM tree
28
28
00:01:38,650 --> 00:01:43,050
built, and we can also take a look at the event.
29
29
00:01:43,050 --> 00:01:44,630
Okay.
30
30
00:01:44,630 --> 00:01:45,523
So let's see.
31
31
00:01:46,670 --> 00:01:51,160
And so indeed we get the event here, right?
32
32
00:01:51,160 --> 00:01:54,590
Basically at the beginning and in this case,
33
33
00:01:54,590 --> 00:01:56,370
it's a bit hard to see.
34
34
00:01:56,370 --> 00:01:59,280
And so let's again, go tour a network tab
35
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
36
00:02:07,390 --> 00:02:08,580
And down here,
37
37
00:02:08,580 --> 00:02:12,130
you can actually see the time that it takes for the event to
38
38
00:02:12,130 --> 00:02:13,290
be fired.
39
39
00:02:13,290 --> 00:02:16,630
So in this case, it was just 85 milliseconds.
40
40
00:02:16,630 --> 00:02:19,113
And so therefore it was a really fast.
41
41
00:02:20,290 --> 00:02:25,290
So let's try that again with a fast 3G connection.
42
42
00:02:25,310 --> 00:02:29,170
And so now it actually took two seconds for the JavaScript
43
43
00:02:29,170 --> 00:02:31,080
and the HTML to load,
44
44
00:02:31,080 --> 00:02:35,130
but you see that still after that some other code here or
45
45
00:02:35,130 --> 00:02:36,853
some other stuff kept loading.
46
46
00:02:37,950 --> 00:02:41,313
So that's probably all these images that we have here.
47
47
00:02:42,350 --> 00:02:44,950
And of course, as we keep scrolling, there these
48
48
00:02:44,950 --> 00:02:47,510
other images also start loading. So that's,
49
49
00:02:47,510 --> 00:02:48,610
what's happening here.
50
50
00:02:50,040 --> 00:02:51,700
All right.
51
51
00:02:51,700 --> 00:02:55,010
So this year we can now execute code that should only be
52
52
00:02:55,010 --> 00:02:58,640
executed after the DOM is available.
53
53
00:02:58,640 --> 00:02:59,500
And in fact,
54
54
00:02:59,500 --> 00:03:03,370
we want all our code only to be executed after the DOM is
55
55
00:03:03,370 --> 00:03:04,360
ready.
56
56
00:03:04,360 --> 00:03:05,430
Right?
57
57
00:03:05,430 --> 00:03:09,370
So does that mean that we should wrap our entire code into
58
58
00:03:09,370 --> 00:03:11,690
an event listener like this?
59
59
00:03:11,690 --> 00:03:15,240
So with a function like this, well, actually, no,
60
60
00:03:15,240 --> 00:03:17,060
we don't need to do that.
61
61
00:03:17,060 --> 00:03:19,470
And that's because we have to script tag,
62
62
00:03:19,470 --> 00:03:24,470
which is the one that imports or a JavaScript into the HTML,
63
63
00:03:24,480 --> 00:03:26,993
right. At the end of the body.
64
64
00:03:28,000 --> 00:03:31,410
So you see it is down here.
65
65
00:03:31,410 --> 00:03:34,450
So basically it's the last thing that is going to be read in
66
66
00:03:34,450 --> 00:03:35,840
the HTML.
67
67
00:03:35,840 --> 00:03:39,870
And so basically the browser will only find or script when
68
68
00:03:39,870 --> 00:03:43,830
the rest of the HTML is already parsed anyway.
69
69
00:03:43,830 --> 00:03:48,090
So when we have to script tag here at the end of the HTML,
70
70
00:03:48,090 --> 00:03:51,630
then we do not need to listen for the DOM content loaded
71
71
00:03:51,630 --> 00:03:53,770
event. Okay.
72
72
00:03:53,770 --> 00:03:57,200
Now there are also other ways of loading the JavaScript file
73
73
00:03:57,200 --> 00:03:58,530
with the script tag,
74
74
00:03:58,530 --> 00:04:01,790
but we're going to talk about that in the next lecture.
75
75
00:04:01,790 --> 00:04:04,660
Now, right now, if you're coming to vanilla,
76
76
00:04:04,660 --> 00:04:07,250
JavaScript from jQuery,
77
77
00:04:07,250 --> 00:04:11,030
then you're probably used to wrap all your code into a
78
78
00:04:11,030 --> 00:04:12,373
document ready function, which in JavaScript,
79
79
00:04:12,373 --> 00:04:17,373
or actually in jQuery, it looks something like this.
80
80
00:04:18,160 --> 00:04:21,650
And so this is equivalent to the DOM content loaded in
81
81
00:04:21,650 --> 00:04:23,510
vanilla JavaScript.
82
82
00:04:23,510 --> 00:04:24,480
Okay.
83
83
00:04:24,480 --> 00:04:29,480
But again, no such thing is necessary in regular JavaScript.
84
84
00:04:29,510 --> 00:04:30,650
Okay.
85
85
00:04:30,650 --> 00:04:31,483
Anyway,
86
86
00:04:31,483 --> 00:04:35,810
next up there is also the load event and the load event is
87
87
00:04:35,810 --> 00:04:40,750
fired by the window. As soon as not only the HTML is parsed,
88
88
00:04:40,750 --> 00:04:45,110
but also all the images and external resources like CSS
89
89
00:04:45,110 --> 00:04:47,600
files are also loaded.
90
90
00:04:47,600 --> 00:04:51,230
So basically when the complete page has finished loading is
91
91
00:04:51,230 --> 00:04:53,163
when this event gets fired.
92
92
00:04:55,290 --> 00:04:58,853
So as always, we can also then listen to that.
93
93
00:04:59,940 --> 00:05:00,917
So load.,
94
94
00:05:03,550 --> 00:05:04,463
function,
95
95
00:05:07,334 --> 00:05:08,663
and then here we can log.
96
96
00:05:12,060 --> 00:05:14,623
Page fully loaded along with the event.
97
97
00:05:16,330 --> 00:05:18,380
So let's take a look here in our console.
98
98
00:05:20,370 --> 00:05:23,260
So we already got this event. And then at the end,
99
99
00:05:23,260 --> 00:05:27,793
when everything was finished, we also got this load event.
100
100
00:05:29,300 --> 00:05:32,900
So you see it's just a regular event object like we already
101
101
00:05:32,900 --> 00:05:33,950
know.
102
102
00:05:33,950 --> 00:05:35,110
And again,
103
103
00:05:35,110 --> 00:05:39,940
this load time actually appears down here in the network tap
104
104
00:05:39,940 --> 00:05:40,960
now, right?
105
105
00:05:40,960 --> 00:05:45,600
We can also see the amount of kilobytes that was downloaded.
106
106
00:05:45,600 --> 00:05:49,140
And so this network tab is really nice and it gives us a lot
107
107
00:05:49,140 --> 00:05:52,420
of information about loading our pages.
108
108
00:05:52,420 --> 00:05:55,500
And of course you can try to explore this network tab a
109
109
00:05:55,500 --> 00:05:56,973
little bit more on your own.
110
110
00:05:58,110 --> 00:05:58,943
Now, finally,
111
111
00:05:58,943 --> 00:06:02,470
the last event that I want to show you is the before unload
112
112
00:06:02,470 --> 00:06:05,863
event, which also gets fired on window.
113
113
00:06:06,870 --> 00:06:09,053
So window.add event listener.
114
114
00:06:09,920 --> 00:06:14,920
And so that's before unload.
115
115
00:06:19,930 --> 00:06:24,430
And this event here is created immediately before a user is
116
116
00:06:24,430 --> 00:06:27,100
about to leave a page. So for example,
117
117
00:06:27,100 --> 00:06:31,123
after clicking this close button here in the browser tab,
118
118
00:06:32,230 --> 00:06:37,150
so we can basically use this event to ask users if they are
119
119
00:06:37,150 --> 00:06:40,213
100% sure that they want to leave the page.
120
120
00:06:41,120 --> 00:06:43,380
Now in some browsers to make this work,
121
121
00:06:43,380 --> 00:06:47,940
we need to call prevent default here. In Chrome
122
122
00:06:47,940 --> 00:06:51,373
it's not necessary, but some browsers require it.
123
123
00:06:52,660 --> 00:06:55,743
And then we can also take a look at the event itself.
124
124
00:06:56,970 --> 00:06:59,363
Here let's remove that.
125
125
00:07:00,220 --> 00:07:04,320
And actually in order to display a leaving confirmation,
126
126
00:07:04,320 --> 00:07:08,720
we need to set the return value on the event to an empty
127
127
00:07:08,720 --> 00:07:10,260
string.
128
128
00:07:10,260 --> 00:07:13,280
So return value and an empty string.
129
129
00:07:13,280 --> 00:07:16,040
And this probably looks a bit weird,
130
130
00:07:16,040 --> 00:07:18,193
but this is for historical reasons.
131
131
00:07:19,080 --> 00:07:19,913
All right.
132
132
00:07:19,913 --> 00:07:22,870
So let me show you what happens as we try to close the tab
133
133
00:07:22,870 --> 00:07:23,703
now.
134
134
00:07:24,610 --> 00:07:27,810
And so now we get this pop up here, indeed,
135
135
00:07:27,810 --> 00:07:31,280
which asks us if we want to leave the site.
136
136
00:07:31,280 --> 00:07:32,890
Now a long time ago,
137
137
00:07:32,890 --> 00:07:36,990
developers were actually able to customize the message
138
138
00:07:36,990 --> 00:07:39,150
that was displayed here, but then of course,
139
139
00:07:39,150 --> 00:07:41,830
many people started to abuse this.
140
140
00:07:41,830 --> 00:07:46,460
And so now we can only see it as a generic message.
141
141
00:07:46,460 --> 00:07:48,733
So no matter what we write here,
142
142
00:07:50,270 --> 00:07:55,270
we will always get this same pop-up.
143
143
00:07:55,830 --> 00:07:56,663
Okay.
144
144
00:07:59,160 --> 00:08:01,860
So let's remove this and this can,
145
145
00:08:01,860 --> 00:08:03,740
of course sometimes be useful,
146
146
00:08:03,740 --> 00:08:06,530
but sometimes it's also a bit too much.
147
147
00:08:06,530 --> 00:08:09,870
So let's actually remove all of this year.
148
148
00:08:09,870 --> 00:08:10,703
Okay.
149
149
00:08:11,860 --> 00:08:14,493
Now we cannot even reload the page here.
150
150
00:08:18,160 --> 00:08:21,970
I will actually have to open up a new tab with this and
151
151
00:08:21,970 --> 00:08:22,963
close this one.
152
152
00:08:26,800 --> 00:08:28,380
Alright.
153
153
00:08:28,380 --> 00:08:31,040
So really please don't abuse
154
154
00:08:31,040 --> 00:08:34,820
this kind of feature because a message like this is of
155
155
00:08:34,820 --> 00:08:38,450
course pretty intrusive and it should only be displayed when
156
156
00:08:38,450 --> 00:08:39,710
necessary.
157
157
00:08:39,710 --> 00:08:43,550
So don't be one of these developers who abuses too much
158
158
00:08:43,550 --> 00:08:44,530
power.
159
159
00:08:44,530 --> 00:08:46,800
So the only time you should prompt the user,
160
160
00:08:46,800 --> 00:08:50,050
if they really want to leave the page is for example,
161
161
00:08:50,050 --> 00:08:53,200
when the user is leaving in the middle of filling out the
162
162
00:08:53,200 --> 00:08:57,700
form, or like writing a blog post or something like that.
163
163
00:08:57,700 --> 00:09:01,590
So a situation in which data could actually be lost by
164
164
00:09:01,590 --> 00:09:03,240
accident.
165
165
00:09:03,240 --> 00:09:05,410
And that's actually all I had to show you.
166
166
00:09:05,410 --> 00:09:08,950
So that's the three events that can be quite helpful in some
167
167
00:09:08,950 --> 00:09:13,950
situations. And specially this one, I would say now, right?
168
168
00:09:14,490 --> 00:09:17,020
And now in the next video to finish this section,
169
169
00:09:17,020 --> 00:09:21,040
we will take a closer look at this event and at different
170
170
00:09:21,040 --> 00:09:23,693
ways of loading scripts in HTML.
14642
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.