1
00:00:00,506 --> 00:00:49,326
[ Music ]

2
00:00:49,826 --> 00:00:51,016
>> So I am the cloud.

3
00:00:52,516 --> 00:00:57,426
[ Music ]

4
00:00:57,926 --> 00:00:59,156
>> What's with the
giant pumpkin?

5
00:01:00,516 --> 00:01:15,986
[ Music ]

6
00:01:16,486 --> 00:01:19,776
>> So two guesses
as to who made that?

7
00:01:19,776 --> 00:01:22,856
This is CS 50, the
start of week ten.

8
00:01:22,856 --> 00:01:26,106
And that is indeed just one of
the seminars on the horizon.

9
00:01:26,106 --> 00:01:28,276
For those of you after
final projects who would

10
00:01:28,276 --> 00:01:30,056
like to continue on
with your final projects

11
00:01:30,306 --> 00:01:31,826
or some other idea all together,

12
00:01:31,826 --> 00:01:34,836
know that this hack Harvard
group started last year is

13
00:01:34,836 --> 00:01:35,996
available to you.

14
00:01:35,996 --> 00:01:37,726
If you go to
hackharvard.org/app,

15
00:01:38,136 --> 00:01:40,646
you will be presented with
an opportunity, potentially,

16
00:01:40,916 --> 00:01:43,856
to come back a little early over
J term and work with friends

17
00:01:43,856 --> 00:01:45,566
or fellow-minded students

18
00:01:45,886 --> 00:01:48,856
on your own entrepreneurialship
activity.

19
00:01:49,026 --> 00:01:52,226
We, quote unquote, are a hub
of tech entrepreneurs on campus

20
00:01:52,226 --> 00:01:55,436
with a mini incubator during
optional winter activities week,

21
00:01:55,436 --> 00:01:56,976
January 13 to 22.

22
00:01:57,236 --> 00:02:00,416
We offer everything the aspiring
entrepreneur or hacker needs

23
00:02:00,416 --> 00:02:02,206
to build cool projects.

24
00:02:02,206 --> 00:02:03,636
If you would like
to join and apply

25
00:02:03,636 --> 00:02:06,236
to that group head
to that URL there.

26
00:02:06,526 --> 00:02:09,186
So this week is ultimately
about CS 50 shuttle,

27
00:02:09,186 --> 00:02:11,996
and I dare say one of the most
exciting aspects of this week is

28
00:02:11,996 --> 00:02:16,996
that it's your last set of
CS 50 Problem Sets ever.

29
00:02:16,996 --> 00:02:20,676
We like to think it's also fun.

30
00:02:20,876 --> 00:02:23,256
You will recall perhaps
from Week Zero

31
00:02:23,256 --> 00:02:26,316
that in Problem Set 8 you have
the ability to start driving

32
00:02:26,316 --> 00:02:30,316
around campus picking up
teaching fellows, CA's,

33
00:02:30,316 --> 00:02:32,846
and a few Easter
eggs along the way.

34
00:02:32,846 --> 00:02:33,576
Where did he go?

35
00:02:34,276 --> 00:02:37,506
Well, and when you
come up close to one

36
00:02:37,506 --> 00:02:40,616
of the staff members can you
click this pick up button

37
00:02:40,616 --> 00:02:43,596
at top left or drop them off
at their appropriate house,

38
00:02:43,836 --> 00:02:45,576
and there's also
opportunities to build

39
00:02:45,576 --> 00:02:46,806
in some Easter eggs of your own.

40
00:02:46,806 --> 00:02:47,906
For instance, those
of you who grew

41
00:02:47,906 --> 00:02:49,966
up playing Nintendo might
recall the Kunami code.

42
00:02:49,966 --> 00:02:51,806
Up, up, down, down,
left, right, left, right,

43
00:02:51,856 --> 00:02:57,656
B A. If you actually type
that into the staff solution,

44
00:02:57,656 --> 00:03:00,916
you will also acquire
the ability to fly.

45
00:03:01,246 --> 00:03:03,356
So there you have it.

46
00:03:03,536 --> 00:03:08,126
CS 50 shuttle, framework for
which we provide you with,

47
00:03:08,326 --> 00:03:11,056
and you then begin to
fill in some blanks.

48
00:03:11,606 --> 00:03:15,556
So without further ado, today is
about introducing the concepts

49
00:03:15,556 --> 00:03:18,076
and the techniques with which
you can start implementing this

50
00:03:18,076 --> 00:03:20,176
as well as your own
final projects.

51
00:03:20,176 --> 00:03:22,196
And thus enters into
the picture JavaScript.

52
00:03:22,236 --> 00:03:27,006
So JavaScript is a programming
language like C, like PHP,

53
00:03:27,006 --> 00:03:31,186
but unlike those languages it is
executed entirely client-side,

54
00:03:31,186 --> 00:03:32,536
generally within a browser,

55
00:03:32,536 --> 00:03:34,876
although these days
server-side options do exist.

56
00:03:35,086 --> 00:03:37,246
And like PHP, it's not compiled.

57
00:03:37,246 --> 00:03:38,926
So there's no process
of running GSS

58
00:03:38,926 --> 00:03:40,516
or particular with JavaScript.

59
00:03:40,726 --> 00:03:43,646
Rather, you write JavaScript
code, you store it inside

60
00:03:43,646 --> 00:03:48,016
of your HTML files or PHP files
or in separate dot J S files.

61
00:03:48,216 --> 00:03:49,966
And then when the
browser downloads

62
00:03:49,966 --> 00:03:51,946
that JavaScript code
it executes it.

63
00:03:51,946 --> 00:03:56,606
So the CS 50 shuttle
implementation is an amalgam

64
00:03:56,606 --> 00:03:59,716
of a plug in that you did
have to download separately

65
00:03:59,716 --> 00:04:00,946
or will from Google earth.

66
00:04:01,216 --> 00:04:03,126
But also the Google maps API,

67
00:04:03,446 --> 00:04:04,996
application programming
interface,

68
00:04:05,216 --> 00:04:07,806
as well as just some HTML
and JavaScript and CS S

69
00:04:07,806 --> 00:04:10,426
that we wrote, and we
wired, so to speak,

70
00:04:10,426 --> 00:04:12,666
all of these various
tools together

71
00:04:12,896 --> 00:04:16,536
so that you ultimately can focus
on the logic and on the usage

72
00:04:16,536 --> 00:04:19,136
of these tools to make
something much more interesting

73
00:04:19,136 --> 00:04:22,496
than just Google Earth or
just Google Maps Standing

74
00:04:22,616 --> 00:04:23,516
unto itself.

75
00:04:23,806 --> 00:04:25,666
So a few background details.

76
00:04:25,666 --> 00:04:27,256
You recall we talked about some

77
00:04:27,256 --> 00:04:30,856
of these status codes,
401, 403, 404, 500.

78
00:04:30,856 --> 00:04:31,996
Generally, these are bad things.

79
00:04:32,186 --> 00:04:34,446
If you are seeing this when
working on some project

80
00:04:34,446 --> 00:04:36,216
of yours you murder in the
second degreed up somewhere.

81
00:04:36,216 --> 00:04:38,896
Or if you're on a web and
you come across a 404,

82
00:04:38,896 --> 00:04:40,556
it means someone
else has messed up.

83
00:04:40,596 --> 00:04:41,696
And just to be clear,

84
00:04:41,786 --> 00:04:43,926
where these messages
are being communicated,

85
00:04:44,146 --> 00:04:46,276
notice that we can
simulate this as follows.

86
00:04:46,486 --> 00:04:49,056
We'll see how far we get by
being on auto pilot there.

87
00:04:49,056 --> 00:04:50,966
Another feature of the
staff implementation.

88
00:04:51,296 --> 00:04:54,296
Let me go over to my terminal
window inside of the appliance.

89
00:04:54,296 --> 00:04:55,856
I'll just inside of public HTML.

90
00:04:55,856 --> 00:05:00,386
And let me go ahead and run --
I'm just going to create a file.

91
00:05:00,586 --> 00:05:03,996
And you can create files with
the command touch foo dot HTML.

92
00:05:04,246 --> 00:05:06,036
And if I now do L S dash L,

93
00:05:06,036 --> 00:05:08,086
notice that I have
already screwed up.

94
00:05:08,196 --> 00:05:09,596
Even though my other files

95
00:05:09,596 --> 00:05:12,086
in this directory are
[Inaudible] correctly,

96
00:05:12,286 --> 00:05:15,426
foo dot HTML is only
readable by me.

97
00:05:15,426 --> 00:05:18,786
And that is a problem if I want
it to be accessible via browser.

98
00:05:19,066 --> 00:05:22,366
So sure enough, if I go
over to a browser, I reload,

99
00:05:22,366 --> 00:05:24,046
I can see it in my directory.

100
00:05:24,286 --> 00:05:27,306
Because at this point in
the story my public HTML,

101
00:05:27,306 --> 00:05:31,176
I've actually given readability
and executability permissions

102
00:05:31,176 --> 00:05:34,466
to which command But if I
click foo dot HTML you see the

103
00:05:34,466 --> 00:05:35,846
familiar forbidden message.

104
00:05:35,846 --> 00:05:38,556
And if you really look close
in the title bar you'll see

105
00:05:38,556 --> 00:05:42,246
that 403 forbidden does somehow
indeed relate to command.

106
00:05:42,656 --> 00:05:44,926
But because we're now
looking underneath the hood,

107
00:05:44,926 --> 00:05:46,936
let me also click on Firebug.

108
00:05:47,216 --> 00:05:49,786
Recall that's the free
plug in, at top right.

109
00:05:49,786 --> 00:05:52,646
Let me go ahead and
click here and reload.

110
00:05:52,766 --> 00:05:55,456
But with Firebug's
net tab selected.

111
00:05:55,456 --> 00:05:57,826
So in the past when we played
with HTML, you might have played

112
00:05:57,826 --> 00:05:58,966
with others, but notice

113
00:05:58,966 --> 00:06:01,966
that these other several tabs
including console and net

114
00:06:01,966 --> 00:06:03,766
and more are all quite helpful.

115
00:06:03,766 --> 00:06:07,896
And you can see in red here that
we tried to get foo dot HTML.

116
00:06:08,136 --> 00:06:09,166
But it just didn't work.

117
00:06:09,166 --> 00:06:12,606
In fact, if I click on that I
can see a nice user-friendly,

118
00:06:12,606 --> 00:06:15,976
nice bold-faced in gray
scale version of the headers.

119
00:06:15,976 --> 00:06:18,266
But if I click view
source over here,

120
00:06:18,496 --> 00:06:21,176
this shows me the actual
HTTP headers that were sent.

121
00:06:21,526 --> 00:06:24,206
Whereas 200, where
we said was good,

122
00:06:24,486 --> 00:06:27,716
403 are almost anything
other than 200 is bad.

123
00:06:27,716 --> 00:06:30,556
And this is how web
sites are communicating

124
00:06:30,766 --> 00:06:32,176
that information, okay?

125
00:06:32,176 --> 00:06:33,316
Safari is getting lonely.

126
00:06:33,316 --> 00:06:34,766
So let's go back to safari.

127
00:06:35,226 --> 00:06:36,106
And time it up.

128
00:06:36,496 --> 00:06:40,716
So that's a feature, too, of
the staff's implementation.

129
00:06:40,986 --> 00:06:43,616
So this is just to point
out that underneath all

130
00:06:43,616 --> 00:06:46,236
of your typical web usage
there's some additional somewhat

131
00:06:46,236 --> 00:06:50,036
arcane information that we
programatically are now going

132
00:06:50,036 --> 00:06:54,386
to have more control over with
this language called JavaScript.

133
00:06:54,826 --> 00:06:56,576
All right, so without
further ado,

134
00:06:57,256 --> 00:07:00,006
this is where you can
learn about JavaScript.

135
00:07:00,006 --> 00:07:02,456
This is actually a really nice
tutorial, but this, like PHP,

136
00:07:02,456 --> 00:07:04,596
is going to be a bootstrapping
process, where today

137
00:07:04,596 --> 00:07:06,226
and in yesterday's walk through

138
00:07:06,226 --> 00:07:07,926
and this week's sections
we'll introduce you

139
00:07:07,926 --> 00:07:09,976
to the fundamentals, some of
the concepts and the like.

140
00:07:10,326 --> 00:07:13,346
But ultimately, it will be
up to you with the P sets

141
00:07:13,346 --> 00:07:15,836
and with your final
project to explore further.

142
00:07:15,836 --> 00:07:18,386
And this is one particular
language guide that points

143
00:07:18,386 --> 00:07:20,976
out JavaScript is
actually pretty familiar.

144
00:07:20,976 --> 00:07:24,506
So just as with C and with
PHP, we have functions.

145
00:07:24,746 --> 00:07:28,996
But with PHP you don't strictly
need a main function any more.

146
00:07:28,996 --> 00:07:31,526
If you want to start writing
code all you'll need, we'll see,

147
00:07:31,736 --> 00:07:33,656
is an HTML code called script.

148
00:07:33,766 --> 00:07:35,476
So main won't be necessary,

149
00:07:35,736 --> 00:07:37,836
but functions will still
be at our disposal.

150
00:07:37,976 --> 00:07:39,856
We'll see that conditions,
syntactically,

151
00:07:40,136 --> 00:07:41,586
look again exactly like this.

152
00:07:41,726 --> 00:07:43,376
This was pseudo code
from week one.

153
00:07:43,376 --> 00:07:44,726
We stole it two weeks
ago for PHP.

154
00:07:44,726 --> 00:07:48,166
It's exactly the same in
JavaScript for conditions,

155
00:07:48,476 --> 00:07:52,446
for boolean expressions,
for switches, for loops,

156
00:07:52,856 --> 00:07:56,496
for while loops, for do
while loops, and yet more.

157
00:07:56,496 --> 00:07:58,446
So we only start to
see some differences

158
00:07:58,446 --> 00:07:59,826
with JavaScript as follows.

159
00:07:59,826 --> 00:08:02,276
But variables have a
slightly different syntax.

160
00:08:02,856 --> 00:08:06,166
You do not specify their
type, just like in PHP.

161
00:08:06,166 --> 00:08:08,456
But unlike PHP there's
no dollar sign any more.

162
00:08:08,456 --> 00:08:10,006
So it's actually a
little more succinct.

163
00:08:10,186 --> 00:08:12,436
But you do need to
say in JavaScript,

164
00:08:12,506 --> 00:08:14,646
generally var, for variable.

165
00:08:14,646 --> 00:08:17,306
So this one line of code
means give me a variable S

166
00:08:17,796 --> 00:08:20,136
and assign it a value of
quote unquote, hello world.

167
00:08:20,426 --> 00:08:24,236
Because it is quoted in this way
this will be an implicit data

168
00:08:24,236 --> 00:08:28,296
type of string, so Java script
does have data types of sorts,

169
00:08:28,296 --> 00:08:30,766
but you don't need to
explicitly mention them.

170
00:08:30,766 --> 00:08:34,426
So here we have a variable S
as we've had many times before.

171
00:08:34,646 --> 00:08:35,576
Now arrays.

172
00:08:35,576 --> 00:08:37,566
And this is where
JavaScript gets interesting,

173
00:08:37,566 --> 00:08:39,296
and frankly powerful
and convenient,

174
00:08:39,466 --> 00:08:42,086
because syntactically it
makes a lot of things easier.

175
00:08:42,086 --> 00:08:45,536
If we want an array called
numbers, I just say var numbers,

176
00:08:45,726 --> 00:08:47,956
I don't specify in
advance that it's an array,

177
00:08:48,136 --> 00:08:52,056
but rather I determine as much
by assigning it an actual array.

178
00:08:52,406 --> 00:08:55,266
And in JavaScript if you
want an array, in this case,

179
00:08:55,266 --> 00:08:58,646
of integers, all you need to
do is open square bracket,

180
00:08:58,896 --> 00:09:01,766
close square bracket, and
then a comma separated list

181
00:09:01,916 --> 00:09:04,646
of the numbers that you actually
want to store in this array.

182
00:09:05,006 --> 00:09:07,536
You don't have to preordain
its size, you don't have

183
00:09:07,536 --> 00:09:09,976
to call mal loc,
you don't even have

184
00:09:09,976 --> 00:09:11,036
to call PHP's array function.

185
00:09:11,246 --> 00:09:14,466
If you want an array you can
simply use the square bracket

186
00:09:14,466 --> 00:09:16,476
notation, and viola,
you're on your way.

187
00:09:16,806 --> 00:09:18,906
Moreover, arrays in
JavaScript are generally what we

188
00:09:18,906 --> 00:09:19,856
call vectors.

189
00:09:19,856 --> 00:09:22,596
They're not arrays in the C
sense, they're more arrays

190
00:09:22,596 --> 00:09:24,796
in the PHP sense in that
they can be resized.

191
00:09:24,796 --> 00:09:27,396
You can add more things to
them, you can subtract things

192
00:09:27,396 --> 00:09:30,046
from them, and there's none
of this headache of malloc

193
00:09:30,046 --> 00:09:31,176
and realloc and the like.

194
00:09:31,236 --> 00:09:34,676
The size, the length of an
array will grow dynamically.

195
00:09:35,016 --> 00:09:36,906
And then we have some
new constructs too.

196
00:09:37,206 --> 00:09:41,056
So recall that in PHP we
introduced a for each construct,

197
00:09:41,056 --> 00:09:43,656
which you might have
found or may find useful.

198
00:09:43,896 --> 00:09:45,546
In JavaScript there's
something similar,

199
00:09:45,546 --> 00:09:48,676
it's the four element
in array syntax.

200
00:09:48,926 --> 00:09:51,566
So if you've got an array
called array, and you want

201
00:09:51,566 --> 00:09:54,696
to have a temporary variable
called element or foo or bar

202
00:09:54,696 --> 00:09:57,736
or whatever, you simply say
for, and then in parenthesis,

203
00:09:58,016 --> 00:10:00,706
local variable in array's name.

204
00:10:00,706 --> 00:10:03,606
And that will in every
iteration just as in PHP's

205
00:10:03,606 --> 00:10:07,296
for each construct, update
on each iteration on element

206
00:10:07,616 --> 00:10:10,076
to be the next thing
in that array.

207
00:10:10,296 --> 00:10:12,636
That's just a handy
and popular construct.

208
00:10:12,826 --> 00:10:15,446
But perhaps by far
the most powerful

209
00:10:15,516 --> 00:10:18,676
or most frequently used feature

210
00:10:18,676 --> 00:10:21,776
of JavaScript these days is
its notation for objects.

211
00:10:22,056 --> 00:10:24,096
So indeed, this technology
we'll start talking

212
00:10:24,096 --> 00:10:27,206
about today called Ajax
has really been popularized

213
00:10:27,206 --> 00:10:29,206
through the use of
something called JavaScript

214
00:10:29,426 --> 00:10:30,796
Object Notation.

215
00:10:30,796 --> 00:10:32,026
Otherwise known as JSON.

216
00:10:32,306 --> 00:10:36,646
And this simply a syntax whereby
you can declare an object

217
00:10:36,856 --> 00:10:38,686
with the simplest of characters.

218
00:10:38,686 --> 00:10:41,486
If you want an object,
think back to C, an struct,

219
00:10:41,486 --> 00:10:44,646
and you want that structure
to have three fields.

220
00:10:44,716 --> 00:10:47,296
Let's call it ID,
and house, and name.

221
00:10:47,586 --> 00:10:50,996
All you have to do is open
this object with a curly brace,

222
00:10:51,276 --> 00:10:54,396
close it a curly brace and
semicolon, I and then inside

223
00:10:54,396 --> 00:10:56,896
of it you can have as many
key value pairs as you want,

224
00:10:57,056 --> 00:10:58,516
all separated by commas.

225
00:10:58,796 --> 00:11:02,546
Where the key is to the left
of the colon and the value is

226
00:11:02,586 --> 00:11:04,156
to the right of the colon.

227
00:11:04,356 --> 00:11:06,856
So again, think back to
our declaration of student

228
00:11:06,936 --> 00:11:10,566
with a type def and an
struct way back in C. Well,

229
00:11:10,566 --> 00:11:12,156
this is the exact same idea.

230
00:11:12,416 --> 00:11:14,536
But if you want it to be
declared it's as simple

231
00:11:14,536 --> 00:11:17,586
as saying give me an
object, call it student,

232
00:11:17,586 --> 00:11:18,966
and inside of it here are going

233
00:11:18,966 --> 00:11:21,256
to be these three
key value pairs.

234
00:11:21,466 --> 00:11:22,866
To be clear, what is an object?

235
00:11:23,556 --> 00:11:25,916
Well an object in JavaScript
will eventually take

236
00:11:25,916 --> 00:11:27,856
on even more meaning
than we'll look at today,

237
00:11:27,856 --> 00:11:30,286
in that it can have functions
inside of it and the like.

238
00:11:30,286 --> 00:11:34,126
JavaScript is an object-oriented
programming language,

239
00:11:34,126 --> 00:11:36,586
even though it doesn't have
something called classes,

240
00:11:36,586 --> 00:11:37,856
which some of you
might be familiar.

241
00:11:38,226 --> 00:11:41,486
But this here allows us
to encapsulate inside

242
00:11:41,486 --> 00:11:44,276
of some big variable
multiple data fields.

243
00:11:44,656 --> 00:11:47,896
And so in this way are we
going to be able to format data

244
00:11:47,896 --> 00:11:49,346
and exchange data, especially

245
00:11:49,346 --> 00:11:51,486
over the Internet,
particularly easily.

246
00:11:51,486 --> 00:11:53,636
For instance, this is
just one student object.

247
00:11:53,636 --> 00:11:55,636
It's not all that
interesting in a vacuum,

248
00:11:55,856 --> 00:12:00,546
but if you actually wanted
to have an array of students,

249
00:12:00,846 --> 00:12:03,056
we might say var
students equals,

250
00:12:03,276 --> 00:12:05,636
and then open square
bracket, because recall back

251
00:12:05,636 --> 00:12:06,896
to notes here comes an array.

252
00:12:07,086 --> 00:12:09,256
At the bottom we have
another close square brackets,

253
00:12:09,256 --> 00:12:10,446
so that's the end of the array.

254
00:12:10,676 --> 00:12:12,666
And then inside of it,
again, as promised,

255
00:12:12,666 --> 00:12:14,596
we have a comma separated
list of something.

256
00:12:14,886 --> 00:12:17,976
But in this case the
something is an actual object.

257
00:12:18,086 --> 00:12:20,906
So the curly brace means here
comes an object, key value,

258
00:12:20,906 --> 00:12:24,646
key value, key value, and then
the same thing here for Tommy.

259
00:12:24,926 --> 00:12:28,536
And so now we have this
very clean syntax, arguably,

260
00:12:28,536 --> 00:12:30,926
for bundling up lots
of information,

261
00:12:31,226 --> 00:12:32,996
still semantically tagging it

262
00:12:32,996 --> 00:12:36,096
so I'm not just sending the
number 123 Matherhouse, David,

263
00:12:36,096 --> 00:12:38,676
Mallon but rather I'm
associating some meta data

264
00:12:38,676 --> 00:12:41,616
with it, these keys that
just tell me, the receiver,

265
00:12:41,866 --> 00:12:44,776
what these pieces of
data actually are.

266
00:12:44,916 --> 00:12:46,186
And notice too, I don't have

267
00:12:46,186 --> 00:12:48,146
to mention any type
of data type here.

268
00:12:48,146 --> 00:12:50,786
These are very, very
generic objects.

269
00:12:50,786 --> 00:12:52,596
Notice there's no
mention of student

270
00:12:52,786 --> 00:12:56,596
with a capital S. No mention
of an actual struct name

271
00:12:56,596 --> 00:12:58,176
or type def or object.

272
00:12:58,416 --> 00:13:01,066
Rather, these are
really generic objects.

273
00:13:01,066 --> 00:13:04,106
So for better or for worse,
JavaScript's notation allows us

274
00:13:04,106 --> 00:13:07,046
to very easily bundle
up together lots

275
00:13:07,376 --> 00:13:10,186
of pieces of data like this.

276
00:13:10,186 --> 00:13:13,006
But once we now have
these basics it's more fun

277
00:13:13,006 --> 00:13:14,066
and it's more compelling

278
00:13:14,066 --> 00:13:16,986
to actually now start using
these basic new syntactic

279
00:13:16,986 --> 00:13:20,646
features and this client-side
language like JavaScript.

280
00:13:20,866 --> 00:13:23,946
So without further ado, let
me go ahead and open up,

281
00:13:24,396 --> 00:13:26,826
let's say this past
example here.

282
00:13:26,826 --> 00:13:28,556
This was a very,
very simple snippet

283
00:13:28,556 --> 00:13:30,056
of HTML from a while back.

284
00:13:30,386 --> 00:13:33,156
And it was nice just because it
had some basic building blocks,

285
00:13:33,156 --> 00:13:37,736
an HTML head, a title, a body,
and then two tags inside of it,

286
00:13:38,036 --> 00:13:39,796
one of which had an attribute.

287
00:13:39,796 --> 00:13:42,836
And recall that we drew this
thing with a picture like this.

288
00:13:42,836 --> 00:13:45,816
And what did we call
this tree-like structure?

289
00:13:48,096 --> 00:13:49,136
Anyone recall?

290
00:13:50,446 --> 00:13:52,826
Yeah, DOM, I heard
someone [Inaudible] so DOM,

291
00:13:52,826 --> 00:13:55,486
Document Object Model.

292
00:13:55,646 --> 00:13:57,236
And that's just a
fancy way of saying

293
00:13:57,236 --> 00:14:01,026
that if you were a computer
or a browser reading this HTML

294
00:14:01,236 --> 00:14:04,426
from a text file into RAM,
how might you represent it?

295
00:14:04,426 --> 00:14:06,546
Well, you could just
represent it as a huge string.

296
00:14:06,546 --> 00:14:09,046
But if you actually want
to do interesting things

297
00:14:09,046 --> 00:14:11,376
with this web page and
manipulate parts of it,

298
00:14:11,536 --> 00:14:15,486
add content, subtract content,
well, you would instead want

299
00:14:15,486 --> 00:14:17,476
to be able to traverse
it hierarchically

300
00:14:17,706 --> 00:14:19,196
like this picture here suggests.

301
00:14:19,476 --> 00:14:20,836
So this is what really happens.

302
00:14:20,836 --> 00:14:23,106
When you download a
web page with a browser

303
00:14:23,326 --> 00:14:25,166
and it contains HTML like this,

304
00:14:25,166 --> 00:14:28,096
one of the first things the
browser does is parse it.

305
00:14:28,326 --> 00:14:31,466
It analyzes that HTML code
top to bottom, left to right.

306
00:14:31,636 --> 00:14:34,436
And every time it sees a tag
it creates what we'll called a

307
00:14:34,436 --> 00:14:36,946
node, one of these
rectangles on the screen here.

308
00:14:37,136 --> 00:14:39,966
And every time it encounters
another open tag inside

309
00:14:39,966 --> 00:14:42,986
of an already open tag it
assumes that that new node

310
00:14:42,986 --> 00:14:46,036
or new rectangle is a child
or some kind of descendant

311
00:14:46,236 --> 00:14:47,906
of the previously open tag.

312
00:14:47,906 --> 00:14:50,936
So in short, with
the right logic

313
00:14:50,936 --> 00:14:54,156
and with the right code can you
read this file top to bottom,

314
00:14:54,156 --> 00:14:58,066
left to right, and just call the
equivalent of malloc, malloc,

315
00:14:58,066 --> 00:15:01,056
and wire these things together
much like you did in P set 6,

316
00:15:01,216 --> 00:15:05,056
a hash table, or tree, or a try,
or any of these data structures

317
00:15:05,056 --> 00:15:07,406
that were somehow
interesting in memory.

318
00:15:07,626 --> 00:15:11,626
So what's neat about JavaScript
is you have the ability now

319
00:15:11,826 --> 00:15:15,346
programatically to change
what was sent to the user.

320
00:15:15,576 --> 00:15:17,916
So even though you might
send them that HTML,

321
00:15:18,116 --> 00:15:20,166
you can keep sending
them more HTML,

322
00:15:20,166 --> 00:15:22,496
or you can keep sending
them -- we'll say JSON data,

323
00:15:22,816 --> 00:15:26,746
and add more and more content to
the screen, or even remove it.

324
00:15:26,906 --> 00:15:28,506
Case in point, Facebook, right?

325
00:15:28,506 --> 00:15:30,176
Now with the wall --
with the news feed

326
00:15:30,176 --> 00:15:31,406
on the front page you
can constantly see new

327
00:15:31,406 --> 00:15:31,916
status updates.

328
00:15:31,916 --> 00:15:32,996
You don't even have
to click anything,

329
00:15:32,996 --> 00:15:34,756
it will just tell you
when status updates.

330
00:15:34,756 --> 00:15:36,786
And you don't have to click
anything, it will just tell you

331
00:15:37,036 --> 00:15:39,716
when new status updates are
available in a little pop

332
00:15:39,716 --> 00:15:41,226
up in one of the
corners of the screen.

333
00:15:41,526 --> 00:15:42,296
Well, how is that?

334
00:15:42,296 --> 00:15:44,856
Well obviously Facebook
can't foretell the future.

335
00:15:44,856 --> 00:15:47,236
When you download the homepage
for the first time at like,

336
00:15:47,236 --> 00:15:50,366
12 o'clock, well, they don't
know what new status updates are

337
00:15:50,366 --> 00:15:53,366
going to come, and they don't
want you sort of 1990's style

338
00:15:53,366 --> 00:15:55,456
to have to reload
the whole page.

339
00:15:55,666 --> 00:15:58,986
And so they push additional
updates to you in some manner.

340
00:15:59,226 --> 00:16:02,596
So they send you more HTML,
or more JSON type data,

341
00:16:02,916 --> 00:16:05,466
so their own JavaScript
that came

342
00:16:05,466 --> 00:16:07,826
with the original web page
can read it from the Internet

343
00:16:08,136 --> 00:16:10,796
and then insert it
more into the web page.

344
00:16:11,016 --> 00:16:12,936
And I would be remiss
if I didn't mention

345
00:16:13,476 --> 00:16:16,706
that Mark Zuckerberg is indeed
at MIT right now, not at CS 50.

346
00:16:16,706 --> 00:16:20,056
But we will be joined today
by Jocelyn Goldfine to the end

347
00:16:20,056 --> 00:16:22,806
of class who is Facebook's
director of engineering.

348
00:16:22,976 --> 00:16:26,186
So these references to Facebook
right offer some interesting

349
00:16:26,186 --> 00:16:30,016
opportunities for how the real
Facebook actually works rather

350
00:16:30,016 --> 00:16:32,796
than my own made-up stories
about how it might work.

351
00:16:32,876 --> 00:16:34,566
So more from Jocelyn in a bit.

352
00:16:35,026 --> 00:16:37,296
But for now let's
actually transition here

353
00:16:37,876 --> 00:16:40,786
and start using JavaScript
in some way.

354
00:16:40,786 --> 00:16:44,286
But let me point out one thing,
so think way back to week 0.

355
00:16:44,286 --> 00:16:46,956
We had the notion of
events in scratch,

356
00:16:47,176 --> 00:16:50,906
and you could broadcast
an event,

357
00:16:51,196 --> 00:16:53,096
and then you could
wait for an event.

358
00:16:53,396 --> 00:16:56,456
And we had that very simple
Marco Polo example way back

359
00:16:56,456 --> 00:16:59,246
when, in week 0, where when you
hit the space bar Marco would

360
00:16:59,246 --> 00:17:02,906
say his name and broadcast
an event, and the girl

361
00:17:02,906 --> 00:17:05,726
that was also a separate sprite
would wait for that event.

362
00:17:05,726 --> 00:17:09,096
Upon receiving that event
she would then say polo.

363
00:17:09,096 --> 00:17:12,816
So events were this way of
having two different programs

364
00:17:12,816 --> 00:17:15,466
or two different sprites,
in that case, community.

365
00:17:15,686 --> 00:17:18,956
Well similarly, as web
programming, asynchronous.

366
00:17:19,176 --> 00:17:21,716
You have lots going on,
on modern web pages,

367
00:17:21,956 --> 00:17:25,046
and you don't necessarily want
to wait for the user's input

368
00:17:25,046 --> 00:17:27,046
for something to happen
or something to change,

369
00:17:27,256 --> 00:17:29,956
you the web site might want to
push more data to the server

370
00:17:29,956 --> 00:17:32,136
and say here's a
status update, or Gmail,

371
00:17:32,136 --> 00:17:34,086
here's a new e-mail
that you have.

372
00:17:34,376 --> 00:17:39,056
And so you have in HTML
associated with all

373
00:17:39,056 --> 00:17:41,096
of these elements we've
been using thus far.

374
00:17:41,186 --> 00:17:43,696
Anchor tags and div
and paragraphs

375
00:17:43,696 --> 00:17:45,666
and inputs and select menus.

376
00:17:45,976 --> 00:17:50,266
You actually have a whole suite
of events that can be triggered.

377
00:17:50,266 --> 00:17:51,976
And this is a non-exhaustive
list,

378
00:17:51,976 --> 00:17:53,156
but some of the most
common ones.

379
00:17:53,366 --> 00:17:55,656
And most of them kind
of are self-explanatory.

380
00:17:55,656 --> 00:18:00,946
For instance, on mouse over
is an event that is triggered

381
00:18:01,176 --> 00:18:03,806
on any HTML tag when you so much

382
00:18:03,806 --> 00:18:06,106
as hover your mouse
cursor over that element.

383
00:18:06,316 --> 00:18:08,866
Now typically, if you just
wave your mouse over a div

384
00:18:08,866 --> 00:18:11,616
or over a paragraph of text on a
web page that you made for say,

385
00:18:11,616 --> 00:18:13,536
P set 7, nothing happens.

386
00:18:13,826 --> 00:18:16,536
But with JavaScript can you
tell the browser I would

387
00:18:16,536 --> 00:18:18,846
like to listen for
this mouse over event.

388
00:18:19,236 --> 00:18:21,596
And you might recall on many
web sites, any time you hover

389
00:18:21,596 --> 00:18:23,966
over some text or graphic,
what sometimes happens?

390
00:18:25,496 --> 00:18:26,516
Before you actually click.

391
00:18:27,676 --> 00:18:29,296
Right, something changes, right?

392
00:18:29,296 --> 00:18:32,206
It might become highlighted, it
might change to another graphic,

393
00:18:32,206 --> 00:18:34,736
it might become bold,
something might change.

394
00:18:34,976 --> 00:18:37,396
And that's because of
JavaScript, typically.

395
00:18:37,506 --> 00:18:39,706
CSS can work some of these
tricks these days too,

396
00:18:39,876 --> 00:18:41,536
but with JavaScript
you can do anything,

397
00:18:41,536 --> 00:18:43,926
because you can detect the
fact that the mouse is now

398
00:18:43,926 --> 00:18:46,426
over some elements
in the page, some div

399
00:18:46,426 --> 00:18:47,706
or some paragraph,
or some button.

400
00:18:47,906 --> 00:18:49,076
And you can do something.

401
00:18:49,226 --> 00:18:51,216
And you can even then
detect when the mouse is

402
00:18:51,216 --> 00:18:53,436
out of the range of that tag.

403
00:18:53,436 --> 00:18:56,466
So you can have things become
big and then small or black

404
00:18:56,466 --> 00:18:58,076
and then white, or any kinds

405
00:18:58,076 --> 00:18:59,686
of changes you might
want to have happen.

406
00:18:59,686 --> 00:19:02,276
You can listen to key strokes,
on key down, on key up,

407
00:19:02,276 --> 00:19:05,566
on key press, these are
actually used by CS 50 shuttle,

408
00:19:05,756 --> 00:19:08,456
so when you do hit the
arrow keys or the U or the A

409
00:19:08,456 --> 00:19:10,826
or the like, we,
the JavaScript code

410
00:19:10,826 --> 00:19:13,796
in that implementation are
listening for those events.

411
00:19:14,026 --> 00:19:15,966
And when we hear you
pushing the up arrow,

412
00:19:15,966 --> 00:19:18,046
just like in scratch,
we do something.

413
00:19:18,046 --> 00:19:20,666
We move the camera or we move
the shuttle, in that case.

414
00:19:20,936 --> 00:19:23,886
And there's yet others on
submit, on select, on resize,

415
00:19:23,886 --> 00:19:25,616
on click, and so forth.

416
00:19:25,836 --> 00:19:28,266
This means that we can
listen for all of this.

417
00:19:28,716 --> 00:19:31,956
So let me go into the appliance
here and open up G edit

418
00:19:32,046 --> 00:19:34,376
with a file called
form 1 dot HTML.

419
00:19:34,806 --> 00:19:37,856
And this is going to be a very
simple form that submits only

420
00:19:37,856 --> 00:19:41,616
to a file called dump dot PHP,
which does nothing interesting.

421
00:19:41,616 --> 00:19:44,726
I just wanted a page to which
I could submit all these forms

422
00:19:44,906 --> 00:19:47,176
that would just show me what
fields had been submitted.

423
00:19:47,176 --> 00:19:48,886
So it's not really
a dynamic web site,

424
00:19:48,886 --> 00:19:51,056
it's just some diagnostic
output.

425
00:19:51,316 --> 00:19:53,806
So let me go ahead and look
at what this thing looks like.

426
00:19:53,806 --> 00:19:57,836
If I go into form 1, dot HTML.

427
00:19:58,566 --> 00:20:01,036
We will see a little
form like this.

428
00:20:01,456 --> 00:20:04,696
So pretty typical, e-mail
field, password, again password,

429
00:20:04,696 --> 00:20:07,496
and then I need to somehow agree
to these Terms and Conditions.

430
00:20:07,496 --> 00:20:11,216
Unfortunately, if I submit this
form right now nothing actually

431
00:20:11,486 --> 00:20:12,596
happens in a good way.

432
00:20:12,786 --> 00:20:15,836
Because it does submit the
form, it submits no values

433
00:20:15,836 --> 00:20:16,836
for those three fields,

434
00:20:16,836 --> 00:20:18,946
it doesn't even send
the check box field

435
00:20:18,946 --> 00:20:19,826
because it wasn't checked.

436
00:20:20,266 --> 00:20:21,646
And so what could I do?

437
00:20:21,876 --> 00:20:24,166
Just like with the from my
"am" examples last week,

438
00:20:24,256 --> 00:20:25,796
I could yell at the user, right?

439
00:20:25,796 --> 00:20:28,726
This PHP file could
notice this field equals,

440
00:20:28,726 --> 00:20:29,906
equals, the empty string.

441
00:20:29,906 --> 00:20:32,826
This field also equals, equals,
the empty string, quote unquote.

442
00:20:33,076 --> 00:20:34,616
So let's yell at
the user in red.

443
00:20:34,936 --> 00:20:39,096
But JavaScript is nicer because
we can detect this even before

444
00:20:39,096 --> 00:20:39,906
you click submit.

445
00:20:39,906 --> 00:20:41,936
And this is increasingly
compelling,

446
00:20:41,936 --> 00:20:43,356
because you don't want
to have to submit.

447
00:20:43,556 --> 00:20:46,026
Maybe wait a second or
two while your slow laptop

448
00:20:46,026 --> 00:20:48,316
or slow internet connection
actually sends the form

449
00:20:48,316 --> 00:20:51,296
to the server, only then to be
told, sorry, you screwed up,

450
00:20:51,366 --> 00:20:53,066
try again, it would
be much nicer

451
00:20:53,066 --> 00:20:55,716
if we could instantaneously
tell the user, wait a minute,

452
00:20:55,716 --> 00:20:57,606
you forget to do
something important.

453
00:20:57,836 --> 00:20:59,996
So you can add a bit of
client-side validation.

454
00:20:59,996 --> 00:21:02,866
In version two of the form,
let me try that same thing

455
00:21:02,866 --> 00:21:04,556
where I submit a blank form.

456
00:21:04,826 --> 00:21:07,116
And notice the web
site's yelling at me.

457
00:21:07,356 --> 00:21:11,036
It's sort of using a very coarse
trick using an alert menu,

458
00:21:11,036 --> 00:21:11,646
as it's called.

459
00:21:11,876 --> 00:21:14,446
But it's now at least preventing
me from submitting the form

460
00:21:14,526 --> 00:21:15,556
and it's explaining why.

461
00:21:15,556 --> 00:21:16,536
So I click okay.

462
00:21:16,816 --> 00:21:20,846
And notice, I did not
end up at dump dot PHP.

463
00:21:20,846 --> 00:21:22,436
I'm still at the original URL.

464
00:21:22,876 --> 00:21:25,686
So it seems like when
JavaScript you can listen

465
00:21:25,686 --> 00:21:27,396
for an event like on submit.

466
00:21:27,556 --> 00:21:30,056
And if you decide wait a
minute, I don't want to submit

467
00:21:30,056 --> 00:21:32,106
because you have
not figured out --

468
00:21:32,106 --> 00:21:34,086
you have not inputted
everything I want,

469
00:21:34,386 --> 00:21:36,076
you can short circuit
that connection.

470
00:21:36,286 --> 00:21:38,886
And increasingly these days,
you have android phones,

471
00:21:38,886 --> 00:21:41,016
windows phones, iPhones
and the like,

472
00:21:41,216 --> 00:21:43,426
these are not the fastest
internet connections,

473
00:21:43,426 --> 00:21:45,576
especially when you're
on 3 G or similar.

474
00:21:45,816 --> 00:21:50,046
So the avoidance of this
round-trip time that could be 2,

475
00:21:50,086 --> 00:21:53,496
3, maybe even 5 or more seconds
is increasingly compelling

476
00:21:53,496 --> 00:21:56,126
to try to do it all
on the client side.

477
00:21:56,126 --> 00:21:57,656
To speed up the user's
experience.

478
00:21:57,916 --> 00:21:59,676
So let's see how this
is actually working.

479
00:21:59,676 --> 00:22:04,096
In form 2 dot HTML
we'll see the same HTML

480
00:22:04,356 --> 00:22:05,716
as was in the other form.

481
00:22:05,856 --> 00:22:07,076
So let's just look
at this version,

482
00:22:07,076 --> 00:22:09,736
because it's identical --
almost identical to B 4.

483
00:22:09,916 --> 00:22:11,386
And now notice we
have a body tag,

484
00:22:11,726 --> 00:22:14,986
we have a form tag whose action
is as promised dump dot PHP.

485
00:22:14,986 --> 00:22:17,496
We're just using get, because it
doesn't really matter for this.

486
00:22:17,786 --> 00:22:19,906
But notice I've given
this form a name.

487
00:22:20,196 --> 00:22:21,266
So that's a little new.

488
00:22:21,266 --> 00:22:23,546
So name equals quote
unquote registration.

489
00:22:23,546 --> 00:22:24,986
Because this is a
registration form.

490
00:22:24,986 --> 00:22:27,826
Does the notice this too,
another HTML attribute.

491
00:22:28,236 --> 00:22:31,666
On submit equals, quote
unquote, return validate.

492
00:22:32,126 --> 00:22:35,076
So we seem now to be
calling code inside

493
00:22:35,076 --> 00:22:37,046
of an attribute's
value inside of HTML.

494
00:22:37,046 --> 00:22:39,716
And we'll see that there
are actually cleaner ways

495
00:22:39,716 --> 00:22:42,286
to do this, and we'll get
there, but for now this seems

496
00:22:42,286 --> 00:22:45,106
to be saying call a
function called validate

497
00:22:45,106 --> 00:22:47,626
with no arguments, and
then return its value.

498
00:22:47,776 --> 00:22:49,956
And then what HTML
is designed to do,

499
00:22:49,956 --> 00:22:52,966
if this function
validate returns false,

500
00:22:53,266 --> 00:22:54,226
what's going to happen?

501
00:22:54,276 --> 00:22:56,476
The form will not, in
fact, get submitted.

502
00:22:56,476 --> 00:22:59,536
Only if that function runs
true will the form proceed

503
00:22:59,536 --> 00:23:00,506
to go to the server.

504
00:23:00,706 --> 00:23:02,486
Now the rest of this
is old hat now.

505
00:23:02,486 --> 00:23:04,706
So we've got an e-mail
field, which is type text,

506
00:23:04,946 --> 00:23:06,566
password field, which
is type password,

507
00:23:06,566 --> 00:23:07,756
another one for password,

508
00:23:07,756 --> 00:23:09,966
and then an input
type equals check box.

509
00:23:10,206 --> 00:23:12,866
So everything else is the same,
but I do have a submit button.

510
00:23:13,146 --> 00:23:15,866
So indeed when the user hits
enter or clicks that button,

511
00:23:16,216 --> 00:23:19,636
that function validate
is going to get called.

512
00:23:19,976 --> 00:23:23,206
Well, if we scroll up notice
that we introduced a new feature

513
00:23:23,206 --> 00:23:25,406
into the head of this web page.

514
00:23:25,466 --> 00:23:28,556
Inside of the head, usually;
not only the title --

515
00:23:28,696 --> 00:23:31,626
is the title tag, but now
we also have a script tag.

516
00:23:31,626 --> 00:23:34,376
And the default language
these days is assumed

517
00:23:34,376 --> 00:23:35,746
to be JavaScript, although back

518
00:23:35,746 --> 00:23:37,766
in the day others
were sometimes used,

519
00:23:37,766 --> 00:23:39,826
but for now this is pretty
much the de facto standard.

520
00:23:40,176 --> 00:23:43,256
And inside of this script tag we
actually have programming code,

521
00:23:43,476 --> 00:23:47,086
not C, not PHP, not HTML,
this is now JavaScript.

522
00:23:47,246 --> 00:23:49,926
And this is more verbose than
we're going to need to be,

523
00:23:49,926 --> 00:23:52,396
ultimately, but let's see
what this function does.

524
00:23:52,556 --> 00:23:55,486
So just as in PHP you must
literally say function

525
00:23:55,786 --> 00:23:56,976
and then the name
of the function.

526
00:23:57,326 --> 00:23:59,056
And it takes no arguments
in this case.

527
00:23:59,326 --> 00:24:02,116
Then we have the promised
syntax of if conditions,

528
00:24:02,116 --> 00:24:03,476
which look pretty much the same.

529
00:24:03,786 --> 00:24:04,886
But this is a little new.

530
00:24:05,086 --> 00:24:09,386
So it turns out that
per this picture here,

531
00:24:10,026 --> 00:24:14,476
whereby you have a so-called
document node at the very top,

532
00:24:14,476 --> 00:24:16,926
sort of the grand parent of
this whole tree structure --

533
00:24:17,266 --> 00:24:19,566
similarly in JavaScript,
you have access

534
00:24:19,666 --> 00:24:22,586
to a special global
variable called document.

535
00:24:22,776 --> 00:24:24,466
And it's specifically an object.

536
00:24:24,466 --> 00:24:27,146
Which means inside of
document are a whole bunch

537
00:24:27,146 --> 00:24:28,316
of key value pairs.

538
00:24:28,586 --> 00:24:30,336
For now, you can simplify this.

539
00:24:30,386 --> 00:24:34,436
Inside of the document object
is another object called forms.

540
00:24:34,436 --> 00:24:39,836
And this forms object is just an
obtaining any of the HTML forms

541
00:24:39,836 --> 00:24:40,806
that are in this web page.

542
00:24:40,806 --> 00:24:43,496
There might be 0, there might
be 1, in this case there's 1.

543
00:24:43,816 --> 00:24:46,206
And if you then go
dot registration,

544
00:24:46,416 --> 00:24:49,716
this means give me the form
whose name is registration

545
00:24:49,716 --> 00:24:52,366
in this particular web
page, and then you can kind

546
00:24:52,366 --> 00:24:54,426
of continue the logic
fair intuitively.

547
00:24:54,626 --> 00:24:57,186
Dot e-mail means get
me the e-mail field

548
00:24:57,316 --> 00:25:00,246
in that form called
registration in this web page,

549
00:25:00,566 --> 00:25:04,716
and then lastly, because the
e-mail field is really referring

550
00:25:04,716 --> 00:25:07,476
to an input element we
really care about its value.

551
00:25:07,476 --> 00:25:09,386
So value equals quote
unquote something.

552
00:25:09,666 --> 00:25:11,006
So we say dot value.

553
00:25:11,236 --> 00:25:15,236
And finally, after traversing
this very long hierarchy

554
00:25:15,236 --> 00:25:18,936
of objects, but arguably
intuitive hierarchy,

555
00:25:19,206 --> 00:25:22,326
we're checking does that value
equal, equal the empty string,

556
00:25:22,576 --> 00:25:24,866
because if so we want
to yell at the user.

557
00:25:25,066 --> 00:25:27,776
So a very simple way
of yelling at the user,

558
00:25:27,776 --> 00:25:29,216
even though it's not
the prettiest way,

559
00:25:29,216 --> 00:25:32,716
because different browsers
create different aesthetic

560
00:25:32,716 --> 00:25:36,456
windows, alert literally
just alerts the user

561
00:25:36,506 --> 00:25:39,466
with a modal window, which
means you can't do anything

562
00:25:39,466 --> 00:25:42,316
until you click okay in this
window, and I'm returning false,

563
00:25:42,316 --> 00:25:45,116
moreover, to make sure not
only if I yelling at the user,

564
00:25:45,316 --> 00:25:47,956
I'm short circuiting
the form submission.

565
00:25:48,236 --> 00:25:50,976
Now the rest of these are
somewhat intuitive based

566
00:25:50,976 --> 00:25:52,076
on that explanation.

567
00:25:52,076 --> 00:25:54,246
So even though the syntax
is again a little verbose,

568
00:25:54,536 --> 00:25:57,356
document dot forms dot
registration dot password one,

569
00:25:57,356 --> 00:25:59,286
this was the first of
my password fields,

570
00:25:59,576 --> 00:26:01,556
dot value equals
quote unquote nothing.

571
00:26:01,746 --> 00:26:03,876
I'm going to yell at them
for not providing a password.

572
00:26:03,996 --> 00:26:06,426
But just like most web
sites, if the user screwed

573
00:26:06,426 --> 00:26:08,426
up their password a second time

574
00:26:08,666 --> 00:26:13,176
and I did not type the same
value for password 1 as I did

575
00:26:13,176 --> 00:26:16,166
for password 2, I'm going
to yell at them again,

576
00:26:16,446 --> 00:26:18,016
but slightly differently.

577
00:26:18,106 --> 00:26:19,876
You must provide the
same password twice.

578
00:26:20,266 --> 00:26:22,006
So again, this is
just basic logic now

579
00:26:22,006 --> 00:26:24,306
that we might have used
in C a few weeks back.

580
00:26:24,306 --> 00:26:27,556
But notice the difference,
in PHP if we want

581
00:26:27,656 --> 00:26:31,616
to compare strings we do not
need to jump through the strings

582
00:26:31,736 --> 00:26:33,036
of something like stir comp.

583
00:26:33,406 --> 00:26:35,906
Where recall we had to avoid
this issue of pointers in C

584
00:26:35,906 --> 00:26:38,976
and comparing pointers instead
of strings, very nicely in PHP

585
00:26:38,976 --> 00:26:40,686
and JavaScript and in a lot

586
00:26:40,686 --> 00:26:42,246
of these so-called
higher level languages

587
00:26:42,476 --> 00:26:44,836
when you say equals equals,
then you're comparing strings,

588
00:26:45,126 --> 00:26:47,486
that's going to do a
literal string comparison

589
00:26:47,486 --> 00:26:49,326
in the manner you
would have expected.

590
00:26:49,326 --> 00:26:50,936
And then lastly, notice this.

591
00:26:51,126 --> 00:26:54,726
It's slightly different from a
text field, but I'm saying else

592
00:26:54,726 --> 00:26:55,976
if it's not the case

593
00:26:56,366 --> 00:26:59,366
that document dot forms dot
registration depot agreement,

594
00:26:59,576 --> 00:27:02,656
agreement is the name I gave to
the check box, dot checked --

595
00:27:03,266 --> 00:27:05,426
so if it's not checked
-- that's a check box,

596
00:27:05,426 --> 00:27:08,036
so it actually has a boolean
property called checked,

597
00:27:08,206 --> 00:27:09,326
which is either true or false.

598
00:27:09,326 --> 00:27:12,386
So if it's not checked I'm going
to yell at them for not agreeing

599
00:27:12,386 --> 00:27:14,316
to our terms and
conditions, return false.

600
00:27:14,896 --> 00:27:18,836
Otherwise, if they passed all
of those tests in that gauntlet,

601
00:27:18,836 --> 00:27:21,126
I'm going to go ahead
and say return true.

602
00:27:21,126 --> 00:27:22,236
And what happens then?

603
00:27:22,566 --> 00:27:24,366
The user submits the form okay.

604
00:27:24,366 --> 00:27:24,476
Yeah?

605
00:27:24,476 --> 00:27:24,566
[ Inaudible audience comment ]

606
00:27:24,566 --> 00:27:30,616
>> Do you have to
specify the return type

607
00:27:30,616 --> 00:27:31,496
of a JavaScript function?

608
00:27:31,496 --> 00:27:34,596
No. Just as in PHP,
it's very loosely typed

609
00:27:34,596 --> 00:27:36,946
so you do not specify
the return type.

610
00:27:36,946 --> 00:27:39,206
You literally say function, and
then the name of the function.

611
00:27:39,776 --> 00:27:46,066
You can. So PHP and
JavaScript are messy in that,

612
00:27:46,066 --> 00:27:50,076
as you point out, you could
return true or false or 3 or 5

613
00:27:50,076 --> 00:27:52,116
or quote unquote hello.

614
00:27:52,396 --> 00:27:55,586
You can indeed return different
data types in these languages.

615
00:27:55,866 --> 00:27:59,026
Sometimes that advantageous,
PHP takes great use of this.

616
00:27:59,066 --> 00:28:01,666
But it's also potentially
a bad thing.

617
00:28:01,666 --> 00:28:04,496
Especially when you want
to return a number like 0,

618
00:28:04,496 --> 00:28:06,096
but you might also
want to return false,

619
00:28:06,366 --> 00:28:08,006
you get into interesting
predicaments

620
00:28:08,006 --> 00:28:10,536
if you don't distinguish
those two cases properly.

621
00:28:10,536 --> 00:28:13,026
But for the most part, it
tends to expedite development

622
00:28:13,026 --> 00:28:15,956
and generally be a helpful
thing, even if inelegant.

623
00:28:16,656 --> 00:28:16,756
Yeah?

624
00:28:17,516 --> 00:28:25,166
[ Inaudible audience comment ]

625
00:28:25,666 --> 00:28:26,236
>> Good question.

626
00:28:26,236 --> 00:28:27,046
None what so ever.

627
00:28:27,136 --> 00:28:29,656
So I was just being kind of
anal, trying to keep it clear

628
00:28:29,656 --> 00:28:31,976
to me that only one of these
is really going to matter.

629
00:28:32,286 --> 00:28:35,456
But because we are returning
false immediately we could get

630
00:28:35,456 --> 00:28:37,256
rid of those else if's.

631
00:28:37,736 --> 00:28:38,586
Either way would be fine.

632
00:28:38,726 --> 00:28:38,806
Yeah?

633
00:28:39,726 --> 00:28:42,646
>> When you return false,
does the [Inaudible] typed?

634
00:28:43,016 --> 00:28:43,626
>> Good question.

635
00:28:43,666 --> 00:28:44,256
Thankfully, no.

636
00:28:44,446 --> 00:28:47,446
So the question is when you
return false does the browser

637
00:28:47,446 --> 00:28:48,256
clear the form?

638
00:28:48,256 --> 00:28:50,066
No. It leaves it
exactly as it is.

639
00:28:50,446 --> 00:28:52,506
So this is in contrast
with some behaviors

640
00:28:52,506 --> 00:28:55,066
of web sites whereby
once you submit then get

641
00:28:55,066 --> 00:28:57,096
to the next page, you get
yelled at, you click back,

642
00:28:57,606 --> 00:28:59,846
sometimes then if the
page has not been designed

643
00:28:59,846 --> 00:29:02,146
to be cached you would
lose all of your inputs.

644
00:29:02,146 --> 00:29:04,136
This leaves everything
the way it was.

645
00:29:04,466 --> 00:29:06,006
Just doesn't allow
the form submission.

646
00:29:06,586 --> 00:29:08,546
So you might be thinking now,
all right, this is great, right?

647
00:29:08,546 --> 00:29:09,856
I don't have to jump
through these hoops

648
00:29:09,856 --> 00:29:12,356
like we did last week with
all the from I am examples,

649
00:29:12,576 --> 00:29:15,026
in CS 50 finance I
didn't have to do all

650
00:29:15,026 --> 00:29:17,296
of this error checking
server-side and make sure

651
00:29:17,296 --> 00:29:19,026
that the user didn't
type in negative numbers

652
00:29:19,026 --> 00:29:20,366
or bogus symbols or the like.

653
00:29:20,636 --> 00:29:23,136
So why not just do all of
your checking client-side?

654
00:29:23,396 --> 00:29:26,086
Well, unfortunately, anyone
with an internet connection

655
00:29:26,086 --> 00:29:29,416
and Google can go up to, for
instance, a web page like this,

656
00:29:29,996 --> 00:29:35,486
and let's say -- where is it
-- tools, and tools, edit,

657
00:29:36,416 --> 00:29:38,136
preferences -- oh,
let's do this actually.

658
00:29:38,946 --> 00:29:41,116
Disable JavaScript.

659
00:29:41,466 --> 00:29:42,246
All JavaScript.

660
00:29:42,806 --> 00:29:45,406
So now let's see what
becomes of my error checking.

661
00:29:45,406 --> 00:29:48,396
So this is my form 2,
which before did yell at me

662
00:29:48,396 --> 00:29:49,506
when I didn't submit anything.

663
00:29:49,506 --> 00:29:51,446
I'm going to go ahead and
again not submit anything,

664
00:29:51,446 --> 00:29:54,626
and unfortunately, disabling
JavaScript does exactly that,

665
00:29:54,846 --> 00:29:56,826
it disables JavaScript
all together.

666
00:29:57,156 --> 00:29:58,136
So then what is the point?

667
00:29:58,406 --> 00:30:00,916
Right? If you can do this
error-checking client side and

668
00:30:00,916 --> 00:30:04,006
yet it's so easy for anyone
with a freely-available plug

669
00:30:04,006 --> 00:30:07,036
in to disable your error
checking, what's the value,

670
00:30:07,116 --> 00:30:09,586
arguably, still, of
these techniques?

671
00:30:10,336 --> 00:30:17,186
It kind of feels like a
waste of time now, yeah?

672
00:30:17,186 --> 00:30:18,236
[ Inaudible audience comment ]

673
00:30:18,236 --> 00:30:20,886
>> It is, it's still faster,
and increasingly, right,

674
00:30:20,886 --> 00:30:23,576
we're in this web 2.0
or web 3.0 era, right,

675
00:30:23,576 --> 00:30:26,876
where expectations have risen of
web pages and one of the reasons

676
00:30:26,876 --> 00:30:29,786
that G mail is so
popular and well used even

677
00:30:29,786 --> 00:30:32,066
in a mobile context
in the web browser is

678
00:30:32,066 --> 00:30:34,126
because they created the
context of the illusion

679
00:30:34,206 --> 00:30:35,396
of rapid responsiveness.

680
00:30:35,736 --> 00:30:37,376
Even if you're a super-slow 2 G

681
00:30:37,376 --> 00:30:40,106
or 3 G connection your G mail
interface, if you pull it

682
00:30:40,106 --> 00:30:42,646
up in Gmail.com on a
browser on a phone,

683
00:30:42,856 --> 00:30:44,116
it's actually still
pretty zippy.

684
00:30:44,116 --> 00:30:47,156
You can expose a message, hit
send and go back and forward.

685
00:30:47,286 --> 00:30:48,676
But that's all JavaScript.

686
00:30:48,676 --> 00:30:49,896
What Google's doing
in that case,

687
00:30:49,896 --> 00:30:52,536
if you've used the mobile
client, the mobile web site

688
00:30:52,536 --> 00:30:55,226
for Gmail is they're
hiding all of the latency,

689
00:30:55,226 --> 00:30:56,466
all of the slowness for you

690
00:30:56,466 --> 00:30:59,006
by doing it effectively
in the background.

691
00:30:59,006 --> 00:30:59,946
So with JavaScript we can

692
00:30:59,946 --> 00:31:02,556
at least improve the user's
experience even though this

693
00:31:02,556 --> 00:31:04,856
really now just means
more work for us.

694
00:31:05,176 --> 00:31:05,286
Yeah?

695
00:31:05,286 --> 00:31:05,846
[ Inaudible audience comment ]

696
00:31:05,846 --> 00:31:09,156
>> Good question.

697
00:31:09,156 --> 00:31:12,806
Is there a way to detect if a
user has disabled JavaScript.

698
00:31:12,926 --> 00:31:15,906
Yes, so you could, for
instance, have a piece of code

699
00:31:15,906 --> 00:31:17,916
in your page that is
supposed to, like,

700
00:31:18,046 --> 00:31:19,446
plant a cookie on their browser.

701
00:31:19,616 --> 00:31:22,086
And if the next time the
user visits, next page,

702
00:31:22,086 --> 00:31:25,036
after clicking, you see there's
no cookie, it must be logically

703
00:31:25,036 --> 00:31:26,426
that your code never executed.

704
00:31:26,426 --> 00:31:27,726
Ergo, it's been disabled.

705
00:31:28,036 --> 00:31:29,806
So you can do tricks like that.

706
00:31:30,196 --> 00:31:32,066
But really the lesson here is

707
00:31:32,066 --> 00:31:34,296
that JavaScript is
not an alternative

708
00:31:34,296 --> 00:31:36,336
to server-side error checking.

709
00:31:36,336 --> 00:31:37,656
And server side validation.

710
00:31:37,656 --> 00:31:39,636
And one of the most
common ways for web sites

711
00:31:39,636 --> 00:31:42,376
to be compromised these days is
because developers think, oh,

712
00:31:42,376 --> 00:31:44,416
well, I've got my
JavaScript checks here.

713
00:31:44,416 --> 00:31:46,386
The user can't submit
a field that's more

714
00:31:46,386 --> 00:31:47,686
than 100 characters long,

715
00:31:47,686 --> 00:31:51,556
so I don't need a MySQL column
that's more than 100 chars long,

716
00:31:51,786 --> 00:31:55,336
and yet they don't check for the
same thing server-side, and bad,

717
00:31:55,396 --> 00:31:58,206
unanticipated things can happen.

718
00:32:00,836 --> 00:32:00,946
Yeah?

719
00:32:00,946 --> 00:32:02,176
[ Inaudible audience comment ]

720
00:32:02,176 --> 00:32:03,146
>> That is up to you.

721
00:32:03,146 --> 00:32:05,556
So if you're doing client-side
checks will the server side

722
00:32:05,556 --> 00:32:06,386
checks still execute?

723
00:32:06,386 --> 00:32:07,636
That's entirely up to you.

724
00:32:07,846 --> 00:32:10,946
So if I melded last
week's from I am's example

725
00:32:10,976 --> 00:32:14,606
with this week's registration
forms examples we would have a

726
00:32:14,606 --> 00:32:16,836
much more robust solution
that's very zippy,

727
00:32:16,836 --> 00:32:18,736
I immediately get
yelled at if I screw up.

728
00:32:18,986 --> 00:32:21,266
But also if I somehow
get through

729
00:32:21,466 --> 00:32:24,496
and circumvent these error
checks the PHP code is still

730
00:32:24,496 --> 00:32:25,446
going to yell at me.

731
00:32:25,816 --> 00:32:27,316
So one of the nice
things too that we'll talk

732
00:32:27,316 --> 00:32:30,386
about later this week and beyond
is these various frameworks

733
00:32:30,386 --> 00:32:31,956
and libraries that
I keep alluding to.

734
00:32:31,956 --> 00:32:33,656
And we'll look briefly
perhaps today at one

735
00:32:33,656 --> 00:32:34,466
of the most particular.

736
00:32:34,726 --> 00:32:36,706
So increasingly, are
there tools, frankly,

737
00:32:36,876 --> 00:32:38,296
that eliminate this redundancy,

738
00:32:38,296 --> 00:32:40,996
whereby you the programmer
can write something just once,

739
00:32:40,996 --> 00:32:43,746
server side, and you can
even have JavaScript code

740
00:32:43,746 --> 00:32:45,726
automatically generated for you

741
00:32:45,966 --> 00:32:48,106
that does the client-side
checks as well.

742
00:32:48,106 --> 00:32:49,836
So realize when you
do it by hand, though,

743
00:32:50,126 --> 00:32:52,126
there is this additional layer.

744
00:32:52,676 --> 00:32:56,096
So let's try to take
things up a notch here.

745
00:32:56,376 --> 00:32:57,316
This was version 2.

746
00:32:57,316 --> 00:33:00,686
With version 3, let's go ahead
and just show a different way

747
00:33:00,796 --> 00:33:01,776
of achieving the same task.

748
00:33:01,976 --> 00:33:03,746
So we'll do -- introduce
one other concept.

749
00:33:03,926 --> 00:33:06,196
So this is version 3, and
the only difference here

750
00:33:06,196 --> 00:33:07,576
for the moment is this.

751
00:33:08,066 --> 00:33:11,586
I -- literally, I am now
calling a validate function,

752
00:33:11,766 --> 00:33:14,406
but passing in an argument
that's a special keyword.

753
00:33:14,406 --> 00:33:16,666
Some of you with Java
backgrounds might remember this.

754
00:33:17,276 --> 00:33:19,976
This is a pointer of sorts.

755
00:33:19,976 --> 00:33:22,766
It's technically a
reference, and in this context

756
00:33:22,956 --> 00:33:26,376
because I'm using a keyword
this inside of double quotes,

757
00:33:26,606 --> 00:33:30,026
which map into a form element,

758
00:33:30,256 --> 00:33:33,226
this is like a pointer
to that from element.

759
00:33:33,226 --> 00:33:34,486
What does that mean?

760
00:33:34,486 --> 00:33:36,526
Well, even though at this
moment in time just text,

761
00:33:36,526 --> 00:33:40,996
and it's just HTML, when a
structure like this is built

762
00:33:40,996 --> 00:33:44,126
up in memory and that
line of code executes,

763
00:33:44,126 --> 00:33:47,716
this will be literally pointing
to whatever the form element is.

764
00:33:47,716 --> 00:33:48,996
One of these rectangles.

765
00:33:49,246 --> 00:33:54,256
So via the this keyword you can
pass in a pointer or reference

766
00:33:54,256 --> 00:33:55,866
to a specific node in the tree.

767
00:33:56,146 --> 00:33:58,476
And you can do so via your HTML.

768
00:33:58,476 --> 00:34:01,136
So now if I scroll up here
my code has changed ever

769
00:34:01,136 --> 00:34:01,936
so slightly.

770
00:34:02,146 --> 00:34:03,826
And this way isn't
necessarily better,

771
00:34:04,016 --> 00:34:08,256
but it just demonstrates how
we can pass nodes from our tree

772
00:34:08,256 --> 00:34:09,286
into code that we write.

773
00:34:09,576 --> 00:34:11,666
Now notice this time I
have function validate,

774
00:34:11,666 --> 00:34:15,116
but now it takes a parameter, F.
I am not specifying a data type,

775
00:34:15,116 --> 00:34:16,736
you don't need to do
that, just a name.

776
00:34:16,736 --> 00:34:18,116
And I call it F for form,

777
00:34:18,326 --> 00:34:20,796
and now notice I can have
slightly shorter notation.

778
00:34:20,796 --> 00:34:23,546
If F dot e-mail dot value
equals equals nothing,

779
00:34:23,866 --> 00:34:24,766
yell at the user.

780
00:34:24,766 --> 00:34:25,796
Else if, else if.

781
00:34:26,226 --> 00:34:29,846
So the take away here is that
this is now allowing me one,

782
00:34:29,846 --> 00:34:31,546
to shorten my syntax,
but that's not all

783
00:34:31,546 --> 00:34:32,696
that compelling in this case.

784
00:34:32,966 --> 00:34:36,936
But it is allowing me somehow
to pass these nodes around as

785
00:34:36,936 --> 00:34:39,526
if they're indeed
objects in a tree.

786
00:34:39,526 --> 00:34:40,946
And that will become
more important

787
00:34:40,946 --> 00:34:42,596
as the code gets
more sophisticated.

788
00:34:42,876 --> 00:34:44,606
Well now, we can
do one other thing.

789
00:34:44,606 --> 00:34:47,326
Let me go ahead and open up
with my browser version 4

790
00:34:47,326 --> 00:34:48,196
of the form.

791
00:34:48,596 --> 00:34:50,796
And notice that it
has this feature

792
00:34:50,796 --> 00:34:52,516
that you might have seen
on various web sites.

793
00:34:52,516 --> 00:34:53,976
But now we can see
how to do this.

794
00:34:54,316 --> 00:34:57,186
So notice that no matter
how hard I try, I'm clicking

795
00:34:57,186 --> 00:34:59,536
on my mouse here, I
cannot submit this form.

796
00:34:59,696 --> 00:35:02,586
Because it turns out that
HTML has an attribute

797
00:35:02,736 --> 00:35:04,786
for buttons called disabled.

798
00:35:04,976 --> 00:35:08,646
And you can disable the clicking
of a button, as simple as that.

799
00:35:08,996 --> 00:35:11,376
So now it doesn't matter if the
user doesn't type in anything

800
00:35:11,376 --> 00:35:12,926
or types in something
completely bogus,

801
00:35:12,926 --> 00:35:16,166
if I try submitting nothing's
actually going to happen.

802
00:35:16,436 --> 00:35:17,566
But again, here, right?

803
00:35:17,566 --> 00:35:20,406
We've all -- we all know that
we have tools like Firebug.

804
00:35:20,406 --> 00:35:24,336
If I right-click on this and
I choose open up Firebug,

805
00:35:24,646 --> 00:35:28,566
open up the HTML, long story
short I can open up all

806
00:35:28,566 --> 00:35:32,606
of my HTML here and then I can
actually remove the disabled

807
00:35:32,606 --> 00:35:34,036
property, if I scroll down.

808
00:35:34,036 --> 00:35:34,836
Let's zoom in.

809
00:35:35,386 --> 00:35:36,896
And scroll down here.

810
00:35:36,896 --> 00:35:39,296
So let me just go
ahead and remove this.

811
00:35:39,296 --> 00:35:41,836
All right, so we
did this before,

812
00:35:41,836 --> 00:35:43,176
when we implemented fake Google.

813
00:35:43,176 --> 00:35:44,666
Viola, there goes
your error checking.

814
00:35:44,666 --> 00:35:46,816
Now no reasonably human
is going to do this,

815
00:35:47,006 --> 00:35:48,616
they're only wasting
their own time

816
00:35:48,616 --> 00:35:49,476
if they're going to do this.

817
00:35:49,476 --> 00:35:51,806
But it does again send the
message that you're still going

818
00:35:51,876 --> 00:35:54,436
to have to be having
these checks server side.

819
00:35:54,786 --> 00:35:58,776
So what did we do in the
code to actually do this?

820
00:35:58,776 --> 00:36:01,196
Well, actually, let me go back
and show the proper behavior.

821
00:36:01,196 --> 00:36:05,596
Let me reload this page before I
tweaked it underneath the hood.

822
00:36:05,596 --> 00:36:07,936
Go ahead, reload.

823
00:36:08,156 --> 00:36:09,576
Let's try this again.

824
00:36:10,146 --> 00:36:11,476
Form 4. So there it is.

825
00:36:11,476 --> 00:36:12,406
Disabled by default.

826
00:36:12,406 --> 00:36:17,716
But notice when I check this
box and oh, wait, that's why.

827
00:36:18,756 --> 00:36:19,936
JavaScript is skill disabled.

828
00:36:19,986 --> 00:36:21,306
Most of these demos
won't work then.

829
00:36:21,306 --> 00:36:22,096
All right.

830
00:36:22,186 --> 00:36:23,056
Let's go back here.

831
00:36:23,286 --> 00:36:24,846
Form 4. All right.

832
00:36:24,846 --> 00:36:25,156
Click this.

833
00:36:25,716 --> 00:36:26,316
There we go.

834
00:36:26,566 --> 00:36:30,286
So notice we now have
programatic control over the DOM

835
00:36:30,286 --> 00:36:32,616
of our page so that
I'm probably listening

836
00:36:32,616 --> 00:36:34,266
for that event called on click.

837
00:36:34,506 --> 00:36:37,666
When I hear it, I'm grabbing
a pointer or reference

838
00:36:37,856 --> 00:36:40,126
to that other node in the
tree, the submit button,

839
00:36:40,306 --> 00:36:43,326
and toggling programatically
that disabled state.

840
00:36:43,486 --> 00:36:44,866
So let's go ahead
and see this here.

841
00:36:44,866 --> 00:36:46,436
Let me scroll down to this form.

842
00:36:46,666 --> 00:36:49,306
Notice I again have the
validate function here.

843
00:36:49,506 --> 00:36:50,416
But I have another one.

844
00:36:50,416 --> 00:36:52,926
I have another event
handler here called on click,

845
00:36:53,156 --> 00:36:55,826
where on click equals,
quote unquote, toggle.

846
00:36:56,086 --> 00:36:58,746
And this is otherwise just
associated with this text box.

847
00:36:58,956 --> 00:37:01,306
Let me scroll back up to the top
here and see what's going on.

848
00:37:01,506 --> 00:37:04,126
Well, up here not only do
I have a validate function,

849
00:37:04,396 --> 00:37:07,886
I also have another
second function also inside

850
00:37:07,886 --> 00:37:08,596
of my script tag.

851
00:37:08,596 --> 00:37:09,836
And it's actually pretty simple.

852
00:37:10,026 --> 00:37:12,056
A little verbose, but
intuitive none the less.

853
00:37:12,446 --> 00:37:14,336
Function toggle when
it executes,

854
00:37:14,336 --> 00:37:15,356
it executes this branch.

855
00:37:15,456 --> 00:37:19,196
So if document, dot forms
dot registration dot button.

856
00:37:19,446 --> 00:37:20,246
So what is button?

857
00:37:20,516 --> 00:37:22,526
Let me quickly scroll
down to the bottom again.

858
00:37:22,726 --> 00:37:24,846
And now notice I've been
giving these things names

859
00:37:24,846 --> 00:37:26,326
as I want to refer to them.

860
00:37:26,636 --> 00:37:28,386
So let me scroll
down, down, down.

861
00:37:28,856 --> 00:37:29,546
There it is.

862
00:37:29,706 --> 00:37:31,996
I literally gave
this input element

863
00:37:31,996 --> 00:37:33,976
for the button a name of button.

864
00:37:34,066 --> 00:37:35,226
But I could have
called it anything.

865
00:37:35,606 --> 00:37:38,706
So now if I scroll back
up to toggle I now have

866
00:37:38,806 --> 00:37:42,966
if the buttons disabled
boolean property is true,

867
00:37:42,966 --> 00:37:45,176
because that's all in
one big parenthesis --

868
00:37:45,176 --> 00:37:48,076
set of parentheses, then go
ahead anisette the same thing.

869
00:37:48,076 --> 00:37:50,406
Document dot forms dot
registration dot button dot

870
00:37:50,406 --> 00:37:53,166
disabled to false,
else set it to true.

871
00:37:53,406 --> 00:37:56,816
And simply by tweaking
these properties inside

872
00:37:56,816 --> 00:37:59,676
of these objects on the page I'm
able to change the aesthetics

873
00:37:59,676 --> 00:38:02,176
of the page and also
the functionality.

874
00:38:02,426 --> 00:38:04,456
So again, we have now
programatic control

875
00:38:04,456 --> 00:38:06,696
of the DOM based on
these event handlers

876
00:38:06,696 --> 00:38:07,886
that I'm now listening for.

877
00:38:07,886 --> 00:38:09,516
So let's look at now version 5.

878
00:38:09,516 --> 00:38:10,806
Version 5 is kind of sexy,

879
00:38:10,806 --> 00:38:13,856
because I'm finally not just
checking if the user has typed

880
00:38:13,856 --> 00:38:17,346
in an -- times in something
for their e-mail address.

881
00:38:17,616 --> 00:38:20,426
I'm now using a feature
called regular expressions.

882
00:38:20,426 --> 00:38:22,316
And some of you might have
stumbled across these already

883
00:38:22,316 --> 00:38:24,276
for P set 7, although
it wasn't expected.

884
00:38:24,576 --> 00:38:27,466
But for your final project you
might indeed want to be able

885
00:38:27,696 --> 00:38:29,516
to not only look
at a user's input

886
00:38:29,776 --> 00:38:32,046
but also check does
this match a pattern

887
00:38:32,046 --> 00:38:33,656
that I want to see, right?

888
00:38:33,656 --> 00:38:36,086
Back in the day, in Facebook,
would restrict access

889
00:38:36,086 --> 00:38:39,206
to people only with a
Harvard.edu e-mail address.

890
00:38:39,456 --> 00:38:41,426
So this suggests that you
want to be able to look

891
00:38:41,426 --> 00:38:44,006
at a user error's input and not
just check if it's quote unquote

892
00:38:44,006 --> 00:38:45,816
or something else,
but you actually want

893
00:38:45,816 --> 00:38:47,066
to analyze its pattern.

894
00:38:47,226 --> 00:38:51,016
Well, you can actually do this
relatively easily in JavaScript

895
00:38:51,016 --> 00:38:53,696
and in PHP, and in
JavaScript the syntax is this.

896
00:38:54,316 --> 00:38:55,756
So notice this expression now.

897
00:38:55,786 --> 00:38:56,896
If it is not the case

898
00:38:57,306 --> 00:39:00,076
that document dot forms dot
registration dot e-mails dot

899
00:39:00,076 --> 00:39:04,006
value, so here's another
new lesson, whereas in C,

900
00:39:04,246 --> 00:39:07,916
once you have a variable like
a string, that is a data type.

901
00:39:08,226 --> 00:39:10,456
You can only look at
its chars and the like.

902
00:39:10,486 --> 00:39:12,076
But there's no functionality
built in.

903
00:39:12,386 --> 00:39:15,896
Notice here that e-mail
is the name I gave

904
00:39:16,106 --> 00:39:17,696
to my input called e-mail.

905
00:39:18,176 --> 00:39:20,166
But I apparently am
going one step further,

906
00:39:20,166 --> 00:39:21,786
and I actually am
calling a function,

907
00:39:21,966 --> 00:39:25,096
dot match means go
inside of this DOM node,

908
00:39:25,096 --> 00:39:28,436
inside of that rectangle, and
call the function called match.

909
00:39:28,666 --> 00:39:30,866
So this is an example of
this thing called object

910
00:39:30,866 --> 00:39:31,876
oriented programming.

911
00:39:31,876 --> 00:39:33,546
Again, Java has this,
C does not.

912
00:39:33,546 --> 00:39:36,516
PHP does, but it's not
always used by folks.

913
00:39:36,736 --> 00:39:40,916
So this just means match the
value of whatever the user typed

914
00:39:40,916 --> 00:39:42,566
in against this expression.

915
00:39:42,566 --> 00:39:45,316
And frankly, this looks more
cryptic than it really needs to.

916
00:39:45,576 --> 00:39:48,246
But the slash there and the
slash there just means here

917
00:39:48,246 --> 00:39:50,506
comes a reg ex, a
regular expression.

918
00:39:50,826 --> 00:39:52,286
And what is that expression?

919
00:39:52,286 --> 00:39:53,896
Regular expression
is just pattern.

920
00:39:54,276 --> 00:39:57,486
The pattern here is dot, and
dot generally denotes anything,

921
00:39:57,486 --> 00:40:01,146
some character, plus
denotes -- anyone know?

922
00:40:03,006 --> 00:40:03,946
At least one.

923
00:40:03,946 --> 00:40:05,506
So plus means one or more.

924
00:40:05,506 --> 00:40:08,756
So this expression dot
plus means some character,

925
00:40:08,756 --> 00:40:10,656
whatever character,
one or more times.

926
00:40:10,656 --> 00:40:12,136
And it doesn't have to
be the same character.

927
00:40:12,136 --> 00:40:14,876
It just has to be a
character, a one or more times.

928
00:40:15,106 --> 00:40:17,596
At sign means the at sign.

929
00:40:17,596 --> 00:40:20,076
Then we have dot plus, which
is the same thing again.

930
00:40:20,076 --> 00:40:21,726
It doesn't have to be
identical to the characters,

931
00:40:21,726 --> 00:40:23,336
but it means one or
more characters here.

932
00:40:23,696 --> 00:40:26,506
Back slash dot means
probably what?

933
00:40:26,506 --> 00:40:27,806
Literally a dot, right?

934
00:40:27,806 --> 00:40:29,866
We have a little problem now,
dot means something special.

935
00:40:29,866 --> 00:40:32,376
But we want a dot, we need
to escape it as we did in C

936
00:40:32,376 --> 00:40:33,926
with new lines and
things like that.

937
00:40:34,346 --> 00:40:38,886
E D U means E D U. And then
dollar sign is a special token

938
00:40:39,056 --> 00:40:41,136
that just means match
all the way to the end.

939
00:40:41,136 --> 00:40:41,986
Frankly, there's no --

940
00:40:41,986 --> 00:40:44,356
I've never come up with a good
intuitive explanation of this.

941
00:40:44,746 --> 00:40:48,156
But dollar sign means that
dot edu has to be at the end

942
00:40:48,296 --> 00:40:50,036
of the string that
you're matching.

943
00:40:50,036 --> 00:40:51,636
And the opposite
of that for those

944
00:40:51,636 --> 00:40:55,146
who are curious is a carrot
symbol, of all things.

945
00:40:55,176 --> 00:40:56,126
They're not really opposites.

946
00:40:56,526 --> 00:40:58,566
But for now, all I'm
asking the question,

947
00:40:58,566 --> 00:41:02,436
just like Facebook version
1.0, was did the user register

948
00:41:02,646 --> 00:41:06,926
with some address ending
in at something.edu.

949
00:41:06,926 --> 00:41:08,376
So not even Harvard,
in this case.

950
00:41:08,526 --> 00:41:10,006
Now of course this
is not perfect,

951
00:41:10,006 --> 00:41:13,326
because this would allow
the user to do crazy things

952
00:41:13,326 --> 00:41:17,736
like my name is Malon at
mather at Harvard at -- right?

953
00:41:17,736 --> 00:41:20,696
You could do some crazy things,
so long as it ultimately ends

954
00:41:20,786 --> 00:41:25,206
in dot E D U, but there are more
rigorous regular expressions you

955
00:41:25,206 --> 00:41:27,796
can use, and frankly, these
strings, the patterns get

956
00:41:27,796 --> 00:41:30,726
so long and complex, generally
you would then start using

957
00:41:30,726 --> 00:41:31,366
a library.

958
00:41:31,366 --> 00:41:34,036
Someone else's code who has
figured out all of the nuances

959
00:41:34,036 --> 00:41:38,166
of possible e-mail addresses
in order to validate them.

960
00:41:38,336 --> 00:41:39,686
But you might find, especially

961
00:41:39,686 --> 00:41:40,996
if you're using your
college address --

962
00:41:40,996 --> 00:41:44,056
has anyone ever gone to a web
site, tried to register with,

963
00:41:44,056 --> 00:41:48,876
like, user name at college dot
Harvard.edu only to be told

964
00:41:48,876 --> 00:41:50,726
that this is an invalid
e-mail address?

965
00:41:51,956 --> 00:41:53,586
Anyone? This happens
to me once in a while.

966
00:41:53,586 --> 00:41:54,476
So why is this?

967
00:41:54,476 --> 00:41:57,456
Because some programmer decided
that every e-mail address

968
00:41:57,456 --> 00:41:59,206
on the planet is
in the something

969
00:41:59,206 --> 00:42:01,526
at something dot something.

970
00:42:01,526 --> 00:42:03,386
They didn't even think
about sub domains,

971
00:42:03,386 --> 00:42:05,096
which are quite common
here at Harvard, at post,

972
00:42:05,096 --> 00:42:06,406
at college, FAS and the like.

973
00:42:06,796 --> 00:42:08,466
So there's nothing more
infuriating than not --

974
00:42:08,576 --> 00:42:12,926
well, if you're really up tight,
like me, than trying to register

975
00:42:12,926 --> 00:42:14,066
with a legit e-mail address

976
00:42:14,066 --> 00:42:16,196
and the programmer just
hasn't anticipated it.

977
00:42:16,196 --> 00:42:18,096
But why, what explains
that issue?

978
00:42:18,486 --> 00:42:21,386
Most likely it's a
client-side JavaScript check

979
00:42:21,386 --> 00:42:23,016
or server-side JavaScript check

980
00:42:23,286 --> 00:42:26,316
that is using a bad
regular expression.

981
00:42:26,316 --> 00:42:29,126
But at least now we can check if
they actually gave us something

982
00:42:29,126 --> 00:42:31,606
that looks like a
.edu e-mail address.

983
00:42:31,606 --> 00:42:32,696
But we can even do better.

984
00:42:33,036 --> 00:42:35,676
So in version 6 of
this, now, I just wanted

985
00:42:35,676 --> 00:42:38,116
to introduce a little library,
something called J query.

986
00:42:38,116 --> 00:42:40,876
So J query is often
conflagranted for JavaScript.

987
00:42:40,876 --> 00:42:43,556
This is a third party library,
so freely available code

988
00:42:43,556 --> 00:42:45,596
that other nice people
have put together that's

989
00:42:45,596 --> 00:42:46,606
incredibly common.

990
00:42:46,606 --> 00:42:49,456
So such so that these
days almost anyone

991
00:42:49,456 --> 00:42:51,996
who uses JavaScript
uses J query,

992
00:42:52,196 --> 00:42:53,796
because it simplifies the kinds

993
00:42:53,796 --> 00:42:55,166
of things we were
just doing, right?

994
00:42:55,166 --> 00:42:56,666
Even I was getting
board verbally

995
00:42:56,666 --> 00:42:58,766
of saying document dot
forms dot registration --

996
00:42:58,926 --> 00:42:59,796
this is very tedious.

997
00:42:59,796 --> 00:43:02,476
And it's not fun programming
as you might already know,

998
00:43:02,786 --> 00:43:04,906
when you're just typing
stupid stuff all the time.

999
00:43:05,156 --> 00:43:08,326
So J query really tries
to simplify the syntax

1000
00:43:08,326 --> 00:43:09,366
and make it more concise.

1001
00:43:09,906 --> 00:43:11,596
So how can we use J query?

1002
00:43:11,846 --> 00:43:13,986
Well, notice this form
of the script tag.

1003
00:43:13,986 --> 00:43:19,146
So this is version 6 of our
forms today, PDFs and code are

1004
00:43:19,146 --> 00:43:20,386
on line if you want
to play along.

1005
00:43:20,786 --> 00:43:23,846
But in the head this time notice
that I have another script.

1006
00:43:24,016 --> 00:43:25,886
This time it's not
immediately closed.

1007
00:43:25,886 --> 00:43:27,806
Instead it has a
source attribute.

1008
00:43:28,086 --> 00:43:30,176
And that source attribute
is to this URL,

1009
00:43:30,516 --> 00:43:32,806
J query latest at some URL.

1010
00:43:32,806 --> 00:43:34,446
Let me go into my browser

1011
00:43:34,446 --> 00:43:37,206
and let me open a new
tab and paste that in.

1012
00:43:37,596 --> 00:43:39,256
So this is J query.

1013
00:43:39,346 --> 00:43:40,776
And some of you might
be using it

1014
00:43:40,776 --> 00:43:41,976
but might not have ever looked.

1015
00:43:42,106 --> 00:43:45,086
This is just a whole lot of
JavaScript code that again,

1016
00:43:45,086 --> 00:43:48,356
some really nice, smart people
wrote, maybe freely available

1017
00:43:48,596 --> 00:43:51,676
so that all of us can benefit --
it's a lot of code they wrote --

1018
00:43:52,016 --> 00:43:55,866
from the -- really a lot
of code they wrote --

1019
00:43:56,916 --> 00:43:58,466
never actually done this.

1020
00:43:58,636 --> 00:43:59,606
There's a big library.

1021
00:44:00,156 --> 00:44:00,786
Oh my God.

1022
00:44:00,946 --> 00:44:03,216
All right, so not
the point though.

1023
00:44:03,466 --> 00:44:05,356
The point, though,
is that there's --

1024
00:44:05,676 --> 00:44:08,486
woo, a lot of functionality
built into J query,

1025
00:44:08,486 --> 00:44:11,136
and you can start to do really
fancy, really sexy things

1026
00:44:11,346 --> 00:44:13,846
without having to reinvent
the wheel yourself.

1027
00:44:13,896 --> 00:44:16,106
Right? You know from
Facebook and from Gmail

1028
00:44:16,106 --> 00:44:17,416
and all these popular web sites

1029
00:44:17,616 --> 00:44:19,336
that there's very popular
paradigms right now,

1030
00:44:19,336 --> 00:44:22,646
little buttons that glow
or have gray scale effects,

1031
00:44:22,856 --> 00:44:25,926
drop down menus that don't
look like the 1990's drop

1032
00:44:25,926 --> 00:44:29,706
down menus any more, little auto
complete widgets that show you

1033
00:44:29,706 --> 00:44:31,976
who your friends might be when
you're typing in the search box.

1034
00:44:31,976 --> 00:44:34,816
All of these features that are
entirely written in JavaScript,

1035
00:44:34,946 --> 00:44:37,296
but if they're this common it's
really nice to be able to stand

1036
00:44:37,296 --> 00:44:39,756
on the shoulders of other
people, use their widgets

1037
00:44:39,756 --> 00:44:42,756
or their libraries,
much like J query here.

1038
00:44:42,996 --> 00:44:45,426
So just a quick example
of how J query works here.

1039
00:44:45,426 --> 00:44:48,426
Let me zoom in on my HTML,
and we'll see that things

1040
00:44:48,426 --> 00:44:52,166
like J query and more generally
JavaScript let us do --

1041
00:44:52,166 --> 00:44:53,216
write better code.

1042
00:44:53,446 --> 00:44:57,336
Now I have here in my HTML
no mention of JavaScript.

1043
00:44:57,516 --> 00:44:58,876
Frankly, it's a little messy

1044
00:44:58,876 --> 00:45:01,886
that we're already co-mingling
sometimes CSS with HTML,

1045
00:45:02,076 --> 00:45:03,676
which is a different
language inside

1046
00:45:03,676 --> 00:45:05,576
of double quotes and
style attributes.

1047
00:45:05,836 --> 00:45:08,846
Now we had introduced a moment
ago all of these function calls

1048
00:45:08,846 --> 00:45:11,596
like validate and toggle
inside of our HTML.

1049
00:45:11,596 --> 00:45:13,986
And this really kind of
violates good design principles,

1050
00:45:13,986 --> 00:45:16,746
which generally say
keep your data separate

1051
00:45:16,926 --> 00:45:19,466
from your presentation thereof.

1052
00:45:19,466 --> 00:45:21,746
Keep your aesthetics
separate from your logic.

1053
00:45:22,126 --> 00:45:24,636
In other words, do all
of the interesting coding

1054
00:45:24,636 --> 00:45:26,596
and the computer
science-like stuff in one file

1055
00:45:26,826 --> 00:45:30,956
and relegate things like
aesthetics of HTML and CSS

1056
00:45:30,956 --> 00:45:32,676
to separate files all together.

1057
00:45:32,676 --> 00:45:34,036
And that's kind of
what we've done here,

1058
00:45:34,036 --> 00:45:37,926
inside of this HTML form
now is no code, is no logic,

1059
00:45:37,926 --> 00:45:41,196
but if I scroll up here let's
see how I'm none the less

1060
00:45:41,396 --> 00:45:42,806
validating user's input.

1061
00:45:43,066 --> 00:45:46,376
So it's very important that
I'm loading the J query library

1062
00:45:46,546 --> 00:45:50,636
first before my own script
tag because that library has

1063
00:45:50,636 --> 00:45:53,126
to load before my
own code executes.

1064
00:45:53,126 --> 00:45:57,706
So there is -- it is the case in
web pages that URL's are loaded

1065
00:45:57,706 --> 00:45:59,156
in the order in which
they appear.

1066
00:45:59,286 --> 00:46:01,046
And so in this case
here for the script tag,

1067
00:46:01,046 --> 00:46:03,986
this means J query will
be available to me.

1068
00:46:04,386 --> 00:46:06,026
All right, so what am
I going to do here?

1069
00:46:06,206 --> 00:46:07,796
Well, this is going to
look a little cryptic,

1070
00:46:07,796 --> 00:46:09,546
since we already introduced
one language today.

1071
00:46:09,546 --> 00:46:13,416
This is JavaScript, but
it is now using a library,

1072
00:46:13,686 --> 00:46:15,526
and this is the very
common paradigm.

1073
00:46:15,576 --> 00:46:18,116
So rather than say
literally document,

1074
00:46:18,306 --> 00:46:20,646
we have to pay a slight
penalty syntactically.

1075
00:46:20,926 --> 00:46:24,226
Dollar sign, open parenthesis
document, close parentheses,

1076
00:46:24,556 --> 00:46:27,596
is essentially identical to
just the keyword document

1077
00:46:27,706 --> 00:46:28,346
from before.

1078
00:46:28,396 --> 00:46:30,136
But there's going to be
some fancier features

1079
00:46:30,136 --> 00:46:31,086
that we get as a result.

1080
00:46:31,506 --> 00:46:32,456
But now I'm saying this.

1081
00:46:32,936 --> 00:46:33,616
Dot ready.

1082
00:46:34,066 --> 00:46:38,016
So ready is a special function
that comes with J query

1083
00:46:38,526 --> 00:46:41,396
that says once the
whole DOM has loaded

1084
00:46:41,396 --> 00:46:43,266
into memory, do the following.

1085
00:46:43,576 --> 00:46:47,236
And this is important, just as
URL's are loaded top to bottom,

1086
00:46:47,456 --> 00:46:51,486
so are your nodes in this
tree, loaded top to bottom.

1087
00:46:51,686 --> 00:46:54,836
So it's actually problematic
if you start writing code

1088
00:46:55,026 --> 00:46:57,466
that tries to check boxes
or validate form fields

1089
00:46:57,466 --> 00:47:00,896
or does anything interesting
to a DOM, if only the first two

1090
00:47:00,896 --> 00:47:02,326
or three nodes have been loaded.

1091
00:47:02,546 --> 00:47:05,506
So really, you generally want
your JavaScript code only

1092
00:47:05,506 --> 00:47:07,926
to execute once the whole
web page has loaded.

1093
00:47:07,926 --> 00:47:10,366
And that could take a split
second, to take a few seconds

1094
00:47:10,366 --> 00:47:12,246
if there's lots of
Flash files and video

1095
00:47:12,586 --> 00:47:13,546
and sounds and the like.

1096
00:47:13,816 --> 00:47:17,126
But ultimately, we want to wait
till that has at least happened.

1097
00:47:17,706 --> 00:47:19,716
Well, now, what this
is saying is

1098
00:47:19,916 --> 00:47:22,746
when the whole DOM
is ready do this.

1099
00:47:23,366 --> 00:47:25,966
Now, unfortunately,
to do this we need

1100
00:47:26,046 --> 00:47:27,936
to create a function on the fly.

1101
00:47:27,936 --> 00:47:30,366
And this will only scratch the
surface of this feature today,

1102
00:47:30,606 --> 00:47:33,946
but what's really nice about
JavaScript, and you can do this

1103
00:47:33,946 --> 00:47:36,646
in PHP but it's a little
nasty, the syntax for it,

1104
00:47:36,646 --> 00:47:39,956
function open parenthesis
close parenthesis gives you

1105
00:47:39,956 --> 00:47:40,496
a function.

1106
00:47:40,806 --> 00:47:42,216
But it doesn't give it a name.

1107
00:47:42,586 --> 00:47:45,116
And in fact, when I do
function open parenthesis close

1108
00:47:45,116 --> 00:47:48,346
parenthesis curly brace, what
I'm essentially doing in all

1109
00:47:48,346 --> 00:47:51,106
of the lines that follow
per the indentation here,

1110
00:47:51,106 --> 00:47:52,876
that implies they're all
part of this function,

1111
00:47:53,066 --> 00:47:56,966
is I'm declaring what's called
a lambda function, L-A-M-B-D-A.

1112
00:47:56,966 --> 00:47:58,406
Or an anonymous function.

1113
00:47:58,446 --> 00:48:00,676
And the latter name is a
little more straight forward.

1114
00:48:00,776 --> 00:48:02,276
It just means a function
without a name.

1115
00:48:02,456 --> 00:48:04,796
Because I don't care what
this function's called

1116
00:48:04,796 --> 00:48:05,776
at this point in the story.

1117
00:48:05,986 --> 00:48:08,766
I just want a whole
chunk of code to execute

1118
00:48:08,946 --> 00:48:10,576
when the DOM is ready.

1119
00:48:10,806 --> 00:48:13,546
So by creating this anonymous
function I am handing

1120
00:48:13,546 --> 00:48:17,076
to the ready function an
argument that is only going

1121
00:48:17,076 --> 00:48:20,166
to be executed when the
DOM is ready to do so.

1122
00:48:20,346 --> 00:48:23,156
If I didn't wrap it in this
function just like in C and PHP,

1123
00:48:23,156 --> 00:48:24,376
if I just start writing lines

1124
00:48:24,376 --> 00:48:26,696
of code they would be all
be executed right away

1125
00:48:26,696 --> 00:48:28,206
and that's bad, potentially.

1126
00:48:28,206 --> 00:48:30,516
Again, I want my whole
DOM loaded into memory.

1127
00:48:30,856 --> 00:48:32,596
So for now, even if
that's a little unclear,

1128
00:48:33,226 --> 00:48:36,166
just take on faith this
means when the DOM is ready,

1129
00:48:36,166 --> 00:48:38,736
go ahead and call this code.

1130
00:48:38,736 --> 00:48:40,376
That doesn't need a name,

1131
00:48:40,376 --> 00:48:41,686
because I'm only
going to call it once.

1132
00:48:41,686 --> 00:48:42,846
I don't need to call
it again and again.

1133
00:48:43,386 --> 00:48:44,596
So now notice this line.

1134
00:48:44,826 --> 00:48:49,776
Dollar sign parentheses, quote
unquote, sharp registration.

1135
00:48:50,036 --> 00:48:52,976
So recall from CSS that
you can give unique ID's

1136
00:48:52,976 --> 00:48:55,696
to various elements
in an HTML page.

1137
00:48:55,696 --> 00:48:57,666
And if I scroll down
to my form here,

1138
00:48:58,006 --> 00:49:02,056
notice that I have
a registration form,

1139
00:49:02,446 --> 00:49:04,786
and I didn't give it a name
this time, I gave it an ID.

1140
00:49:04,836 --> 00:49:06,926
And this again is a
very common paradigm

1141
00:49:06,926 --> 00:49:08,096
in JavaScript and in CSS.

1142
00:49:08,296 --> 00:49:11,496
If you want to be able to hone
in directly on a specific node

1143
00:49:11,496 --> 00:49:13,696
in the tree you might
as well give it an ID

1144
00:49:13,696 --> 00:49:15,626
which by nature is
supposed to be unique.

1145
00:49:15,626 --> 00:49:17,116
These are unique identifiers.

1146
00:49:17,116 --> 00:49:18,306
And I can call it
anything I want,

1147
00:49:18,566 --> 00:49:19,736
but I called it registration

1148
00:49:19,736 --> 00:49:21,116
because this is a
registration form.

1149
00:49:21,386 --> 00:49:24,226
Now if I scroll back up in my
code, let's see what I'm doing.

1150
00:49:24,786 --> 00:49:29,986
Rather than have HTML and say,
an attribute of on submit,

1151
00:49:30,326 --> 00:49:31,896
I'm now doing this
programatically.

1152
00:49:32,016 --> 00:49:33,876
So this again suggests
better design.

1153
00:49:33,876 --> 00:49:35,936
It's more complex at
first, but better design.

1154
00:49:36,216 --> 00:49:38,126
So this means in J query,

1155
00:49:38,436 --> 00:49:42,436
go get the DOM node
whose ID is registration.

1156
00:49:42,546 --> 00:49:45,696
And the fact that I used the
little hash symbol means go find

1157
00:49:45,696 --> 00:49:47,176
the ID matching registration.

1158
00:49:47,456 --> 00:49:50,106
And then dot submit is a
special J query function

1159
00:49:50,276 --> 00:49:53,576
that simply says when that
element is submitted call

1160
00:49:53,576 --> 00:49:54,146
this function.

1161
00:49:54,436 --> 00:49:55,296
And again, I don't care

1162
00:49:55,296 --> 00:49:57,326
about the function's
name, it can be anonymous.

1163
00:49:57,806 --> 00:50:00,936
And so I just say execute
all of this code here.

1164
00:50:01,146 --> 00:50:03,286
Now I could go back
into a previous example

1165
00:50:03,286 --> 00:50:04,856
and just copy paste the
if else, if else, if else,

1166
00:50:04,856 --> 00:50:05,976
if else from before,
and it would work,

1167
00:50:06,376 --> 00:50:08,526
but I can do a little
better now.

1168
00:50:08,886 --> 00:50:12,416
I can shorten that syntax and
do it a little more elegantly,

1169
00:50:12,586 --> 00:50:13,886
even though, again,
it's going to be --

1170
00:50:13,996 --> 00:50:16,406
elegant is in the eye of
the beholder, perhaps.

1171
00:50:16,926 --> 00:50:19,386
I'm going to first check
if it is not the case

1172
00:50:19,916 --> 00:50:23,936
that the e-mail nodes value,
so this is a J query function,

1173
00:50:23,936 --> 00:50:25,166
get the value of this node.

1174
00:50:25,366 --> 00:50:27,376
So again, sometimes this
feels a little stupid,

1175
00:50:27,376 --> 00:50:29,116
we previously would have
just said dot value,

1176
00:50:29,416 --> 00:50:30,456
now we're saying val?

1177
00:50:30,736 --> 00:50:32,516
But so be it for
now, you'll trust us

1178
00:50:32,516 --> 00:50:34,406
that more interesting
things will come from this,

1179
00:50:34,626 --> 00:50:37,876
if it matches this regular
expression, well, yell at them.

1180
00:50:37,876 --> 00:50:39,436
If it does not match
that regular expression,

1181
00:50:39,436 --> 00:50:40,606
yell at them, because they have

1182
00:50:40,606 --> 00:50:42,136
to provide a dot
edu email address.

1183
00:50:42,366 --> 00:50:43,646
Similarly, if the value

1184
00:50:43,646 --> 00:50:46,266
of password one is quote
unquote, yell at them.

1185
00:50:46,266 --> 00:50:47,916
Else if they're not
equal, yell at them.

1186
00:50:48,116 --> 00:50:48,816
And the like.

1187
00:50:49,026 --> 00:50:51,466
And the take away here, even
though this is a lot of syntax,

1188
00:50:51,466 --> 00:50:55,156
is that now all of this
code has been decoupled

1189
00:50:55,216 --> 00:50:56,686
from the actual HTML.

1190
00:50:57,046 --> 00:50:59,816
So just as the J query
folks factored out all

1191
00:50:59,816 --> 00:51:01,626
of their huge source code

1192
00:51:01,796 --> 00:51:04,556
into a separate file called
J query latest dot JS,

1193
00:51:05,026 --> 00:51:06,016
so could I do that.

1194
00:51:06,016 --> 00:51:07,486
I could highlight all
of this, as I've done.

1195
00:51:07,566 --> 00:51:09,416
Click command X to cut it,

1196
00:51:09,696 --> 00:51:11,986
paste it into a new file
called lecture dot JS,

1197
00:51:11,986 --> 00:51:15,626
and include lecture dot
JS with another script tag

1198
00:51:15,626 --> 00:51:17,796
with a source attribute
like this in order

1199
00:51:17,796 --> 00:51:20,456
to actually factor
out my code entirely.

1200
00:51:20,696 --> 00:51:22,656
And so indeed, when
you go to web sites,

1201
00:51:22,656 --> 00:51:25,286
and we can see this
here, like Facebook.com,

1202
00:51:25,716 --> 00:51:29,506
and we open up something like
Firebug and click this time

1203
00:51:29,506 --> 00:51:31,516
on its script tag,
and you'll have

1204
00:51:31,546 --> 00:51:35,696
to generally enable these things
by default, you'll see all sorts

1205
00:51:35,696 --> 00:51:39,286
of scripts that have been
downloaded in the page.

1206
00:51:40,246 --> 00:51:42,326
And I'll just glimpse
just a couple of here,

1207
00:51:42,566 --> 00:51:44,986
all throughout modern web
sites, you'll see either

1208
00:51:44,986 --> 00:51:48,396
in the page itself or an
included pages script tags.

1209
00:51:48,396 --> 00:51:50,746
And then link tags for
CSS files and the like.

1210
00:51:50,986 --> 00:51:52,806
And that's because
much of the JavaScript

1211
00:51:52,806 --> 00:51:56,006
that drives Facebook is
in these external files,

1212
00:51:56,046 --> 00:51:58,216
that are either downloaded when
you first visit the web site

1213
00:51:58,506 --> 00:52:03,706
or over time as you try to click
on other features of the site.

1214
00:52:03,706 --> 00:52:06,806
Well, let's look at just one
seventh and final example here.

1215
00:52:06,806 --> 00:52:08,156
This is code that
I did not write,

1216
00:52:08,156 --> 00:52:10,176
this is from J query's
own tutorial.

1217
00:52:10,446 --> 00:52:12,816
It's written in a slightly
different version of HTML.

1218
00:52:13,386 --> 00:52:16,796
This here is called
H -- this is HTML 4.

1219
00:52:16,796 --> 00:52:18,206
So it's a slightly
older version,

1220
00:52:18,526 --> 00:52:19,576
and it's been cleaned up.

1221
00:52:19,576 --> 00:52:21,366
You used to have to write
crazy things like this.

1222
00:52:21,456 --> 00:52:23,156
Not so in HTML 5 any more.

1223
00:52:23,366 --> 00:52:24,736
This isn't the best
style, frankly.

1224
00:52:24,736 --> 00:52:26,206
This code is kind of
all over the place.

1225
00:52:26,456 --> 00:52:28,306
But let's see what
it actually does.

1226
00:52:28,306 --> 00:52:30,976
Let me pull up version
7 of this.

1227
00:52:31,656 --> 00:52:34,676
And we'll see here that
this too is using J query,

1228
00:52:34,826 --> 00:52:36,916
but much better, much
more compellingly

1229
00:52:36,916 --> 00:52:39,546
than my own limited web
skills, you now see here

1230
00:52:39,546 --> 00:52:41,676
in this HTML form
one, a visual clue

1231
00:52:41,836 --> 00:52:43,536
that these fields are
required, apparently,

1232
00:52:43,536 --> 00:52:44,786
based on the stars there.

1233
00:52:45,036 --> 00:52:46,956
But you'll notice too,
that if I click submit,

1234
00:52:47,276 --> 00:52:50,756
notice what immediately
happens is -- nothing.

1235
00:52:51,516 --> 00:52:55,946
Nothing. David -- all right.

1236
00:52:56,496 --> 00:53:03,226
Stand by. What a
perfect note to end on.

1237
00:53:03,226 --> 00:53:05,266
One -- ah ha.

1238
00:53:05,456 --> 00:53:07,816
J Harvard forms.

1239
00:53:08,656 --> 00:53:10,196
Form 7. Okay.

1240
00:53:11,436 --> 00:53:14,896
Well now I look like
an idiot in front

1241
00:53:14,896 --> 00:53:15,816
of our special guest today.

1242
00:53:16,346 --> 00:53:23,486
All right, so what would
have happened, and stand by,

1243
00:53:23,486 --> 00:53:24,366
can I recover from this?

1244
00:53:25,896 --> 00:53:28,056
That is correct, J query latest.

1245
00:53:28,056 --> 00:53:31,446
Oh, I'm just going
to have to pretend.

1246
00:53:31,446 --> 00:53:34,986
Okay, so what you would have
seen is immediately upon hitting

1247
00:53:34,986 --> 00:53:36,706
submit, you would see unlike --

1248
00:53:36,706 --> 00:53:39,246
as is the case on a lot of web
sites you would see red text

1249
00:53:39,576 --> 00:53:41,766
to the right of these form
fields yelling at you,

1250
00:53:41,766 --> 00:53:44,956
not in the form of this sort
of annoying little pop up menu,

1251
00:53:44,956 --> 00:53:46,046
the thing called an alert menu.

1252
00:53:46,046 --> 00:53:48,516
But rather you would see
it in line in the text.

1253
00:53:48,516 --> 00:53:51,386
And that too is using JavaScript
to actually manipulate the DOM.

1254
00:53:51,646 --> 00:53:53,206
Let me see if I can
simulate this by going

1255
00:53:53,206 --> 00:53:54,646
to the actual Facebook.com.

1256
00:53:55,016 --> 00:53:56,296
Let me click sign up here.

1257
00:53:56,546 --> 00:53:59,536
Ah ha. So this too
is now JavaScript.

1258
00:53:59,766 --> 00:54:00,576
Oh, nice save.

1259
00:54:01,176 --> 00:54:03,496
So you must fill in
all of the fields.

1260
00:54:03,496 --> 00:54:05,976
So Facebook got this right,
even though I did not.

1261
00:54:06,516 --> 00:54:07,976
so with that said,
let's go ahead

1262
00:54:07,976 --> 00:54:09,026
and take a two minute break.

1263
00:54:09,026 --> 00:54:12,086
And in just a moment I'll
introduce our guest for today.

1264
00:54:15,196 --> 00:54:17,116
All right, so we are back.

1265
00:54:17,156 --> 00:54:19,956
So it is my pleasure to
introduce Jocelyn Goldfein

1266
00:54:20,036 --> 00:54:23,606
of Facebook, the director of
engineering, who was formerly

1267
00:54:23,606 --> 00:54:26,246
at VMware, a company that works
on virtualization products,

1268
00:54:26,246 --> 00:54:27,906
not unlike our own virtual box.

1269
00:54:28,166 --> 00:54:30,036
Jocelyn is here tonight
-- today --

1270
00:54:30,036 --> 00:54:30,906
with Mike Strepper
[Assumed spelling]

1271
00:54:30,906 --> 00:54:33,436
and soon Mark Zuckerburg
on campus to chat with CS

1272
00:54:33,436 --> 00:54:35,556
and aspiring computer
scientists everywhere later.

1273
00:54:35,556 --> 00:54:36,406
So Jocelyn, welcome.

1274
00:54:36,686 --> 00:54:37,396
>> Thank you so much.

1275
00:54:38,516 --> 00:54:43,296
[ Applause ]

1276
00:54:43,796 --> 00:54:46,606
>> I want to tell you that at
Facebook we have a tradition

1277
00:54:46,606 --> 00:54:47,576
of doing it live.

1278
00:54:47,846 --> 00:54:50,416
So I have now respect for the
live demo, so I have respect

1279
00:54:50,416 --> 00:54:51,146
for the live demo, even

1280
00:54:51,146 --> 00:54:52,576
if it doesn't go
perfectly as intended.

1281
00:54:52,706 --> 00:54:56,416
So the beauty of
building web software is

1282
00:54:56,416 --> 00:54:57,926
if things don't go
exactly how you want it,

1283
00:54:57,926 --> 00:55:00,076
it's very quick to fix it.

1284
00:55:00,076 --> 00:55:01,966
Maybe some quick mutual
introductions first.

1285
00:55:02,076 --> 00:55:04,496
So I know you guys are
all students of CS 50,

1286
00:55:04,496 --> 00:55:06,876
which means right away you're
doing something really good

1287
00:55:06,876 --> 00:55:07,296
with your lives.

1288
00:55:07,296 --> 00:55:10,296
I don't know if you all remember
the Internet name -- you are.

1289
00:55:10,296 --> 00:55:11,666
I don't know if you
remember the Internet name

1290
00:55:11,666 --> 00:55:15,016
from a few years ago which
was a commencement advise,

1291
00:55:15,076 --> 00:55:18,056
which advised new graduates,
you know, a lot of advise,

1292
00:55:18,136 --> 00:55:19,506
but above all else
wear sun screen.

1293
00:55:20,556 --> 00:55:23,306
So my amendment to this advise
would be above all else,

1294
00:55:23,306 --> 00:55:24,916
where sun screen, and learn
to program in your life.

1295
00:55:25,066 --> 00:55:27,006
I think it's a really
important part of whether

1296
00:55:27,006 --> 00:55:29,266
or not you become an engineer
or major in computer science

1297
00:55:29,356 --> 00:55:31,566
or want to build software
over the long haul,

1298
00:55:31,856 --> 00:55:34,406
I think mastering these
basic principles is actually

1299
00:55:34,706 --> 00:55:37,256
applicable to any and every job
you might do with your life.

1300
00:55:37,396 --> 00:55:40,086
So that's the one
thing I know about you,

1301
00:55:40,086 --> 00:55:41,136
and it's already a great thing.

1302
00:55:41,556 --> 00:55:44,116
Give me a show of hands,
how many of you are thinking

1303
00:55:44,116 --> 00:55:45,356
of majoring in computer science?

1304
00:55:47,076 --> 00:55:49,096
Okay. Or in any other
engineering discipline?

1305
00:55:50,376 --> 00:55:52,006
Okay. How many of you
are sure you're not going

1306
00:55:52,006 --> 00:55:52,536
to be engineers?

1307
00:55:53,896 --> 00:55:57,026
Still smart to take this class.

1308
00:55:58,036 --> 00:55:59,376
How many of you are freshmen?

1309
00:56:00,906 --> 00:56:01,416
Sophomores?

1310
00:56:02,726 --> 00:56:04,786
Juniors? Seniors?

1311
00:56:05,926 --> 00:56:06,886
Grad students, any?

1312
00:56:07,056 --> 00:56:07,936
Buehler? All right.

1313
00:56:09,406 --> 00:56:10,956
Still smart to take this class.

1314
00:56:11,246 --> 00:56:11,556
Excellent.

1315
00:56:11,556 --> 00:56:12,766
A little bit about myself.

1316
00:56:12,796 --> 00:56:15,556
I have had a -- a varied
and interesting career.

1317
00:56:15,636 --> 00:56:19,976
I was a computer science major
myself, lo these many years ago.

1318
00:56:19,976 --> 00:56:22,316
I graduated from a left
coast university, Stanford,

1319
00:56:22,876 --> 00:56:25,116
and I've worked at -- sorry --

1320
00:56:26,026 --> 00:56:28,416
I worked at a variety of
interesting companies,

1321
00:56:28,496 --> 00:56:31,236
but for our purposes maybe one
of the most interesting is --

1322
00:56:31,236 --> 00:56:36,756
that I founded my own start up
with a couple of my coworkers,

1323
00:56:36,806 --> 00:56:38,406
and did that for
about 18 months.

1324
00:56:38,796 --> 00:56:42,616
And I stopped doing that after
one too many strategic pivots.

1325
00:56:42,676 --> 00:56:44,326
And also because I
was in Austin, Texas,

1326
00:56:44,326 --> 00:56:45,776
and I really wanted to
get back to California.

1327
00:56:46,476 --> 00:56:50,046
At that point in my career I had
figured out that I had as much

1328
00:56:50,046 --> 00:56:52,316
of a jones for building teams
as for building software,

1329
00:56:52,316 --> 00:56:54,866
and so I went into VMware
as an engineering manager,

1330
00:56:54,926 --> 00:56:56,346
as a manager of teams
of engineers.

1331
00:56:56,806 --> 00:56:59,796
And when I joined VMware
it was about 350 people,

1332
00:57:00,456 --> 00:57:02,486
and that was really the
beginning of a rocket ride

1333
00:57:02,486 --> 00:57:05,416
for VMware which grew -- which
doubled head count every year

1334
00:57:05,416 --> 00:57:06,596
for the next five years.

1335
00:57:07,106 --> 00:57:10,416
And when I left VMware a little

1336
00:57:10,416 --> 00:57:14,146
over a year ago it was
pushing on 10,000 employees.

1337
00:57:14,536 --> 00:57:17,266
So power of compound
interest at work.

1338
00:57:18,126 --> 00:57:21,296
And when I left VMware I was
pretty determined to get back

1339
00:57:21,346 --> 00:57:24,316
into the start up environment,
and I was really only talking

1340
00:57:24,316 --> 00:57:25,276
to very small companies.

1341
00:57:25,356 --> 00:57:26,806
I ended up interviewing
with Facebook kind

1342
00:57:26,806 --> 00:57:28,686
of as an afterthought, kind
of as a favor to a friend

1343
00:57:28,686 --> 00:57:29,356
who was working there.

1344
00:57:29,896 --> 00:57:32,236
And I just kept having these
interesting conversations

1345
00:57:32,236 --> 00:57:34,826
with Facebook employees,
and I finally decided

1346
00:57:34,826 --> 00:57:36,896
that Facebook had more
of the qualities of --

1347
00:57:37,116 --> 00:57:39,096
that I was looking for
in a start up than a lot

1348
00:57:39,096 --> 00:57:40,276
of the start ups
I was talking to.

1349
00:57:40,446 --> 00:57:41,586
And among other things had --

1350
00:57:42,196 --> 00:57:44,306
kind of a trite observation
in hindsight, but far

1351
00:57:44,306 --> 00:57:46,696
and away the most impressive
founder, that being Mark.

1352
00:57:46,806 --> 00:57:50,986
So I happily accepted employment
with Facebook a little

1353
00:57:50,986 --> 00:57:52,706
over a year ago, and have
not looked back since.

1354
00:57:52,706 --> 00:57:53,486
It's been a wild ride.

1355
00:57:54,426 --> 00:57:58,536
If I -- trying to sort of
compose some remarks in my head

1356
00:57:58,536 --> 00:58:00,916
and think about what would
I have wanted to know

1357
00:58:01,096 --> 00:58:04,186
when I was an undergraduate
taking an intro programming

1358
00:58:04,186 --> 00:58:07,136
class, trying to decide
whether or not I wanted --

1359
00:58:07,456 --> 00:58:08,646
you know, what I
wanted to do with this

1360
00:58:08,726 --> 00:58:09,816
and would I continue on.

1361
00:58:10,526 --> 00:58:12,666
And I think the thing that would
have been really valuable for me

1362
00:58:12,666 --> 00:58:15,146
to hear about was what
exactly is the life

1363
00:58:15,146 --> 00:58:16,346
of a software engineer like?

1364
00:58:16,776 --> 00:58:19,656
Because you know, we
don't really get exposed

1365
00:58:19,656 --> 00:58:22,266
to that very much, you
know, it's not like --

1366
00:58:22,706 --> 00:58:24,306
I think we all have some
idea of what doctors do,

1367
00:58:24,306 --> 00:58:25,186
they go to the doctor's office.

1368
00:58:25,256 --> 00:58:26,726
We have some idea
of what teachers do,

1369
00:58:26,726 --> 00:58:27,686
we encounter them every day.

1370
00:58:28,176 --> 00:58:30,976
But I didn't really know
what software engineers did.

1371
00:58:31,296 --> 00:58:34,136
And the media representations I
got were like all about hacking

1372
00:58:34,136 --> 00:58:36,396
into the FBI and starting
World War III, which --

1373
00:58:36,956 --> 00:58:38,436
you know, turns out
is not the --

1374
00:58:38,436 --> 00:58:43,926
the bread and butter of the
working software engineer.

1375
00:58:44,046 --> 00:58:44,416
so what is it?

1376
00:58:45,446 --> 00:58:47,946
And you know, I think
that above all,

1377
00:58:48,236 --> 00:58:51,246
the quality that defines
the software engineers

1378
00:58:51,376 --> 00:58:54,136
that I have most loved working
with is that they really love

1379
00:58:54,136 --> 00:58:55,976
to build stuff and
they really want

1380
00:58:55,976 --> 00:58:57,216
to make something from nothing.

1381
00:58:57,766 --> 00:58:59,646
And if I think about the
traits that Facebook looks

1382
00:58:59,646 --> 00:59:02,576
for in the software
engineers that we hire,

1383
00:59:03,426 --> 00:59:06,696
the first trait we look for
above all else is passion,

1384
00:59:06,696 --> 00:59:08,896
a degree of excitement
about what you're doing.

1385
00:59:09,056 --> 00:59:11,786
And I think this maybe applies
to all engineering domains.

1386
00:59:11,786 --> 00:59:15,396
Whether you're in, you
know, think about things

1387
00:59:15,426 --> 00:59:17,716
that you love using and
who must have made them,

1388
00:59:17,716 --> 00:59:19,926
and think about buildings
and bridges.

1389
00:59:19,986 --> 00:59:22,806
But also cars and
phones and software.

1390
00:59:23,236 --> 00:59:25,816
And you kind of know when
you're using something

1391
00:59:25,816 --> 00:59:28,996
that someone just
sort of phoned it in.

1392
00:59:28,996 --> 00:59:32,296
And -- and you kind of know
when you're using something

1393
00:59:32,296 --> 00:59:34,026
that someone worked on
that they were just in love

1394
00:59:34,026 --> 00:59:36,456
with what they were building,
and wanted to make it awesome.

1395
00:59:36,806 --> 00:59:39,926
So I think that quality of being
in love with making things,

1396
00:59:39,926 --> 00:59:42,406
and wanting to make awesome
things for other people to use,

1397
00:59:42,756 --> 00:59:45,076
that I think is the quality
that at heart unites us all

1398
00:59:45,076 --> 00:59:45,906
and makes us engineers.

1399
00:59:47,046 --> 00:59:49,866
Second that, of course, Facebook
wants people who are really good

1400
00:59:49,866 --> 00:59:52,036
at what they do, who are
smart and very capable.

1401
00:59:52,546 --> 00:59:55,226
And I think that one
of the qualities also

1402
00:59:55,226 --> 00:59:56,446
that makes software
engineers really good

1403
00:59:56,446 --> 00:59:59,046
at what they do is actually
sort of a willingness to roll

1404
00:59:59,046 --> 01:00:01,256
up their sleeves, dive
in, and get things done.

1405
01:00:01,766 --> 01:00:02,856
And you know, Facebook

1406
01:00:02,856 --> 01:00:05,116
in particular values
just doing it live,

1407
01:00:05,306 --> 01:00:07,506
like trying something,
see if it works.

1408
01:00:07,506 --> 01:00:10,266
If it doesn't, fix it, move on.

1409
01:00:10,306 --> 01:00:12,786
And really, we have seen over
and over again the virtue

1410
01:00:12,786 --> 01:00:15,336
of trying something
quickly, making a difference,

1411
01:00:15,436 --> 01:00:17,936
and learning from that, rather
than spending forever kind

1412
01:00:17,936 --> 01:00:20,646
of planning or thinking
about what it should be.

1413
01:00:22,576 --> 01:00:27,476
So we tend to -- we tend to
have really broadly three sort

1414
01:00:27,476 --> 01:00:30,856
of categories of work that
Facebook engineers do.

1415
01:00:31,586 --> 01:00:35,426
Ranging from systems work, so
if you think about the kind

1416
01:00:35,426 --> 01:00:39,416
of systems problems Facebook
has, we probably have built sort

1417
01:00:39,416 --> 01:00:43,986
of the single-most well-used
application that exists.

1418
01:00:44,116 --> 01:00:45,956
One of my teams is
the new street team

1419
01:00:45,956 --> 01:00:47,336
that owns the Facebook homepage.

1420
01:00:47,986 --> 01:00:50,416
And I think there's a pretty
good chance that that piece

1421
01:00:50,416 --> 01:00:53,546
of software gets more hits
per day than any other piece

1422
01:00:53,546 --> 01:00:55,576
of software in existence,
which is a little humbling,

1423
01:00:55,576 --> 01:00:59,306
when we think about submitting
code and changing that page.

1424
01:00:59,306 --> 01:01:01,066
And yet we do that every day.

1425
01:01:01,486 --> 01:01:02,586
Usually not on weekends.

1426
01:01:02,926 --> 01:01:04,846
Every week day.

1427
01:01:05,206 --> 01:01:09,156
And so -- so that's kind of --

1428
01:01:10,426 --> 01:01:14,556
you know, that kind of
systems challenge requires --

1429
01:01:14,996 --> 01:01:17,186
is I think the defining
distributed systems problem

1430
01:01:17,186 --> 01:01:17,846
of our time.

1431
01:01:18,146 --> 01:01:20,026
So if you think about
distributive systems,

1432
01:01:20,026 --> 01:01:24,586
if you think about cloud scale,
if you think about the ways

1433
01:01:24,586 --> 01:01:28,386
that we divide and conquer
large work loads, Facebook is --

1434
01:01:28,386 --> 01:01:31,726
Facebook is doing some extremely
cutting-edge work in this area.

1435
01:01:32,486 --> 01:01:34,896
And I'll give you
just one, for example.

1436
01:01:34,896 --> 01:01:37,146
We actually now custom
design our own hardware.

1437
01:01:37,146 --> 01:01:39,496
We no longer buy off the shelf
parts, because our hardware is

1438
01:01:39,556 --> 01:01:40,696
so tuned to our workload.

1439
01:01:41,326 --> 01:01:43,396
But we have put so much energy

1440
01:01:43,676 --> 01:01:46,226
and inspiration behind the
designs of our custom --

1441
01:01:46,266 --> 01:01:47,386
of our proprietary skews

1442
01:01:47,686 --> 01:01:49,906
that when we actually go take
commercial benchmarks that are,

1443
01:01:49,906 --> 01:01:52,716
like, performance workloads
and power efficiency workloads,

1444
01:01:53,126 --> 01:01:55,026
the Facebook design
skews actually

1445
01:01:55,086 --> 01:01:56,456
out perform the commercial
skews.

1446
01:01:57,306 --> 01:01:58,106
So the server designers

1447
01:01:58,106 --> 01:01:59,936
at Facebook are actually
designing better servers

1448
01:02:00,296 --> 01:02:02,436
than people whose job it is
to design servers for a living

1449
01:02:02,436 --> 01:02:03,416
and sell them to
other companies.

1450
01:02:03,866 --> 01:02:06,906
So that I think is kind of
amazing, and crazy-interesting.

1451
01:02:07,976 --> 01:02:10,376
We have a class of work that
is algorithmic in nature.

1452
01:02:10,886 --> 01:02:13,976
That, you know, any time
on Facebook, you know,

1453
01:02:14,316 --> 01:02:17,216
we know for sure that making
people think is always --

1454
01:02:17,936 --> 01:02:20,596
that if you force people
to jump through hoops

1455
01:02:20,596 --> 01:02:22,026
and make people think,
they're going

1456
01:02:22,026 --> 01:02:22,986
to have a worse experience.

1457
01:02:22,986 --> 01:02:24,496
So we always want
to try to present

1458
01:02:24,496 --> 01:02:27,106
to users what it is they
want to see by default.

1459
01:02:27,996 --> 01:02:30,346
And so there's a variety of
ways where this comes into play.

1460
01:02:30,346 --> 01:02:31,966
When you're searching on
Facebook and you're searching

1461
01:02:31,966 --> 01:02:34,556
for a person, we do our best to
figure out exactly who you mean

1462
01:02:34,936 --> 01:02:36,216
and bring that result
to be first.

1463
01:02:36,736 --> 01:02:38,486
When you're reading
through stories

1464
01:02:38,616 --> 01:02:40,546
in our news feed we do
our best to try to figure

1465
01:02:40,546 --> 01:02:42,686
out what are the stories you
are going to be really pissed

1466
01:02:42,736 --> 01:02:45,016
if you miss, and pull them
out of order and stick them

1467
01:02:45,016 --> 01:02:46,086
at the top so you
don't miss them.

1468
01:02:46,746 --> 01:02:48,986
There's a variety
of other places

1469
01:02:48,986 --> 01:02:50,346
where behind the scenes we try

1470
01:02:50,346 --> 01:02:51,916
to show you the right
result first.

1471
01:02:52,336 --> 01:02:54,216
And so collectively, that is --

1472
01:02:54,216 --> 01:02:58,216
there are a large number
of functions at Facebook

1473
01:02:58,216 --> 01:03:00,296
that are doing real interesting
machine learning work,

1474
01:03:00,296 --> 01:03:03,476
essentially, to try to divine
what is it people are trying

1475
01:03:03,476 --> 01:03:04,846
to do, and let's put it
at their finger tips.

1476
01:03:05,656 --> 01:03:07,776
Last but not least, and closest

1477
01:03:07,776 --> 01:03:10,346
to my own heart is what I would
consider sort of product --

1478
01:03:10,496 --> 01:03:11,586
pure product development.

1479
01:03:11,586 --> 01:03:12,626
And when Facebook says product,

1480
01:03:12,626 --> 01:03:16,046
what we mean are features our
end user is using on the site.

1481
01:03:16,436 --> 01:03:18,696
On Facebook.com or in
our mobile applications.

1482
01:03:19,456 --> 01:03:21,866
And that kind of feature
development is really,

1483
01:03:22,156 --> 01:03:27,096
if you like the -- I'll say
the top of the food chain,

1484
01:03:27,096 --> 01:03:29,256
where it all comes together
and gets exposed to users.

1485
01:03:29,796 --> 01:03:32,716
And so maybe I'll talk a
little bit more in detail

1486
01:03:32,716 --> 01:03:34,986
about what you do if
you're an engineer,

1487
01:03:34,986 --> 01:03:36,806
if you're building a
product at Facebook.

1488
01:03:36,806 --> 01:03:39,046
So it starts with an idea.

1489
01:03:39,046 --> 01:03:42,266
And ideas for a new product or
a new feature at Facebook come

1490
01:03:42,266 --> 01:03:43,426
from all kinds of places.

1491
01:03:43,926 --> 01:03:45,936
We're famous for our
hackathons, every couple

1492
01:03:45,936 --> 01:03:50,386
of months we'll declare it to
be a hack night or a hack day,

1493
01:03:50,386 --> 01:03:52,326
and we'll basically
take the next 24 hours

1494
01:03:52,326 --> 01:03:54,356
and people will set aside
everything else they're working

1495
01:03:54,356 --> 01:03:56,676
on, and they'll just work on an
idea that's interesting to them.

1496
01:03:57,206 --> 01:04:00,246
And you know, it's -- it's very
rare, it's next to impossible

1497
01:04:00,246 --> 01:04:02,026
that you're going to build
something in 24 hours

1498
01:04:02,026 --> 01:04:03,406
that we're going to ship
on the site the next day.

1499
01:04:03,786 --> 01:04:07,616
But what comes from that hack
culture is you have a chance

1500
01:04:07,616 --> 01:04:10,186
to set aside kind of the nitty
gritty, you're in the trenches,

1501
01:04:10,186 --> 01:04:11,496
you're very focused
on what you're doing.

1502
01:04:11,696 --> 01:04:13,426
And you have a chance to
step back and dream big.

1503
01:04:13,426 --> 01:04:17,506
And ten hours of solid
coding without interruptions,

1504
01:04:17,506 --> 01:04:19,796
without interviews, without
meetings is actually an

1505
01:04:19,796 --> 01:04:22,376
opportunity to really
build a prototype.

1506
01:04:22,376 --> 01:04:24,156
Especially if you grab
three or four other people

1507
01:04:24,156 --> 01:04:24,996
into your project with you.

1508
01:04:24,996 --> 01:04:27,866
To build enough of something
to show people the concept

1509
01:04:27,866 --> 01:04:28,896
to get them excited about it.

1510
01:04:29,256 --> 01:04:30,866
So some of our best
product ideas have come

1511
01:04:30,866 --> 01:04:31,706
from those hackathons.

1512
01:04:32,116 --> 01:04:33,396
Sometimes they come
from the outside,

1513
01:04:33,396 --> 01:04:35,356
they come from users telling
us things they'd love to see

1514
01:04:35,356 --> 01:04:37,646
on the site, they come from an
individual with a great idea.

1515
01:04:37,646 --> 01:04:39,686
But I think engineers
with an idea have sort

1516
01:04:39,796 --> 01:04:42,496
of a built-in advantage over
anybody else with an idea,

1517
01:04:42,786 --> 01:04:45,716
because an engineer has the
power to flesh their idea

1518
01:04:45,716 --> 01:04:47,266
out into a proto type.

1519
01:04:47,266 --> 01:04:49,146
You know the saying, a picture
speaks a thousand words?

1520
01:04:49,236 --> 01:04:52,146
Well a prototype speaks
a thousand pictures.

1521
01:04:52,656 --> 01:04:54,726
And so that -- that
power -- seriously.

1522
01:04:54,726 --> 01:04:59,586
And so you know, Silicone
Valley is full of people running

1523
01:04:59,586 --> 01:05:01,436
around [Inaudible] saying
I have a great idea,

1524
01:05:01,436 --> 01:05:03,356
will you give me some money so
I can hire some programmers.

1525
01:05:03,806 --> 01:05:05,546
The VC's tend to say no.

1526
01:05:06,396 --> 01:05:09,346
Because everybody has an idea --
like, tons of people have ideas.

1527
01:05:09,346 --> 01:05:10,306
The value is not in the idea.

1528
01:05:10,596 --> 01:05:12,716
The value is in actually
expressing the idea

1529
01:05:12,716 --> 01:05:13,466
and building the idea.

1530
01:05:13,846 --> 01:05:17,086
So VC's tend to fund founders
that are technical and are going

1531
01:05:17,086 --> 01:05:19,256
to build their idea, or
who have built something,

1532
01:05:19,256 --> 01:05:20,586
and have something to
show, more and more.

1533
01:05:21,356 --> 01:05:23,636
So engineers have this
kind of built-in advantage

1534
01:05:23,636 --> 01:05:24,766
to help their ideas
get traction.

1535
01:05:25,306 --> 01:05:27,616
But something else that makes
[Inaudible] an engineer more

1536
01:05:27,616 --> 01:05:29,966
likely to be successful at
Facebook is if you are good

1537
01:05:29,966 --> 01:05:31,296
with words, if you're
good at selling your idea,

1538
01:05:31,296 --> 01:05:33,506
if you're good at bringing other
people along with your idea.

1539
01:05:33,876 --> 01:05:36,176
Even if it's just
convincing your two coworkers

1540
01:05:36,176 --> 01:05:38,486
that they want to work with
you on hack night and prototype

1541
01:05:38,486 --> 01:05:41,076
out what you're talking about.

1542
01:05:41,076 --> 01:05:43,646
So once you have an idea it
starts to gather momentum,

1543
01:05:43,646 --> 01:05:45,566
we'll tend to put together
a team around this idea.

1544
01:05:45,566 --> 01:05:48,046
Whether it's a development
of an existing feature

1545
01:05:48,046 --> 01:05:48,916
or a brand new feature.

1546
01:05:49,416 --> 01:05:51,786
And a product team
at Facebook is --

1547
01:05:51,906 --> 01:05:54,236
we run some of the smallest
product teams that --

1548
01:05:54,816 --> 01:05:56,216
that I have exist
in the industry.

1549
01:05:56,216 --> 01:05:58,986
And so a new feature like
a significant new feature

1550
01:05:58,986 --> 01:06:02,856
on Facebook, like, the new
questions product we shipped

1551
01:06:02,856 --> 01:06:05,626
last year was actually
built by two engineers.

1552
01:06:05,626 --> 01:06:10,376
Something big like the new
homepage roll out was maybe 10

1553
01:06:10,376 --> 01:06:12,476
or 12 engineers total.

1554
01:06:12,576 --> 01:06:17,516
And probably essentially
3 or 4 on the UI,

1555
01:06:17,516 --> 01:06:19,436
what you actually
encounter who the homepage.

1556
01:06:19,866 --> 01:06:21,806
A lot more on the back end.

1557
01:06:22,386 --> 01:06:24,746
So these are relatively small
teams, which means every one

1558
01:06:24,746 --> 01:06:26,676
of those people have
enormous leverage.

1559
01:06:27,006 --> 01:06:28,926
There's usually a product
manager in the mix,

1560
01:06:28,926 --> 01:06:30,046
there'd usually a
designer in the mix

1561
01:06:30,046 --> 01:06:31,446
because we want our
products to be beautiful.

1562
01:06:31,446 --> 01:06:33,356
And so there's someone
that is moving pixels

1563
01:06:33,356 --> 01:06:34,386
around in Power Point --

1564
01:06:34,766 --> 01:06:37,196
sorry, not in Power
Point, in Photo Shop.

1565
01:06:37,386 --> 01:06:38,866
And making this look lovely.

1566
01:06:38,866 --> 01:06:42,556
And so -- and then it
tends to be that you know,

1567
01:06:42,556 --> 01:06:44,126
our cycles are almost un--

1568
01:06:44,126 --> 01:06:46,826
I cannot tell you how long it
takes to develop a new product

1569
01:06:46,826 --> 01:06:47,596
or feature at Facebook.

1570
01:06:47,596 --> 01:06:49,096
I wish I could, but in the --

1571
01:06:49,246 --> 01:06:50,896
in the 15 months I've
been there it seems

1572
01:06:50,896 --> 01:06:51,966
like each one is different.

1573
01:06:51,966 --> 01:06:54,696
And what tends to make them
different is our approach is

1574
01:06:54,696 --> 01:06:55,736
extremely iterative.

1575
01:06:55,736 --> 01:06:58,576
We don't ship features on a
schedule, it's not like VMware.

1576
01:06:58,576 --> 01:07:00,416
VMware made money
selling software.

1577
01:07:00,416 --> 01:07:04,386
And so if we were going to ship
Fusion 2.0 in Q 3, we were going

1578
01:07:04,386 --> 01:07:06,906
to recognize the revenue for it
in Q 3 and if it wasn't ready

1579
01:07:06,906 --> 01:07:09,076
to ship -- you know, we would
ship it in Q 3, and if we had

1580
01:07:09,076 --> 01:07:10,376
to cut features to
make it fit we would.

1581
01:07:10,376 --> 01:07:13,896
Facebook's revenue does not
come from selling our software.

1582
01:07:13,896 --> 01:07:15,486
The service is free,
it always will be.

1583
01:07:15,606 --> 01:07:17,576
And what that means is
we can take our time

1584
01:07:17,626 --> 01:07:20,796
and make the feature be right,
or we can also sort of go

1585
01:07:20,796 --> 01:07:22,646
in a hurry and see
what the reaction is,

1586
01:07:22,866 --> 01:07:24,436
and fall back very easily.

1587
01:07:24,506 --> 01:07:27,206
And it tends to be
most of the time

1588
01:07:27,206 --> 01:07:30,126
that we're building features
we're actually building them

1589
01:07:30,506 --> 01:07:32,636
in the production code
base of Facebook.com.

1590
01:07:32,826 --> 01:07:37,006
So if you -- the web servers
that serve up Facebook.com

1591
01:07:37,006 --> 01:07:40,916
to all of you are actually
also running the code for all

1592
01:07:40,916 --> 01:07:42,526
of the features that
we're developing right now

1593
01:07:42,526 --> 01:07:45,356
and that will ship over
the next 2 to 6 months.

1594
01:07:46,026 --> 01:07:47,366
And those are simply --

1595
01:07:47,366 --> 01:07:50,206
and if you're wondering
how could that possibly be?

1596
01:07:51,286 --> 01:07:53,076
You already know the basic
programming structures

1597
01:07:53,076 --> 01:07:54,646
that enable it to
be possible, right?

1598
01:07:54,646 --> 01:07:56,996
You can imagine a system
where the code is running

1599
01:07:57,186 --> 01:07:58,266
and it has some series
of checks.

1600
01:07:58,266 --> 01:07:59,976
If you're a Facebook employee,
if you're in this beta group,

1601
01:08:00,086 --> 01:08:01,886
run this code.

1602
01:08:02,996 --> 01:08:04,576
Otherwise, if you're
a production user

1603
01:08:04,576 --> 01:08:06,266
of Facebook, run that code.

1604
01:08:06,266 --> 01:08:09,386
And so that system which we
call gate keeper enables us

1605
01:08:09,526 --> 01:08:11,946
to develop our products
in the live --

1606
01:08:12,866 --> 01:08:14,146
in the live Facebook.com.

1607
01:08:14,356 --> 01:08:16,366
And really experience it and use
it as our users would use it.

1608
01:08:16,366 --> 01:08:18,176
And it also gives us a lot
of power to sort of turn it

1609
01:08:18,176 --> 01:08:20,226
on for a small number of users
and see what the reaction is,

1610
01:08:20,226 --> 01:08:21,986
and then turn it off again.

1611
01:08:23,216 --> 01:08:26,606
And so primarily, the --

1612
01:08:26,606 --> 01:08:29,126
the process of developing
a product doesn't start

1613
01:08:29,126 --> 01:08:31,766
with a very fully realized
spec. It starts with an idea,

1614
01:08:31,766 --> 01:08:33,436
it starts with some
engineers building prototypes.

1615
01:08:33,436 --> 01:08:35,156
It may start with
some photo shop mocks

1616
01:08:35,156 --> 01:08:35,866
of what it could look like.

1617
01:08:35,866 --> 01:08:37,316
And then we just
start building it.

1618
01:08:37,536 --> 01:08:42,286
And then we sit with it, and we
see what it feels like to us.

1619
01:08:42,286 --> 01:08:43,186
And you know, it --

1620
01:08:43,186 --> 01:08:44,846
the principle actor here is

1621
01:08:44,926 --> 01:08:46,706
at Facebook very
much is the engineer.

1622
01:08:46,706 --> 01:08:49,226
Because as much as you can look
at a photo shop mock and say oh,

1623
01:08:49,226 --> 01:08:51,676
that would be awesome, I
would love to use that,

1624
01:08:52,736 --> 01:08:54,896
it's only once you get it
live and actually powered

1625
01:08:54,896 --> 01:08:57,556
by your own social graph
and your own friend data

1626
01:08:57,556 --> 01:08:59,826
that you start to feel like
oh, maybe this is not so good.

1627
01:09:00,296 --> 01:09:03,136
The homepage that we just
shipped in particular,

1628
01:09:03,136 --> 01:09:06,056
we probably went through
five really major different

1629
01:09:06,106 --> 01:09:09,676
conceptual takes on what we
wanted to do with the homepage.

1630
01:09:09,676 --> 01:09:12,636
And it was -- and so we probably
sunk two months into each

1631
01:09:12,636 --> 01:09:14,746
of those, anywhere
between two months

1632
01:09:14,746 --> 01:09:15,766
and two weeks on
those iterations.

1633
01:09:15,926 --> 01:09:18,216
The two month ones were the
most heartbreaking, honestly.

1634
01:09:18,656 --> 01:09:20,516
But that's maybe another
thing that you have to have

1635
01:09:20,516 --> 01:09:22,836
as a software engineer, is a
certain amount of resilience,

1636
01:09:22,836 --> 01:09:24,556
and a willingness to say,
hey, this didn't work.

1637
01:09:24,556 --> 01:09:28,006
I'm going to walk away from that
[Inaudible] cost and try again.

1638
01:09:28,006 --> 01:09:31,796
And so over this
time we both were --

1639
01:09:31,796 --> 01:09:33,576
we both had a set of people
working on the back end

1640
01:09:33,576 --> 01:09:35,866
for a news feed that
were making --

1641
01:09:36,426 --> 01:09:39,086
were making scaleability changes
that were creating the ability

1642
01:09:39,086 --> 01:09:40,816
for us to do much more
interesting aggregations

1643
01:09:40,816 --> 01:09:41,336
of stories.

1644
01:09:41,806 --> 01:09:44,796
Something that, you know, may
or may not be that noticeable

1645
01:09:44,886 --> 01:09:47,196
in the new news feed is
there are many more clusters

1646
01:09:47,196 --> 01:09:47,566
of stories.

1647
01:09:47,566 --> 01:09:49,046
We're trying to put
stories together

1648
01:09:49,046 --> 01:09:49,946
in a more dense way for you.

1649
01:09:49,946 --> 01:09:50,746
And that was something

1650
01:09:50,746 --> 01:09:52,286
that required significant
back end changes.

1651
01:09:52,716 --> 01:09:54,616
And we had a lot of people
working on the algorithms

1652
01:09:54,616 --> 01:09:56,986
to recommend top stories.

1653
01:09:56,986 --> 01:09:59,966
But the UI -- and
that work kind of sort

1654
01:09:59,966 --> 01:10:02,286
of progressed linearly forward.

1655
01:10:02,366 --> 01:10:04,626
Although we made a lot
of changes to ranking

1656
01:10:04,676 --> 01:10:06,686
and the pacing and the
volume of the stories.

1657
01:10:07,186 --> 01:10:09,206
And it really was just
a process of trying lots

1658
01:10:09,206 --> 01:10:10,056
and lots of experiments.

1659
01:10:10,056 --> 01:10:11,096
Some of which we
only ever turned

1660
01:10:11,096 --> 01:10:12,146
on for Facebook employees.

1661
01:10:12,526 --> 01:10:14,156
Some of which we
turned on incrementally

1662
01:10:14,156 --> 01:10:15,416
for a small number of users.

1663
01:10:15,816 --> 01:10:18,196
Well, large number of users,
but small percentage of users.

1664
01:10:18,896 --> 01:10:20,716
Sort of very common
test group size

1665
01:10:20,716 --> 01:10:22,666
for us is half a
percent of active users.

1666
01:10:23,226 --> 01:10:24,786
And that doesn't
sound like very many,

1667
01:10:24,786 --> 01:10:27,956
but when it's half a percent of
800 million it's actually a lot.

1668
01:10:28,416 --> 01:10:30,886
But the nice thing is
you can turn on that test

1669
01:10:30,886 --> 01:10:32,406
and have really good data
within a couple hours.

1670
01:10:32,526 --> 01:10:34,596
So it's a very high-leverage
place to build products,

1671
01:10:34,596 --> 01:10:37,756
if that's what you like to do.

1672
01:10:37,916 --> 01:10:39,536
And as we got closer
and closer to a product

1673
01:10:39,536 --> 01:10:41,956
that we really felt good about,
then we kind of entered a phase

1674
01:10:41,956 --> 01:10:44,806
of refinement and
polish, and really sort

1675
01:10:44,806 --> 01:10:47,116
of opening our selves up
to criticism from a lot

1676
01:10:47,116 --> 01:10:50,616
of employees and a lot of
beta users, and taking those

1677
01:10:50,616 --> 01:10:54,556
to heart, fixing bugs, and
really supplying a level

1678
01:10:54,556 --> 01:10:56,696
of polish that made us feel
good about our creation.

1679
01:10:57,186 --> 01:11:00,106
And then last but not
least, announcing it

1680
01:11:00,106 --> 01:11:01,256
and launching it to users.

1681
01:11:01,256 --> 01:11:02,646
So that's kind of
the life cycle.

1682
01:11:02,646 --> 01:11:04,326
And actually, that's not last.

1683
01:11:04,476 --> 01:11:05,616
It's neither least nor last.

1684
01:11:06,036 --> 01:11:09,356
Because as soon as you turn
something on you find out things

1685
01:11:09,386 --> 01:11:11,856
that you didn't really know
before you turned it on.

1686
01:11:11,856 --> 01:11:13,496
And so there's very much a part

1687
01:11:13,496 --> 01:11:15,716
of the Facebook product launch
process which is continuing

1688
01:11:15,716 --> 01:11:18,036
to iterate even after you
ship and making it better

1689
01:11:18,036 --> 01:11:19,746
and better, even after we ship.

1690
01:11:20,206 --> 01:11:21,896
And that's a process that
continues to this day.

1691
01:11:23,056 --> 01:11:26,116
So I feel like I've been
talking for a long time.

1692
01:11:26,116 --> 01:11:27,856
So I would actually
love to pause here

1693
01:11:27,856 --> 01:11:29,536
and maybe take some
questions from you guys.

1694
01:11:29,536 --> 01:11:31,866
What can I tell you about
software engineering,

1695
01:11:32,326 --> 01:11:33,866
up there in the white T-shirt.

1696
01:11:34,466 --> 01:11:39,496
What are the major ways in which
Facebook generates its revenue.

1697
01:11:39,496 --> 01:11:40,506
We're an advertising company.

1698
01:11:41,036 --> 01:11:42,426
We make our money
mostly from ads.

1699
01:11:42,426 --> 01:11:46,286
We also have -- we also have a
system called Facebook credits,

1700
01:11:46,286 --> 01:11:49,186
which you can purpose virtual
currency mostly for use --

1701
01:11:49,186 --> 01:11:50,666
for virtual goods
only, mostly for use

1702
01:11:50,666 --> 01:11:52,436
in Facebook games, essentially.

1703
01:11:52,836 --> 01:11:56,676
But it's primarily
an ad company.

1704
01:11:56,756 --> 01:11:57,626
And by the way, if you think

1705
01:11:57,626 --> 01:12:02,996
of the most successful consumer
driven properties, you know,

1706
01:12:03,106 --> 01:12:05,726
on line, they've all been
on supported businesses.

1707
01:12:09,906 --> 01:12:10,896
Any other questions?

1708
01:12:12,166 --> 01:12:17,216
Over here, nope,
just stretching.

1709
01:12:17,316 --> 01:12:17,456
Yes?

1710
01:12:18,056 --> 01:12:20,056
[ Inaudible audience comment ]

1711
01:12:20,096 --> 01:12:22,406
>> What is the male to
female ratio at Facebook.

1712
01:12:22,766 --> 01:12:26,496
Not a public number, but I
will say it's not good enough,

1713
01:12:26,896 --> 01:12:28,476
and it's something we're
trying to make better.

1714
01:12:29,426 --> 01:12:32,126
I think that anecdotally,
Silicon Valley is not --

1715
01:12:32,126 --> 01:12:35,546
you know, part of the reason we
don't share these numbers is we

1716
01:12:35,706 --> 01:12:37,296
don't want it to be a
self-fulfilling prophesy.

1717
01:12:37,296 --> 01:12:39,076
And so -- and so I think a lot

1718
01:12:39,076 --> 01:12:40,956
of Silicone Valley
companies are caging

1719
01:12:40,956 --> 01:12:42,076
about sharing those numbers.

1720
01:12:42,396 --> 01:12:44,526
Precisely because we don't
want to discourage women.

1721
01:12:44,856 --> 01:12:46,756
Anecdotally, what I
think I will say --

1722
01:12:46,756 --> 01:12:50,056
what I will say is I think
Facebook is doing much better

1723
01:12:50,056 --> 01:12:52,076
than most other Silicone
Valley companies in terms

1724
01:12:52,076 --> 01:12:54,976
of having women in
actually coding positions

1725
01:12:55,396 --> 01:12:57,416
and manage positions, like
mine, rather than kind

1726
01:12:57,416 --> 01:12:59,736
of auxiliary functions
like QA and tech support.

1727
01:13:00,366 --> 01:13:04,376
I think Facebook is doing really
well at is acceptance rate

1728
01:13:04,376 --> 01:13:06,746
for whatever reason, one
of the things that I did

1729
01:13:06,746 --> 01:13:09,436
when I start -- so I am
passionate -- if you Google me,

1730
01:13:09,436 --> 01:13:11,186
you'll find me talking
about getting more women

1731
01:13:11,186 --> 01:13:13,096
into computer science and
getting more women at Facebook.

1732
01:13:13,096 --> 01:13:15,546
It's one of my passions.

1733
01:13:15,546 --> 01:13:17,166
I think the world is
missing out on half of it --

1734
01:13:17,196 --> 01:13:18,826
literally half of its
software engineers.

1735
01:13:19,556 --> 01:13:24,036
And -- and so one of the
things that I did when I got

1736
01:13:24,036 --> 01:13:25,376
to Facebook was to really go

1737
01:13:25,376 --> 01:13:27,776
through our whole hiring
pipeline with a fine tooth comb,

1738
01:13:27,776 --> 01:13:29,406
looking for discrepancies
between men and women.

1739
01:13:29,566 --> 01:13:32,926
And actually, the only
major discrepancy I found is

1740
01:13:32,926 --> 01:13:34,556
that women accept our
offers at a higher rate.

1741
01:13:35,316 --> 01:13:39,646
There's about a 10
percentage point spread.

1742
01:13:40,476 --> 01:13:40,566
Yeah?

1743
01:13:41,041 --> 01:13:43,041
[ Inaudible audience comment ]

1744
01:13:43,516 --> 01:13:46,576
>> If you're a minor
employee, you mean under 18?

1745
01:13:47,076 --> 01:13:50,466
[ Inaudible audience comment ]

1746
01:13:50,966 --> 01:13:55,946
>> The question is if I'm a
minor employee how important are

1747
01:13:55,946 --> 01:13:57,146
my ideas.

1748
01:13:57,146 --> 01:13:59,946
Minor meaning just an individual
contributor I think you're

1749
01:14:00,016 --> 01:14:01,986
trying to say?

1750
01:14:02,056 --> 01:14:08,836
I think -- I want to say to
you something that is going

1751
01:14:08,836 --> 01:14:11,266
to sound cheesy, but I
think is demonstrably true,

1752
01:14:11,306 --> 01:14:13,666
which is that there aren't
minor employees at Facebook.

1753
01:14:13,956 --> 01:14:16,826
And that everybody's
ideas have impact.

1754
01:14:17,266 --> 01:14:21,426
And I think the best way to
-- to at least in engineering,

1755
01:14:21,426 --> 01:14:22,956
I can't speak for every
function in the company

1756
01:14:22,956 --> 01:14:26,896
because I haven't experienced
them all first hand.

1757
01:14:26,986 --> 01:14:29,066
But what I would say about
engineering is that if you look

1758
01:14:29,066 --> 01:14:30,906
at the leverage of being
an engineer at Facebook,

1759
01:14:30,906 --> 01:14:32,986
it's almost unique
in the history

1760
01:14:32,986 --> 01:14:33,986
of the software industry.

1761
01:14:34,306 --> 01:14:36,296
So if you think about
the spectrum

1762
01:14:36,296 --> 01:14:37,546
of the impact you're going
to have in the world --

1763
01:14:37,546 --> 01:14:39,256
and we think a lot about
this, because I think one

1764
01:14:39,256 --> 01:14:41,456
of the core values at
Facebook is making a big impact

1765
01:14:42,136 --> 01:14:43,646
and doing things that
are very high leverage.

1766
01:14:44,476 --> 01:14:46,146
A lot of people when they think

1767
01:14:46,146 --> 01:14:47,516
of having a big impact
they think about going

1768
01:14:47,516 --> 01:14:49,216
to a very small company, right?

1769
01:14:49,746 --> 01:14:52,356
You know, the -- where
they are going to be one

1770
01:14:52,356 --> 01:14:54,446
of very few people in the
room and where they are going

1771
01:14:54,446 --> 01:14:56,036
to be involved with every
aspect of the business

1772
01:14:56,036 --> 01:14:57,026
and make a ton of business.

1773
01:14:57,446 --> 01:14:59,316
Man, when I did my start
up, there were four of us.

1774
01:14:59,316 --> 01:15:01,856
I was involved in every single
decision whether it was,

1775
01:15:01,856 --> 01:15:04,766
you know, what was our
product strategy down to, like,

1776
01:15:04,766 --> 01:15:06,486
what sodas are we going to
buy in the kitchen this month.

1777
01:15:07,306 --> 01:15:09,656
And you know, so if you're
somewhere very small you're

1778
01:15:09,656 --> 01:15:12,626
going to have a big impact on
your business, but the nature

1779
01:15:12,626 --> 01:15:15,216
of working at a five person
or a twenty person start up is

1780
01:15:15,216 --> 01:15:18,856
that your start up is the
standard start up experience,

1781
01:15:18,856 --> 01:15:20,886
very few are successful
and break out of this.

1782
01:15:20,886 --> 01:15:22,726
But the standard start up
experience, especially at first,

1783
01:15:23,116 --> 01:15:25,776
is that your -- what you're
doing effects very few people

1784
01:15:25,776 --> 01:15:26,056
in the world.

1785
01:15:26,056 --> 01:15:27,516
You just don't have
that many users yet.

1786
01:15:27,516 --> 01:15:30,296
And so your impact on
your company is large,

1787
01:15:30,296 --> 01:15:32,786
but your impact on users,
on people, is small.

1788
01:15:33,516 --> 01:15:35,226
Then you can kind of go to the
opposite end of the spectrum,

1789
01:15:35,226 --> 01:15:36,886
and I think this is the
experience you're talking about,

1790
01:15:37,276 --> 01:15:38,736
where you have these
sort of very large,

1791
01:15:38,736 --> 01:15:40,856
well established companies
that are having a ton of impact

1792
01:15:40,856 --> 01:15:41,606
on people in the world.

1793
01:15:41,606 --> 01:15:43,136
Think of Microsoft,
think of Google.

1794
01:15:43,686 --> 01:15:48,186
And or for that matter, think
of IBM and Cisco, Intel,

1795
01:15:48,286 --> 01:15:50,786
really giants of the
high-tech industry.

1796
01:15:51,526 --> 01:15:53,146
And they have hundreds
of millions of users.

1797
01:15:53,146 --> 01:15:54,086
They have saturated the market.

1798
01:15:54,086 --> 01:15:55,376
They have every user
you could imagine.

1799
01:15:55,866 --> 01:15:59,156
And yet at the same
time, they have tens

1800
01:15:59,156 --> 01:16:00,406
of thousands of employees.

1801
01:16:00,796 --> 01:16:03,066
And so the impact that
each individual employee,

1802
01:16:03,066 --> 01:16:05,616
that each individual engineer
can have on those people

1803
01:16:05,616 --> 01:16:07,546
of the world is also
pretty small.

1804
01:16:08,356 --> 01:16:10,156
Right? Sort of getting back to
the thrust of your question,

1805
01:16:10,156 --> 01:16:12,386
like, I'm just a little
cog in a wheel somewhere.

1806
01:16:12,386 --> 01:16:15,166
I can't -- like, Apple may
be changing the mobile phone

1807
01:16:15,166 --> 01:16:17,736
industry, but like one engineer
on the iPhone probably cannot.

1808
01:16:19,086 --> 01:16:22,896
But I think that if you picture
a graph which has a number

1809
01:16:22,896 --> 01:16:26,026
of engineers on the X axis
and users per engineer

1810
01:16:26,026 --> 01:16:28,766
in the Y axis, I think the
graph actually looks a bit

1811
01:16:28,766 --> 01:16:29,406
like a hill.

1812
01:16:29,406 --> 01:16:32,876
And I think Facebook is sort
of close to unique in being,

1813
01:16:32,876 --> 01:16:34,806
you know, very close to
the top of that hill.

1814
01:16:34,806 --> 01:16:36,146
I think we're approaching
the top of that hill,

1815
01:16:36,576 --> 01:16:40,636
where we have 800 million
users, we have fewer

1816
01:16:40,636 --> 01:16:44,156
than 800 engineers, and so
the ratio [Inaudible] users

1817
01:16:44,226 --> 01:16:47,856
to engineers is -- is literally
more than a million to 1.

1818
01:16:49,116 --> 01:16:52,166
And so every single -- like,
we have so much more work

1819
01:16:52,546 --> 01:16:54,776
than any individual could do.

1820
01:16:55,356 --> 01:16:59,076
And so every single person
at Facebook has to think

1821
01:16:59,076 --> 01:17:02,556
about what is the most impact
I can have on our users.

1822
01:17:02,556 --> 01:17:05,676
What is the highest [Inaudible]
that I can be and do.

1823
01:17:05,676 --> 01:17:08,986
When you think about building
a new feature like questions

1824
01:17:08,986 --> 01:17:10,516
with just two engineers,
when you think about --

1825
01:17:10,516 --> 01:17:12,996
and by the way, those two
engineers weren't like,

1826
01:17:13,246 --> 01:17:14,836
you know, senior staff
principle engineers.

1827
01:17:15,226 --> 01:17:17,296
One of them was three years
out of college and one

1828
01:17:17,296 --> 01:17:19,396
of them was no years
out of college,

1829
01:17:19,436 --> 01:17:21,896
because he was a summer intern
who had dropped out and stayed.

1830
01:17:22,436 --> 01:17:26,786
And so -- and those two
guys built the whole thing.

1831
01:17:26,786 --> 01:17:31,056
And -- and trust me, they
had more impact and more say

1832
01:17:31,056 --> 01:17:35,226
over that feature than
anyone else involved.

1833
01:17:35,226 --> 01:17:37,686
So you know, are you necessarily
going to be able to, you know,

1834
01:17:37,686 --> 01:17:39,206
walk into Cheryl
Sandburg's office

1835
01:17:39,206 --> 01:17:41,186
and say I think the sales plan
should be something different.

1836
01:17:41,186 --> 01:17:43,606
No, like, your impact is
going to be felt in the area

1837
01:17:43,606 --> 01:17:45,156
of your expertise, of
what you're working on.

1838
01:17:45,466 --> 01:17:47,846
But in that area it's huge.

1839
01:17:48,516 --> 01:17:53,676
[ Inaudible audience comment ]

1840
01:17:54,176 --> 01:17:56,526
>> How do we cope with the fact
that for at least two weeks

1841
01:17:56,526 --> 01:17:58,376
after a new Facebook comes
out most people hate it.

1842
01:17:58,376 --> 01:17:59,716
It takes some coping.

1843
01:17:59,716 --> 01:18:00,566
[ Laughter ]

1844
01:18:00,566 --> 01:18:03,576
>> I'm not going to lie.

1845
01:18:03,576 --> 01:18:05,206
Not one of my favorite
parts about Facebook.

1846
01:18:05,616 --> 01:18:08,946
Actually, it seems like it's
mostly homepage that people --

1847
01:18:08,946 --> 01:18:10,736
that -- that draws
that response.

1848
01:18:11,526 --> 01:18:13,586
In fact, like, we've done
this sentiment analysis,

1849
01:18:13,586 --> 01:18:16,036
and we do sort of this
graph of positive versus --

1850
01:18:16,356 --> 01:18:18,116
where [Inaudible] people's
public status updates

1851
01:18:18,116 --> 01:18:19,146
that include the word Facebook.

1852
01:18:19,146 --> 01:18:20,286
And positive spikes are

1853
01:18:20,376 --> 01:18:22,936
like positivity sentiment
spikes are usually things like,

1854
01:18:23,016 --> 01:18:25,146
you know, holidays where
people are saying, you know,

1855
01:18:25,146 --> 01:18:27,256
happy mother's day to all my
Facebook friends who are moms.

1856
01:18:27,256 --> 01:18:28,516
So those are not about us.

1857
01:18:28,576 --> 01:18:31,246
But the negative ones -- the
negative ones are, you know,

1858
01:18:31,246 --> 01:18:33,476
bring back the old Facebook.

1859
01:18:33,476 --> 01:18:35,366
And almost all of the
negative spikes are correlated

1860
01:18:35,366 --> 01:18:37,036
with homepage roll outs.

1861
01:18:37,746 --> 01:18:38,866
It's -- you know, if anything,

1862
01:18:38,866 --> 01:18:41,716
the fact that it does happen
very predictability makes

1863
01:18:41,716 --> 01:18:43,316
it easier.

1864
01:18:43,426 --> 01:18:46,006
Like going into rolling out a
new homepage we kind of were,

1865
01:18:46,006 --> 01:18:47,786
you know, a little
bit braced for impact.

1866
01:18:48,406 --> 01:18:49,926
But you know, it also --

1867
01:18:49,926 --> 01:18:52,496
every time people complain
there's almost always --

1868
01:18:52,526 --> 01:18:54,606
like, sometimes yes,
I don't like change.

1869
01:18:54,636 --> 01:18:57,266
But there's generally a lot
more at the root of it, right?

1870
01:18:57,266 --> 01:19:01,296
I think the complaints about the
homepage this time, you know,

1871
01:19:01,296 --> 01:19:03,206
had a lot of legitimacy to them.

1872
01:19:03,206 --> 01:19:06,376
I mean, you know, I think it's
-- I think it's true that if --

1873
01:19:06,376 --> 01:19:08,506
if people are really
happy with your service,

1874
01:19:08,506 --> 01:19:10,306
and that's the most
heartening thing, frankly,

1875
01:19:10,306 --> 01:19:12,776
that people wouldn't be
complaining this much

1876
01:19:12,776 --> 01:19:14,266
if they didn't care
so much, right?

1877
01:19:14,266 --> 01:19:15,486
If they weren't passionate
about Facebook,

1878
01:19:15,486 --> 01:19:17,106
if they weren't passionate
users of my software.

1879
01:19:17,436 --> 01:19:19,766
And this is so much better
than working on something

1880
01:19:19,766 --> 01:19:20,696
that just doesn't matter.

1881
01:19:21,056 --> 01:19:24,766
But, like, also, people are
going to complain about change.

1882
01:19:24,816 --> 01:19:27,886
But the thing they complain
about is going to be the thing

1883
01:19:27,886 --> 01:19:29,376
that you need to fix, right?

1884
01:19:29,376 --> 01:19:31,426
Or is going to be the thing that
you strategically chose to do

1885
01:19:31,426 --> 01:19:32,536
and you're going to
stick to your guns about.

1886
01:19:33,436 --> 01:19:35,776
And so there are --
well, no, I'm serious.

1887
01:19:35,866 --> 01:19:38,076
There's -- maybe the most
illustrating story, actually,

1888
01:19:38,076 --> 01:19:40,146
this is a good story if
you haven't heard it.

1889
01:19:40,146 --> 01:19:43,616
Facebook first rolled
out news feed in 2006.

1890
01:19:43,616 --> 01:19:46,426
So this is heresay, I was
not at Facebook at the time.

1891
01:19:46,706 --> 01:19:49,856
But at the time, Facebook
had about 50 million users.

1892
01:19:50,536 --> 01:19:53,906
And when they rolled out
the news feed the outrage

1893
01:19:54,206 --> 01:19:55,476
at the existence
of the news feed --

1894
01:19:55,476 --> 01:19:58,186
because before, you had
to visit someone's profile

1895
01:19:58,186 --> 01:19:58,826
to see what they were up to.

1896
01:19:59,236 --> 01:20:00,096
Right? You had to stalk them.

1897
01:20:00,536 --> 01:20:03,836
And -- as you may
recall, if you --

1898
01:20:03,836 --> 01:20:05,986
any of you using
Facebook in 2006.

1899
01:20:05,986 --> 01:20:09,926
And -- and the news feed all
of a sudden, all this behavior,

1900
01:20:09,926 --> 01:20:12,096
all this activity people were
doing on Facebook was visible

1901
01:20:12,096 --> 01:20:13,776
to their friends before,
but they kind of felt

1902
01:20:13,776 --> 01:20:15,006
like they had security
to obscurity.

1903
01:20:15,006 --> 01:20:16,366
Only people who cared
would go and look.

1904
01:20:16,366 --> 01:20:18,586
And now that was all being
pushed out to the world

1905
01:20:18,586 --> 01:20:20,286
or out to their friends.

1906
01:20:20,476 --> 01:20:24,286
And so the out rage,
literally 12 million people,

1907
01:20:24,286 --> 01:20:28,046
12 million Facebook users joined
a protest group protesting the

1908
01:20:28,046 --> 01:20:29,066
existence of the news feed.

1909
01:20:29,666 --> 01:20:31,946
12 million out of
50 million users.

1910
01:20:32,166 --> 01:20:34,036
Like, an insane percentage.

1911
01:20:35,016 --> 01:20:38,496
At the same time, our
servers were going nuts.

1912
01:20:38,786 --> 01:20:41,856
And we had data showing
that the same --

1913
01:20:41,966 --> 01:20:43,806
of our 50 million
users almost all

1914
01:20:43,806 --> 01:20:45,866
of them were using the
site much more frequently,

1915
01:20:46,196 --> 01:20:47,216
were spending more
time on the site,

1916
01:20:47,216 --> 01:20:48,196
were consuming the stories,

1917
01:20:48,196 --> 01:20:49,876
were visiting each other's
profiles more often,

1918
01:20:50,146 --> 01:20:51,256
were friending more people

1919
01:20:51,256 --> 01:20:52,376
because they were
discovering more.

1920
01:20:52,706 --> 01:20:55,676
So we could tell even
through the complaints,

1921
01:20:55,676 --> 01:20:56,966
that gave us the
courage to stick

1922
01:20:56,966 --> 01:20:58,586
to the strategy change,
to stick to our guns.

1923
01:20:58,626 --> 01:21:01,236
Because we could see
that users loved it

1924
01:21:01,236 --> 01:21:02,946
and that it was giving
them value.

1925
01:21:03,566 --> 01:21:05,206
And everything we do
is for the purpose

1926
01:21:05,206 --> 01:21:06,626
of creating value for users.

1927
01:21:06,626 --> 01:21:09,216
Yes, secondarily we want
to be able to monetize

1928
01:21:09,216 --> 01:21:10,936
that so we can continue
our mission.

1929
01:21:11,806 --> 01:21:12,926
But if we just wanted

1930
01:21:12,926 --> 01:21:14,426
to generate advertising
dollars there's a lot

1931
01:21:14,426 --> 01:21:15,566
of things that we could do.

1932
01:21:15,566 --> 01:21:17,016
We can make ads bigger,
whatever.

1933
01:21:17,306 --> 01:21:18,906
The number -- the
worst thing we could do

1934
01:21:18,906 --> 01:21:20,416
for our revenue would
actually do something

1935
01:21:20,416 --> 01:21:21,716
that made people
visit the site less

1936
01:21:22,036 --> 01:21:26,296
or friend fewer people
or -- or switch.

1937
01:21:26,556 --> 01:21:29,406
So users are always -- users
and user engagement are always

1938
01:21:29,406 --> 01:21:30,776
at the heart of our
strategic decisions.

1939
01:21:30,776 --> 01:21:32,626
And revenue is kind of something
that's kind of an afterthought.

1940
01:21:32,626 --> 01:21:34,716
It's literally a separate
organizational function,

1941
01:21:35,116 --> 01:21:37,226
because it will follow if
we make users delighted.

1942
01:21:38,516 --> 01:21:42,576
So -- so in the case of
these changes that me make,

1943
01:21:42,576 --> 01:21:43,806
something that gives
us the courage to stick

1944
01:21:43,806 --> 01:21:45,196
to our strategic
guns is if we see

1945
01:21:45,196 --> 01:21:47,576
that users really
love the features.

1946
01:21:47,576 --> 01:21:48,446
That they're really using them,

1947
01:21:48,446 --> 01:21:50,336
that it's really making a
difference and helping people.

1948
01:21:51,106 --> 01:21:53,026
And it also helps to
actually just pay attention

1949
01:21:53,026 --> 01:21:54,536
to what people say
and realize that, oh,

1950
01:21:54,536 --> 01:21:55,556
we actually could fix that.

1951
01:21:55,636 --> 01:21:57,696
It's in our power
to solve a problem

1952
01:21:57,696 --> 01:21:59,176
that the new interface
has created for you.

1953
01:21:59,496 --> 01:22:00,946
And so we do that too.

1954
01:22:01,856 --> 01:22:03,506
And I suspect I'm
running out of time.

1955
01:22:03,506 --> 01:22:03,936
>> Indeed.

1956
01:22:03,936 --> 01:22:05,586
But I think you can
stick around for a bit

1957
01:22:05,676 --> 01:22:07,716
and answer questions one on one?

1958
01:22:07,896 --> 01:22:09,936
Well, thank you so much,
Jocelyn, for joining us today.

1959
01:22:10,146 --> 01:22:10,436
>> My pleasure.

1960
01:22:11,516 --> 01:22:15,046
[ Applause ]

1961
01:22:15,546 --> 01:22:16,896
>> Thanks so much.

1962
01:22:16,946 --> 01:22:17,716
This is CS 50.

1963
01:22:17,716 --> 01:22:18,406
We'll see you Wednesday.

1964
01:22:18,606 --> 01:22:20,566
And Jocelyn will be up
here, up front for a while.

1965
01:22:20,916 --> 01:22:23,836
Thank you.