WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:00.000 --> 00:00:05.470 [INSTRUMENTAL MUSIC PLAYING] 00:00:05.470 --> 00:00:07.470 DOUG LLOYD: So near CS50's end, we introduce you 00:00:07.470 --> 00:00:10.020 to several different programming languages, 00:00:10.020 --> 00:00:12.570 and we aren't able to cover them in nearly as much depth 00:00:12.570 --> 00:00:15.480 as we're able to cover C earlier in the course. 00:00:15.480 --> 00:00:18.480 The goal here is not to give you a complete rundown of what 00:00:18.480 --> 00:00:20.914 these languages do, but to give you enough of the basics 00:00:20.914 --> 00:00:22.830 and show you enough of the parallels to things 00:00:22.830 --> 00:00:26.970 that you already know so that you can go forth and really flesh out 00:00:26.970 --> 00:00:29.430 your knowledge of these different languages. 00:00:29.430 --> 00:00:33.030 And another one of these we're going to cover right now is JavaScript. 00:00:33.030 --> 00:00:36.330 Now, similar to other languages we've discussed, 00:00:36.330 --> 00:00:40.245 it is a modern programming language that is derived from C's syntax. 00:00:40.245 --> 00:00:42.060 So if you're familiar with C, you're going 00:00:42.060 --> 00:00:44.290 to be able to pick up JavaScript pretty quickly. 00:00:44.290 --> 00:00:46.630 It's been around just about as long as Python. 00:00:46.630 --> 00:00:49.994 It was invented a few years afterwards in the mid 1990s. 00:00:49.994 --> 00:00:52.910 Now what's really important about JavaScript, as well as HTML and CSS, 00:00:52.910 --> 00:00:54.720 which we've discussed in other videos, is 00:00:54.720 --> 00:00:59.780 that those three languages pretty much make up the core user experience 00:00:59.780 --> 00:01:01.480 of what it means to be online. 00:01:01.480 --> 00:01:05.790 So understanding how to use and work with JavaScript, HTML, and CSS 00:01:05.790 --> 00:01:09.600 will allow you to really create websites that users 00:01:09.600 --> 00:01:12.450 will enjoy visiting, because you'll be able to create a great user 00:01:12.450 --> 00:01:15.150 experience for them with these three languages. 00:01:15.150 --> 00:01:17.250 To write JavaScript, it's really easy. 00:01:17.250 --> 00:01:19.260 Open up a file with a dot js file extension, 00:01:19.260 --> 00:01:21.240 and start writing in JavaScript right away. 00:01:21.240 --> 00:01:23.406 If you're familiar with a language like PHP, 00:01:23.406 --> 00:01:25.530 you know that you have to sort of bind your code up 00:01:25.530 --> 00:01:28.800 in these delimiters-- bracket, question mark, PHP, and all that stuff. 00:01:28.800 --> 00:01:29.880 We don't have to do that in JavaScript. 00:01:29.880 --> 00:01:32.280 We literally just start writing our code in a JavaScript 00:01:32.280 --> 00:01:33.810 file, which is pretty nice. 00:01:33.810 --> 00:01:37.290 Our website will also know that what our file is is JavaScript, 00:01:37.290 --> 00:01:39.630 because we're going to tell it in an HTML tag. 00:01:39.630 --> 00:01:42.930 We're going to say, I have a script that is of type JavaScript, 00:01:42.930 --> 00:01:45.750 and it is a file with a dot js file extension. 00:01:45.750 --> 00:01:47.090 Pretty straightforward. 00:01:47.090 --> 00:01:50.940 Now, unlike Python, which runs on the server side-- that is, on the side 00:01:50.940 --> 00:01:53.790 that is hosting the website, JavaScript applications 00:01:53.790 --> 00:01:58.830 run client side on your own machine when you are visiting a website. 00:01:58.830 --> 00:02:02.640 To include JavaScript in your HTML, it's pretty easy. 00:02:02.640 --> 00:02:04.980 Just like when we include CSS with style tags, 00:02:04.980 --> 00:02:07.672 we can include JavaScript in between script tags. 00:02:07.672 --> 00:02:09.630 So we can have an open script tag and literally 00:02:09.630 --> 00:02:14.100 start writing JavaScript right in our HTML, which is kind of cool. 00:02:14.100 --> 00:02:16.770 But also like CSS, where we have link tags, 00:02:16.770 --> 00:02:18.870 we can write our JavaScript in a different file 00:02:18.870 --> 00:02:22.920 and connect it using the source attribute of a script tag. 00:02:22.920 --> 00:02:25.867 In CS50, and really probably more generally, 00:02:25.867 --> 00:02:28.200 this is definitely the preferred way to go, particularly 00:02:28.200 --> 00:02:31.980 if you have a JavaScript file that might be used-- 00:02:31.980 --> 00:02:35.700 or the contents of which might be used-- on different pages of your website. 00:02:35.700 --> 00:02:38.640 You don't have to write the JavaScript between the script tags 00:02:38.640 --> 00:02:40.050 on every single page. 00:02:40.050 --> 00:02:43.950 You want to be able to just refer to an outside file 00:02:43.950 --> 00:02:47.380 and link that in every single time. 00:02:47.380 --> 00:02:51.785 So let's quickly run down some of the fundamentals 00:02:51.785 --> 00:02:53.160 that you might use in JavaScript. 00:02:53.160 --> 00:02:56.368 So, variables-- they're really similar to Python variables and really similar 00:02:56.368 --> 00:02:57.720 to C variables. 00:02:57.720 --> 00:02:59.190 No type specifier is required. 00:02:59.190 --> 00:03:03.210 And if you want a local variable, you preface it with the var keyword. 00:03:03.210 --> 00:03:05.752 So in Python, we would say something like this-- x equals 44. 00:03:05.752 --> 00:03:08.543 We don't want to do that in JavaScript, because that would actually 00:03:08.543 --> 00:03:11.560 create a global variable, if you were to put a semicolon at the end. 00:03:11.560 --> 00:03:13.980 We would want this-- var x equals 44. 00:03:13.980 --> 00:03:17.220 That creates a local variable called x in JavaScript, 00:03:17.220 --> 00:03:19.980 and stores the value 44 in it. 00:03:19.980 --> 00:03:23.310 Conditionals-- all of the old favorites from C are available for you to use. 00:03:23.310 --> 00:03:27.867 If, else if, else, switch, question mark colon-- all of those are fair game. 00:03:27.867 --> 00:03:29.700 We're not going into detail on those at all, 00:03:29.700 --> 00:03:31.680 because we've covered them in our videos on C. 00:03:31.680 --> 00:03:33.430 But they're all here to use in JavaScript, 00:03:33.430 --> 00:03:35.670 and behave pretty much exactly the same. 00:03:35.670 --> 00:03:38.160 Loops, meanwhile-- all of ones we're familiar with from C 00:03:38.160 --> 00:03:41.190 are also still available-- while loops, do-while loops, 00:03:41.190 --> 00:03:43.920 and for loops, although we do have a couple of other variations 00:03:43.920 --> 00:03:46.120 that we'll talk about in just a little bit. 00:03:46.120 --> 00:03:49.730 Now, functions in JavaScript are all introduced with the function keyword. 00:03:49.730 --> 00:03:50.750 So it's a function. 00:03:50.750 --> 00:03:52.830 Write a function name and parameters, and then 00:03:52.830 --> 00:03:55.680 we define our function between curly braces just like we would in C, 00:03:55.680 --> 00:03:58.200 except in C, of course, we're not using the function keyword. 00:03:58.200 --> 00:04:00.158 But there's also a catch with JavaScript, which 00:04:00.158 --> 00:04:03.540 is that functions can be anonymous. 00:04:03.540 --> 00:04:06.180 Meaning you don't have to give them a name. 00:04:06.180 --> 00:04:09.037 Now, you might be asking yourself, wait, how can I call a function 00:04:09.037 --> 00:04:10.120 If it doesn't have a name? 00:04:10.120 --> 00:04:11.580 Well, we'll talk about that in just a little bit, 00:04:11.580 --> 00:04:14.538 and we'll talk about what I mean in particular here when I'm describing 00:04:14.538 --> 00:04:16.060 binding things to HTML elements. 00:04:16.060 --> 00:04:19.293 We'll talk about that in the video on the document object model, 00:04:19.293 --> 00:04:21.959 but we'll talk about anonymous functions in just another minute. 00:04:21.959 --> 00:04:24.000 I'll give you an example and you can see how they 00:04:24.000 --> 00:04:27.287 might be useful in certain contexts. 00:04:27.287 --> 00:04:29.370 And those contexts actually do kind of materialize 00:04:29.370 --> 00:04:31.680 a lot in JavaScript programming. 00:04:31.680 --> 00:04:35.612 JavaScript, like C, and like Python, are analogous to Python's lists. 00:04:35.612 --> 00:04:37.320 Has arrays, and you can declare an array. 00:04:37.320 --> 00:04:38.530 It's pretty straightforward. 00:04:38.530 --> 00:04:41.520 For example, var nums creates a local array. 00:04:41.520 --> 00:04:43.530 And then I have square brackets, and I just 00:04:43.530 --> 00:04:47.460 have a comma-separated list of all the values that I want to put in the array. 00:04:47.460 --> 00:04:49.280 I can also mix types. 00:04:49.280 --> 00:04:52.950 I don't have to have all integers, or all floats, or all strings, 00:04:52.950 --> 00:04:57.750 like I do in C. I can have different types mixed together there. 00:04:57.750 --> 00:05:00.540 JavaScript has the ability to behave a few different ways. 00:05:00.540 --> 00:05:03.748 That's why it can be a little bit tricky as the very first language to learn, 00:05:03.748 --> 00:05:07.520 because a sets up a bunch of rules for itself and then breaks them. 00:05:07.520 --> 00:05:10.350 It is very, very flexible, but perhaps almost 00:05:10.350 --> 00:05:12.370 a little too flexible as a first language. 00:05:12.370 --> 00:05:15.806 But it can behave as an object-oriented programming language. 00:05:15.806 --> 00:05:18.180 Object-oriented might be a term that you've heard before, 00:05:18.180 --> 00:05:21.300 but if not, we'll try to give a quick little crash course here. 00:05:21.300 --> 00:05:25.740 An object is really similar in spirit to a structure 00:05:25.740 --> 00:05:28.740 that we are familiar with, hopefully, from C. Now, in C, 00:05:28.740 --> 00:05:31.987 structures can have a number of different fields or members. 00:05:31.987 --> 00:05:35.070 Another term for those that we see commonly in object-oriented programming 00:05:35.070 --> 00:05:36.840 are properties. 00:05:36.840 --> 00:05:39.370 But those properties, or fields, or members, just like in 00:05:39.370 --> 00:05:42.280 C, can never stand on their own. 00:05:42.280 --> 00:05:45.180 So for example, if we define the structure for a car like this-- 00:05:45.180 --> 00:05:49.590 struct car, and inside of that, there are two different fields or members-- 00:05:49.590 --> 00:05:53.040 int year and char model tens, or a 10-character string 00:05:53.040 --> 00:05:55.825 that we can use to store the cars' model. 00:05:55.825 --> 00:05:56.950 We can do things like this. 00:05:56.950 --> 00:05:58.800 We can say struct car Herbie, which declares 00:05:58.800 --> 00:06:02.550 a variable of type struct car named Herbie, 00:06:02.550 --> 00:06:05.630 and then we can say Herbie dot year equals 1963. 00:06:05.630 --> 00:06:06.940 Hurbie dot model equals Beetle. 00:06:06.940 --> 00:06:07.780 That's totally fine. 00:06:07.780 --> 00:06:10.470 That's valid C. But we can never say this in C-- 00:06:10.470 --> 00:06:14.730 we can never say, year equals 1963, model equals Beetle. 00:06:14.730 --> 00:06:18.060 Now, we can't say that because year and model are so fundamental to what 00:06:18.060 --> 00:06:19.920 it means to be a struct car. 00:06:19.920 --> 00:06:21.270 They are part of a struct car. 00:06:21.270 --> 00:06:24.390 And so if we're ever using year and model-- 00:06:24.390 --> 00:06:25.830 we can't use them in the abstract. 00:06:25.830 --> 00:06:30.510 We always have to associate those things with a particular struct car. 00:06:30.510 --> 00:06:33.210 So that is not OK. 00:06:33.210 --> 00:06:37.140 Objects, in addition to having fields, or members, or properties, 00:06:37.140 --> 00:06:39.510 also have something called methods, which 00:06:39.510 --> 00:06:45.930 is sort of like if a C structure had a function that could only ever apply 00:06:45.930 --> 00:06:47.970 to that structure. 00:06:47.970 --> 00:06:52.165 So it's as if we have a function where structures are the only things that 00:06:52.165 --> 00:06:53.040 need to be passed in. 00:06:53.040 --> 00:06:54.570 Now, that, we have in C. 00:06:54.570 --> 00:07:00.990 But we can't define a function inside of the curly braces of a struct. 00:07:00.990 --> 00:07:03.810 That is more-- that is object-oriented programming. 00:07:03.810 --> 00:07:06.250 That is different from here. 00:07:06.250 --> 00:07:09.000 But just like properties, methods don't stand on their own either. 00:07:09.000 --> 00:07:11.416 It's not like a function that just exists in the abstract. 00:07:11.416 --> 00:07:16.590 It is a function that only exists in the context of, in this case, an object. 00:07:16.590 --> 00:07:20.054 So where we might do this in C-- function parentheses object, 00:07:20.054 --> 00:07:22.470 where object is a parameter to the function being called-- 00:07:22.470 --> 00:07:26.490 that is not object-oriented styling. 00:07:26.490 --> 00:07:30.360 Object oriented means the object is at the core of everything, 00:07:30.360 --> 00:07:35.850 and instead, we're going to call this function that is a part of the object. 00:07:35.850 --> 00:07:36.420 OK? 00:07:36.420 --> 00:07:40.050 So this is what object-oriented programming looks like in a very, 00:07:40.050 --> 00:07:44.670 very basic form, is, there are functions that are affiliated or associated with 00:07:44.670 --> 00:07:48.420 objects, and we call those functions as follows-- 00:07:48.420 --> 00:07:52.140 by specifying the object and saying we want some function 00:07:52.140 --> 00:07:55.620 to execute on that object, like this. 00:07:55.620 --> 00:07:59.130 The fields and methods of an object are really similar in spirit 00:07:59.130 --> 00:08:01.680 to the idea of a dictionary, which you may be familiar with 00:08:01.680 --> 00:08:03.210 or recall from Python. 00:08:03.210 --> 00:08:07.410 So we could, for example, have something like this-- var Herbie equals-- 00:08:07.410 --> 00:08:11.220 curly braces, now, not square brackets, it's curly braces-- 00:08:11.220 --> 00:08:14.730 and then, a comma-separated list of key value pairs, where 00:08:14.730 --> 00:08:20.040 year 1963 is sort of like saying Herbie dot year equals 1963 in C, 00:08:20.040 --> 00:08:24.400 and Herbie dot model equals Beetle. 00:08:24.400 --> 00:08:27.390 This is akin to how we would do the same thing in JavaScript, 00:08:27.390 --> 00:08:31.850 by creating an object and giving it a couple of properties right away. 00:08:31.850 --> 00:08:32.350 All right. 00:08:32.350 --> 00:08:34.724 Now, let's go back to loops, because I mentioned earlier, 00:08:34.724 --> 00:08:37.799 there are a couple of different new loops that we can use in JavaScript. 00:08:37.799 --> 00:08:41.730 So now that we have this object, how would we maybe iterate across 00:08:41.730 --> 00:08:44.350 all of the key value pairs of that object? 00:08:44.350 --> 00:08:47.520 Or in fact, how we iterate across all of the elements of an array, 00:08:47.520 --> 00:08:50.400 if we wanted to do that, besides using a for loop, a while 00:08:50.400 --> 00:08:51.910 loop, or a do-while loop? 00:08:51.910 --> 00:08:54.330 So in Python, we saw something like this-- 00:08:54.330 --> 00:08:57.930 for key in list, and then we would have some code where we would use 00:08:57.930 --> 00:09:00.780 key every point from there on down-- 00:09:00.780 --> 00:09:04.332 a stand in for the i-th element of the list. 00:09:04.332 --> 00:09:07.290 You can't do that in JavaScript, but we can do something pretty similar 00:09:07.290 --> 00:09:10.020 for var key in object. 00:09:10.020 --> 00:09:11.860 And then open curly brace. 00:09:11.860 --> 00:09:16.140 And between those curly braces, we can use object square bracket key 00:09:16.140 --> 00:09:20.310 to refer to the key-th element of the object, 00:09:20.310 --> 00:09:24.850 or the key-th key in a key value pair set of the object. 00:09:24.850 --> 00:09:27.030 We also have a slightly different variation 00:09:27.030 --> 00:09:30.780 for var key of object, which, instead of having to use 00:09:30.780 --> 00:09:32.850 object square bracket key, we can now refer 00:09:32.850 --> 00:09:34.890 to iterating across all of the values-- 00:09:34.890 --> 00:09:37.680 as opposed to this, which iterates across all the keys, 00:09:37.680 --> 00:09:39.270 this would iterate across the values. 00:09:39.270 --> 00:09:44.280 So we can cover both sides of a key value pair using for var key 00:09:44.280 --> 00:09:46.492 in, or for var key of. 00:09:46.492 --> 00:09:48.200 Here's an example of an array where we're 00:09:48.200 --> 00:09:50.930 going to use these two different types of loop. 00:09:50.930 --> 00:09:53.400 So we have here a week array that has 7 elements in it-- 00:09:53.400 --> 00:09:56.025 Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday. 00:09:56.025 --> 00:10:00.240 And I want to use a four var day in week array. 00:10:00.240 --> 00:10:03.990 So I want to use a for in loop, and I want to console dog log. 00:10:03.990 --> 00:10:06.420 Console dot log is the JavaScript equivalent of print f. 00:10:06.420 --> 00:10:10.601 You can access it using developer tools in most modern browsers. 00:10:10.601 --> 00:10:12.600 What's going to happen when they print this out? 00:10:12.600 --> 00:10:14.769 It's going to print out a list of all of the keys. 00:10:14.769 --> 00:10:17.810 Well, in this array, there's really no keys-- there's a bunch of indices. 00:10:17.810 --> 00:10:20.550 So this will print out 0, 1, 2, 3, 4, 5, 6, 00:10:20.550 --> 00:10:22.650 because there are seven elements of my array, 00:10:22.650 --> 00:10:25.540 and I am logging which element I'm talking about. 00:10:25.540 --> 00:10:30.884 If I wanted to print out the days instead, I would use a for of loop, 00:10:30.884 --> 00:10:33.300 and I would get the following printed out to the console-- 00:10:33.300 --> 00:10:36.030 Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday. 00:10:36.030 --> 00:10:37.990 What if I want to concatenate information? 00:10:37.990 --> 00:10:41.095 So remember, we can tie different strings together. 00:10:41.095 --> 00:10:42.220 We could do that in Python. 00:10:42.220 --> 00:10:45.360 We can do it as well here in JavaScript. 00:10:45.360 --> 00:10:46.980 And we do that by using plus. 00:10:46.980 --> 00:10:50.040 So if I want to console dot log a bunch of different strings concatenated 00:10:50.040 --> 00:10:51.971 together, I just use plus to do it. 00:10:51.971 --> 00:10:53.720 But here's a little bit of a catch, right? 00:10:53.720 --> 00:10:56.460 If I'm using plus, now it means two different things. 00:10:56.460 --> 00:11:01.200 I want to concatenate strings together, but maybe here, I want to add. 00:11:01.200 --> 00:11:03.360 I really encourage you to take a look at what 00:11:03.360 --> 00:11:07.830 happens if you write the week array into some JavaScript, 00:11:07.830 --> 00:11:12.390 and then have a loop that iterates across and console dot logs this. 00:11:12.390 --> 00:11:15.550 You might find that you get something that you don't expect. 00:11:15.550 --> 00:11:17.390 And so, JavaScript is making its best guess, 00:11:17.390 --> 00:11:21.060 and it's assuming that day and 1 are both strings, when really, 00:11:21.060 --> 00:11:24.522 what I want to do is add them together, literally, because they're numbers. 00:11:24.522 --> 00:11:26.730 But fortunately JavaScript gives us a way around that 00:11:26.730 --> 00:11:28.271 by using a function called parse int. 00:11:28.271 --> 00:11:31.167 Now, this is going to give us what we expect to see. 00:11:31.167 --> 00:11:33.000 This, on the other hand, is going to give us 00:11:33.000 --> 00:11:34.527 something we don't expect to see. 00:11:34.527 --> 00:11:37.110 But it's just, again, a case of, we're using the same operator 00:11:37.110 --> 00:11:39.450 to mean two different things, and the language sometimes 00:11:39.450 --> 00:11:41.440 has to make a best guess. 00:11:41.440 --> 00:11:45.060 So it's not always a great thing that languages nowadays don't often 00:11:45.060 --> 00:11:47.860 require us to specify a data type-- 00:11:47.860 --> 00:11:50.130 if we were able to specify a data type here, 00:11:50.130 --> 00:11:51.911 we would be able to disambiguate this. 00:11:51.911 --> 00:11:54.660 But here with JavaScript, it thinks it's being very helpful for us 00:11:54.660 --> 00:11:55.760 by not specifying a type. 00:11:55.760 --> 00:11:58.210 And it's going to make our best guess as to what we want to do, 00:11:58.210 --> 00:11:59.501 but sometimes it guesses wrong. 00:11:59.501 --> 00:12:03.270 But it gives us ways to work around it if it does indeed guess wrong. 00:12:03.270 --> 00:12:07.510 So arrays are actually a special case of an object. 00:12:07.510 --> 00:12:10.510 And, actually, in JavaScript, everything is a special case of an object. 00:12:10.510 --> 00:12:13.350 X, any variable, var x equals 44-- 00:12:13.350 --> 00:12:16.250 that's an object that just happens to have one property. 00:12:16.250 --> 00:12:19.650 Arrays are an object that happens to have a number of properties, 00:12:19.650 --> 00:12:22.340 and also some certain methods that can be applied to them. 00:12:22.340 --> 00:12:26.817 So we can call the size method, or pop, or push, or shift. 00:12:26.817 --> 00:12:29.400 And I'll leave you to figure out, or to do some research into, 00:12:29.400 --> 00:12:31.210 what those different things are. 00:12:31.210 --> 00:12:34.050 But suffice it to say that they are functions that are basically 00:12:34.050 --> 00:12:36.662 so baked into what it means to be an array 00:12:36.662 --> 00:12:38.370 that we can just call them without having 00:12:38.370 --> 00:12:39.745 to write them in the first place. 00:12:39.745 --> 00:12:40.537 That's pretty cool. 00:12:40.537 --> 00:12:42.244 Here's another cool thing that you can do 00:12:42.244 --> 00:12:44.490 with arrays-- there's another method for them called 00:12:44.490 --> 00:12:48.810 map, which basically allows us to apply a function to every single element 00:12:48.810 --> 00:12:49.620 of an array. 00:12:49.620 --> 00:12:51.930 And in particular, this is a great example 00:12:51.930 --> 00:12:53.710 for using an anonymous function. 00:12:53.710 --> 00:12:56.293 So let's take a look at how we might use an anonymous function 00:12:56.293 --> 00:12:58.170 and why it might be useful to do so. 00:12:58.170 --> 00:12:59.704 Here's an array called nums. 00:12:59.704 --> 00:13:00.870 It has five elements in it-- 00:13:00.870 --> 00:13:03.180 1, 2, 3, 4, and 5. 00:13:03.180 --> 00:13:07.560 Now, what I want to do is, I want to map some function on to them. 00:13:07.560 --> 00:13:09.779 So what I'm saying here is, nums equals-- 00:13:09.779 --> 00:13:11.320 so I'm going to do something to nums. 00:13:11.320 --> 00:13:14.580 I'm going to reassign that back to nums. 00:13:14.580 --> 00:13:17.106 Nums equals nums dot map-- 00:13:17.106 --> 00:13:19.390 and remember, map takes in a function. 00:13:19.390 --> 00:13:24.930 It's a function that I want to apply to all of the elements of that array. 00:13:24.930 --> 00:13:27.840 One thing I could do is just write this function somewhere else, 00:13:27.840 --> 00:13:29.561 and give it a name, say I called it-- 00:13:29.561 --> 00:13:32.310 what's going to happen here is, every value's going to be doubled. 00:13:32.310 --> 00:13:35.220 Let's say that I wrote a function called double numbers. 00:13:35.220 --> 00:13:39.750 I could say, nums equals nums dot map parentheses double numbers, 00:13:39.750 --> 00:13:42.150 and it would just double every number. 00:13:42.150 --> 00:13:43.510 That would be fine. 00:13:43.510 --> 00:13:46.460 But here, notice I'm using that function key word, 00:13:46.460 --> 00:13:49.350 and I'm giving a list of parameters-- in this case, num-- 00:13:49.350 --> 00:13:51.300 but I'm not giving that function a name. 00:13:51.300 --> 00:13:53.130 Why am I not giving that function a name? 00:13:53.130 --> 00:13:55.020 Well, I'm just doing this mapping here. 00:13:55.020 --> 00:13:57.327 I'm never going to need to double these numbers again. 00:13:57.327 --> 00:13:59.160 Why am I going to clutter up the name space, 00:13:59.160 --> 00:14:03.330 and give it some name when I'm never going to use it 00:14:03.330 --> 00:14:05.200 again outside of this context? 00:14:05.200 --> 00:14:08.325 It's kind of convenient that we can actually use the function in this case, 00:14:08.325 --> 00:14:10.950 then, without having to give it a name, and still 00:14:10.950 --> 00:14:12.870 have it do what we want to do. 00:14:12.870 --> 00:14:15.724 So all I'm doing here inside of those parentheses of maps is, 00:14:15.724 --> 00:14:17.640 the open parentheses on the first line there-- 00:14:17.640 --> 00:14:20.400 and that close parentheses is actually on the third line. 00:14:20.400 --> 00:14:23.940 And in between the parentheses, where I'm specifying the parameter to map, 00:14:23.940 --> 00:14:26.911 I'm literally defining an entire function in there. 00:14:26.911 --> 00:14:29.910 And then if I execute this line of code, what's going to happen to nums? 00:14:29.910 --> 00:14:34.646 Well, you can probably guess, it's going to just double every element of nums. 00:14:34.646 --> 00:14:37.770 All right, one more thing I want to touch on really quick about JavaScript, 00:14:37.770 --> 00:14:40.500 and that is the notion of events. 00:14:40.500 --> 00:14:44.250 So an event is something that goes hand in hand with HTML on JavaScript, 00:14:44.250 --> 00:14:47.217 and it is a response to a user doing something on a web page. 00:14:47.217 --> 00:14:49.050 So for example, perhaps they click a button. 00:14:49.050 --> 00:14:52.140 Perhaps the page has finished loading after the user hits refresh, 00:14:52.140 --> 00:14:52.890 for example. 00:14:52.890 --> 00:14:55.920 Maybe they hover over a portion of the page, or something like that. 00:14:55.920 --> 00:14:57.930 All of those things are events. 00:14:57.930 --> 00:15:01.320 And JavaScript has support for what is called an event handler, which 00:15:01.320 --> 00:15:04.100 is some JavaScript code that will execute 00:15:04.100 --> 00:15:06.177 once that event has taken place. 00:15:06.177 --> 00:15:08.260 So it allows our site page to be very interactive. 00:15:08.260 --> 00:15:10.950 We type in a box, for example-- 00:15:10.950 --> 00:15:14.420 we could have an event handler, that pops up a message that 00:15:14.420 --> 00:15:15.800 says, please enter your password. 00:15:15.800 --> 00:15:19.060 So it's just a complete-- it's an empty field that says nothing at all. 00:15:19.060 --> 00:15:20.810 You start to type in it, and then this box 00:15:20.810 --> 00:15:23.720 pops up because you started typing, which is an event on the page. 00:15:23.720 --> 00:15:26.840 And it tells you to do something that is a JavaScript event 00:15:26.840 --> 00:15:29.210 handler taking effect. 00:15:29.210 --> 00:15:32.942 Many elements of HTML have support for events as an attribute. 00:15:32.942 --> 00:15:34.900 So here's an example of some really basic HTML. 00:15:34.900 --> 00:15:39.230 I have my head and my body, and inside of the body, there are two buttons. 00:15:39.230 --> 00:15:41.870 And they have this attribute called on click. 00:15:41.870 --> 00:15:45.350 On click is a definition, basically, for an event handler. 00:15:45.350 --> 00:15:48.740 So I want something to happen when I click the buttons. 00:15:48.740 --> 00:15:51.380 Right now it's nothing, but I can put something in there 00:15:51.380 --> 00:15:53.930 so that when I click on either of those buttons, 00:15:53.930 --> 00:15:58.504 that function that's in between the quotation marks there would get called. 00:15:58.504 --> 00:16:00.920 We can write a really generic event handler in JavaScript, 00:16:00.920 --> 00:16:03.465 for example, that creates an event object, 00:16:03.465 --> 00:16:05.840 and will tell us which of those two buttons were clicked. 00:16:05.840 --> 00:16:07.660 And it might look something like this. 00:16:07.660 --> 00:16:11.690 Button on click equals alert name event. 00:16:11.690 --> 00:16:15.440 If we do this, we have basically set up our HTML, 00:16:15.440 --> 00:16:19.620 so that when either button one is clicked or button two is clicked, 00:16:19.620 --> 00:16:24.920 the alert name function will be called, and an event will be passed in. 00:16:24.920 --> 00:16:27.960 The event is automatically generated by the page, 00:16:27.960 --> 00:16:31.610 and it basically contains all of the information about what just happened. 00:16:31.610 --> 00:16:34.301 And from that information, we can extract more information. 00:16:34.301 --> 00:16:36.800 So for example, here what the alert name function might look 00:16:36.800 --> 00:16:40.516 like, and notice that here, I'm also accepting an event parameter. 00:16:40.516 --> 00:16:41.390 What am I doing then? 00:16:41.390 --> 00:16:44.970 I'm getting a new JavaScript local variable called trigger, 00:16:44.970 --> 00:16:47.510 and I'm asking for that event's source element. 00:16:47.510 --> 00:16:49.430 And what that is basically telling me is, 00:16:49.430 --> 00:16:51.920 what is the element on the page that was interacted 00:16:51.920 --> 00:16:53.990 with that triggered this event? 00:16:53.990 --> 00:16:57.650 Or rather, put another way, what element effectively 00:16:57.650 --> 00:16:59.930 was passed in to this function. 00:16:59.930 --> 00:17:02.125 Because, again, this is automatically generated. 00:17:02.125 --> 00:17:05.558 The page knows which button we touched, and so, basically, 00:17:05.558 --> 00:17:08.599 what's happening here is, that button-- whichever one of the two it was-- 00:17:08.599 --> 00:17:10.420 is getting passed into this function. 00:17:10.420 --> 00:17:12.710 Then-- and you'll see a little bit more of this when we talk about the document 00:17:12.710 --> 00:17:13.760 object model-- 00:17:13.760 --> 00:17:20.970 I can access that trigger's inner HTML to figure out which button was clicked. 00:17:20.970 --> 00:17:22.010 Now, what is inner HTML? 00:17:22.010 --> 00:17:24.450 Let me jump back a couple of slides for a second here. 00:17:24.450 --> 00:17:27.560 The inner HTML is what is between the button tags. 00:17:27.560 --> 00:17:32.370 In this case, button one is inner HTML and button two is also inner HTML. 00:17:32.370 --> 00:17:35.930 So what happens when I click on those buttons is, it will alert to me, 00:17:35.930 --> 00:17:39.290 you clicked on button one if I happened to click on button one, 00:17:39.290 --> 00:17:43.520 or, you clicked on button two, if you happened to click on button two. 00:17:43.520 --> 00:17:46.110 Now, again, we are just scratching the surface of JavaScript, 00:17:46.110 --> 00:17:47.660 but I wanted to give you a sense of some of the different things 00:17:47.660 --> 00:17:50.930 that you can do, so that you can then go forward, look at the documentation, 00:17:50.930 --> 00:17:54.112 and see the very wide range of things that you can do as well, 00:17:54.112 --> 00:17:55.820 by just applying some of the basic tenets 00:17:55.820 --> 00:17:59.420 that we've learned about in CS50, and really expanding 00:17:59.420 --> 00:18:01.880 your knowledge exponentially. 00:18:01.880 --> 00:18:02.790 I'm Doug Lloyd. 00:18:02.790 --> 00:18:04.670 This is CS50.