1 00:00:00,000 --> 00:00:05,470 [INSTRUMENTAL MUSIC PLAYING] 2 00:00:05,470 --> 00:00:07,470 DOUG LLOYD: So near CS50's end, we introduce you 3 00:00:07,470 --> 00:00:10,020 to several different programming languages, 4 00:00:10,020 --> 00:00:12,570 and we aren't able to cover them in nearly as much depth 5 00:00:12,570 --> 00:00:15,480 as we're able to cover C earlier in the course. 6 00:00:15,480 --> 00:00:18,480 The goal here is not to give you a complete rundown of what 7 00:00:18,480 --> 00:00:20,914 these languages do, but to give you enough of the basics 8 00:00:20,914 --> 00:00:22,830 and show you enough of the parallels to things 9 00:00:22,830 --> 00:00:26,970 that you already know so that you can go forth and really flesh out 10 00:00:26,970 --> 00:00:29,430 your knowledge of these different languages. 11 00:00:29,430 --> 00:00:33,030 And another one of these we're going to cover right now is JavaScript. 12 00:00:33,030 --> 00:00:36,330 Now, similar to other languages we've discussed, 13 00:00:36,330 --> 00:00:40,245 it is a modern programming language that is derived from C's syntax. 14 00:00:40,245 --> 00:00:42,060 So if you're familiar with C, you're going 15 00:00:42,060 --> 00:00:44,290 to be able to pick up JavaScript pretty quickly. 16 00:00:44,290 --> 00:00:46,630 It's been around just about as long as Python. 17 00:00:46,630 --> 00:00:49,994 It was invented a few years afterwards in the mid 1990s. 18 00:00:49,994 --> 00:00:52,910 Now what's really important about JavaScript, as well as HTML and CSS, 19 00:00:52,910 --> 00:00:54,720 which we've discussed in other videos, is 20 00:00:54,720 --> 00:00:59,780 that those three languages pretty much make up the core user experience 21 00:00:59,780 --> 00:01:01,480 of what it means to be online. 22 00:01:01,480 --> 00:01:05,790 So understanding how to use and work with JavaScript, HTML, and CSS 23 00:01:05,790 --> 00:01:09,600 will allow you to really create websites that users 24 00:01:09,600 --> 00:01:12,450 will enjoy visiting, because you'll be able to create a great user 25 00:01:12,450 --> 00:01:15,150 experience for them with these three languages. 26 00:01:15,150 --> 00:01:17,250 To write JavaScript, it's really easy. 27 00:01:17,250 --> 00:01:19,260 Open up a file with a dot js file extension, 28 00:01:19,260 --> 00:01:21,240 and start writing in JavaScript right away. 29 00:01:21,240 --> 00:01:23,406 If you're familiar with a language like PHP, 30 00:01:23,406 --> 00:01:25,530 you know that you have to sort of bind your code up 31 00:01:25,530 --> 00:01:28,800 in these delimiters-- bracket, question mark, PHP, and all that stuff. 32 00:01:28,800 --> 00:01:29,880 We don't have to do that in JavaScript. 33 00:01:29,880 --> 00:01:32,280 We literally just start writing our code in a JavaScript 34 00:01:32,280 --> 00:01:33,810 file, which is pretty nice. 35 00:01:33,810 --> 00:01:37,290 Our website will also know that what our file is is JavaScript, 36 00:01:37,290 --> 00:01:39,630 because we're going to tell it in an HTML tag. 37 00:01:39,630 --> 00:01:42,930 We're going to say, I have a script that is of type JavaScript, 38 00:01:42,930 --> 00:01:45,750 and it is a file with a dot js file extension. 39 00:01:45,750 --> 00:01:47,090 Pretty straightforward. 40 00:01:47,090 --> 00:01:50,940 Now, unlike Python, which runs on the server side-- that is, on the side 41 00:01:50,940 --> 00:01:53,790 that is hosting the website, JavaScript applications 42 00:01:53,790 --> 00:01:58,830 run client side on your own machine when you are visiting a website. 43 00:01:58,830 --> 00:02:02,640 To include JavaScript in your HTML, it's pretty easy. 44 00:02:02,640 --> 00:02:04,980 Just like when we include CSS with style tags, 45 00:02:04,980 --> 00:02:07,672 we can include JavaScript in between script tags. 46 00:02:07,672 --> 00:02:09,630 So we can have an open script tag and literally 47 00:02:09,630 --> 00:02:14,100 start writing JavaScript right in our HTML, which is kind of cool. 48 00:02:14,100 --> 00:02:16,770 But also like CSS, where we have link tags, 49 00:02:16,770 --> 00:02:18,870 we can write our JavaScript in a different file 50 00:02:18,870 --> 00:02:22,920 and connect it using the source attribute of a script tag. 51 00:02:22,920 --> 00:02:25,867 In CS50, and really probably more generally, 52 00:02:25,867 --> 00:02:28,200 this is definitely the preferred way to go, particularly 53 00:02:28,200 --> 00:02:31,980 if you have a JavaScript file that might be used-- 54 00:02:31,980 --> 00:02:35,700 or the contents of which might be used-- on different pages of your website. 55 00:02:35,700 --> 00:02:38,640 You don't have to write the JavaScript between the script tags 56 00:02:38,640 --> 00:02:40,050 on every single page. 57 00:02:40,050 --> 00:02:43,950 You want to be able to just refer to an outside file 58 00:02:43,950 --> 00:02:47,380 and link that in every single time. 59 00:02:47,380 --> 00:02:51,785 So let's quickly run down some of the fundamentals 60 00:02:51,785 --> 00:02:53,160 that you might use in JavaScript. 61 00:02:53,160 --> 00:02:56,368 So, variables-- they're really similar to Python variables and really similar 62 00:02:56,368 --> 00:02:57,720 to C variables. 63 00:02:57,720 --> 00:02:59,190 No type specifier is required. 64 00:02:59,190 --> 00:03:03,210 And if you want a local variable, you preface it with the var keyword. 65 00:03:03,210 --> 00:03:05,752 So in Python, we would say something like this-- x equals 44. 66 00:03:05,752 --> 00:03:08,543 We don't want to do that in JavaScript, because that would actually 67 00:03:08,543 --> 00:03:11,560 create a global variable, if you were to put a semicolon at the end. 68 00:03:11,560 --> 00:03:13,980 We would want this-- var x equals 44. 69 00:03:13,980 --> 00:03:17,220 That creates a local variable called x in JavaScript, 70 00:03:17,220 --> 00:03:19,980 and stores the value 44 in it. 71 00:03:19,980 --> 00:03:23,310 Conditionals-- all of the old favorites from C are available for you to use. 72 00:03:23,310 --> 00:03:27,867 If, else if, else, switch, question mark colon-- all of those are fair game. 73 00:03:27,867 --> 00:03:29,700 We're not going into detail on those at all, 74 00:03:29,700 --> 00:03:31,680 because we've covered them in our videos on C. 75 00:03:31,680 --> 00:03:33,430 But they're all here to use in JavaScript, 76 00:03:33,430 --> 00:03:35,670 and behave pretty much exactly the same. 77 00:03:35,670 --> 00:03:38,160 Loops, meanwhile-- all of ones we're familiar with from C 78 00:03:38,160 --> 00:03:41,190 are also still available-- while loops, do-while loops, 79 00:03:41,190 --> 00:03:43,920 and for loops, although we do have a couple of other variations 80 00:03:43,920 --> 00:03:46,120 that we'll talk about in just a little bit. 81 00:03:46,120 --> 00:03:49,730 Now, functions in JavaScript are all introduced with the function keyword. 82 00:03:49,730 --> 00:03:50,750 So it's a function. 83 00:03:50,750 --> 00:03:52,830 Write a function name and parameters, and then 84 00:03:52,830 --> 00:03:55,680 we define our function between curly braces just like we would in C, 85 00:03:55,680 --> 00:03:58,200 except in C, of course, we're not using the function keyword. 86 00:03:58,200 --> 00:04:00,158 But there's also a catch with JavaScript, which 87 00:04:00,158 --> 00:04:03,540 is that functions can be anonymous. 88 00:04:03,540 --> 00:04:06,180 Meaning you don't have to give them a name. 89 00:04:06,180 --> 00:04:09,037 Now, you might be asking yourself, wait, how can I call a function 90 00:04:09,037 --> 00:04:10,120 If it doesn't have a name? 91 00:04:10,120 --> 00:04:11,580 Well, we'll talk about that in just a little bit, 92 00:04:11,580 --> 00:04:14,538 and we'll talk about what I mean in particular here when I'm describing 93 00:04:14,538 --> 00:04:16,060 binding things to HTML elements. 94 00:04:16,060 --> 00:04:19,293 We'll talk about that in the video on the document object model, 95 00:04:19,293 --> 00:04:21,959 but we'll talk about anonymous functions in just another minute. 96 00:04:21,959 --> 00:04:24,000 I'll give you an example and you can see how they 97 00:04:24,000 --> 00:04:27,287 might be useful in certain contexts. 98 00:04:27,287 --> 00:04:29,370 And those contexts actually do kind of materialize 99 00:04:29,370 --> 00:04:31,680 a lot in JavaScript programming. 100 00:04:31,680 --> 00:04:35,612 JavaScript, like C, and like Python, are analogous to Python's lists. 101 00:04:35,612 --> 00:04:37,320 Has arrays, and you can declare an array. 102 00:04:37,320 --> 00:04:38,530 It's pretty straightforward. 103 00:04:38,530 --> 00:04:41,520 For example, var nums creates a local array. 104 00:04:41,520 --> 00:04:43,530 And then I have square brackets, and I just 105 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. 106 00:04:47,460 --> 00:04:49,280 I can also mix types. 107 00:04:49,280 --> 00:04:52,950 I don't have to have all integers, or all floats, or all strings, 108 00:04:52,950 --> 00:04:57,750 like I do in C. I can have different types mixed together there. 109 00:04:57,750 --> 00:05:00,540 JavaScript has the ability to behave a few different ways. 110 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, 111 00:05:03,748 --> 00:05:07,520 because a sets up a bunch of rules for itself and then breaks them. 112 00:05:07,520 --> 00:05:10,350 It is very, very flexible, but perhaps almost 113 00:05:10,350 --> 00:05:12,370 a little too flexible as a first language. 114 00:05:12,370 --> 00:05:15,806 But it can behave as an object-oriented programming language. 115 00:05:15,806 --> 00:05:18,180 Object-oriented might be a term that you've heard before, 116 00:05:18,180 --> 00:05:21,300 but if not, we'll try to give a quick little crash course here. 117 00:05:21,300 --> 00:05:25,740 An object is really similar in spirit to a structure 118 00:05:25,740 --> 00:05:28,740 that we are familiar with, hopefully, from C. Now, in C, 119 00:05:28,740 --> 00:05:31,987 structures can have a number of different fields or members. 120 00:05:31,987 --> 00:05:35,070 Another term for those that we see commonly in object-oriented programming 121 00:05:35,070 --> 00:05:36,840 are properties. 122 00:05:36,840 --> 00:05:39,370 But those properties, or fields, or members, just like in 123 00:05:39,370 --> 00:05:42,280 C, can never stand on their own. 124 00:05:42,280 --> 00:05:45,180 So for example, if we define the structure for a car like this-- 125 00:05:45,180 --> 00:05:49,590 struct car, and inside of that, there are two different fields or members-- 126 00:05:49,590 --> 00:05:53,040 int year and char model tens, or a 10-character string 127 00:05:53,040 --> 00:05:55,825 that we can use to store the cars' model. 128 00:05:55,825 --> 00:05:56,950 We can do things like this. 129 00:05:56,950 --> 00:05:58,800 We can say struct car Herbie, which declares 130 00:05:58,800 --> 00:06:02,550 a variable of type struct car named Herbie, 131 00:06:02,550 --> 00:06:05,630 and then we can say Herbie dot year equals 1963. 132 00:06:05,630 --> 00:06:06,940 Hurbie dot model equals Beetle. 133 00:06:06,940 --> 00:06:07,780 That's totally fine. 134 00:06:07,780 --> 00:06:10,470 That's valid C. But we can never say this in C-- 135 00:06:10,470 --> 00:06:14,730 we can never say, year equals 1963, model equals Beetle. 136 00:06:14,730 --> 00:06:18,060 Now, we can't say that because year and model are so fundamental to what 137 00:06:18,060 --> 00:06:19,920 it means to be a struct car. 138 00:06:19,920 --> 00:06:21,270 They are part of a struct car. 139 00:06:21,270 --> 00:06:24,390 And so if we're ever using year and model-- 140 00:06:24,390 --> 00:06:25,830 we can't use them in the abstract. 141 00:06:25,830 --> 00:06:30,510 We always have to associate those things with a particular struct car. 142 00:06:30,510 --> 00:06:33,210 So that is not OK. 143 00:06:33,210 --> 00:06:37,140 Objects, in addition to having fields, or members, or properties, 144 00:06:37,140 --> 00:06:39,510 also have something called methods, which 145 00:06:39,510 --> 00:06:45,930 is sort of like if a C structure had a function that could only ever apply 146 00:06:45,930 --> 00:06:47,970 to that structure. 147 00:06:47,970 --> 00:06:52,165 So it's as if we have a function where structures are the only things that 148 00:06:52,165 --> 00:06:53,040 need to be passed in. 149 00:06:53,040 --> 00:06:54,570 Now, that, we have in C. 150 00:06:54,570 --> 00:07:00,990 But we can't define a function inside of the curly braces of a struct. 151 00:07:00,990 --> 00:07:03,810 That is more-- that is object-oriented programming. 152 00:07:03,810 --> 00:07:06,250 That is different from here. 153 00:07:06,250 --> 00:07:09,000 But just like properties, methods don't stand on their own either. 154 00:07:09,000 --> 00:07:11,416 It's not like a function that just exists in the abstract. 155 00:07:11,416 --> 00:07:16,590 It is a function that only exists in the context of, in this case, an object. 156 00:07:16,590 --> 00:07:20,054 So where we might do this in C-- function parentheses object, 157 00:07:20,054 --> 00:07:22,470 where object is a parameter to the function being called-- 158 00:07:22,470 --> 00:07:26,490 that is not object-oriented styling. 159 00:07:26,490 --> 00:07:30,360 Object oriented means the object is at the core of everything, 160 00:07:30,360 --> 00:07:35,850 and instead, we're going to call this function that is a part of the object. 161 00:07:35,850 --> 00:07:36,420 OK? 162 00:07:36,420 --> 00:07:40,050 So this is what object-oriented programming looks like in a very, 163 00:07:40,050 --> 00:07:44,670 very basic form, is, there are functions that are affiliated or associated with 164 00:07:44,670 --> 00:07:48,420 objects, and we call those functions as follows-- 165 00:07:48,420 --> 00:07:52,140 by specifying the object and saying we want some function 166 00:07:52,140 --> 00:07:55,620 to execute on that object, like this. 167 00:07:55,620 --> 00:07:59,130 The fields and methods of an object are really similar in spirit 168 00:07:59,130 --> 00:08:01,680 to the idea of a dictionary, which you may be familiar with 169 00:08:01,680 --> 00:08:03,210 or recall from Python. 170 00:08:03,210 --> 00:08:07,410 So we could, for example, have something like this-- var Herbie equals-- 171 00:08:07,410 --> 00:08:11,220 curly braces, now, not square brackets, it's curly braces-- 172 00:08:11,220 --> 00:08:14,730 and then, a comma-separated list of key value pairs, where 173 00:08:14,730 --> 00:08:20,040 year 1963 is sort of like saying Herbie dot year equals 1963 in C, 174 00:08:20,040 --> 00:08:24,400 and Herbie dot model equals Beetle. 175 00:08:24,400 --> 00:08:27,390 This is akin to how we would do the same thing in JavaScript, 176 00:08:27,390 --> 00:08:31,850 by creating an object and giving it a couple of properties right away. 177 00:08:31,850 --> 00:08:32,350 All right. 178 00:08:32,350 --> 00:08:34,724 Now, let's go back to loops, because I mentioned earlier, 179 00:08:34,724 --> 00:08:37,799 there are a couple of different new loops that we can use in JavaScript. 180 00:08:37,799 --> 00:08:41,730 So now that we have this object, how would we maybe iterate across 181 00:08:41,730 --> 00:08:44,350 all of the key value pairs of that object? 182 00:08:44,350 --> 00:08:47,520 Or in fact, how we iterate across all of the elements of an array, 183 00:08:47,520 --> 00:08:50,400 if we wanted to do that, besides using a for loop, a while 184 00:08:50,400 --> 00:08:51,910 loop, or a do-while loop? 185 00:08:51,910 --> 00:08:54,330 So in Python, we saw something like this-- 186 00:08:54,330 --> 00:08:57,930 for key in list, and then we would have some code where we would use 187 00:08:57,930 --> 00:09:00,780 key every point from there on down-- 188 00:09:00,780 --> 00:09:04,332 a stand in for the i-th element of the list. 189 00:09:04,332 --> 00:09:07,290 You can't do that in JavaScript, but we can do something pretty similar 190 00:09:07,290 --> 00:09:10,020 for var key in object. 191 00:09:10,020 --> 00:09:11,860 And then open curly brace. 192 00:09:11,860 --> 00:09:16,140 And between those curly braces, we can use object square bracket key 193 00:09:16,140 --> 00:09:20,310 to refer to the key-th element of the object, 194 00:09:20,310 --> 00:09:24,850 or the key-th key in a key value pair set of the object. 195 00:09:24,850 --> 00:09:27,030 We also have a slightly different variation 196 00:09:27,030 --> 00:09:30,780 for var key of object, which, instead of having to use 197 00:09:30,780 --> 00:09:32,850 object square bracket key, we can now refer 198 00:09:32,850 --> 00:09:34,890 to iterating across all of the values-- 199 00:09:34,890 --> 00:09:37,680 as opposed to this, which iterates across all the keys, 200 00:09:37,680 --> 00:09:39,270 this would iterate across the values. 201 00:09:39,270 --> 00:09:44,280 So we can cover both sides of a key value pair using for var key 202 00:09:44,280 --> 00:09:46,492 in, or for var key of. 203 00:09:46,492 --> 00:09:48,200 Here's an example of an array where we're 204 00:09:48,200 --> 00:09:50,930 going to use these two different types of loop. 205 00:09:50,930 --> 00:09:53,400 So we have here a week array that has 7 elements in it-- 206 00:09:53,400 --> 00:09:56,025 Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday. 207 00:09:56,025 --> 00:10:00,240 And I want to use a four var day in week array. 208 00:10:00,240 --> 00:10:03,990 So I want to use a for in loop, and I want to console dog log. 209 00:10:03,990 --> 00:10:06,420 Console dot log is the JavaScript equivalent of print f. 210 00:10:06,420 --> 00:10:10,601 You can access it using developer tools in most modern browsers. 211 00:10:10,601 --> 00:10:12,600 What's going to happen when they print this out? 212 00:10:12,600 --> 00:10:14,769 It's going to print out a list of all of the keys. 213 00:10:14,769 --> 00:10:17,810 Well, in this array, there's really no keys-- there's a bunch of indices. 214 00:10:17,810 --> 00:10:20,550 So this will print out 0, 1, 2, 3, 4, 5, 6, 215 00:10:20,550 --> 00:10:22,650 because there are seven elements of my array, 216 00:10:22,650 --> 00:10:25,540 and I am logging which element I'm talking about. 217 00:10:25,540 --> 00:10:30,884 If I wanted to print out the days instead, I would use a for of loop, 218 00:10:30,884 --> 00:10:33,300 and I would get the following printed out to the console-- 219 00:10:33,300 --> 00:10:36,030 Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday. 220 00:10:36,030 --> 00:10:37,990 What if I want to concatenate information? 221 00:10:37,990 --> 00:10:41,095 So remember, we can tie different strings together. 222 00:10:41,095 --> 00:10:42,220 We could do that in Python. 223 00:10:42,220 --> 00:10:45,360 We can do it as well here in JavaScript. 224 00:10:45,360 --> 00:10:46,980 And we do that by using plus. 225 00:10:46,980 --> 00:10:50,040 So if I want to console dot log a bunch of different strings concatenated 226 00:10:50,040 --> 00:10:51,971 together, I just use plus to do it. 227 00:10:51,971 --> 00:10:53,720 But here's a little bit of a catch, right? 228 00:10:53,720 --> 00:10:56,460 If I'm using plus, now it means two different things. 229 00:10:56,460 --> 00:11:01,200 I want to concatenate strings together, but maybe here, I want to add. 230 00:11:01,200 --> 00:11:03,360 I really encourage you to take a look at what 231 00:11:03,360 --> 00:11:07,830 happens if you write the week array into some JavaScript, 232 00:11:07,830 --> 00:11:12,390 and then have a loop that iterates across and console dot logs this. 233 00:11:12,390 --> 00:11:15,550 You might find that you get something that you don't expect. 234 00:11:15,550 --> 00:11:17,390 And so, JavaScript is making its best guess, 235 00:11:17,390 --> 00:11:21,060 and it's assuming that day and 1 are both strings, when really, 236 00:11:21,060 --> 00:11:24,522 what I want to do is add them together, literally, because they're numbers. 237 00:11:24,522 --> 00:11:26,730 But fortunately JavaScript gives us a way around that 238 00:11:26,730 --> 00:11:28,271 by using a function called parse int. 239 00:11:28,271 --> 00:11:31,167 Now, this is going to give us what we expect to see. 240 00:11:31,167 --> 00:11:33,000 This, on the other hand, is going to give us 241 00:11:33,000 --> 00:11:34,527 something we don't expect to see. 242 00:11:34,527 --> 00:11:37,110 But it's just, again, a case of, we're using the same operator 243 00:11:37,110 --> 00:11:39,450 to mean two different things, and the language sometimes 244 00:11:39,450 --> 00:11:41,440 has to make a best guess. 245 00:11:41,440 --> 00:11:45,060 So it's not always a great thing that languages nowadays don't often 246 00:11:45,060 --> 00:11:47,860 require us to specify a data type-- 247 00:11:47,860 --> 00:11:50,130 if we were able to specify a data type here, 248 00:11:50,130 --> 00:11:51,911 we would be able to disambiguate this. 249 00:11:51,911 --> 00:11:54,660 But here with JavaScript, it thinks it's being very helpful for us 250 00:11:54,660 --> 00:11:55,760 by not specifying a type. 251 00:11:55,760 --> 00:11:58,210 And it's going to make our best guess as to what we want to do, 252 00:11:58,210 --> 00:11:59,501 but sometimes it guesses wrong. 253 00:11:59,501 --> 00:12:03,270 But it gives us ways to work around it if it does indeed guess wrong. 254 00:12:03,270 --> 00:12:07,510 So arrays are actually a special case of an object. 255 00:12:07,510 --> 00:12:10,510 And, actually, in JavaScript, everything is a special case of an object. 256 00:12:10,510 --> 00:12:13,350 X, any variable, var x equals 44-- 257 00:12:13,350 --> 00:12:16,250 that's an object that just happens to have one property. 258 00:12:16,250 --> 00:12:19,650 Arrays are an object that happens to have a number of properties, 259 00:12:19,650 --> 00:12:22,340 and also some certain methods that can be applied to them. 260 00:12:22,340 --> 00:12:26,817 So we can call the size method, or pop, or push, or shift. 261 00:12:26,817 --> 00:12:29,400 And I'll leave you to figure out, or to do some research into, 262 00:12:29,400 --> 00:12:31,210 what those different things are. 263 00:12:31,210 --> 00:12:34,050 But suffice it to say that they are functions that are basically 264 00:12:34,050 --> 00:12:36,662 so baked into what it means to be an array 265 00:12:36,662 --> 00:12:38,370 that we can just call them without having 266 00:12:38,370 --> 00:12:39,745 to write them in the first place. 267 00:12:39,745 --> 00:12:40,537 That's pretty cool. 268 00:12:40,537 --> 00:12:42,244 Here's another cool thing that you can do 269 00:12:42,244 --> 00:12:44,490 with arrays-- there's another method for them called 270 00:12:44,490 --> 00:12:48,810 map, which basically allows us to apply a function to every single element 271 00:12:48,810 --> 00:12:49,620 of an array. 272 00:12:49,620 --> 00:12:51,930 And in particular, this is a great example 273 00:12:51,930 --> 00:12:53,710 for using an anonymous function. 274 00:12:53,710 --> 00:12:56,293 So let's take a look at how we might use an anonymous function 275 00:12:56,293 --> 00:12:58,170 and why it might be useful to do so. 276 00:12:58,170 --> 00:12:59,704 Here's an array called nums. 277 00:12:59,704 --> 00:13:00,870 It has five elements in it-- 278 00:13:00,870 --> 00:13:03,180 1, 2, 3, 4, and 5. 279 00:13:03,180 --> 00:13:07,560 Now, what I want to do is, I want to map some function on to them. 280 00:13:07,560 --> 00:13:09,779 So what I'm saying here is, nums equals-- 281 00:13:09,779 --> 00:13:11,320 so I'm going to do something to nums. 282 00:13:11,320 --> 00:13:14,580 I'm going to reassign that back to nums. 283 00:13:14,580 --> 00:13:17,106 Nums equals nums dot map-- 284 00:13:17,106 --> 00:13:19,390 and remember, map takes in a function. 285 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. 286 00:13:24,930 --> 00:13:27,840 One thing I could do is just write this function somewhere else, 287 00:13:27,840 --> 00:13:29,561 and give it a name, say I called it-- 288 00:13:29,561 --> 00:13:32,310 what's going to happen here is, every value's going to be doubled. 289 00:13:32,310 --> 00:13:35,220 Let's say that I wrote a function called double numbers. 290 00:13:35,220 --> 00:13:39,750 I could say, nums equals nums dot map parentheses double numbers, 291 00:13:39,750 --> 00:13:42,150 and it would just double every number. 292 00:13:42,150 --> 00:13:43,510 That would be fine. 293 00:13:43,510 --> 00:13:46,460 But here, notice I'm using that function key word, 294 00:13:46,460 --> 00:13:49,350 and I'm giving a list of parameters-- in this case, num-- 295 00:13:49,350 --> 00:13:51,300 but I'm not giving that function a name. 296 00:13:51,300 --> 00:13:53,130 Why am I not giving that function a name? 297 00:13:53,130 --> 00:13:55,020 Well, I'm just doing this mapping here. 298 00:13:55,020 --> 00:13:57,327 I'm never going to need to double these numbers again. 299 00:13:57,327 --> 00:13:59,160 Why am I going to clutter up the name space, 300 00:13:59,160 --> 00:14:03,330 and give it some name when I'm never going to use it 301 00:14:03,330 --> 00:14:05,200 again outside of this context? 302 00:14:05,200 --> 00:14:08,325 It's kind of convenient that we can actually use the function in this case, 303 00:14:08,325 --> 00:14:10,950 then, without having to give it a name, and still 304 00:14:10,950 --> 00:14:12,870 have it do what we want to do. 305 00:14:12,870 --> 00:14:15,724 So all I'm doing here inside of those parentheses of maps is, 306 00:14:15,724 --> 00:14:17,640 the open parentheses on the first line there-- 307 00:14:17,640 --> 00:14:20,400 and that close parentheses is actually on the third line. 308 00:14:20,400 --> 00:14:23,940 And in between the parentheses, where I'm specifying the parameter to map, 309 00:14:23,940 --> 00:14:26,911 I'm literally defining an entire function in there. 310 00:14:26,911 --> 00:14:29,910 And then if I execute this line of code, what's going to happen to nums? 311 00:14:29,910 --> 00:14:34,646 Well, you can probably guess, it's going to just double every element of nums. 312 00:14:34,646 --> 00:14:37,770 All right, one more thing I want to touch on really quick about JavaScript, 313 00:14:37,770 --> 00:14:40,500 and that is the notion of events. 314 00:14:40,500 --> 00:14:44,250 So an event is something that goes hand in hand with HTML on JavaScript, 315 00:14:44,250 --> 00:14:47,217 and it is a response to a user doing something on a web page. 316 00:14:47,217 --> 00:14:49,050 So for example, perhaps they click a button. 317 00:14:49,050 --> 00:14:52,140 Perhaps the page has finished loading after the user hits refresh, 318 00:14:52,140 --> 00:14:52,890 for example. 319 00:14:52,890 --> 00:14:55,920 Maybe they hover over a portion of the page, or something like that. 320 00:14:55,920 --> 00:14:57,930 All of those things are events. 321 00:14:57,930 --> 00:15:01,320 And JavaScript has support for what is called an event handler, which 322 00:15:01,320 --> 00:15:04,100 is some JavaScript code that will execute 323 00:15:04,100 --> 00:15:06,177 once that event has taken place. 324 00:15:06,177 --> 00:15:08,260 So it allows our site page to be very interactive. 325 00:15:08,260 --> 00:15:10,950 We type in a box, for example-- 326 00:15:10,950 --> 00:15:14,420 we could have an event handler, that pops up a message that 327 00:15:14,420 --> 00:15:15,800 says, please enter your password. 328 00:15:15,800 --> 00:15:19,060 So it's just a complete-- it's an empty field that says nothing at all. 329 00:15:19,060 --> 00:15:20,810 You start to type in it, and then this box 330 00:15:20,810 --> 00:15:23,720 pops up because you started typing, which is an event on the page. 331 00:15:23,720 --> 00:15:26,840 And it tells you to do something that is a JavaScript event 332 00:15:26,840 --> 00:15:29,210 handler taking effect. 333 00:15:29,210 --> 00:15:32,942 Many elements of HTML have support for events as an attribute. 334 00:15:32,942 --> 00:15:34,900 So here's an example of some really basic HTML. 335 00:15:34,900 --> 00:15:39,230 I have my head and my body, and inside of the body, there are two buttons. 336 00:15:39,230 --> 00:15:41,870 And they have this attribute called on click. 337 00:15:41,870 --> 00:15:45,350 On click is a definition, basically, for an event handler. 338 00:15:45,350 --> 00:15:48,740 So I want something to happen when I click the buttons. 339 00:15:48,740 --> 00:15:51,380 Right now it's nothing, but I can put something in there 340 00:15:51,380 --> 00:15:53,930 so that when I click on either of those buttons, 341 00:15:53,930 --> 00:15:58,504 that function that's in between the quotation marks there would get called. 342 00:15:58,504 --> 00:16:00,920 We can write a really generic event handler in JavaScript, 343 00:16:00,920 --> 00:16:03,465 for example, that creates an event object, 344 00:16:03,465 --> 00:16:05,840 and will tell us which of those two buttons were clicked. 345 00:16:05,840 --> 00:16:07,660 And it might look something like this. 346 00:16:07,660 --> 00:16:11,690 Button on click equals alert name event. 347 00:16:11,690 --> 00:16:15,440 If we do this, we have basically set up our HTML, 348 00:16:15,440 --> 00:16:19,620 so that when either button one is clicked or button two is clicked, 349 00:16:19,620 --> 00:16:24,920 the alert name function will be called, and an event will be passed in. 350 00:16:24,920 --> 00:16:27,960 The event is automatically generated by the page, 351 00:16:27,960 --> 00:16:31,610 and it basically contains all of the information about what just happened. 352 00:16:31,610 --> 00:16:34,301 And from that information, we can extract more information. 353 00:16:34,301 --> 00:16:36,800 So for example, here what the alert name function might look 354 00:16:36,800 --> 00:16:40,516 like, and notice that here, I'm also accepting an event parameter. 355 00:16:40,516 --> 00:16:41,390 What am I doing then? 356 00:16:41,390 --> 00:16:44,970 I'm getting a new JavaScript local variable called trigger, 357 00:16:44,970 --> 00:16:47,510 and I'm asking for that event's source element. 358 00:16:47,510 --> 00:16:49,430 And what that is basically telling me is, 359 00:16:49,430 --> 00:16:51,920 what is the element on the page that was interacted 360 00:16:51,920 --> 00:16:53,990 with that triggered this event? 361 00:16:53,990 --> 00:16:57,650 Or rather, put another way, what element effectively 362 00:16:57,650 --> 00:16:59,930 was passed in to this function. 363 00:16:59,930 --> 00:17:02,125 Because, again, this is automatically generated. 364 00:17:02,125 --> 00:17:05,558 The page knows which button we touched, and so, basically, 365 00:17:05,558 --> 00:17:08,599 what's happening here is, that button-- whichever one of the two it was-- 366 00:17:08,599 --> 00:17:10,420 is getting passed into this function. 367 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 368 00:17:12,710 --> 00:17:13,760 object model-- 369 00:17:13,760 --> 00:17:20,970 I can access that trigger's inner HTML to figure out which button was clicked. 370 00:17:20,970 --> 00:17:22,010 Now, what is inner HTML? 371 00:17:22,010 --> 00:17:24,450 Let me jump back a couple of slides for a second here. 372 00:17:24,450 --> 00:17:27,560 The inner HTML is what is between the button tags. 373 00:17:27,560 --> 00:17:32,370 In this case, button one is inner HTML and button two is also inner HTML. 374 00:17:32,370 --> 00:17:35,930 So what happens when I click on those buttons is, it will alert to me, 375 00:17:35,930 --> 00:17:39,290 you clicked on button one if I happened to click on button one, 376 00:17:39,290 --> 00:17:43,520 or, you clicked on button two, if you happened to click on button two. 377 00:17:43,520 --> 00:17:46,110 Now, again, we are just scratching the surface of JavaScript, 378 00:17:46,110 --> 00:17:47,660 but I wanted to give you a sense of some of the different things 379 00:17:47,660 --> 00:17:50,930 that you can do, so that you can then go forward, look at the documentation, 380 00:17:50,930 --> 00:17:54,112 and see the very wide range of things that you can do as well, 381 00:17:54,112 --> 00:17:55,820 by just applying some of the basic tenets 382 00:17:55,820 --> 00:17:59,420 that we've learned about in CS50, and really expanding 383 00:17:59,420 --> 00:18:01,880 your knowledge exponentially. 384 00:18:01,880 --> 00:18:02,790 I'm Doug Lloyd. 385 00:18:02,790 --> 00:18:04,670 This is CS50. 386 00:18:04,670 --> 00:18:06,251