Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,550 --> 00:00:06,550
To make sure 100% that you understand closures now,
2
00:00:06,600 --> 00:00:09,433
lets work on this coding challenge number 2.
3
00:00:11,460 --> 00:00:15,000
And actually this one is more of a thinking challenge
4
00:00:15,000 --> 00:00:16,453
than a coding challenge.
5
00:00:17,400 --> 00:00:21,760
So what I want you to do is to take this IIFE here
6
00:00:21,760 --> 00:00:23,630
and at the end of the function,
7
00:00:23,630 --> 00:00:25,930
simply attach an event listener
8
00:00:25,930 --> 00:00:30,810
that changes the color of the selected h1 element.
9
00:00:30,810 --> 00:00:35,050
So this header here to blue, all right.
10
00:00:35,050 --> 00:00:36,810
And that should happen each time
11
00:00:36,810 --> 00:00:39,690
that the body element is clicked.
12
00:00:39,690 --> 00:00:42,390
So whenever we click here.
13
00:00:42,390 --> 00:00:44,000
And what's important here is
14
00:00:44,000 --> 00:00:47,660
that you do not select the h1 element again.
15
00:00:47,660 --> 00:00:50,023
So just use this header that you have here.
16
00:00:51,000 --> 00:00:52,250
All right.
17
00:00:52,250 --> 00:00:54,460
So that's all the code you have to write
18
00:00:54,460 --> 00:00:56,190
which is really simple.
19
00:00:56,190 --> 00:00:58,760
But the real challenge here is that I want you to
20
00:00:58,760 --> 00:01:00,730
explain to yourself,
21
00:01:00,730 --> 00:01:04,860
or even to someone around you why this works.
22
00:01:04,860 --> 00:01:09,160
So as you click the body, the text will change to blue.
23
00:01:09,160 --> 00:01:10,800
And so it's gonna work
24
00:01:10,800 --> 00:01:12,280
but you have to understand
25
00:01:12,280 --> 00:01:15,460
and you have to explain why it worked.
26
00:01:15,460 --> 00:01:17,320
And so this is a good exercise,
27
00:01:17,320 --> 00:01:19,870
because being able to explain something
28
00:01:19,870 --> 00:01:24,680
to someone else means that you have understood it yourself.
29
00:01:24,680 --> 00:01:27,040
So I really hope that you do this one
30
00:01:27,040 --> 00:01:30,370
even though it doesn't involve a lot of coding.
31
00:01:30,370 --> 00:01:33,050
But it's still really important to do this.
32
00:01:33,050 --> 00:01:36,640
So take all the time that you need and think about
33
00:01:36,640 --> 00:01:40,270
when exactly the callback function is executed.
34
00:01:40,270 --> 00:01:43,360
And of course, what that means for the variables
35
00:01:43,360 --> 00:01:45,433
that are involved in this example.
36
00:01:46,930 --> 00:01:49,000
So again take the time that you need
37
00:01:49,000 --> 00:01:50,930
and I see you here in a minute
38
00:01:50,930 --> 00:01:53,313 line:15%
with my own explanation basically.
39
00:01:56,350 --> 00:02:01,163 line:15%
So the code that you had to write was simply this.
40
00:02:03,310 --> 00:02:07,090
So selecting the body element
41
00:02:07,090 --> 00:02:11,093
and then add event listener on click,
42
00:02:13,480 --> 00:02:15,913
and then this callback function.
43
00:02:16,980 --> 00:02:19,810
And then I'm simply changing the style here
44
00:02:21,950 --> 00:02:22,943
to blue.
45
00:02:25,160 --> 00:02:29,970
Then keep in mind that we did not select the h1 here again.
46
00:02:29,970 --> 00:02:31,850
I simply used the header variable
47
00:02:31,850 --> 00:02:34,390
that we had already selected before.
48
00:02:34,390 --> 00:02:36,010
So let's give it a safe.
49
00:02:36,010 --> 00:02:37,563
And I will click now the body.
50
00:02:38,600 --> 00:02:43,580
And indeed, it became blue, and that worked just fine.
51
00:02:43,580 --> 00:02:46,290
So why did this work?
52
00:02:46,290 --> 00:02:50,800
Or in other words, how does this callback function here,
53
00:02:50,800 --> 00:02:53,810
get access to the header variable?
54
00:02:53,810 --> 00:02:58,240
And one more time, the explanation is the closure.
55
00:02:58,240 --> 00:03:01,550
So I hoped that you really explained basically
56
00:03:01,550 --> 00:03:05,850
how the closure works to yourself or to someone else.
57
00:03:05,850 --> 00:03:10,170
And so in this particular example, the closure is necessary
58
00:03:10,170 --> 00:03:12,120
or it's useful
59
00:03:12,120 --> 00:03:17,120
because by the time this callback here is executed,
60
00:03:17,210 --> 00:03:18,500
this IIFE,
61
00:03:18,500 --> 00:03:22,220
so this immediately invoked function expression is
62
00:03:22,220 --> 00:03:23,460
now long gone.
63
00:03:23,460 --> 00:03:25,810
So it has already been executed.
64
00:03:25,810 --> 00:03:30,810
And with it, this variable here is basically gone as well.
65
00:03:30,990 --> 00:03:31,860
Right?
66
00:03:31,860 --> 00:03:33,480
So all of that is gone.
67
00:03:33,480 --> 00:03:36,610
But still, this function here is attached
68
00:03:36,610 --> 00:03:38,380
to the body element.
69
00:03:38,380 --> 00:03:41,810
And so it's waiting for some events to happen there.
70
00:03:41,810 --> 00:03:43,960
And when the event happens, well,
71
00:03:43,960 --> 00:03:47,430
then this function here is of course, executed.
72
00:03:47,430 --> 00:03:50,480
And again, even though the environment
73
00:03:50,480 --> 00:03:54,110
in which this function here was created is already gone,
74
00:03:54,110 --> 00:03:56,430
it is still able to access the variables
75
00:03:56,430 --> 00:03:59,050
that were created in that variable
76
00:03:59,050 --> 00:04:03,270
by the time the function was born, so to say.
77
00:04:03,270 --> 00:04:08,270
So this is the birthplace of or event handler function here.
78
00:04:08,550 --> 00:04:10,310
And therefore the function
79
00:04:10,310 --> 00:04:15,310
remembers all the variables present at a time of its birth.
80
00:04:15,550 --> 00:04:16,383
We can also say
81
00:04:16,383 --> 00:04:20,570
that the header is in the backpack of this function.
82
00:04:20,570 --> 00:04:23,060
So that explanation works as well.
83
00:04:23,060 --> 00:04:26,530
And you can go even further and deep into theory
84
00:04:26,530 --> 00:04:28,750
and basically try to explain
85
00:04:28,750 --> 00:04:31,690
how all of this works behind the scenes.
86
00:04:31,690 --> 00:04:33,580
But that I already explained to you
87
00:04:33,580 --> 00:04:36,420
in the more theory lecture,
88
00:04:36,420 --> 00:04:39,313
and so I'm not gonna go into that again.
89
00:04:40,430 --> 00:04:41,850
All right.
90
00:04:41,850 --> 00:04:46,740
So hopefully, you managed to explain this to yourself,
91
00:04:46,740 --> 00:04:48,900
maybe to your dog, whatever.
92
00:04:48,900 --> 00:04:51,750
But what's important is that you now understand
93
00:04:51,750 --> 00:04:53,160
how the closure works
94
00:04:53,160 --> 00:04:55,370
and how and when it appears.
95
00:04:55,370 --> 00:04:57,890
So this was yet another great example
96
00:04:57,890 --> 00:04:59,910
of a closure appearing.
97
00:04:59,910 --> 00:05:01,840
Anyway with this we've finished
98
00:05:01,840 --> 00:05:04,940
this pretty important section on functions.
99
00:05:04,940 --> 00:05:06,160
And so in the next one,
100
00:05:06,160 --> 00:05:09,780
we will finally build another visual project
101
00:05:09,780 --> 00:05:12,100
with a graphical user interface
102
00:05:12,100 --> 00:05:14,360
which is really exciting.
103
00:05:14,360 --> 00:05:16,690
So that section is all about arrays,
104
00:05:16,690 --> 00:05:20,300
and we're gonna build together an awesome application there.
105
00:05:20,300 --> 00:05:22,953
So I hope to see you there as soon as possible.
7604
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.