0
1
00:00:01,240 --> 00:00:08,110
So now that we've seen how we can add an event listener to our HTML elements in order to listen for when
1

2
00:00:08,110 --> 00:00:14,680
they get clicked, let's drill down and take a deeper look at how this addEventListener function works,
2

3
00:00:14,920 --> 00:00:20,500
because it looks a little bit weird and different from the functions that we've seen so far.
3

4
00:00:20,830 --> 00:00:26,710
So over here I've got the Javascript Wikipedia page open, and I'm going to use it to show you a couple
4

5
00:00:26,710 --> 00:00:27,400
of things,
5

6
00:00:27,460 --> 00:00:29,890
and what happens when we add an event listener.
6

7
00:00:30,040 --> 00:00:36,010
So one of the cool things that you can do in Chrome is you can highlight say the title here and you
7

8
00:00:36,010 --> 00:00:38,320
can right click, go into Inspect,
8

9
00:00:38,320 --> 00:00:43,990
which brings up the Chrome Developer Tools, and you see that the element that's currently selected,
9

10
00:00:43,990 --> 00:00:50,680
so the h1, can be accessed in the console using this $0 variable.
10

11
00:00:50,680 --> 00:00:58,510
So if we head into the console and we type $0 and hit enter, then you can see that this is bound
11

12
00:00:58,570 --> 00:01:06,180
to the h1 element up at the top here. And you can do some cool things with this and mess around with web sites.
12

13
00:01:06,840 --> 00:01:10,340
Like if you say $0, which is the h1 element,
13

14
00:01:10,460 --> 00:01:14,120
.innerHTML is equal to, instead of JavaScript,
14

15
00:01:14,140 --> 00:01:17,660
let's say it's equal to AngelaScript.
15

16
00:01:17,800 --> 00:01:25,960
And now I've just edited Wikipedia's web site on the fly, and this is a fun way that you can mess with friends.
16

17
00:01:25,960 --> 00:01:31,870
Now of course when you reload the web site then all of your changes are gone because it's loading up
17

18
00:01:31,870 --> 00:01:34,630
the html page from Wikipedia servers.
18

19
00:01:34,720 --> 00:01:40,670
So all the changes that you're making is to your local copy of this Wikipedia page inside the browser.
19

20
00:01:40,780 --> 00:01:44,890
But if you catch your friend unaware and edit some of these pages it's a pretty good prank.
20

21
00:01:44,890 --> 00:01:51,760
Now at the moment when I click on this h1, absolutely nothing happens, because it's not a button and
21

22
00:01:51,760 --> 00:01:55,260
it's not bound to any event listeners, at least not yet.
22

23
00:01:55,360 --> 00:01:57,010
But that's exactly what we're going to do.
23

24
00:01:57,010 --> 00:02:05,830
We're going to say $0, referring to the h1, .addEventListener, and the type of event that
24

25
00:02:05,830 --> 00:02:08,710
we want it to listen to are clicks,
25

26
00:02:08,980 --> 00:02:10,200
so that's the first input.
26

27
00:02:10,240 --> 00:02:17,100
The second one is going to be a function and that function is simply going to console.log
27

28
00:02:17,740 --> 00:02:22,300
the fact that I got clicked. All right. Cool.
28

29
00:02:22,310 --> 00:02:30,020
So now if I hit enter, then that click event listener gets added to our h1, and if I click on this I now
29

30
00:02:30,020 --> 00:02:34,760
get the console log that says it got clicked. And I can do that many many times.
30

31
00:02:35,060 --> 00:02:42,470
Now in this case we've got an anonymous function as the second input and we know that we can also specify
31

32
00:02:42,470 --> 00:02:44,470
it like this.
32

33
00:02:44,480 --> 00:02:50,540
So instead of using an anonymous function we could use a named function, say something called 
33

34
00:02:50,600 --> 00:02:51,380
respondToClick.
34

35
00:02:51,500 --> 00:02:58,250
So the word click is the event that we're detecting and that's the first input or input 1.
35

36
00:02:58,250 --> 00:03:05,360
Now the second input is the function that should be called once the h1 detects the click event.
36

37
00:03:05,390 --> 00:03:09,500
So you can see that addEventListener is taking two inputs,
37

38
00:03:09,560 --> 00:03:15,740
the first one specifying what event it should listen to, and the second one specifying what it should
38

39
00:03:15,740 --> 00:03:19,550
do once that event gets detected.
39

40
00:03:19,550 --> 00:03:24,860
Now this is a little bit different from the functions that we've seen so far, because instead of just
40

41
00:03:24,860 --> 00:03:34,670
passing in strings or numbers or other simple data types, we're actually passing in a function as an input.
41

42
00:03:34,670 --> 00:03:40,640
Now because we can't look at the code that Chrome uses to implement addEventListener because we didn't
42

43
00:03:40,640 --> 00:03:41,640
write that method,
43

44
00:03:41,690 --> 00:03:46,670
so let's try and create both sides of the coin and in the process we can better understand how our event
44

45
00:03:46,670 --> 00:03:47,810
listener works.
45

46
00:03:48,140 --> 00:03:51,060
So let's say that we wanted to create a calculator.
46

47
00:03:51,320 --> 00:03:57,590
So we create a function that's called calculator and it could take two inputs,
47

48
00:03:57,590 --> 00:04:00,790
the first number and the second number.
48

49
00:04:01,250 --> 00:04:03,850
And then we're going to do some calculations with it.
49

50
00:04:03,860 --> 00:04:12,000
So we'll say maybe return as the output the first number plus the second number.
50

51
00:04:12,020 --> 00:04:21,290
So now if I call this function and I pass in some values, say 2 and 3, then I will get the output
51

52
00:04:21,980 --> 00:04:23,080
as 5, right?
52

53
00:04:23,090 --> 00:04:24,440
2 + 3.
53

54
00:04:24,440 --> 00:04:30,960
Now if I wanted to change my calculator, so instead of adding my numbers I want my calculator to be able
54

55
00:04:30,960 --> 00:04:32,030
to multiply,
55

56
00:04:32,180 --> 00:04:41,090
then I would have to change my calculator function and say, instead of adding, actually I want my calculator
56

57
00:04:41,120 --> 00:04:49,910
to take these two numbers, first number, second number, and then it should return the first number multiplied
57

58
00:04:49,940 --> 00:04:51,540
by the second number.
58

59
00:04:52,010 --> 00:05:00,380
So now I can call my calculator and pass in the same inputs, 2 and 3, and I'll get back 6, because now
59

60
00:05:00,380 --> 00:05:06,380
our calculator function is multiplying the first number by the second number.
60

61
00:05:06,380 --> 00:05:13,550
Now this is a little bit painful because, you know, the kind of calculators that we're used to allow us
61

62
00:05:13,550 --> 00:05:20,090
to specify on the fly whether we want to multiply or add or divide.
62

63
00:05:20,240 --> 00:05:24,680
We don't actually have to go and change the actual calculator each time.
63

64
00:05:24,680 --> 00:05:26,850
So what can we do instead?
64

65
00:05:27,140 --> 00:05:34,520
Well, what if we created a function that was called add, and it took two inputs, the first number and the
65

66
00:05:34,520 --> 00:05:35,610
second number?
66

67
00:05:36,140 --> 00:05:39,800
And this function basically just adds the numbers, right?
67

68
00:05:39,800 --> 00:05:49,130
So it returns the first number plus the second number. And then we go and create another function, and
68

69
00:05:49,130 --> 00:05:59,570
we call this one multiply and this one again takes two inputs and it returns the first number multiplied
69

70
00:05:59,600 --> 00:06:00,780
by the second number.
70

71
00:06:00,980 --> 00:06:08,420
So now that we've got two different types of functions, how can we create a function that's called calculator
71

72
00:06:08,720 --> 00:06:12,730
to be able to pick and choose whether we're going to add or multiply?
72

73
00:06:12,950 --> 00:06:20,060
So this is a case where being able to pass in a function as an input to another function becomes really
73

74
00:06:20,060 --> 00:06:20,930
handy.
74

75
00:06:20,930 --> 00:06:27,830
So say we've created this function called calculator and instead of simply just taking two numbers as
75

76
00:06:27,830 --> 00:06:36,380
the inputs, it's also going to take an input called the operator, and this input can be changed on
76

77
00:06:36,380 --> 00:06:39,090
the fly when we're calling this function.
77

78
00:06:39,170 --> 00:06:45,860
And when this function calculator gets called, we simply call the operator function, whatever it is that
78

79
00:06:45,860 --> 00:06:53,410
the user chose, passing in the two inputs and return that value as the output.
79

80
00:06:53,990 --> 00:06:59,260
All right. So now let's go and hit enter and have all three of these functions available to us,
80

81
00:06:59,420 --> 00:07:01,360
and let me show you how we would call this.
81

82
00:07:01,370 --> 00:07:11,510
So instead of having to say add 2 and 3, or multiply 2 and 3, we can simply call our calculator
82

83
00:07:11,510 --> 00:07:16,260
function, and we can pass in our numbers, let's say 4 and 5,
83

84
00:07:16,610 --> 00:07:24,070
and the third input, as you can see here, is expecting a function, because it's going to call it inside
84

85
00:07:24,070 --> 00:07:25,580
the body of this calculator.
85

86
00:07:25,690 --> 00:07:32,890
So let's say if we wanted to use our calculator to add 4 to 5, then we can simply specify the name
86

87
00:07:33,100 --> 00:07:36,580
of our add function that's created up here,
87

88
00:07:36,970 --> 00:07:41,920
and if we hit enter you'll see that we get the result 9.
88

89
00:07:41,950 --> 00:07:49,570
Now if we decided to use the multiply function instead then what would happen is that we would call
89

90
00:07:49,570 --> 00:07:56,890
the calculator function, it would go and find where it was declared, 4 would get passed into the first
90

91
00:07:56,920 --> 00:08:03,690
input, num1, 5 becomes num2, and multiply becomes operator.
91

92
00:08:03,880 --> 00:08:10,180
So once it gets into the body of the function, it's going to output whichever function was passed in
92

93
00:08:10,270 --> 00:08:11,590
as the operator,
93

94
00:08:11,590 --> 00:08:18,670
so in this case multiply, and it will pass into that function multiply the same two numbers that we passed in
94

95
00:08:18,730 --> 00:08:19,860
to calculator.
95

96
00:08:19,930 --> 00:08:27,730
So now if I hit enter you can see we get 20 because our calculator is using this function to calculate
96

97
00:08:27,970 --> 00:08:29,500
instead of this one.
97

98
00:08:29,500 --> 00:08:35,530
Now before we mentioned that Chrome Developer Tools does a whole bunch of really awesome things, and one
98

99
00:08:35,530 --> 00:08:38,770
of those things is something called the debugger.
99

100
00:08:38,860 --> 00:08:46,090
So if you just type in the keyword debugger and then hold down shift and hit enter, then call the function
100

101
00:08:46,120 --> 00:08:47,970
that you want to debug,
101

102
00:08:48,070 --> 00:08:55,530
say calculator, I don't know, 3 and 4, and multiply,
102

103
00:08:56,260 --> 00:09:00,530
and then we hit enter, then we enter the debug mode.
103

104
00:09:00,640 --> 00:09:02,140
So this is cool.
104

105
00:09:02,380 --> 00:09:09,340
And what you can do here is you can step through all of the steps that the browser goes through to give
105

106
00:09:09,340 --> 00:09:10,610
you that final answer.
106

107
00:09:10,630 --> 00:09:13,150
So we can see the process step by step.
107

108
00:09:13,150 --> 00:09:18,820
So this is usually used when you're trying to figure out what's going wrong in your code because instead
108

109
00:09:18,820 --> 00:09:24,640
of playing computer in your head when you're imagining what should happen every step of the way sometimes
109

110
00:09:24,640 --> 00:09:30,580
you're wrong and it's really useful to see what's actually happening every single step of the way.
110

111
00:09:30,790 --> 00:09:32,190
So let's stop.
111

112
00:09:32,200 --> 00:09:38,170
The first thing to do is you're going to click on this button here with a down arrow, and this steps into
112

113
00:09:38,170 --> 00:09:40,060
the next function call.
113

114
00:09:40,060 --> 00:09:45,690
So once I click on it we start off by calling the function calculator.
114

115
00:09:45,880 --> 00:09:53,500
So it goes and finds where that function was defined which is here of course and it passes in those
115

116
00:09:53,590 --> 00:09:57,660
inputs that we gave before which is 3, 4 and multiply.
116

117
00:09:57,940 --> 00:10:00,090
So now num1 equals 3,
117

118
00:10:00,130 --> 00:10:01,530
num2 equals 4,
118

119
00:10:01,630 --> 00:10:08,680
and the third input, operator, is equal to a function, as denoted by the little f sign and the function
119

120
00:10:08,770 --> 00:10:12,790
is the multiply function which is up here.
120

121
00:10:12,820 --> 00:10:19,300
So now the next step is that it enters into the body of the calculator function and it tries to call
121

122
00:10:19,330 --> 00:10:25,240
this function operator which is currently the same as the multiply function.
122

123
00:10:25,240 --> 00:10:32,410
So now, if we keep stepping through, it finds that multiply function and it subs in those two inputs,
123

124
00:10:32,500 --> 00:10:34,690
where num1 is equal to 3,
124

125
00:10:34,750 --> 00:10:36,750
and num2 is equal to 4,
125

126
00:10:37,000 --> 00:10:40,890
and it returns the value of num1 multiplied by num2.
126

127
00:10:41,170 --> 00:10:49,750
So now if we continue stepping through it takes that value that we got back and returns it as the output
127

128
00:10:50,290 --> 00:10:56,890
of the multiply function and then returns it as the output of the calculator function.
128

129
00:10:56,890 --> 00:11:01,860
And finally we get to the end of our code and we output the number 12.
129

130
00:11:01,960 --> 00:11:03,490
So this is a pretty neat trick
130

131
00:11:03,490 --> 00:11:08,330
whenever you're getting confused what's actually happening in each of the functions you write.
131

132
00:11:08,470 --> 00:11:12,740
And this way you can see stepwise everything that the browser is doing
132

133
00:11:12,760 --> 00:11:14,810
one function call at a time.
133

134
00:11:14,890 --> 00:11:22,030
These types of functions which can take other functions as inputs are called higher order functions
134

135
00:11:22,330 --> 00:11:30,220
and this feature is available in a number of modern languages like Javascript, Pascal, Swift, and a whole
135

136
00:11:30,220 --> 00:11:31,330
bunch of other ones,
136

137
00:11:31,480 --> 00:11:33,130
but it's not universal.
137

138
00:11:33,130 --> 00:11:38,140
It's not something that's available in all programming languages, but it's something that we'll rely on
138

139
00:11:38,140 --> 00:11:45,530
heavily in Javascript as we learn to manipulate the DOM and give our web site more and more behavior.
139

140
00:11:45,670 --> 00:11:49,500
So we'll come across this many many times. Now, as a challenge,
140

141
00:11:49,510 --> 00:11:54,840
I want you to create a full set of operators for our calculator.
141

142
00:11:54,940 --> 00:11:57,510
So I want you to create the code that we've already made,
142

143
00:11:57,610 --> 00:12:06,820
so a calculator that takes two inputs and a function as an input, and complete these functions so that
143

144
00:12:06,820 --> 00:12:08,050
we have an add function,
144

145
00:12:08,050 --> 00:12:09,280
we have a multiply,
145

146
00:12:09,280 --> 00:12:15,690
we have a divide and a subtract, so that when you call the calculator you can say something like calculator
146

147
00:12:15,700 --> 00:12:22,030
6 and 3 and subtract and it will give you the right answer.
147

148
00:12:22,150 --> 00:12:29,260
So pause the video and complete that challenge, and once you're done go ahead and try out the debugger and
148

149
00:12:29,260 --> 00:12:35,170
step through the function calls so that you're happy with how it works and how you can pass functions
149

150
00:12:35,710 --> 00:12:38,130
as inputs to other functions.