WEBVTT 0 00:01.240 --> 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 00:08.110 --> 00:14.680 they get clicked, let's drill down and take a deeper look at how this addEventListener function works, 2 00:14.920 --> 00:20.500 because it looks a little bit weird and different from the functions that we've seen so far. 3 00:20.830 --> 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 00:26.710 --> 00:27.400 of things, 5 00:27.460 --> 00:29.890 and what happens when we add an event listener. 6 00:30.040 --> 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 00:36.010 --> 00:38.320 can right click, go into Inspect, 8 00:38.320 --> 00:43.990 which brings up the Chrome Developer Tools, and you see that the element that's currently selected, 9 00:43.990 --> 00:50.680 so the h1, can be accessed in the console using this $0 variable. 10 00:50.680 --> 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 00:58.570 --> 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 01:06.840 --> 01:10.340 Like if you say $0, which is the h1 element, 13 01:10.460 --> 01:14.120 .innerHTML is equal to, instead of JavaScript, 14 01:14.140 --> 01:17.660 let's say it's equal to AngelaScript. 15 01:17.800 --> 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 01:25.960 --> 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 01:31.870 --> 01:34.630 the html page from Wikipedia servers. 18 01:34.720 --> 01:40.670 So all the changes that you're making is to your local copy of this Wikipedia page inside the browser. 19 01:40.780 --> 01:44.890 But if you catch your friend unaware and edit some of these pages it's a pretty good prank. 20 01:44.890 --> 01:51.760 Now at the moment when I click on this h1, absolutely nothing happens, because it's not a button and 21 01:51.760 --> 01:55.260 it's not bound to any event listeners, at least not yet. 22 01:55.360 --> 01:57.010 But that's exactly what we're going to do. 23 01:57.010 --> 02:05.830 We're going to say $0, referring to the h1, .addEventListener, and the type of event that 24 02:05.830 --> 02:08.710 we want it to listen to are clicks, 25 02:08.980 --> 02:10.200 so that's the first input. 26 02:10.240 --> 02:17.100 The second one is going to be a function and that function is simply going to console.log 27 02:17.740 --> 02:22.300 the fact that I got clicked. All right. Cool. 28 02:22.310 --> 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 02:30.020 --> 02:34.760 get the console log that says it got clicked. And I can do that many many times. 30 02:35.060 --> 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 02:42.470 --> 02:44.470 it like this. 32 02:44.480 --> 02:50.540 So instead of using an anonymous function we could use a named function, say something called 33 02:50.600 --> 02:51.380 respondToClick. 34 02:51.500 --> 02:58.250 So the word click is the event that we're detecting and that's the first input or input 1. 35 02:58.250 --> 03:05.360 Now the second input is the function that should be called once the h1 detects the click event. 36 03:05.390 --> 03:09.500 So you can see that addEventListener is taking two inputs, 37 03:09.560 --> 03:15.740 the first one specifying what event it should listen to, and the second one specifying what it should 38 03:15.740 --> 03:19.550 do once that event gets detected. 39 03:19.550 --> 03:24.860 Now this is a little bit different from the functions that we've seen so far, because instead of just 40 03:24.860 --> 03:34.670 passing in strings or numbers or other simple data types, we're actually passing in a function as an input. 41 03:34.670 --> 03:40.640 Now because we can't look at the code that Chrome uses to implement addEventListener because we didn't 42 03:40.640 --> 03:41.640 write that method, 43 03:41.690 --> 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 03:46.670 --> 03:47.810 listener works. 45 03:48.140 --> 03:51.060 So let's say that we wanted to create a calculator. 46 03:51.320 --> 03:57.590 So we create a function that's called calculator and it could take two inputs, 47 03:57.590 --> 04:00.790 the first number and the second number. 48 04:01.250 --> 04:03.850 And then we're going to do some calculations with it. 49 04:03.860 --> 04:12.000 So we'll say maybe return as the output the first number plus the second number. 50 04:12.020 --> 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 04:21.980 --> 04:23.080 as 5, right? 52 04:23.090 --> 04:24.440 2 + 3. 53 04:24.440 --> 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 04:30.960 --> 04:32.030 to multiply, 55 04:32.180 --> 04:41.090 then I would have to change my calculator function and say, instead of adding, actually I want my calculator 56 04:41.120 --> 04:49.910 to take these two numbers, first number, second number, and then it should return the first number multiplied 57 04:49.940 --> 04:51.540 by the second number. 58 04:52.010 --> 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 05:00.380 --> 05:06.380 our calculator function is multiplying the first number by the second number. 60 05:06.380 --> 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 05:13.550 --> 05:20.090 to specify on the fly whether we want to multiply or add or divide. 62 05:20.240 --> 05:24.680 We don't actually have to go and change the actual calculator each time. 63 05:24.680 --> 05:26.850 So what can we do instead? 64 05:27.140 --> 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 05:34.520 --> 05:35.610 second number? 66 05:36.140 --> 05:39.800 And this function basically just adds the numbers, right? 67 05:39.800 --> 05:49.130 So it returns the first number plus the second number. And then we go and create another function, and 68 05:49.130 --> 05:59.570 we call this one multiply and this one again takes two inputs and it returns the first number multiplied 69 05:59.600 --> 06:00.780 by the second number. 70 06:00.980 --> 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 06:08.720 --> 06:12.730 to be able to pick and choose whether we're going to add or multiply? 72 06:12.950 --> 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 06:20.060 --> 06:20.930 handy. 74 06:20.930 --> 06:27.830 So say we've created this function called calculator and instead of simply just taking two numbers as 75 06:27.830 --> 06:36.380 the inputs, it's also going to take an input called the operator, and this input can be changed on 76 06:36.380 --> 06:39.090 the fly when we're calling this function. 77 06:39.170 --> 06:45.860 And when this function calculator gets called, we simply call the operator function, whatever it is that 78 06:45.860 --> 06:53.410 the user chose, passing in the two inputs and return that value as the output. 79 06:53.990 --> 06:59.260 All right. So now let's go and hit enter and have all three of these functions available to us, 80 06:59.420 --> 07:01.360 and let me show you how we would call this. 81 07:01.370 --> 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 07:11.510 --> 07:16.260 function, and we can pass in our numbers, let's say 4 and 5, 83 07:16.610 --> 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 07:24.070 --> 07:25.580 the body of this calculator. 85 07:25.690 --> 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 07:33.100 --> 07:36.580 of our add function that's created up here, 87 07:36.970 --> 07:41.920 and if we hit enter you'll see that we get the result 9. 88 07:41.950 --> 07:49.570 Now if we decided to use the multiply function instead then what would happen is that we would call 89 07:49.570 --> 07:56.890 the calculator function, it would go and find where it was declared, 4 would get passed into the first 90 07:56.920 --> 08:03.690 input, num1, 5 becomes num2, and multiply becomes operator. 91 08:03.880 --> 08:10.180 So once it gets into the body of the function, it's going to output whichever function was passed in 92 08:10.270 --> 08:11.590 as the operator, 93 08:11.590 --> 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 08:18.730 --> 08:19.860 to calculator. 95 08:19.930 --> 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 08:27.970 --> 08:29.500 instead of this one. 97 08:29.500 --> 08:35.530 Now before we mentioned that Chrome Developer Tools does a whole bunch of really awesome things, and one 98 08:35.530 --> 08:38.770 of those things is something called the debugger. 99 08:38.860 --> 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 08:46.120 --> 08:47.970 that you want to debug, 101 08:48.070 --> 08:55.530 say calculator, I don't know, 3 and 4, and multiply, 102 08:56.260 --> 09:00.530 and then we hit enter, then we enter the debug mode. 103 09:00.640 --> 09:02.140 So this is cool. 104 09:02.380 --> 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 09:09.340 --> 09:10.610 you that final answer. 106 09:10.630 --> 09:13.150 So we can see the process step by step. 107 09:13.150 --> 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 09:18.820 --> 09:24.640 of playing computer in your head when you're imagining what should happen every step of the way sometimes 109 09:24.640 --> 09:30.580 you're wrong and it's really useful to see what's actually happening every single step of the way. 110 09:30.790 --> 09:32.190 So let's stop. 111 09:32.200 --> 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 09:38.170 --> 09:40.060 the next function call. 113 09:40.060 --> 09:45.690 So once I click on it we start off by calling the function calculator. 114 09:45.880 --> 09:53.500 So it goes and finds where that function was defined which is here of course and it passes in those 115 09:53.590 --> 09:57.660 inputs that we gave before which is 3, 4 and multiply. 116 09:57.940 --> 10:00.090 So now num1 equals 3, 117 10:00.130 --> 10:01.530 num2 equals 4, 118 10:01.630 --> 10:08.680 and the third input, operator, is equal to a function, as denoted by the little f sign and the function 119 10:08.770 --> 10:12.790 is the multiply function which is up here. 120 10:12.820 --> 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 10:19.330 --> 10:25.240 this function operator which is currently the same as the multiply function. 122 10:25.240 --> 10:32.410 So now, if we keep stepping through, it finds that multiply function and it subs in those two inputs, 123 10:32.500 --> 10:34.690 where num1 is equal to 3, 124 10:34.750 --> 10:36.750 and num2 is equal to 4, 125 10:37.000 --> 10:40.890 and it returns the value of num1 multiplied by num2. 126 10:41.170 --> 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 10:50.290 --> 10:56.890 of the multiply function and then returns it as the output of the calculator function. 128 10:56.890 --> 11:01.860 And finally we get to the end of our code and we output the number 12. 129 11:01.960 --> 11:03.490 So this is a pretty neat trick 130 11:03.490 --> 11:08.330 whenever you're getting confused what's actually happening in each of the functions you write. 131 11:08.470 --> 11:12.740 And this way you can see stepwise everything that the browser is doing 132 11:12.760 --> 11:14.810 one function call at a time. 133 11:14.890 --> 11:22.030 These types of functions which can take other functions as inputs are called higher order functions 134 11:22.330 --> 11:30.220 and this feature is available in a number of modern languages like Javascript, Pascal, Swift, and a whole 135 11:30.220 --> 11:31.330 bunch of other ones, 136 11:31.480 --> 11:33.130 but it's not universal. 137 11:33.130 --> 11:38.140 It's not something that's available in all programming languages, but it's something that we'll rely on 138 11:38.140 --> 11:45.530 heavily in Javascript as we learn to manipulate the DOM and give our web site more and more behavior. 139 11:45.670 --> 11:49.500 So we'll come across this many many times. Now, as a challenge, 140 11:49.510 --> 11:54.840 I want you to create a full set of operators for our calculator. 141 11:54.940 --> 11:57.510 So I want you to create the code that we've already made, 142 11:57.610 --> 12:06.820 so a calculator that takes two inputs and a function as an input, and complete these functions so that 143 12:06.820 --> 12:08.050 we have an add function, 144 12:08.050 --> 12:09.280 we have a multiply, 145 12:09.280 --> 12:15.690 we have a divide and a subtract, so that when you call the calculator you can say something like calculator 146 12:15.700 --> 12:22.030 6 and 3 and subtract and it will give you the right answer. 147 12:22.150 --> 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 12:29.260 --> 12:35.170 step through the function calls so that you're happy with how it works and how you can pass functions 149 12:35.710 --> 12:38.130 as inputs to other functions.