1
00:00:09,476 --> 00:00:10,556
>> David Malan: All right.

2
00:00:10,706 --> 00:00:13,036
Welcome back to CS 50.

3
00:00:13,036 --> 00:00:15,966
This is the end of week nine
and believe it or not we have

4
00:00:15,966 --> 00:00:17,506
but three lectures left.

5
00:00:17,666 --> 00:00:20,456
So there's today, there's Monday

6
00:00:20,876 --> 00:00:24,396
which will be our
final new material.

7
00:00:24,456 --> 00:00:26,336
The next Wednesday is a holiday.

8
00:00:26,336 --> 00:00:28,296
The Monday thereafter
will be a slate

9
00:00:28,296 --> 00:00:30,286
of guest lectures
by other CS faculty.

10
00:00:30,496 --> 00:00:32,496
We'll be talking a little bit
about the courses you can take

11
00:00:32,686 --> 00:00:35,146
after 50 and what
more there is outside

12
00:00:35,146 --> 00:00:36,166
of this particular course.

13
00:00:36,486 --> 00:00:37,886
After that we have the quiz.

14
00:00:37,886 --> 00:00:40,126
Then we have the
week of Thanksgiving.

15
00:00:40,676 --> 00:00:43,886
Our final lecture that
Monday and then that's it.

16
00:00:44,046 --> 00:00:45,416
No lectures after Thanksgiving.

17
00:00:45,416 --> 00:00:47,786
I know. So sad for us CS 50.

18
00:00:48,026 --> 00:00:50,446
So hopefully my voice will
carry us through this lecture.

19
00:00:50,446 --> 00:00:53,886
I actually feel fine but my
voice kind of trailed off

20
00:00:53,886 --> 00:00:56,946
at the end of Monday and hasn't
really come back so I'll try

21
00:00:56,946 --> 00:00:58,786
to get us through a
few announcements here.

22
00:00:59,096 --> 00:01:00,956
The first of which
is your pre-proposals

23
00:01:00,956 --> 00:01:04,356
for the final project is due
this Monday by email 11 AM.

24
00:01:04,356 --> 00:01:06,266
Realize it's meant to
be a pretty casual thing

25
00:01:06,266 --> 00:01:08,316
where you really just touch
base with your teaching fellow

26
00:01:08,486 --> 00:01:10,466
and let him or her know
what you're thinking.

27
00:01:10,466 --> 00:01:12,836
So look at the PDF that's
on the course's website

28
00:01:12,836 --> 00:01:15,456
under final project for
the directions there.

29
00:01:15,736 --> 00:01:18,816
We've added to the course's
roster of seminars one other

30
00:01:18,816 --> 00:01:21,086
so Apple Computer, Inc.

31
00:01:21,086 --> 00:01:23,526
is actually going to send one
of their own trainers to campus

32
00:01:23,526 --> 00:01:25,136
to meet with any number
of you who would like.

33
00:01:25,446 --> 00:01:26,406
We've listed it here.

34
00:01:26,406 --> 00:01:29,076
It's called Software Development
for the iPhone and iPod Touch.

35
00:01:29,116 --> 00:01:30,736
The date and time
will be posted there.

36
00:01:31,156 --> 00:01:34,206
You can still RSVP via the
course's website and here

37
00:01:34,506 --> 00:01:38,296
and this is meant to be a
supplement to the seminar

38
00:01:38,296 --> 00:01:41,836
that our own teaching fellows
will already be holding a week

39
00:01:41,836 --> 00:01:42,576
or so prior.

40
00:01:42,576 --> 00:01:45,436
So realize that's now
on the agenda and also

41
00:01:45,436 --> 00:01:48,136
if you haven't taken advantage
of these yet by all means curl

42
00:01:48,136 --> 00:01:51,166
up with one of the videos from
years past or this year or drop

43
00:01:51,166 --> 00:01:53,546
by in person and they're
meant to seed you with ideas

44
00:01:53,546 --> 00:01:55,216
for your own final project.

45
00:01:55,896 --> 00:01:59,136
We have dinner probably the last
dinner given how quickly term is

46
00:01:59,136 --> 00:02:01,306
ending this year will
be tonight in Mather.

47
00:02:01,306 --> 00:02:03,786
There's still time to
RSVP at that URL 6 PM.

48
00:02:04,036 --> 00:02:06,426
You'll meet a couple of other
CS faculty who will be there

49
00:02:06,426 --> 00:02:07,736
to have casual chitchat.

50
00:02:07,736 --> 00:02:09,536
Mather's masters will
be in attendance as well

51
00:02:09,536 --> 00:02:12,236
as some TF's, myself
and some CAs.

52
00:02:12,576 --> 00:02:17,556
So, Halloween is behind us
and I was emailed by one

53
00:02:17,556 --> 00:02:20,666
of the course's teaching fellows
who delighted and we delighted

54
00:02:20,666 --> 00:02:26,736
in her choice of costume for
this particular Halloween.

55
00:02:27,106 --> 00:02:32,076
She, our own Rose,
went as a wall cat

56
00:02:33,056 --> 00:02:34,736
so here's is our own
Rose but what's funnier

57
00:02:34,736 --> 00:02:36,906
when she sent me these photos
and she gave us her blessing

58
00:02:36,906 --> 00:02:38,566
to reveal her costume, was

59
00:02:38,566 --> 00:02:40,716
that what did she
have to eat that day?

60
00:02:40,716 --> 00:02:43,926
Well she indeed had a
cheeseburger while dressed

61
00:02:43,926 --> 00:02:47,626
as such so congrats on
that particular costume.

62
00:02:47,906 --> 00:02:50,576
Alright. So it keeps coming
as sort of a surprise to us

63
00:02:50,576 --> 00:02:51,786
that some students are surprised

64
00:02:51,786 --> 00:02:53,646
that we actually have
software available

65
00:02:53,646 --> 00:02:56,236
on the course's website which
I'll visit on this one here.

66
00:02:56,666 --> 00:02:59,866
Among the juicy opportunities
here a lot of it,

67
00:02:59,916 --> 00:03:02,886
most of it is actually freely
available software but thanks

68
00:03:02,886 --> 00:03:05,296
to some friends that
we have in industry,

69
00:03:05,296 --> 00:03:06,616
Microsoft, VMware and others.

70
00:03:06,616 --> 00:03:09,306
You can actually download for
instance Windows 7 so those

71
00:03:09,306 --> 00:03:12,176
of you with PCs who would
actually like to get the hell

72
00:03:12,176 --> 00:03:13,976
out of Vista and start
putting Windows 7

73
00:03:13,976 --> 00:03:15,996
on your computer it is
now available there.

74
00:03:16,306 --> 00:03:18,606
Just follow those
directions but more exciting

75
00:03:18,606 --> 00:03:21,476
than that is a project that
our own Yuhki Yamashita's been

76
00:03:21,476 --> 00:03:21,846
working on.

77
00:03:21,846 --> 00:03:23,086
Oops, just spoiled it.

78
00:03:24,056 --> 00:03:27,776
So, we hypothesized or we
realize that despite years

79
00:03:27,776 --> 00:03:30,106
of promoting tools like
Shuttleboy or other apps

80
00:03:30,106 --> 00:03:33,316
that students in this class have
invented for finding shuttles,

81
00:03:33,576 --> 00:03:35,376
you know it's still a
relatively slow process

82
00:03:35,406 --> 00:03:39,616
to send a text message to SBoy
or to Polk Hall, CS50 Voice

83
00:03:39,616 --> 00:03:42,506
or certainly to pull up
that big piece of paper

84
00:03:42,506 --> 00:03:43,806
that Shuttle services
distributes

85
00:03:43,806 --> 00:03:46,116
for the Quad itself has
actually been distributing

86
00:03:46,116 --> 00:03:47,816
for some time some
little pieces of paper

87
00:03:47,816 --> 00:03:49,366
that they've nicely
printed out with all

88
00:03:49,366 --> 00:03:51,646
of the Shuttle schedules or with
some of the Shuttle schedules.

89
00:03:51,836 --> 00:03:54,366
Well because we had this
data in our own database

90
00:03:54,626 --> 00:03:58,226
and because we being geeks like
playing with datasets and trying

91
00:03:58,226 --> 00:04:01,466
to visualize it, well our own
teaching fellow Yuhki came

92
00:04:01,466 --> 00:04:05,556
up with this much daresay
more sophisticated design we

93
00:04:05,556 --> 00:04:06,186
like to think.

94
00:04:06,186 --> 00:04:07,486
It's not blurry in person.

95
00:04:07,486 --> 00:04:09,076
Let's try and zoom out on this.

96
00:04:10,576 --> 00:04:14,756
So what we have here on the
left is Shuttleboy Card the Quad

97
00:04:14,756 --> 00:04:18,496
edition 2009 to 2010 and it
contains all the information

98
00:04:18,496 --> 00:04:21,136
that you might want to have
in order to go from Mem Hall,

99
00:04:21,196 --> 00:04:24,516
from Lamont, from Boylston,
from Quad either on weekdays

100
00:04:24,516 --> 00:04:25,976
or if you flip it
over he did one

101
00:04:25,976 --> 00:04:29,326
of these London Underground type
visualizations of the map itself

102
00:04:29,606 --> 00:04:31,816
so you can find out
this and way more

103
00:04:31,816 --> 00:04:34,016
than any Shuttle schedule
you've actually ever seen

104
00:04:34,106 --> 00:04:36,086
and it's even printed
on thin plastic

105
00:04:36,346 --> 00:04:40,276
so that it will endure
your own rugged lifestyle.

106
00:04:40,276 --> 00:04:45,066
So what we're going to do if you
would like this kind of souvenir

107
00:04:45,066 --> 00:04:48,886
from the course, when you exit
today, Quad people should exit

108
00:04:48,886 --> 00:04:51,166
that way, River people
should exit that way

109
00:04:51,166 --> 00:04:53,986
and our own teaching fellows
will hand you out a card

110
00:04:53,986 --> 00:04:55,546
if you would like and
you're welcome to grab one

111
00:04:55,546 --> 00:04:58,496
for a roommate or a friend
since we have plenty.

112
00:04:59,376 --> 00:05:02,716
So, just a little something
off our CS 50 production line.

113
00:05:02,956 --> 00:05:05,166
In fact, coming soon,
more on this in a week,

114
00:05:05,166 --> 00:05:10,666
it's kind of a tradition in the
course to have a store of sorts.

115
00:05:10,666 --> 00:05:13,216
So we do have as you've
seen in the videos of Jen,

116
00:05:13,216 --> 00:05:15,776
Sue and others our own line
of apparel so this too.

117
00:05:15,776 --> 00:05:16,676
Wait a minute.

118
00:05:16,676 --> 00:05:17,706
What's going on, oh?

119
00:05:17,706 --> 00:05:18,566
Got to make fun of me.

120
00:05:18,566 --> 00:05:19,246
Looks great to me.

121
00:05:19,606 --> 00:05:23,446
Our own line of apparel so we
will soon have such souvenirs

122
00:05:23,446 --> 00:05:25,056
as these for you guys as well.

123
00:05:25,106 --> 00:05:27,986
Just a little memento
so more on that to come.

124
00:05:27,986 --> 00:05:29,346
Alright. What else
do we have here?

125
00:05:29,616 --> 00:05:30,656
So the Big Boards.

126
00:05:31,556 --> 00:05:34,816
So Charles, very
disappointing performance

127
00:05:34,816 --> 00:05:36,416
over the past 48 hours.

128
00:05:36,416 --> 00:05:38,096
[ Laughter ]

129
00:05:38,096 --> 00:05:40,436
Charles has been
blown out of the water

130
00:05:40,806 --> 00:05:46,096
with a mere 37 billion dollars,
up a significant percent.

131
00:05:46,346 --> 00:05:49,106
Allen though is at let's see,
millions, billions, trillions,

132
00:05:49,336 --> 00:05:52,506
quadrillions, 3 quintillion
dollars

133
00:05:52,876 --> 00:05:56,016
so your classmates are very
cleverly with a I daresay a bit

134
00:05:56,016 --> 00:05:59,306
of too much free time figured
out all of the various exploits

135
00:05:59,306 --> 00:06:00,906
that you can wage
against this Big Board

136
00:06:00,906 --> 00:06:02,436
which again is meant
to be for fun.

137
00:06:02,726 --> 00:06:05,326
More holes have been found in
it this year than any before

138
00:06:05,726 --> 00:06:07,826
and if you actually click
on your classmates names,

139
00:06:07,826 --> 00:06:09,356
you'll see what they're doing.

140
00:06:09,356 --> 00:06:11,506
Among the things they're
doing is trading things

141
00:06:11,506 --> 00:06:13,506
that we probably shouldn't
have let them trade

142
00:06:13,506 --> 00:06:14,906
because they're not
actually stocks.

143
00:06:14,906 --> 00:06:18,986
They were simply volumes which
Yahoo happens to conflate

144
00:06:18,986 --> 00:06:22,046
as to actual changes in
price but power to you.

145
00:06:22,046 --> 00:06:25,056
But we did run against, run up
against an interesting limit.

146
00:06:25,326 --> 00:06:29,386
Charles kind of bowed out when
he maxed out the size of an int.

147
00:06:29,926 --> 00:06:33,466
I will scroll down here if
the internet cooperates.

148
00:06:34,006 --> 00:06:36,236
You'll notice that it got
curious that if you scrolled

149
00:06:36,236 --> 00:06:40,626
down here he started buying only
as many as two billion shares

150
00:06:40,626 --> 00:06:44,706
at a time 2 to the 31 minus
1 and this was a problem

151
00:06:44,706 --> 00:06:47,706
and Charles very kindly wrote us
to report this bug in our system

152
00:06:47,706 --> 00:06:50,386
that we didn't support volumes
greater than 2 billion shares.

153
00:06:50,426 --> 00:06:52,426
[ Laughter ]

154
00:06:52,466 --> 00:06:54,936
So we since removed
that limitation

155
00:06:54,936 --> 00:06:59,236
and are now using long longs
essentially 64 bit shares

156
00:06:59,656 --> 00:07:04,026
or 64 bit values so we'll
see how this ends up.

157
00:07:04,076 --> 00:07:06,086
We only have so wide
of a website

158
00:07:06,086 --> 00:07:10,006
so we'll see how well this works
out but congrats to for those

159
00:07:10,056 --> 00:07:13,386
who made it on the Big Board at
all even if you were down there

160
00:07:13,386 --> 00:07:14,976
at the bottom, that
too was to your credit

161
00:07:15,276 --> 00:07:17,346
and we'll probably
visit those numbers

162
00:07:17,346 --> 00:07:18,356
at the end of the course.

163
00:07:18,876 --> 00:07:21,426
Alright, so we've been talking
a lot about the internet

164
00:07:21,856 --> 00:07:25,036
and we have sort of
taken for granted

165
00:07:25,036 --> 00:07:27,156
that there's this infrastructure
that gets data from point A

166
00:07:27,156 --> 00:07:29,576
to point B. So what I thought
I'd do really quickly is just

167
00:07:29,576 --> 00:07:32,576
give you a sense of what it
means to go from point A to B.

168
00:07:32,796 --> 00:07:34,506
So I've simply SSH
to a window here.

169
00:07:34,506 --> 00:07:35,666
The font is intentionally small.

170
00:07:35,666 --> 00:07:37,126
I'll zoom in in a
second but I'm going

171
00:07:37,126 --> 00:07:39,246
to run a certain command
called traceroute.

172
00:07:39,736 --> 00:07:41,606
That command is actually looks

173
00:07:41,656 --> 00:07:44,696
like my internet connection
died there so let me stall ever

174
00:07:44,696 --> 00:07:46,666
so slightly and go to one

175
00:07:46,666 --> 00:07:48,976
of the Harvard Computer
Society servers here

176
00:07:48,976 --> 00:07:52,106
where I also have an account
and I'm going to go ahead

177
00:07:52,106 --> 00:07:54,996
and run a command called
traceroute, all one word

178
00:07:55,156 --> 00:07:56,316
and I'm going to
type in something

179
00:07:56,316 --> 00:07:59,666
like dub dub dub cnn.com
because I know it's a website.

180
00:07:59,666 --> 00:08:02,546
Kind of curious as to how
I get from point A Sanders

181
00:08:02,766 --> 00:08:04,986
to point B cnn.com
and if I now zoom

182
00:08:04,986 --> 00:08:08,576
in on this the output you see
from traceroute is row by row

183
00:08:08,576 --> 00:08:11,126
by row of all of the
so-called hops between points A

184
00:08:11,126 --> 00:08:13,896
and B. Each hop represents
that thing called a router,

185
00:08:14,136 --> 00:08:16,696
which recall from last Monday
is just this fancy computer,

186
00:08:16,696 --> 00:08:19,416
lots of them, on the internet
that essentially takes data in

187
00:08:19,636 --> 00:08:21,726
and then sends data out
and it might go this way

188
00:08:21,726 --> 00:08:22,756
or this way or this way.

189
00:08:22,976 --> 00:08:25,376
That's what a router's job
is in life, to route data

190
00:08:25,436 --> 00:08:28,786
in the appropriate direction but
what's neat about traceroute is

191
00:08:28,786 --> 00:08:33,426
that you can see every server,
every router that your data,

192
00:08:33,426 --> 00:08:38,176
your instant message, your
email passes through to get

193
00:08:38,176 --> 00:08:40,946
from point A to B. So it's
a little cryptic looking

194
00:08:40,946 --> 00:08:42,926
but these are just
internet domain names.

195
00:08:43,226 --> 00:08:46,076
At the top left here we
have the very first row,

196
00:08:46,076 --> 00:08:49,236
number one at top left, 140.247.

197
00:08:49,456 --> 00:08:49,896
something.

198
00:08:50,126 --> 00:08:51,556
Well that's a Harvard address.

199
00:08:51,556 --> 00:08:55,006
Harvard actually owns
65,000 plus IP addresses

200
00:08:55,006 --> 00:08:55,636
which are those things

201
00:08:55,636 --> 00:08:57,746
that uniquely identify
computers on the internet.

202
00:08:58,096 --> 00:08:59,746
That's unfortunate.

203
00:08:59,986 --> 00:09:03,126
We pale in comparison to our
friends down the road MIT

204
00:09:03,346 --> 00:09:06,456
who actually have millions of
IP addresses at their disposal

205
00:09:06,456 --> 00:09:08,706
such that any of your MIT
friends are actually welcome

206
00:09:08,706 --> 00:09:11,366
to have as many IP
addresses as they want.

207
00:09:11,366 --> 00:09:14,046
Harvard is literally running
out but such is the case

208
00:09:14,046 --> 00:09:14,936
of the internet today.

209
00:09:15,216 --> 00:09:16,906
But that's just one
of our IPs and then

210
00:09:16,906 --> 00:09:18,956
in each hop thereafter
is the name of a router.

211
00:09:18,956 --> 00:09:23,696
So the first number two is core
hyphen one hyphen gw whatever

212
00:09:23,966 --> 00:09:26,616
so gw gateway, synonym
for router.

213
00:09:26,616 --> 00:09:28,696
Number four, three is border.

214
00:09:28,906 --> 00:09:30,966
That just means it's
probably a router literally

215
00:09:30,966 --> 00:09:32,596
on the periphery,
the border of campus.

216
00:09:32,596 --> 00:09:33,976
Four is unknown.

217
00:09:33,976 --> 00:09:36,366
Sometimes routers just, they
don't want to tell you anything

218
00:09:36,366 --> 00:09:37,976
about themselves so
you get these stars

219
00:09:38,286 --> 00:09:40,466
but then we get row five.

220
00:09:40,706 --> 00:09:44,056
It says quest.net so
this is just a local ISP

221
00:09:44,056 --> 00:09:46,806
that Harvard has some kind
of connection to get data

222
00:09:46,806 --> 00:09:47,946
to other people in the world.

223
00:09:48,326 --> 00:09:51,246
Finally we can move to line
seven after some stars.

224
00:09:51,246 --> 00:09:53,976
Still in quest and then what
city do we apparently end

225
00:09:53,976 --> 00:09:55,216
up in in row eight?

226
00:09:56,926 --> 00:10:00,926
So San Jose which actually
probably not California

227
00:10:00,926 --> 00:10:04,986
because then in row nine
we end up in Newark,

228
00:10:04,986 --> 00:10:07,666
New Jersey so I'm going to
guess there's another San Jose

229
00:10:07,666 --> 00:10:10,266
somewhere but we're staying on
the east coast it seems here

230
00:10:10,416 --> 00:10:11,926
and then if you follow
the lines,

231
00:10:12,146 --> 00:10:14,396
we eventually hit
Washington DC it seems.

232
00:10:14,396 --> 00:10:17,656
We hit Atlanta and then it
starts to become all stars

233
00:10:17,656 --> 00:10:19,406
which means the routers
are getting quiet

234
00:10:19,406 --> 00:10:21,336
or CNN doesn't really want
us to know any more details

235
00:10:21,336 --> 00:10:24,066
but it seems a reasonable
hypothesis that point B,

236
00:10:24,126 --> 00:10:27,136
cnn.com in this case
is in the Atlanta area.

237
00:10:27,316 --> 00:10:29,986
Now how long did it take for
data to get from point A to B?

238
00:10:30,166 --> 00:10:33,096
Well that's what these numbers
to the right of the names mean.

239
00:10:33,306 --> 00:10:36,486
When it says 27 milliseconds,
it literally means

240
00:10:36,486 --> 00:10:39,036
that if you just emailed
your friend at CNN.com,

241
00:10:39,036 --> 00:10:41,176
that email took 27 milliseconds

242
00:10:41,526 --> 00:10:42,976
to get there and
that's damn fast.

243
00:10:43,206 --> 00:10:45,886
You can appreciate in the real
world how many hours it takes

244
00:10:45,886 --> 00:10:48,976
for humans to move that
distance but let's try

245
00:10:48,976 --> 00:10:50,786
to see even a number
that's more striking.

246
00:10:51,016 --> 00:10:54,386
Instead of cnn.com
what about cnn.co.jp.

247
00:10:54,726 --> 00:10:56,506
So their Japan news office.

248
00:10:56,506 --> 00:10:58,106
Let me go ahead and hit enter.

249
00:10:58,646 --> 00:11:00,526
We'll see some similar
hops initially

250
00:11:00,706 --> 00:11:03,536
because presumably data follows
some kind of deterministic path

251
00:11:03,536 --> 00:11:05,046
until it reaches
the bigger internet

252
00:11:05,376 --> 00:11:08,066
and now we quickly got
a bunch more results.

253
00:11:08,486 --> 00:11:12,206
Tell me where, let's see,
we went from rows one,

254
00:11:12,206 --> 00:11:13,326
two and three in Harvard.

255
00:11:13,646 --> 00:11:16,356
Then just an IP address
in five and seven.

256
00:11:16,446 --> 00:11:19,366
Don't know where those are
necessarily and then we get

257
00:11:19,366 --> 00:11:24,516
to sjc so what's interesting
between sjc, line seven

258
00:11:24,516 --> 00:11:29,066
and eight is that we seem to
have gone kind of a distance.

259
00:11:29,066 --> 00:11:31,506
Notice in line seven,
it took six millisecond

260
00:11:31,556 --> 00:11:32,356
to get where we were.

261
00:11:32,636 --> 00:11:34,166
Line eight how many
milliseconds?

262
00:11:35,376 --> 00:11:36,956
So, thirty-five milliseconds.

263
00:11:36,956 --> 00:11:40,916
So that's a [inaudible] so
sjc is probably San Jose,

264
00:11:40,916 --> 00:11:42,196
California in this case.

265
00:11:42,246 --> 00:11:45,076
People tend to use airport codes
for their router's names just

266
00:11:45,076 --> 00:11:48,756
by convention but what's really
cool is what apparently is

267
00:11:48,756 --> 00:11:53,816
in between hops nine and ten?

268
00:11:54,036 --> 00:11:55,476
Just infer from the numbers.

269
00:11:56,296 --> 00:11:57,166
Kind of jumps right.

270
00:11:57,166 --> 00:11:59,106
Thirty-five milliseconds
to fast forward

271
00:11:59,106 --> 00:12:02,166
to like 186 milliseconds,
a couple rows later.

272
00:12:03,396 --> 00:12:05,386
Yeah. There's kind of
a big body of water.

273
00:12:05,386 --> 00:12:08,026
It's the Pacific Ocean so
there are these transpacific

274
00:12:08,026 --> 00:12:09,506
and there's transatlantic
cables,

275
00:12:09,506 --> 00:12:12,356
there's satellites these days
that get data from points A

276
00:12:12,356 --> 00:12:14,696
to really far points away B

277
00:12:14,756 --> 00:12:17,766
so in this case you can
literally see empirically the

278
00:12:17,766 --> 00:12:20,256
actual distance and the body
of water that's apparently

279
00:12:20,256 --> 00:12:23,746
between us and the Japanese news
office for CNN because finally

280
00:12:23,746 --> 00:12:25,766
when we get all the way to
the bottom, it wasn't a fluke.

281
00:12:25,766 --> 00:12:28,156
Pretty much every hop
thereafter takes a hundred,

282
00:12:28,386 --> 00:12:31,726
eighty or so milliseconds so
there's a pretty consistent gap

283
00:12:31,896 --> 00:12:34,076
between that point
A and point B.

284
00:12:34,326 --> 00:12:36,446
So I won't show you this whole
film but if you like this kind

285
00:12:36,446 --> 00:12:38,366
of stuff there's actually
a fun movie we've linked

286
00:12:38,366 --> 00:12:41,606
on the course's website
to something some folks

287
00:12:41,606 --> 00:12:44,546
from Ericsson, the mobile
company years ago made.

288
00:12:44,546 --> 00:12:46,356
I thought I'd give you this
little one minute teaser

289
00:12:46,356 --> 00:12:48,676
of how things really
work underneath the hood.

290
00:12:48,676 --> 00:12:50,676
It's sort of half-fun
but half-serious.

291
00:12:50,676 --> 00:12:51,836
There's some juicy
stuff in there.

292
00:12:52,276 --> 00:12:58,686
So, give me one second to
give us some audio here and.

293
00:12:59,516 --> 00:13:24,266
[ Music ]

294
00:13:24,766 --> 00:13:49,516
[ Audio ]

295
00:13:50,016 --> 00:13:50,083
[ Laughter ]

296
00:13:50,866 --> 00:13:53,486
So it is especially interesting
the five minute version

297
00:13:53,486 --> 00:13:56,836
of that video if you are curious
how the internet really works

298
00:13:56,836 --> 00:13:57,616
underneath things.

299
00:13:57,926 --> 00:14:01,606
So we've had a number of
problems that's the last

300
00:14:01,606 --> 00:14:05,006
of which is coming up very
soon so Problem Set 8 will

301
00:14:05,006 --> 00:14:07,126
in fact be your last and
let me just make one mention

302
00:14:07,126 --> 00:14:08,706
because it's kind of
historically the case

303
00:14:08,706 --> 00:14:10,636
for any class that
allows you to drop p sets.

304
00:14:10,916 --> 00:14:12,556
A lot of people cut
that last corner

305
00:14:12,556 --> 00:14:13,306
at the end of the semester.

306
00:14:13,306 --> 00:14:15,756
They figure my grades are
fine and I'm just going

307
00:14:15,916 --> 00:14:18,066
to enjoy this last week
or focus on other things.

308
00:14:18,466 --> 00:14:19,806
It is your prerogative

309
00:14:19,806 --> 00:14:22,046
so the course will just
drop your lowest P Set score

310
00:14:22,046 --> 00:14:23,656
and if it's zero, that's
the one that will go,

311
00:14:23,886 --> 00:14:26,646
but just do realize that you've
come so damn far in a course

312
00:14:26,646 --> 00:14:29,256
like this that it would be
a shame, we the staff feel,

313
00:14:29,566 --> 00:14:31,126
to cut this final corner.

314
00:14:31,126 --> 00:14:33,816
You've got P Set 7 due Friday
or you can take a few late days.

315
00:14:34,056 --> 00:14:37,616
P Set 8 due next Friday and
that's it and it's in P Set 8

316
00:14:37,866 --> 00:14:40,006
that you'll finally
get a really good taste

317
00:14:40,006 --> 00:14:43,176
of what web development is like,
what client-side programming

318
00:14:43,176 --> 00:14:45,986
with JavaScript and this
technology called Ajax

319
00:14:45,986 --> 00:14:47,516
which we'll talk a bit
about today is about.

320
00:14:47,816 --> 00:14:51,736
So realize that it may very well
be your biggest regret in life

321
00:14:51,796 --> 00:14:53,326
to not submit P Set 8 so

322
00:14:53,326 --> 00:14:53,766
[ Laughter ]

323
00:14:53,766 --> 00:14:55,276
So consider that.

324
00:14:55,586 --> 00:14:58,006
Now as for P Set 5, you
know, we're kind of sad

325
00:14:58,006 --> 00:14:59,976
that no one's really stepped up

326
00:14:59,976 --> 00:15:02,746
and emailed the head teaching
fellows with some answers

327
00:15:03,066 --> 00:15:05,266
so you probably recovered
about 51

328
00:15:05,266 --> 00:15:07,116
or so photos for
this problem set.

329
00:15:07,326 --> 00:15:11,656
This of course is happy cat
here giving a lecture somewhere

330
00:15:11,656 --> 00:15:12,626
on campus.

331
00:15:12,876 --> 00:15:15,666
Zooming out you can see really
the context in which he's really

332
00:15:15,666 --> 00:15:17,136
in but I thought I'd take.

333
00:15:17,426 --> 00:15:18,626
Oh, damn it.

334
00:15:18,836 --> 00:15:19,756
Oh, there we, oh we're ok.

335
00:15:19,846 --> 00:15:20,426
Yeah, you can see.

336
00:15:21,056 --> 00:15:21,736
Wrong screen I thought.

337
00:15:22,166 --> 00:15:25,746
So I thought I'd give you
a chance to ask a question.

338
00:15:25,746 --> 00:15:27,036
Is there anyone you're
struggling

339
00:15:27,036 --> 00:15:31,816
with that we can push you
in the right direction with?

340
00:15:31,856 --> 00:15:32,846
Has anyone even tried?

341
00:15:32,846 --> 00:15:34,596
I know a couple of
sections have tried

342
00:15:34,596 --> 00:15:36,916
because I've been
photographed here after lecture

343
00:15:36,916 --> 00:15:38,876
and the TFs have been
hunted down in their houses.

344
00:15:39,246 --> 00:15:43,646
Yes? [Inaudible] The one
oh the cat on the tree.

345
00:15:43,646 --> 00:15:46,836
Alright. So sure we can indulge
in this for just a second.

346
00:15:46,836 --> 00:15:49,746
The cat on the tree
was a little later.

347
00:15:49,746 --> 00:15:50,716
Ah, this is cute.

348
00:15:51,296 --> 00:15:53,256
The only apple tree
that I've ever seen

349
00:15:53,256 --> 00:15:59,036
on Harvard's campus
and it is near.

350
00:15:59,036 --> 00:16:01,426
The hint is where
do all prefrosh go

351
00:16:01,426 --> 00:16:05,346
and behave really nice
and positively at?

352
00:16:05,816 --> 00:16:06,516
That place.

353
00:16:06,556 --> 00:16:07,056
That area.

354
00:16:07,666 --> 00:16:08,736
Alright. So go there.

355
00:16:08,916 --> 00:16:10,086
I'll give one more hint.

356
00:16:10,876 --> 00:16:11,516
One more hint.

357
00:16:12,676 --> 00:16:16,996
[Inaudible] The guy with
the, oh, right here.

358
00:16:17,346 --> 00:16:21,646
Oh. Takes computer science 1
if you want to know that answer

359
00:16:22,616 --> 00:16:23,496
or look it up in the catalog.

360
00:16:23,496 --> 00:16:25,016
[ Laughter ]

361
00:16:25,016 --> 00:16:27,756
Alright. One more, one more
because we took up a lot

362
00:16:27,756 --> 00:16:29,056
of time taking these photos.

363
00:16:29,556 --> 00:16:31,766
[ Laughter ]

364
00:16:32,266 --> 00:16:35,066
Any more? This one, actually
one of my favorite if only

365
00:16:35,066 --> 00:16:37,926
because it's sort of a faux
animation was this one.

366
00:16:37,926 --> 00:16:38,506
[ Laughter ]

367
00:16:38,506 --> 00:16:41,456
So you can just take
them anywhere.

368
00:16:41,456 --> 00:16:43,396
Alright. So anyhow hopefully
that's a little bit more

369
00:16:43,396 --> 00:16:44,856
of an incentive to
take a stroll.

370
00:16:44,856 --> 00:16:46,186
It's a beautiful day out today.

371
00:16:46,186 --> 00:16:47,856
You still have until
the last lecture to do

372
00:16:47,856 --> 00:16:50,926
that to realize that's a fun
way of wrapping up the course.

373
00:16:50,926 --> 00:16:53,676
Alright. So finally let's
come back to where we were

374
00:16:53,676 --> 00:16:56,586
which was websites and the
motivation for last week

375
00:16:56,586 --> 00:16:58,636
and this is really to take
the training wheels off

376
00:16:58,636 --> 00:17:01,186
and help you realize that after
this course you don't need

377
00:17:01,186 --> 00:17:02,596
someone handing you
a 20-page PDF

378
00:17:02,596 --> 00:17:05,336
to actually get something
interesting done.

379
00:17:05,616 --> 00:17:07,546
You can learn this stuff
yourself whether it's PHP,

380
00:17:07,546 --> 00:17:09,586
XHTML, Sequel, JavaScript.

381
00:17:09,836 --> 00:17:12,056
We'll empower you with
some final skills this week

382
00:17:12,056 --> 00:17:13,466
and next in order to do so.

383
00:17:13,746 --> 00:17:17,956
Some of your classmates though
posted what we greatly enjoyed

384
00:17:17,956 --> 00:17:20,746
as the sort of cannon
of good web design

385
00:17:21,086 --> 00:17:22,976
on the bulletin board
just the other day.

386
00:17:22,976 --> 00:17:25,326
I thought I'd share this for
you if only to incentivize you

387
00:17:25,326 --> 00:17:28,126
to check the bulletin
board a little more often

388
00:17:28,216 --> 00:17:31,836
and its elections just
happen and one of our own.

389
00:17:31,836 --> 00:17:34,916
Oh, actually someone is
running for 2010 here,

390
00:17:35,096 --> 00:17:40,186
republican who should not
have been let near Nano

391
00:17:40,506 --> 00:17:42,086
to make this particular web page

392
00:17:42,086 --> 00:17:44,496
so this is his platform
apparently.

393
00:17:45,886 --> 00:17:46,986
Oh damn it.

394
00:17:46,986 --> 00:17:48,026
[ Laughter ]

395
00:17:48,026 --> 00:17:48,546
Never learn.

396
00:17:48,596 --> 00:17:50,236
Alright let's rewind.

397
00:17:50,626 --> 00:17:52,286
So if you have been checking

398
00:17:52,286 --> 00:17:54,696
out the course's bulletin board
you might have clicked a little

399
00:17:54,696 --> 00:17:59,456
link like this, George
Hutchins for US Congress 2010.

400
00:17:59,456 --> 00:17:59,523
[ Laughter ]

401
00:17:59,523 --> 00:18:00,936
Real quality.

402
00:18:00,936 --> 00:18:01,856
[ Laughter ]

403
00:18:01,856 --> 00:18:05,026
What's funny is that instead
of having people endorse him,

404
00:18:05,026 --> 00:18:07,686
he's endorsing Fox
News at the top of this

405
00:18:08,186 --> 00:18:13,446
so you don't normally see
things like that so and worse,

406
00:18:13,446 --> 00:18:14,656
in this one I've been warned.

407
00:18:14,656 --> 00:18:17,376
Actually crashes some people's
browsers so beware what you do

408
00:18:17,376 --> 00:18:18,436
with your newfound skills.

409
00:18:19,026 --> 00:18:20,016
There's this one too.

410
00:18:20,016 --> 00:18:21,986
[ Laughter ]

411
00:18:21,986 --> 00:18:22,976
Which apparently they wanted

412
00:18:22,976 --> 00:18:25,326
to embed a YouTube video
right there for some reason.

413
00:18:25,326 --> 00:18:26,016
[ Laughter ]

414
00:18:26,016 --> 00:18:28,596
And then there's a whole
lot of quality content here.

415
00:18:30,226 --> 00:18:31,406
You go down here.

416
00:18:31,406 --> 00:18:32,566
[ Laughter ]

417
00:18:32,566 --> 00:18:36,316
Wait, wait but this is only
the vertical scroll bar

418
00:18:36,316 --> 00:18:37,196
because we have

419
00:18:37,696 --> 00:18:42,236
[ Laughter ]

420
00:18:42,736 --> 00:18:45,056
So if you're looking
for a template

421
00:18:45,106 --> 00:18:46,796
for your new web
page, there you go.

422
00:18:46,796 --> 00:18:47,676
[ Laughter ]

423
00:18:47,676 --> 00:18:50,256
Alright. So we got
to get serious here.

424
00:18:50,536 --> 00:18:53,736
Ok. So. In all seriousness
we covered a lot

425
00:18:54,156 --> 00:18:56,236
in the past several lectures.

426
00:18:56,236 --> 00:18:58,766
Let me pause and see are there
any questions, conceptual

427
00:18:58,766 --> 00:19:00,956
or otherwise so that we're
not forging ahead today

428
00:19:01,196 --> 00:19:03,856
with too much more stuff before
you get some big important

429
00:19:03,856 --> 00:19:04,636
question answered.

430
00:19:04,986 --> 00:19:07,266
So no shame in raising your hand
if you just have a question,

431
00:19:07,266 --> 00:19:08,606
you think it's a dumb
question, that's cool.

432
00:19:08,836 --> 00:19:11,466
Let's field it now and bring
everyone on the same page.

433
00:19:11,816 --> 00:19:16,386
Maybe that was too much emphasis
on asking a dumb question.

434
00:19:17,386 --> 00:19:18,196
No? Nothing?

435
00:19:18,506 --> 00:19:19,096
We're good?

436
00:19:19,096 --> 00:19:22,186
Alright. So, it's up
to you to pause us.

437
00:19:22,186 --> 00:19:26,806
So we promised in the last
examples from last time

438
00:19:27,036 --> 00:19:28,476
that we were going
to finally move

439
00:19:28,476 --> 00:19:31,076
to more seamless user
interfaces so the theme

440
00:19:31,076 --> 00:19:34,616
with Problem Set
7 is pretty much

441
00:19:34,616 --> 00:19:38,836
to mimic our approach
of the login example.

442
00:19:38,836 --> 00:19:41,916
You've got a login.php and
that submits to login2.php.

443
00:19:41,916 --> 00:19:46,576
We recommend taking register.php
and making it a register2.php

444
00:19:46,576 --> 00:19:49,336
and you have these pages
leading from one to the other

445
00:19:49,556 --> 00:19:51,406
and we promote that
especially for those of you

446
00:19:51,406 --> 00:19:52,786
who have never done
web stuff before

447
00:19:52,956 --> 00:19:54,486
because it's a pretty
simple mental model.

448
00:19:54,666 --> 00:19:56,466
Right, you fill out a
form, you click submit,

449
00:19:56,646 --> 00:19:58,176
you're whisked away
to another page

450
00:19:58,176 --> 00:20:00,166
and that other page is
what implements the logic.

451
00:20:00,426 --> 00:20:03,156
Whereas the first page is what
implements the form but we saw

452
00:20:03,156 --> 00:20:05,286
on Monday that or last week even

453
00:20:05,856 --> 00:20:09,126
that you can actually have
PHP files or forms submit

454
00:20:09,126 --> 00:20:11,916
to the same page so long
as you put your PHP logic

455
00:20:11,916 --> 00:20:13,346
at the top of that same file.

456
00:20:13,346 --> 00:20:15,386
So we looked at a couple
of frosh IMs examples

457
00:20:15,646 --> 00:20:17,156
that did not submit
to a new file.

458
00:20:17,376 --> 00:20:19,456
They submitted to themselves
and we just had to condition

459
00:20:19,456 --> 00:20:21,096
at the top that said if
you've been submitted

460
00:20:21,096 --> 00:20:23,746
to do this else show the form.

461
00:20:23,986 --> 00:20:28,016
So it's really up to you for P
Set 8 and your final projects

462
00:20:28,016 --> 00:20:30,166
if you do something web
based what approach you like

463
00:20:30,166 --> 00:20:32,146
but P Set 7 is generally
pretty simple

464
00:20:32,406 --> 00:20:34,436
but it's certainly not
very elegant especially

465
00:20:34,436 --> 00:20:36,426
when you're used to
websites these days

466
00:20:36,686 --> 00:20:40,586
that are far more seamless and
so what we promised at the end

467
00:20:40,586 --> 00:20:43,796
of Monday was that we could
start doing things like this.

468
00:20:43,796 --> 00:20:46,926
I'm going to pull up an
example in the Ajax directory

469
00:20:46,926 --> 00:20:48,566
for which you should
still have a print out,

470
00:20:48,946 --> 00:20:51,716
ajax1 kind of took a baby step.

471
00:20:52,286 --> 00:20:56,186
That sounds stupid, kind of
took a baby step toward doing a

472
00:20:56,276 --> 00:20:59,656
slightly more seamless
interface because you can type

473
00:20:59,656 --> 00:21:02,536
in something to this form
like goog, a stock symbol.

474
00:21:02,796 --> 00:21:05,136
Click get quote and
it does get submitted

475
00:21:05,396 --> 00:21:07,296
but I don't get whisked
away to a new page

476
00:21:07,296 --> 00:21:10,136
and instead apparently I
somehow submitted a form.

477
00:21:10,406 --> 00:21:13,836
Someone answered my query, some
server answered that query,

478
00:21:13,836 --> 00:21:17,826
gave me back a response but then
I the very same web page grabbed

479
00:21:17,826 --> 00:21:20,356
that response and
presented it to the user

480
00:21:20,356 --> 00:21:22,916
in this little alert popup
but the key takeaway was

481
00:21:23,196 --> 00:21:26,596
that the URL at the top
right never actually changed.

482
00:21:26,806 --> 00:21:28,676
So let's take a quick
peek underneath the hood.

483
00:21:28,926 --> 00:21:31,836
I would say that these little
pop ups are not terribly common

484
00:21:31,836 --> 00:21:34,076
but they certainly get
the job done quickly.

485
00:21:34,356 --> 00:21:36,446
So let's at least look at
this for a simple example.

486
00:21:36,446 --> 00:21:37,606
So this is ajax1.html.

487
00:21:37,606 --> 00:21:40,046
Let me fast forward to the form.

488
00:21:40,536 --> 00:21:43,646
This is all it took for me to
whip up this very simple webpage

489
00:21:43,906 --> 00:21:45,946
but notice that I've done
a couple of new things.

490
00:21:46,276 --> 00:21:49,776
What is absent or rather what
is empty quotes right now?

491
00:21:50,116 --> 00:21:51,096
What attribute?

492
00:21:52,256 --> 00:21:54,526
So action and our action
is normally the thing

493
00:21:54,526 --> 00:21:57,356
that says what file should
I submit this form to,

494
00:21:57,596 --> 00:22:00,176
but in this case I don't want
the browser to submit the form

495
00:22:00,176 --> 00:22:02,666
in a typical way so I actually
don't really care what the

496
00:22:02,666 --> 00:22:03,316
action is.

497
00:22:03,316 --> 00:22:05,246
I left it in because for my code

498
00:22:05,246 --> 00:22:10,456
to be valid XHTML the w3c
standards, that entity that sort

499
00:22:10,456 --> 00:22:12,066
of dictates what the
web looks should look

500
00:22:12,066 --> 00:22:15,246
like underneath the hood, its,
they say you need that attribute

501
00:22:15,366 --> 00:22:17,336
but they don't say I have
to put a real filename there

502
00:22:17,336 --> 00:22:18,366
so I'm just leaving it blank

503
00:22:18,666 --> 00:22:21,936
because instead what I'm doing
is I'm using another attribute.

504
00:22:21,936 --> 00:22:24,086
An attribute that's
called an event handler

505
00:22:24,486 --> 00:22:25,976
so I can actually use things

506
00:22:25,976 --> 00:22:28,176
like on submit a
special attribute

507
00:22:28,176 --> 00:22:29,326
that kind of does what it says.

508
00:22:29,546 --> 00:22:31,666
On submission of this
form what should happen?

509
00:22:31,956 --> 00:22:34,566
The function called
quote should get called

510
00:22:34,566 --> 00:22:36,456
and in fact it looks
like a function call.

511
00:22:36,456 --> 00:22:39,676
Quotes open paren close
paren semi-colon return

512
00:22:39,676 --> 00:22:41,346
false semi-colon.

513
00:22:41,526 --> 00:22:42,806
Well why the return false?

514
00:22:42,806 --> 00:22:46,136
Well what I want to do here
is when this form is submitted

515
00:22:46,136 --> 00:22:47,346
by the user clicking the button

516
00:22:47,346 --> 00:22:49,146
or hitting Enter
I ultimately want

517
00:22:49,146 --> 00:22:51,146
to say no don't submit
that for real.

518
00:22:51,146 --> 00:22:54,686
Don't submit that sort of
1995 style too new web page.

519
00:22:55,006 --> 00:22:56,916
Let me intercept this submission

520
00:22:57,116 --> 00:22:58,916
and call this function
quote instead.

521
00:22:59,246 --> 00:23:02,466
If I instead return true
the form would get submitted

522
00:23:02,466 --> 00:23:05,176
as usual as though
there were no JavaScript

523
00:23:05,376 --> 00:23:06,946
or function calls here at all.

524
00:23:06,946 --> 00:23:09,616
So in fact this function
here quote is a snippet

525
00:23:09,616 --> 00:23:10,506
of JavaScript.

526
00:23:10,576 --> 00:23:13,846
A JavaScript now is a
client-side programming language

527
00:23:14,076 --> 00:23:15,196
so again to recap what

528
00:23:15,196 --> 00:23:17,806
that means is it's executed
by your own browser.

529
00:23:18,016 --> 00:23:21,436
It's not executed by the server
and the advantage of this is

530
00:23:21,436 --> 00:23:25,416
that you can still change the
user's interface once your web

531
00:23:25,416 --> 00:23:27,406
page has been downloaded
to their screen.

532
00:23:27,726 --> 00:23:30,766
So JavaScript can get embedded
into a web page like this.

533
00:23:31,116 --> 00:23:34,776
Again the tag that I'm
using here is script

534
00:23:34,776 --> 00:23:35,936
and this is the new thing

535
00:23:35,936 --> 00:23:38,356
that I can put inside my head
tag in addition to title.

536
00:23:38,686 --> 00:23:39,866
This is just some syntax

537
00:23:39,866 --> 00:23:42,126
that tells the browser don't
get confused by the following.

538
00:23:42,126 --> 00:23:42,756
This is code.

539
00:23:42,756 --> 00:23:46,086
This is not XHTML so if you see
things like less than signs,

540
00:23:46,086 --> 00:23:49,026
greater than signs don't
confuse those with tags.

541
00:23:49,026 --> 00:23:50,106
It's probably just math.

542
00:23:50,706 --> 00:23:52,836
So what am I doing here
to make all this happen.

543
00:23:53,386 --> 00:23:55,056
Well here's my quote function.

544
00:23:55,396 --> 00:23:58,756
Alright. It takes no arguments
and there is a few new pieces

545
00:23:58,756 --> 00:24:02,426
of syntax so unfortunately the
various browser manufacturers,

546
00:24:02,426 --> 00:24:04,666
we're never on the same
page initially as to how

547
00:24:04,666 --> 00:24:08,506
to implement Ajax so
Ajax is a technology

548
00:24:08,696 --> 00:24:10,326
that essentially
allows web pages

549
00:24:10,526 --> 00:24:15,746
to make additional http calls,
web calls from browser to server

550
00:24:16,096 --> 00:24:18,006
after your web page has loaded.

551
00:24:18,296 --> 00:24:19,566
Right up until now all

552
00:24:19,566 --> 00:24:22,406
of our examples have
involved clicking a link,

553
00:24:22,696 --> 00:24:25,106
pulling up a web page and then
the little globe or whatever

554
00:24:25,106 --> 00:24:26,576
in your browser stops spinning

555
00:24:26,576 --> 00:24:29,006
because the transaction is
complete and if you want

556
00:24:29,006 --> 00:24:30,576
to make another http request,

557
00:24:30,576 --> 00:24:32,806
you typically submit a
form or you click a link.

558
00:24:33,146 --> 00:24:35,936
What's cool about Ajax, this
technology, which is more

559
00:24:35,936 --> 00:24:38,156
of a buzzword than anything,
it's not a language you learn.

560
00:24:38,156 --> 00:24:40,446
It's just using JavaScript
in a different way.

561
00:24:40,916 --> 00:24:44,306
With JavaScripts can you
make additional http calls

562
00:24:44,506 --> 00:24:47,706
and grab more data on demand and
that's how Google maps works.

563
00:24:47,706 --> 00:24:51,296
When you click and drag the
map you briefly see those gray

564
00:24:51,296 --> 00:24:54,136
squares because Google hasn't
yet downloaded those graphics,

565
00:24:54,136 --> 00:24:56,316
those tiles for that
portion of the map.

566
00:24:56,566 --> 00:24:59,596
So Google wrote some JavaScript
that talks back to Google.com

567
00:24:59,596 --> 00:25:01,856
and says give me more tiles
from the northwest quadrant

568
00:25:01,856 --> 00:25:04,236
or wherever and then
the JavaScript embeds

569
00:25:04,236 --> 00:25:06,606
that additional data
in the web page.

570
00:25:06,816 --> 00:25:07,936
So how can we do this?

571
00:25:07,936 --> 00:25:09,446
It's actually relatively simple.

572
00:25:09,766 --> 00:25:14,106
We use a line of code like this,
xhr, could have called it foo,

573
00:25:14,106 --> 00:25:16,416
doesn't matter but in
general this stands

574
00:25:16,416 --> 00:25:19,726
for this XMLHttpRequest object.

575
00:25:20,286 --> 00:25:23,246
For now we won't go into much
detail about what XML really is

576
00:25:23,486 --> 00:25:26,086
or what an object really is
because the course is focused

577
00:25:26,086 --> 00:25:28,636
on not on object-oriented
programming

578
00:25:29,026 --> 00:25:30,866
but on procedural programming.

579
00:25:30,866 --> 00:25:33,826
If you've heard the two terms
but what that means for us is

580
00:25:33,826 --> 00:25:35,926
for now just take
the syntax on faith

581
00:25:35,926 --> 00:25:37,866
that this is a little something
new that we need to do.

582
00:25:38,276 --> 00:25:41,906
So, how can I start making
additional http calls

583
00:25:41,906 --> 00:25:44,916
from browser to server I need
to execute this line of code

584
00:25:45,266 --> 00:25:46,856
but there's a problem
and that problem

585
00:25:46,856 --> 00:25:48,086
in that case was Microsoft

586
00:25:48,086 --> 00:25:49,926
because Microsoft
decided no, no, no, no.

587
00:25:49,926 --> 00:25:53,626
If you want to actually make
additional http calls you can't

588
00:25:53,626 --> 00:25:54,576
use that line of code.

589
00:25:54,766 --> 00:25:56,476
You have to use this
second line of code.

590
00:25:56,756 --> 00:25:57,586
So this line of code

591
00:25:57,586 --> 00:26:01,056
that mentions this technology
called ActiveXObject is just the

592
00:26:01,056 --> 00:26:03,416
Microsoft way at least
for earlier versions

593
00:26:03,416 --> 00:26:06,456
of Internet Explorer that
you begin to gain access

594
00:26:06,456 --> 00:26:07,436
to this functionality.

595
00:26:07,686 --> 00:26:10,216
So for our purposes, just
take on faith if you want

596
00:26:10,216 --> 00:26:13,296
to use this technology called
Ajax whereby you can make

597
00:26:13,296 --> 00:26:16,336
additional http calls to the
server, you just kind of have

598
00:26:16,336 --> 00:26:17,656
to copy paste code like that

599
00:26:18,006 --> 00:26:21,456
but notice what I've done xhr
this variable which just stands

600
00:26:21,456 --> 00:26:23,306
for xml http request,

601
00:26:23,636 --> 00:26:25,956
notice that I defined
this variable globally.

602
00:26:26,166 --> 00:26:28,406
I defined it inside
my script elements,

603
00:26:28,446 --> 00:26:30,406
not inside the function itself.

604
00:26:30,836 --> 00:26:32,536
Ok. So at this point
in the story

605
00:26:32,896 --> 00:26:36,346
and by this point I mean right
here I now have a variable

606
00:26:36,626 --> 00:26:39,966
that allows me to make more
http calls to the server

607
00:26:40,126 --> 00:26:42,126
without the user
necessarily realizing it

608
00:26:42,306 --> 00:26:43,606
but I do do a sanity check.

609
00:26:43,836 --> 00:26:45,516
I make sure you know if
this person's running

610
00:26:45,516 --> 00:26:49,736
like Netscape 4.0 you know
I mean 1.0 I don't want them

611
00:26:49,736 --> 00:26:52,006
to just have some weird
unpredictable experience.

612
00:26:52,246 --> 00:26:54,786
Let me check for null
because if xhr is null

613
00:26:54,786 --> 00:26:57,516
that means this thing called
Ajax is just not supported

614
00:26:57,516 --> 00:26:58,286
by your browser.

615
00:26:58,566 --> 00:27:00,976
This probably won't happen to
most users today but if you're

616
00:27:00,976 --> 00:27:02,646
on a mobile phone
or a blackberry

617
00:27:02,646 --> 00:27:04,256
that just doesn't support
some of this stuff,

618
00:27:04,506 --> 00:27:05,776
you might very well
run into this

619
00:27:05,776 --> 00:27:08,096
so rigorous error checking
is always is a good thing.

620
00:27:08,446 --> 00:27:09,826
So there's not much
more to my code.

621
00:27:10,086 --> 00:27:12,956
The next thing I do here is this
and it's wrapping a little bit

622
00:27:12,956 --> 00:27:14,276
so let me just hit
Enter for a moment.

623
00:27:14,616 --> 00:27:16,416
I'm declaring a variable
called URL

624
00:27:16,816 --> 00:27:18,406
because what URL
do I want to get?

625
00:27:18,406 --> 00:27:21,046
Well the context here was
this very simple application.

626
00:27:21,256 --> 00:27:23,756
When the user hits Enter they've
given me a ticker symbol.

627
00:27:23,836 --> 00:27:27,256
I need to look up this current
stock price so what I'm going

628
00:27:27,256 --> 00:27:30,026
to do is steal our trick
from Yahoo and I'm going

629
00:27:30,026 --> 00:27:36,886
to actually say go to the
URL quote1.php?symbol equals

630
00:27:36,886 --> 00:27:40,446
and then in JavaScript the
concatenation operator is plus.

631
00:27:40,716 --> 00:27:41,816
In PHP it's dot.

632
00:27:42,216 --> 00:27:43,736
In JavaScript it's plus.

633
00:27:44,016 --> 00:27:46,826
Same exact thing though and
then what am I doing here?

634
00:27:46,826 --> 00:27:50,586
Well this is one new trick
because I want to pass

635
00:27:50,586 --> 00:27:56,056
to the server via get that
is via URL request I need

636
00:27:56,056 --> 00:27:58,846
to get the value that the
user typed into this form.

637
00:27:59,156 --> 00:28:01,026
What, how do I gain
access to goog?

638
00:28:01,216 --> 00:28:03,016
Well let's take a
quick look at the html

639
00:28:03,016 --> 00:28:04,396
because we must have
overlooked something.

640
00:28:04,396 --> 00:28:09,346
Ah, ok. So notice that besides
just putting this form in here,

641
00:28:09,666 --> 00:28:11,986
because I don't want the form
to actually get submitted,

642
00:28:12,186 --> 00:28:15,166
I will still want to
uniquely identify this field

643
00:28:15,416 --> 00:28:16,276
so I use this trick.

644
00:28:16,596 --> 00:28:21,016
I gave the input element in
ID, a unique ID, now it's kind

645
00:28:21,016 --> 00:28:21,986
of silly to say it's unique

646
00:28:21,986 --> 00:28:23,556
because there's really
nothing else in this page

647
00:28:23,736 --> 00:28:25,956
but from much larger
websites it should be unique

648
00:28:26,196 --> 00:28:30,516
so symbol is the key word I
want to use in my JavaScript

649
00:28:30,776 --> 00:28:36,606
because when I call this line
of code document.getElementById

650
00:28:36,606 --> 00:28:39,556
which you're going to get is
the element whose ID is symbol.

651
00:28:39,836 --> 00:28:41,266
Now that's an object in memory.

652
00:28:41,266 --> 00:28:44,566
That is this little textbox
in the browser's window.

653
00:28:44,806 --> 00:28:47,416
We actually want its
value inside of that box

654
00:28:47,816 --> 00:28:50,616
and so the syntax as we
saw Monday in JavaScript is

655
00:28:50,616 --> 00:28:52,096
to use the dot notation there.

656
00:28:52,446 --> 00:28:56,106
So in the end I first get that
object which is the textbox,

657
00:28:56,396 --> 00:28:59,436
then with the dot operator I
get its value and I can catenae

658
00:28:59,556 --> 00:29:03,326
that string goog in this
case to the end of this URL

659
00:29:04,006 --> 00:29:06,536
because my goal ultimately
is to request

660
00:29:06,536 --> 00:29:11,266
of the server a file called
quote1.php?symbol=goog.

661
00:29:11,686 --> 00:29:16,106
Ok? So finally, how do
I make this request?

662
00:29:16,396 --> 00:29:18,416
So first I tell the browser

663
00:29:18,736 --> 00:29:22,646
when you're done getting this
request call this event handler.

664
00:29:22,826 --> 00:29:25,846
An event handler is just a
function so in other words

665
00:29:25,846 --> 00:29:28,626
when you're done making
this call, get back to me

666
00:29:28,626 --> 00:29:31,526
with the answer by calling
a function called handler

667
00:29:31,736 --> 00:29:33,016
which I will write for you.

668
00:29:33,566 --> 00:29:36,466
Finally these last two lines
simply send the request.

669
00:29:36,936 --> 00:29:39,066
So, these two last
lines open a connection

670
00:29:39,066 --> 00:29:43,466
to the server using this method
called get, using this URL here

671
00:29:43,696 --> 00:29:46,586
and then it sends the
request and for the curious

672
00:29:46,766 --> 00:29:48,466
if you were using
that thing called post

673
00:29:48,466 --> 00:29:50,566
to do much bigger
operations, photographs

674
00:29:50,566 --> 00:29:51,696
or private information,

675
00:29:51,696 --> 00:29:54,306
something like that you
would instead put post here

676
00:29:54,306 --> 00:29:55,856
and you would put
the post data here.

677
00:29:56,136 --> 00:29:58,136
But I'll waive my hands
at that for this example.

678
00:29:58,516 --> 00:29:59,456
So what does this mean?

679
00:29:59,696 --> 00:30:00,836
I click the button submit.

680
00:30:01,376 --> 00:30:02,476
I typed in goog.

681
00:30:02,726 --> 00:30:05,956
The submission is intercepted
because of the on submit handler

682
00:30:06,136 --> 00:30:08,046
and my function called
quote is called.

683
00:30:08,416 --> 00:30:11,766
My quote function grabs that
text field, grabs its value,

684
00:30:11,906 --> 00:30:15,506
appends it to the end of that
URL for quote1.php and then

685
00:30:15,506 --> 00:30:16,986
because of this open code

686
00:30:17,196 --> 00:30:21,536
and this send code it makes a
request of my server CS50.net

687
00:30:21,896 --> 00:30:23,296
and then hopefully
the answer comes back.

688
00:30:23,806 --> 00:30:24,656
Well when the answer.

689
00:30:24,746 --> 00:30:26,076
Let's see what actually happens.

690
00:30:26,146 --> 00:30:27,296
Let me go ahead and
simulate this.

691
00:30:27,296 --> 00:30:30,476
I'm going to copy the URL into
a new window and I'm going

692
00:30:30,476 --> 00:30:35,086
to go literally to
quote1.php?goog Enter.

693
00:30:35,796 --> 00:30:39,446
What actually comes
oh, sorry, thank you.

694
00:30:40,026 --> 00:30:44,406
Quote symbol equals
goog so that's what I'm

695
00:30:44,406 --> 00:30:45,376
about to hit Enter on.

696
00:30:46,036 --> 00:30:49,656
Enter and what I get back
is just a very simple page.

697
00:30:49,656 --> 00:30:50,736
Let's look at the source code.

698
00:30:50,946 --> 00:30:52,246
There's no html.

699
00:30:52,246 --> 00:30:53,276
There's nothing in there.

700
00:30:53,516 --> 00:30:54,696
It's just a number.

701
00:30:54,986 --> 00:30:57,746
So apparently what the
server responds with thanks

702
00:30:57,746 --> 00:30:59,706
to quote1.php is just a number.

703
00:30:59,986 --> 00:31:03,426
So my goal in life now is to
make sure my JavaScript grabs

704
00:31:03,426 --> 00:31:06,066
that response and just
shows it in a little popup.

705
00:31:06,246 --> 00:31:07,196
So how do I do that?

706
00:31:07,516 --> 00:31:10,106
Well, here's my handler
function and it's very short.

707
00:31:10,546 --> 00:31:12,256
Notice I do two sanity checks.

708
00:31:12,526 --> 00:31:16,626
First I check if this object
which I declared earlier xhr

709
00:31:17,076 --> 00:31:19,086
if it's in the state number four

710
00:31:19,496 --> 00:31:21,546
so state number four
is just a value

711
00:31:21,546 --> 00:31:24,566
which means good things
happen, you got back a response.

712
00:31:25,076 --> 00:31:28,996
So that simply means that the
request was actually successful.

713
00:31:29,386 --> 00:31:32,446
So if it's successful
I then check for this.

714
00:31:32,716 --> 00:31:36,196
Was the status of this
request a value of 200.

715
00:31:36,506 --> 00:31:38,686
So four means I've
gotten a response,

716
00:31:38,906 --> 00:31:40,696
200 means it's a good response.

717
00:31:41,006 --> 00:31:41,916
What is 200?

718
00:31:41,916 --> 00:31:43,446
Well have you ever
visited a web page

719
00:31:43,816 --> 00:31:49,526
for instance cs50.net/complete
nonsense Enter.

720
00:31:50,006 --> 00:31:51,826
You get something
like this, not found.

721
00:31:51,826 --> 00:31:53,746
What do you see in the title bar
though of the page like this?

722
00:31:55,286 --> 00:31:58,196
So 404. You've probably seen
this number somewhere whether

723
00:31:58,196 --> 00:32:00,166
it's in the title bar or
in the web page itself.

724
00:32:00,256 --> 00:32:02,466
404 means file not found.

725
00:32:02,656 --> 00:32:04,546
You might have seen
other things like 500,

726
00:32:04,616 --> 00:32:07,076
500 internal server
error means David screwed

727
00:32:07,076 --> 00:32:09,166
up the configuration of
the server a long time ago

728
00:32:09,386 --> 00:32:11,896
and never realized that what
you should see there is a pretty

729
00:32:11,896 --> 00:32:14,156
page saying sorry,
file not found

730
00:32:14,466 --> 00:32:17,286
but the 500 means I
made a mistake on there.

731
00:32:17,506 --> 00:32:19,656
But there's other
codes, 403 which some

732
00:32:19,656 --> 00:32:22,106
of you might have seen already
with your own cloud accounts.

733
00:32:22,406 --> 00:32:24,296
Anyone know what
the 403 code means?

734
00:32:24,956 --> 00:32:27,056
It says forbidden usually.

735
00:32:27,056 --> 00:32:28,306
That's when you've messed up
chamad [assumed spelling].

736
00:32:28,696 --> 00:32:30,396
It's just means you
missed a step with chamad

737
00:32:30,396 --> 00:32:32,786
so chamad is relates to 403.

738
00:32:32,786 --> 00:32:34,286
404 means the file
doesn't exist.

739
00:32:34,526 --> 00:32:37,876
200 though is a good
thing and you never see it

740
00:32:37,876 --> 00:32:38,606
because you shouldn't.

741
00:32:38,606 --> 00:32:41,276
If good things happen you get
back a web page there is no

742
00:32:41,276 --> 00:32:42,416
error code to show you.

743
00:32:42,616 --> 00:32:46,866
So if we got back a response,
code is four and the status

744
00:32:46,866 --> 00:32:49,746
of that response is good,
200 what do I want to do?

745
00:32:49,946 --> 00:32:52,386
I simply want to call a
JavaScript function called alert

746
00:32:52,796 --> 00:32:55,466
and I want to pass to that alert
their string that came back.

747
00:32:56,026 --> 00:32:59,176
So how do you get at the content
the server is responding with?

748
00:32:59,466 --> 00:33:01,066
It simply is this notation.

749
00:33:01,306 --> 00:33:05,216
The name of the object you used
to get the data .responseText

750
00:33:06,106 --> 00:33:09,046
and now notice throughout this
code incidentally all this

751
00:33:09,046 --> 00:33:14,246
capitalization, the T there,
the E here and the B and the I,

752
00:33:14,316 --> 00:33:16,806
it's important so very
common mistake especially

753
00:33:16,806 --> 00:33:18,796
for the first doing this
stuff for the first time is

754
00:33:18,796 --> 00:33:19,976
to screw up capitalization.

755
00:33:20,226 --> 00:33:21,726
Always check something
simple like that.

756
00:33:22,266 --> 00:33:24,786
So at the end of the day it's
pretty underwhelming, right?

757
00:33:24,786 --> 00:33:26,956
Ok. Wow that's very
great website.

758
00:33:27,316 --> 00:33:30,306
Much more common these days as
to actually embed the answer

759
00:33:30,346 --> 00:33:31,786
in the web page for the user.

760
00:33:32,006 --> 00:33:34,446
So here I have a web page
whose source code is still

761
00:33:34,446 --> 00:33:35,126
pretty simple.

762
00:33:35,126 --> 00:33:38,466
Let me scroll down to the
XHTML and notice that what is

763
00:33:38,466 --> 00:33:41,436
in my web page at the
moment is the following.

764
00:33:41,716 --> 00:33:45,426
Again a symbol field that says
Id equals symbol so I copied

765
00:33:45,426 --> 00:33:48,076
and pasted that but notice the
one interesting difference.

766
00:33:48,386 --> 00:33:52,786
Notice I now say price and then
I have this other element span

767
00:33:52,856 --> 00:33:55,146
so you've seen me use
the element called div

768
00:33:55,146 --> 00:33:57,176
which says here comes a
division of the web page.

769
00:33:57,176 --> 00:33:58,176
Here's a bit rectangle.

770
00:33:58,176 --> 00:33:59,036
Put some stuff in it.

771
00:33:59,366 --> 00:34:00,656
A span is the same idea.

772
00:34:00,786 --> 00:34:03,896
Here's a placeholder for some
data but it doesn't force it

773
00:34:03,896 --> 00:34:05,096
to be on its own line.

774
00:34:05,096 --> 00:34:08,466
A span is what's called an
in-line element whereas a div is

775
00:34:08,466 --> 00:34:10,926
a block-level element which
just means a div takes

776
00:34:10,926 --> 00:34:12,216
up the whole width of the page,

777
00:34:12,436 --> 00:34:14,176
a span just goes
where you put it.

778
00:34:14,426 --> 00:34:16,496
So notice that the
text I put there

779
00:34:16,496 --> 00:34:19,436
in bold is too be determined.

780
00:34:19,706 --> 00:34:22,416
So my goal with this version
of the code is to actually type

781
00:34:22,416 --> 00:34:24,696
in something like goog and
not get an annoying popup

782
00:34:24,846 --> 00:34:29,296
but rather actually integrate
the response into the come on,

783
00:34:29,996 --> 00:34:35,866
into the, into the web page.

784
00:34:35,966 --> 00:34:37,816
Ok. So, internet was slow.

785
00:34:37,816 --> 00:34:40,716
Who knows what that
was, but not a bug.

786
00:34:40,836 --> 00:34:44,066
What happened here price got
embedded into the web page

787
00:34:44,066 --> 00:34:45,326
but what's interesting is this.

788
00:34:45,576 --> 00:34:47,446
Let me actually go
into my source code.

789
00:34:47,446 --> 00:34:51,546
View page source, scroll back
down and what's interesting is

790
00:34:51,546 --> 00:34:54,776
that the web page still
says to be determined.

791
00:34:55,116 --> 00:34:56,776
So this is kind of
an interesting thing.

792
00:34:56,986 --> 00:35:00,056
JavaScript again is a language
getting executed by the browser

793
00:35:00,056 --> 00:35:02,136
and yes it can change
the state of the world.

794
00:35:02,136 --> 00:35:03,786
It can change what's
inside the browser

795
00:35:04,076 --> 00:35:06,386
but it doesn't change
fundamentally what the server

796
00:35:06,386 --> 00:35:08,486
originally sent to the browser.

797
00:35:08,486 --> 00:35:10,486
That's why we still see
the original example.

798
00:35:10,886 --> 00:35:11,776
So how did I do this?

799
00:35:11,846 --> 00:35:12,976
Let's take a quick look.

800
00:35:12,976 --> 00:35:15,116
This is ajax2.html.

801
00:35:15,116 --> 00:35:16,616
Let me scroll down.

802
00:35:16,806 --> 00:35:18,516
This is the same exact
code we just looked

803
00:35:18,676 --> 00:35:20,026
at in the confines
of the browser.

804
00:35:20,356 --> 00:35:21,746
My function again called quote.

805
00:35:21,746 --> 00:35:23,576
Let me look up the quote here.

806
00:35:23,716 --> 00:35:24,776
Alright quote here.

807
00:35:24,776 --> 00:35:26,176
This is a copy paste,
all the same.

808
00:35:26,176 --> 00:35:27,936
Ah. Notice, you know what?

809
00:35:28,146 --> 00:35:30,556
I kind of let's see, no
that's actually the same.

810
00:35:30,556 --> 00:35:32,606
I just wrapped on
one line, same, same.

811
00:35:32,836 --> 00:35:34,706
It's only the handler
function that's different.

812
00:35:35,066 --> 00:35:36,986
So the one difference
in this version of code

813
00:35:36,986 --> 00:35:38,476
and let me fix the spacing

814
00:35:38,476 --> 00:35:40,376
because the font is
again big is this.

815
00:35:40,716 --> 00:35:43,226
Instead of calling the
alert function which is kind

816
00:35:43,226 --> 00:35:46,556
of a weak attempt to
implement a user interface,

817
00:35:46,956 --> 00:35:48,206
what I did this time was this.

818
00:35:48,546 --> 00:35:52,346
I again used this function
called document.GetElementId

819
00:35:52,646 --> 00:35:54,496
but I got the element
with the Id of price.

820
00:35:54,496 --> 00:35:55,926
Well what is that?

821
00:35:55,926 --> 00:35:57,226
Let me fast forward
to the bottom.

822
00:35:57,346 --> 00:35:58,676
Ah, that's the span.

823
00:35:59,056 --> 00:36:01,266
So the reason I use
the span element is

824
00:36:01,266 --> 00:36:04,566
because I just needed an
XHTML tag that has a unique Id

825
00:36:04,866 --> 00:36:08,066
that yeah has some temporary
content to be determined

826
00:36:08,346 --> 00:36:11,466
but I need to be able to clobber
that content and the syntax

827
00:36:11,466 --> 00:36:14,026
for clobbering original
content is simply this.

828
00:36:14,026 --> 00:36:19,216
Get the element and this line
of code GetElementbyId of price.

829
00:36:19,466 --> 00:36:22,526
That gets me that span,
that location in the browser

830
00:36:22,836 --> 00:36:27,696
and then inner html capitalized
as follows says go inside

831
00:36:27,696 --> 00:36:31,366
of that element so the original
html and you know what thanks

832
00:36:31,366 --> 00:36:33,446
to the assignment
operator clobber it

833
00:36:33,686 --> 00:36:35,536
with whatever the
server has returned

834
00:36:35,936 --> 00:36:37,936
in that particular variable.

835
00:36:38,476 --> 00:36:39,576
So same exact code.

836
00:36:39,756 --> 00:36:42,526
I'm just putting in the response
in a slightly different place.

837
00:36:43,836 --> 00:36:44,626
Any questions?

838
00:36:45,886 --> 00:36:48,636
Ok. So a little basic
but we'll go from here

839
00:36:48,636 --> 00:36:50,706
to doing interesting things
with maps in just a bit

840
00:36:50,706 --> 00:36:54,836
but why don't we take
our five-minute break.

841
00:36:55,736 --> 00:36:58,396
Alright. So let's spruce
things up a little bit.

842
00:36:58,556 --> 00:37:01,226
So it's very common on websites
today that when you visit them

843
00:37:01,226 --> 00:37:03,366
and the website is using
this thing called Ajax

844
00:37:03,626 --> 00:37:05,766
that you get some kind
of progress indication.

845
00:37:05,766 --> 00:37:08,376
Like how many of you
have ever used Kayak.com?

846
00:37:09,126 --> 00:37:11,886
So Kayak.com is a wonderful
useful site for finding

847
00:37:11,886 --> 00:37:15,186
like airline tickets and hotels.

848
00:37:15,276 --> 00:37:16,626
It's a meta-search engine.

849
00:37:16,626 --> 00:37:19,236
It searches all these different
sites but what's interesting

850
00:37:19,236 --> 00:37:22,046
about Kayak is they were one of
the first a couple of years ago

851
00:37:22,326 --> 00:37:25,686
to really push the limits of
this technology called Ajax

852
00:37:25,686 --> 00:37:28,166
and Google was another with
Google Maps and similar.

853
00:37:28,396 --> 00:37:32,706
So to be clear, JavaScript is
just an interpreted language.

854
00:37:32,916 --> 00:37:34,636
You can embed it
inside of web pages.

855
00:37:34,636 --> 00:37:36,206
It gets executed by the browser.

856
00:37:36,206 --> 00:37:39,356
You can clearly manipulate
the window itself.

857
00:37:39,416 --> 00:37:41,146
You can clearly trigger
pop ups and such.

858
00:37:41,506 --> 00:37:45,616
Ajax stands again for
Asynchronous JavaScript and xml.

859
00:37:45,616 --> 00:37:46,286
What does that mean?

860
00:37:46,486 --> 00:37:49,386
It's just a buzzword
that says you are using

861
00:37:49,386 --> 00:37:51,506
JavaScript asynchronously.

862
00:37:51,506 --> 00:37:52,236
What does that mean?

863
00:37:52,466 --> 00:37:54,646
It means you are
using JavaScript

864
00:37:54,896 --> 00:37:56,816
to make additional http calls

865
00:37:56,926 --> 00:37:58,376
and they go about
their business.

866
00:37:58,376 --> 00:38:00,326
They do what they do their thing

867
00:38:00,326 --> 00:38:02,126
and then finally the
response comes back.

868
00:38:02,326 --> 00:38:03,616
There's the asynchronicity.

869
00:38:03,616 --> 00:38:07,176
You say go do this and
then you return like we did

870
00:38:07,176 --> 00:38:08,016
in our quote function.

871
00:38:08,016 --> 00:38:09,746
We just, that was it
for the quote function

872
00:38:09,966 --> 00:38:11,336
but when the server's
ready to get back

873
00:38:11,336 --> 00:38:15,196
to us it invokes our
handler function thanks

874
00:38:15,196 --> 00:38:17,386
to my having registered
that event handler

875
00:38:17,386 --> 00:38:19,476
and my handle function
gets called.

876
00:38:19,756 --> 00:38:23,526
So again Ajax is just about this
dynamism thanks to being able

877
00:38:23,526 --> 00:38:25,376
to make additional http calls.

878
00:38:25,686 --> 00:38:26,716
So I went ahead and did this.

879
00:38:26,856 --> 00:38:30,036
I wanted to get some sense
of progress especially

880
00:38:30,036 --> 00:38:32,606
when the server's slow so then
I'm not scratching my head

881
00:38:32,606 --> 00:38:34,186
wondering is the web broken.

882
00:38:34,186 --> 00:38:37,136
Is my computer screwed up
or did I make a mistake?

883
00:38:37,276 --> 00:38:39,576
So in this example works
fundamentally the same

884
00:38:39,576 --> 00:38:41,616
but when I click
get quote it puts

885
00:38:41,616 --> 00:38:45,216
up this somewhat
cheesy progress bar.

886
00:38:45,216 --> 00:38:46,596
As an aside it's very easy

887
00:38:46,596 --> 00:38:48,586
to find your own
cheesy progress bars

888
00:38:48,586 --> 00:38:51,446
if you Google Ajax progress bars
you'll get to sites like this

889
00:38:51,726 --> 00:38:53,696
and if you really want to
procrastinate sometime,

890
00:38:54,786 --> 00:38:58,076
you can do this and then you can
colorize the thing, download it

891
00:38:58,076 --> 00:39:00,846
and sftp it to your
account and have great fun.

892
00:39:00,846 --> 00:39:01,736
There's some quality.

893
00:39:01,736 --> 00:39:04,716
So, that's where I went for
my particular progress bar

894
00:39:04,986 --> 00:39:06,086
but how did I do this?

895
00:39:06,086 --> 00:39:07,476
Well, let's take a quick look.

896
00:39:07,476 --> 00:39:11,776
This is ajax3.html and
again to be clear all

897
00:39:11,776 --> 00:39:13,816
of these files are just .html.

898
00:39:13,996 --> 00:39:17,066
I'm not even using PHP yet
at least in these files.

899
00:39:17,066 --> 00:39:21,456
I did use PHP in quote1.php
right just to remind you

900
00:39:21,456 --> 00:39:25,226
from last time, quote1.php
was a pretty simple file

901
00:39:25,576 --> 00:39:27,076
that looks like this.

902
00:39:27,586 --> 00:39:28,716
I just grab.

903
00:39:28,776 --> 00:39:30,576
I use the same code.

904
00:39:30,726 --> 00:39:33,626
I actually stole this
code pretty much outright

905
00:39:33,676 --> 00:39:35,476
from P Set 7's distribution
code.

906
00:39:35,506 --> 00:39:37,476
You may recall that
there's a bunch of functions

907
00:39:37,476 --> 00:39:39,336
and helpers.php that
we give you.

908
00:39:39,636 --> 00:39:41,956
I kind of extracted
the code I want

909
00:39:42,196 --> 00:39:43,636
but notice the interesting
thing is

910
00:39:43,636 --> 00:39:46,596
that I'm dynamically creating
a URL that hits Yahoo Finance

911
00:39:46,866 --> 00:39:50,726
and I'm appending my symbol
after the s parameter.

912
00:39:51,006 --> 00:39:53,366
Then I'm getting back the
response and long story short,

913
00:39:53,586 --> 00:39:57,406
the whole purpose of this little
file quote1.php is to hit Yahoo

914
00:39:57,516 --> 00:39:59,456
and then spit out the
appropriate stock price.

915
00:39:59,536 --> 00:40:01,806
That's it and more
on that in P Set 7.

916
00:40:02,066 --> 00:40:03,456
So what about this progress bar?

917
00:40:03,496 --> 00:40:07,026
Well, let me scroll down
and look at my XHTML.

918
00:40:07,636 --> 00:40:08,836
Oh and this is interesting.

919
00:40:08,836 --> 00:40:11,846
So even though when I visit
the page it's not there,

920
00:40:12,156 --> 00:40:14,136
notice here's this
pleasewait.gif.

921
00:40:14,666 --> 00:40:16,286
So if I visit this thing here.

922
00:40:16,286 --> 00:40:16,736
Let's see.

923
00:40:16,796 --> 00:40:17,906
Pleasewait.gif.

924
00:40:17,906 --> 00:40:20,056
So that's pleasewait.gif.

925
00:40:20,566 --> 00:40:23,926
Ok. So there's that icon and
in fact it seems to be embedded

926
00:40:23,926 --> 00:40:25,076
in the web page itself.

927
00:40:25,366 --> 00:40:29,466
If I view the source of this web
page, scroll down, we'll notice

928
00:40:29,506 --> 00:40:33,146
that at the bottom here I
have pleasewait.gif roughly

929
00:40:33,146 --> 00:40:37,796
in the middle of that XHTML but
what element is it a child of?

930
00:40:37,906 --> 00:40:39,796
What element is it
nested inside of?

931
00:40:40,056 --> 00:40:41,426
What kind of element?

932
00:40:42,256 --> 00:40:44,856
So a div, right,
so a parent element

933
00:40:44,856 --> 00:40:46,096
so to speak, this
is just a tree.

934
00:40:46,096 --> 00:40:48,066
All of this hierarchy
this is making a tree

935
00:40:48,356 --> 00:40:51,786
so the image element for
pleasewait.gif is inside

936
00:40:51,786 --> 00:40:54,266
of that div element which
apparently has an Id

937
00:40:54,266 --> 00:40:56,116
so that means I probably
am going to go

938
00:40:56,116 --> 00:40:57,956
after that div somehow
but notice

939
00:40:57,956 --> 00:41:00,606
in the style attribute
this is a little CSS,

940
00:41:00,866 --> 00:41:02,276
cascading style sheets trick.

941
00:41:02,536 --> 00:41:05,146
I can put this element
there but that directive,

942
00:41:05,146 --> 00:41:08,686
that property display:none,
what that's doing

943
00:41:08,686 --> 00:41:11,736
for me is it's saying put the
element here but then hide it.

944
00:41:11,736 --> 00:41:14,336
I don't want to see it
but I want it to be there.

945
00:41:14,416 --> 00:41:17,336
It's essentially hidden but
it's not taking up any space

946
00:41:17,336 --> 00:41:20,796
yet because what I later
do in my JavaScript is

947
00:41:20,796 --> 00:41:24,976
in my JavaScript here, I
scroll up and let's see all

948
00:41:24,976 --> 00:41:26,426
of this code is actually
the same.

949
00:41:26,606 --> 00:41:28,346
It's really no, nothing
to look at.

950
00:41:28,346 --> 00:41:32,156
Oh, except for this line and
I point it out with a comment.

951
00:41:32,406 --> 00:41:33,436
Show progress.

952
00:41:33,846 --> 00:41:38,176
So the moment I construct the
URL I then show a progress bar.

953
00:41:38,176 --> 00:41:39,006
How do I do that?

954
00:41:39,006 --> 00:41:39,636
Well let's see.

955
00:41:39,846 --> 00:41:43,486
I call document.GetElementbyId
quote unquote progress

956
00:41:43,486 --> 00:41:44,966
so that's a familiar
construct now.

957
00:41:44,966 --> 00:41:48,216
I've used it like three times
and now notice you can change

958
00:41:48,216 --> 00:41:51,316
as I promised on Monday the
properties, the CSS properties

959
00:41:51,316 --> 00:41:52,906
of elements using JavaScripts.

960
00:41:53,026 --> 00:41:55,946
The syntax for that is grab
the element itself using

961
00:41:55,946 --> 00:41:58,276
like getElementbyId.

962
00:41:58,506 --> 00:42:00,346
That gives me the
object that is that div.

963
00:42:00,746 --> 00:42:03,146
Dot style means go
inside of that object

964
00:42:03,146 --> 00:42:05,296
and start accessing
its CSS styles.

965
00:42:05,566 --> 00:42:07,106
What property do
I want to change?

966
00:42:07,306 --> 00:42:09,356
I want to change the
property called Display.

967
00:42:09,676 --> 00:42:11,626
What value do I want
to give that Display?

968
00:42:11,626 --> 00:42:14,976
I want to give it the opposite
of none which it currently is

969
00:42:15,276 --> 00:42:19,276
and in CSS the opposite
of none for this is block

970
00:42:19,376 --> 00:42:20,616
and I used that word before.

971
00:42:20,616 --> 00:42:23,486
It's a block-level element so
I want to show it as a block,

972
00:42:23,486 --> 00:42:26,016
a big rectangle so I
change it to block.

973
00:42:26,256 --> 00:42:27,616
So all that's happening here

974
00:42:27,616 --> 00:42:31,626
when I actually click Submit is
what this JavaScript is doing is

975
00:42:31,626 --> 00:42:33,556
it's toggling that CSS property

976
00:42:33,826 --> 00:42:36,786
and it's just revealing the
element that's already there

977
00:42:37,086 --> 00:42:39,496
and an animated gif
is just an animation.

978
00:42:39,666 --> 00:42:42,506
The animation didn't start
when I clicked that button.

979
00:42:42,726 --> 00:42:44,816
Rather, it's been
animating [inaudible].

980
00:42:44,816 --> 00:42:48,366
I'm just seeing it the moment
I actually click that button.

981
00:42:48,526 --> 00:42:49,736
Its actually still there.

982
00:42:50,026 --> 00:42:52,676
So we actually use
this in the CS 50 App.

983
00:42:52,676 --> 00:42:53,276
If you go

984
00:42:53,276 --> 00:42:58,936
to events.college.harvard.edu
you'll notice that if you look

985
00:42:58,936 --> 00:43:03,736
up an event like what's
interesting, here marketing.

986
00:43:03,736 --> 00:43:04,946
Exploring careers.

987
00:43:05,226 --> 00:43:08,326
If I click on this notice that
a lot more information appears

988
00:43:08,326 --> 00:43:10,556
and Google calendar does
the same thing right?

989
00:43:10,556 --> 00:43:12,786
This is modeled after
Google Calendars Agenda View

990
00:43:13,096 --> 00:43:15,186
so if I click this
again, it goes away

991
00:43:15,186 --> 00:43:17,456
and this is actually
the same exact trick.

992
00:43:17,736 --> 00:43:20,556
When you pull up a bunch
of events on this calendar,

993
00:43:20,806 --> 00:43:22,086
everything comes down.

994
00:43:22,086 --> 00:43:24,956
The titles and the dates and
times but also the paragraph

995
00:43:24,956 --> 00:43:27,696
or more of description
for each of those events

996
00:43:27,766 --> 00:43:28,606
because what I wanted it

997
00:43:28,606 --> 00:43:31,376
to do was the moment the user
clicked I didn't even want

998
00:43:31,376 --> 00:43:32,716
to have an annoying
progress bar.

999
00:43:32,716 --> 00:43:35,616
I wanted the feedback to be
immediate so you click this.

1000
00:43:35,846 --> 00:43:38,156
What's happening is it's
not hitting a server.

1001
00:43:38,676 --> 00:43:41,176
It's simply executing a
couple lines of JavaScript

1002
00:43:41,466 --> 00:43:43,356
that say make the following row,

1003
00:43:43,356 --> 00:43:47,626
the row below me display
block instead of display none.

1004
00:43:47,876 --> 00:43:49,926
Click it again and it
changes it back to none.

1005
00:43:50,206 --> 00:43:53,206
So again by understanding
these basic building blocks,

1006
00:43:53,206 --> 00:43:55,376
little CSS here, a
little JavaScript here,

1007
00:43:55,376 --> 00:43:57,336
a little XHTML here,
you can start

1008
00:43:57,336 --> 00:44:00,126
to make what really are
today's modern interfaces

1009
00:44:00,356 --> 00:44:03,476
with these very simple pieces.

1010
00:44:03,906 --> 00:44:07,226
Now what's different
here about quote2 is

1011
00:44:07,226 --> 00:44:09,416
that I did actually return
a bit more information.

1012
00:44:09,726 --> 00:44:13,246
So notice in quote2.php and
again more on this in P Set 7

1013
00:44:13,246 --> 00:44:16,576
on helpers.php file,
notice I decided I just want

1014
00:44:16,576 --> 00:44:17,496
to return the price.

1015
00:44:17,756 --> 00:44:20,196
This time I'm going to return
a little more information.

1016
00:44:20,196 --> 00:44:23,086
I want to see the days high,
the days low and the price

1017
00:44:23,356 --> 00:44:27,526
so quote2.php now actually
returns some XHTML,

1018
00:44:27,526 --> 00:44:30,956
not a valid web page, not an
entire web page, just a snippet

1019
00:44:31,236 --> 00:44:35,046
but that's ok because clearly
when I click in this symbol

1020
00:44:35,046 --> 00:44:37,166
like Yahoo, click
and get quotes,

1021
00:44:37,516 --> 00:44:39,426
notice that the moment
it's done calling,

1022
00:44:39,426 --> 00:44:43,776
I get in the bottom the
updated stock price.

1023
00:44:44,206 --> 00:44:45,226
So how am I doing this?

1024
00:44:45,506 --> 00:44:47,696
It's probably identical
to the example before.

1025
00:44:47,696 --> 00:44:49,696
Let me scroll down
to my handle function

1026
00:44:50,116 --> 00:44:51,636
and oh, look what I'm doing.

1027
00:44:51,906 --> 00:44:52,626
One new thing.

1028
00:44:52,866 --> 00:44:54,956
When my handler function
gets called that is

1029
00:44:54,956 --> 00:44:56,646
when the server gets back
to me with an answer,

1030
00:44:56,966 --> 00:44:59,866
I essentially assume ok I'm
done showing this silly little

1031
00:44:59,866 --> 00:45:01,866
animation so let
me hide it again.

1032
00:45:02,086 --> 00:45:04,856
I use the exact same line
of code but change the value

1033
00:45:04,856 --> 00:45:09,146
over here from block back to
none and then I just insert

1034
00:45:09,146 --> 00:45:12,546
that thing into inner html
just like before so the rest

1035
00:45:12,546 --> 00:45:14,986
of the code is actually
identical.

1036
00:45:15,436 --> 00:45:17,626
Alright. So that's
the third version.

1037
00:45:17,836 --> 00:45:20,616
Any questions on
what we've just done?

1038
00:45:20,796 --> 00:45:22,106
I know we're throwing
a lot at you

1039
00:45:22,106 --> 00:45:24,066
but hopefully little bite
sized pieces here and there

1040
00:45:24,066 --> 00:45:25,966
that you can refer back to.

1041
00:45:26,296 --> 00:45:26,866
Any questions?

1042
00:45:26,866 --> 00:45:30,746
No. It would really help me out
if you ask some questions soon.

1043
00:45:32,366 --> 00:45:32,896
No. Alright.

1044
00:45:32,896 --> 00:45:33,366
I'll keep talking.

1045
00:45:33,826 --> 00:45:35,296
Alright. So, Ajax4.

1046
00:45:35,446 --> 00:45:37,896
Let me show you one
other piece of syntax

1047
00:45:37,896 --> 00:45:40,246
and you'll actually get more
of this kind of sophistication

1048
00:45:40,246 --> 00:45:43,556
when it comes to syntax in
a class like CS 51 so again

1049
00:45:43,556 --> 00:45:45,906
in a couple weeks we'll
have a few faculty come by,

1050
00:45:46,126 --> 00:45:50,286
give a little talk about
what's in CS 51, 61, 124, 171,

1051
00:45:50,516 --> 00:45:52,056
whole bunch of directions
you can go in

1052
00:45:52,056 --> 00:45:52,766
and what we'll soon put

1053
00:45:52,766 --> 00:45:54,866
on the course's website
is a little summary

1054
00:45:54,866 --> 00:45:56,396
of the courses you
can take thereafter.

1055
00:45:56,686 --> 00:45:57,876
But a little teaser here

1056
00:45:57,876 --> 00:46:00,706
in JavaScript is something
that's called an anonymous

1057
00:46:00,746 --> 00:46:01,986
or a LAMDA [assumed
spelling] function.

1058
00:46:02,366 --> 00:46:05,416
So these don't define the
entirety certainly in CS 51

1059
00:46:05,616 --> 00:46:07,506
but you'll see these
features in other languages

1060
00:46:07,506 --> 00:46:09,366
and that's what's kind of
fun about JavaScript for us.

1061
00:46:09,606 --> 00:46:12,976
You're kind of getting sneak
previews in this last week

1062
00:46:12,976 --> 00:46:16,726
of web stuff of features
and other languages, objects

1063
00:46:16,726 --> 00:46:18,516
and in this case
anonymous functions.

1064
00:46:18,806 --> 00:46:21,066
So let me ask you before we go
looking at that let me go back

1065
00:46:21,066 --> 00:46:22,506
to the very first example.

1066
00:46:22,746 --> 00:46:25,176
Ajax1. So you know
I've been kind

1067
00:46:25,176 --> 00:46:27,986
of a good boy here practicing
what I learned in CS 50,

1068
00:46:28,196 --> 00:46:30,826
breaking my code down to
multiple functions each

1069
00:46:30,826 --> 00:46:32,516
of which is kind of bite sized

1070
00:46:32,516 --> 00:46:34,356
and implements some
basic functionality.

1071
00:46:34,556 --> 00:46:35,536
I had a quote function.

1072
00:46:35,576 --> 00:46:39,046
I had a handler function but
arguably it's kind of stupid

1073
00:46:39,046 --> 00:46:41,476
to have a separate
function called handler

1074
00:46:41,796 --> 00:46:43,846
that is only called
in one place.

1075
00:46:44,196 --> 00:46:45,706
I'm not reusing this code.

1076
00:46:45,946 --> 00:46:49,246
I'm simply telling the server
call this function handler

1077
00:46:49,636 --> 00:46:52,396
but no one else needs to call
it so why do I have to go

1078
00:46:52,396 --> 00:46:54,306
through the trouble of
commenting it at the top,

1079
00:46:54,356 --> 00:46:56,226
declaring the function
and the parameters.

1080
00:46:56,426 --> 00:46:58,486
Just feels like a lot
of unnecessary work

1081
00:46:58,766 --> 00:47:00,776
so in fact you can avoid
something like this

1082
00:47:00,776 --> 00:47:02,716
and this is arguably
more elegant

1083
00:47:02,876 --> 00:47:04,436
by no means necessary,
but elegant.

1084
00:47:04,796 --> 00:47:06,706
So down here recall that one

1085
00:47:06,706 --> 00:47:10,006
of the things I did here before
was I registered this handler.

1086
00:47:10,306 --> 00:47:11,916
So onreadystatechange.

1087
00:47:12,046 --> 00:47:13,786
Let me go back to
the first example.

1088
00:47:13,896 --> 00:47:16,686
The very first had that same
line of code but I did this.

1089
00:47:17,286 --> 00:47:20,296
I said when you are
ready to change state,

1090
00:47:20,296 --> 00:47:23,366
that's all that long
named property says call

1091
00:47:23,366 --> 00:47:23,926
this function.

1092
00:47:24,306 --> 00:47:26,906
So what I kind of want to do
you know what, I kind of want

1093
00:47:26,906 --> 00:47:30,196
to take this code that's down
here and let me just cram it

1094
00:47:30,196 --> 00:47:33,156
in up here and not even give
it a name because there's kind

1095
00:47:33,156 --> 00:47:34,146
of an elegance about that.

1096
00:47:34,146 --> 00:47:36,386
If you just want to
execute some code later,

1097
00:47:36,466 --> 00:47:37,366
just give me the code.

1098
00:47:37,366 --> 00:47:38,576
Don't give me a function name.

1099
00:47:38,576 --> 00:47:39,916
Don't give me a list
of parameters.

1100
00:47:40,116 --> 00:47:41,006
Just give me the code.

1101
00:47:41,326 --> 00:47:42,956
So what we have here
is this trick.

1102
00:47:43,396 --> 00:47:45,746
If you want to have
an anonymous function,

1103
00:47:46,126 --> 00:47:48,636
one that doesn't have a
name, but still behaves

1104
00:47:48,636 --> 00:47:51,706
as a function you can do
this, onreadystatechange.

1105
00:47:51,856 --> 00:47:53,596
Instead of getting the
name of a function,

1106
00:47:53,596 --> 00:47:55,216
let me just give
it the function.

1107
00:47:55,486 --> 00:47:56,576
So there's this syntax.

1108
00:47:56,576 --> 00:47:58,116
I can literally say function.

1109
00:47:58,116 --> 00:47:59,346
Let me actually move this here.

1110
00:47:59,706 --> 00:48:01,906
I can say function()
because this isn't going

1111
00:48:01,906 --> 00:48:03,376
to take any arguments.

1112
00:48:03,696 --> 00:48:05,966
I'm then going to use
a curly brace here

1113
00:48:06,416 --> 00:48:08,156
and that means here
comes my function.

1114
00:48:08,236 --> 00:48:09,096
What do I want to do?

1115
00:48:09,306 --> 00:48:12,226
This code is copied and
pasted from version one

1116
00:48:12,226 --> 00:48:13,656
of the Ajax demo right?

1117
00:48:13,656 --> 00:48:17,826
I just grabbed the response
and I called the alert function

1118
00:48:17,976 --> 00:48:19,336
and it displays the response.

1119
00:48:19,766 --> 00:48:22,876
So then notice down here,
ah, that's interesting.

1120
00:48:22,876 --> 00:48:25,546
I just have to remember that
if I opened a curly brace,

1121
00:48:25,906 --> 00:48:29,536
I have to close the curly brace
and because this is one big line

1122
00:48:29,536 --> 00:48:31,866
of code now, I need to
put a semi-colon there.

1123
00:48:32,316 --> 00:48:34,876
So in short, there's
really nothing terribly new

1124
00:48:34,876 --> 00:48:35,566
with this example.

1125
00:48:35,566 --> 00:48:36,856
It might look a little
weird at first

1126
00:48:37,106 --> 00:48:38,886
but the motivation
was let's just get rid

1127
00:48:38,886 --> 00:48:42,336
of the gratuitous name handler
and just put the function

1128
00:48:42,336 --> 00:48:44,156
where I want it and
I offer this not

1129
00:48:44,156 --> 00:48:46,936
because this is some fancy
trick that the elite kind of use

1130
00:48:46,936 --> 00:48:48,846
in their code, but
this is actually very,

1131
00:48:48,846 --> 00:48:52,496
very common in JavaScript and
in fact in Google's own APIs

1132
00:48:52,496 --> 00:48:54,816
for Google Maps for projects

1133
00:48:54,816 --> 00:48:57,486
for Problem Set 8
you'll see this syntax

1134
00:48:57,766 --> 00:48:59,746
but its really no different
from calling a function.

1135
00:48:59,896 --> 00:49:01,406
It's just you're
giving it the function

1136
00:49:01,406 --> 00:49:03,536
and saying call this
block of code

1137
00:49:03,536 --> 00:49:04,616
which happens to be anonymous.

1138
00:49:04,916 --> 00:49:06,086
It happens to have no name.

1139
00:49:06,706 --> 00:49:08,336
Well let's look at
one final version

1140
00:49:08,336 --> 00:49:09,866
of this before transitioning

1141
00:49:09,866 --> 00:49:12,206
to something more
graphically engaging, the maps.

1142
00:49:12,796 --> 00:49:14,656
So in this fifth
and final version

1143
00:49:14,656 --> 00:49:21,086
of Ajax.html we have
the following XHTML here

1144
00:49:21,086 --> 00:49:22,896
so let me pull this up
in the browser first.

1145
00:49:22,896 --> 00:49:24,066
So we have Ajax5.html.

1146
00:49:24,066 --> 00:49:27,146
I'm going to go ahead
and type in goog again

1147
00:49:27,146 --> 00:49:30,056
and click get quote and
now notice I have kind

1148
00:49:30,056 --> 00:49:31,676
of placeholders for
these things.

1149
00:49:31,676 --> 00:49:33,166
I didn't bother with
the progress bars.

1150
00:49:33,166 --> 00:49:36,026
It was kind of annoying me
but I have three placeholders.

1151
00:49:36,306 --> 00:49:40,916
So, what XHTML element is
probably underneath the hood

1152
00:49:40,916 --> 00:49:43,146
next to the word price,
next to the word high

1153
00:49:43,146 --> 00:49:44,176
and next to the word low?

1154
00:49:45,936 --> 00:49:47,806
So what XHTML element?

1155
00:49:49,256 --> 00:49:50,296
Yeah, so span right?

1156
00:49:50,296 --> 00:49:52,626
The last time I needed a
little placeholder in line

1157
00:49:52,856 --> 00:49:54,416
where I just wanted it
right where I put it.

1158
00:49:54,416 --> 00:49:55,796
I didn't want it to
fill the whole page,

1159
00:49:55,796 --> 00:49:56,656
just right where I put it

1160
00:49:56,956 --> 00:49:59,236
so I probably have
three spans this time.

1161
00:49:59,236 --> 00:49:59,866
So let me check.

1162
00:49:59,866 --> 00:50:02,346
View page source,
scroll down, oh,

1163
00:50:02,506 --> 00:50:07,556
that's all so I say
price:high:low:

1164
00:50:07,556 --> 00:50:09,616
and then I have three
different spans

1165
00:50:09,776 --> 00:50:11,876
and notice I've given
these unique names.

1166
00:50:11,876 --> 00:50:13,976
Lowercase by convention
but they really just have

1167
00:50:13,976 --> 00:50:17,336
to be unique words, no special
funky characters in there.

1168
00:50:17,746 --> 00:50:19,526
Ok. So what's different
about this?

1169
00:50:20,106 --> 00:50:23,336
The difference here and the
reason we offer this simple

1170
00:50:23,336 --> 00:50:27,756
example is now apparently I
have three placeholders but up

1171
00:50:27,756 --> 00:50:30,696
until now the server's only
been returning one response.

1172
00:50:31,076 --> 00:50:33,596
The first example in quote1
it just returned the price

1173
00:50:34,046 --> 00:50:37,026
but in quote2 it
returned some XHTML.

1174
00:50:37,026 --> 00:50:42,656
It returned the price br tag,
the high br tag, the low br tag.

1175
00:50:42,896 --> 00:50:45,276
That's not going to fly
now because I kind of need

1176
00:50:45,276 --> 00:50:47,746
to be able to pluck from the
server's response the price,

1177
00:50:48,046 --> 00:50:49,996
then I need to separately
pluck the high

1178
00:50:50,196 --> 00:50:52,316
and separately pluck
the low and put them

1179
00:50:52,316 --> 00:50:53,416
in three different places.

1180
00:50:53,736 --> 00:50:57,126
So it feels like now I need my
server not to just return a blob

1181
00:50:57,126 --> 00:51:00,056
of text that I just blindly
cram into my web page.

1182
00:51:00,366 --> 00:51:03,256
I needed to return a
variable, an object,

1183
00:51:03,466 --> 00:51:04,866
some kind of a hash
[assumed spelling] table

1184
00:51:04,866 --> 00:51:05,856
if you will right?

1185
00:51:05,856 --> 00:51:08,236
I want to get back three
values, a price, a high,

1186
00:51:08,236 --> 00:51:10,476
a low so what I kind
of want the server

1187
00:51:10,476 --> 00:51:12,386
to return is something
like this.

1188
00:51:12,456 --> 00:51:17,756
I want it to return let's
say price and then it's going

1189
00:51:17,756 --> 00:51:20,106
to be one, two, three and
then the high is one, two,

1190
00:51:20,106 --> 00:51:22,256
four and then the low is
going to be one, two, two.

1191
00:51:22,516 --> 00:51:23,686
In other words I kind of want it

1192
00:51:23,686 --> 00:51:27,456
to return a little csv
file, a little database.

1193
00:51:27,746 --> 00:51:29,146
Well what is a database?

1194
00:51:29,146 --> 00:51:30,966
A database here is just a table

1195
00:51:31,226 --> 00:51:32,316
and this is why we're
using MySQL.

1196
00:51:32,316 --> 00:51:35,906
It's just a table so this
is just a hash table.

1197
00:51:35,996 --> 00:51:37,676
Left-hand column are keys.

1198
00:51:38,046 --> 00:51:39,966
The right-hand column are values

1199
00:51:40,206 --> 00:51:43,626
and even though Problem Set
6 didn't really let you think

1200
00:51:43,626 --> 00:51:46,336
of the hash table
as just two columns

1201
00:51:46,336 --> 00:51:48,346
because this feels a little
easy to implement right?

1202
00:51:48,556 --> 00:51:51,016
Your hash tables and tries
are far fancier than this

1203
00:51:51,396 --> 00:51:53,456
but just think of this
as what the user sees.

1204
00:51:53,666 --> 00:51:55,496
The user doesn't care
how many hours you spent

1205
00:51:55,496 --> 00:51:58,286
on Problem Set 6 implementing
the fastest hash table

1206
00:51:58,286 --> 00:51:59,306
or tri possible.

1207
00:51:59,596 --> 00:52:03,166
They just care about putting
in keys, getting back values,

1208
00:52:03,166 --> 00:52:06,096
putting in keys, getting back
yes or no this is a word.

1209
00:52:06,306 --> 00:52:06,826
So this is kind

1210
00:52:06,826 --> 00:52:08,516
of the higher-level
view of the hash table.

1211
00:52:08,776 --> 00:52:12,396
So it turns out with PHP
and JavaScript we can return

1212
00:52:12,396 --> 00:52:15,686
to the user a hash table
containing keys and values

1213
00:52:15,916 --> 00:52:18,676
or more generally we can
turn an object that has keys

1214
00:52:18,676 --> 00:52:19,776
and values inside of it.

1215
00:52:20,086 --> 00:52:20,806
So let's take a look.

1216
00:52:20,806 --> 00:52:24,406
This is quote3 that's going
to make all this happen.

1217
00:52:25,016 --> 00:52:27,376
So notice still it's
pretty few lines of code

1218
00:52:27,656 --> 00:52:28,996
but I did a couple
of different things.

1219
00:52:29,316 --> 00:52:33,266
So, one I first queried
Yahoo for their csv file.

1220
00:52:33,526 --> 00:52:35,736
So again, this is ripped
right out of Problem Set 7.

1221
00:52:35,736 --> 00:52:37,686
If you haven't dived into
Problem Set 7 that's fine.

1222
00:52:37,936 --> 00:52:40,726
Just today and Monday will make
a little more sense once you do.

1223
00:52:40,946 --> 00:52:43,826
So this is getting me back
a csv file but I don't want

1224
00:52:43,966 --> 00:52:45,246
to hand to JavaScript csv.

1225
00:52:45,246 --> 00:52:46,996
I want to hand it in
an actual hash table

1226
00:52:46,996 --> 00:52:48,306
so it can just get
right to work.

1227
00:52:48,626 --> 00:52:49,686
So what am I doing here?

1228
00:52:49,976 --> 00:52:53,086
I'm using this function that
Problem Set 7 uses, fgetcsv.

1229
00:52:53,086 --> 00:52:55,016
Doing a little sanity check.

1230
00:52:55,016 --> 00:52:56,556
Let me make sure
that it's not false.

1231
00:52:56,556 --> 00:52:58,356
Let me make sure
it's not applicable.

1232
00:52:58,456 --> 00:53:01,546
As an aside PHP is pretty
loose with capitalization.

1233
00:53:01,796 --> 00:53:04,286
You can say capital false
or lower case false even

1234
00:53:04,286 --> 00:53:05,716
in variables, don't
necessarily have

1235
00:53:05,716 --> 00:53:07,136
to be capitalizes consistently.

1236
00:53:07,416 --> 00:53:09,656
They should for style
though so what am I doing?

1237
00:53:09,686 --> 00:53:11,556
Well notice I did this
little trick here.

1238
00:53:11,786 --> 00:53:16,156
My goal with this fairly
short program quote3.php is

1239
00:53:16,436 --> 00:53:17,756
to return an object.

1240
00:53:18,386 --> 00:53:19,746
Well what do I want
to return as?

1241
00:53:19,746 --> 00:53:21,156
Well what do I mean by object?

1242
00:53:21,156 --> 00:53:21,856
A hash table.

1243
00:53:22,156 --> 00:53:23,656
Well how do I implement
the hash table?

1244
00:53:23,746 --> 00:53:24,816
An associative array.

1245
00:53:25,276 --> 00:53:27,866
So that was just our fancy term
for an array that doesn't have

1246
00:53:27,866 --> 00:53:29,536
to use numbers as its indices.

1247
00:53:29,536 --> 00:53:30,636
It can use words.

1248
00:53:31,016 --> 00:53:34,986
So I'm going to tell PHP give
me an empty array so this line

1249
00:53:34,986 --> 00:53:37,626
of code says create a
variable called quote

1250
00:53:37,846 --> 00:53:39,556
and assign it an empty array.

1251
00:53:39,836 --> 00:53:41,146
Put nothing in it just yet.

1252
00:53:41,466 --> 00:53:42,646
What am I doing down here?

1253
00:53:42,646 --> 00:53:46,516
Well if I grab data from
Yahoo with these lines

1254
00:53:46,516 --> 00:53:48,686
of code notice I
just do three things.

1255
00:53:49,116 --> 00:53:52,786
I index into the quote variable
using square bracket notation.

1256
00:53:53,086 --> 00:53:55,476
I use a key of price
and what do I put there?

1257
00:53:55,816 --> 00:53:59,376
I put the column number
one from Yahoo's csv file.

1258
00:53:59,906 --> 00:54:01,606
In the field called high

1259
00:54:01,606 --> 00:54:05,986
in my variable I put the field
number two from Yahoo's csv file

1260
00:54:06,276 --> 00:54:09,166
and low I put the third
field from Yahoo's csv file.

1261
00:54:09,446 --> 00:54:13,006
In other words I have created
an array, aka an assos.

1262
00:54:13,006 --> 00:54:17,026
I've created an associative
array, essentially a hash table

1263
00:54:17,276 --> 00:54:19,656
that puts something
like this in memory.

1264
00:54:19,876 --> 00:54:21,326
That's all those
lines of code did.

1265
00:54:21,326 --> 00:54:22,526
Doesn't look like
this in memory.

1266
00:54:22,526 --> 00:54:24,986
Right? You know from P Set 6,
really not as simple as this

1267
00:54:25,306 --> 00:54:26,346
but that's the mental model.

1268
00:54:26,346 --> 00:54:29,466
It gave me a hash
table, keys and values.

1269
00:54:29,846 --> 00:54:31,326
So finally what do I do?

1270
00:54:31,496 --> 00:54:33,456
Well, I don't want
to return just text.

1271
00:54:33,456 --> 00:54:35,476
I don't want to return
just XHTML.

1272
00:54:35,476 --> 00:54:38,296
This time I want to
return this object.

1273
00:54:38,346 --> 00:54:41,036
I want to return the hash
table but I've got to hand it

1274
00:54:41,036 --> 00:54:44,146
to JavaScript in a format
that JavaScript understands

1275
00:54:44,476 --> 00:54:48,006
and it turns out that JavaScript
does not understand Excel files.

1276
00:54:48,006 --> 00:54:50,516
It doesn't understand
columns like this

1277
00:54:50,846 --> 00:54:53,526
but it does understand something
that's pretty much equivalent

1278
00:54:53,526 --> 00:54:54,626
even though it looks different.

1279
00:54:55,156 --> 00:54:58,816
If I want to implement in
JavaScript this Excel table,

1280
00:54:59,096 --> 00:55:00,696
the syntax that I would type

1281
00:55:00,806 --> 00:55:03,156
in my own code would
be something like this.

1282
00:55:03,666 --> 00:55:07,056
Hashtable or rather
var hashtable

1283
00:55:07,056 --> 00:55:11,096
to give me a variable gets
open square bracket close

1284
00:55:11,096 --> 00:55:11,726
square bracket.

1285
00:55:11,726 --> 00:55:14,446
That in JavaScript
is the same in PHP

1286
00:55:14,446 --> 00:55:16,836
as saying hashtable
gets array ok

1287
00:55:17,176 --> 00:55:19,996
so that's the same
thing, different language.

1288
00:55:19,996 --> 00:55:22,296
You just acclimate to the
different syntax over time.

1289
00:55:22,936 --> 00:55:26,086
Ok. So that gives me an empty
hash table so what I really want

1290
00:55:26,086 --> 00:55:29,796
to put in there is
a bunch of elements.

1291
00:55:30,016 --> 00:55:31,876
I want to put inside of there.

1292
00:55:31,996 --> 00:55:32,496
Let's see.

1293
00:55:32,496 --> 00:55:35,636
I want to put inside
of there the following.

1294
00:55:36,026 --> 00:55:39,006
I want my hash table
really to look like this.

1295
00:55:39,006 --> 00:55:40,506
I'm going to change
my syntax just to kind

1296
00:55:40,506 --> 00:55:41,326
of cheat a little bit.

1297
00:55:41,816 --> 00:55:44,826
So I'm going to say high: 123.

1298
00:55:45,246 --> 00:55:47,136
Sorry, let's do the
first one first.

1299
00:55:47,196 --> 00:55:55,216
Price: 123, high: 124,
low: 122 close curly brace,

1300
00:55:55,426 --> 00:55:57,956
close semi-colon and there's
differences here with the syntax

1301
00:55:58,256 --> 00:56:01,226
but essentially that is how
JavaScript would implement this

1302
00:56:01,226 --> 00:56:02,006
Excel table.

1303
00:56:02,376 --> 00:56:05,436
So how can I convert from
PHP's associative array

1304
00:56:05,436 --> 00:56:07,426
from PHP's hash table

1305
00:56:07,696 --> 00:56:10,526
to a JavaScript hash table
or JavaScript object?

1306
00:56:10,836 --> 00:56:14,046
Well there's this little
function in PHP, JSON in code,

1307
00:56:14,356 --> 00:56:15,726
JavaScript object notation.

1308
00:56:16,056 --> 00:56:19,746
Takes your object in PHP's
memory and just converts it

1309
00:56:19,746 --> 00:56:22,196
to a format that
JavaScript will understand.

1310
00:56:22,196 --> 00:56:25,396
That's all and this is wonderful
because the end result is this.

1311
00:56:25,896 --> 00:56:30,246
If I go back here and go to
quote3.php pass in a symbol

1312
00:56:30,246 --> 00:56:32,886
of goog so this is the
URL that I'm about to hit.

1313
00:56:33,446 --> 00:56:34,856
Pretty much the same as before.

1314
00:56:34,856 --> 00:56:35,516
Hit Enter.

1315
00:56:36,066 --> 00:56:38,816
What I get back is this
cryptic looking thing.

1316
00:56:39,286 --> 00:56:41,626
So because as an aside I misled.

1317
00:56:41,696 --> 00:56:43,746
I should have said we
use the curly braces,

1318
00:56:43,746 --> 00:56:46,896
not the square braces before
so consider that retracted.

1319
00:56:47,156 --> 00:56:51,486
So what JSON in code has done
is it's taken my PHP associative

1320
00:56:51,486 --> 00:56:53,756
array which feels
like this to the user.

1321
00:56:53,756 --> 00:56:57,376
That's what I put in my PHP
code, that effect but when the

1322
00:56:57,706 --> 00:57:01,046
when PHP converts it to
JavaScript, it's a little ugly

1323
00:57:01,046 --> 00:57:04,306
but notice open curly brace
on the left, close curly brace

1324
00:57:04,306 --> 00:57:06,276
on the right and
then a whole bunch

1325
00:57:06,276 --> 00:57:08,376
of key value pairs
separated by commas.

1326
00:57:08,376 --> 00:57:11,306
Now PHP just to be
extra anal it put quotes

1327
00:57:11,306 --> 00:57:14,526
around every value just
so there's no confusion,

1328
00:57:14,696 --> 00:57:18,076
there's no confusion for
what's a string or a number

1329
00:57:18,276 --> 00:57:24,426
but notice it's price:value,
high:value, low:value.

1330
00:57:24,776 --> 00:57:28,656
So now I have this fairly
rudimentary way of taking data

1331
00:57:28,656 --> 00:57:31,956
in memory in PHP, massaging
it into a different format,

1332
00:57:31,956 --> 00:57:35,026
an ugly format but a different
format because I now claim

1333
00:57:35,026 --> 00:57:37,946
that JavaScript can
understand this and convert it

1334
00:57:37,946 --> 00:57:40,826
into its own hash table with
the same key value pairs.

1335
00:57:41,296 --> 00:57:44,996
So, we take this
home with Ajax5.html.

1336
00:57:45,716 --> 00:57:48,186
The code here is again
what we saw a moment ago.

1337
00:57:48,366 --> 00:57:50,936
Three placeholders for
price, high and low.

1338
00:57:51,306 --> 00:57:56,026
I scroll up here and in my
quote function I have same code,

1339
00:57:56,026 --> 00:57:59,856
same code, the only difference
so far is I'm using quote3.php

1340
00:57:59,856 --> 00:58:01,056
so let's see what's coming back.

1341
00:58:01,056 --> 00:58:02,986
Ok. I used an anonymous
function again

1342
00:58:02,986 --> 00:58:04,286
because I don't really need

1343
00:58:04,286 --> 00:58:07,266
to give this thing a name per
our argument a moment ago.

1344
00:58:07,326 --> 00:58:08,416
Same thing, same thing.

1345
00:58:08,416 --> 00:58:11,626
Ok. So the only difference here
and let me fix my indentation

1346
00:58:11,626 --> 00:58:14,326
for whitespace for
large font reasons,

1347
00:58:14,566 --> 00:58:17,316
the magic now is in
these four lines.

1348
00:58:17,666 --> 00:58:19,136
What again is about to happen?

1349
00:58:19,136 --> 00:58:22,456
Well, when I go to this
page, search for MSFT,

1350
00:58:22,806 --> 00:58:24,086
get quote from Microsoft,

1351
00:58:24,326 --> 00:58:26,676
it inserts three different
values separately so that's

1352
00:58:26,676 --> 00:58:27,926
at least three lines of code.

1353
00:58:28,286 --> 00:58:28,926
Let's see.

1354
00:58:29,616 --> 00:58:35,506
Document.getElementById of
price.innerHTML quote.price,

1355
00:58:36,026 --> 00:58:40,546
inner getElementById high,
innerHTML quote.high,

1356
00:58:40,786 --> 00:58:43,856
quote.low so that begs the
last question what is quote?

1357
00:58:44,156 --> 00:58:46,916
Well, the first line of
code here is the magic.

1358
00:58:47,436 --> 00:58:49,656
Var quote gives me the
variable called quote.

1359
00:58:49,656 --> 00:58:50,856
This is going to
be my hash table

1360
00:58:50,856 --> 00:58:52,276
but it's a quote so
I called it quote.

1361
00:58:52,646 --> 00:58:54,486
Now this is just a
cryptic piece of syntax

1362
00:58:54,486 --> 00:58:55,586
that this is the way it is done.

1363
00:58:55,586 --> 00:58:57,356
It's literally something
you can copy and paste

1364
00:58:57,356 --> 00:58:59,036
when mimicking this
behavior in the future.

1365
00:58:59,416 --> 00:59:01,296
I get back the response
from the server

1366
00:59:01,296 --> 00:59:03,096
and this is the same as before.

1367
00:59:03,336 --> 00:59:05,866
It's a different type of
response but I know it's JSON

1368
00:59:05,896 --> 00:59:10,356
because I wrote quote3.php
the way you convert something

1369
00:59:10,356 --> 00:59:12,926
that looks like a string,
something that looks like this

1370
00:59:13,486 --> 00:59:16,706
into something that's
actually in memory,

1371
00:59:16,706 --> 00:59:18,916
in the browser's memory
is you take that variable

1372
00:59:19,336 --> 00:59:22,236
which is this guy right here,
you can catenae to the beginning

1373
00:59:22,236 --> 00:59:25,426
of it, a single parenthesis, you
can catenae to the end of it,

1374
00:59:25,426 --> 00:59:28,266
a closed parenthesis and then
you pass that as an argument

1375
00:59:28,266 --> 00:59:29,826
to a JavaScript function
called eval.

1376
00:59:30,516 --> 00:59:33,936
So eval takes a string
of what's called JSON,

1377
00:59:33,936 --> 00:59:35,636
JavaScript object notation.

1378
00:59:35,636 --> 00:59:36,086
What is that?

1379
00:59:36,356 --> 00:59:37,656
Fancy buzzword for this.

1380
00:59:37,986 --> 00:59:41,196
It takes that string
and evaluates it

1381
00:59:41,196 --> 00:59:44,986
and thereby loads it to RAM
the actual representation

1382
00:59:44,986 --> 00:59:45,736
of it in memory.

1383
00:59:46,076 --> 00:59:47,826
By that I mean exactly the kind

1384
00:59:47,826 --> 00:59:50,636
of structure you guys have
implemented for a Problem Set 6.

1385
00:59:51,416 --> 00:59:55,096
So, we've gone from very simple
examples where we used alert

1386
00:59:55,426 --> 00:59:57,876
to much more interesting
examples

1387
00:59:57,876 --> 01:00:00,276
where we're now using this
fancy technology called JSON

1388
01:00:00,346 --> 01:00:03,336
but what's cool about something
like JSON is that when you go

1389
01:00:03,336 --> 01:00:06,646
to a site like Kayak.com and
you go to let's see I want

1390
01:00:06,646 --> 01:00:08,966
to go from Boston to SFO.

1391
01:00:09,306 --> 01:00:10,976
Doesn't really matter when I go.

1392
01:00:10,976 --> 01:00:12,266
Let's go ahead and click search.

1393
01:00:13,006 --> 01:00:14,746
I get back their page results.

1394
01:00:14,796 --> 01:00:17,906
Notice I am now at this page
and it's doing its thing

1395
01:00:17,906 --> 01:00:20,586
with a progress bar and notice
the results are gradually

1396
01:00:20,586 --> 01:00:21,616
updating themselves.

1397
01:00:21,866 --> 01:00:25,946
Well at Kayak probably is
doing and we could figure this

1398
01:00:25,946 --> 01:00:27,866
out by dissecting things
underneath the hood

1399
01:00:27,866 --> 01:00:29,116
with the tools we've
been demoing

1400
01:00:29,466 --> 01:00:31,866
but they're probably
doing is grabbing more

1401
01:00:31,866 --> 01:00:36,216
and more data via Ajax,
getting back some JSON notation

1402
01:00:36,216 --> 01:00:39,346
where they're calling eval on
it and when they see a low price

1403
01:00:39,386 --> 01:00:43,626
like oh, $338 they find the
appropriate div or the span

1404
01:00:43,626 --> 01:00:46,946
in their own web page and
they cram that new low price

1405
01:00:47,176 --> 01:00:48,306
at the top of the page.

1406
01:00:48,306 --> 01:00:50,976
If it comes back as like
$500 they do the same thing

1407
01:00:50,976 --> 01:00:53,666
but they cram it down at
the bottom of the page

1408
01:00:53,876 --> 01:00:56,286
and when you actually
apply things like filters,

1409
01:00:56,286 --> 01:00:59,256
like Air Tran only, notice
my URL has not changed.

1410
01:00:59,256 --> 01:01:00,626
There's our $500.

1411
01:01:01,106 --> 01:01:02,036
Don't fly Air Tran.

1412
01:01:02,036 --> 01:01:03,016
Alaska Airlines.

1413
01:01:03,016 --> 01:01:06,146
The web page is changing
its interface because of all

1414
01:01:06,146 --> 01:01:09,336
of these very simple
building blocks we're using

1415
01:01:09,336 --> 01:01:11,906
and when I say simple that
doesn't necessarily mean easy

1416
01:01:12,206 --> 01:01:14,816
but realize we're implementing
in five lines of codes,

1417
01:01:14,816 --> 01:01:17,706
six lines of codes the
basic building blocks of all

1418
01:01:17,706 --> 01:01:19,666
of these sexy websites
these days.

1419
01:01:20,426 --> 01:01:22,946
So let's now make
a sexier website.

1420
01:01:23,016 --> 01:01:24,326
So let's go to.

1421
01:01:24,616 --> 01:01:27,426
You don't have a printout
of this because I went

1422
01:01:27,426 --> 01:01:29,546
to press late with this
but it will be posted

1423
01:01:29,546 --> 01:01:32,766
on the course's website,
not that course's website,

1424
01:01:32,766 --> 01:01:33,476
this course's website.

1425
01:01:33,476 --> 01:01:37,066
I'm going to go oh wait,
let's check in with Allen.

1426
01:01:38,396 --> 01:01:39,406
About the same.

1427
01:01:40,176 --> 01:01:40,616
Alright.

1428
01:01:40,616 --> 01:01:41,806
[ Laughter ]

1429
01:01:41,806 --> 01:01:44,836
Let's go down to
source code index

1430
01:01:45,166 --> 01:01:47,696
and I have this new directory
called map as of this morning.

1431
01:01:48,106 --> 01:01:50,936
So what's really
cook about Google is

1432
01:01:50,936 --> 01:01:54,766
that one not only do they solve
the search problem very well,

1433
01:01:54,976 --> 01:01:58,726
they also release for free
so much fun functionality

1434
01:01:58,726 --> 01:02:00,896
so that Wiki page
we've been promoting

1435
01:02:01,226 --> 01:02:04,136
or fun API's this is
one of the API's on it.

1436
01:02:04,136 --> 01:02:07,646
So Google Maps API, application
program interface is a

1437
01:02:07,646 --> 01:02:10,146
JavaScript interface via

1438
01:02:10,146 --> 01:02:13,296
which you can actually embed
Google Maps in your own website.

1439
01:02:13,546 --> 01:02:14,356
In fact if you go

1440
01:02:14,356 --> 01:02:18,156
to Shuttleboy.com we have
a Google Map embedded

1441
01:02:18,156 --> 01:02:18,786
in the website.

1442
01:02:19,156 --> 01:02:21,846
Kind of a teaser because I
haven't had time to finish it

1443
01:02:21,846 --> 01:02:24,556
so when you click on this
map there's my alert box.

1444
01:02:24,806 --> 01:02:26,426
GPS coming back soon.

1445
01:02:26,696 --> 01:02:29,806
We'll do that over Jay term but
you can embed maps like that

1446
01:02:29,906 --> 01:02:30,956
and make them interactive.

1447
01:02:30,956 --> 01:02:31,856
So that's what we'll do.

1448
01:02:32,116 --> 01:02:34,286
So in a nutshell when you
use Google Maps you've got

1449
01:02:34,286 --> 01:02:35,116
to do two things.

1450
01:02:35,116 --> 01:02:38,736
One, you click a link like this,
sign up for Google Maps API

1451
01:02:38,886 --> 01:02:41,166
and they just ask you where
are you going to use the maps.

1452
01:02:41,166 --> 01:02:43,816
Tell us your URL and after
that it's free to use.

1453
01:02:43,816 --> 01:02:46,726
So there's no real registration
or money or anything like that.

1454
01:02:47,116 --> 01:02:49,366
But what's really cool
is when you start to read

1455
01:02:49,366 --> 01:02:51,896
through the documentation you
realized my God look how much

1456
01:02:51,896 --> 01:02:53,946
functionality Google exposes.

1457
01:02:53,976 --> 01:02:56,096
Now this is not meant to
overwhelm but this is meant

1458
01:02:56,096 --> 01:02:59,596
to give a sense of just how
much you can do for free

1459
01:03:00,016 --> 01:03:03,596
with Google's API for maps and
Yahoo has something similar.

1460
01:03:03,596 --> 01:03:04,976
Microsoft has something similar.

1461
01:03:05,096 --> 01:03:06,466
There's many different entities

1462
01:03:06,466 --> 01:03:08,766
that do offer services
like this.

1463
01:03:09,116 --> 01:03:10,956
So what does it take to
actually embed a map?

1464
01:03:11,026 --> 01:03:11,846
Well, let's take a look.

1465
01:03:12,016 --> 01:03:15,856
I'm going to go into
my map directory here.

1466
01:03:15,856 --> 01:03:19,396
Let me go ahead and change over
to the server that I put this

1467
01:03:19,396 --> 01:03:25,106
on this morning and let me
go into Lecture 9 Source Map

1468
01:03:25,606 --> 01:03:26,526
and this is map1.html.

1469
01:03:26,526 --> 01:03:28,836
Again, this will
be on the website.

1470
01:03:29,146 --> 01:03:30,126
So that's this.

1471
01:03:30,736 --> 01:03:32,176
There's not much
code here at all

1472
01:03:32,176 --> 01:03:35,346
but if you glance quickly you'll
see a little bit of JavaScript

1473
01:03:35,346 --> 01:03:37,246
and then little bit of XHTML.

1474
01:03:37,496 --> 01:03:40,446
So what does this thing look
like and then how does it work?

1475
01:03:40,446 --> 01:03:41,106
Here's map1.html.

1476
01:03:41,546 --> 01:03:45,736
Ok. Kind of ugly but hey
it's not at maps.google.com.

1477
01:03:45,736 --> 01:03:48,986
It's at CS50.net so that's
a step in some direction.

1478
01:03:49,196 --> 01:03:51,836
It's at least my own
map and actually wow.

1479
01:03:51,926 --> 01:03:52,956
I mean look at that.

1480
01:03:52,956 --> 01:03:53,256
What is that?

1481
01:03:53,256 --> 01:03:54,426
Twenty lines of code?

1482
01:03:54,426 --> 01:03:56,086
I made my own Google map, right.

1483
01:03:56,086 --> 01:03:57,646
Sort of our fake
Google maps now.

1484
01:03:57,966 --> 01:03:58,966
So how did I do this?

1485
01:03:59,366 --> 01:04:00,266
Well notice this.

1486
01:04:00,836 --> 01:04:04,866
At the bottom of this html
file I have a body element

1487
01:04:05,266 --> 01:04:09,336
with two new details just as
there's an on submit handler

1488
01:04:09,446 --> 01:04:11,046
which says on submission
do this.

1489
01:04:11,346 --> 01:04:13,666
There's also an on
load handler which says

1490
01:04:13,706 --> 01:04:16,866
on loading this page do this
and there's an on unload handler

1491
01:04:16,866 --> 01:04:19,566
which says on unloading this
page going elsewhere do this.

1492
01:04:20,106 --> 01:04:23,176
As an aside, there's bunches
of other handlers on click,

1493
01:04:23,416 --> 01:04:26,626
on key down, on key
up and in fact any

1494
01:04:26,626 --> 01:04:29,246
of the fancy websites you
see today or even some

1495
01:04:29,246 --> 01:04:31,956
of the CS 50 stuff if you
go to our own Google maps

1496
01:04:31,956 --> 01:04:34,236
and this is actually a canonical
example of embedding a map

1497
01:04:34,236 --> 01:04:35,216
into your own website.

1498
01:04:35,506 --> 01:04:37,046
If I start typing mata.

1499
01:04:37,046 --> 01:04:40,326
Here comes a whole
bunch of suggestions.

1500
01:04:40,666 --> 01:04:44,356
What we did was we wrote some
JavaScript that says on key

1501
01:04:44,356 --> 01:04:47,906
down check what the user just
typed or probably on key up.

1502
01:04:47,906 --> 01:04:50,386
The moment my finger comes
up see if we have a match

1503
01:04:50,386 --> 01:04:52,496
and in fact we have
a match on Mather.

1504
01:04:52,686 --> 01:04:53,316
Hit Enter.

1505
01:04:53,546 --> 01:04:54,726
JavaScript executes.

1506
01:04:54,726 --> 01:04:56,816
We get whisked away to
that location of the map

1507
01:04:56,816 --> 01:04:57,876
and we get this little bubble.

1508
01:04:58,146 --> 01:05:01,516
So everything on maps.cs50.net
is going to be within reach

1509
01:05:01,516 --> 01:05:05,096
for you with Problem Set 8 so
what does it take to do it?

1510
01:05:05,196 --> 01:05:08,066
First I call apparently a
load function which I'll write

1511
01:05:08,356 --> 01:05:10,796
and then I'm just going to
call a Google function called

1512
01:05:10,796 --> 01:05:11,556
g unload.

1513
01:05:12,016 --> 01:05:14,046
So how do I have
access to Google code?

1514
01:05:14,046 --> 01:05:15,246
Well notice at the top

1515
01:05:15,246 --> 01:05:17,936
of my file previously
I've had script tags

1516
01:05:17,936 --> 01:05:18,946
which is my own code.

1517
01:05:19,206 --> 01:05:20,736
You can also have script tags

1518
01:05:20,736 --> 01:05:24,756
that don't themselves contain
code between start and close tag

1519
01:05:25,096 --> 01:05:26,326
but instead has this thing.

1520
01:05:26,616 --> 01:05:30,376
A source attribute that
says go load the source code

1521
01:05:30,436 --> 01:05:33,036
from this long cryptic
looking URL,

1522
01:05:33,036 --> 01:05:34,126
but where is it coming from?

1523
01:05:34,596 --> 01:05:38,256
Google.com and if you're bored
later pull up like Facebook.com

1524
01:05:38,256 --> 01:05:39,256
and go to view source.

1525
01:05:39,256 --> 01:05:40,536
Look at the top of the file.

1526
01:05:40,536 --> 01:05:41,936
It'll look a little messy
because there's a lot

1527
01:05:41,936 --> 01:05:45,686
of content there but if you look
for script tags you will find

1528
01:05:45,746 --> 01:05:49,056
that there's a whole bunch
of .js files being loaded

1529
01:05:49,056 --> 01:05:50,866
by Facebook every
time you visit it

1530
01:05:51,026 --> 01:05:52,426
and that's the same idea here.

1531
01:05:52,426 --> 01:05:54,546
They've just factored their
code out to separate files.

1532
01:05:54,956 --> 01:05:56,746
So, let's see what
else is happening.

1533
01:05:56,746 --> 01:06:00,016
Ok. So the entire content
of my page is one div.

1534
01:06:00,386 --> 01:06:02,426
I have a div that I've
given an Id of map.

1535
01:06:02,766 --> 01:06:06,546
I've used some CSS to say
make it 800 pixels wide,

1536
01:06:06,956 --> 01:06:08,756
500 pixels tall and that's it.

1537
01:06:08,756 --> 01:06:11,666
There's not content on
this page by default.

1538
01:06:11,926 --> 01:06:16,196
In fact, if I ditch this load
function call and go back

1539
01:06:16,196 --> 01:06:19,406
to my browser and reload this
page that is my web page.

1540
01:06:19,526 --> 01:06:22,126
There's nothing there because
apparently the magic comes

1541
01:06:22,126 --> 01:06:22,946
from JavaScript.

1542
01:06:23,236 --> 01:06:24,626
So what is my load function?

1543
01:06:25,156 --> 01:06:27,966
Well this is pretty much ripped
from Google's own documentation.

1544
01:06:28,296 --> 01:06:29,576
I have a function called load

1545
01:06:29,576 --> 01:06:31,466
which I clearly wrote
right here.

1546
01:06:31,886 --> 01:06:32,986
I do a little sanity check

1547
01:06:32,986 --> 01:06:34,686
because Google's
documentation told me to.

1548
01:06:34,686 --> 01:06:37,936
It's kind of a long function
name but I'm supposed to call

1549
01:06:37,936 --> 01:06:40,096
if GBrowser is compatible.

1550
01:06:40,156 --> 01:06:42,976
This is a Boolean function says
yes this browser support it

1551
01:06:42,976 --> 01:06:44,506
or false it's not supported.

1552
01:06:44,856 --> 01:06:46,596
If it is supported
what do I want to do

1553
01:06:46,736 --> 01:06:49,006
and this is what's brilliant
frankly about Google maps

1554
01:06:49,006 --> 01:06:52,266
and any of these company's
APIs, two lines of code,

1555
01:06:52,266 --> 01:06:55,166
literally to embed a
Google map in your website.

1556
01:06:55,466 --> 01:06:57,116
First I declare a
variable called map.

1557
01:06:57,636 --> 01:07:00,886
I call new GMap2 because
this is the second version

1558
01:07:00,886 --> 01:07:01,876
of the Google maps API.

1559
01:07:02,486 --> 01:07:03,816
Where do I want to put the map?

1560
01:07:04,116 --> 01:07:06,876
I simply have to tell
Google GMap2 function,

1561
01:07:07,196 --> 01:07:09,196
the element that I want to fill

1562
01:07:09,416 --> 01:07:11,486
with their map, with
their tiles.

1563
01:07:11,806 --> 01:07:12,746
Why do I say map?

1564
01:07:13,046 --> 01:07:14,636
Because I have a
div whose Id is map.

1565
01:07:15,086 --> 01:07:17,576
So if I had said foo here,
I have to say foo here

1566
01:07:17,886 --> 01:07:18,666
but I just went with map.

1567
01:07:18,846 --> 01:07:20,666
Finally, I have to
do one last thing.

1568
01:07:20,886 --> 01:07:23,836
I have to tell the map by
way of the dot operator

1569
01:07:24,016 --> 01:07:26,026
to call this function
set center.

1570
01:07:26,276 --> 01:07:28,446
So we've seen two things
in JavaScript thus far.

1571
01:07:29,066 --> 01:07:31,236
You can have a variable
that's got a property,

1572
01:07:31,236 --> 01:07:32,566
a value inside of it.

1573
01:07:32,656 --> 01:07:33,776
We've seen dot value.

1574
01:07:33,986 --> 01:07:37,906
We've seen dot high, dot low,
dot price but in JavaScript

1575
01:07:37,906 --> 01:07:41,896
because it's an object-oriented
language you can also call

1576
01:07:42,096 --> 01:07:44,756
functions that are
inside of variables

1577
01:07:45,046 --> 01:07:48,476
so for our purposes it will
just tease you with this feature

1578
01:07:48,476 --> 01:07:52,376
that exists in Java and C++
and CSharp and other languages

1579
01:07:52,716 --> 01:07:54,946
but for now just know
because map is a variable

1580
01:07:54,946 --> 01:07:57,306
and because we assigned
it the return value

1581
01:07:57,306 --> 01:07:58,606
of this Google function,

1582
01:07:58,956 --> 01:08:01,126
that Google function returns
what's called an object

1583
01:08:01,156 --> 01:08:04,106
that has not only
properties or variable inside

1584
01:08:04,106 --> 01:08:05,836
of it but also functions.

1585
01:08:06,136 --> 01:08:08,396
So this function because of
the documentation is called

1586
01:08:08,396 --> 01:08:09,116
set center.

1587
01:08:09,396 --> 01:08:10,296
Where do I center it?

1588
01:08:10,296 --> 01:08:12,226
Well I center it
using this syntax.

1589
01:08:12,776 --> 01:08:16,486
I create a new GLatLongitude
object.

1590
01:08:16,776 --> 01:08:19,696
This is another function that
takes two arguments, latitude

1591
01:08:19,696 --> 01:08:21,966
and longitude and how
did I figure these out?

1592
01:08:21,966 --> 01:08:24,116
I copied them from
their documentation.

1593
01:08:24,116 --> 01:08:28,706
This is for Mountain View
and then I went thirteen.

1594
01:08:28,706 --> 01:08:30,076
This is the zoom level.

1595
01:08:30,386 --> 01:08:32,036
So let's just tweak one thing.

1596
01:08:32,036 --> 01:08:33,826
So let me go ahead and
you know let me see.

1597
01:08:33,826 --> 01:08:35,036
I don't know what thirteen is.

1598
01:08:35,036 --> 01:08:36,486
I want to see what three is.

1599
01:08:36,486 --> 01:08:37,746
Let me get a sense
of what this means.

1600
01:08:37,806 --> 01:08:38,936
Let me reload my page.

1601
01:08:39,556 --> 01:08:41,186
Ok, so three apparently is way

1602
01:08:41,186 --> 01:08:44,856
out whereas thirteen
was apparently way in.

1603
01:08:45,096 --> 01:08:46,466
Alright so we're
getting somewhere.

1604
01:08:46,756 --> 01:08:48,296
Really underwhelming
to put it here.

1605
01:08:48,296 --> 01:08:50,836
I'm just going to take
a shot in the dark here.

1606
01:08:51,136 --> 01:08:53,206
I don't know what
this longitude is.

1607
01:08:53,286 --> 01:08:56,586
Let's try 137 and
see where we end up.

1608
01:08:57,336 --> 01:08:59,896
Doesn't exist or
it's not on the map.

1609
01:08:59,896 --> 01:09:02,716
Let's try, let's do not
do something as crazy.

1610
01:09:02,716 --> 01:09:04,546
Let's do negative 102 here.

1611
01:09:04,916 --> 01:09:06,386
Reload. Ok.

1612
01:09:06,776 --> 01:09:10,276
Don't know where I am but
we could follow this road

1613
01:09:10,276 --> 01:09:11,576
and see where it leads right?

1614
01:09:11,576 --> 01:09:12,636
[ Laughter ]

1615
01:09:12,636 --> 01:09:15,436
So apparently notice I
haven't put any zoom controls

1616
01:09:15,436 --> 01:09:18,436
so let's actually, let's
actually solve this problem.

1617
01:09:18,436 --> 01:09:22,956
Roll back to our original
version here and ok come on.

1618
01:09:23,086 --> 01:09:29,046
Let me roll back there
and go into Map 2.

1619
01:09:29,316 --> 01:09:30,976
So map2 is a little better

1620
01:09:30,976 --> 01:09:33,486
in that I kept reading the
documentation and as you will

1621
01:09:33,486 --> 01:09:37,436
for Problem Set 8 and now
notice it's a little prettier

1622
01:09:37,436 --> 01:09:38,576
because it fills the window.

1623
01:09:38,806 --> 01:09:39,576
How did I do this?

1624
01:09:39,576 --> 01:09:41,176
Well let's just take
a quick glance here.

1625
01:09:41,226 --> 01:09:46,096
Oh. Pretty easy to have it fill
the screen, 100%, 100% voila.

1626
01:09:46,156 --> 01:09:48,436
So it's sort of a marginal
improvement but not all

1627
01:09:48,436 --> 01:09:50,866
that magical so let's look
at the third variance here.

1628
01:09:50,866 --> 01:09:53,606
Let me open Map3.html.

1629
01:09:54,196 --> 01:09:55,926
Ok. That's kind of cool.

1630
01:09:55,926 --> 01:09:58,016
At least it's now
relevant to my life right?

1631
01:09:58,016 --> 01:09:59,126
So how did I do this?

1632
01:09:59,426 --> 01:10:01,846
Map3.html, I did
a few new things.

1633
01:10:01,846 --> 01:10:05,536
One, I figured out using Google
Earth or using Wikipedia frankly

1634
01:10:05,536 --> 01:10:08,146
where Cambridge is in
terms of GPS coordinates

1635
01:10:08,416 --> 01:10:10,336
and then I replaced
the Palo Alto ones

1636
01:10:10,336 --> 01:10:13,176
or the mountain view ones
with Cambridge's number

1637
01:10:13,176 --> 01:10:14,256
so these are the latitude,

1638
01:10:14,256 --> 01:10:15,796
longitudinal coordinates
for Cambridge.

1639
01:10:16,036 --> 01:10:18,356
Kept the same zoom level but
then again I kept reading

1640
01:10:18,356 --> 01:10:20,476
in the documentation
because Google Maps

1641
01:10:20,476 --> 01:10:23,536
as I know it has some really
cool things like these arrows

1642
01:10:23,536 --> 01:10:26,426
that let you zoom in and
out and pan left and right,

1643
01:10:26,696 --> 01:10:27,906
change to satellite view.

1644
01:10:28,206 --> 01:10:30,036
I kind of want that
in my own website.

1645
01:10:30,216 --> 01:10:31,136
Well how do you do this?

1646
01:10:31,896 --> 01:10:34,536
You call certain functions that
the documentation tells you to.

1647
01:10:34,906 --> 01:10:37,346
There's a function
called GMapTypeControl

1648
01:10:37,346 --> 01:10:39,376
that if you allocate
it and then pass it

1649
01:10:39,376 --> 01:10:42,916
to another function called
addControl this simply adds this

1650
01:10:42,996 --> 01:10:44,086
thing at the top right.

1651
01:10:44,406 --> 01:10:46,246
This is the so-called
type control.

1652
01:10:46,366 --> 01:10:48,116
Why? That's what the
documentation calls it.

1653
01:10:48,496 --> 01:10:51,876
If I want to add the zoom
thing on the left I use a GMap,

1654
01:10:51,876 --> 01:10:56,606
GLargeMapControl and pass it to
this function called addControl

1655
01:10:56,766 --> 01:10:59,066
and then finally I can't
mimic this on my tablet here

1656
01:10:59,306 --> 01:11:01,096
because I don't have
a mouse with a wheel,

1657
01:11:01,366 --> 01:11:04,666
but these two functions also
let desktop users use the little

1658
01:11:04,666 --> 01:11:08,556
mouse wheel and zoom in and zoom
out and it's literally that easy

1659
01:11:08,556 --> 01:11:09,576
and this is when I speak

1660
01:11:09,576 --> 01:11:12,276
to again maybe I'm biased being
a bit of a geek with this stuff

1661
01:11:12,546 --> 01:11:14,376
but the fact that
it's so damn easy

1662
01:11:14,376 --> 01:11:17,946
to just make really cool things
really I think puts the fun back

1663
01:11:17,946 --> 01:11:18,796
into programming.

1664
01:11:19,206 --> 01:11:24,186
So let's take a look at just
two final examples here.

1665
01:11:24,186 --> 01:11:25,966
Map4.html has this.

1666
01:11:26,476 --> 01:11:28,376
So that's kind of cool
and now it's even more

1667
01:11:28,376 --> 01:11:29,756
like the Google mps I now.

1668
01:11:30,026 --> 01:11:32,356
If I click this little red
dot, that's kind of cool.

1669
01:11:32,356 --> 01:11:35,266
I get a little cartoon bubble
with the name Science Center

1670
01:11:35,486 --> 01:11:37,846
and a link to Wikipedia's
article about us.

1671
01:11:38,166 --> 01:11:40,236
Well, let me go into map4 here.

1672
01:11:40,236 --> 01:11:40,976
How did I do this?

1673
01:11:41,266 --> 01:11:43,116
Again I'm intentionally
flying through some of this

1674
01:11:43,116 --> 01:11:45,396
because again P Set 8
will walk you through this

1675
01:11:45,396 --> 01:11:47,436
and again it's really
just an RTFM thing.

1676
01:11:47,486 --> 01:11:48,406
How do I do this?

1677
01:11:48,406 --> 01:11:49,726
I looked it up in the manual.

1678
01:11:49,986 --> 01:11:52,416
Well this is a little
more interesting though.

1679
01:11:52,416 --> 01:11:55,486
This function, this
version of load

1680
01:11:55,486 --> 01:11:58,386
in map4.html again
centers me on Cambridge.

1681
01:11:58,606 --> 01:12:01,886
It does the zoom level here

1682
01:12:01,886 --> 01:12:04,316
and then I called this
function called createMarker

1683
01:12:04,646 --> 01:12:05,956
and I pass it a point.

1684
01:12:06,046 --> 01:12:06,706
What's a point?

1685
01:12:06,976 --> 01:12:11,076
Well this time I actually saved
the return value of GLatLng

1686
01:12:11,536 --> 01:12:12,746
so that's kind of interesting.

1687
01:12:12,746 --> 01:12:16,026
Let me see how I wrote
createMarker and this is syntax

1688
01:12:16,056 --> 01:12:18,036
that at first glance
looks a little messy

1689
01:12:18,166 --> 01:12:20,016
but we'll just reason
through it quickly here.

1690
01:12:20,316 --> 01:12:24,056
So createMarker apparently
takes a point, a GPS coordinate

1691
01:12:24,436 --> 01:12:26,546
and then it creates
something called a GMarker.

1692
01:12:26,546 --> 01:12:28,876
Documentation probably
explains that a little more

1693
01:12:29,136 --> 01:12:30,446
and now the only
thing I have to do

1694
01:12:30,446 --> 01:12:32,366
and this is the intellectually
interesting part.

1695
01:12:32,606 --> 01:12:35,196
If I now have the notion of
a point and I have the notion

1696
01:12:35,196 --> 01:12:38,206
of a marker and I also
want to create the notion

1697
01:12:38,206 --> 01:12:39,916
of a popup window,
I kind of have

1698
01:12:39,916 --> 01:12:42,976
to wire these things together
and this is a good mental model

1699
01:12:42,976 --> 01:12:45,196
for programming these
days with these APIs.

1700
01:12:45,196 --> 01:12:47,756
It's kind of fun because you
grab this thing off the shelf,

1701
01:12:47,756 --> 01:12:50,156
this thing off the shelf
and you with you own skills

1702
01:12:50,156 --> 01:12:51,726
and savvy just have
to figure out how

1703
01:12:51,726 --> 01:12:54,436
to wire these things
together using JavaScript,

1704
01:12:54,436 --> 01:12:55,246
PHP or whatever.

1705
01:12:55,476 --> 01:12:57,866
Well in this case, how am
I wiring them together?

1706
01:12:58,226 --> 01:13:00,246
I'm calling a function
called addListener

1707
01:13:00,606 --> 01:13:03,636
and I'm telling Google listen
to the marker, the red dot.

1708
01:13:04,116 --> 01:13:07,526
Every time it's clicked call
this anonymous function.

1709
01:13:07,526 --> 01:13:09,306
It's anonymous because I
don't need it anywhere else.

1710
01:13:09,346 --> 01:13:10,926
I'm just giving you
the function directly.

1711
01:13:11,226 --> 01:13:12,236
What does this function do?

1712
01:13:12,626 --> 01:13:15,196
Well, it's apparently creating
a variable called XHTML.

1713
01:13:15,826 --> 01:13:19,056
It's storing in there the
Science Center in a bold tag

1714
01:13:19,056 --> 01:13:20,766
so apparently I'm
making some XHTML

1715
01:13:20,766 --> 01:13:24,216
on the fly plus equals
the concatenation operator

1716
01:13:24,436 --> 01:13:27,276
to combine so it's like doing
plus equals minus equals star

1717
01:13:27,276 --> 01:13:31,296
equals in C, same thing so
here is the XHTML that ends

1718
01:13:31,296 --> 01:13:32,476
up in that cartoon bubble.

1719
01:13:32,696 --> 01:13:34,856
How do I actually open
the cartoon bubble?

1720
01:13:35,036 --> 01:13:40,656
So notice I called
map.openInfoWindowHtml and pass

1721
01:13:40,656 --> 01:13:43,966
in the point that I was
given and I pass in the XHTML

1722
01:13:44,006 --> 01:13:45,026
that was just created.

1723
01:13:45,236 --> 01:13:46,126
So now take a step back

1724
01:13:46,346 --> 01:13:50,406
and because we have some nesting
here this code is not called the

1725
01:13:50,406 --> 01:13:52,636
moment the page loads
because everything

1726
01:13:52,636 --> 01:13:55,946
in this yellow bracket is part
of this anonymous function

1727
01:13:56,236 --> 01:13:59,566
which is only called when
the marker is clicked

1728
01:13:59,786 --> 01:14:02,166
because the browser
was told to listen

1729
01:14:02,336 --> 01:14:03,826
for precisely that behavior.

1730
01:14:04,186 --> 01:14:07,126
So the net result is again
functionality you're very

1731
01:14:07,126 --> 01:14:10,636
familiar with something
like this and it pops it up

1732
01:14:10,636 --> 01:14:14,366
but there's one thing we
should finish strong with.

1733
01:14:15,016 --> 01:14:17,216
Kind of an uninteresting website

1734
01:14:17,216 --> 01:14:18,986
in that it always
does the same thing.

1735
01:14:19,236 --> 01:14:21,016
Where is the dynamism
we promised?

1736
01:14:21,246 --> 01:14:25,046
Well if we go to map5
we need to do this.

1737
01:14:25,256 --> 01:14:28,186
If I click here, I went back
to Palo Alto because I kind

1738
01:14:28,186 --> 01:14:29,666
of like just for
fun when I click

1739
01:14:29,666 --> 01:14:32,166
on this marker I don't want
some static Wikipedia article.

1740
01:14:32,386 --> 01:14:36,036
I want the current stock
price of Google 542.72.

1741
01:14:36,036 --> 01:14:36,786
Close this window.

1742
01:14:37,086 --> 01:14:38,486
Now odds are it doesn't change.

1743
01:14:38,686 --> 01:14:40,906
Oh, there we go 542.49.

1744
01:14:41,316 --> 01:14:43,436
Click it again 542.49.

1745
01:14:44,036 --> 01:14:45,276
If we let Allen.

1746
01:14:45,276 --> 01:14:46,736
There we go 542.40.

1747
01:14:46,736 --> 01:14:48,576
So now there's some dynamism.

1748
01:14:48,576 --> 01:14:50,526
Even though I haven't revealed
what's under the hood think

1749
01:14:50,526 --> 01:14:52,006
about the pieces that
must be involved.

1750
01:14:52,216 --> 01:14:54,536
It's the same exact
program as map4.html

1751
01:14:54,536 --> 01:14:58,156
but apparently now instead
of creating a static string,

1752
01:14:58,156 --> 01:15:00,996
I probably stole some
code from earlier today

1753
01:15:01,136 --> 01:15:02,656
with which is Ajax like.

1754
01:15:03,016 --> 01:15:06,876
I make a second call to
my own server, quote3.php.

1755
01:15:06,876 --> 01:15:08,366
I contact Yahoo really quickly.

1756
01:15:08,366 --> 01:15:09,436
I grab the response.

1757
01:15:09,656 --> 01:15:12,926
I massage it into JSON format
and then spit it back out

1758
01:15:12,926 --> 01:15:15,696
and again my JavaScript
code grabs that price

1759
01:15:15,696 --> 01:15:17,416
and doesn't just
display it with an alert.

1760
01:15:17,416 --> 01:15:18,956
It doesn't display it in a span.

1761
01:15:19,166 --> 01:15:22,856
Instead it displays it in an
openInfoWindow function call.

1762
01:15:23,416 --> 01:15:24,736
So more on this on Monday.

1763
01:15:25,006 --> 01:15:27,016
Good luck with Problem Set 7.

1764
01:15:27,016 --> 01:15:28,426
[ Music ]

1765
01:15:28,426 --> 01:15:39,236
Oh and let me remind
you Quad people if you'd

1766
01:15:39,236 --> 01:15:43,126
like a Shuttleboy card
2009 2010 head that way.

1767
01:15:43,126 --> 01:15:52,816
River people head that way.