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