1
00:00:00,000 --> 00:00:03,840
>> [MUSIC PLAYING]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: So by now we're old
pros at web programming, right?

4
00:00:08,690 --> 00:00:12,140
And we've covered several
languages in individual videos.

5
00:00:12,140 --> 00:00:14,690
And now let's do one more, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> First the good news, JavaScript
is a modern programming

7
00:00:17,370 --> 00:00:21,410
language much like PHP whose
syntax is derived from C,

8
00:00:21,410 --> 00:00:22,830
so that's a good place to start.

9
00:00:22,830 --> 00:00:25,880
It's about as old as PHP, as well,
having been around about 20 years.

10
00:00:25,880 --> 00:00:28,600
It was invented around
the same time as PHP.

11
00:00:28,600 --> 00:00:32,240
And JavaScript is actually pretty
fundamental to the user experience

12
00:00:32,240 --> 00:00:32,740
of the web.

13
00:00:32,740 --> 00:00:34,448
In fact, there are
three languages that I

14
00:00:34,448 --> 00:00:38,480
would say sort of make up the
user experience of interacting

15
00:00:38,480 --> 00:00:42,650
with the website, html,
css, and JavaScript.

16
00:00:42,650 --> 00:00:46,030
And so now let's talk a
little bit about JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> The bad news, though, with JavaScript is
that it sets a lot of rules for itself,

18
00:00:50,301 --> 00:00:51,300
and then it breaks them.

19
00:00:51,300 --> 00:00:54,010
And JavaScript can actually be
kind of challenging to learn,

20
00:00:54,010 --> 00:00:57,000
because it's unlike C and
PHP, which are very structured

21
00:00:57,000 --> 00:01:00,270
and have very rigid rules
for how things can work.

22
00:01:00,270 --> 00:01:03,690
JavaScript has kind
of gotten so flexible

23
00:01:03,690 --> 00:01:06,650
that maybe things aren't going to
work the way we expect them to,

24
00:01:06,650 --> 00:01:09,830
and maybe we really can't learn
our first programming language

25
00:01:09,830 --> 00:01:10,769
as a JavaScript.

26
00:01:10,769 --> 00:01:12,810
So maybe because it doesn't
set itself any rules,

27
00:01:12,810 --> 00:01:15,754
and it doesn't really
enforce good coding habits.

28
00:01:15,754 --> 00:01:18,170
But now we've hopefully developed
some good coding habits,

29
00:01:18,170 --> 00:01:21,470
and so we can start to foray
into JavaScript a little bit.

30
00:01:21,470 --> 00:01:25,750
>> To write JavaScript, similar to opening
up a C file with a dot C extension

31
00:01:25,750 --> 00:01:29,770
or a PHP file with a dot PHP extension,
all we need to do is open up a file

32
00:01:29,770 --> 00:01:31,764
with the dot js file extension.

33
00:01:31,764 --> 00:01:34,430
We don't need to have any special
delimiters like we did in PHP.

34
00:01:34,430 --> 00:01:36,750
That sort of angle
bracket question mark PHP

35
00:01:36,750 --> 00:01:40,300
that we're used to from that, the way
we tell our browser that what we have is

36
00:01:40,300 --> 00:01:43,502
JavaScript is by including
it in an html tag,

37
00:01:43,502 --> 00:01:46,210
and we'll see a little bit about
how to do that in just a moment.

38
00:01:46,210 --> 00:01:48,210
>> The other thing that makes
JavaScript different,

39
00:01:48,210 --> 00:01:50,580
though, is that it runs client side.

40
00:01:50,580 --> 00:01:53,430
So recall with PHP that
we could never really see

41
00:01:53,430 --> 00:01:57,041
the PHP that underlined a website.

42
00:01:57,041 --> 00:01:59,040
If we ever viewed the
page source, we would only

43
00:01:59,040 --> 00:02:02,830
see the html that was
generated by that PHP.

44
00:02:02,830 --> 00:02:04,900
But JavaScript runs client side.

45
00:02:04,900 --> 00:02:06,710
Your JavaScript runs on your computer.

46
00:02:06,710 --> 00:02:09,050
And that's why you can do
things like add blockers.

47
00:02:09,050 --> 00:02:09,550
Right?

48
00:02:09,550 --> 00:02:12,704
Ad blocking is usually done by
killing all of the JavaScript

49
00:02:12,704 --> 00:02:14,370
that is running on a particular website.

50
00:02:14,370 --> 00:02:19,000
And because it would have to
run on your machine client side,

51
00:02:19,000 --> 00:02:21,910
you can just stop the
JavaScript for running entirely.

52
00:02:21,910 --> 00:02:27,030
That also means that when you use
a website that includes JavaScript,

53
00:02:27,030 --> 00:02:32,450
you have to send the JavaScript source
code as part of your http response

54
00:02:32,450 --> 00:02:34,159
to the client when they request it.

55
00:02:34,159 --> 00:02:35,950
And so you might not
want to use JavaScript

56
00:02:35,950 --> 00:02:38,395
to do really sensitive things
like passing information

57
00:02:38,395 --> 00:02:41,020
about users' passwords back and
forth, because they're actually

58
00:02:41,020 --> 00:02:45,610
going to receive all of the source code,
not just the html that is generated,

59
00:02:45,610 --> 00:02:49,030
such as would be the case with say PHP.

60
00:02:49,030 --> 00:02:51,620
>> So how do we include JavaScript
in our html to start with?

61
00:02:51,620 --> 00:02:54,520
Well, similar to CSS, actually,
is sort of how we do it here.

62
00:02:54,520 --> 00:02:56,190
With CSS we have style tags.

63
00:02:56,190 --> 00:03:00,760
And inside of those style tags,
we can define a CSS style sheet.

64
00:03:00,760 --> 00:03:03,450
Similarly with JavaScript
can we open up script tags,

65
00:03:03,450 --> 00:03:06,660
another html tag we didn't
talk about in our html video,

66
00:03:06,660 --> 00:03:09,720
and write JavaScript in
between those script tags.

67
00:03:09,720 --> 00:03:13,960
Also though, like CSS, we
could link in outside CSS files

68
00:03:13,960 --> 00:03:15,900
and pull them into our program that way.

69
00:03:15,900 --> 00:03:18,280
With CSS we can also,
excuse me, with JavaScript

70
00:03:18,280 --> 00:03:23,240
we can also specify the source
attribute of the script tag

71
00:03:23,240 --> 00:03:25,720
to link in JavaScript
separately, so you don't

72
00:03:25,720 --> 00:03:27,680
have to write it in
between script tags, we

73
00:03:27,680 --> 00:03:29,600
can link it in using
that script tag as well.

74
00:03:29,600 --> 00:03:33,230
And just as with the case with CSS where
we recommended that it was probably

75
00:03:33,230 --> 00:03:36,090
in your best interest to write
your CSS in a separate file in case

76
00:03:36,090 --> 00:03:38,500
you need to change it,
similarly do we recommend

77
00:03:38,500 --> 00:03:40,720
that you write your
JavaScript in separate files

78
00:03:40,720 --> 00:03:45,460
and use the script tags source
attribute to tie your JavaScript

79
00:03:45,460 --> 00:03:49,520
into your html, your web page.

80
00:03:49,520 --> 00:03:52,610
>> So JavaScript variables, we'll
start talking about the syntax here.

81
00:03:52,610 --> 00:03:53,600
And we'll go through
this kind of quickly,

82
00:03:53,600 --> 00:03:56,640
because we've done this in PHP, so
this should all be pretty familiar.

83
00:03:56,640 --> 00:03:59,490
So variables in JavaScript are
very similar to PHP variables.

84
00:03:59,490 --> 00:04:03,270
There's no type specifier, and
when you introduce a variable,

85
00:04:03,270 --> 00:04:05,070
you prefix it with the var keyword.

86
00:04:05,070 --> 00:04:07,750
In PHP we would do something
like this, dollar sign x.

87
00:04:07,750 --> 00:04:09,950
That's how we indicated
a variable, but no, we

88
00:04:09,950 --> 00:04:12,060
don't mention the type
of the variable at all.

89
00:04:12,060 --> 00:04:15,124
We would say something like
dollar sign x equals 44 in PHP.

90
00:04:15,124 --> 00:04:17,040
If we were doing the
same thing in JavaScript,

91
00:04:17,040 --> 00:04:19,589
we would say var x equals 44.

92
00:04:19,589 --> 00:04:22,780
So var is sort of our way
of introducing a variable.

93
00:04:22,780 --> 00:04:26,850
That's perhaps a bit more intuitive
than just dollar sign variable.

94
00:04:26,850 --> 00:04:29,080
>> Again, since there's no
data types, we could do this

95
00:04:29,080 --> 00:04:34,490
with any data type, strings,
anything else would all be var.

96
00:04:34,490 --> 00:04:37,260
Conditionals, all of our
old friends from C and PHP

97
00:04:37,260 --> 00:04:41,640
are still available, so we have if,
else if, else, switch and question

98
00:04:41,640 --> 00:04:42,240
mark colon.

99
00:04:42,240 --> 00:04:45,890
Switch remaining as flexible as it
was in PHP, but all of these you're

100
00:04:45,890 --> 00:04:46,930
familiar with by now.

101
00:04:46,930 --> 00:04:49,900
And similarly with loops are
the old favorites of while,

102
00:04:49,900 --> 00:04:52,700
do while, and for still available to us.

103
00:04:52,700 --> 00:04:55,880
So already we know a lot of the
basic JavaScript sort of fundamentals

104
00:04:55,880 --> 00:05:01,800
just by virtue of having quite a bit
of knowledge now about C and PHP.

105
00:05:01,800 --> 00:05:03,670
>> What about functions in JavaScript?

106
00:05:03,670 --> 00:05:08,199
Well, similar to PHP every function is
introduced with the function keyword.

107
00:05:08,199 --> 00:05:10,740
You say function, and then you
begin to define your function.

108
00:05:10,740 --> 00:05:12,531
What's a little different
about JavaScript,

109
00:05:12,531 --> 00:05:15,700
though is the ability to have
what's called an anonymous function.

110
00:05:15,700 --> 00:05:18,880
So you can define functions
that don't have a name.

111
00:05:18,880 --> 00:05:21,222
This is something we
really haven't seen before.

112
00:05:21,222 --> 00:05:23,430
We'll really use the concept
of an anonymous function

113
00:05:23,430 --> 00:05:27,880
a little later in this
video, because it'll

114
00:05:27,880 --> 00:05:31,530
make a little more sense in context
when we see it in a particular situation

115
00:05:31,530 --> 00:05:33,120
that I've crafted here.

116
00:05:33,120 --> 00:05:35,710
But let's just take a look
at what a simple JavaScript

117
00:05:35,710 --> 00:05:37,850
function might look like.

118
00:05:37,850 --> 00:05:40,610
>> So I've gone ahead and
opened up my CS50 IDE

119
00:05:40,610 --> 00:05:43,690
and I've already run Apache
to begin my server running.

120
00:05:43,690 --> 00:05:46,800
And I have this file
open called Home.html.

121
00:05:46,800 --> 00:05:48,330
And I'll zoom in a little bit here.

122
00:05:48,330 --> 00:05:52,090
And basically, you can see the
Home.html is just a bunch of buttons.

123
00:05:52,090 --> 00:05:55,291
And I'm claiming at the top here
that this is the JavaScript section

124
00:05:55,291 --> 00:05:55,790
materials.

125
00:05:55,790 --> 00:05:59,490
So there's a bunch of buttons here,
but what do these buttons actually do?

126
00:05:59,490 --> 00:06:03,662
>> Well, we'll head over to my IED,
and I have Home.html open here.

127
00:06:03,662 --> 00:06:05,620
At the very beginning,
here's where I'm linking

128
00:06:05,620 --> 00:06:07,500
in all of my JavaScript source files.

129
00:06:07,500 --> 00:06:08,000
Right?

130
00:06:08,000 --> 00:06:12,440
So I have anonymous.js, clock.js,
I'm using the source attribute

131
00:06:12,440 --> 00:06:14,440
of the script tag to link in file.

132
00:06:14,440 --> 00:06:18,660
So I haven't written any
JavaScript directly into this file,

133
00:06:18,660 --> 00:06:21,790
but I've pulled in all the
JavaScript I've written separately.

134
00:06:21,790 --> 00:06:24,540
And if we scroll down here, this
should all look somewhat familiar

135
00:06:24,540 --> 00:06:27,090
with a little bit of new syntax.

136
00:06:27,090 --> 00:06:32,655
We have here header tag for
functions and then a button.

137
00:06:32,655 --> 00:06:35,530
I have an input that's a type button,
and apparently when I click it,

138
00:06:35,530 --> 00:06:38,130
I'm going to call some
function alert date.

139
00:06:38,130 --> 00:06:41,792
And this is how we can sort of mix up
a little bit of JavaScript and html.

140
00:06:41,792 --> 00:06:44,500
They actually play pretty nicely
together, and so apparently when

141
00:06:44,500 --> 00:06:48,730
I click on this button, I'm going
to call some function alert date.

142
00:06:48,730 --> 00:06:53,660
And similarly have I defined behaviors
for all of the other buttons that

143
00:06:53,660 --> 00:06:56,440
are on that home.html page,
which we'll keep returning

144
00:06:56,440 --> 00:06:59,172
to during the course of this video.

145
00:06:59,172 --> 00:07:00,880
But let's go back up
here and take a look

146
00:07:00,880 --> 00:07:03,850
at clock.js, which is the
JavaScript file that I

147
00:07:03,850 --> 00:07:07,370
wrote that has this first function
we're going to take a look at.

148
00:07:07,370 --> 00:07:11,630
As you can see, I begin my JavaScript
function with the keyword function,

149
00:07:11,630 --> 00:07:14,560
and I've given this one a
name, it's called alert date.

150
00:07:14,560 --> 00:07:18,710
Inside of there, I apparently create a
new local variable called current date.

151
00:07:18,710 --> 00:07:21,500
And I'm going to assign
an equal to a new date.

152
00:07:21,500 --> 00:07:24,430
And we could get into a lot of
detail as to what a date is,

153
00:07:24,430 --> 00:07:27,060
and really JavaScript is so
big that we can't possibly

154
00:07:27,060 --> 00:07:28,330
cover everything in one video.

155
00:07:28,330 --> 00:07:32,220
But suffice it to say, this is going
to return to me a data item that

156
00:07:32,220 --> 00:07:35,470
encapsulates the current date and time.

157
00:07:35,470 --> 00:07:39,100
I'm storing that in a variable that I'm
apparently going to alert current date.

158
00:07:39,100 --> 00:07:41,300
>> Well, what does alert
current date look like?

159
00:07:41,300 --> 00:07:46,460
Let's take a look at the file itself
back over in the browser window.

160
00:07:46,460 --> 00:07:49,551
So again, this is the button that I
have tied to, this named function.

161
00:07:47,500 --> 00:07:50,020
>> What's something very different
in JavaScript, though?

162
00:07:49,551 --> 00:07:51,800
And I click it there and
look what it did, it alerted.

163
00:07:51,800 --> 00:07:56,140
It popped up this sort of box telling
me that the current time is, apparently

164
00:07:56,140 --> 00:07:59,370
it's November 4 at
10:43:43 in the morning.

165
00:07:59,370 --> 00:08:02,345
And if I click it again, now
it's a few seconds later, right?

166
00:08:02,345 --> 00:08:03,720
So that's all this function does.

167
00:08:03,720 --> 00:08:07,670
When I click this button, it
pops up an alert message to me.

168
00:08:07,670 --> 00:08:13,806

169
00:08:13,806 --> 00:08:15,690
So there's really not
too much to functions

170
00:08:15,690 --> 00:08:19,110
that's different from PHP,
just a little bit of new syntax

171
00:08:19,110 --> 00:08:22,500
that comes with working with JavaScript.

172
00:08:22,500 --> 00:08:24,650
>> Arrays in JavaScript are
pretty straightforward.

173
00:08:24,650 --> 00:08:27,200
To declare an array, you use
the square brackets syntax

174
00:08:27,200 --> 00:08:30,090
that we're familiar with from PHP.

175
00:08:30,090 --> 00:08:33,432
And similar to PHP, we
also can mix data types.

176
00:08:33,432 --> 00:08:35,140
So this array, both
of these arrays would

177
00:08:35,140 --> 00:08:36,960
be perfectly legitimate JavaScript.

178
00:08:36,960 --> 00:08:40,500
One that's all integers, and one that
is mixed up different data types.

179
00:08:40,937 --> 00:08:43,270
But what is an object, what
is this notion of an object?

180
00:08:43,270 --> 00:08:45,880
Well, if it helps, think
about it at first sort

181
00:08:45,880 --> 00:08:49,540
of like a C structure or a struct
that we've learned about before.

182
00:08:49,540 --> 00:08:52,430
In C, a structure contains
a number of fields,

183
00:08:52,430 --> 00:08:56,174
and maybe we now might start to
call these fields properties.

184
00:08:56,174 --> 00:08:58,590
But the properties never really
stand on their own, right?

185
00:08:58,590 --> 00:09:01,410
If I define a structure for a car
like this with the following two

186
00:09:01,410 --> 00:09:05,750
fields or properties, one an
integer for the year of the car

187
00:09:05,750 --> 00:09:09,290
and another a 10 character
string for the model of the car,

188
00:09:09,290 --> 00:09:12,150
I can say something like this,
I can declare a new variable

189
00:09:12,150 --> 00:09:15,080
of type struct car herbie.

190
00:09:15,080 --> 00:09:18,730
And then I can say something
like herbie.year equals 1,963,

191
00:09:18,730 --> 00:09:20,850
and herbie.model equals Beetle.

192
00:09:20,850 --> 00:09:22,000
That's OK.

193
00:09:22,000 --> 00:09:24,680
I'm using the fields in the
context of the structure,

194
00:09:24,680 --> 00:09:27,290
but I could never just
say something like this.

195
00:09:27,290 --> 00:09:27,790
Right?

196
00:09:27,790 --> 00:09:31,836
I can't use the field name
independent of the structure.

197
00:09:31,836 --> 00:09:33,210
It's sort of a fundamental thing.

198
00:09:33,210 --> 00:09:37,990
>> So fields being
fundamental to C structures

199
00:09:37,990 --> 00:09:44,050
are very similar to properties being
fundamental to JavaScript objects.

200
00:09:44,050 --> 00:09:47,080
But what makes them
particularly interesting

201
00:09:47,080 --> 00:09:51,230
is that objects can also have what
are called methods, which are really

202
00:09:51,230 --> 00:09:55,730
just a fancy word for functions that
are inherent to the object as well.

203
00:09:55,730 --> 00:10:00,340
So it's a function that can only be
called in the context of an object.

204
00:10:00,340 --> 00:10:04,200
Only an object that has defined
this function inside of its,

205
00:10:04,200 --> 00:10:07,020
if you think about a
struct, the function

206
00:10:07,020 --> 00:10:10,720
is defined inside those defining
curly braces of the structure.

207
00:10:10,720 --> 00:10:12,980
So it only means something
to the structure.

208
00:10:12,980 --> 00:10:15,960
And that's sort of what we're doing
here with objects and methods.

209
00:10:15,960 --> 00:10:18,580
It's basically like we're
defining a function that

210
00:10:18,580 --> 00:10:21,670
only makes sense on a
particular object, and so we

211
00:10:21,670 --> 00:10:24,440
call that a method of the object.

212
00:10:24,440 --> 00:10:28,180
And we can never call that
function independent of the object,

213
00:10:28,180 --> 00:10:34,260
just like we can't say year or model
independent of the struct in C.

214
00:10:34,260 --> 00:10:37,300
>> So functional programming
paradigms look something like this.

215
00:10:37,300 --> 00:10:40,450
Function and then when you pass
in the object as a parameter.

216
00:10:40,450 --> 00:10:43,650
In an object oriented programming
languages, this sort of gets

217
00:10:43,650 --> 00:10:48,464
flipped, and we would think about
it like this, object.function.

218
00:10:48,464 --> 00:10:50,380
So it sort of that dot
operator again implying

219
00:10:50,380 --> 00:10:54,540
that it's some sort of property
or attribute of the object itself.

220
00:10:54,540 --> 00:10:58,240
But this is what an object
oriented programming language

221
00:10:58,240 --> 00:11:02,150
might do to make a function
call on a method, again, which

222
00:11:02,150 --> 00:11:05,260
is just a special word for a function
that is inherent to an object.

223
00:11:05,260 --> 00:11:08,440
This is what that
syntax might look like.

224
00:11:08,440 --> 00:11:14,360
And so we'll start to see some of
this in the context of JavaScript.

225
00:11:14,360 --> 00:11:17,470
>> You can also think about an object
sort of like an associative array,

226
00:11:17,470 --> 00:11:19,160
which we're familiar with from PHP.

227
00:11:19,160 --> 00:11:22,720
Remember an associative array allows
us to have key value pairs, instead

228
00:11:22,720 --> 00:11:28,040
of having indexes 0, one, two, three,
and so on like we're used to from C

229
00:11:28,040 --> 00:11:28,940
arrays.

230
00:11:28,940 --> 00:11:32,472
Associative arrays can map
words, such as in the PHP video,

231
00:11:32,472 --> 00:11:34,180
we were talking about
toppings of pizzas.

232
00:11:34,180 --> 00:11:36,180
And so we had an array
called pizzas, and we

233
00:11:36,180 --> 00:11:41,670
had cheese was a key and $8.99 was the
value, and then pepperoni was a key,

234
00:11:41,670 --> 00:11:44,190
$9.99 was a value, and so on.

235
00:11:44,190 --> 00:11:48,300
And so we can also think about an
object sort of similar to an associative

236
00:11:48,300 --> 00:11:48,840
array.

237
00:11:48,840 --> 00:11:52,020
And so this syntax here
would create a new object

238
00:11:52,020 --> 00:11:55,950
called herbie with two
properties inside of it.

239
00:11:55,950 --> 00:12:02,310
Year, which is assigned the value 1963,
and model, which is assigned the string

240
00:12:02,310 --> 00:12:03,140
Beetle.

241
00:12:03,140 --> 00:12:06,770
>> And notice here that I'm using
single quotes in JavaScript.

242
00:12:06,770 --> 00:12:10,570
You can use single or double quotes
when you're talking about strings.

243
00:12:10,570 --> 00:12:12,772
It's just conventionally
the case that most times

244
00:12:12,772 --> 00:12:15,230
when you're writing JavaScript,
you just use single quotes.

245
00:12:15,230 --> 00:12:20,050
But I could use double quotes here, and
that would be perfectly fine as well.

246
00:12:20,050 --> 00:12:22,470
>> So remember how in
PHP we had this notion

247
00:12:22,470 --> 00:12:27,730
of a for each loop that would allow us
to iterate over all of the key value

248
00:12:27,730 --> 00:12:30,270
pairs of an associative
array, because we

249
00:12:30,270 --> 00:12:34,050
didn't have this ability to iterate
through 0, one, two, three, four,

250
00:12:34,050 --> 00:12:35,710
and so on?

251
00:12:35,710 --> 00:12:40,010
JavaScript has something very similar,
but it's not called a for each loop,

252
00:12:40,010 --> 00:12:43,960
it's called a for in loops.

253
00:12:43,960 --> 00:12:47,890
So if I said to me like
this, for var key in object,

254
00:12:47,890 --> 00:12:53,670
that's sort of similar to saying
for each something as something.

255
00:12:53,670 --> 00:12:58,850
But all I'm doing here is iterating
through all of the keys of my object.

256
00:12:58,850 --> 00:13:01,070
And inside of the curly
braces there, I would

257
00:13:01,070 --> 00:13:08,410
use object square brackets key to refer
to the value at that key location.

258
00:13:08,410 --> 00:13:10,400
>> Alternatively, there's
even another approach.

259
00:13:10,400 --> 00:13:15,880
If I just only care about the
values, I can say for key of object,

260
00:13:15,880 --> 00:13:17,360
and just use key inside.

261
00:13:17,360 --> 00:13:22,240
So for var key in object, I have
to use object square brackets

262
00:13:22,240 --> 00:13:24,340
key inside the loop.

263
00:13:24,340 --> 00:13:29,580
For var key of object, I can
just use key inside the loop,

264
00:13:29,580 --> 00:13:34,040
because I'm just specifically
talking about the values there.

265
00:13:34,040 --> 00:13:37,630
>> So let's maybe take a
look at the difference

266
00:13:37,630 --> 00:13:40,670
just to quickly show you
the difference between four

267
00:13:40,670 --> 00:13:45,730
in and for of with a very specific
array, which we have here, week array.

268
00:13:45,730 --> 00:13:48,616
So I have to find a new array
that I filled with seven strings,

269
00:13:48,616 --> 00:13:51,240
Monday, Tuesday, Wednesday,
Thursday, Friday, Saturday, Sunday.

270
00:13:51,240 --> 00:13:55,530
And I want to now iterate
through this array,

271
00:13:55,530 --> 00:13:58,090
printing out certain information.

272
00:13:58,090 --> 00:14:03,780
If I use a for in loop
to print out information,

273
00:14:03,780 --> 00:14:05,710
what do you think I'm going to get?

274
00:14:05,710 --> 00:14:06,710
Well, let's take a look.

275
00:14:06,710 --> 00:14:10,300
And before we jump over
to my browser window,

276
00:14:10,300 --> 00:14:13,090
just know that
console.log is sort of one

277
00:14:13,090 --> 00:14:15,630
way of doing a print F in JavaScript.

278
00:14:15,630 --> 00:14:17,040
But what is the console?

279
00:14:17,040 --> 00:14:19,940
Well, that's what we're going
to go take a look at right now.

280
00:14:19,940 --> 00:14:21,850
>> OK, so we're back here
in my browser window,

281
00:14:21,850 --> 00:14:24,410
and I'm going to open
up my developer tools.

282
00:14:24,410 --> 00:14:27,290
Again, I'm just hitting F12
to open up developer tools.

283
00:14:27,290 --> 00:14:30,670
And notice that here at the
top I've chosen console.

284
00:14:30,670 --> 00:14:33,480
So this is the notion
of a developer console,

285
00:14:33,480 --> 00:14:35,500
and it will allow us to
print information out,

286
00:14:35,500 --> 00:14:38,000
sort of like the terminal, but
as you'll see a little later,

287
00:14:38,000 --> 00:14:42,720
we can also type information in
to interact with our web page.

288
00:14:42,720 --> 00:14:47,320
I'm going to zoom in a little bit here,
and I'm gonna now click on for in test.

289
00:14:47,320 --> 00:14:50,230
And four in test-- I'm not gonna
show you the code for it right now,

290
00:14:50,230 --> 00:14:52,479
but you'll get it if you
download the source code that

291
00:14:52,479 --> 00:14:55,380
is associated with this video--
is just that for in loop

292
00:14:55,380 --> 00:14:57,610
that we saw just a
second ago on the slide.

293
00:14:57,610 --> 00:14:59,810
>> So I'm gonna click that
button, and over here,

294
00:14:59,810 --> 00:15:03,440
here's what has printed out in the
console, 0,one, two, three, four, five,

295
00:15:03,440 --> 00:15:03,940
six.

296
00:15:03,940 --> 00:15:07,490
I didn't print out the information
inside those array locations,

297
00:15:07,490 --> 00:15:10,180
because I used a for in loop.

298
00:15:10,180 --> 00:15:15,670
And inside the body of the loop, I
just printed out key not object key.

299
00:15:15,670 --> 00:15:23,600
But if I now clear my console, and I
switch to for of test, and four of test

300
00:15:23,600 --> 00:15:27,500
I say I use for of loop
instead and print out key,

301
00:15:27,500 --> 00:15:33,079
if I click that, now I'm getting the
actual elements inside of my object

302
00:15:33,079 --> 00:15:34,120
or my array in this case.

303
00:15:34,120 --> 00:15:36,760
My array of week days.

304
00:15:36,760 --> 00:15:38,480
I printed out Monday,
Tuesday, Wednesday.

305
00:15:38,480 --> 00:15:41,930
So that's the difference between
a for in loop, which prints out

306
00:15:41,930 --> 00:15:48,410
just the keys if you just use key
inside of the body of the loop,

307
00:15:48,410 --> 00:15:51,850
and a for of loop, which prints
out the values if you use just

308
00:15:51,850 --> 00:15:53,870
key inside the body of the loop.

309
00:15:53,870 --> 00:15:57,380
>> All right, how do we now start to
concatenate strings and maybe mix up

310
00:15:57,380 --> 00:16:02,220
some variables with interpolation
like we were able to do in PHP?

311
00:16:02,220 --> 00:16:04,410
Well, we're pretty familiar
with this from PHP.

312
00:16:04,410 --> 00:16:09,109
This is how we would do it using the
dot operator to concatenate strings.

313
00:16:09,109 --> 00:16:11,260
In JavaScript, though,
we actually use something

314
00:16:11,260 --> 00:16:14,290
called the plus operator, which
is maybe even a little bit more

315
00:16:14,290 --> 00:16:15,470
intuitive, right?

316
00:16:15,470 --> 00:16:17,609
We're adding a bunch
of strings together.

317
00:16:17,609 --> 00:16:19,520
So let's head back
over and see what this

318
00:16:19,520 --> 00:16:23,693
will print if we're trying to print out
all of the information in week array.

319
00:16:23,693 --> 00:16:25,859
All right, so under here
under string concatenation,

320
00:16:25,859 --> 00:16:29,822
I have two options, string building
V1 and then string building V2.

321
00:16:29,822 --> 00:16:31,530
And we'll see why we
need V2 in a second.

322
00:16:31,530 --> 00:16:33,610
But I'm gonna click on
string building V1, which

323
00:16:33,610 --> 00:16:35,360
is the code we were
just taking a look at,

324
00:16:35,360 --> 00:16:37,980
the console.log with all of the pluses.

325
00:16:37,980 --> 00:16:40,910
Let's see if this prints
out what we expect.

326
00:16:40,910 --> 00:16:44,939
>> Monday is day number 01 of the week,
Tuesday is day number 11 of the week.

327
00:16:44,939 --> 00:16:46,730
Well, what I was trying
to do there was get

328
00:16:46,730 --> 00:16:51,280
it to print out Monday is day number
one, Tuesday is day number two.

329
00:16:51,280 --> 00:16:55,140
But it seems like I'm
always printing out one.

330
00:16:55,140 --> 00:16:56,260
Well, why is that?

331
00:16:56,260 --> 00:17:00,600
Well, it turns out, take another look
at this little snippet of code here.

332
00:17:00,600 --> 00:17:05,160
Notice that we're using the plus
operator in two different contexts.

333
00:17:05,160 --> 00:17:08,221
>> And so here's where maybe things
that we've kind of been saying,

334
00:17:08,221 --> 00:17:08,970
oh, it's so great.

335
00:17:08,970 --> 00:17:10,910
We don't deal with data types anymore.

336
00:17:10,910 --> 00:17:13,220
But here's where the fact
that we lose data types

337
00:17:13,220 --> 00:17:15,960
can actually be a bit
of a problem for us.

338
00:17:15,960 --> 00:17:21,260
Now that the plus operator is used to
concatenate strings and add numbers

339
00:17:21,260 --> 00:17:24,550
together, JavaScript has
to make its best guess

340
00:17:24,550 --> 00:17:27,030
as to what I want it to do for me.

341
00:17:27,030 --> 00:17:28,900
And in this case, it guessed wrong.

342
00:17:28,900 --> 00:17:34,340
It just concatenated day, which would be
0, one, two, three, four, five, or six,

343
00:17:34,340 --> 00:17:37,060
and then it just concatenated
that and then concatenated one.

344
00:17:37,060 --> 00:17:40,020
It didn't actually add them together.

345
00:17:40,020 --> 00:17:42,320
And so these languages,
PHP and JavaScript,

346
00:17:42,320 --> 00:17:44,196
that abstracts away
this notion of types,

347
00:17:44,196 --> 00:17:45,820
you don't have to deal with it anymore.

348
00:17:45,820 --> 00:17:48,600
They do still have types under the hood.

349
00:17:48,600 --> 00:17:51,780
And we can, in situations
like this, leverage that fact

350
00:17:51,780 --> 00:17:54,240
by saying something
like maybe this, which

351
00:17:54,240 --> 00:17:58,210
is telling JavaScript, by the
way, treat this as an integer,

352
00:17:58,210 --> 00:18:02,100
don't treat it as a string, even
though we're mixing together strings

353
00:18:02,100 --> 00:18:03,940
and integers here.

354
00:18:03,940 --> 00:18:07,204
>> It's just one of those things
that it seems so great in context

355
00:18:07,204 --> 00:18:09,120
that we don't have to
deal with types anymore,

356
00:18:09,120 --> 00:18:10,828
but sometimes you'll
run into a situation

357
00:18:10,828 --> 00:18:14,110
exactly like this where the fact that
you don't have control over types

358
00:18:14,110 --> 00:18:16,220
can backfire on you
if you're not careful.

359
00:18:16,220 --> 00:18:23,285
And so if we pop back over to IDE, I'm
going to clear out my console again,

360
00:18:23,285 --> 00:18:25,660
and I'm going to click string
building version two, which

361
00:18:25,660 --> 00:18:28,052
is where I use that parse int function.

362
00:18:28,052 --> 00:18:30,260
Now it's printing out
information that I'm expecting.

363
00:18:30,260 --> 00:18:34,330
Monday's day number one, Tuesday
is day number two, and so on.

364
00:18:34,330 --> 00:18:36,170
>> So let's talk about functions again.

365
00:18:36,170 --> 00:18:39,790
I promised we would talk about anonymous
functions, and now the context for that

366
00:18:39,790 --> 00:18:41,360
has finally arrived.

367
00:18:41,360 --> 00:18:44,980
So before we do so, let's talk again
about arrays for just a second.

368
00:18:44,980 --> 00:18:47,120
So arrays are a special
case of an object.

369
00:18:47,120 --> 00:18:50,180
In fact, everything in
JavaScript is actually an object.

370
00:18:50,180 --> 00:18:52,190
So functions are a
special case of an object,

371
00:18:52,190 --> 00:18:54,770
integers are a special
case of an object,

372
00:18:54,770 --> 00:18:57,152
but arrays specifically
have a number of methods.

373
00:18:57,152 --> 00:19:00,110
Remember because they're objects,
they can have properties and methods.

374
00:19:00,110 --> 00:19:03,600
They have a number of methods that
can be applied to those objects.

375
00:19:03,600 --> 00:19:06,197
There's a method called
size, array.size,

376
00:19:06,197 --> 00:19:08,030
which will return to
you as you might expect

377
00:19:08,030 --> 00:19:10,120
the number of elements in your array.

378
00:19:10,120 --> 00:19:13,480
array.pop, sort of like
our notion of popping off

379
00:19:13,480 --> 00:19:16,110
of a stack, if you recall
from our stacks video,

380
00:19:16,110 --> 00:19:18,810
removes the last element from the array.

381
00:19:18,810 --> 00:19:22,110
array.push adds a new element
to the end of an array.

382
00:19:22,110 --> 00:19:25,910
array.shift is sort of
like DQ, it splices out

383
00:19:25,910 --> 00:19:28,610
the very first element of an array.

384
00:19:28,610 --> 00:19:32,549
>> But there's also another special
method of an array called map.

385
00:19:32,549 --> 00:19:34,340
And this is sort of an
interesting concept.

386
00:19:34,340 --> 00:19:35,930
So what is the idea of a map?

387
00:19:35,930 --> 00:19:38,880
You'll actually see this
in several other languages,

388
00:19:38,880 --> 00:19:43,550
and we're not talking about a
sort of cartographers map here,

389
00:19:43,550 --> 00:19:46,480
we're talking about a mapping function.

390
00:19:46,480 --> 00:19:49,110
In the context we're
talking about here, a map

391
00:19:49,110 --> 00:19:52,950
is a special operation we
can perform on an array

392
00:19:52,950 --> 00:19:56,630
to apply a particular function
to every element of that array.

393
00:19:56,630 --> 00:20:00,190
and so we would say in
this case, maybe array.map,

394
00:20:00,190 --> 00:20:05,330
and inside of it, we're passing
into map is a function that we want

395
00:20:05,330 --> 00:20:07,430
to be applied to every single element.

396
00:20:07,430 --> 00:20:12,299
So it's sort of analogous to using
a loop to iterate over every element

397
00:20:12,299 --> 00:20:14,340
and apply a particular
function to every element,

398
00:20:14,340 --> 00:20:19,830
just JavaScript has this built in
notion of a mapping that can be applied.

399
00:20:19,830 --> 00:20:24,700
And this is a great context to
talk about an anonymous function.

400
00:20:24,700 --> 00:20:27,370
>> So let's say we have
this array of integers.

401
00:20:27,370 --> 00:20:30,370
It's called nums, and it's got five
things in it, one, two, three, four,

402
00:20:30,370 --> 00:20:31,410
five.

403
00:20:31,410 --> 00:20:35,620
Now I want to map some
function on to this array.

404
00:20:35,620 --> 00:20:39,337
I want to have a function apply
to every element of the array.

405
00:20:39,337 --> 00:20:42,420
Well, let's say that what I want to
do is just double all of the elements.

406
00:20:42,420 --> 00:20:47,520
What I could do is just use a loop
for var I equals 0, I is less than

407
00:20:47,520 --> 00:20:52,390
or equal to 4, I plus, plus, and
then double every single number.

408
00:20:52,390 --> 00:20:54,580
But I can also do something like this.

409
00:20:54,580 --> 00:20:58,420
I can say nums was formerly
one, two, three, four, five,

410
00:20:58,420 --> 00:21:03,310
now, though, I would like you to
apply a mapping onto this array

411
00:21:03,310 --> 00:21:05,400
where I would like you
to double every number.

412
00:21:05,400 --> 00:21:07,540
And that's exactly
what's happening here.

413
00:21:07,540 --> 00:21:11,870
But notice what I'm passing
in as the argument to map.

414
00:21:11,870 --> 00:21:14,080
This is an anonymous function.

415
00:21:14,080 --> 00:21:16,140
And notice I haven't given
this function a name,

416
00:21:16,140 --> 00:21:18,290
I've only given it a parameter list.

417
00:21:18,290 --> 00:21:21,370
And so this is an example
of an anonymous function.

418
00:21:21,370 --> 00:21:26,270
>> We generally would never call this
function outside of the context of map.

419
00:21:26,270 --> 00:21:29,110
We're defining it as a parameter
to map, and so we don't really

420
00:21:29,110 --> 00:21:32,910
need to have a name for it if the
only thing that cares about is map

421
00:21:32,910 --> 00:21:35,339
and it's defined right
there inside of map.

422
00:21:35,339 --> 00:21:36,880
And so this is an anonymous function.

423
00:21:36,880 --> 00:21:39,680
We have not been able
to do this previously.

424
00:21:39,680 --> 00:21:43,400
Map some function that
accepts one parameter, num,

425
00:21:43,400 --> 00:21:46,890
and what that function does
is returns num times 2.

426
00:21:46,890 --> 00:21:50,330
And so after this
mapping has been applied,

427
00:21:50,330 --> 00:21:55,090
this is now what nums looks
like, two, four, six, eight, 10.

428
00:21:55,090 --> 00:21:57,090
And we'll pop over to my
browser window and just

429
00:21:57,090 --> 00:22:00,240
take a look at this
really quickly as well.

430
00:22:00,240 --> 00:22:03,000
>> So I have another button here
in my home page called double.

431
00:22:03,000 --> 00:22:08,570
And when I click double, and it tells
me before it was one, two, three, four,

432
00:22:08,570 --> 00:22:12,250
five after two, four, six, eight, 10.

433
00:22:12,250 --> 00:22:16,930
And if I go back and click double
again, two, four, six, eight, 10.

434
00:22:16,930 --> 00:22:22,400
And then after, four,
eight, 12, 16, and then 20.

435
00:22:22,400 --> 00:22:25,440
And what am I doing in this function?

436
00:22:25,440 --> 00:22:30,210
Well, if we just pop over to IDE, and
I pull up my anonymous function, here

437
00:22:30,210 --> 00:22:33,780
on line seven through 13, I'm
doing a little bit fancy work here,

438
00:22:33,780 --> 00:22:37,240
but I'm just printing out
what's currently in the array.

439
00:22:37,240 --> 00:22:41,580
Then on line 16, 17,
and 18, there's my map.

440
00:22:41,580 --> 00:22:45,930
This is where I'm applying this doubling
function to every single element.

441
00:22:45,930 --> 00:22:48,530
And then a little further down,
I'm just doing the same thing

442
00:22:48,530 --> 00:22:51,640
I was doing before, except now I'm
printing out the contents of the array

443
00:22:51,640 --> 00:22:53,167
afterwards.

444
00:22:53,167 --> 00:22:55,500
But all I've done here is
just use an anonymous function

445
00:22:55,500 --> 00:22:58,640
to map across an entire array.

446
00:22:58,640 --> 00:23:03,466
>> So one more big topic to talk about in
JavaScript is the notion of an event.

447
00:23:03,466 --> 00:23:06,590
An event is something that just happens
when a user interacts with your web

448
00:23:06,590 --> 00:23:09,715
page, so maybe they click something,
or maybe the page is finished loading,

449
00:23:09,715 --> 00:23:12,200
or maybe they've moved
their mouse over something,

450
00:23:12,200 --> 00:23:14,290
or they've typed something
in an input field.

451
00:23:14,290 --> 00:23:19,260
All of these things are events
that are occurring on our web page.

452
00:23:19,260 --> 00:23:22,460
And JavaScript has the
capability to support something

453
00:23:22,460 --> 00:23:26,760
called an event handler, which
is a callback function that

454
00:23:26,760 --> 00:23:28,329
responds to an html event.

455
00:23:28,329 --> 00:23:29,620
And what's a callback function?

456
00:23:29,620 --> 00:23:32,328
Well, it's generally just another
name for an anonymous function.

457
00:23:32,328 --> 00:23:35,170
It's a function that
responds to an event.

458
00:23:35,170 --> 00:23:39,130
And this is where we come to the
idea of binding certain functions

459
00:23:39,130 --> 00:23:43,060
to a particular html attribute.

460
00:23:43,060 --> 00:23:46,420
Most html elements have
support for an attribute

461
00:23:46,420 --> 00:23:50,170
that we didn't talk about in the html
video for something like on click

462
00:23:50,170 --> 00:23:55,540
or on hover or on load,
all of these events

463
00:23:55,540 --> 00:23:58,120
that you can then write functions
that deal with those events

464
00:23:58,120 --> 00:24:01,090
when those events
occur on your web page.

465
00:24:01,090 --> 00:24:04,170
>> And so maybe your html
looks something like this.

466
00:24:04,170 --> 00:24:07,240
And I have two buttons here,
button one and button two,

467
00:24:07,240 --> 00:24:09,620
and here I have currently
defined nothing,

468
00:24:09,620 --> 00:24:16,170
but this is where the attribute on
click is apparently part of my html tag.

469
00:24:16,170 --> 00:24:20,220
So apparently when I define what's
going on inside of that attribute,

470
00:24:20,220 --> 00:24:23,590
it's going to be some JavaScript
function that responds to the event

471
00:24:23,590 --> 00:24:29,360
presumably of clicking on
button one or button two.

472
00:24:29,360 --> 00:24:33,580
>> What's kind of cool about this is we
can write a generic event handler.

473
00:24:33,580 --> 00:24:37,370
And this event Handler will
create an event object.

474
00:24:37,370 --> 00:24:42,000
And the event object will tell us
which of the two buttons was clicked.

475
00:24:42,000 --> 00:24:43,064
Now how does that work?

476
00:24:43,064 --> 00:24:44,730
Well, it might look something like this.

477
00:24:44,730 --> 00:24:49,860
So we will first define our buttons
to have a response to the callback

478
00:24:49,860 --> 00:24:52,470
function that will be called
when the button is clicked,

479
00:24:52,470 --> 00:24:54,520
we'll call event alert name.

480
00:24:54,520 --> 00:24:58,320
And notice in both cases we're
passing in this event parameter.

481
00:24:58,320 --> 00:25:00,460
So we call this function
or when this function

482
00:25:00,460 --> 00:25:05,330
is triggered by the event happening,
it's going to create this event object

483
00:25:05,330 --> 00:25:08,300
and pass it as a
parameter to alert name.

484
00:25:08,300 --> 00:25:12,270
And that event object is
going to contain information

485
00:25:12,270 --> 00:25:14,800
about which button was clicked.

486
00:25:14,800 --> 00:25:16,580
And how does it do that?

487
00:25:16,580 --> 00:25:18,654
Well, it might look something like this.

488
00:25:18,654 --> 00:25:20,570
So now in my separate
JavaScript file, I might

489
00:25:20,570 --> 00:25:22,420
have to find this
function alert name, which

490
00:25:22,420 --> 00:25:24,500
again accepts that event parameter.

491
00:25:24,500 --> 00:25:29,640
And then here is where I'm detecting
which button was triggered,

492
00:25:29,640 --> 00:25:33,100
var trigger equals event
dot source element.

493
00:25:33,100 --> 00:25:38,150
What was the source that created
this event object that was passed in?

494
00:25:38,150 --> 00:25:41,390
Was it button one or was it button two?

495
00:25:41,390 --> 00:25:45,710
>> And then here all I'm doing is
printing out trigger.innerhtml.

496
00:25:45,710 --> 00:25:48,860
Well, in this case, in this
context, trigger.innerhtml

497
00:25:48,860 --> 00:25:50,940
is just what is written on the button.

498
00:25:50,940 --> 00:25:53,830
It just so happens if we jump
back for a second, that would

499
00:25:53,830 --> 00:25:56,670
be what's in between those button tags.

500
00:25:56,670 --> 00:25:59,150
It will be button one or button two.

501
00:25:59,150 --> 00:26:02,320
And let's take a look at
how this event handler would

502
00:26:02,320 --> 00:26:06,080
look if we had it running in practice.

503
00:26:06,080 --> 00:26:08,850
>> So first of all, you've
opened up events.js,

504
00:26:08,850 --> 00:26:11,517
which is the JavaScript file where
I have defined this function.

505
00:26:11,517 --> 00:26:13,558
And as you can see, it's
pretty much exactly what

506
00:26:13,558 --> 00:26:15,230
we just saw on the slide a second ago.

507
00:26:15,230 --> 00:26:19,890
And I will go over to the
home page we've been using.

508
00:26:19,890 --> 00:26:22,660
And I have here button
one and button two.

509
00:26:22,660 --> 00:26:24,820
And I'll click on button one.

510
00:26:24,820 --> 00:26:28,930
You clicked on button one, if you
can see right here in the alert.

511
00:26:28,930 --> 00:26:30,810
OK.

512
00:26:30,810 --> 00:26:33,980
Click on button two, you
clicked on a button two.

513
00:26:33,980 --> 00:26:37,150
>> So both buttons have the
same function call, right?

514
00:26:37,150 --> 00:26:40,840
They both were alert name
event, but this event object

515
00:26:40,840 --> 00:26:46,900
that gets created when we click on
it tells us which button was clicked.

516
00:26:46,900 --> 00:26:49,650
We didn't have to write two separate
functions or deal with having

517
00:26:49,650 --> 00:26:51,470
to pass any additional information.

518
00:26:51,470 --> 00:26:53,220
We're just relying on
what JavaScript will

519
00:26:53,220 --> 00:26:58,772
do for us, which is to create that
sort of event object on our behalf.

520
00:26:58,772 --> 00:27:01,730
There's a lot more to JavaScript than
what we've covered in this video,

521
00:27:01,730 --> 00:27:03,521
but having these
fundamental should get you

522
00:27:03,521 --> 00:27:05,690
quite a long ways to
learning everything you'll

523
00:27:05,690 --> 00:27:09,030
need to know about this
interesting language.

524
00:27:09,030 --> 00:27:10,000
I'm Doug Lloyd.

525
00:27:10,000 --> 00:27:12,010
This is CS50.

526
00:27:12,010 --> 00:27:14,181