1
00:00:01,516 --> 00:00:06,426
[ Silence ]

2
00:00:06,926 --> 00:00:09,846
>> All right, welcome
to Computer Science S76,

3
00:00:09,846 --> 00:00:11,786
Building Mobile Applications.

4
00:00:11,786 --> 00:00:12,686
My name is David Malan.

5
00:00:12,686 --> 00:00:14,296
I'll be your instructor
for this summer.

6
00:00:14,296 --> 00:00:16,706
So we have a lot of
new toys up here today.

7
00:00:16,706 --> 00:00:19,116
So I'm going to do my best not
to embarrass myself by toggling

8
00:00:19,116 --> 00:00:21,216
between multiple machines
and hitting these screens.

9
00:00:21,216 --> 00:00:24,176
So, please forgive if
I look like a neophyte

10
00:00:24,176 --> 00:00:25,136
when it comes to this stuff.

11
00:00:25,216 --> 00:00:27,596
But we do know a little
something, at least, hopefully,

12
00:00:27,596 --> 00:00:30,626
about mobile applications
and that's why we're here.

13
00:00:30,676 --> 00:00:34,566
So, this course is primarily
focused on the world of iOS.

14
00:00:34,786 --> 00:00:37,196
There are certainly alternatives
out there but the summer is only

15
00:00:37,196 --> 00:00:39,836
so long so, we thought we'd
pick one platform and focus

16
00:00:39,836 --> 00:00:41,346
on two aspects of it,

17
00:00:41,346 --> 00:00:44,366
namely mobile web
application development

18
00:00:44,366 --> 00:00:46,646
and native application
development,

19
00:00:46,646 --> 00:00:48,376
and let's start there.

20
00:00:48,696 --> 00:00:50,656
What is meant by these
two distinctions?

21
00:00:50,816 --> 00:00:53,146
What are we about to
get into this summer?

22
00:00:54,516 --> 00:00:57,716
[ Pause ]

23
00:00:58,216 --> 00:00:59,946
OK, so browser versus
standalone.

24
00:00:59,946 --> 00:01:02,936
So mobile web application
is one that of course runs

25
00:01:02,936 --> 00:01:04,496
within the confines
of the browser

26
00:01:04,686 --> 00:01:07,546
which likely means a mobile
web application is written

27
00:01:07,546 --> 00:01:08,366
in what language?

28
00:01:08,876 --> 00:01:13,566
Yeah, so HTML, CSS and then
if it's an actual application,

29
00:01:13,566 --> 00:01:16,046
presumably there is some
programming language underlying

30
00:01:16,046 --> 00:01:17,536
it so not just a
markup language,

31
00:01:17,536 --> 00:01:19,156
so something like JavaScript.

32
00:01:19,156 --> 00:01:21,706
So indeed, that will be the
trio of languages that we use

33
00:01:21,706 --> 00:01:23,116
for mobile web applications.

34
00:01:23,406 --> 00:01:25,676
Now, native applications,
they don't run inside

35
00:01:25,676 --> 00:01:29,406
of a browser so where
do they run?

36
00:01:29,406 --> 00:01:30,686
I'm sorry, so on the OS itself.

37
00:01:30,686 --> 00:01:35,676
So there is this language called
Objective-C that Apples used

38
00:01:35,676 --> 00:01:38,236
for some time, most recently
in the context of iOS,

39
00:01:38,416 --> 00:01:39,536
their mobile operating system

40
00:01:39,536 --> 00:01:42,016
with which you can write native
applications which are ones

41
00:01:42,236 --> 00:01:44,746
that once you've written the
source code you can compile

42
00:01:44,746 --> 00:01:48,046
them, so to speak, into
object code or machine code.

43
00:01:48,046 --> 00:01:50,916
And that machine code
runs natively on the CPU

44
00:01:50,916 --> 00:01:52,716
and on the operating system
that's running on an iPod,

45
00:01:52,716 --> 00:01:55,926
on theiPad or on an
iPhone these days.

46
00:01:55,926 --> 00:01:57,906
So we're going to focus on
both of these over the course

47
00:01:57,906 --> 00:02:00,466
of the next several weeks
though mostly on the native side

48
00:02:00,466 --> 00:02:02,186
of things because
indeed that's probably

49
00:02:02,186 --> 00:02:05,406
where the greatest returns
are in terms of new material

50
00:02:05,406 --> 00:02:07,596
and challenges what
we will spend today

51
00:02:07,596 --> 00:02:10,426
and the first project in the
course on the mobile web aspect.

52
00:02:11,086 --> 00:02:14,706
So before we get
there, let's take a look

53
00:02:14,706 --> 00:02:15,866
at what we actually
mean by this.

54
00:02:15,866 --> 00:02:16,916
So let's start with mobile web.

55
00:02:16,916 --> 00:02:19,946
Here is a screen shot of a
typical iPhone and you can

56
00:02:19,946 --> 00:02:21,836
of course pull up Safari
on the bottom there.

57
00:02:22,076 --> 00:02:23,936
And when you do, you
might be inclined

58
00:02:23,936 --> 00:02:25,956
to actually visit a
website, like Harvard's here,

59
00:02:26,116 --> 00:02:27,126
that's mobile friendly.

60
00:02:27,446 --> 00:02:29,046
So the irony is if
you go to harvard.edu,

61
00:02:29,046 --> 00:02:31,856
you don't actually get the
mobile friendly version,

62
00:02:31,856 --> 00:02:33,666
you get the desktop
friendly version.

63
00:02:33,666 --> 00:02:37,856
But if you guess and type
in manually m.harvard.edu,

64
00:02:37,856 --> 00:02:41,176
M generally designating mobile,
you do in fact get this site

65
00:02:41,176 --> 00:02:42,746
which looks much
more touch friendly.

66
00:02:43,076 --> 00:02:47,336
So what does it take to actually
make a mobile web application

67
00:02:47,336 --> 00:02:49,376
like this that's
clearly conducive

68
00:02:49,376 --> 00:02:52,236
to actually interacting
it with your fingers?

69
00:02:52,406 --> 00:02:53,726
So things are big
enough to touch.

70
00:02:53,766 --> 00:02:55,156
Text is big enough to read.

71
00:02:55,516 --> 00:02:57,156
What's involved in doing this?

72
00:02:57,156 --> 00:03:00,226
Well, you all have probably
come into this course

73
00:03:00,226 --> 00:03:02,546
with some background
in HTML and CSS,

74
00:03:02,546 --> 00:03:04,016
maybe a little bit
of JavaScript.

75
00:03:04,016 --> 00:03:07,046
But to do something like this,
all you need is pure HTML,

76
00:03:07,046 --> 00:03:09,986
a little bit of CSS and a little
bit of savvy as to what tags

77
00:03:09,986 --> 00:03:12,906
and what properties
actually underlie the little

78
00:03:12,906 --> 00:03:15,616
configuration details that
make things much more mobile

79
00:03:15,616 --> 00:03:16,716
friendly, much more touchable,

80
00:03:16,716 --> 00:03:18,196
much larger at the
end of the day.

81
00:03:18,566 --> 00:03:20,056
So, here's an example
of Harvard's site.

82
00:03:20,056 --> 00:03:23,586
It may look like these things
are buttons, four buttons here,

83
00:03:23,586 --> 00:03:26,656
three buttons down, but all
of these are are pings or gifs

84
00:03:26,656 --> 00:03:29,286
or jpegs in image tags, IMG tags

85
00:03:29,286 --> 00:03:30,566
with which you're
probably familiar.

86
00:03:30,786 --> 00:03:33,216
They're laid out in some kind
of grid fashion with the table

87
00:03:33,216 --> 00:03:36,216
or with the sequence of divs and
so, they've just been optimized

88
00:03:36,216 --> 00:03:38,146
by the designers to
be sort of conducive

89
00:03:38,146 --> 00:03:39,566
to being touched
buy one's finger

90
00:03:39,796 --> 00:03:42,466
and the graphics have all been
similarly designed in Photoshop

91
00:03:42,466 --> 00:03:44,246
but they're like to
fit in this interface.

92
00:03:44,246 --> 00:03:46,316
So at the end of the day, if
we look underneath the hood

93
00:03:46,316 --> 00:03:48,526
at this website and look at
its code, you're just going

94
00:03:48,526 --> 00:03:51,486
to see some fairly familiar
HTML, CSS and not all

95
00:03:51,486 --> 00:03:54,256
that much magic but they're
probably are a few tags

96
00:03:54,256 --> 00:03:57,036
that underlie that make it a
little more mobile friendly just

97
00:03:57,036 --> 00:03:59,066
like that they do
sites like these.

98
00:03:59,066 --> 00:04:01,596
You just take it for granted
that when you pull up a site

99
00:04:01,596 --> 00:04:05,216
like Gmail or m.harvard.edu
or dozens of others out there

100
00:04:05,216 --> 00:04:06,606
that you might use,
that they come

101
00:04:06,606 --> 00:04:09,226
up in this web mobile
conducive way.

102
00:04:09,476 --> 00:04:12,666
But it does take a
little bit of savvy.

103
00:04:12,726 --> 00:04:17,766
So before we dive into anything
approaching the native side

104
00:04:17,766 --> 00:04:20,816
of things, let's take
a look at HTML 5.

105
00:04:20,816 --> 00:04:23,816
So, if you've been programming
HTML in some form for some time,

106
00:04:24,016 --> 00:04:26,286
you've probably started out
with earlier iterations,

107
00:04:26,286 --> 00:04:29,266
maybe even XHTML and
various tags that have come

108
00:04:29,266 --> 00:04:30,116
and gone over the years.

109
00:04:30,116 --> 00:04:32,216
But HTML 5 is now what's with us

110
00:04:32,216 --> 00:04:34,006
and browser support
is increasing

111
00:04:34,006 --> 00:04:34,966
for its several features.

112
00:04:35,206 --> 00:04:36,536
We won't dwell too
much on the basics

113
00:04:36,536 --> 00:04:38,776
of HTML 'cause I will assume
that you largely know those

114
00:04:38,826 --> 00:04:41,816
but what we will do is try to
solve at least one problem.

115
00:04:41,816 --> 00:04:44,996
But first, some canonical
HTML, there we go,

116
00:04:45,086 --> 00:04:46,006
my first goof [phonetic].

117
00:04:46,386 --> 00:04:49,326
All right, there's
what lies ahead.

118
00:04:49,386 --> 00:04:54,866
So, let's go to, let's
say, the slide here.

119
00:04:55,016 --> 00:04:56,496
All right, just as I intended.

120
00:04:56,786 --> 00:05:00,166
So this is a mobile website
that we've made for the course,

121
00:05:00,166 --> 00:05:03,496
Computer Science S76
and it's got two links,

122
00:05:03,496 --> 00:05:05,336
lectures and syllabus.

123
00:05:05,986 --> 00:05:08,706
But odds are most of you
can barely, if at all,

124
00:05:08,856 --> 00:05:10,806
see lectures or syllabus.

125
00:05:10,886 --> 00:05:13,566
And yet, this is just
very simple HTML.

126
00:05:13,566 --> 00:05:16,016
In fact, what tags have I
probably used in this website?

127
00:05:17,026 --> 00:05:20,266
I can show off that this thing
does actually work on demand.

128
00:05:21,156 --> 00:05:22,576
So we've used the anchor tag

129
00:05:22,576 --> 00:05:25,726
to actually have a link that's
clickable and blue there--

130
00:05:25,726 --> 00:05:27,516
what other tags are
probably there.

131
00:05:28,296 --> 00:05:29,356
What's that?

132
00:05:29,526 --> 00:05:32,456
So the list tag, so a UL tag
for unordered list probably,

133
00:05:32,456 --> 00:05:35,526
an LI tag and then the
easy ones, HTML body, head,

134
00:05:35,526 --> 00:05:37,306
title and all of the
other boring ones

135
00:05:37,306 --> 00:05:38,846
that probably underlie
this page.

136
00:05:39,176 --> 00:05:42,726
But I haven't really told the
browser that I should anticipate

137
00:05:42,976 --> 00:05:45,206
that this thing's going to
be viewed on a mobile device.

138
00:05:45,206 --> 00:05:47,606
It's barely legible,
and why is that?

139
00:05:47,606 --> 00:05:49,996
Well, most browsers
assume by default,

140
00:05:50,266 --> 00:05:54,046
even mobile browsers running
on our phones these days,

141
00:05:54,316 --> 00:05:57,116
that they're sized really
for desktop computers.

142
00:05:57,116 --> 00:05:59,466
And just in case, this is
actually a real website

143
00:05:59,466 --> 00:06:02,346
with lots of graphics and text,
your phone is going to show it

144
00:06:02,346 --> 00:06:04,906
at the default zoom level which
is not going to lend itself

145
00:06:04,976 --> 00:06:07,646
to actually seeing up
close what the text is

146
00:06:07,646 --> 00:06:09,076
that you've actually
marked up there.

147
00:06:09,416 --> 00:06:11,156
So how can we go
about fixing this?

148
00:06:11,886 --> 00:06:14,956
What's the easiest kludge via
which we can fix this problem?

149
00:06:15,356 --> 00:06:17,196
>> Enlarge the font size.

150
00:06:17,196 --> 00:06:19,886
>> Enlarge the font size,
right, we can deploy some CSS.

151
00:06:19,886 --> 00:06:22,446
We can change the font
size, the font family.

152
00:06:22,446 --> 00:06:24,876
Any number of tweaks we can
make aesthetically in hopes

153
00:06:24,876 --> 00:06:25,836
that it actually works.

154
00:06:25,836 --> 00:06:27,876
Unfortunately then, if you
then view the same side

155
00:06:28,086 --> 00:06:30,416
on a desktop browser, if
that's also your goal,

156
00:06:30,416 --> 00:06:31,306
then the thing is going to look

157
00:06:31,486 --> 00:06:33,096
like the opposite
problem has happened.

158
00:06:33,096 --> 00:06:34,626
So we need somehow to tell--

159
00:06:34,626 --> 00:06:36,866
we need some way of telling
the browser dynamically

160
00:06:37,016 --> 00:06:41,106
to size itself based on what the
device actually is and it turns

161
00:06:41,106 --> 00:06:42,206
out there's a way of doing this.

162
00:06:42,826 --> 00:06:44,506
So with one of this meta tags,

163
00:06:44,506 --> 00:06:46,366
which to date you might
not ever have used

164
00:06:46,366 --> 00:06:48,426
or if you've used them,
you've used them for keywords

165
00:06:48,426 --> 00:06:50,406
or for descriptions
underneath the web page.

166
00:06:50,606 --> 00:06:53,166
You can actually use
them for other names,

167
00:06:53,166 --> 00:06:54,916
namely one called viewport.

168
00:06:54,916 --> 00:06:58,256
So name equals "viewport"
and if we give it a content

169
00:06:58,256 --> 00:07:02,356
or just a value of this,
with equals device width,

170
00:07:02,646 --> 00:07:05,086
you can probably infer from
this what it's going to do.

171
00:07:05,086 --> 00:07:06,776
It's essentially
instructing the browser

172
00:07:06,916 --> 00:07:08,876
that it should size
the web page based

173
00:07:08,876 --> 00:07:12,896
on the device width not some
assumption of a typical web page

174
00:07:12,896 --> 00:07:15,516
which might be 800
pixels, 1024 pixels

175
00:07:15,516 --> 00:07:17,176
or even bigger these days.

176
00:07:17,376 --> 00:07:21,016
And literally, just by putting
that in the head of my web page

177
00:07:21,076 --> 00:07:25,176
as HTML, I end up getting
an example like this

178
00:07:25,626 --> 00:07:26,586
with no other changes.

179
00:07:26,586 --> 00:07:29,486
Much more readable, sizes
to a reasonable extent

180
00:07:29,726 --> 00:07:31,676
and this is one of the most
useful things you can do

181
00:07:31,676 --> 00:07:33,656
certainly for a text-driven
website

182
00:07:33,896 --> 00:07:36,736
and just making things work
on your mobile browsers.

183
00:07:36,956 --> 00:07:38,056
Now, if you go back
here, there's--

184
00:07:38,056 --> 00:07:39,586
it turns out there's a
bunch of other things.

185
00:07:39,926 --> 00:07:41,806
And this might now
explain why you've gone

186
00:07:41,806 --> 00:07:44,376
to some mobile unfriendly
websites

187
00:07:44,376 --> 00:07:47,616
and have been driven nuts by
the fact that you can't do what

188
00:07:47,906 --> 00:07:49,806
on some mobile websites
on your phone.

189
00:07:51,166 --> 00:07:54,756
So you can't zoom no matter
how you try to pinch and zoom,

190
00:07:54,956 --> 00:07:58,096
it just doesn't work frankly
'cause some idiot has disabled

191
00:07:58,096 --> 00:08:01,206
it by way of one of this
meta tags by specifying

192
00:08:01,206 --> 00:08:03,706
that the minimum scale or
the maximum scale of his

193
00:08:03,706 --> 00:08:06,426
or her website is,
for instance, 1.0.

194
00:08:06,536 --> 00:08:08,266
That's the maximum
and the minimum via

195
00:08:08,266 --> 00:08:09,336
which you might want to scale.

196
00:08:09,336 --> 00:08:11,266
Now the upside of doing
something like this is

197
00:08:11,266 --> 00:08:12,376
that the site is probably going

198
00:08:12,376 --> 00:08:14,706
to look exactly the way
the designer intended.

199
00:08:14,706 --> 00:08:17,306
The downside of course is that
if your eyes are not consistent

200
00:08:17,306 --> 00:08:19,566
with the designer's vision,
you're not going to even going--

201
00:08:19,646 --> 00:08:22,436
you're not even going to be
able to override that setting.

202
00:08:22,436 --> 00:08:24,616
So some value but
also a frustration,

203
00:08:24,616 --> 00:08:27,286
so do bear in mind too that just
because things work well for you

204
00:08:27,286 --> 00:08:29,776
on your own phone, it doesn't
necessarily mean your users are

205
00:08:29,776 --> 00:08:31,126
going to be as enamored.

206
00:08:31,126 --> 00:08:33,886
But by far, the most
useful at first glance

207
00:08:33,886 --> 00:08:36,696
for us would be something
like this and just solving

208
00:08:36,866 --> 00:08:38,696
that particular problem.

209
00:08:39,256 --> 00:08:41,696
All right, so let's
take a look then

210
00:08:41,696 --> 00:08:44,066
at a more generalized web page.

211
00:08:44,066 --> 00:08:46,026
Let me see if I can
master this yet.

212
00:08:46,556 --> 00:08:50,066
So here, I propose that this is
the simplest possible web page

213
00:08:50,066 --> 00:08:53,286
that we can make in
HTML 5 that validates

214
00:08:53,416 --> 00:08:55,856
and at least has some
bare minimum of content.

215
00:08:55,856 --> 00:08:57,626
So for those unfamiliar
with HTML 5,

216
00:08:57,886 --> 00:09:00,406
turns out it's probably
simpler than the flavor of HTML

217
00:09:00,406 --> 00:09:01,486
with which you've been familiar.

218
00:09:01,646 --> 00:09:05,486
One, the doctype is no longer
the atrocious unmemorable thing

219
00:09:05,486 --> 00:09:08,566
that it was for some time
with HTML 4, with X HTML.

220
00:09:08,756 --> 00:09:12,926
It's quite simply open
bracket bang doctype HTML.

221
00:09:13,006 --> 00:09:13,946
And then below that,

222
00:09:14,116 --> 00:09:16,366
you actually have the
body of your web page.

223
00:09:16,366 --> 00:09:18,726
So this is called the
doctype declaration,

224
00:09:18,726 --> 00:09:20,246
the document type declaration.

225
00:09:20,486 --> 00:09:22,956
And all this really is,
is a signal, a hint,

226
00:09:23,356 --> 00:09:26,076
to the browser that's
reading the contents

227
00:09:26,076 --> 00:09:29,596
of this dot HTML file what
version of HTML it is.

228
00:09:29,596 --> 00:09:33,016
Because if you've been designing
pages for the web for some time,

229
00:09:33,346 --> 00:09:36,726
you've probably ran into various
headaches with Chrome or Firefox

230
00:09:36,726 --> 00:09:39,506
or IE or other browsers
because they all behave

231
00:09:39,646 --> 00:09:40,616
slightly differently.

232
00:09:40,616 --> 00:09:42,996
You might have come across
something called quirks mode.

233
00:09:42,996 --> 00:09:46,486
And quirks mode essentially
dictates how a browser

234
00:09:47,216 --> 00:09:51,186
interprets certain patterns
of HTML and long story short.

235
00:09:51,186 --> 00:09:54,146
It's this doctype that hopefully
these days will increasingly

236
00:09:54,146 --> 00:09:56,816
kick browsers into a
standards compliant mode

237
00:09:57,076 --> 00:09:59,626
so that your pages
work more consistently

238
00:09:59,626 --> 00:10:00,936
across multiple browsers.

239
00:10:01,206 --> 00:10:03,636
All right, but this here is
a representative web page,

240
00:10:03,766 --> 00:10:04,726
but we can do more than this.

241
00:10:04,896 --> 00:10:09,576
Suppose that we actually want
to infuse a bit of stylization,

242
00:10:09,836 --> 00:10:11,696
we can add this line
here in yellow.

243
00:10:12,286 --> 00:10:14,086
Functionally, what happens now

244
00:10:14,086 --> 00:10:18,226
when a web browser visits a web
page containing these contents

245
00:10:18,586 --> 00:10:20,996
as it parses the file, top
to bottom, left to right?

246
00:10:21,466 --> 00:10:23,546
Tell a story if you could,
just in your own words,

247
00:10:23,546 --> 00:10:24,946
somehow involving the networks,

248
00:10:24,946 --> 00:10:28,156
somehow involving whatever this
yellow tag is that explains

249
00:10:28,156 --> 00:10:29,906
for those less familiar
what this line

250
00:10:29,906 --> 00:10:32,056
of yellow text is
doing, functionally.

251
00:10:33,516 --> 00:10:38,696
[ Inaudible Remark ]

252
00:10:39,196 --> 00:10:44,106
OK, good. So it loads the file
styles.css from the server

253
00:10:44,106 --> 00:10:47,056
which turns out it's just a text
file and in that text file is,

254
00:10:47,056 --> 00:10:50,176
as you might have guessed, CSS
or cascading style sheet rules.

255
00:10:50,466 --> 00:10:52,996
It does load it synchronously
top to bottom.

256
00:10:52,996 --> 00:10:55,966
So there is in fact an order
to the tags in HTML so that

257
00:10:55,966 --> 00:10:58,406
if you load a file here
and then another one here,

258
00:10:58,406 --> 00:11:03,006
you can in fact assume that B
is going to be loaded after A

259
00:11:03,006 --> 00:11:04,436
which certainly has
its advantages.

260
00:11:04,436 --> 00:11:06,786
But we'll see some problems
that can nonetheless arise

261
00:11:06,786 --> 00:11:09,756
when it comes to this sort of
worry about synchronization.

262
00:11:10,016 --> 00:11:12,286
This relation here is
just telling the browser

263
00:11:12,286 --> 00:11:16,376
that the relation of this file
to the rest of the HTML here is

264
00:11:16,376 --> 00:11:17,536
that it's meant to
be a style sheet

265
00:11:17,536 --> 00:11:19,026
so it should somehow be applied.

266
00:11:19,216 --> 00:11:23,096
And so inside of this styles.css
file is your typical rules

267
00:11:23,096 --> 00:11:26,076
for fonts and colors and
borders and all of that,

268
00:11:26,316 --> 00:11:28,716
and they are then applied
to all of the elements,

269
00:11:28,716 --> 00:11:31,826
all of the tags subsequently
in this web page.

270
00:11:31,826 --> 00:11:34,506
So that too is probably
familiar but we'll use this

271
00:11:34,506 --> 00:11:37,976
to our advantage as time passes,
certainly to stylize things

272
00:11:37,976 --> 00:11:40,296
and perhaps solve some
additional problems

273
00:11:40,336 --> 00:11:41,816
that might arise.

274
00:11:42,216 --> 00:11:44,366
In fact, let's go
ahead and propose this.

275
00:11:44,866 --> 00:11:48,426
This website that we have here
is pretty damn uninteresting.

276
00:11:48,426 --> 00:11:52,436
All we have is a super
simple text-based website

277
00:11:52,436 --> 00:11:54,896
for the course, not all
that compelling even though

278
00:11:54,896 --> 00:11:56,726
if we click through
these various links

279
00:11:56,726 --> 00:11:59,566
on the course's website we
would actually get to the PDFs

280
00:11:59,616 --> 00:12:01,126
and the content that we want.

281
00:12:01,386 --> 00:12:03,666
But let's see if we can
stylize this a bit a more

282
00:12:03,666 --> 00:12:06,346
so that we can make a
web application look more

283
00:12:06,346 --> 00:12:10,396
like it's a native application
even though I have no idea

284
00:12:10,396 --> 00:12:13,286
yet how to write a single
line of Objective-C.

285
00:12:13,286 --> 00:12:16,536
So let's try to make this look
more like an actual application.

286
00:12:16,746 --> 00:12:21,006
So to this, let me offer
a brief aside on the ways

287
00:12:21,006 --> 00:12:23,336
in which you can
approach development

288
00:12:23,466 --> 00:12:27,146
of web-based applications
on your own Mac, presumably,

289
00:12:27,146 --> 00:12:28,516
but the same holds true for PCs.

290
00:12:28,516 --> 00:12:32,106
Whenever you start writing in
JavaScript code, if unfamiliar,

291
00:12:32,386 --> 00:12:36,036
it often-- you often trip
over a security feature

292
00:12:36,036 --> 00:12:37,456
of browsers whereby if you try

293
00:12:37,456 --> 00:12:40,976
to run a JavaScript file
locally that's living

294
00:12:40,976 --> 00:12:43,396
on your own hard drive,
it's not going to run

295
00:12:43,476 --> 00:12:45,546
because the browser is trying
to protect you against something

296
00:12:45,546 --> 00:12:46,876
that could very well
be malicious.

297
00:12:46,876 --> 00:12:49,096
So you can work around this
by changing Chrome settings

298
00:12:49,096 --> 00:12:51,876
or changing Safari's or your
various browser settings

299
00:12:52,106 --> 00:12:53,456
or we can solve this problem

300
00:12:53,456 --> 00:12:55,426
by just introducing
an actual web server.

301
00:12:55,426 --> 00:12:57,126
That would be a pain
if we all had to go out

302
00:12:57,276 --> 00:12:59,736
and buy a commercial web
host and maybe a domain name

303
00:12:59,736 --> 00:13:02,526
and actually put all of
our files for the course

304
00:13:02,526 --> 00:13:04,966
and for this first project
on some remote server

305
00:13:05,026 --> 00:13:07,056
but we can actually
replicate that idea even

306
00:13:07,056 --> 00:13:08,796
without having internet
access ultimately

307
00:13:08,936 --> 00:13:11,666
by just running a web
server on our own computer.

308
00:13:11,876 --> 00:13:14,426
So what I'm going to
propose that you do

309
00:13:14,426 --> 00:13:17,026
for this first project
which we'll talk about later

310
00:13:17,256 --> 00:13:18,226
but what I've done here

311
00:13:18,226 --> 00:13:22,006
in advance is I've downloaded
some free software called XAMPP,

312
00:13:22,526 --> 00:13:26,876
X-A-M-P-P, and this is free
software that actually exist

313
00:13:26,876 --> 00:13:29,356
for Mac, OS, Linux, Windows
and probably a couple

314
00:13:29,356 --> 00:13:31,866
of other operating systems
that once you figure out how

315
00:13:31,866 --> 00:13:35,216
to navigate its somewhat
cryptic pages of links,

316
00:13:35,216 --> 00:13:38,776
you can get down to the download
page and download, in this case,

317
00:13:38,776 --> 00:13:41,716
the universal binary for
Mac OS and as an aside

318
00:13:41,716 --> 00:13:43,066
for any projects
we would point you

319
00:13:43,066 --> 00:13:44,276
in this direction explicitly.

320
00:13:44,276 --> 00:13:46,676
You don't have to memorize
all of these little details.

321
00:13:46,946 --> 00:13:49,236
But long story short, once
I download this program,

322
00:13:49,726 --> 00:13:51,636
run it on my local computer,

323
00:13:51,856 --> 00:13:54,146
it will install a free
software called Apache.

324
00:13:54,206 --> 00:13:57,546
Apache is a very popular web
server software that's used all

325
00:13:57,546 --> 00:13:59,816
throughout the world and you can
run it on your little old laptop

326
00:13:59,816 --> 00:14:03,006
in addition to PHP and MySQL
which also comes with XAMPP.

327
00:14:03,146 --> 00:14:04,986
But what's nice about this
is that it gets you up

328
00:14:04,986 --> 00:14:07,756
and running super fast even
without having to tinker

329
00:14:07,756 --> 00:14:10,116
with your Mac's own
built-in settings.

330
00:14:10,446 --> 00:14:13,176
So I did this in advance and
I ran the installer and what

331
00:14:13,176 --> 00:14:16,096
that gives me is a program
called the XAMPP control panel.

332
00:14:16,096 --> 00:14:18,606
So I'm going to go ahead
and load this file here

333
00:14:18,606 --> 00:14:21,976
and I'm going to get a
very simple two screens.

334
00:14:21,976 --> 00:14:24,456
One is just a reminder of how
to get started with this thing

335
00:14:24,706 --> 00:14:27,206
and the other is just this
little control panel via

336
00:14:27,206 --> 00:14:29,166
which I can start Apache
and we're not going

337
00:14:29,166 --> 00:14:31,336
to bother using FTP or MySQL,

338
00:14:31,546 --> 00:14:33,276
all we need is a place
to put our files.

339
00:14:33,556 --> 00:14:36,396
I'm being prompted
for my password there

340
00:14:36,396 --> 00:14:38,586
and I should now see a
green light which indicates

341
00:14:38,586 --> 00:14:40,526
that a web server is
running on my computer.

342
00:14:41,026 --> 00:14:44,376
Unfortunately, my computer here
is not on the public internet.

343
00:14:44,736 --> 00:14:46,766
I don't even know
what its IP address is

344
00:14:46,766 --> 00:14:48,586
and it definitely doesn't
have a domain name.

345
00:14:48,856 --> 00:14:51,276
So how do I go about
accessing with the browser?

346
00:14:51,636 --> 00:14:53,126
Let's forget about
phones for the moment,

347
00:14:53,496 --> 00:14:55,066
the web server that's
now running

348
00:14:55,066 --> 00:14:57,366
on my particular
laptop here, yeah.

349
00:14:58,746 --> 00:15:01,106
Yeah, so it turns out
that all computers

350
00:15:01,106 --> 00:15:05,066
that are running web servers are
configured with a default name

351
00:15:05,066 --> 00:15:06,866
and that name is
usually local host.

352
00:15:06,986 --> 00:15:09,086
So if I pull up a browser,
I happen to be using Chrome,

353
00:15:09,086 --> 00:15:10,836
but I could use Safari
or whatever else I have

354
00:15:10,836 --> 00:15:15,316
on my own Mac here and I do http
colon slash slash localhost,

355
00:15:15,316 --> 00:15:16,986
one word, and then hit Enter,

356
00:15:17,256 --> 00:15:19,416
what I'll see is
this default page.

357
00:15:19,726 --> 00:15:21,446
So this is coming
from a web server.

358
00:15:21,446 --> 00:15:24,336
Just so happens that that
web server is running where?

359
00:15:25,476 --> 00:15:26,566
OK, on my own laptop.

360
00:15:26,566 --> 00:15:27,886
It has nothing to do
with the internet.

361
00:15:27,886 --> 00:15:31,066
I could unplug my cable now,
I could turn off the WiFi

362
00:15:31,066 --> 00:15:32,926
and I could still
actually interface

363
00:15:32,926 --> 00:15:35,026
with this development
environment.

364
00:15:35,026 --> 00:15:36,146
So that's what we're
going to use it for.

365
00:15:36,146 --> 00:15:38,196
You don't strictly have to
do this for the first project

366
00:15:38,336 --> 00:15:40,946
but this is a nice and quick and
dirty way of getting yourself up

367
00:15:40,946 --> 00:15:41,846
and running with the web server.

368
00:15:41,846 --> 00:15:44,606
So now, we can get back to
focusing on the web stuff

369
00:15:44,606 --> 00:15:45,686
and the development thereof.

370
00:15:46,006 --> 00:15:47,766
So what I'm actually going
to do next is I'm going

371
00:15:47,766 --> 00:15:50,066
to grab the distribution
code for tonight's lecture.

372
00:15:50,146 --> 00:15:54,506
So if I go to cs76.net, if
you have trouble getting

373
00:15:54,506 --> 00:15:58,676
on WiFi during the break, we can
log in as ourselves if need be

374
00:15:58,676 --> 00:16:00,976
or you can use your Harvard
University ID and PIN,

375
00:16:01,146 --> 00:16:03,066
but we'll take a break
in a little while.

376
00:16:03,066 --> 00:16:04,336
You can field those
kinds of questions.

377
00:16:04,616 --> 00:16:08,136
If we go to the Course's
website and go to Lectures,

378
00:16:08,786 --> 00:16:11,776
I myself am going to just
scroll down to source code.

379
00:16:11,776 --> 00:16:14,066
I'm going to download a
zip of that source code.

380
00:16:14,526 --> 00:16:17,136
Once I unzip it, it's going
to end up on my desktop

381
00:16:17,136 --> 00:16:19,806
and it's going to be a
directory called Source Zero.

382
00:16:19,806 --> 00:16:22,316
And in there is all of
tonight's examples in advance

383
00:16:22,316 --> 00:16:23,836
in case we want to pull

384
00:16:23,836 --> 00:16:26,416
up something that's
been prewritten.

385
00:16:26,616 --> 00:16:31,506
And what I'm going to do now for
those less familiar, let's see.

386
00:16:31,506 --> 00:16:33,706
Actually, I'm going to
do this the easy way.

387
00:16:33,706 --> 00:16:36,226
I'm going to open up my
finder, I'm going to go ahead

388
00:16:36,226 --> 00:16:41,286
and find my own personal
jharvard directory and I'm going

389
00:16:41,286 --> 00:16:48,136
to create in this directory
a folder called Sites.

390
00:16:48,376 --> 00:16:50,536
Now, I had no idea
that I was supposed

391
00:16:50,536 --> 00:16:52,206
to create a folder called Sites

392
00:16:52,556 --> 00:16:55,566
until I read this little
cheat sheet that popped

393
00:16:55,566 --> 00:16:57,626
up automatically when
XAMPP was installed.

394
00:16:57,886 --> 00:17:00,486
Now tragically, there is a typo
in the little cheat sheet here

395
00:17:00,486 --> 00:17:03,006
and it says Create a
Folder Called Sites-Folder,

396
00:17:03,196 --> 00:17:05,076
there should be no dash,
there should be no folder,

397
00:17:05,076 --> 00:17:06,646
it's just a folder called Sites.

398
00:17:07,066 --> 00:17:10,846
But now that I've done this,
anything I put in there is going

399
00:17:10,846 --> 00:17:14,116
to be accessible on that
web server running locally

400
00:17:14,116 --> 00:17:17,586
as though I had put it
there via FTP or SFTP.

401
00:17:17,736 --> 00:17:19,906
All I'm going to do is start
putting my files in there.

402
00:17:20,146 --> 00:17:21,426
So for simplicity,
what I'm going

403
00:17:21,426 --> 00:17:23,596
to do is drag my
Source Zero directory

404
00:17:24,176 --> 00:17:27,466
into my Sites directory so
that for the rest of tonight,

405
00:17:27,466 --> 00:17:30,426
everything is in that
folder and now I argue

406
00:17:30,426 --> 00:17:32,246
that it's accessible
via my browser.

407
00:17:32,366 --> 00:17:33,276
So let me prove that.

408
00:17:33,276 --> 00:17:34,646
Let me go back to my browser,

409
00:17:34,936 --> 00:17:39,036
let me go to http colon
slash slash localhost.

410
00:17:39,346 --> 00:17:41,466
Unfortunately, I still
see this default screen

411
00:17:41,466 --> 00:17:43,226
and XAMPP has taken
it upon itself

412
00:17:43,226 --> 00:17:47,186
to redirect me even more deeply
into the server but I'm going

413
00:17:47,186 --> 00:17:52,606
to say no, I want to go to tilde
jharvard and then hit Enter

414
00:17:52,866 --> 00:17:57,186
and now I see the contents of
John Harvard's Sites folder.

415
00:17:57,936 --> 00:18:00,406
And so what's in there now
is my Source Zero directory

416
00:18:00,596 --> 00:18:02,466
and now we can resume our look

417
00:18:02,466 --> 00:18:04,986
at this really poorly
implemented website

418
00:18:04,986 --> 00:18:07,756
for the course now that we have
a web server running locally,

419
00:18:07,956 --> 00:18:10,086
now that I've copied the
distribution code for tonight

420
00:18:10,086 --> 00:18:12,486
into that public directory
and now that I've pulled

421
00:18:12,486 --> 00:18:15,486
up that appropriate URL
in my browser connecting

422
00:18:15,486 --> 00:18:16,386
to that local web server.

423
00:18:16,386 --> 00:18:17,066
All right.

424
00:18:17,856 --> 00:18:20,836
That was perhaps a
lot that was new.

425
00:18:20,836 --> 00:18:23,846
Again, the project specification
will recap any details you need

426
00:18:23,846 --> 00:18:26,646
to repeat yourself but
any questions conceptually

427
00:18:26,646 --> 00:18:29,246
or technologically as
to what we just did?

428
00:18:30,286 --> 00:18:30,386
Yeah?

429
00:18:31,016 --> 00:18:32,306
[ Inaudible Remark ]

430
00:18:32,306 --> 00:18:32,466
Sure.

431
00:18:33,516 --> 00:18:37,176
[ Inaudible Remark ]

432
00:18:37,676 --> 00:18:38,796
They do.

433
00:18:39,106 --> 00:18:41,106
[ Inaudible Remark ]

434
00:18:41,196 --> 00:18:44,696
This I believe comes of its
own installation of Apache

435
00:18:44,696 --> 00:18:47,356
so the little white
lie I'm telling here is

436
00:18:47,356 --> 00:18:50,636
that Mac OS actually comes with
its own instance of Apache.

437
00:18:50,926 --> 00:18:53,656
The upside of using XAMPP
is that it works the same

438
00:18:53,656 --> 00:18:57,506
across various versions,
Lion, Mountain Lion of Mac OS.

439
00:18:57,926 --> 00:19:01,896
So the-- there's much-- many
fewer technical difficulties

440
00:19:01,896 --> 00:19:05,096
that we run into than having
everyone turn on Apache

441
00:19:05,096 --> 00:19:06,956
which is not turned on
by default by Apple.

442
00:19:06,956 --> 00:19:08,886
And this way too, when
you upgrade Mac OS,

443
00:19:08,886 --> 00:19:10,146
XAMPP should not break

444
00:19:10,356 --> 00:19:12,336
on you 'cause everything
is isolated to one folder.

445
00:19:13,246 --> 00:19:13,396
Yes?

446
00:19:13,566 --> 00:19:18,486
>> So, I don't know why,
I think my apache is on.

447
00:19:21,446 --> 00:19:21,636
>> OK.

448
00:19:21,666 --> 00:19:26,206
>> I don't know how I got
a Site folder inside the

449
00:19:26,206 --> 00:19:26,936
"My Folder" thing.

450
00:19:26,936 --> 00:19:27,056
>> OK.

451
00:19:27,056 --> 00:19:30,516
>> I can't open another site
folder so now it's not working.

452
00:19:30,516 --> 00:19:31,306
What should I do?

453
00:19:31,306 --> 00:19:33,796
>> OK. You have a Sites
folder called S-I-T-E-S?

454
00:19:34,396 --> 00:19:34,966
>> Yeah, exactly.

455
00:19:34,966 --> 00:19:35,556
>> And what's inside of that?

456
00:19:35,556 --> 00:19:37,976
>> It's like images and
the index.html folder.

457
00:19:38,516 --> 00:19:42,026
[ Multiple Speakers ]

458
00:19:42,526 --> 00:19:45,506
>> Oh, I wonder if that ended
up in I have another account

459
00:19:45,506 --> 00:19:47,746
on this laptop and
maybe that guy got that.

460
00:19:47,746 --> 00:19:50,496
OK. So I think it's safe for
you to delete the images folder,

461
00:19:50,496 --> 00:19:53,636
delete the index.html folder and
then you will be in the state

462
00:19:53,636 --> 00:19:55,646
that I'm in by dragging
the source directory

463
00:19:55,646 --> 00:19:56,546
into that folder.

464
00:19:56,596 --> 00:19:58,706
>> So, I'll just keep
that Sites folder?

465
00:19:58,706 --> 00:20:00,536
>> Keep the Sites
folder, empty it though

466
00:20:00,536 --> 00:20:02,206
and just put Source
Zero in there.

467
00:20:02,546 --> 00:20:04,386
That just sounds like it's
sample code that comes

468
00:20:04,386 --> 00:20:05,516
with XAMPP when you install it

469
00:20:05,516 --> 00:20:06,946
in a default account
which I did not do.

470
00:20:07,436 --> 00:20:09,436
[ Inaudible Remark ]

471
00:20:09,856 --> 00:20:11,896
Then you have something
else that's doing that.

472
00:20:12,036 --> 00:20:13,766
Let me propose that
we will focus

473
00:20:13,766 --> 00:20:15,296
on that one on one at the break.

474
00:20:15,296 --> 00:20:16,026
How about it?

475
00:20:16,026 --> 00:20:16,426
>> All right.

476
00:20:16,516 --> 00:20:17,796
>> All right, excellent,
see corner case.

477
00:20:17,846 --> 00:20:19,936
So second white lie
I've told tonight is

478
00:20:19,936 --> 00:20:21,226
that this is not
simplified things.

479
00:20:21,696 --> 00:20:24,266
All right, other questions?

480
00:20:24,846 --> 00:20:27,496
Other questions?

481
00:20:27,596 --> 00:20:29,406
All right, OK.

482
00:20:29,406 --> 00:20:32,046
So let me do this, in
our Source Zero, whether

483
00:20:32,046 --> 00:20:34,676
or not you're using XAMPP or
just following along visually

484
00:20:34,676 --> 00:20:36,836
or using whatever other
web server you prefer

485
00:20:36,836 --> 00:20:38,076
to run on your own laptop.

486
00:20:38,076 --> 00:20:41,816
I'm going to go into my CS76
directory and I'm going to go

487
00:20:41,816 --> 00:20:45,346
to the HTML directory
where here I see,

488
00:20:45,396 --> 00:20:47,016
albeit in a desktop browser,

489
00:20:47,106 --> 00:20:51,396
the exact same portally designed
website that we saw a moment ago

490
00:20:51,396 --> 00:20:53,006
in that screen shot
of an iPhone.

491
00:20:53,216 --> 00:20:57,836
And indeed, if I right click on
here and choose view page source

492
00:20:57,836 --> 00:21:00,586
or control click on
your white background,

493
00:21:00,856 --> 00:21:03,106
you'll see that here is the
source code for this page

494
00:21:03,696 --> 00:21:07,326
and here, we have
some very simple HTML,

495
00:21:07,326 --> 00:21:09,446
as predicted there's an
unordered list as you said.

496
00:21:09,616 --> 00:21:12,666
There's a list item, there's
an H1, a body, and all of this

497
00:21:12,666 --> 00:21:13,666
and there's also this meta tag.

498
00:21:13,666 --> 00:21:17,136
And that's what makes
things look better

499
00:21:17,256 --> 00:21:18,786
within the confines
of this browser.

500
00:21:18,966 --> 00:21:20,936
But can we improve
the aesthetics still?

501
00:21:20,936 --> 00:21:25,636
Well, let me go back and go into
the CSS directory and viola,

502
00:21:26,046 --> 00:21:27,706
what a pretty looking
website now

503
00:21:27,886 --> 00:21:29,936
and we've done this
entirely by using CSS.

504
00:21:29,936 --> 00:21:33,806
And it does look, up until two
weeks ago when Apple decided

505
00:21:33,806 --> 00:21:35,926
that all of iOS was
changing aesthetically,

506
00:21:36,196 --> 00:21:37,226
this looks like what?

507
00:21:38,476 --> 00:21:42,056
An iPhone or if we at least
size it to the appropriate size.

508
00:21:42,056 --> 00:21:45,136
So let me go ahead here, doesn't
that look like your iPhone?

509
00:21:45,396 --> 00:21:48,886
So kind of does with a typical
menu at the top in the sort

510
00:21:48,886 --> 00:21:52,216
of a tabular list
of menu options.

511
00:21:52,216 --> 00:21:56,146
And indeed, if I go ahead and
click this, we see the sub page

512
00:21:56,146 --> 00:21:57,956
which is Lecture 0 or Lecture 1

513
00:21:57,956 --> 00:21:59,506
and if I keep clicking
I'll see more.

514
00:21:59,656 --> 00:22:00,856
But what did we not get?

515
00:22:00,946 --> 00:22:02,866
What features did not
just happen on the screen?

516
00:22:03,516 --> 00:22:05,636
[ Inaudible Remark ]

517
00:22:06,136 --> 00:22:07,736
There's no animation, right?

518
00:22:07,736 --> 00:22:11,136
If you're a fanboy or girl of
iOS and Apple more generally,

519
00:22:11,136 --> 00:22:13,486
you know that it's these
little touches like the sliding

520
00:22:13,486 --> 00:22:14,996
from side to side that sort

521
00:22:14,996 --> 00:22:17,506
of makes the experience feel
the way it typically does.

522
00:22:17,726 --> 00:22:19,486
But this, let me go
back and do it again,

523
00:22:19,486 --> 00:22:21,606
if I hit the Back button and
then click Lectures again,

524
00:22:21,856 --> 00:22:23,716
it just flips like
a normal web page.

525
00:22:23,716 --> 00:22:26,036
So we're sort of mimicking
the aesthetics of iOS,

526
00:22:26,546 --> 00:22:28,526
we haven't really re-created it.

527
00:22:28,956 --> 00:22:31,726
So how could we go about
getting some form of animation?

528
00:22:31,726 --> 00:22:34,346
Well, we probably need
some more sophisticated CSS

529
00:22:34,346 --> 00:22:37,276
or some JavaScript,
some actual logic

530
00:22:37,276 --> 00:22:39,236
to move content from
side to side.

531
00:22:39,366 --> 00:22:43,096
But before we do that, let's go
to the source of this page just

532
00:22:43,096 --> 00:22:45,516
to get a sense of what
was going on here.

533
00:22:45,786 --> 00:22:49,686
So this is the source for this
page and if I maximize my window

534
00:22:49,686 --> 00:22:52,036
and zoom in here,
there's only one line

535
00:22:52,036 --> 00:22:54,896
of code that's different,
what jumps out at you.

536
00:22:55,016 --> 00:22:56,816
[ Inaudible Remark ]

537
00:22:56,816 --> 00:22:58,796
Yes, so it's just
the link tag up here,

538
00:22:58,996 --> 00:23:02,216
href equals iOS dot CSS,
the relation is style sheet.

539
00:23:02,376 --> 00:23:03,446
So let's see what that is.

540
00:23:03,586 --> 00:23:06,066
Now, as you probably know from
web development, I can just go

541
00:23:06,066 --> 00:23:08,566
up here and I can
say iOS dot CSS,

542
00:23:08,566 --> 00:23:10,606
Enter and I can see this page.

543
00:23:10,846 --> 00:23:13,336
And we won't dwell too
much on the details here,

544
00:23:13,516 --> 00:23:15,596
but here's where I'm
sending some font stuff

545
00:23:15,596 --> 00:23:16,536
and some margins.

546
00:23:16,676 --> 00:23:21,666
H1, so that was the title of
the web page that said CSCIS76,

547
00:23:21,666 --> 00:23:24,106
we have a background
color that I chose

548
00:23:24,106 --> 00:23:27,356
to mimic what Apple itself uses
for its default blue shade.

549
00:23:27,586 --> 00:23:30,606
We're using a background image
here to actually do a gradient.

550
00:23:31,136 --> 00:23:34,766
What does dash WebKit
dash Gradient mean?

551
00:23:35,786 --> 00:23:39,376
Most CSS properties and values
don't begin with dashes.

552
00:23:39,986 --> 00:23:41,716
>> Browser prefix.

553
00:23:41,816 --> 00:23:43,066
>> Yes, it's a browser prefix.

554
00:23:43,066 --> 00:23:44,366
What does that mean?

555
00:23:44,996 --> 00:23:54,686
>> So even when your CSS
properties are different

556
00:23:54,726 --> 00:23:56,136
by your browsers so
I can't remember,

557
00:23:56,136 --> 00:23:57,626
I think WebKit and [inaudible].

558
00:23:57,626 --> 00:23:59,776
>> WebKit is Safari and Chrome.

559
00:23:59,876 --> 00:24:01,806
Yes, exactly and MOZ
is Firefox for Mozilla.

560
00:24:01,806 --> 00:24:02,746
So that's exactly right.

561
00:24:02,746 --> 00:24:05,396
There's often unsupported or new
up and coming features of CSS

562
00:24:05,396 --> 00:24:07,556
that the various browsers begin
to implement on their own.

563
00:24:07,556 --> 00:24:09,846
But if they don't necessarily
adhere to a standard

564
00:24:09,936 --> 00:24:12,196
or if it's just a
browser-specific feature,

565
00:24:12,416 --> 00:24:15,036
they'll typically prefix
that property or that value

566
00:24:15,036 --> 00:24:17,516
with a dash then their
unique identifier.

567
00:24:17,516 --> 00:24:19,766
WebKit is the engine
that underlies Chrome,

568
00:24:19,766 --> 00:24:21,066
at least right now in Safari,

569
00:24:21,316 --> 00:24:23,396
dash MOZ is the same
thing for Mozilla.

570
00:24:23,546 --> 00:24:25,846
So this just means this is
not a feature that's going

571
00:24:25,846 --> 00:24:28,926
to work probably on
IE or on Firefox.

572
00:24:28,926 --> 00:24:31,546
But that's fine because we're
narrowing our focus for now just

573
00:24:31,846 --> 00:24:33,826
on WebKit or Chrome in this case

574
00:24:33,826 --> 00:24:35,186
but it would work
on Safari as well.

575
00:24:35,366 --> 00:24:37,416
And then, I'm going to wave my
hand at the rest of the details.

576
00:24:37,416 --> 00:24:39,276
But suffice it to say
that if we tinkered enough

577
00:24:39,486 --> 00:24:41,966
with the CSS even starting
from a clean slate,

578
00:24:42,076 --> 00:24:45,326
we could replicate this
iOS looking website

579
00:24:45,696 --> 00:24:48,416
so that it ultimately
looks like the familiar UI.

580
00:24:48,416 --> 00:24:50,866
But we don't get any
of that scrolling

581
00:24:50,866 --> 00:24:52,196
with which users are familiar.

582
00:24:52,496 --> 00:24:54,686
So let's go back in
to one last directory

583
00:24:54,836 --> 00:24:58,216
and let's introduce a
framework here that's called

584
00:24:58,216 --> 00:24:59,066
jQuery Mobile.

585
00:24:59,206 --> 00:25:01,226
So you're probably
familiar with jQuery

586
00:25:01,226 --> 00:25:02,486
if you know any JavaScript.

587
00:25:02,486 --> 00:25:04,156
If not, we'll dive into
a bit of it tonight.

588
00:25:04,156 --> 00:25:05,756
But what you might
not be familiar

589
00:25:05,756 --> 00:25:08,946
with are various frameworks
for actually helping

590
00:25:08,946 --> 00:25:11,836
with the development of
mobile-based websites.

591
00:25:11,836 --> 00:25:15,136
So if we look to pass
this example here,

592
00:25:15,346 --> 00:25:16,326
we'll mention three tonight.

593
00:25:16,466 --> 00:25:19,766
So jQuery Mobile as the name
suggests is a jQuery library,

594
00:25:19,766 --> 00:25:22,376
very popular library
that's specifically geared

595
00:25:22,376 --> 00:25:25,076
around mobile user
interface details.

596
00:25:25,076 --> 00:25:27,416
So we'll glance at some
of its capabilities now.

597
00:25:27,796 --> 00:25:30,636
PhoneGap is another framework
that we won't look at tonight

598
00:25:30,956 --> 00:25:32,876
but PhoneGap is sort
of this best

599
00:25:32,876 --> 00:25:36,246
of both worlds whereby it's a
framework, so downloadable code

600
00:25:36,246 --> 00:25:38,486
that someone else
wrote that you can use

601
00:25:38,566 --> 00:25:43,966
to implement native applications
using HTML and JavaScript.

602
00:25:44,026 --> 00:25:47,436
So you don't even have to
know Objective-C yourself

603
00:25:47,786 --> 00:25:50,266
and we'll peel back that
layer eventually but for now,

604
00:25:50,266 --> 00:25:53,056
know that someone else has taken
the trouble to figure out how

605
00:25:53,056 --> 00:25:55,646
to write the bare amount
of Objective-C code

606
00:25:55,876 --> 00:25:59,176
that then embeds the
equivalent of a web page inside

607
00:25:59,176 --> 00:26:03,006
of a native application so that
we can just write web-based code

608
00:26:03,196 --> 00:26:05,646
but still put it in the
App Store, give it an icon

609
00:26:05,646 --> 00:26:08,106
on the Home page so that
it actually feels more

610
00:26:08,106 --> 00:26:11,076
like a native application even
though it's running somewhere

611
00:26:11,076 --> 00:26:12,736
else typically on
some web server.

612
00:26:12,736 --> 00:26:14,136
So that's another
framework of interest.

613
00:26:14,316 --> 00:26:16,166
And then Sencha Touch
which is similar in spirit

614
00:26:16,166 --> 00:26:18,266
to jQuery Mobile, it
helps us make aesthetics

615
00:26:18,296 --> 00:26:19,176
that are mobile friendly

616
00:26:19,466 --> 00:26:21,726
but it's definitely a
more complex framework

617
00:26:21,726 --> 00:26:24,746
than jQuery Mobile so we'll just
focus on the first of these.

618
00:26:24,986 --> 00:26:28,696
So if I go back to my
other screen here and I go

619
00:26:28,696 --> 00:26:33,136
into the framework sample code
for today, now, we have a UI

620
00:26:33,666 --> 00:26:35,206
that looks almost the same

621
00:26:35,206 --> 00:26:36,876
but there is a little
something that's different.

622
00:26:37,796 --> 00:26:39,706
Anyone recall what
was absent last time?

623
00:26:39,706 --> 00:26:42,986
Yes, so these little iOS looking
arrows and if we go ahead

624
00:26:42,986 --> 00:26:44,526
and click on this row,

625
00:26:44,666 --> 00:26:46,886
notice that it's also
highlighting just a little bit

626
00:26:46,886 --> 00:26:49,116
which is nice at least in
the desktop environment.

627
00:26:49,536 --> 00:26:52,156
Now, we have a little bit
of sliding that goes on so

628
00:26:52,156 --> 00:26:53,816
that too is pretty nice.

629
00:26:55,136 --> 00:26:58,196
But let's dive a bit deeper,
we'll come back to this

630
00:26:58,196 --> 00:27:00,086
in a week or two but
I haven't advanced

631
00:27:00,436 --> 00:27:03,876
in [inaudible] application
called iOS Simulator.

632
00:27:04,166 --> 00:27:06,866
So this is a software that
Apple distributes with Xcode

633
00:27:06,866 --> 00:27:08,946
which is their integrated
development environment

634
00:27:08,946 --> 00:27:11,456
for writing iPhone
applications and Mac software.

635
00:27:11,746 --> 00:27:13,766
And if I pull it up
here, it looks like this,

636
00:27:13,766 --> 00:27:15,986
so it looks like the screen
shots I've been using earlier.

637
00:27:16,176 --> 00:27:20,316
And if I go up to
Safari and click here,

638
00:27:20,576 --> 00:27:21,616
so even though it
looks like a phone,

639
00:27:21,616 --> 00:27:24,136
I'm controlling everything with
my keyboard and touchpad here.

640
00:27:24,326 --> 00:27:28,976
I'm going to go to http colon
slash slash localhost slash

641
00:27:28,976 --> 00:27:30,466
tilde jharvard.

642
00:27:31,596 --> 00:27:33,556
Damn it, what a bad
mobile website.

643
00:27:33,556 --> 00:27:38,476
So why is this page so
small all of sudden again?

644
00:27:39,916 --> 00:27:43,136
So whereas up until now, all of
the examples we've been looking

645
00:27:43,136 --> 00:27:46,026
at were written by me and
I included that meta tag.

646
00:27:46,366 --> 00:27:50,136
This particular page was
generated automatically by whom?

647
00:27:51,796 --> 00:27:53,766
This is just a directory
listing.

648
00:27:53,766 --> 00:27:56,506
Let me zoom in, so if you hold
down and we'll get to this

649
00:27:56,506 --> 00:27:58,716
in a couple of weeks, if I
hold down option when clicking,

650
00:27:58,716 --> 00:28:01,046
I can pretend to have two
fingers on my laptop screen.

651
00:28:01,046 --> 00:28:03,236
And then I just have to
kind of scroll to get back

652
00:28:03,236 --> 00:28:04,396
to where I want at the top.

653
00:28:05,096 --> 00:28:07,626
So there's the text
we were looking at.

654
00:28:08,586 --> 00:28:10,576
Who generated this
directory listing?

655
00:28:11,416 --> 00:28:11,566
Yes?

656
00:28:11,756 --> 00:28:12,176
>> Apache?

657
00:28:12,176 --> 00:28:13,226
>> Yes, it was Apache.

658
00:28:13,226 --> 00:28:16,066
So much like you've seen on
the internet, any web server

659
00:28:16,066 --> 00:28:18,736
if you go to a folder that has
the appropriate permissions will

660
00:28:18,736 --> 00:28:21,126
just show you all of the files
in that particular directory.

661
00:28:21,376 --> 00:28:23,256
Apache's doing that,
Apache doesn't know I'm

662
00:28:23,256 --> 00:28:25,916
in a mobile device and whoever
wrote the Apache code didn't

663
00:28:25,916 --> 00:28:28,966
know or care about this meta
tag for the viewport settings,

664
00:28:29,156 --> 00:28:30,326
so it's just super small.

665
00:28:30,326 --> 00:28:32,286
So at least when
navigating these folders

666
00:28:32,636 --> 00:28:34,336
for Apache we're going

667
00:28:34,336 --> 00:28:37,146
to get this annoyingly
small screen, but that's OK.

668
00:28:37,146 --> 00:28:39,276
Let me just deal with
it for a few moments.

669
00:28:39,546 --> 00:28:44,686
Go into my CS76 directory, zoom
in again, move it over here

670
00:28:45,076 --> 00:28:47,606
and then go into framework.

671
00:28:48,196 --> 00:28:50,046
And now, it does look a lot more

672
00:28:50,046 --> 00:28:52,476
like a native iOS
application, right?

673
00:28:52,476 --> 00:28:54,156
So we're not just
fooling by using Chrome,

674
00:28:54,156 --> 00:28:56,806
this is the actual simulator
and it would work the same

675
00:28:56,806 --> 00:28:59,616
on your phone, the only catch
is my phone probably can't talk

676
00:28:59,616 --> 00:29:01,356
to my laptop unless I
jump through some hoops

677
00:29:01,356 --> 00:29:03,776
to get the WiFi to
cooperate to make that work.

678
00:29:03,996 --> 00:29:05,806
But now, let me go ahead
and click on lectures just

679
00:29:05,806 --> 00:29:11,016
as I did before,
let's click Lecture 0.

680
00:29:12,296 --> 00:29:15,396
Damn it, I've paid
a price again.

681
00:29:16,076 --> 00:29:16,786
What's happening?

682
00:29:19,156 --> 00:29:19,286
Yes?

683
00:29:20,391 --> 00:29:22,391
[ Inaudible Remark ]

684
00:29:22,766 --> 00:29:24,656
Yes, so I'm loading a new page

685
00:29:24,656 --> 00:29:27,336
and as you might have just
noticed in using an iPhone

686
00:29:27,336 --> 00:29:30,436
or an iPod Touch for sometime,
anytime you click a link

687
00:29:30,676 --> 00:29:34,056
on a new web page, the
default Safari behavior inside

688
00:29:34,056 --> 00:29:35,826
of an iPhone or an iPod Touch is

689
00:29:35,826 --> 00:29:37,786
to very briefly show
you the address bars

690
00:29:37,786 --> 00:29:40,756
because the URL is changing
then it will push it away

691
00:29:40,856 --> 00:29:41,826
if you so choose.

692
00:29:42,176 --> 00:29:45,186
The problem is that
there goes our mimicry

693
00:29:45,186 --> 00:29:47,436
of an actual native application.

694
00:29:47,686 --> 00:29:49,066
So again, we've paid this price.

695
00:29:49,816 --> 00:29:53,496
But someone argue in favor
of nonetheless proceeding

696
00:29:53,496 --> 00:29:56,896
to implement, say, the course's
website using HTML, CSS,

697
00:29:57,116 --> 00:30:00,056
maybe some JavaScript
without ever touching

698
00:30:00,056 --> 00:30:03,366
or learning Objective-C.

699
00:30:03,566 --> 00:30:04,536
Works on all devices.

700
00:30:04,626 --> 00:30:06,736
It would work on an Android
phone, Windows mobile phone.

701
00:30:06,736 --> 00:30:09,276
It wouldn't look like it belongs
on either of those devices

702
00:30:09,276 --> 00:30:10,556
but it would certainly
still work.

703
00:30:10,556 --> 00:30:12,726
>> Speed of development.

704
00:30:12,726 --> 00:30:15,266
>> Speed of development, sort
of 15 minutes later we're done

705
00:30:15,266 --> 00:30:17,706
with the course's websites
so we don't even have to look

706
00:30:17,706 --> 00:30:20,466
at a line of Objective-C
and it will be more complex.

707
00:30:21,016 --> 00:30:22,046
[ Inaudible Question ]

708
00:30:22,046 --> 00:30:22,856
What's that?

709
00:30:23,516 --> 00:30:27,116
[ Inaudible Question ]

710
00:30:27,616 --> 00:30:28,746
Yes, exactly.

711
00:30:28,746 --> 00:30:29,796
It's a lot easier to update

712
00:30:29,796 --> 00:30:32,536
because even though I'm using
this local web server right now,

713
00:30:32,536 --> 00:30:34,816
if you imagine just uploading
that to the real internet

714
00:30:34,816 --> 00:30:37,406
and some commercial web post,
I can just upload my code

715
00:30:37,406 --> 00:30:39,246
in one central place
and no one has

716
00:30:39,246 --> 00:30:40,896
to update their native software.

717
00:30:40,896 --> 00:30:42,886
They don't have to go into the
App Store to run an update.

718
00:30:43,016 --> 00:30:45,316
It's just anytime they visit
my page it's just going

719
00:30:45,316 --> 00:30:46,826
to be the way I intend it.

720
00:30:46,826 --> 00:30:48,976
So that's a lot of
arguments in favor

721
00:30:49,076 --> 00:30:50,716
but we are paying some prices.

722
00:30:50,766 --> 00:30:54,406
There's the aesthetic blips that
are happening whether we use CSS

723
00:30:54,406 --> 00:30:56,006
or even a little
bit of JavaScript.

724
00:30:56,286 --> 00:30:58,806
There is going to
be some latency.

725
00:30:58,806 --> 00:31:00,216
In fact, one of the
biggest complaints

726
00:31:00,216 --> 00:31:02,326
against making apps web based is

727
00:31:02,326 --> 00:31:04,026
that they just tend
to feel slower.

728
00:31:04,026 --> 00:31:06,686
If you're a Facebook user,
up until a year or more ago,

729
00:31:06,876 --> 00:31:08,926
a lot of the Facebook
application even though it

730
00:31:08,926 --> 00:31:12,056
looked like a native application
was using embedded Safari

731
00:31:12,056 --> 00:31:14,336
windows inside of it
and grabbing content

732
00:31:14,386 --> 00:31:16,546
from Facebook's web
servers which is nice

733
00:31:16,606 --> 00:31:19,066
because they are already very
good at serving up web content

734
00:31:19,146 --> 00:31:21,286
and all they had to do is
implement a minimum amount

735
00:31:21,286 --> 00:31:24,196
of code to wrap those web
pages but a lot of people,

736
00:31:24,196 --> 00:31:25,606
maybe you're among them,

737
00:31:25,606 --> 00:31:27,526
griped about the speed
of the application.

738
00:31:27,526 --> 00:31:29,876
Remember the past year or
more it's gotten much faster

739
00:31:29,876 --> 00:31:31,676
because there's a
lot more native code.

740
00:31:31,876 --> 00:31:33,936
So just some of the
tradeoffs to consider, yes?

741
00:31:34,516 --> 00:31:37,436
[ Inaudible Remark ]

742
00:31:37,936 --> 00:31:40,546
So that's another good one
too and we'll come back

743
00:31:40,546 --> 00:31:41,456
to that later in the semester

744
00:31:41,456 --> 00:31:44,426
but there's some really cool
hardware underneath the hood

745
00:31:44,426 --> 00:31:45,976
in these iOS devices, right?

746
00:31:45,976 --> 00:31:48,316
You have things like a compass,
you have an accelerometer,

747
00:31:48,506 --> 00:31:52,126
a gyroscope and other
hardware still and most,

748
00:31:52,276 --> 00:31:55,096
some of that hardware
is just not accessible

749
00:31:55,096 --> 00:31:57,456
to JavaScript or
to a web browser.

750
00:31:57,626 --> 00:31:59,996
That's slowly beginning to
change and you can access more

751
00:31:59,996 --> 00:32:01,766
and more via JavaScript
and we'll see a little bit

752
00:32:01,766 --> 00:32:03,436
of that tonight but
there are some things

753
00:32:03,436 --> 00:32:04,976
that are beyond your reach.

754
00:32:05,516 --> 00:32:07,786
[ Inaudible Remark ]

755
00:32:08,286 --> 00:32:09,666
And that's a big one too.

756
00:32:09,666 --> 00:32:10,976
The fact the you
can put a native app

757
00:32:10,976 --> 00:32:14,406
in the Apps Store whether for
free or for some number of cents

758
00:32:14,406 --> 00:32:16,636
or dollars is pretty
compelling because it's hard

759
00:32:16,636 --> 00:32:19,876
to convince anyone to buy or
pay for access to a website

760
00:32:19,876 --> 00:32:21,746
in the same way that
they do something

761
00:32:21,746 --> 00:32:22,876
through the Apps Store, yes?

762
00:32:23,516 --> 00:32:28,916
[ Inaudible Question ]

763
00:32:29,416 --> 00:32:30,796
Good question.

764
00:32:30,796 --> 00:32:34,076
Could you put the mobile
website into a frame, an iFrame

765
00:32:34,076 --> 00:32:37,416
or an actual HTML frame
so that it's the URL

766
00:32:37,416 --> 00:32:39,536
of the innermost
frame that's changing?

767
00:32:39,856 --> 00:32:42,566
Yes, you could, the
only thing is the URL

768
00:32:42,566 --> 00:32:45,196
at the top will never
change and maybe that's OK

769
00:32:45,496 --> 00:32:48,526
but then you'll lose the ability
to deep link to specific pages.

770
00:32:49,616 --> 00:32:50,896
But a good work around.

771
00:32:52,126 --> 00:32:53,406
All right, so let's
just take a quick look

772
00:32:53,406 --> 00:32:56,166
at how we implemented this
jQuery Mobile version.

773
00:32:56,166 --> 00:32:57,766
We won't spend much time on it.

774
00:32:57,766 --> 00:32:59,586
You'll be welcome to use
it for the first project

775
00:32:59,586 --> 00:33:02,296
and its documentation online
is ample but let's take a look

776
00:33:02,296 --> 00:33:04,636
at the underlying source
code for that third

777
00:33:04,636 --> 00:33:07,406
and final incarnation of the
super simple course website.

778
00:33:07,606 --> 00:33:10,496
Notice at the top, we've
added another CSS file,

779
00:33:10,686 --> 00:33:12,936
this one happens to belong
to jQuery Mobile itself

780
00:33:12,936 --> 00:33:15,016
so I just read that off
from the documentation.

781
00:33:15,206 --> 00:33:17,186
We've got our meta
tag just like before.

782
00:33:17,356 --> 00:33:20,406
I've got a script tag,
this time importing jQuery

783
00:33:20,406 --> 00:33:23,006
and if unfamiliar with
jQuery or if unfamiliar

784
00:33:23,006 --> 00:33:24,626
with JavaScript itself,
we'll come back

785
00:33:24,626 --> 00:33:28,376
to that shortly tonight and then
one other script tag referencing

786
00:33:28,376 --> 00:33:31,906
this jQuery Mobile site and
then if we scroll down below,

787
00:33:32,136 --> 00:33:34,026
you'll actually see
that I'm making use

788
00:33:34,026 --> 00:33:38,036
of a pretty handy
HTML 5 feature.

789
00:33:38,716 --> 00:33:41,356
So what attributes
are jumping out at you

790
00:33:41,356 --> 00:33:43,816
at perhaps being completely new?

791
00:33:44,346 --> 00:33:47,506
>> Data dash role.

792
00:33:47,636 --> 00:33:49,446
>> Yes, so data dash role.

793
00:33:49,536 --> 00:33:54,836
That's not an actual valid
HTML attribute and what else?

794
00:33:54,836 --> 00:33:57,366
Data dash theme, that's
pushing it further.

795
00:33:57,366 --> 00:34:00,166
That too is not a standard
attribute in HTML 5

796
00:34:00,416 --> 00:34:02,606
but this is actually
a feature of HTML 5.

797
00:34:02,606 --> 00:34:05,676
If you prefix an
attribute with data hyphen,

798
00:34:05,816 --> 00:34:07,536
you can create any
attributes you want

799
00:34:07,856 --> 00:34:10,686
and they will not be flagged
as invalid by a validator.

800
00:34:10,686 --> 00:34:13,186
The browsers won't choke
on them so this is a way

801
00:34:13,186 --> 00:34:16,476
of storing metadata often
inside of your web page

802
00:34:16,666 --> 00:34:19,066
in a way that's going to be
very accessible via something

803
00:34:19,066 --> 00:34:22,096
like JavaScript but without
resorting to hacks and coming

804
00:34:22,096 --> 00:34:24,266
up with your own tags
and your own attributes

805
00:34:24,266 --> 00:34:27,436
which the world did do for
sometime with HTML 4 and XHTML

806
00:34:27,786 --> 00:34:30,196
which often made
browsers unhappy.

807
00:34:30,196 --> 00:34:31,606
So this is like a nice way

808
00:34:31,736 --> 00:34:34,686
of including metadata
alongside your own data but as

809
00:34:34,686 --> 00:34:38,286
for what jQuery Mobile is doing,
well, why did I put data-role?

810
00:34:38,286 --> 00:34:39,486
Why did I put data-theme?

811
00:34:39,596 --> 00:34:41,696
I just read the documentation
for jQuery Mobile

812
00:34:41,696 --> 00:34:45,666
and jQuery Mobile essentially
told me to make one div for each

813
00:34:45,666 --> 00:34:49,376
of the screens that I want to
exist in that foo application,

814
00:34:49,376 --> 00:34:50,606
the first one being
the home page,

815
00:34:50,836 --> 00:34:52,366
the next one being
the lecture's page,

816
00:34:52,366 --> 00:34:54,586
the third one being
the Lecture 0 page

817
00:34:54,876 --> 00:34:57,946
so I just have a div
here including some links

818
00:34:57,946 --> 00:34:59,506
and if we keep scrolling
down further,

819
00:34:59,666 --> 00:35:03,556
you'll see another bunch
of content, another page

820
00:35:03,556 --> 00:35:05,586
so to speak for lectures.

821
00:35:05,766 --> 00:35:08,566
And so in short, the folks
at jQuery Mobile decided

822
00:35:08,566 --> 00:35:11,846
to leverage these
arbitrary data attributes

823
00:35:11,846 --> 00:35:15,706
to create their own markup
language still using valid HTML

824
00:35:15,706 --> 00:35:20,636
5 and what do you think their
JavaScript file does upon being

825
00:35:20,636 --> 00:35:23,036
loaded into this page for
those familiar already

826
00:35:23,036 --> 00:35:23,956
with some JavaScript?

827
00:35:25,616 --> 00:35:30,506
How does jQuery Mobile
turn this HTML

828
00:35:30,756 --> 00:35:35,246
into the user interface
we saw as this?

829
00:35:38,576 --> 00:35:41,896
What would you do if you
were a library written

830
00:35:41,896 --> 00:35:44,666
in some language called
JavaScript that's being loaded

831
00:35:44,666 --> 00:35:48,506
into the web page at the top
and you know that lying ahead

832
00:35:48,506 --> 00:35:50,166
of you is markup
that looks like this?

833
00:35:51,106 --> 00:35:53,196
What does jQuery
Mobile presumably do

834
00:35:53,196 --> 00:36:00,126
to turn this into that?

835
00:36:00,296 --> 00:36:04,106
So if I were jQuery Mobile,
I would probably search

836
00:36:04,106 --> 00:36:06,746
through the web page
somehow looking for all divs

837
00:36:07,346 --> 00:36:10,816
that have what associated
with them?

838
00:36:10,816 --> 00:36:15,156
A data role of page.

839
00:36:15,316 --> 00:36:16,386
I'm not asking you
how to do this,

840
00:36:16,386 --> 00:36:19,546
just high level conceptually
so if I were jQuery Mobile,

841
00:36:19,546 --> 00:36:20,916
I'd probably do some
kind of search

842
00:36:20,916 --> 00:36:24,506
of the whole web page looking
for divs that have a data role

843
00:36:24,506 --> 00:36:25,906
of "page" and then I'm going

844
00:36:25,906 --> 00:36:28,356
to do something aesthetically
probably involving some CSS

845
00:36:28,606 --> 00:36:31,286
to create that rectangle
that looks like a screen

846
00:36:31,446 --> 00:36:34,016
of a native application and
I can do that again and again

847
00:36:34,016 --> 00:36:36,326
and again for each of the
pages that are defined in here

848
00:36:36,506 --> 00:36:38,946
and meanwhile, anytime
I encounter a div

849
00:36:38,946 --> 00:36:41,726
who has a data role of
header, for instance, well,

850
00:36:41,726 --> 00:36:44,306
that's one I'm going to deploy
some of that nice gradients

851
00:36:44,306 --> 00:36:46,756
with the blue shading and I
don't know how I'm going to do

852
00:36:46,756 --> 00:36:48,286
that but at least
at a high level,

853
00:36:48,426 --> 00:36:50,666
that's all this library is
doing and so what's nice

854
00:36:50,666 --> 00:36:52,586
about jQuery Mobile is
that you don't even need

855
00:36:52,586 --> 00:36:54,656
to know JavaScript to use it.

856
00:36:54,786 --> 00:36:56,886
You need to just follow
their directions and mark

857
00:36:56,886 --> 00:37:00,106
up your own content
using this div approach

858
00:37:00,106 --> 00:37:02,296
with these data attributes.

859
00:37:02,556 --> 00:37:03,866
Sencha Touch, by contrast,

860
00:37:03,866 --> 00:37:05,096
one of the other
frameworks I mentioned,

861
00:37:05,246 --> 00:37:06,656
very much the opposite.

862
00:37:06,656 --> 00:37:09,066
You instead write a whole
lot of JavaScript code

863
00:37:09,256 --> 00:37:10,796
to create your user interface.

864
00:37:10,796 --> 00:37:12,856
jQuery Mobile is meant to
be much more lightweight

865
00:37:12,956 --> 00:37:14,906
and much simpler, yes?

866
00:37:15,516 --> 00:37:36,636
[ Inaudible Question ]

867
00:37:37,136 --> 00:37:38,306
So it's a good question.

868
00:37:38,306 --> 00:37:41,506
Let me summarize as
doesn't this get confusing

869
00:37:41,506 --> 00:37:44,516
or doesn't this pinch you into
a corner if things changed

870
00:37:44,516 --> 00:37:46,546
over time or you just
have to remember all

871
00:37:46,546 --> 00:37:51,286
of the various aspects of
some fairly proprietary

872
00:37:51,286 --> 00:37:53,086
if open source design.

873
00:37:53,566 --> 00:37:55,686
Short answer, yes and
that's sort of one

874
00:37:55,686 --> 00:37:57,026
of the tradeoffs
you make whether

875
00:37:57,026 --> 00:37:58,926
or not you implement
something entirely

876
00:37:58,926 --> 00:38:02,626
on your own using pure
raw HTML, your own CSS,

877
00:38:02,626 --> 00:38:05,716
your own JavaScript code or
you try to save time and stand

878
00:38:05,716 --> 00:38:06,926
on the shoulders of other people

879
00:38:06,926 --> 00:38:08,536
who hopefully have a good
community behind them,

880
00:38:08,536 --> 00:38:09,956
who have good documentation
behind them

881
00:38:10,216 --> 00:38:13,006
to save yourself the hour, the
ten hours, the hundred hours

882
00:38:13,136 --> 00:38:15,576
that it would otherwise
take just to kind of come

883
00:38:15,576 --> 00:38:18,516
up with this overarching
framework so short answer, yes.

884
00:38:18,836 --> 00:38:20,066
It's definitely a downside

885
00:38:20,366 --> 00:38:22,646
but if it means you can finish
the project in 10 percent

886
00:38:22,646 --> 00:38:25,526
of the amount of time, that
too could be compelling.

887
00:38:25,526 --> 00:38:27,606
You could implement it 10
times over the next few years

888
00:38:27,606 --> 00:38:30,036
as things change but
definitely a challenge overall.

889
00:38:30,526 --> 00:38:32,536
Other questions, yes?

890
00:38:33,516 --> 00:38:38,596
[ Inaudible Question ]

891
00:38:39,096 --> 00:38:39,836
Indeed.

892
00:38:40,296 --> 00:38:42,296
[ Inaudible Question ]

893
00:38:42,576 --> 00:38:44,626
With jQuery Mobile, at least

894
00:38:44,626 --> 00:38:47,286
with this particular user
interface that I've chosen, yes.

895
00:38:47,516 --> 00:38:50,216
Every-- all of the HTML
and all of the pages are

896
00:38:50,216 --> 00:38:53,966
in one arguably big HTML
file and the motivation

897
00:38:53,966 --> 00:38:57,066
for that is largely so that you
can do the seamless transitions

898
00:38:57,066 --> 00:38:58,786
with as latency as possible.

899
00:38:58,786 --> 00:39:01,036
If you instead have
to fetch more content

900
00:39:01,036 --> 00:39:03,696
with every transition, you
might introduce a second,

901
00:39:03,696 --> 00:39:05,606
maybe even two seconds
or more of delay,

902
00:39:05,606 --> 00:39:07,826
and that would make it feel
even less like a native app.

903
00:39:08,006 --> 00:39:10,256
You can do that and you
can tell the browser

904
00:39:10,256 --> 00:39:12,066
to go fetch those
pages dynamically

905
00:39:12,066 --> 00:39:14,866
which frankly is necessary if
you had more than three pages,

906
00:39:14,866 --> 00:39:16,686
maybe had 3,000, you
just wouldn't want

907
00:39:16,686 --> 00:39:19,996
to send a 10 megabyte file down
but that too was a tradeoff

908
00:39:20,146 --> 00:39:21,696
and you have to decide
where the line is

909
00:39:21,696 --> 00:39:23,546
between convenience and size.

910
00:39:24,296 --> 00:39:25,166
Good question.

911
00:39:25,926 --> 00:39:29,466
All right, so let's talk
of a few smaller details,

912
00:39:29,466 --> 00:39:34,156
smaller features of HTML 5 that
we can leverage here in order

913
00:39:34,156 --> 00:39:38,306
to make pages all the
more mobile-friendly so,

914
00:39:38,306 --> 00:39:40,566
if I switch back
to this screen here

915
00:39:40,986 --> 00:39:45,706
and move us ahead to
here, there we go.

916
00:39:46,506 --> 00:39:48,196
So here's a new one,
another meta tag,

917
00:39:48,196 --> 00:39:51,136
so Apple has made ample use of
this meta tag which again today,

918
00:39:51,136 --> 00:39:53,066
some of you have probably
never used or you've used it

919
00:39:53,066 --> 00:39:54,996
for some search engine
optimizations

920
00:39:55,186 --> 00:39:58,376
so here is one called Apple
mobile web app capable.

921
00:39:58,546 --> 00:40:01,826
If its content is "yes",
what do you think this means?

922
00:40:02,516 --> 00:40:05,276
[ Inaudible Remark ]

923
00:40:05,776 --> 00:40:08,226
It is indeed mobile
web app capable.

924
00:40:08,226 --> 00:40:10,436
What does that actually
translate into?

925
00:40:10,766 --> 00:40:13,386
So most iPhone users
don't actually do this

926
00:40:13,386 --> 00:40:15,716
but you might know that if
you're visiting a webpage

927
00:40:15,716 --> 00:40:18,996
in Safari and you decided,
I really like this website,

928
00:40:18,996 --> 00:40:21,696
I want to return to it in the
future, you can either one,

929
00:40:21,696 --> 00:40:25,086
bookmark it, just very 1990
style or what else can you do

930
00:40:25,606 --> 00:40:26,836
if you've ever actually
done this?

931
00:40:27,216 --> 00:40:27,526
What's that?

932
00:40:27,526 --> 00:40:28,346
>> Add it to the Home screen.

933
00:40:28,346 --> 00:40:30,286
>> So you can actually
add it to the Home screen.

934
00:40:30,286 --> 00:40:35,946
So if I go to-- let's go
back to my iOS simulator

935
00:40:35,946 --> 00:40:37,316
which again will
have you download

936
00:40:37,316 --> 00:40:38,606
in a week or two's time.

937
00:40:38,956 --> 00:40:41,796
And I go back to my
directory of code.

938
00:40:41,796 --> 00:40:44,966
Let me go back, and back, and
let me go into tonight's--

939
00:40:45,566 --> 00:40:48,726
well, that would
spoil the surprise

940
00:40:48,726 --> 00:40:49,836
of what I see here, yes?

941
00:40:50,016 --> 00:40:51,116
[ Laughter ]

942
00:40:51,116 --> 00:40:52,436
I'll fix that that later.

943
00:40:53,036 --> 00:40:58,966
So if I go into my HTML 5 page--
folder and scroll down here.

944
00:40:59,926 --> 00:41:03,106
And I go to, let's
say, app.html.

945
00:41:03,386 --> 00:41:04,786
This is a super simple app.

946
00:41:04,786 --> 00:41:07,886
I spent like 5 seconds making
it, all it has is an image tag.

947
00:41:07,886 --> 00:41:10,256
But I really like this
image and so I want

948
00:41:10,256 --> 00:41:13,036
to not only bookmark it, I
actually want to have an icon

949
00:41:13,096 --> 00:41:16,456
on my Home screen that forever
shows this icon complete

950
00:41:16,456 --> 00:41:19,226
with glistening Apple
sparkles that makes it look

951
00:41:19,226 --> 00:41:20,906
like a very three-dimensional
button.

952
00:41:21,156 --> 00:41:22,126
But how do you that?

953
00:41:22,226 --> 00:41:26,246
Well, let me go to the same page
in my browser just so I can zoom

954
00:41:26,246 --> 00:41:29,266
in on it over here and you'll
see the same boring website

955
00:41:29,266 --> 00:41:31,016
but underneath the
hood and the source,

956
00:41:31,256 --> 00:41:33,226
notice that I've included this.

957
00:41:33,666 --> 00:41:36,626
And I've also jumped the
gun and also included this

958
00:41:36,626 --> 00:41:40,866
which aptly named makes the
Apple mobile web app status bar

959
00:41:40,866 --> 00:41:42,616
style "black".

960
00:41:42,986 --> 00:41:44,416
So instead of getting
the default blue

961
00:41:44,416 --> 00:41:47,586
or some other color, I
just want the status bar,

962
00:41:47,586 --> 00:41:50,776
the top of my Safari instance
to be black in this case.

963
00:41:51,166 --> 00:41:55,516
So if I go to my mobile browser
and click on this icon here,

964
00:41:55,516 --> 00:41:56,956
which any iPhone user has.

965
00:41:57,356 --> 00:41:58,706
Notice here in the middle,

966
00:41:58,706 --> 00:42:00,556
I have an icon, add
to Home screen.

967
00:42:00,816 --> 00:42:03,476
If I did not have

968
00:42:03,736 --> 00:42:08,876
that mobile-friendly feature
enabled, we couldn't do this.

969
00:42:08,876 --> 00:42:11,066
I'm going to go ahead and
add this to my Home screen.

970
00:42:11,626 --> 00:42:12,606
It's called Harvard App.

971
00:42:12,606 --> 00:42:15,126
It's pulling that from the
title tag of the webpage.

972
00:42:16,336 --> 00:42:17,856
And now it's here on my desktop.

973
00:42:17,856 --> 00:42:19,726
And now, I have an
icon on my desktop.

974
00:42:19,726 --> 00:42:22,896
So I can now forever get back
to this app by clicking this,

975
00:42:23,146 --> 00:42:26,306
and notice the status
bar is black,

976
00:42:26,306 --> 00:42:28,746
and notice you can't quite
see my fingers doing this.

977
00:42:28,746 --> 00:42:31,296
But if I click on the screen
or touch the screen and try

978
00:42:31,296 --> 00:42:33,426
to drag down, what is absence?

979
00:42:33,986 --> 00:42:37,866
Yes, so the Address bar.

980
00:42:37,866 --> 00:42:39,636
The URL bar that's
usually there.

981
00:42:39,776 --> 00:42:42,916
But this is Safari, but
it's mimicking the idea

982
00:42:42,916 --> 00:42:45,776
of a native application
by not revealing

983
00:42:45,776 --> 00:42:47,006
to me that it's Safari.

984
00:42:47,226 --> 00:42:50,516
But the only reason it did
that was because in my HTML,

985
00:42:50,516 --> 00:42:54,176
I proactively, if
verbosely, told the browser

986
00:42:54,176 --> 00:42:56,246
that it is mobile
web app capable.

987
00:42:56,246 --> 00:42:57,906
So that's all that
meta tag does.

988
00:42:58,076 --> 00:43:00,886
And there's a bunch of
others that do similar tweaks

989
00:43:00,886 --> 00:43:03,516
to your interface, the
status bar style we just saw,

990
00:43:03,756 --> 00:43:06,826
the Apple Touch icon can
also be defined here.

991
00:43:06,826 --> 00:43:09,776
So if you define Apple
Touch icon to be some ping

992
00:43:09,776 --> 00:43:12,596
and there's actual pixel
specifications you can read

993
00:43:12,596 --> 00:43:14,856
up online or just match the
one that we included here.

994
00:43:15,106 --> 00:43:17,336
That's how you can
specify what icon shows up.

995
00:43:17,336 --> 00:43:20,186
So it's not the default
favicon or whatever black

996
00:43:20,186 --> 00:43:21,846
and white icons there
by default.

997
00:43:21,936 --> 00:43:23,696
You can do a precomposed one.

998
00:43:23,696 --> 00:43:25,766
So if you really
don't like Apple sort

999
00:43:25,766 --> 00:43:28,666
of three-dimensional glistening
of your icons which they add

1000
00:43:28,666 --> 00:43:32,656
for you, to your icon, you can
say, "I have a precomposed ping

1001
00:43:32,656 --> 00:43:34,066
which means I'm really
good at Photoshop.

1002
00:43:34,066 --> 00:43:35,956
I made the three-dimensional
button myself.

1003
00:43:36,266 --> 00:43:38,046
Don't add additional
gloss to it."

1004
00:43:38,176 --> 00:43:41,056
So there's that feature as
well and then Startup Image.

1005
00:43:41,056 --> 00:43:42,616
If you have a really
crappy website

1006
00:43:42,616 --> 00:43:45,526
that takes a really long time
to load, you can show the user

1007
00:43:45,526 --> 00:43:47,636
in image as it's loading up.

1008
00:43:47,916 --> 00:43:50,046
And that isn't necessarily
a bad website.

1009
00:43:50,046 --> 00:43:52,886
It might just be one that has
to request a whole lot of data.

1010
00:43:52,886 --> 00:43:55,266
If Gmail frankly needs
to request a lot of data

1011
00:43:55,266 --> 00:43:57,206
so that you can begin
interacting with your folders

1012
00:43:57,206 --> 00:44:00,886
and labels and your inbox,
so Gmail, for instance,

1013
00:44:00,886 --> 00:44:04,476
might have an icon implemented
in this fashion here.

1014
00:44:04,976 --> 00:44:07,936
So any questions on those
more aesthetic tweaks

1015
00:44:07,976 --> 00:44:08,786
that you can apply?

1016
00:44:10,636 --> 00:44:13,606
All right, so where that
does leave us in order to get

1017
00:44:13,606 --> 00:44:16,316
that slightly more dynamic
interface even though it was

1018
00:44:16,316 --> 00:44:17,726
imperfect with jQuery mobile.

1019
00:44:17,846 --> 00:44:20,656
We added this last
line of yellow text

1020
00:44:20,656 --> 00:44:22,136
in a language called JavaScript.

1021
00:44:22,286 --> 00:44:24,696
Some of you, many of you
might not even know JavaScript

1022
00:44:24,696 --> 00:44:26,526
or at least the aspects of it
that we're going to leverage

1023
00:44:26,526 --> 00:44:28,396
from mobile but let's
pause here,

1024
00:44:28,396 --> 00:44:31,106
take a look at the course
itself before diving back

1025
00:44:31,106 --> 00:44:32,456
into actual development.

1026
00:44:32,616 --> 00:44:35,576
So, this is Building
Mobile Applications.

1027
00:44:35,576 --> 00:44:37,096
What does that actually mean?

1028
00:44:37,316 --> 00:44:39,976
The prerequisites for the
class, as you might have seen

1029
00:44:39,976 --> 00:44:41,536
in the course catalog
or simply these,

1030
00:44:41,536 --> 00:44:44,346
prior programming experience in
any Object-oriented language.

1031
00:44:44,596 --> 00:44:47,236
So that could be
something like Java, C++,

1032
00:44:47,306 --> 00:44:49,696
C# or any number
of other languages.

1033
00:44:49,696 --> 00:44:51,516
But the goal is to have students

1034
00:44:51,516 --> 00:44:54,076
in this course have
comfort already on the way

1035
00:44:54,076 --> 00:44:56,856
in with the notion of
classes and objects,

1036
00:44:56,856 --> 00:44:58,886
and instance variables,
and class variables even

1037
00:44:58,886 --> 00:45:00,756
if you know some of those
things by different names.

1038
00:45:01,066 --> 00:45:04,406
So if you're on the fence about
your preparedness for the course

1039
00:45:04,406 --> 00:45:06,756
or not sure if what you
learned is consistent

1040
00:45:06,756 --> 00:45:08,926
with our expectations, during
the break that we'll take

1041
00:45:08,926 --> 00:45:11,016
in a bit or at the end
of this class tonight.

1042
00:45:11,016 --> 00:45:12,776
Do come up to chat
with me or others

1043
00:45:12,776 --> 00:45:16,226
of the staff we'll introduce
in a bit to see if we're

1044
00:45:16,226 --> 00:45:17,386
on the same page as you.

1045
00:45:17,386 --> 00:45:20,726
So that frankly you don't
have a bad experience

1046
00:45:20,726 --> 00:45:21,966
over the next several
weeks simply

1047
00:45:21,966 --> 00:45:23,606
because you don't have
the requisite knowledge.

1048
00:45:23,946 --> 00:45:26,016
Six, seven weeks is
going to really fly by

1049
00:45:26,156 --> 00:45:28,566
and if you're trying to
learn the prerequisites

1050
00:45:28,566 --> 00:45:30,286
for the course while
trying to follow the course,

1051
00:45:30,346 --> 00:45:33,506
it could certainly be
more than an arduous task.

1052
00:45:33,506 --> 00:45:36,606
So touch base with us if unsure,
comfort with HTML and CSS.

1053
00:45:37,016 --> 00:45:38,296
If you didn't really bat an eye

1054
00:45:38,296 --> 00:45:40,926
at anything we just
did, that's good.

1055
00:45:40,926 --> 00:45:45,176
If you're unfamiliar with HTML
or CSS, it's probably not going

1056
00:45:45,176 --> 00:45:48,156
to be ideal but in fairness,
we'll spend just a week or two

1057
00:45:48,156 --> 00:45:49,966
on the mobile web
aspect of the course.

1058
00:45:50,186 --> 00:45:52,556
So if you're really here and
fired up about the Objective-C

1059
00:45:52,556 --> 00:45:55,286
and the iOS aspect, talk to us
too during the break or after

1060
00:45:55,526 --> 00:45:57,946
about exactly what you do
or don't have as experience.

1061
00:45:58,306 --> 00:46:01,326
You don't as you've perhaps
inferred need an actual iPhone,

1062
00:46:01,426 --> 00:46:03,396
iPad or iPod for the course.

1063
00:46:03,396 --> 00:46:05,446
You can do everything in
the confines of a simulator.

1064
00:46:05,736 --> 00:46:08,516
You do pay a price for that
in that you can't have access

1065
00:46:08,516 --> 00:46:09,826
to like the accelerometer.

1066
00:46:09,826 --> 00:46:11,766
So like even checking
your laptop is not going

1067
00:46:11,766 --> 00:46:14,886
to do anything to the simulator
so you do not have quite

1068
00:46:14,886 --> 00:46:17,756
as much functionality but
if you do have an iOS device

1069
00:46:17,756 --> 00:46:20,896
of some sort, you can use
it for the course certainly

1070
00:46:20,896 --> 00:46:23,026
to test your mobile apps
but also your native apps.

1071
00:46:23,376 --> 00:46:25,046
The catch is that Apple doesn't

1072
00:46:25,046 --> 00:46:27,336
like to let us install
software rewrite

1073
00:46:27,336 --> 00:46:30,596
on our own hardware unless we
pay Apple for that privilege.

1074
00:46:30,906 --> 00:46:32,776
So you actually,
typically need to sign

1075
00:46:32,776 --> 00:46:34,906
up for what's called an
iOS Developer account

1076
00:46:34,906 --> 00:46:37,416
which typically is 99
dollars if you plan

1077
00:46:37,416 --> 00:46:40,306
on doing iOS development
after the course,

1078
00:46:40,306 --> 00:46:41,196
so seven week [inaudible].

1079
00:46:41,236 --> 00:46:42,916
It's probably a good
thing to sign

1080
00:46:42,916 --> 00:46:46,356
up for anyway even right now
so that you use your Apple ID,

1081
00:46:46,356 --> 00:46:47,576
so that you can download betas.

1082
00:46:47,576 --> 00:46:50,056
For instance, I'm running
iOS 7 on my phone already

1083
00:46:50,226 --> 00:46:51,806
because it's accessible
to people who are

1084
00:46:51,806 --> 00:46:52,856
in the developer program.

1085
00:46:53,136 --> 00:46:54,916
But if you think at the end of
the semester, you're not going

1086
00:46:54,916 --> 00:46:56,526
to try to put something
in the App Store

1087
00:46:56,526 --> 00:46:58,836
and you therefore don't
really need access for a year,

1088
00:46:58,836 --> 00:47:01,806
it's an annual fee, we
have an academic account

1089
00:47:01,806 --> 00:47:03,316
which won't let you
submit to the App Store

1090
00:47:03,316 --> 00:47:06,336
but will let you install
software that you write

1091
00:47:06,446 --> 00:47:10,766
on your computer, onto your
phone, or your iPad or iPod.

1092
00:47:10,766 --> 00:47:12,796
So we'll set you up with that
in a couple of weeks' time

1093
00:47:12,796 --> 00:47:15,866
and we'll ask you for your Apple
IDs and more at that point.

1094
00:47:15,866 --> 00:47:17,516
So you don't have
to pay for anything.

1095
00:47:17,516 --> 00:47:18,896
You don't have to
sign up for anything.

1096
00:47:19,146 --> 00:47:20,776
But if you're going to be
doing this for the next year,

1097
00:47:20,776 --> 00:47:22,486
you might as well do it
sooner rather than later

1098
00:47:22,486 --> 00:47:25,376
so you don't have to transition
from our account to yours

1099
00:47:25,676 --> 00:47:27,036
in a couple of months' time.

1100
00:47:28,066 --> 00:47:30,496
Any questions on prerequisites?

1101
00:47:31,246 --> 00:47:33,466
All right, so expectations,
pretty straightforward,

1102
00:47:33,466 --> 00:47:37,016
to attend all of the lectures
and labs, more on those

1103
00:47:37,016 --> 00:47:38,976
in just a moment and
submit all of the projects,

1104
00:47:38,976 --> 00:47:40,036
more on those in a moment.

1105
00:47:40,366 --> 00:47:42,016
Lectures. This is lecture.

1106
00:47:42,236 --> 00:47:47,536
The focus will be on five-- one
week web apps, namely this one

1107
00:47:47,536 --> 00:47:50,426
with a project that itself will
take two weeks, and then five

1108
00:47:50,426 --> 00:47:54,096
of the course's weeks on native
applications; Objective-C,

1109
00:47:54,246 --> 00:47:56,106
iOS and related features
thereof.

1110
00:47:56,326 --> 00:47:59,526
This is an incomplete list of
the topics and the concepts

1111
00:47:59,526 --> 00:48:00,846
that we'll be looking at.

1112
00:48:00,976 --> 00:48:03,266
We'll go into more detail
over the coming weeks

1113
00:48:03,266 --> 00:48:05,526
as to what it means to
develop native applications.

1114
00:48:05,716 --> 00:48:09,526
We definitely will not cover
the entirety of the iOS SDK.

1115
00:48:09,526 --> 00:48:13,876
As Apple likes to say, they
just released another 1,500 APIs

1116
00:48:13,876 --> 00:48:15,976
as of two weeks ago with iOS 7.

1117
00:48:15,976 --> 00:48:17,616
There's thousands of method.

1118
00:48:17,616 --> 00:48:19,766
APIs for them means method
or variable apparently.

1119
00:48:20,146 --> 00:48:22,596
But the API itself is very rich.

1120
00:48:22,596 --> 00:48:26,426
There's things like the Map SDK
with which you can embed maps,

1121
00:48:26,686 --> 00:48:29,606
and there's the touch interface,
and there's a storage layer,

1122
00:48:29,606 --> 00:48:32,386
there's a database layer, and
all sorts of ancillary ones.

1123
00:48:32,636 --> 00:48:35,176
What we'll do in our time
together over the summer is try

1124
00:48:35,176 --> 00:48:37,846
to focus on really the most
fundamental and the ones

1125
00:48:37,846 --> 00:48:41,236
that are most representative
of other SDKs so that

1126
00:48:41,236 --> 00:48:44,306
when you decide to write
your own application,

1127
00:48:44,306 --> 00:48:46,866
even if we never, for
instance, used the gyroscope,

1128
00:48:47,086 --> 00:48:50,296
at least the framework and the
mental model will be similar

1129
00:48:50,426 --> 00:48:52,866
from aspects of the
language that we did do.

1130
00:48:52,866 --> 00:48:54,676
Oops, let's just
zoom out for a moment

1131
00:48:54,676 --> 00:48:56,386
and then zoom back in on labs.

1132
00:48:56,766 --> 00:48:57,506
So what are labs?

1133
00:48:57,506 --> 00:48:59,126
So per the course
catalog, labs are going

1134
00:48:59,126 --> 00:49:01,006
to be the hands-on
aspect of the course

1135
00:49:01,006 --> 00:49:03,846
that will take place same
time but on Wednesdays

1136
00:49:03,846 --> 00:49:06,636
of each week led by the
course's teaching fellows

1137
00:49:06,636 --> 00:49:07,836
and this will be
opportunities for you

1138
00:49:07,836 --> 00:49:09,066
to bring your laptops as well.

1139
00:49:09,256 --> 00:49:12,076
We'll meet, not here, but in
a more classroom structured

1140
00:49:12,076 --> 00:49:15,836
environment across the hall and
set up workstations for everyone

1141
00:49:15,836 --> 00:49:18,096
and it will be a mixture
of hands-on opportunities

1142
00:49:18,096 --> 00:49:21,466
to explore recent materials,
so things similar in spirit

1143
00:49:21,466 --> 00:49:22,236
to what we did tonight.

1144
00:49:22,536 --> 00:49:25,476
To explore the week's
projects and to get some hints,

1145
00:49:25,526 --> 00:49:27,646
some tips, and tricks as
to how to dive into those,

1146
00:49:27,906 --> 00:49:30,066
and also an opportunity
for a one-on-one Q&A

1147
00:49:30,066 --> 00:49:30,866
with the course's staff.

1148
00:49:31,226 --> 00:49:32,176
Generally, toward the end

1149
00:49:32,176 --> 00:49:33,986
of those labs we'll
reserve some time

1150
00:49:33,986 --> 00:49:35,986
for office hours-like
environment so you can work

1151
00:49:35,986 --> 00:49:37,786
on your projects
alongside classmates

1152
00:49:37,786 --> 00:49:39,946
but have the support
structure of some of us there

1153
00:49:40,096 --> 00:49:41,656
to fill the questions for you.

1154
00:49:42,196 --> 00:49:45,686
The website is here as you might
have found already, cs76.net.

1155
00:49:46,186 --> 00:49:49,116
Discuss is the web-based tool
that we'll use over the course

1156
00:49:49,116 --> 00:49:52,136
of the summer to interact rather
than rely on email which ends

1157
00:49:52,136 --> 00:49:54,466
up going only to
us and back to you.

1158
00:49:54,646 --> 00:49:56,626
We'll generally point
you toward Discuss

1159
00:49:56,626 --> 00:49:58,216
which is the course's
discussion forums.

1160
00:49:58,216 --> 00:49:59,916
You can still post questions
to the staff privately there.

1161
00:50:00,296 --> 00:50:02,986
There's a link on the
course's website to Discuss

1162
00:50:02,986 --> 00:50:04,586
and what we'll ask that you do

1163
00:50:04,586 --> 00:50:06,796
for the first project is say
hello to your classmates.

1164
00:50:06,796 --> 00:50:09,326
So, if you like to get ahead,
there's a general category

1165
00:50:09,406 --> 00:50:11,976
in the Discuss boards, and
you are welcome to say hello,

1166
00:50:11,976 --> 00:50:13,256
a little something
about yourself,

1167
00:50:13,576 --> 00:50:17,826
and perhaps why you are
interested in iOS development.

1168
00:50:18,996 --> 00:50:19,946
There's more, OK.

1169
00:50:20,476 --> 00:50:22,396
Projects, so the
projects are really

1170
00:50:22,396 --> 00:50:24,206
where you'll get your
hands dirty in the course

1171
00:50:24,256 --> 00:50:27,436
and retain the most and
I think learn the most.

1172
00:50:27,546 --> 00:50:29,386
There'll be three
total projects.

1173
00:50:29,386 --> 00:50:32,426
Two of them are our
choices of specifications.

1174
00:50:32,426 --> 00:50:34,716
We will specify exactly
what the challenges are.

1175
00:50:34,936 --> 00:50:37,816
The third one though will be
your choice for you to propose

1176
00:50:37,816 --> 00:50:39,726
to the course's staff
and then design

1177
00:50:39,726 --> 00:50:41,896
and implement your
very own project.

1178
00:50:41,896 --> 00:50:44,976
The first two that are assigned,
one will be themed mobile local,

1179
00:50:44,976 --> 00:50:46,336
more on that Wednesday.

1180
00:50:46,336 --> 00:50:50,086
But it will involve using
browser's geolocation API using

1181
00:50:50,086 --> 00:50:53,586
open datasets and mashing things
together into an interface

1182
00:50:53,586 --> 00:50:56,286
that allows users to explore
news and weather all based

1183
00:50:56,466 --> 00:50:57,896
on their current location.

1184
00:50:58,176 --> 00:51:01,156
Evil Hangman meanwhile will
be an implementation in iOS

1185
00:51:01,326 --> 00:51:04,196
of Hangman but much more
evil than you're used

1186
00:51:04,196 --> 00:51:07,306
to whereby rather than just
have you guess the letters

1187
00:51:07,346 --> 00:51:08,686
that the computer
is thinking of,

1188
00:51:08,976 --> 00:51:11,736
which is a very boring game
once you're a few years older

1189
00:51:11,736 --> 00:51:13,146
than when you probably
last played it.

1190
00:51:13,366 --> 00:51:16,326
The Evil Hangman
version of this cheats,

1191
00:51:16,506 --> 00:51:20,936
such that any time you guess
a letter like E, the computer

1192
00:51:20,936 --> 00:51:23,956
or in this case your phone
or iPad or iPod is going

1193
00:51:23,956 --> 00:51:25,656
to change the word
it was thinking of

1194
00:51:25,656 --> 00:51:28,826
and re-choose a word that's the
same length but that has no Es.

1195
00:51:28,826 --> 00:51:31,416
And when you proceed to guess A,

1196
00:51:31,586 --> 00:51:34,126
it's going to throw away the
word it was thinking about

1197
00:51:34,126 --> 00:51:36,106
and make sure it
has no Es or As.

1198
00:51:36,106 --> 00:51:37,296
And when you choose C,

1199
00:51:37,296 --> 00:51:38,806
it's going to make sure
the word it's thinking

1200
00:51:38,806 --> 00:51:40,646
of is still the same
length but has no Es, As,

1201
00:51:40,646 --> 00:51:45,166
or Cs until finally, it beats
you by coming up with the word

1202
00:51:45,166 --> 00:51:47,936
like dog which you should
have thought of, but damn it,

1203
00:51:47,936 --> 00:51:49,486
the thing was cheating
the whole time.

1204
00:51:49,486 --> 00:51:52,566
And so, implementing this and
calling it not Evil Hangman

1205
00:51:52,566 --> 00:51:55,076
but Hangman and having your
friends play it is a wonderful

1206
00:51:55,076 --> 00:51:57,416
way to make them think that
they are awful at Hangman.

1207
00:51:57,666 --> 00:52:00,486
All right, so more
on that to come.

1208
00:52:00,486 --> 00:52:02,176
Grades in the course, it's
fairly straightforward.

1209
00:52:02,256 --> 00:52:05,286
Performance in the course will
be determined by the projects.

1210
00:52:05,286 --> 00:52:07,106
No exams, no attendance records,

1211
00:52:07,106 --> 00:52:10,056
nothing beyond the course's
actual workload and immersion.

1212
00:52:10,326 --> 00:52:12,176
We'll evaluate them on
four different axes.

1213
00:52:12,176 --> 00:52:14,846
Scope, the extent to which
you tackle the project itself.

1214
00:52:14,846 --> 00:52:16,406
Did you bite off
all of the features

1215
00:52:16,406 --> 00:52:18,336
or did you only even
try half of it.

1216
00:52:18,606 --> 00:52:20,406
Correctness, to what
extent is it consistent

1217
00:52:20,406 --> 00:52:21,446
with our expectations.

1218
00:52:21,776 --> 00:52:24,926
Design, how good is it
underneath the hood,

1219
00:52:24,926 --> 00:52:28,316
how well designed is it so,
a more subjective measure.

1220
00:52:28,586 --> 00:52:30,836
And style, a more
aesthetic measure,

1221
00:52:30,836 --> 00:52:33,796
are your variables well named,
are things nicely indented,

1222
00:52:33,796 --> 00:52:35,666
or is everything pretty
printed so to speak.

1223
00:52:35,926 --> 00:52:39,196
These are the four axes and
they'll be weighted roughly

1224
00:52:39,196 --> 00:52:42,466
in order in which
you'll spend time on them

1225
00:52:42,576 --> 00:52:44,996
with style being weighted the
least but still important.

1226
00:52:45,176 --> 00:52:47,426
Correctness being worth the
most because that's arguably

1227
00:52:47,426 --> 00:52:49,846
where you'll spend most of
your time getting things

1228
00:52:49,846 --> 00:52:52,966
to work just right,
and the app party.

1229
00:52:53,086 --> 00:52:56,526
So at the very last week
of the class, Wednesday,

1230
00:52:56,636 --> 00:53:01,926
August 7th at 6:30 p.m., we will
meet standing up with laptops

1231
00:53:01,926 --> 00:53:03,456
and with some cake and more.

1232
00:53:03,766 --> 00:53:05,256
You're welcome to bring
family and friends

1233
00:53:05,256 --> 00:53:07,496
and this will be an opportunity
really just to share and demo

1234
00:53:07,496 --> 00:53:09,636
for each other the
individualized projects

1235
00:53:09,636 --> 00:53:11,906
that you chose to do or even
your own implementations

1236
00:53:11,906 --> 00:53:14,196
of Mobile Local or
Evil Hangman to share

1237
00:53:14,196 --> 00:53:16,866
with the class the different
design directions that you chose

1238
00:53:16,866 --> 00:53:18,986
and see exactly what
everyone accomplished.

1239
00:53:18,986 --> 00:53:20,896
So it should be a fun
way to end the term.

1240
00:53:21,236 --> 00:53:22,496
The cameras meanwhile
in the class,

1241
00:53:22,546 --> 00:53:24,696
technically this class
is not on the internet.

1242
00:53:24,696 --> 00:53:26,016
It's an on-campus class only.

1243
00:53:26,146 --> 00:53:28,946
But what we always do in the
summer is try to experiment

1244
00:53:28,946 --> 00:53:30,486
with new approaches
to videography,

1245
00:53:30,486 --> 00:53:32,106
try out new things,
new experiments.

1246
00:53:32,106 --> 00:53:34,616
This TV is new and this
is my first time using it.

1247
00:53:34,616 --> 00:53:35,696
So again, forgive any gaps,

1248
00:53:35,696 --> 00:53:37,636
we can fix them all
in post-production.

1249
00:53:37,856 --> 00:53:38,886
But what we will do

1250
00:53:38,886 --> 00:53:41,796
on an experimental
basis is post the videos

1251
00:53:41,796 --> 00:53:44,716
that we're taking tonight and
in subsequent classes online

1252
00:53:44,716 --> 00:53:45,706
on the course's website.

1253
00:53:45,706 --> 00:53:47,556
So if you absolutely
can't make it some night

1254
00:53:47,556 --> 00:53:50,006
or if I was particularly
confusing one night and you want

1255
00:53:50,006 --> 00:53:52,796
to re-watch it or fast
forward or rewind or slow down,

1256
00:53:53,066 --> 00:53:55,956
we'll start posting within a
few days the course's videos

1257
00:53:55,956 --> 00:53:58,076
so that you have those there
as a reference as well.

1258
00:53:58,246 --> 00:54:01,056
If you're camera shy and don't
want to be on the internet

1259
00:54:01,056 --> 00:54:03,896
and on YouTube and the like,
we'll always reserve this swathe

1260
00:54:03,956 --> 00:54:06,436
of seats so all of you folks
will not appear into any

1261
00:54:06,436 --> 00:54:08,006
of tonight's footage,
even accidentally,

1262
00:54:08,456 --> 00:54:10,686
so those first two columns
of seats in the middle

1263
00:54:10,686 --> 00:54:14,016
if you just never want
to be seen whatsoever,

1264
00:54:14,016 --> 00:54:16,096
we'll always set
aside seats there.

1265
00:54:16,456 --> 00:54:19,546
Lastly or second to
lastly, let me introduce two

1266
00:54:19,546 --> 00:54:21,666
of the fellows sitting over
here, RJ [assumed spelling]

1267
00:54:21,666 --> 00:54:23,176
and Rob [assumed
spelling], who will on board

1268
00:54:23,176 --> 00:54:26,046
as the course's teaching
fellows working with us in labs

1269
00:54:26,046 --> 00:54:28,656
on Wednesdays providing
feedback on work,

1270
00:54:28,656 --> 00:54:30,366
answering questions
with me on Discuss.

1271
00:54:30,366 --> 00:54:32,476
Would you each like to
come up and say a word?

1272
00:54:33,016 --> 00:54:34,426
[ Pause ]

1273
00:54:34,426 --> 00:54:39,136
Surprise. You have to talk--

1274
00:54:39,266 --> 00:54:41,796
You just have to talk
close to my chest.

1275
00:54:42,016 --> 00:54:43,816
[ Laughter ]

1276
00:54:43,816 --> 00:54:44,786
Because of the microphone.

1277
00:54:45,576 --> 00:54:47,016
>> Hi. That's one word.

1278
00:54:47,906 --> 00:54:48,156
Rob.

1279
00:54:49,646 --> 00:54:50,636
>> I'm Rob.

1280
00:54:51,606 --> 00:54:54,446
>> So, all right,
I'll redeem this.

1281
00:54:54,446 --> 00:54:58,606
So, Rob recently graduated
from the college and is going

1282
00:54:58,606 --> 00:55:01,326
to be working with us
in an academic capacity

1283
00:55:01,326 --> 00:55:03,106
over the coming years with
courses like this one.

1284
00:55:03,366 --> 00:55:05,216
RJ is a rising senior
at the college

1285
00:55:05,216 --> 00:55:07,186
and is also a teaching
fellow for one

1286
00:55:07,186 --> 00:55:09,466
of our undergraduate
classes as well.

1287
00:55:09,466 --> 00:55:11,026
So, that was RJ and Rob.

1288
00:55:11,376 --> 00:55:14,656
Lastly, before we take a
break, one of the goals

1289
00:55:14,656 --> 00:55:16,656
of bringing this TV
online tonight was

1290
00:55:16,656 --> 00:55:19,136
so that we could have a
little of this in motion,

1291
00:55:19,136 --> 00:55:22,866
so why don't we-- first,
let me change state here.

1292
00:55:23,916 --> 00:55:27,526
Pull this up and let's take
a five or so minute break.

1293
00:55:27,526 --> 00:55:28,876
[Background Music] Whoever
would like to come up

1294
00:55:28,876 --> 00:55:31,996
and play Fruit Ninja on the
TV is welcome to, and RJ, Rob,

1295
00:55:31,996 --> 00:55:33,566
and I will field
questions off to the side

1296
00:55:33,566 --> 00:55:35,106
and about five minutes
from now, we'll regroup.

1297
00:55:35,256 --> 00:55:37,426
There are bathrooms down at
the other end of the hallway.

1298
00:55:37,426 --> 00:55:39,666
If you also go to the other end
of the hallway and turn left

1299
00:55:39,666 --> 00:55:41,366
and go down the smaller
hallways,

1300
00:55:41,646 --> 00:55:43,126
there's vending machines,
candy and soda.

1301
00:55:43,256 --> 00:55:43,826
We'll see you in a few.

1302
00:55:44,516 --> 00:55:48,656
[ Music ]

1303
00:55:49,156 --> 00:55:50,856
Someone better come up quick.

1304
00:55:51,516 --> 00:55:53,876
[ Music ]

1305
00:55:54,376 --> 00:55:58,596
So we are back and we are about
to teach all of JavaScript,

1306
00:55:58,596 --> 00:55:59,756
so that we can then dive

1307
00:55:59,756 --> 00:56:01,336
into the project this
coming Wednesday,

1308
00:56:01,546 --> 00:56:04,856
so the assumptions I'd
like to make here is one,

1309
00:56:04,856 --> 00:56:07,406
that folks are familiar with
some Object-oriented language.

1310
00:56:07,406 --> 00:56:09,406
JavaScript as we'll
see is Object-oriented.

1311
00:56:09,406 --> 00:56:10,886
It doesn't have classes per se.

1312
00:56:11,066 --> 00:56:12,496
But you'll see a lot
of the same ideas

1313
00:56:12,496 --> 00:56:13,856
that you've seen
in other languages.

1314
00:56:14,166 --> 00:56:17,206
We'll focus too on just
the very basics of syntax.

1315
00:56:17,206 --> 00:56:19,116
You should find that
it's incredibly similar

1316
00:56:19,116 --> 00:56:22,816
to most any C style language,
C, C++, and so forth.

1317
00:56:23,096 --> 00:56:26,616
And you will also find that
it has most of the constructs,

1318
00:56:26,616 --> 00:56:28,426
objects, arrays,
that you might expect

1319
00:56:28,496 --> 00:56:30,596
in a higher level
language like this.

1320
00:56:30,596 --> 00:56:33,626
And we'll work our way from
the simplest of examples

1321
00:56:33,626 --> 00:56:36,196
to things more complex,
ultimately ending with things

1322
00:56:36,196 --> 00:56:38,786
like Ajax, asynchronous
JavaScript and XML

1323
00:56:39,106 --> 00:56:42,496
which will underlie the
programmatic features

1324
00:56:42,496 --> 00:56:45,336
that we need for this
coming first project.

1325
00:56:45,586 --> 00:56:47,436
So, first is a snippet
again of HTML.

1326
00:56:47,696 --> 00:56:50,466
So, this is an HTML5 web page,

1327
00:56:50,736 --> 00:56:53,916
but we can also call this is
a DOM, Document Object Model,

1328
00:56:54,086 --> 00:56:55,936
which is just a fancy
way for saying tree.

1329
00:56:56,216 --> 00:56:58,376
Even though, we draw
the HTML like this,

1330
00:56:58,376 --> 00:56:59,336
you can actually think of it

1331
00:56:59,336 --> 00:57:02,976
like in a family
tree whose root node

1332
00:57:02,976 --> 00:57:04,786
so to speak is the HTML node.

1333
00:57:05,016 --> 00:57:07,446
So, let's throw away
the doctype declaration

1334
00:57:07,446 --> 00:57:08,486
which actually doesn't
really fit

1335
00:57:08,486 --> 00:57:09,826
into this mental model for now.

1336
00:57:10,156 --> 00:57:12,566
But the root of this
page is the HTML tag,

1337
00:57:12,566 --> 00:57:15,096
and how many children would
you say that this root

1338
00:57:15,096 --> 00:57:15,976
of the family tree has?

1339
00:57:16,016 --> 00:57:17,636
[ Pause ]

1340
00:57:17,636 --> 00:57:20,246
So it has two, one
of which is head and?

1341
00:57:20,526 --> 00:57:20,826
>> Body

1342
00:57:20,826 --> 00:57:21,286
>> And body.

1343
00:57:21,286 --> 00:57:23,946
So, there's head and then
there's body and in turn,

1344
00:57:23,946 --> 00:57:25,736
head and body have some
number of children.

1345
00:57:25,976 --> 00:57:27,876
So head seems to have
how many children?

1346
00:57:28,676 --> 00:57:31,876
So, one. As an aside if you
really want to be nit picky,

1347
00:57:31,936 --> 00:57:33,816
technically head has as many

1348
00:57:33,816 --> 00:57:36,306
as three children 'cause there
are some white space here

1349
00:57:36,306 --> 00:57:38,966
and there, and there's also some
white space after the title.

1350
00:57:39,226 --> 00:57:40,846
Most browsers throw this away

1351
00:57:40,846 --> 00:57:42,076
and you don't have
to worry about it.

1352
00:57:42,076 --> 00:57:43,396
But as an aside, technically,

1353
00:57:43,396 --> 00:57:45,006
you could argue there's
three nodes.

1354
00:57:45,056 --> 00:57:46,916
All right, but we'll
assume that it's just one.

1355
00:57:46,916 --> 00:57:49,976
It's a title, how many children
does the title element have?

1356
00:57:50,516 --> 00:57:52,976
[ Pause ]

1357
00:57:53,476 --> 00:57:54,826
So it is one.

1358
00:57:54,826 --> 00:57:56,396
So, we won't spend--
dwell on this,

1359
00:57:56,436 --> 00:57:59,556
but there are different types of
nodes in a DOM, different types

1360
00:57:59,556 --> 00:58:01,036
of nodes in this tree.

1361
00:58:01,216 --> 00:58:05,096
One of which is an element node
and an element is the result

1362
00:58:05,096 --> 00:58:08,376
of having a start tag and
some stuff and a close tag.

1363
00:58:08,496 --> 00:58:09,556
A start tag and an end tag.

1364
00:58:09,556 --> 00:58:10,946
An open tag and a close tag.

1365
00:58:11,236 --> 00:58:14,116
Those collectively compose
what's known as an element.

1366
00:58:14,496 --> 00:58:17,426
Meanwhile, this would
be known as a text node.

1367
00:58:17,506 --> 00:58:18,886
There's also comment nodes

1368
00:58:18,886 --> 00:58:20,126
which we don't have
the examples off here,

1369
00:58:20,126 --> 00:58:22,316
but if you do open
bracket bang dash dash,

1370
00:58:22,586 --> 00:58:24,666
that begins what would
be called a comment node.

1371
00:58:24,666 --> 00:58:26,596
But we'll focus just on
these two most common ones.

1372
00:58:26,876 --> 00:58:29,416
So, meanwhile, the body
tag or the body element

1373
00:58:29,596 --> 00:58:30,976
to be proper has
how many children?

1374
00:58:31,016 --> 00:58:32,356
[ Pause ]

1375
00:58:32,356 --> 00:58:35,916
Two, each of which in turn
seems to have one child.

1376
00:58:36,206 --> 00:58:37,526
Now, there is an anomaly here.

1377
00:58:37,526 --> 00:58:40,006
There's this href which I
didn't bother giving a URL

1378
00:58:40,006 --> 00:58:42,556
to 'cause it would-- it's not
really necessary for discussion.

1379
00:58:42,816 --> 00:58:46,046
But this-- is href a
child of the anchor tag?

1380
00:58:47,156 --> 00:58:47,816
So, it's not.

1381
00:58:47,816 --> 00:58:50,846
It doesn't really fit into the
same hierarchical mental model

1382
00:58:50,846 --> 00:58:51,856
that we're describing here.

1383
00:58:51,856 --> 00:58:53,376
So, we're going to draw
it a little differently.

1384
00:58:53,376 --> 00:58:55,826
Indeed if I were to
draw this picture

1385
00:58:56,216 --> 00:58:59,546
as a tree just using rectangles
to represent the nodes,

1386
00:58:59,806 --> 00:59:00,676
I might draw it as this.

1387
00:59:00,926 --> 00:59:02,666
I have one, a document node

1388
00:59:02,666 --> 00:59:03,986
and this is the detail
I said I was going

1389
00:59:03,986 --> 00:59:05,376
to wave my hand at earlier.

1390
00:59:05,376 --> 00:59:08,636
It turns out that there is an
uber node, the document node

1391
00:59:08,746 --> 00:59:10,466
and for those familiar
with JavaScript,

1392
00:59:10,586 --> 00:59:13,896
you might have seen this before,
the document global variable.

1393
00:59:13,936 --> 00:59:16,306
We'll come back to that,
but here's our root element,

1394
00:59:16,306 --> 00:59:19,536
HTML indeed has two
children, head and body.

1395
00:59:19,776 --> 00:59:23,176
Each of which has a title tag
over here and a child of that.

1396
00:59:23,546 --> 00:59:25,946
This guy has an anchor
tag and an H1 tag.

1397
00:59:25,946 --> 00:59:28,206
Each of which has a
textual child and then just

1398
00:59:28,206 --> 00:59:31,086
because it doesn't
belong below the node,

1399
00:59:31,216 --> 00:59:32,346
implying that it's child,

1400
00:59:32,646 --> 00:59:36,296
arbitrarily draw the attribute
laterally off to the side.

1401
00:59:36,296 --> 00:59:37,436
So, it's an attribute
of the node

1402
00:59:37,436 --> 00:59:38,926
but it's not a child per se.

1403
00:59:39,146 --> 00:59:40,496
So, who cares about this detail?

1404
00:59:40,496 --> 00:59:43,286
Well, if you start thinking
about the HTML you see

1405
00:59:43,286 --> 00:59:47,096
and the HTML you write as
ultimately constituting a tree,

1406
00:59:47,236 --> 00:59:50,376
once that HTML is parsed,
that is read top to bottom,

1407
00:59:50,376 --> 00:59:53,186
left to right by a
browser, loaded into memory

1408
00:59:53,316 --> 00:59:55,426
as an actual data
structure, namely a tree.

1409
00:59:55,726 --> 00:59:58,156
This is what it might look like
inside of your computer's RAM.

1410
00:59:58,426 --> 01:00:00,616
And this is a useful way
of thinking about it,

1411
01:00:01,026 --> 01:00:03,926
because now that we-- as we
begin to dive into JavaScript,

1412
01:00:04,156 --> 01:00:08,016
JavaScript is increasingly being
used to take a tree like this

1413
01:00:08,306 --> 01:00:11,086
and massage into a
different tree adding nodes,

1414
01:00:11,086 --> 01:00:11,976
subtracting nodes.

1415
01:00:12,576 --> 01:00:15,606
Already if you think-- if you're
a Facebook user or a Gmail user,

1416
01:00:15,836 --> 01:00:18,046
things happen quite
dynamically these days.

1417
01:00:18,046 --> 01:00:19,306
If you get an email with Gmail,

1418
01:00:19,306 --> 01:00:22,606
the whole page does not reload
certainly these days instead you

1419
01:00:22,606 --> 01:00:24,886
just get a new row in the
middle of the web page.

1420
01:00:25,056 --> 01:00:28,236
That row is probably a TR or
something like that inside

1421
01:00:28,236 --> 01:00:30,246
of a table tag maybe
or maybe it's a div,

1422
01:00:30,436 --> 01:00:31,346
but something like that.

1423
01:00:31,496 --> 01:00:34,636
How is Gmail updating the
inside of its web page?

1424
01:00:34,636 --> 01:00:37,596
It's using JavaScript to
insert more rectangles

1425
01:00:37,596 --> 01:00:39,476
like these somewhere into
the middle of the page.

1426
01:00:39,476 --> 01:00:40,756
Facebook, when you
get a Facebook chat

1427
01:00:41,046 --> 01:00:42,476
or status notification,

1428
01:00:42,476 --> 01:00:44,376
or a tweet that pushes
everything else down,

1429
01:00:44,376 --> 01:00:44,936
what's happening?

1430
01:00:45,146 --> 01:00:47,716
This language called JavaScript
is inserting a new node

1431
01:00:47,716 --> 01:00:50,716
or rectangle into the tree and
pushing everything else down

1432
01:00:50,776 --> 01:00:53,926
or to the side depending on how
the programmer decided to do it.

1433
01:00:54,146 --> 01:00:55,976
So that's what's been happening
all this time underneath the

1434
01:00:55,976 --> 01:00:58,616
hood and we'll see how to do
that ourselves momentarily.

1435
01:00:58,956 --> 01:01:02,456
So JavaScript, how do you
go about writing JavaScript?

1436
01:01:02,726 --> 01:01:05,726
Well, historically
it runs client side,

1437
01:01:05,726 --> 01:01:06,816
inside of a browser.

1438
01:01:06,976 --> 01:01:09,836
So if you've got a website
written in PHP or Python

1439
01:01:09,836 --> 01:01:13,166
or Ruby, you might have
JavaScript in that site

1440
01:01:13,396 --> 01:01:15,296
but it's not getting
executed by your server.

1441
01:01:15,296 --> 01:01:19,196
It's being sent to the server
via HTTP over the internet

1442
01:01:19,476 --> 01:01:22,836
and then the browser is reading
that JavaScript code just

1443
01:01:22,836 --> 01:01:25,226
like it reads the HTML, top
to bottom, left to right,

1444
01:01:25,506 --> 01:01:28,326
and executing it in
on your own Mac or PC.

1445
01:01:28,546 --> 01:01:30,296
So, where do you
put the JavaScript?

1446
01:01:30,296 --> 01:01:32,396
Well, we've seen already
you can have script tags.

1447
01:01:32,396 --> 01:01:35,226
We haven't seen them with stuff
in between, but the simplest way

1448
01:01:35,226 --> 01:01:37,976
to start writing JavaScript as
we'll see is to put it inside

1449
01:01:37,976 --> 01:01:41,036
of an open script and a closed
script tag just like that.

1450
01:01:41,366 --> 01:01:43,266
But of course, you're
probably more familiar already

1451
01:01:43,266 --> 01:01:43,886
with this format.

1452
01:01:44,916 --> 01:01:47,986
Just to recap, what does
this line of HTML do,

1453
01:01:48,636 --> 01:01:51,726
what does it tell
a browser to do?

1454
01:01:51,976 --> 01:01:54,546
Exactly, loadFile.js
and treat it

1455
01:01:54,626 --> 01:01:56,946
as a file containing
JavaScript code.

1456
01:01:56,946 --> 01:01:59,006
So if there's code in it,
it should be executed,

1457
01:01:59,006 --> 01:02:00,986
top to bottom, left to right.

1458
01:02:00,986 --> 01:02:02,996
So we'll see how to actually
embed that in a web page.

1459
01:02:03,226 --> 01:02:04,836
What about the language itself?

1460
01:02:04,916 --> 01:02:07,166
Here, I'm going to take a
shortcut and just wave my hand

1461
01:02:07,166 --> 01:02:08,986
at all of the syntactic
features of JavaScript?

1462
01:02:08,986 --> 01:02:11,576
Why? Most of these
keywords if not all

1463
01:02:11,576 --> 01:02:12,856
of them are probably familiar

1464
01:02:12,856 --> 01:02:15,566
to you no matter what language
you've actually used before.

1465
01:02:15,566 --> 01:02:17,446
A couple might be new,
might not have used the

1466
01:02:17,446 --> 01:02:20,926
for in construct before,
might have not used try-catch

1467
01:02:20,926 --> 01:02:22,626
if you're not familiar
with exceptions,

1468
01:02:22,866 --> 01:02:25,686
might not have seen var before,
but it's just what we use

1469
01:02:25,686 --> 01:02:26,976
to declare a variable.

1470
01:02:27,136 --> 01:02:29,326
But you can probably guess
what most of these do.

1471
01:02:29,326 --> 01:02:31,906
So, break is usually
used inside of a loop

1472
01:02:32,066 --> 01:02:34,526
or a switch to break out of it.

1473
01:02:34,526 --> 01:02:35,906
And we'll go through
this quickly.

1474
01:02:35,906 --> 01:02:38,316
These are the details we'll come
back to over time as needed,

1475
01:02:38,596 --> 01:02:40,756
and any number of online
references can reinforce.

1476
01:02:41,086 --> 01:02:43,486
Cons specifies that it
should be a constant value.

1477
01:02:43,986 --> 01:02:46,636
Continue means to do
another iteration of a loop

1478
01:02:46,636 --> 01:02:48,506
without necessarily
proceeding further

1479
01:02:48,506 --> 01:02:49,986
down below the line of code.

1480
01:02:50,206 --> 01:02:52,466
Do-while means do
something again and again

1481
01:02:52,466 --> 01:02:55,126
but check the condition at the
bottom instead of at the top.

1482
01:02:55,476 --> 01:02:56,426
For starts a loop.

1483
01:02:56,516 --> 01:02:59,606
For in is useful when you
want to iterate over an array.

1484
01:02:59,606 --> 01:03:01,936
It's just a shorthand way
of typing out a traditional

1485
01:03:01,936 --> 01:03:03,496
for loop as we'll
eventually see.

1486
01:03:03,836 --> 01:03:05,736
Function says here comes
a function and you have

1487
01:03:05,736 --> 01:03:08,586
to explicitly say here comes
a function with that keyword.

1488
01:03:08,856 --> 01:03:10,666
If/else, got to be familiar.

1489
01:03:10,756 --> 01:03:12,066
Return, got to be familiar.

1490
01:03:12,066 --> 01:03:14,576
Switch is just a different
way of writing an if/else,

1491
01:03:14,576 --> 01:03:15,886
if/else, if/else statement.

1492
01:03:16,146 --> 01:03:17,806
Throw relates to exceptions.

1493
01:03:17,806 --> 01:03:19,446
You'll see this a
little bit in JavaScript

1494
01:03:19,446 --> 01:03:20,796
but we won't spend
much time on them.

1495
01:03:20,796 --> 01:03:24,006
They are also present in iOS
but not super commonly used,

1496
01:03:24,006 --> 01:03:27,706
at least in the APIs we'll
mostly spend our time in,

1497
01:03:27,996 --> 01:03:30,036
but it's a way of
handling errors.

1498
01:03:30,036 --> 01:03:33,816
Instead of returning negative
one or returning false, or null,

1499
01:03:33,816 --> 01:03:35,906
or some sentinel
value like that.

1500
01:03:36,136 --> 01:03:38,926
Throw and try and catch
are mechanisms in languages

1501
01:03:38,926 --> 01:03:41,736
like JavaScript that allow your
code to just throw up an error

1502
01:03:41,986 --> 01:03:44,906
and typically they'll kill the
program unless you have written

1503
01:03:44,906 --> 01:03:49,256
code defensively to catch a
potential such thrown exception.

1504
01:03:49,496 --> 01:03:52,406
And we'll see if these come
up today or in the future.

1505
01:03:52,656 --> 01:03:55,226
Var lets you declare a variable
and while there starts a loop.

1506
01:03:55,226 --> 01:03:57,776
And there's a few other
things, but the rapidity

1507
01:03:57,776 --> 01:03:59,246
with which we just went
through that is just

1508
01:03:59,246 --> 01:04:00,966
to suggest the JavaScript
even if new

1509
01:04:00,966 --> 01:04:03,166
to you is probably
pretty familiar based

1510
01:04:03,166 --> 01:04:04,846
on most any other
language you've used.

1511
01:04:05,146 --> 01:04:06,586
How do you declare an array?

1512
01:04:06,586 --> 01:04:09,306
So in array, what's really
nice about JavaScript is

1513
01:04:09,306 --> 01:04:11,476
that it makes nice
use of syntactic sugar

1514
01:04:11,706 --> 01:04:14,626
which means using shorthand
notation to do common things,

1515
01:04:14,926 --> 01:04:15,856
open square bracket,

1516
01:04:15,916 --> 01:04:18,876
closed square bracket
gives you an empty array.

1517
01:04:19,376 --> 01:04:21,606
You can also write
out the word ARRAY,

1518
01:04:21,606 --> 01:04:25,866
capital A-R-R-A-Y open paren
closed paren calling effectively

1519
01:04:25,906 --> 01:04:27,756
a constructor for
the array class,

1520
01:04:28,356 --> 01:04:30,006
but it's not really
called a constructor

1521
01:04:30,006 --> 01:04:31,096
and it's not really
called the class.

1522
01:04:31,456 --> 01:04:34,306
So the more common way of
seeing it any way is just

1523
01:04:34,306 --> 01:04:35,846
to have open bracket
square bracket.

1524
01:04:35,966 --> 01:04:38,076
So we'll see that in
some examples eventually.

1525
01:04:38,226 --> 01:04:42,176
And to get an empty
object we use curly braces.

1526
01:04:42,266 --> 01:04:43,046
And we're back.

1527
01:04:43,386 --> 01:04:47,676
So, let's go about actually
implementing some simple

1528
01:04:47,706 --> 01:04:49,516
JavaScript examples
working our way

1529
01:04:49,516 --> 01:04:51,636
up to more compelling
examples, particularly ones

1530
01:04:51,636 --> 01:04:54,146
that leverage some
mobile specific features.

1531
01:04:54,146 --> 01:04:55,876
For instance, we'll
leverage a feature

1532
01:04:56,106 --> 01:04:59,746
of HTML 5 that's particularly
useful in a mobile context

1533
01:04:59,746 --> 01:05:02,726
if you want to store data
persistently even offline

1534
01:05:02,726 --> 01:05:05,486
potentially without internet
access called local storage.

1535
01:05:05,796 --> 01:05:08,936
We'll also take a look at the
Geolocation API which allows you

1536
01:05:08,936 --> 01:05:11,236
in JavaScript code
to ask the browser

1537
01:05:11,236 --> 01:05:15,416
and in turn the iOS phone
or iPad or iPod where am I

1538
01:05:15,416 --> 01:05:18,016
in the world, and actually
get back some GPS coordinates

1539
01:05:18,016 --> 01:05:21,266
and also a measurement of just
how accurate that estimation is.

1540
01:05:21,596 --> 01:05:24,316
So let me go back to the
sample code for tonight.

1541
01:05:24,416 --> 01:05:28,726
I'm inside of the JS
directory and let me go

1542
01:05:28,776 --> 01:05:30,876
into the dom0.html file.

1543
01:05:30,996 --> 01:05:33,296
So again, if you go to cs76.net,
if you haven't already,

1544
01:05:33,296 --> 01:05:35,456
you can download all of this
code to play along at home.

1545
01:05:35,936 --> 01:05:39,356
And if you pull up this page,
you get a super simple example.

1546
01:05:39,356 --> 01:05:42,116
It apparently is a
form with a text field

1547
01:05:42,686 --> 01:05:43,776
and with a form field.

1548
01:05:43,776 --> 01:05:45,776
And let me go ahead and
view the pages source

1549
01:05:45,776 --> 01:05:47,986
so we can see what's going
on underneath the hood here

1550
01:05:48,096 --> 01:05:49,816
and let's first focus
on what's familiar.

1551
01:05:49,846 --> 01:05:53,016
Let me scroll to the bottom
and we see a body tag.

1552
01:05:54,246 --> 01:05:58,246
We see inside of that
body a form tag and ID.

1553
01:05:58,476 --> 01:06:01,046
What's an ID attribute used for
if you've not used it before,

1554
01:06:01,216 --> 01:06:02,776
or if you have used it before?

1555
01:06:03,451 --> 01:06:05,451
[ Inaudible Remark ]

1556
01:06:05,886 --> 01:06:09,626
Exactly, so if you've not used
it before, the ID attribute

1557
01:06:09,626 --> 01:06:13,706
which can be applied to
most any HTML tag allows you

1558
01:06:13,706 --> 01:06:16,076
to uniquely identify
it in the dom.

1559
01:06:16,076 --> 01:06:17,476
It's totally the honor system.

1560
01:06:17,476 --> 01:06:19,396
It's up to you, the
developer, to make sure

1561
01:06:19,396 --> 01:06:22,716
that you don't give any
other element the same ID,

1562
01:06:22,936 --> 01:06:25,866
but it allows you
to have quick access

1563
01:06:26,136 --> 01:06:29,486
to a particular element not only
in CSS and in your style sheets

1564
01:06:29,486 --> 01:06:32,316
but also as we'll see
in JavaScript code.

1565
01:06:32,316 --> 01:06:33,286
So you don't have
to go searching

1566
01:06:33,286 --> 01:06:35,416
through the whole tree trying
to find a node of interest.

1567
01:06:35,796 --> 01:06:38,086
So that will come back to
onsubmit, let's dive into input.

1568
01:06:38,086 --> 01:06:42,306
So I have apparently given
an ID of name to an input tag

1569
01:06:42,306 --> 01:06:43,486
that has a placeholder.

1570
01:06:43,486 --> 01:06:44,616
So this is interesting.

1571
01:06:44,886 --> 01:06:48,976
It turns out that in HTML 5
there's actually a few useful

1572
01:06:49,086 --> 01:06:51,076
attributes that you might
not have seen before.

1573
01:06:51,076 --> 01:06:53,916
So let's actually suspend
this thread for just a moment.

1574
01:06:54,336 --> 01:06:57,176
Let me go back into our
earlier directory just

1575
01:06:57,176 --> 01:06:58,716
to make sure folks
have seen this.

1576
01:06:58,716 --> 01:07:02,976
And if I go into
inputs.html, notice this too,

1577
01:07:02,976 --> 01:07:05,416
is a form without even a submit
button 'cause my goal isn't

1578
01:07:05,416 --> 01:07:06,466
to submit this form but just

1579
01:07:06,466 --> 01:07:09,436
to demonstrate different
types of form fields.

1580
01:07:09,856 --> 01:07:11,706
Now they're going to wrap a
little bit 'cause the lines are

1581
01:07:11,706 --> 01:07:14,846
long, but notice in this
form I have three input tags

1582
01:07:15,186 --> 01:07:18,776
and I've got an auto capitalize
equals "off" attribute.

1583
01:07:18,776 --> 01:07:20,276
You probably guess
what that does.

1584
01:07:20,276 --> 01:07:22,556
It tells the phone,
in most cases,

1585
01:07:22,556 --> 01:07:25,176
don't try auto capitalizing
this, which an be annoying,

1586
01:07:25,326 --> 01:07:27,286
auto complete equals "off",

1587
01:07:27,386 --> 01:07:30,616
that just disables the little
dropdown that will often appear

1588
01:07:30,616 --> 01:07:32,466
if you previously typed
something into the field.

1589
01:07:32,666 --> 01:07:34,546
It's pretty common
on desktop browsers.

1590
01:07:34,746 --> 01:07:38,046
Autocorrect equals off,
increasingly helpful

1591
01:07:38,046 --> 01:07:40,196
on mobile devices and
also supported on more

1592
01:07:40,196 --> 01:07:42,906
and more desktop browsers just
means don't correct my spelling.

1593
01:07:43,376 --> 01:07:45,296
Placeholder equals
quote and quote,

1594
01:07:45,396 --> 01:07:47,776
that puts what in the textbox?

1595
01:07:47,776 --> 01:07:48,686
>> A placeholder text.

1596
01:07:48,686 --> 01:07:51,026
>> A placeholder text, a
grayed out text that's there

1597
01:07:51,026 --> 01:07:52,726
until you click on
it or start typing,

1598
01:07:52,726 --> 01:07:54,186
so it's just useful
for instructions.

1599
01:07:54,186 --> 01:07:57,066
And then finally type,
this is interesting too.

1600
01:07:57,186 --> 01:07:59,846
This first one has type equals
text which is old school,

1601
01:08:00,166 --> 01:08:03,406
but notice in HTML 5 you
can have type equals email

1602
01:08:03,916 --> 01:08:05,696
and type equals URL.

1603
01:08:05,696 --> 01:08:08,856
Now, that does not mean
that the browser is going

1604
01:08:08,856 --> 01:08:10,606
to validate the field for you.

1605
01:08:10,606 --> 01:08:13,716
You can type in any word
you want into an email field

1606
01:08:13,716 --> 01:08:15,586
and you won't get yelled at
just because it doesn't look

1607
01:08:15,586 --> 01:08:16,546
like an email address.

1608
01:08:16,676 --> 01:08:19,246
Similar for the URL, you can
type in any word you want,

1609
01:08:19,246 --> 01:08:20,196
even if it's not a URL,

1610
01:08:20,196 --> 01:08:21,516
the browser is not
going to yell at you.

1611
01:08:22,196 --> 01:08:25,786
So why in the world would
the browser care what type

1612
01:08:25,786 --> 01:08:26,956
of field this should be?

1613
01:08:27,516 --> 01:08:30,076
[ Inaudible Remark ]

1614
01:08:30,576 --> 01:08:32,976
What do you mean
add the at symbol?

1615
01:08:33,016 --> 01:08:34,326
[ Inaudible Remark ]

1616
01:08:34,326 --> 01:08:36,976
So the keyboard, but not
my physical keyboard.

1617
01:08:37,391 --> 01:08:39,391
[ Inaudible Remark ]

1618
01:08:39,766 --> 01:08:44,236
Yeah, so indeed if I--
let's go back to Safari

1619
01:08:44,466 --> 01:08:45,796
in the simulator here.

1620
01:08:46,056 --> 01:08:48,486
Let's go back to the directory
listing and go to inputs.

1621
01:08:48,696 --> 01:08:49,716
And now notice what happens.

1622
01:08:49,716 --> 01:08:51,926
If I click on the first of
these inputs, the very top one

1623
01:08:51,926 --> 01:08:54,606
which is type equals text,
notice that I get this keyboard.

1624
01:08:54,976 --> 01:08:57,406
OK, pretty uninteresting, done.

1625
01:08:57,686 --> 01:08:59,406
Now if I click on
the email field,

1626
01:09:00,056 --> 01:09:02,416
see how good your
recall is, what changed?

1627
01:09:03,406 --> 01:09:06,656
So you get a smaller spacebar
and the at sign there.

1628
01:09:06,656 --> 01:09:08,106
So it's just for the
user's convenience.

1629
01:09:08,106 --> 01:09:09,836
And what are we probably
going to see

1630
01:09:09,836 --> 01:09:11,976
if we instead dismiss this
and click the URL field?

1631
01:09:12,016 --> 01:09:13,866
[ Inaudible Remark ]

1632
01:09:13,866 --> 01:09:15,446
Exactly, it changes
ever so slightly

1633
01:09:15,446 --> 01:09:17,616
and also we get the
slash for easy access.

1634
01:09:17,616 --> 01:09:21,156
So, it's just a little bit of
icing on the cake for the user

1635
01:09:21,156 --> 01:09:23,036
to make it easier to
interact with your site.

1636
01:09:23,466 --> 01:09:23,816
All right.

1637
01:09:23,816 --> 01:09:26,566
So now, let's go back to the
example we were at before

1638
01:09:26,566 --> 01:09:31,616
which was not this one here,
but with just the dom0 file

1639
01:09:31,866 --> 01:09:33,966
and the JS directory
that look like this.

1640
01:09:34,646 --> 01:09:37,846
So notice at the bottom I've
added a couple of other things

1641
01:09:37,956 --> 01:09:40,906
to the input tag,
placeholder equals "name" just

1642
01:09:40,906 --> 01:09:44,456
to be explanatory, type equals
text, so no special keyboards.

1643
01:09:44,766 --> 01:09:46,736
Finally, an input of
type equal submit.

1644
01:09:47,376 --> 01:09:48,446
But there's something else here

1645
01:09:48,446 --> 01:09:49,696
that you might not
have used before,

1646
01:09:50,096 --> 01:09:51,716
but you can probably
guess what it does,

1647
01:09:51,716 --> 01:09:55,716
this attribute called onsubmit
presumably tells the browser

1648
01:09:55,716 --> 01:10:00,466
to-- yeah, call a
function, call the greet

1649
01:10:00,466 --> 01:10:01,906
when the form is submitted.

1650
01:10:02,256 --> 01:10:03,816
How do you submit a form?

1651
01:10:03,816 --> 01:10:05,736
Well, you either click the
physical submit button.

1652
01:10:05,956 --> 01:10:08,396
Or if you're on a desktop
computer, you hit the enter key.

1653
01:10:08,396 --> 01:10:09,636
That will often do it as well.

1654
01:10:09,816 --> 01:10:12,916
So in either case, the act
of submitting a form happens.

1655
01:10:13,026 --> 01:10:15,016
But with this onsubmit
attribute,

1656
01:10:15,136 --> 01:10:16,336
you're telling the browser,

1657
01:10:16,336 --> 01:10:18,676
listen for that event,
so to speak.

1658
01:10:18,946 --> 01:10:21,366
And JavaScript and web
programming more generally is

1659
01:10:21,366 --> 01:10:22,746
very much event driven.

1660
01:10:22,746 --> 01:10:25,606
When that form is
submitted an event happens

1661
01:10:25,836 --> 01:10:28,076
and onsubmit is an
event handler,

1662
01:10:28,196 --> 01:10:31,516
a listener that's waiting to
hear that event of submission.

1663
01:10:31,516 --> 01:10:32,776
And what should it do?

1664
01:10:33,006 --> 01:10:35,026
Well, we don't know much
JavaScript yet most likely

1665
01:10:35,026 --> 01:10:36,656
but it looks like code

1666
01:10:36,746 --> 01:10:39,566
and indeed I should call a
greet function with no arguments

1667
01:10:39,826 --> 01:10:41,446
and then I should return false.

1668
01:10:41,796 --> 01:10:44,916
And we'll come to the-- back to
greet in a second, return false.

1669
01:10:44,916 --> 01:10:47,336
What would that possibly
mean, to return false inside

1670
01:10:47,336 --> 01:10:50,156
of an attribute,
inside of a form tag?

1671
01:10:51,016 --> 01:10:54,166
Exactly. So what
might you want to stop

1672
01:10:54,346 --> 01:10:55,586
when a form is submitted?

1673
01:10:55,806 --> 01:10:58,556
Well, the form being
submitted itself to the server.

1674
01:10:58,746 --> 01:11:01,236
If the whole point right now is
to start writing code that runs

1675
01:11:01,236 --> 01:11:03,446
on the client side
inside of the browser,

1676
01:11:03,626 --> 01:11:07,066
we don't even need a server
once we've downloaded the HTML,

1677
01:11:07,066 --> 01:11:08,626
and the CSS, and the
JavaScript, right?

1678
01:11:08,626 --> 01:11:10,646
We can lose internet
connectivity altogether

1679
01:11:10,646 --> 01:11:14,446
potentially if all of the code
is running locally on my phone

1680
01:11:14,446 --> 01:11:16,186
or iPad or iPod right now.

1681
01:11:16,466 --> 01:11:18,946
So onsubmit just says
call a greet function

1682
01:11:18,946 --> 01:11:22,306
but no matter what happens do
not actually submit this form.

1683
01:11:22,616 --> 01:11:24,136
So it's your chance
to intervene.

1684
01:11:24,496 --> 01:11:26,236
So now let's scroll up
to the top of the file.

1685
01:11:26,236 --> 01:11:28,536
Most of it is pretty
boring HTML, title tag,

1686
01:11:28,536 --> 01:11:29,726
head tag and all of that.

1687
01:11:29,956 --> 01:11:32,996
But notice toward the top
of the file I've introduced

1688
01:11:32,996 --> 01:11:35,776
that script tag, and
then I've put right there

1689
01:11:35,776 --> 01:11:38,726
in the script tag
function greet.

1690
01:11:39,046 --> 01:11:41,176
So we promise that the function
keyword means here comes

1691
01:11:41,176 --> 01:11:41,736
a function.

1692
01:11:42,066 --> 01:11:44,436
Then open paren closed paren
means it takes no arguments.

1693
01:11:44,696 --> 01:11:47,326
Open curly brace, closed
curly brace defines the scope

1694
01:11:47,326 --> 01:11:49,486
of a function and it's
a one line function.

1695
01:11:49,926 --> 01:11:53,476
It turns out in JavaScript
there is a function that's super

1696
01:11:53,476 --> 01:11:55,756
useful but not to be
used in production code

1697
01:11:56,016 --> 01:11:57,916
that just opens a pop-up.

1698
01:11:57,916 --> 01:12:01,906
If you remember 8-- 10 years
ago when pop-ups were very much

1699
01:12:01,906 --> 01:12:03,526
in vogue and alerts
were very much in vogue,

1700
01:12:03,526 --> 01:12:04,686
that's how you invoke them.

1701
01:12:04,726 --> 01:12:07,566
That's one way of opening
prompts on the user screen.

1702
01:12:07,926 --> 01:12:09,086
So what is this going to do?

1703
01:12:09,086 --> 01:12:11,586
Well, let's take a quick
glance at some syntax,

1704
01:12:11,586 --> 01:12:13,216
but you can probably guess
what this is doing based

1705
01:12:13,216 --> 01:12:14,166
on other languages.

1706
01:12:14,346 --> 01:12:15,976
It's wrapping a bit
'cause the line is long.

1707
01:12:15,976 --> 01:12:17,846
But this is calling
alert passing

1708
01:12:17,846 --> 01:12:21,016
in a single argument
of type string.

1709
01:12:21,156 --> 01:12:22,806
So JavaScript does
have the notion

1710
01:12:22,806 --> 01:12:24,216
of data types as we'll see.

1711
01:12:24,656 --> 01:12:27,206
Quote unquote with
the comma hello.

1712
01:12:27,206 --> 01:12:30,326
What do you think
the plus is doing?

1713
01:12:30,446 --> 01:12:31,266
Concatenation.

1714
01:12:31,266 --> 01:12:32,396
So you've seen this in Java.

1715
01:12:32,396 --> 01:12:34,316
If you're a PHP programmer,
you've seen dot.

1716
01:12:34,316 --> 01:12:36,126
Other languages use
different symbols.

1717
01:12:36,396 --> 01:12:39,766
Now document.getElementById
of name.

1718
01:12:39,826 --> 01:12:42,596
I had no idea until a second
ago that function existed

1719
01:12:42,596 --> 01:12:45,816
but it seems that a function
called getElementById exists.

1720
01:12:45,966 --> 01:12:47,466
It's associated with some kind

1721
01:12:47,466 --> 01:12:50,326
of global variable
called documents.

1722
01:12:50,486 --> 01:12:53,096
So more properly
it's a method inside

1723
01:12:53,096 --> 01:12:54,966
of an object called document.

1724
01:12:55,156 --> 01:12:57,656
What is that object
called document?

1725
01:12:58,036 --> 01:13:01,486
Well, if we go back to
the screen from earlier,

1726
01:13:01,976 --> 01:13:05,796
recall that, the document node.

1727
01:13:06,186 --> 01:13:07,876
If you've programmed
JavaScript already

1728
01:13:07,876 --> 01:13:10,466
and you every used
document dot something,

1729
01:13:10,636 --> 01:13:12,326
you've essentially been
talking to that guy

1730
01:13:12,326 --> 01:13:14,206
who has some special
functionality built in

1731
01:13:14,206 --> 01:13:17,046
and clearly he's important
'cause he can see the entirety

1732
01:13:17,046 --> 01:13:18,636
of the tree from
his vantage point.

1733
01:13:18,956 --> 01:13:21,076
So if we now go back
to my own code,

1734
01:13:21,466 --> 01:13:24,946
document.getElementById does
exactly what you think it does.

1735
01:13:25,176 --> 01:13:26,526
Give me the element
from the tree.

1736
01:13:26,526 --> 01:13:29,526
Give me the rectangle whose
ID is quote unquote name

1737
01:13:29,656 --> 01:13:31,726
which is what type of
element, just to be clear?

1738
01:13:32,246 --> 01:13:35,256
Not a string per se.

1739
01:13:35,256 --> 01:13:37,846
What type of HTML
element was it?

1740
01:13:40,676 --> 01:13:43,436
An input. So give
me the rectangle

1741
01:13:43,556 --> 01:13:47,276
that represents the
input whose ID is name

1742
01:13:47,586 --> 01:13:48,856
in that tree structure.

1743
01:13:48,856 --> 01:13:52,796
Why? Because I then want to dive
in deeper and get its value.

1744
01:13:53,066 --> 01:13:55,456
So here is the object
oriented nature of JavaScript.

1745
01:13:55,456 --> 01:13:58,996
The dot means go inside of this
object, go inside of this object

1746
01:13:58,996 --> 01:14:02,206
and get some member function
or member variable data field.

1747
01:14:02,506 --> 01:14:06,576
So documents and object, it has
a method called getElementById.

1748
01:14:06,726 --> 01:14:10,256
That method returns apparently
an object or rectangle

1749
01:14:10,256 --> 01:14:12,666
that represents that node
from the tree and one

1750
01:14:12,666 --> 01:14:14,716
of its property,
something inside

1751
01:14:14,716 --> 01:14:18,556
of that rectangle is apparently
a property, a data field,

1752
01:14:18,556 --> 01:14:19,896
data value, whatever
you want to call it,

1753
01:14:19,896 --> 01:14:23,536
an instance variable
called value.

1754
01:14:23,966 --> 01:14:27,396
That gives you the value that
the user typed into that field.

1755
01:14:27,676 --> 01:14:31,436
So what is the net effect in
layman's terms of this line

1756
01:14:31,436 --> 01:14:33,786
of code, to trigger an
alert with what text?

1757
01:14:34,016 --> 01:14:36,016
[ Pause ]

1758
01:14:36,016 --> 01:14:37,000
[ Inaudible Remark ]

1759
01:14:37,416 --> 01:14:40,256
Hello, so and so, whatever
your name actually is.

1760
01:14:40,256 --> 01:14:41,236
So let's give this a try.

1761
01:14:41,236 --> 01:14:43,276
Let's go back to
the web page itself.

1762
01:14:43,646 --> 01:14:46,996
Let me go ahead and type
in Rob and click submit,

1763
01:14:46,996 --> 01:14:49,816
and there it is, "Hello Rob."

1764
01:14:49,816 --> 01:14:52,136
It's definitely a poor
man's user interface

1765
01:14:52,136 --> 01:14:54,986
and that we're just triggering
this browser dependent screen.

1766
01:14:54,986 --> 01:14:56,656
Chrome even gives
its own logo here.

1767
01:14:56,656 --> 01:14:57,866
So there's other
ways of doing this

1768
01:14:58,236 --> 01:15:00,556
but clearly we have
dynamically gotten some data

1769
01:15:00,556 --> 01:15:02,036
from that DOM element.

1770
01:15:02,386 --> 01:15:03,716
But hopefully we
can do a bit better.

1771
01:15:03,716 --> 01:15:08,236
So let me actually roll back
not to zero but to dom1.html.

1772
01:15:08,536 --> 01:15:10,186
The form is going
to be the same,

1773
01:15:10,186 --> 01:15:13,176
but let's instead introduce
a slightly different

1774
01:15:13,176 --> 01:15:14,106
approach here.

1775
01:15:14,666 --> 01:15:18,286
So, in this version what appears
to be different at first glance,

1776
01:15:18,446 --> 01:15:21,496
even if you can't read all
of the lines in question?

1777
01:15:22,046 --> 01:15:27,256
I moved the script, I moved
the script down below.

1778
01:15:27,256 --> 01:15:30,926
All right, why did I do that?

1779
01:15:32,096 --> 01:15:33,356
Or what's the effect of this?

1780
01:15:33,356 --> 01:15:34,546
There's a few things
different here.

1781
01:15:34,546 --> 01:15:35,366
Well let's take a look.

1782
01:15:35,576 --> 01:15:37,666
So one, it's an important detail

1783
01:15:38,006 --> 01:15:40,636
that the form is now coming
before the script because one

1784
01:15:40,636 --> 01:15:42,436
of the conclusions
we reached earlier is

1785
01:15:42,436 --> 01:15:44,016
that JavaScripts reading of a--

1786
01:15:44,016 --> 01:15:46,436
or browsers parsing the
page is synchronous,

1787
01:15:46,436 --> 01:15:49,326
it do these things one at a
time, at a time, at a time.

1788
01:15:49,626 --> 01:15:51,516
So, in fact as a tangent,

1789
01:15:51,516 --> 01:15:54,566
if you've ever used Google
Analytics or you used

1790
01:15:54,566 --> 01:15:55,976
like the Facebook like button,

1791
01:15:55,976 --> 01:15:58,326
actually Google Analytics
specifically tells you

1792
01:15:58,326 --> 01:15:59,836
to put their code where?

1793
01:15:59,836 --> 01:16:05,436
Sorry? At the end, right
above the closed body tag.

1794
01:16:05,436 --> 01:16:08,176
Why? Well, just in case
Google servers are slow

1795
01:16:08,176 --> 01:16:10,156
or the user has a slow
connection to Google but not

1796
01:16:10,156 --> 01:16:12,986
to you, Google doesn't want
to be responsible for slowing

1797
01:16:12,986 --> 01:16:15,746
down the loading of your web
page lest the user see nothing,

1798
01:16:15,906 --> 01:16:19,286
and so Google also loads its
JavaScript cookie tracking code

1799
01:16:19,286 --> 01:16:19,776
at the bottom.

1800
01:16:20,116 --> 01:16:22,306
Now, the last time I
looked, Facebook tells you

1801
01:16:22,306 --> 01:16:23,176
to put their code where?

1802
01:16:24,016 --> 01:16:25,106
[ Inaudible Remark ]

1803
01:16:25,106 --> 01:16:27,606
OK, right after the open
body tag thereby giving it

1804
01:16:27,606 --> 01:16:28,426
more priority.

1805
01:16:28,486 --> 01:16:32,266
But in their defense,
the way Google loads code

1806
01:16:32,266 --> 01:16:34,576
into your page is they
actually retroactively go back

1807
01:16:34,576 --> 01:16:36,416
and inject it into
the top of the page,

1808
01:16:36,416 --> 01:16:38,686
so it's not actually
a blocking call.

1809
01:16:38,686 --> 01:16:42,246
So, different subtleties that
we'll not spend time on here,

1810
01:16:42,456 --> 01:16:43,876
but that's the motivation

1811
01:16:43,876 --> 01:16:46,546
for those different design
decisions is how will the pages'

1812
01:16:46,646 --> 01:16:47,936
loading be affected.

1813
01:16:47,936 --> 01:16:49,336
So, let's see what
the relevance here is.

1814
01:16:49,796 --> 01:16:50,606
Here is my form.

1815
01:16:50,606 --> 01:16:53,096
I've this time given
it an ID of demo

1816
01:16:53,156 --> 01:16:56,236
so that I can uniquely identify
the form element itself.

1817
01:16:56,556 --> 01:16:59,006
I have the same input and
submit button as before,

1818
01:16:59,246 --> 01:17:00,646
and then down here
I have a script.

1819
01:17:01,146 --> 01:17:03,276
But notice my code has
changed a little bit.

1820
01:17:03,276 --> 01:17:04,936
What's the first
syntactic difference

1821
01:17:04,936 --> 01:17:07,346
that you see this time
that wasn't here before?

1822
01:17:07,446 --> 01:17:07,546
Yeah?

1823
01:17:08,516 --> 01:17:14,106
[ Inaudible Remark ]

1824
01:17:14,606 --> 01:17:19,586
OK, good. So, notice that return
false is below the HTML itself,

1825
01:17:19,586 --> 01:17:21,456
it's not inside of the HTML.

1826
01:17:21,646 --> 01:17:25,356
In fact there is no
onsubmit attribute anymore.

1827
01:17:25,516 --> 01:17:26,516
Instead, we seem

1828
01:17:26,516 --> 01:17:29,916
to be manipulating a
property called onsubmit.

1829
01:17:29,916 --> 01:17:32,286
So again to the object
oriented nature of JavaScript,

1830
01:17:32,446 --> 01:17:33,856
it turns out that just

1831
01:17:33,856 --> 01:17:35,776
as there's this global
document object,

1832
01:17:36,246 --> 01:17:38,916
inside of which is a method
called getElementById,

1833
01:17:39,116 --> 01:17:41,766
that in turn is going to return
the element whose ID is demo.

1834
01:17:42,006 --> 01:17:42,966
And which element is that?

1835
01:17:42,966 --> 01:17:43,676
What type of element?

1836
01:17:44,416 --> 01:17:45,266
It's a form.

1837
01:17:45,666 --> 01:17:51,136
It turns out that form elements
have a property called onsubmit.

1838
01:17:51,846 --> 01:17:54,606
And this is not a property
whose value is supposed

1839
01:17:54,606 --> 01:17:56,326
to be a number or a string.

1840
01:17:56,586 --> 01:17:59,286
It's supposed to be a
function pointer so to speak,

1841
01:17:59,286 --> 01:18:03,376
a reference to a function,
the address of a function.

1842
01:18:03,376 --> 01:18:04,836
Think of it however
you'd like based

1843
01:18:04,836 --> 01:18:06,446
on what language you
have as a background.

1844
01:18:06,776 --> 01:18:09,566
So, onsubmit equals,
what does this mean?

1845
01:18:10,016 --> 01:18:12,466
Notice that on the right hand
side here there's the keyword

1846
01:18:12,466 --> 01:18:14,506
function again, open
paren, closed paren,

1847
01:18:14,506 --> 01:18:17,126
but what is absent this time
from the function declaration?

1848
01:18:17,616 --> 01:18:20,546
There's no name of
this function,

1849
01:18:20,886 --> 01:18:22,426
but it doesn't matter, right?

1850
01:18:22,496 --> 01:18:25,096
Because what I'm actually doing
here is clearly creating what

1851
01:18:25,096 --> 01:18:26,716
seems to be an anonymous
function.

1852
01:18:26,776 --> 01:18:28,506
It's a function with
no name otherwise known

1853
01:18:28,506 --> 01:18:29,616
as a lambda function.

1854
01:18:30,126 --> 01:18:33,056
And when you call the
function keyword in this way,

1855
01:18:33,506 --> 01:18:36,166
notice I have the open curly
brace, then some stuff,

1856
01:18:36,446 --> 01:18:38,796
then closed curly
brace semicolon.

1857
01:18:39,146 --> 01:18:42,306
So, I've declared in
these few lines of code

1858
01:18:42,306 --> 01:18:43,586
in anonymous function,

1859
01:18:43,656 --> 01:18:46,386
but because I have an
equal sign right before it,

1860
01:18:46,866 --> 01:18:49,306
I'm essentially storing the
address of that function,

1861
01:18:49,306 --> 01:18:51,806
a pointer there too, were our
reference to that function

1862
01:18:51,806 --> 01:18:55,246
where as the value of
this onsubmit property.

1863
01:18:55,746 --> 01:18:58,436
The browser has been
defined meanwhile to know

1864
01:18:58,756 --> 01:19:01,196
if this onsubmit
property, previously null,

1865
01:19:01,536 --> 01:19:04,846
is set to a valid
reference of a function.

1866
01:19:05,466 --> 01:19:07,456
When the form is actually
submitted by the user

1867
01:19:07,456 --> 01:19:10,476
by clicking submit or hitting
enter on a physical keyboard,

1868
01:19:11,336 --> 01:19:14,936
find this value, call that
function and return true

1869
01:19:14,936 --> 01:19:17,806
or false based on what
it tells you to do.

1870
01:19:18,306 --> 01:19:20,676
So, clearly it's returning
false, what else is it doing?

1871
01:19:20,676 --> 01:19:21,926
It's also doing the alert

1872
01:19:22,056 --> 01:19:24,036
but the alert thing
is the same as before.

1873
01:19:24,436 --> 01:19:25,386
So, what have we done?

1874
01:19:25,646 --> 01:19:28,246
We've removed the onsubmit
attribute from the HTML,

1875
01:19:28,246 --> 01:19:30,926
replaced it instead with
pure JavaScript code.

1876
01:19:31,646 --> 01:19:34,356
Why? What's an argument
in favor of this approach?

1877
01:19:34,916 --> 01:19:34,996
Yeah?

1878
01:19:37,776 --> 01:19:41,086
>> For some reason if the
browser doesn't like JavaScript

1879
01:19:41,626 --> 01:19:44,926
or if the JavaScript [inaudible]
to form itself is not going

1880
01:19:44,926 --> 01:19:46,126
to crash your browser.

1881
01:19:46,416 --> 01:19:47,226
>> OK, good.

1882
01:19:47,226 --> 01:19:49,746
So, just in case
we're using a browser

1883
01:19:49,746 --> 01:19:52,946
that has some incompatibilities,
by moving the code outside

1884
01:19:52,946 --> 01:19:57,016
of the context of the
form, the script is less--

1885
01:19:57,016 --> 01:19:59,846
is more likely to be ignored and
indeed that should be the case.

1886
01:19:59,846 --> 01:20:02,116
Even browsers that have
JavaScript off should just

1887
01:20:02,116 --> 01:20:03,736
ignore the contents of this tag.

1888
01:20:03,736 --> 01:20:05,156
So, it's not a bad thought.

1889
01:20:05,156 --> 01:20:07,826
In reality I don't think it
would end up being a problem

1890
01:20:07,826 --> 01:20:10,136
because if the browser just
doesn't support JavaScript,

1891
01:20:10,136 --> 01:20:12,676
the fact that we had onsubmit
equals quote unquote something

1892
01:20:12,886 --> 01:20:14,566
should also be ignored
in the same way,

1893
01:20:14,966 --> 01:20:17,246
but not a bad approach.

1894
01:20:17,246 --> 01:20:17,346
Yeah?

1895
01:20:18,516 --> 01:20:22,236
[ Inaudible Remark ]

1896
01:20:22,736 --> 01:20:27,916
Good. So, we'll come to the
jargon of MDC probably in a week

1897
01:20:27,916 --> 01:20:30,446
or two, but for now
let's summarize it as--

1898
01:20:30,886 --> 01:20:32,416
my code was getting
a little sloppy.

1899
01:20:32,606 --> 01:20:36,076
Not only did I have HTML and
then also some CSS in that file

1900
01:20:36,076 --> 01:20:39,336
up above in previous examples,
now I'm putting actual logic,

1901
01:20:39,376 --> 01:20:40,796
programming code inside

1902
01:20:40,796 --> 01:20:44,096
of my markup language whose name
suggest it should be for markup,

1903
01:20:44,286 --> 01:20:46,076
making things bold,
making things centered.

1904
01:20:46,076 --> 01:20:48,846
Structuring a page
should have nothing

1905
01:20:48,846 --> 01:20:50,066
to do fundamentally with codes.

1906
01:20:50,066 --> 01:20:52,956
So, in the interest of
keeping my coding life separate

1907
01:20:52,956 --> 01:20:56,566
from my markup life, this is
generally a better approach.

1908
01:20:56,566 --> 01:20:59,456
It's not perfect 'cause frankly
it's like half a foot away

1909
01:20:59,516 --> 01:21:00,686
from where it was before.

1910
01:21:00,686 --> 01:21:02,166
So, we haven't really
solved this problem,

1911
01:21:02,506 --> 01:21:04,816
but keeping code
separate from logic

1912
01:21:04,816 --> 01:21:06,766
and presentation is a key
theme that we'll come back

1913
01:21:06,916 --> 01:21:10,016
to because it permeates the
iOS SDK and the environment

1914
01:21:10,016 --> 01:21:11,106
for running iPhone apps,

1915
01:21:11,416 --> 01:21:13,526
but this is at least
a step toward that.

1916
01:21:13,686 --> 01:21:16,466
And also, if we're only
calling this function onsubmit,

1917
01:21:16,466 --> 01:21:18,246
we definitely don't
need to give it a name.

1918
01:21:18,336 --> 01:21:20,536
If I'm the only person
ever calling this code,

1919
01:21:20,536 --> 01:21:23,426
I called it greet before,
but I didn't even really need

1920
01:21:23,426 --> 01:21:25,846
that name 'cause clearly I
can do without it entirely.

1921
01:21:26,516 --> 01:21:28,736
[ Inaudible Remark ]

1922
01:21:29,236 --> 01:21:30,206
Good question.

1923
01:21:30,206 --> 01:21:31,386
In JavaScript, none.

1924
01:21:31,536 --> 01:21:34,556
I'm in the habit lately of using
all single quotes for JavaScript

1925
01:21:34,556 --> 01:21:36,006
and all double quotes for HTML,

1926
01:21:36,206 --> 01:21:38,396
but there's functionally no
difference in JavaScript.

1927
01:21:39,976 --> 01:21:42,116
He is referring to the
single quotes I had

1928
01:21:42,116 --> 01:21:43,396
around demo for instance.

1929
01:21:43,656 --> 01:21:44,926
This would be a matter
of style too.

1930
01:21:44,926 --> 01:21:47,126
For the projects if you
have religion about single

1931
01:21:47,126 --> 01:21:49,406
and double quoting, that's
fine, just be self-consistent

1932
01:21:49,406 --> 01:21:51,116
with respect to your own code.

1933
01:21:51,516 --> 01:21:55,396
All right, so now let me go
into this file and let's see,

1934
01:21:55,396 --> 01:21:58,916
I'll use the simplest of
programs on Mac OS TextEdit,

1935
01:21:58,916 --> 01:22:01,016
and I'm going to go into--

1936
01:22:01,086 --> 01:22:04,996
remember John Harvard's
sites folder which is

1937
01:22:04,996 --> 01:22:06,026
where we put this code.

1938
01:22:06,026 --> 01:22:09,576
I'm going to go into source
zero, go into JavaScript,

1939
01:22:09,576 --> 01:22:11,696
and go into dom1.hmtl.

1940
01:22:11,996 --> 01:22:14,506
So, here is that web page, but
now it's an uneditable program.

1941
01:22:14,506 --> 01:22:17,786
I'm going to scroll down and I'm
going to do things the opposite,

1942
01:22:17,786 --> 01:22:20,996
I'm going to delete the script
tag, and I'm going to put it

1943
01:22:20,996 --> 01:22:24,866
above the form, and then
I'm going to save the file.

1944
01:22:24,866 --> 01:22:26,826
I'm going to go back
to my browser.

1945
01:22:27,126 --> 01:22:28,746
I'm going to reload the page.

1946
01:22:28,806 --> 01:22:32,466
So, indeed the browser now sees
the change I made in TextEdit.

1947
01:22:32,466 --> 01:22:35,996
I'm going to go back to the
page itself and reload this.

1948
01:22:36,666 --> 01:22:39,776
So, the form has been reloaded
on the page, and now I'm going

1949
01:22:39,776 --> 01:22:43,076
to go ahead and type in
Rob again and submit,

1950
01:22:43,076 --> 01:22:46,506
and it seems to have broken.

1951
01:22:46,506 --> 01:22:48,826
In fact I see a question
mark in the URL

1952
01:22:48,826 --> 01:22:51,456
which usually means a form
has physically been submitted

1953
01:22:51,456 --> 01:22:53,196
to a server which
I did not intend.

1954
01:22:53,376 --> 01:22:54,776
There were supposed
to be a return false.

1955
01:22:55,046 --> 01:22:56,756
So, let me start
diagnosing things.

1956
01:22:56,756 --> 01:23:00,056
So, when doing the first
projects in the course,

1957
01:23:00,056 --> 01:23:02,536
much as Apple like Safari,

1958
01:23:02,536 --> 01:23:04,546
using Chrome is probably
the better browser to use

1959
01:23:04,546 --> 01:23:06,336
from a development perspective
'cause it has additional

1960
01:23:06,336 --> 01:23:09,276
features, one of which is this
inspector element at the bottom

1961
01:23:09,276 --> 01:23:12,126
which Safari has its own variant
of, but I think you'll find

1962
01:23:12,126 --> 01:23:14,816
that Chrome is useful both for
mobile and desktop developments.

1963
01:23:14,816 --> 01:23:16,946
And I'm going to go into
the console window here

1964
01:23:16,946 --> 01:23:18,846
for a moment, and
that's interesting.

1965
01:23:19,046 --> 01:23:21,826
The red text which
if I zoom in says,

1966
01:23:21,896 --> 01:23:26,556
on type error cannot set
property onsubmit of null.

1967
01:23:26,556 --> 01:23:27,926
So, that's kind of a mouthful.

1968
01:23:27,926 --> 01:23:29,266
I didn't really understand
the first half,

1969
01:23:29,426 --> 01:23:32,666
but onsubmit looks familiar
and null sounds worrisome.

1970
01:23:32,866 --> 01:23:36,106
So, let's see where in my code
I used the keyword onsubmit.

1971
01:23:36,536 --> 01:23:37,566
So here is my code.

1972
01:23:38,216 --> 01:23:41,786
Onsubmit can't call this
with respect to null.

1973
01:23:41,906 --> 01:23:45,916
So, again the error was, cannot
set property onsubmit of null.

1974
01:23:46,116 --> 01:23:47,496
So, what does this
suggest is null?

1975
01:23:48,016 --> 01:23:49,596
[ Inaudible Remark ]

1976
01:23:49,596 --> 01:23:50,876
But no demo.

1977
01:23:50,876 --> 01:23:55,576
Specifically the return value
of the method getElementById

1978
01:23:55,876 --> 01:23:57,346
when passed an argument

1979
01:23:57,346 --> 01:23:59,956
of "demo" is apparently now
returning not a rectangle,

1980
01:23:59,956 --> 01:24:04,496
but null, and null is the null
object that has no property,

1981
01:24:04,496 --> 01:24:05,896
certainly not one
called onsubmit

1982
01:24:05,896 --> 01:24:08,696
which is why Chrome is freaking
out and not doing anything.

1983
01:24:08,696 --> 01:24:11,346
And in fact, Chrome and
most browsers approach

1984
01:24:11,346 --> 01:24:14,046
when there's a JavaScript error
is just to forge ahead blindly.

1985
01:24:14,046 --> 01:24:16,136
In this case, it submitted
the form irrespective

1986
01:24:16,136 --> 01:24:17,116
of my return false.

1987
01:24:18,026 --> 01:24:21,446
Why is all of a sudden
the demo element null?

1988
01:24:23,026 --> 01:24:23,106
Yeah?

1989
01:24:24,516 --> 01:24:27,276
[ Inaudible Remark ]

1990
01:24:27,776 --> 01:24:30,936
Exactly. It's because the
browser is parsing this code top

1991
01:24:30,936 --> 01:24:33,776
to bottom, left to right, and
at this point in the story

1992
01:24:33,776 --> 01:24:35,936
when I'm reading the script
tag in its new location,

1993
01:24:36,156 --> 01:24:39,906
I can call getElementById
of "demo" all I want.

1994
01:24:40,136 --> 01:24:43,916
It won't exist until we get down
there, but I'm calling this line

1995
01:24:43,916 --> 01:24:45,976
of code here which is why sort

1996
01:24:45,976 --> 01:24:51,296
of coincidentally my code worked
fine before even though I put my

1997
01:24:51,296 --> 01:24:55,056
script tag still in
the file but below.

1998
01:24:55,136 --> 01:24:58,096
But these two, in the spirit
of keeping my code separate

1999
01:24:58,126 --> 01:25:02,236
from my HTML feels a little
hackish to just solve all

2000
01:25:02,236 --> 01:25:04,126
of my JavaScript problems
by putting my code

2001
01:25:04,126 --> 01:25:05,946
at the very bottom of my file.

2002
01:25:05,946 --> 01:25:08,256
So, hopefully there's
a better way than that.

2003
01:25:08,256 --> 01:25:08,956
And there is.

2004
01:25:08,956 --> 01:25:13,026
If we scroll back to our
demos here, and let me go

2005
01:25:13,026 --> 01:25:17,786
into the last version of DOM,
DOM2, which hopefully works.

2006
01:25:18,736 --> 01:25:20,436
Hello Rob in fact works.

2007
01:25:20,436 --> 01:25:22,186
Let's take a look
at this code here

2008
01:25:22,526 --> 01:25:24,786
and see what's different,
all right?

2009
01:25:24,786 --> 01:25:27,516
My HTML seems to have
been vastly simplified

2010
01:25:27,516 --> 01:25:29,376
and I'm now practicing
what I've been preaching

2011
01:25:29,536 --> 01:25:33,926
about not commingling
code with my raw markup.

2012
01:25:34,066 --> 01:25:36,096
In fairness, I've just
moved it up to the top,

2013
01:25:36,256 --> 01:25:38,636
but at least now what's
inside of the head element

2014
01:25:38,976 --> 01:25:41,776
which at least is sort
of conceptually distinct

2015
01:25:41,936 --> 01:25:44,046
from the body which is
where the actual aesthetics

2016
01:25:44,046 --> 01:25:44,996
of my page should be.

2017
01:25:44,996 --> 01:25:46,706
And frankly, at this
point, we could rip

2018
01:25:46,706 --> 01:25:48,046
out this code and put it where?

2019
01:25:48,596 --> 01:25:52,746
In a separate file
called like file.js

2020
01:25:52,986 --> 01:25:54,186
like I suggested earlier.

2021
01:25:54,186 --> 01:25:57,266
So, we're almost there but we'll
just leave it with this example.

2022
01:25:57,546 --> 01:26:00,086
But now, I see some
scary looking syntax

2023
01:26:00,306 --> 01:26:02,096
and also one new script tag.

2024
01:26:02,386 --> 01:26:06,176
What are we apparently
loading into memory here?

2025
01:26:06,386 --> 01:26:07,636
Yeah, jQuery.

2026
01:26:07,996 --> 01:26:12,176
So, jQuery is a super, super
popular library for JavaScript,

2027
01:26:12,176 --> 01:26:14,876
so popular that many
people confuse JavaScript

2028
01:26:14,876 --> 01:26:17,326
with jQuery itself and
they say, "I know jQuery,"

2029
01:26:17,326 --> 01:26:20,266
when really they know JavaScript
and they also know jQuery,

2030
01:26:20,456 --> 01:26:22,406
but they're not alternatives
to one another.

2031
01:26:22,406 --> 01:26:24,646
What jQuery does
is it allows you

2032
01:26:24,646 --> 01:26:27,666
to dramatically simplify the
amount and the complexity

2033
01:26:27,666 --> 01:26:31,056
of code that you need to write
because some very smart people,

2034
01:26:31,056 --> 01:26:34,976
one in particular, has spent
a number of years now building

2035
01:26:34,976 --> 01:26:37,966
up a corpus of code that just
makes everyone's life easier.

2036
01:26:37,966 --> 01:26:38,936
And it's all open source.

2037
01:26:38,936 --> 01:26:39,586
You can read through it.

2038
01:26:39,586 --> 01:26:40,936
It's thousands of lines long,

2039
01:26:41,216 --> 01:26:43,666
but for our purposes let's just
focus on some of the highlights

2040
01:26:43,666 --> 01:26:44,496
and some of the features

2041
01:26:44,716 --> 01:26:47,646
that we'll see commonly
throughout any library you might

2042
01:26:47,646 --> 01:26:48,706
use for this first project

2043
01:26:48,706 --> 01:26:50,476
or really desktop
development in general.

2044
01:26:50,816 --> 01:26:53,376
So, there turns out
there's a dollar sign

2045
01:26:53,646 --> 01:26:55,936
which is a popular
aspect of jQuery.

2046
01:26:56,036 --> 01:26:58,386
What does the dollar
sign represent in jQuery?

2047
01:26:59,516 --> 01:27:02,956
[ Pause ]

2048
01:27:03,456 --> 01:27:07,136
What special significance
does the dollar sign have

2049
01:27:07,136 --> 01:27:07,836
in JavaScript?

2050
01:27:07,836 --> 01:27:09,956
>> It's a selector.

2051
01:27:10,026 --> 01:27:10,796
>> It's a selector.

2052
01:27:10,796 --> 01:27:14,516
So, it is but let's focus not
so much on its functionality

2053
01:27:14,516 --> 01:27:15,566
but just syntactically.

2054
01:27:16,336 --> 01:27:16,486
What--

2055
01:27:16,486 --> 01:27:17,946
>> Syntactic sure.

2056
01:27:18,076 --> 01:27:19,366
>> Is it syntactic sure?

2057
01:27:19,526 --> 01:27:21,886
Oh, it kind of is
but it's not even--

2058
01:27:21,996 --> 01:27:23,076
I'm not even sure
I'd call it that.

2059
01:27:23,566 --> 01:27:26,786
It is just a valid
symbol for a variable.

2060
01:27:27,166 --> 01:27:29,896
So, whereas in some languages
dollar sign has special meaning,

2061
01:27:29,896 --> 01:27:32,656
like in PHP it demarks an
actual variable's beginning

2062
01:27:32,806 --> 01:27:35,226
or in some languages
you just can't use it,

2063
01:27:35,226 --> 01:27:37,206
you can't have a dollar
sign in a variable's name.

2064
01:27:37,206 --> 01:27:38,416
JavaScript doesn't care.

2065
01:27:38,416 --> 01:27:40,026
You can absolutely
have a dollar sign

2066
01:27:40,026 --> 01:27:41,246
as the name of your variable.

2067
01:27:41,466 --> 01:27:44,336
Now, jQuery, the folks who
wrote it just realized, "Oh,

2068
01:27:44,336 --> 01:27:46,966
this would be kind of sexy if we
just started using dollar sign

2069
01:27:46,966 --> 01:27:50,386
to represent our
class called jQuery."

2070
01:27:50,606 --> 01:27:54,006
But what this really is,
is if I go into my code,

2071
01:27:54,396 --> 01:27:59,176
and this is again dom2.html, for
those who've been using jQuery

2072
01:27:59,176 --> 01:28:01,186
for some time and just
taking it for granted,

2073
01:28:01,376 --> 01:28:02,956
this is equivalent to that.

2074
01:28:03,316 --> 01:28:05,046
There is a-- we'll
call it a class,

2075
01:28:05,286 --> 01:28:07,376
even though it's not quite
a class, called jQuery

2076
01:28:07,786 --> 01:28:09,776
and it takes an argument

2077
01:28:09,836 --> 01:28:11,936
and that argument can
be a CSS selector.

2078
01:28:11,936 --> 01:28:13,306
In this case, it's
the actual name

2079
01:28:13,306 --> 01:28:15,656
of a global variable
document, but that's all it is.

2080
01:28:15,656 --> 01:28:17,006
So, it's not quite
syntactic sugar

2081
01:28:17,006 --> 01:28:18,876
and that it has no fundamental
special significance.

2082
01:28:18,876 --> 01:28:21,226
We humans just view it
as something special.

2083
01:28:21,226 --> 01:28:25,306
All right, so more properly
jQuery is a function

2084
01:28:25,306 --> 01:28:27,166
and there's a hell of a
lot of functionality built

2085
01:28:27,166 --> 01:28:29,006
into that one particular
function

2086
01:28:29,266 --> 01:28:31,306
and among the things it
does, and let's go back

2087
01:28:31,306 --> 01:28:33,516
to the common case of
having dollar signs,

2088
01:28:34,036 --> 01:28:37,376
is it wraps traditional
DOM nodes.

2089
01:28:37,576 --> 01:28:39,556
So, all of those rectangles
we've been talking about,

2090
01:28:39,796 --> 01:28:43,176
jQuery, wraps them in the sense
of making them a little wider

2091
01:28:43,176 --> 01:28:45,126
and a little taller and
adding more properties

2092
01:28:45,126 --> 01:28:46,296
and more methods to them.

2093
01:28:46,486 --> 01:28:47,796
On the end of the day, inside

2094
01:28:47,796 --> 01:28:49,246
of it is still the
original rectangle,

2095
01:28:49,466 --> 01:28:51,786
but they've simplified the
means by which you can talk

2096
01:28:51,786 --> 01:28:54,046
to that rectangle from the tree.

2097
01:28:54,446 --> 01:28:57,826
So, dollar sign, open paren,
closed paren document takes

2098
01:28:57,826 --> 01:28:59,826
that document node from
the top of the tree

2099
01:28:59,966 --> 01:29:01,466
and just gives it
more functionality,

2100
01:29:01,466 --> 01:29:02,546
more power, if you will.

2101
01:29:02,906 --> 01:29:05,866
Dot ready is a shorthand
way of saying,

2102
01:29:06,076 --> 01:29:09,726
no matter how big this web page
is, no matter how many lines

2103
01:29:09,726 --> 01:29:13,526
of HTML there are, only
call the following function

2104
01:29:13,526 --> 01:29:15,756
when the entire page
has been loaded top

2105
01:29:15,756 --> 01:29:16,706
to bottom, left to right.

2106
01:29:17,576 --> 01:29:21,086
So, what this means is that this
line of code can now be anywhere

2107
01:29:21,346 --> 01:29:24,956
in our page, in the head, in
the body, in another file,

2108
01:29:24,956 --> 01:29:26,426
it doesn't matter whatsoever.

2109
01:29:26,576 --> 01:29:28,596
That means wait until
the entirety

2110
01:29:28,596 --> 01:29:30,226
of the page is literally ready.

2111
01:29:30,556 --> 01:29:33,116
So, what am I passing
to the ready method?

2112
01:29:33,506 --> 01:29:36,386
So, the ready method expects
an argument whose data type is

2113
01:29:36,386 --> 01:29:39,026
apparently a function
pointer, so to speak.

2114
01:29:39,026 --> 01:29:40,766
It expects a function
as its argument.

2115
01:29:41,146 --> 01:29:42,346
And now what am I doing?

2116
01:29:42,346 --> 01:29:44,006
It's an anonymous function
'cause I don't care what the

2117
01:29:44,006 --> 01:29:47,206
thing is called, it just needs
to exist and be callable.

2118
01:29:47,566 --> 01:29:49,866
Open curly brace, and
it's a little messy

2119
01:29:49,866 --> 01:29:53,826
but here is the other curly
brace closed parenthesis.

2120
01:29:53,826 --> 01:29:55,256
So, it's starting to get
a little hard to read,

2121
01:29:55,256 --> 01:29:57,966
but notice open paren and closed
paren, so those are balanced.

2122
01:29:58,396 --> 01:30:01,976
Open paren, open curly,
closed curly, closed paren.

2123
01:30:02,536 --> 01:30:05,406
So everything else is inside
of this anonymous function.

2124
01:30:05,596 --> 01:30:07,316
What is inside of this
anonymous function?

2125
01:30:07,316 --> 01:30:10,656
It turns out I'm doing the same
kind of trick in the next line.

2126
01:30:10,656 --> 01:30:13,066
Dollar sign "sharp demo".

2127
01:30:13,756 --> 01:30:15,666
So those of you familiar
very well

2128
01:30:15,836 --> 01:30:17,486
with CSS, this represents what?

2129
01:30:18,356 --> 01:30:22,346
The CSS selector for the
odd node whose ID is demo.

2130
01:30:22,346 --> 01:30:26,956
So the hash sign means give
me the node whose ID is demo.

2131
01:30:27,166 --> 01:30:29,546
If you instead had dot demo,
that means give me the node

2132
01:30:29,546 --> 01:30:31,006
that has a class of demo,

2133
01:30:31,206 --> 01:30:33,006
and there's some other
selectors as well.

2134
01:30:33,006 --> 01:30:35,946
But this one means give me the
one node call whose ID is demo.

2135
01:30:36,516 --> 01:30:38,546
Dot submit, they've
simplified the wording,

2136
01:30:38,836 --> 01:30:39,986
and jQuery does more than this.

2137
01:30:39,986 --> 01:30:41,456
But rather than call
it onsubmit,

2138
01:30:41,456 --> 01:30:42,546
it's just called submit.

2139
01:30:42,986 --> 01:30:46,066
And what does the submit
function expect as its argument?

2140
01:30:47,086 --> 01:30:49,826
It expects its own function,
an anonymous function,

2141
01:30:49,996 --> 01:30:54,426
but it's kind of tuck away and
call only when what happens?

2142
01:30:56,196 --> 01:30:59,526
That element's submit
handler is needed.

2143
01:31:00,026 --> 01:31:02,766
So, this is just a
third and final way

2144
01:31:02,816 --> 01:31:05,956
of associating an
action, an event handler,

2145
01:31:05,956 --> 01:31:09,366
a function with an event,
like form submission.

2146
01:31:09,686 --> 01:31:10,586
So what happens next?

2147
01:31:10,586 --> 01:31:13,326
Finally, it's boring again,
alert, hello, so and so.

2148
01:31:13,856 --> 01:31:19,416
And in fact, I'm cheating
here or I'm mixing my syntax.

2149
01:31:19,946 --> 01:31:23,636
What should this line 11 really
be by going to that code?

2150
01:31:23,636 --> 01:31:26,646
Let me open up notepad
again, open up DOM2.

2151
01:31:27,286 --> 01:31:29,476
And based on that
lesson learned,

2152
01:31:30,746 --> 01:31:34,216
what can I actually
change this to?

2153
01:31:36,876 --> 01:31:41,306
Dollar sign and hash name.

2154
01:31:41,916 --> 01:31:43,686
So that's what I mean in part

2155
01:31:43,686 --> 01:31:47,706
by jQuery simplifying
otherwise fairly verbose code.

2156
01:31:48,106 --> 01:31:52,166
Document.getElementById
can literally be summarized

2157
01:31:52,166 --> 01:31:53,306
as dollar sign.

2158
01:31:53,456 --> 01:31:57,186
Because the jQuery
function dollar sign knows

2159
01:31:57,186 --> 01:31:58,686
that when it's passed
an argument,

2160
01:31:58,876 --> 01:32:01,106
that's not a global
variable like document

2161
01:32:01,256 --> 01:32:03,756
which just gets immediately
wrapped with a bigger rectangle

2162
01:32:03,956 --> 01:32:05,456
when it realizes, "Oh,
this is a string."

2163
01:32:05,456 --> 01:32:08,206
But the string starts
with a hash sign,

2164
01:32:08,536 --> 01:32:10,466
it knows that that
means the rest

2165
01:32:10,466 --> 01:32:13,626
of the word is the ID
for a node in my DOM.

2166
01:32:14,076 --> 01:32:16,246
So, here again, it's just
how jQuery simplifies

2167
01:32:16,246 --> 01:32:18,406
or like even though at first
glance it absolutely looks more

2168
01:32:18,406 --> 01:32:21,626
cryptic, but really, it's
ultimately saving us time.

2169
01:32:22,096 --> 01:32:25,196
And again, we could factor out
that code further into a JS file

2170
01:32:25,396 --> 01:32:31,286
so that it doesn't even appear
anywhere in our raw HTML.

2171
01:32:32,516 --> 01:32:36,436
[ Inaudible Remark ]

2172
01:32:36,936 --> 01:32:37,886
Good question.

2173
01:32:37,886 --> 01:32:39,556
Is it required to
have a unique ID?

2174
01:32:39,556 --> 01:32:43,426
It is an error of
syntax to you--

2175
01:32:43,426 --> 01:32:46,976
for you to give two elements
in a web page the same ID.

2176
01:32:47,016 --> 01:32:48,276
[ Inaudible Remark ]

2177
01:32:48,276 --> 01:32:52,396
You might get back--
I don't know offhand.

2178
01:32:52,396 --> 01:32:56,706
You might get back an
array of two or more nodes

2179
01:32:57,136 --> 01:32:59,366
but I think it's fair to say,

2180
01:32:59,366 --> 01:33:01,646
and I think the spec probably
says the behavior is undefined,

2181
01:33:01,646 --> 01:33:03,046
certainly for a JavaScript
library.

2182
01:33:03,146 --> 01:33:03,886
But I don't know offhand.

2183
01:33:04,366 --> 01:33:06,356
Other questions?

2184
01:33:06,426 --> 01:33:06,906
OK.

2185
01:33:07,076 --> 01:33:09,076
[ Inaudible Remark ]

2186
01:33:09,136 --> 01:33:10,506
No longer--

2187
01:33:11,016 --> 01:33:12,176
[ Inaudible Remark ]

2188
01:33:12,176 --> 01:33:14,366
It's not quite that.

2189
01:33:14,366 --> 01:33:16,506
It's just-- this is
literally the honor system.

2190
01:33:16,506 --> 01:33:18,846
Like, for the web to work,
all of us have to agree

2191
01:33:18,846 --> 01:33:21,836
on some rules, and one of
those rules is do not screw up

2192
01:33:21,836 --> 01:33:25,356
and give two elements in
a web page the same ID.

2193
01:33:25,596 --> 01:33:27,796
And if you do, we're not
sure what's going to happen.

2194
01:33:27,796 --> 01:33:28,716
At least, I'm not sure.

2195
01:33:28,716 --> 01:33:30,036
There might be some
formal definition.

2196
01:33:30,036 --> 01:33:31,966
I'll look it up later, tonight.

2197
01:33:32,016 --> 01:33:33,816
[ Inaudible Remark ]

2198
01:33:33,816 --> 01:33:34,646
That's fine.

2199
01:33:34,646 --> 01:33:36,676
If you have two elements
with the same class,

2200
01:33:36,676 --> 01:33:39,236
you'll get back an array and
the following function will be

2201
01:33:39,236 --> 01:33:40,916
applied to that array
effectively.

2202
01:33:41,316 --> 01:33:42,386
Even though it's
not quite an array,

2203
01:33:42,386 --> 01:33:44,126
it's in a wrapper
that jQuery returns.

2204
01:33:45,586 --> 01:33:48,116
OK. All right, so, not bad.

2205
01:33:48,116 --> 01:33:50,916
But thus far, all we're doing
is manipulating DOM elements.

2206
01:33:50,916 --> 01:33:54,086
It would be nice to start
introducing some functionality.

2207
01:33:54,416 --> 01:33:56,626
So why don't we go ahead
and introduce a bit

2208
01:33:56,626 --> 01:33:58,246
of storage capability.

2209
01:33:58,316 --> 01:34:01,246
So, where we left off,
we had this thing here.

2210
01:34:01,596 --> 01:34:03,616
And let's jump ahead to--

2211
01:34:03,826 --> 01:34:06,086
I'm getting much better
with this-- local storage.

2212
01:34:06,326 --> 01:34:10,606
So, where can you store
information in a browser

2213
01:34:10,796 --> 01:34:12,536
when programming in JavaScript?

2214
01:34:13,676 --> 01:34:15,256
Some of you might know
from past experience,

2215
01:34:15,256 --> 01:34:17,226
or now that you know
JavaScript runs client side,

2216
01:34:17,226 --> 01:34:19,276
you have very few
options to begin with.

2217
01:34:19,496 --> 01:34:21,086
In window.

2218
01:34:21,086 --> 01:34:23,286
So there's this global
object called window

2219
01:34:23,286 --> 01:34:25,046
that in theory you
can store data in.

2220
01:34:25,456 --> 01:34:28,806
But if that window closes, for
instance, the browser quits,

2221
01:34:28,806 --> 01:34:30,926
what happens to any variables
you've tucked away there?

2222
01:34:32,696 --> 01:34:33,656
They disappear.

2223
01:34:33,946 --> 01:34:36,256
And this is what a lot
of popular libraries do.

2224
01:34:36,256 --> 01:34:38,276
They'll tuck important
stuff in the window object.

2225
01:34:38,276 --> 01:34:39,126
It's effectively putting--

2226
01:34:39,126 --> 01:34:40,566
making something
a global variable,

2227
01:34:40,886 --> 01:34:42,166
but it's not persistent.

2228
01:34:42,166 --> 01:34:43,156
So where else can you put it?

2229
01:34:44,016 --> 01:34:45,776
The-- obviously, the answer
is going to be local storage.

2230
01:34:45,776 --> 01:34:48,856
But leading up to local storage,
where else can you put it?

2231
01:34:49,116 --> 01:34:51,586
Cookies. So, you can
actually write JavaScript code

2232
01:34:51,586 --> 01:34:54,176
to plant cookies on the user's
computer that didn't come

2233
01:34:54,176 --> 01:34:56,576
from the server, they came from
your local JavaScript code.

2234
01:34:56,716 --> 01:34:58,926
But what's the downside
of using cookies?

2235
01:34:59,166 --> 01:35:01,166
[ Inaudible Remark ]

2236
01:35:01,316 --> 01:35:04,466
Correct. There's a size limit,
which is generally pretty small

2237
01:35:04,696 --> 01:35:08,796
and they also can sometimes
be disabled by users.

2238
01:35:09,066 --> 01:35:11,336
They might not persist as
long as intended if you're

2239
01:35:11,336 --> 01:35:12,806
in an incognito mode
and the like.

2240
01:35:12,806 --> 01:35:15,266
So there're a number of reasons
where cookies get tripped off.

2241
01:35:15,266 --> 01:35:17,036
And we're not going to
solve all of those problems

2242
01:35:17,036 --> 01:35:19,326
but those are a couple
of barriers.

2243
01:35:20,046 --> 01:35:21,596
What else?

2244
01:35:21,886 --> 01:35:23,826
If you have a server,
you could just put it

2245
01:35:23,826 --> 01:35:24,956
in a database certainly.

2246
01:35:24,956 --> 01:35:26,746
But maybe that's not ideal,
especially if you're trying

2247
01:35:26,746 --> 01:35:28,666
to make a mobile
app that is fast

2248
01:35:29,256 --> 01:35:33,106
by using local data
as much as possible.

2249
01:35:33,366 --> 01:35:35,936
So it turns out that local
storage is a relatively new

2250
01:35:35,936 --> 01:35:38,916
feature, popular in HTML
5, that gives you access

2251
01:35:39,226 --> 01:35:41,876
to another global variable,
really inside the window,

2252
01:35:41,876 --> 01:35:44,206
that is called localStorage,
capital S.

2253
01:35:44,486 --> 01:35:47,066
And it has a few methods
associated with it,

2254
01:35:47,406 --> 01:35:49,336
among which are clear,
which means just clear

2255
01:35:49,336 --> 01:35:52,276
out anything I've put
there already, getItem,

2256
01:35:52,276 --> 01:35:55,766
which means give me the value
of an item with a certain key.

2257
01:35:55,766 --> 01:36:00,676
So getItem takes one argument, a
string, which is the identifier

2258
01:36:00,736 --> 01:36:02,496
of whatever you put there.

2259
01:36:02,746 --> 01:36:05,556
So, for those familiar,
localStorage is a hash table

2260
01:36:05,556 --> 01:36:08,816
or it's a dictionary
or it's any number--

2261
01:36:08,816 --> 01:36:10,376
an associative array
can be though

2262
01:36:10,376 --> 01:36:12,336
of as any number
of these things.

2263
01:36:13,036 --> 01:36:15,366
RemoveItem does the
opposite of setItem

2264
01:36:15,366 --> 01:36:18,396
because setItem takes two
arguments, a key and a value,

2265
01:36:18,396 --> 01:36:20,036
and it stores it
locally in the browser.

2266
01:36:20,036 --> 01:36:21,996
The upside of which is
if you close the window,

2267
01:36:21,996 --> 01:36:24,396
quit the browser, and
don't clear the history

2268
01:36:24,396 --> 01:36:26,136
in the computer-- in
the browser entirely,

2269
01:36:26,136 --> 01:36:27,956
it's still going
to be there later.

2270
01:36:27,956 --> 01:36:29,176
So why might this be useful?

2271
01:36:29,406 --> 01:36:31,706
Storing things like your address
book for auto completion,

2272
01:36:31,706 --> 01:36:33,676
storing things like
your inbox potentially,

2273
01:36:33,676 --> 01:36:36,226
if it's a mail application,
storing a nontrivial amount

2274
01:36:36,226 --> 01:36:38,696
of data for easy ready access.

2275
01:36:38,976 --> 01:36:42,296
So let's take a quick look at
an example involving storage.

2276
01:36:42,296 --> 01:36:46,656
So if we go back to today's
sample code in storage.html,

2277
01:36:46,656 --> 01:36:51,286
I have apparently visited
this page zero times.

2278
01:36:52,116 --> 01:36:56,326
All right, if I dismiss this
alert, reload this page,

2279
01:36:57,486 --> 01:37:00,776
I have now visited this
page one time before.

2280
01:37:01,396 --> 01:37:02,926
All right, can you guess
where this is going?

2281
01:37:02,926 --> 01:37:03,686
Reload the page.

2282
01:37:03,946 --> 01:37:04,976
Two times before.

2283
01:37:05,096 --> 01:37:06,726
But we just cited
any number of ways

2284
01:37:06,726 --> 01:37:08,346
where we could be
storing the number two

2285
01:37:08,346 --> 01:37:09,756
and then the number
three and number four.

2286
01:37:09,756 --> 01:37:12,526
It could be in a var, a
variable in the web page itself.

2287
01:37:12,556 --> 01:37:14,036
So this isn't all
that interesting.

2288
01:37:14,226 --> 01:37:16,056
But let me go ahead and
copy the URL so I don't have

2289
01:37:16,056 --> 01:37:16,996
to remember what it was,

2290
01:37:17,346 --> 01:37:21,036
open a new browser
window, save, ooh, three.

2291
01:37:21,366 --> 01:37:22,906
It actually remembered
this time.

2292
01:37:22,906 --> 01:37:24,036
Let's play with fire.

2293
01:37:24,236 --> 01:37:27,696
Quit the browser, reload
it, visit it again.

2294
01:37:27,836 --> 01:37:29,096
Four times.

2295
01:37:29,286 --> 01:37:30,646
So something is persisting.

2296
01:37:30,646 --> 01:37:33,846
And it turns out it's relatively
easy to actually implement this.

2297
01:37:33,846 --> 01:37:36,446
If we look at the source
of this page, I really kind

2298
01:37:36,446 --> 01:37:38,926
of cut some corners on the
aesthetics of the page.

2299
01:37:38,926 --> 01:37:40,836
There's nothing actually
there other than code.

2300
01:37:41,076 --> 01:37:44,016
If we go in here and scroll
down to the bottom of the page,

2301
01:37:44,286 --> 01:37:46,346
notice that the HTML
is super simple.

2302
01:37:46,536 --> 01:37:48,606
We've got a title,
a head and a body,

2303
01:37:48,606 --> 01:37:51,906
and then another HTML attribute,
not the only way to do this.

2304
01:37:51,906 --> 01:37:55,126
And again, this is kind of a
regression to the messier way

2305
01:37:55,126 --> 01:37:57,206
but it keeps the code
super simple and the focus

2306
01:37:57,206 --> 01:37:58,406
on the new stuff for now.

2307
01:37:58,736 --> 01:38:01,796
What happens when the
body is loaded apparently?

2308
01:38:02,836 --> 01:38:04,266
Call the greet function.

2309
01:38:04,266 --> 01:38:06,636
So onload is like onsubmit
but it's when the body

2310
01:38:06,636 --> 01:38:07,836
of the page is loaded.

2311
01:38:07,836 --> 01:38:10,256
So now, if we look up
here, we have a bunch

2312
01:38:10,256 --> 01:38:11,826
of lines of JavaScript codes.

2313
01:38:11,826 --> 01:38:14,076
It's a little more complex but
notice, there's not much more

2314
01:38:14,076 --> 01:38:16,066
in the head, just that
familiar meta tag.

2315
01:38:16,326 --> 01:38:18,806
And now, the function called
greet, what does it do?

2316
01:38:19,126 --> 01:38:20,646
So, a little new syntax here.

2317
01:38:20,906 --> 01:38:23,706
So there's a few ways to do
this, but a really rigorous way

2318
01:38:23,706 --> 01:38:27,226
to check whether or not a
variable exists in JavaScript is

2319
01:38:27,226 --> 01:38:30,006
to take the symbol's name,
in this case, localStorage,

2320
01:38:30,006 --> 01:38:33,486
capital S, pass it
through the typeof operator

2321
01:38:33,486 --> 01:38:35,506
and typeof is literally going

2322
01:38:35,506 --> 01:38:42,466
to return a string whose value
is a number or string or bool

2323
01:38:42,716 --> 01:38:47,106
or undefined if that variable
has not yet been defined or set.

2324
01:38:47,476 --> 01:38:48,946
So I'm literally
checking for that.

2325
01:38:48,946 --> 01:38:51,826
If the type of local
storage is "undefined",

2326
01:38:52,266 --> 01:38:55,516
then what is the implication?

2327
01:38:56,956 --> 01:38:58,616
Or rather, is not undefined.

2328
01:38:58,836 --> 01:38:59,636
Not undefined.

2329
01:39:00,156 --> 01:39:01,706
But it looks like
I made a typo here.

2330
01:39:02,106 --> 01:39:03,786
Not equals equals.

2331
01:39:03,786 --> 01:39:06,336
It feels like there's one too
many equals for most languages.

2332
01:39:07,116 --> 01:39:09,556
But it turns out that
JavaScript, like some languages,

2333
01:39:09,556 --> 01:39:12,876
does actually support
different numbers

2334
01:39:12,966 --> 01:39:15,526
of equal signs in
certain context.

2335
01:39:15,526 --> 01:39:18,676
Let me open the same
file with TextEdit just

2336
01:39:18,676 --> 01:39:21,216
so I can tweak some
things, zoom in here.

2337
01:39:21,346 --> 01:39:23,406
You probably would have
expected me to type this

2338
01:39:23,406 --> 01:39:28,896
and that it would actually work
correctly too in all cases.

2339
01:39:29,316 --> 01:39:31,916
But it's not quite as
rigorous as doing this.

2340
01:39:32,266 --> 01:39:35,276
Does anyone know what it means
when you do not equals equals,

2341
01:39:35,646 --> 01:39:37,466
or if easier to answer
the other way,

2342
01:39:37,876 --> 01:39:39,906
what this would mean,
equals equal equals?

2343
01:39:42,161 --> 01:39:44,161
[ Inaudible Remark ]

2344
01:39:44,306 --> 01:39:47,746
Same instance-- not
quite same instance

2345
01:39:47,956 --> 01:39:51,786
but same value and same type.

2346
01:39:53,106 --> 01:39:55,276
So, JavaScript, as
I've mentioned earlier,

2347
01:39:55,276 --> 01:39:57,846
does have disparate types even
though you, the programmer,

2348
01:39:57,846 --> 01:39:59,896
don't specify them when
declaring variables.

2349
01:39:59,896 --> 01:40:01,976
You don't say string, you don't
say int, you don't say float.

2350
01:40:02,106 --> 01:40:04,966
You just have access to
those disparate data types.

2351
01:40:06,306 --> 01:40:08,516
When I check the
type of localStorage

2352
01:40:08,516 --> 01:40:12,046
and I say not equals
equals, this is making sure

2353
01:40:12,046 --> 01:40:17,716
that not only is the return
value of typeof not equal

2354
01:40:17,716 --> 01:40:22,786
to "string", it is also
at least a string itself.

2355
01:40:24,076 --> 01:40:26,496
This is in retrospect
a bad example

2356
01:40:26,496 --> 01:40:29,626
because there is no instance
in which this could go awry.

2357
01:40:29,986 --> 01:40:32,396
A better example, and I'll
think of one in the future,

2358
01:40:32,586 --> 01:40:35,356
is that if I were checking the
return value of some function

2359
01:40:35,356 --> 01:40:37,996
and it could return
null for instance

2360
01:40:38,216 --> 01:40:39,816
but maybe it could return zero,

2361
01:40:40,346 --> 01:40:42,576
those two values
are often conflated.

2362
01:40:42,916 --> 01:40:45,236
If you want to check a
function's return value

2363
01:40:45,406 --> 01:40:48,666
that could return null or could
return zero, you can't rely

2364
01:40:48,716 --> 01:40:51,316
on equals equals because
they will implicitly cast

2365
01:40:51,636 --> 01:40:52,266
to one another.

2366
01:40:52,696 --> 01:40:55,426
Null is the same as zero.

2367
01:40:55,686 --> 01:40:57,586
But if you want to check
that the return value

2368
01:40:57,586 --> 01:41:01,446
of some function is really,
really null or really,

2369
01:41:01,446 --> 01:41:04,446
really zero, not just
some implicit equivalent,

2370
01:41:04,836 --> 01:41:06,566
then you use equals
equals equals.

2371
01:41:06,566 --> 01:41:07,626
Or if you want to
check the opposite,

2372
01:41:07,626 --> 01:41:09,436
you use bang equals equals.

2373
01:41:09,716 --> 01:41:11,086
So I apologize, this
wasn't a good way

2374
01:41:11,086 --> 01:41:12,026
to introduce that story.

2375
01:41:13,096 --> 01:41:13,886
We'll fix it in the video.

2376
01:41:14,316 --> 01:41:16,316
[ Inaudible Remark ]

2377
01:41:16,616 --> 01:41:19,756
Combining multiple
characteristics let's say, sure,

2378
01:41:19,756 --> 01:41:21,906
of the values you're
checking, both their--

2379
01:41:21,906 --> 01:41:24,636
of the storage container
you're checking,

2380
01:41:24,636 --> 01:41:25,876
both its value and its type.

2381
01:41:26,116 --> 01:41:29,106
Long story short, getting into
this habit is not a bad thing

2382
01:41:29,106 --> 01:41:31,156
because it means your code
will never be vulnerable

2383
01:41:31,156 --> 01:41:32,796
to those random corner cases

2384
01:41:33,016 --> 01:41:35,356
where maybe two values could
cast to the same thing.

2385
01:41:35,356 --> 01:41:36,846
The number one could
cast to true.

2386
01:41:37,106 --> 01:41:39,826
The number two could cast
to true, but true is true

2387
01:41:39,826 --> 01:41:42,116
if you use the identity
operator in this way.

2388
01:41:42,706 --> 01:41:44,846
OK, let's not get
too hung up on that

2389
01:41:44,846 --> 01:41:45,856
and instead move on to this.

2390
01:41:45,856 --> 01:41:48,646
Same trick as before but let's
just take for granted now

2391
01:41:48,646 --> 01:41:53,506
that if typeof localStorage
open bracket closed quote--

2392
01:41:53,506 --> 01:41:56,986
"counter" is undefined,
what's the implication?

2393
01:41:56,986 --> 01:41:58,276
So let's try to rewind this.

2394
01:41:58,506 --> 01:42:02,396
This just says if the type of
localStorage is not undefined,

2395
01:42:02,906 --> 01:42:06,216
that is equivalent logically to
saying is localStorage defined.

2396
01:42:07,016 --> 01:42:12,046
Because if it is, I'm using a
modern browser, supports HTML 5

2397
01:42:12,046 --> 01:42:14,546
and therefore clearly
supports localStorage.

2398
01:42:14,796 --> 01:42:16,916
This one line of code is only
checking does your browser

2399
01:42:16,916 --> 01:42:17,876
support localStorage.

2400
01:42:18,346 --> 01:42:20,816
Second line is checking
not whether localStorage is

2401
01:42:20,816 --> 01:42:23,276
supported but specifically
whether what is the case?

2402
01:42:23,936 --> 01:42:29,386
Is there a variable called
counter inside of localStorage?

2403
01:42:29,386 --> 01:42:31,996
So localStorage is again a
hash table, a dictionary,

2404
01:42:31,996 --> 01:42:34,866
an associative array, a key
value storage mechanism,

2405
01:42:34,866 --> 01:42:36,326
whatever you-- however
you want to think of it.

2406
01:42:36,606 --> 01:42:40,886
This is just saying if we have
never before defined a value for

2407
01:42:40,886 --> 01:42:42,386
"counter", what do I want

2408
01:42:42,386 --> 01:42:43,876
to initialize its
value to apparently?

2409
01:42:44,886 --> 01:42:46,636
I want to just give
it a value of zero.

2410
01:42:46,636 --> 01:42:48,456
So this just means if this is
the first time the person has

2411
01:42:48,456 --> 01:42:50,236
ever visited the
site, obviously,

2412
01:42:50,236 --> 01:42:52,676
localStorage isn't even
going to know that I care

2413
01:42:52,676 --> 01:42:56,186
about a variable called
counter so let's make that exist

2414
01:42:56,186 --> 01:42:57,566
and assign it the value of zero.

2415
01:42:57,826 --> 01:42:59,206
Then let's trigger that alert.

2416
01:42:59,206 --> 01:43:02,416
You have visited this many
times, and then what do I do?

2417
01:43:02,776 --> 01:43:04,156
Increment it again.

2418
01:43:04,156 --> 01:43:07,416
So this just ensures that that
one time corner case is covered.

2419
01:43:07,626 --> 01:43:10,186
Else down here, your browser
does not support localStorage,

2420
01:43:10,186 --> 01:43:12,716
it's what happens if it
is in fact undefined.

2421
01:43:13,116 --> 01:43:15,916
So, where am I actually
storing the value?

2422
01:43:16,126 --> 01:43:19,706
Well, I'm not actually
using setItem or getItem,

2423
01:43:19,706 --> 01:43:23,346
it actually suffices just
to use this array notation.

2424
01:43:23,666 --> 01:43:26,776
So, this is because
localStorage itself is an object

2425
01:43:26,776 --> 01:43:28,446
and we can treat it as
though it's an array

2426
01:43:28,446 --> 01:43:29,966
with the square bracket
notation,

2427
01:43:29,966 --> 01:43:31,236
syntactic sugar if you will.

2428
01:43:31,676 --> 01:43:35,086
But in this case here,
we're setting the value,

2429
01:43:35,086 --> 01:43:37,356
and in this case here we're
setting the value as well

2430
01:43:37,356 --> 01:43:40,206
by just doing a traditional
plus plus.

2431
01:43:40,986 --> 01:43:43,386
All right, so why
might that be useful?

2432
01:43:43,596 --> 01:43:46,386
Store and user preferences
potentially or other things

2433
01:43:46,386 --> 01:43:48,526
where you might want to remember
some details about the user

2434
01:43:48,796 --> 01:43:50,676
without having to
query the server again

2435
01:43:50,676 --> 01:43:52,916
and again for the same answer.

2436
01:43:54,026 --> 01:43:54,696
All right.

2437
01:43:55,146 --> 01:43:57,146
[ Inaudible Remark ]

2438
01:43:57,276 --> 01:43:59,406
If you switch the
browser in what sense?

2439
01:44:00,516 --> 01:44:03,336
[ Inaudible Remark ]

2440
01:44:03,836 --> 01:44:04,896
Oh, good question.

2441
01:44:04,896 --> 01:44:05,846
That won't work.

2442
01:44:05,846 --> 01:44:07,076
This is browser specific.

2443
01:44:07,076 --> 01:44:08,776
So if I visit the
page in Chrome,

2444
01:44:09,016 --> 01:44:10,586
I get localStorage
within Chrome.

2445
01:44:10,586 --> 01:44:11,796
If I then open Safari,

2446
01:44:11,946 --> 01:44:15,556
Safari has its own
localStorage container for me.

2447
01:44:15,556 --> 01:44:17,396
It does not propagate
across browsers.

2448
01:44:17,846 --> 01:44:17,946
Yeah.

2449
01:44:18,306 --> 01:44:21,416
>> Are there limits to how much
data you can store locally?

2450
01:44:21,486 --> 01:44:22,466
>> There is.

2451
01:44:22,466 --> 01:44:24,116
I don't remember
the value offhand.

2452
01:44:24,116 --> 01:44:26,496
It's much bigger than a
cookie but not infinite.

2453
01:44:26,496 --> 01:44:27,866
If that helps.

2454
01:44:28,736 --> 01:44:30,966
That will be my other
mental note to check

2455
01:44:30,966 --> 01:44:33,826
and as RJ is probably
reminding me now.

2456
01:44:33,826 --> 01:44:33,936
Yeah.

2457
01:44:34,516 --> 01:44:38,576
[ Inaudible Remark ]

2458
01:44:39,076 --> 01:44:42,786
Yeah. So I believe one of the
various settings in Chrome,

2459
01:44:42,786 --> 01:44:47,736
let's see, clear browsing data,
one of these should apply to--

2460
01:44:47,826 --> 01:44:50,776
it's probably the one that's
simplified as empty the cache.

2461
01:44:50,876 --> 01:44:52,766
That probably includes
localStorage.

2462
01:44:53,566 --> 01:44:54,166
Good question.

2463
01:44:54,366 --> 01:44:55,716
And then you can
programmatically clear

2464
01:44:55,716 --> 01:44:57,006
by calling the clear method.

2465
01:44:57,976 --> 01:44:58,756
All right.

2466
01:44:59,176 --> 01:45:01,446
So let's introduce one other,

2467
01:45:01,996 --> 01:45:04,366
let's one particularly cool
feature that we can leverage

2468
01:45:04,366 --> 01:45:06,866
in a mobile context by
introducing this guy.

2469
01:45:07,036 --> 01:45:09,786
So it turns out, and
this is retro if you were

2470
01:45:09,886 --> 01:45:13,266
around when the internet was
popular with Netscape Navigator,

2471
01:45:13,356 --> 01:45:16,816
the navigator global object
similar in screen to window

2472
01:45:16,956 --> 01:45:19,916
in document has special
properties or methods associated

2473
01:45:19,916 --> 01:45:22,326
with it and navigator in
this case, navigator refers

2474
01:45:22,326 --> 01:45:25,156
to the browser itself as opposed
to the window or the document

2475
01:45:25,156 --> 01:45:26,076
that you're actually viewing.

2476
01:45:26,616 --> 01:45:28,076
Dot geolocation is an API,

2477
01:45:28,606 --> 01:45:30,856
an application programming
interface, a set of functions,

2478
01:45:30,856 --> 01:45:33,046
maybe properties that you
the programmer can use

2479
01:45:33,046 --> 01:45:34,046
to talk to the browser.

2480
01:45:34,316 --> 01:45:36,346
Inside of this API is
at least one method

2481
01:45:36,346 --> 01:45:38,606
of interest today,
getCurrentPosition.

2482
01:45:38,906 --> 01:45:41,686
Now this is a method that we
can call just like getItem

2483
01:45:41,686 --> 01:45:44,396
or setItem but it works
a little differently

2484
01:45:44,396 --> 01:45:47,026
that it doesn't just give me
back the value right away.

2485
01:45:47,696 --> 01:45:50,456
Finding the user's location is
what's called an asynchronous

2486
01:45:50,966 --> 01:45:54,656
problem to solve, right, because
it might take a few seconds

2487
01:45:54,656 --> 01:45:58,036
to turn on the WiFi antennas
or the GPS radio and figure

2488
01:45:58,036 --> 01:46:01,136
out where the user is and one
of the key design features

2489
01:46:01,136 --> 01:46:03,966
of JavaScript is that as much
as possible, things are--

2490
01:46:03,966 --> 01:46:06,706
should be asynchronous so that
when something is happening

2491
01:46:06,706 --> 01:46:08,466
over here, it doesn't
block something else

2492
01:46:08,466 --> 01:46:09,136
from happening here.

2493
01:46:09,136 --> 01:46:11,746
You don't want the whole browser
to lock up while you're trying

2494
01:46:11,746 --> 01:46:13,136
to figure out the
user's location.

2495
01:46:13,136 --> 01:46:15,196
It'd be nice if they could
keep doing other things.

2496
01:46:15,546 --> 01:46:18,236
So the means by which you can
implement that design goal is

2497
01:46:18,236 --> 01:46:20,506
by way of what are
called callback functions

2498
01:46:20,506 --> 01:46:21,666
and we've seen these already

2499
01:46:21,926 --> 01:46:24,436
but now we can use them
even more deliberately

2500
01:46:24,826 --> 01:46:27,626
with this geolocation
example so let me go back

2501
01:46:27,826 --> 01:46:32,556
to my directory listing and
go into geolocation0.html

2502
01:46:33,106 --> 01:46:34,836
and I actually don't
see anything yet

2503
01:46:34,836 --> 01:46:36,956
but what do I see
apparently in my browser.

2504
01:46:37,426 --> 01:46:41,526
Local host wants to use
your computer's location

2505
01:46:41,856 --> 01:46:44,986
so my computer's
location physically, GPS,

2506
01:46:45,236 --> 01:46:46,626
latitude and longitude.

2507
01:46:46,926 --> 01:46:49,726
Thankfully, Chrome is giving
me a little bit of defense here

2508
01:46:49,726 --> 01:46:53,616
and not just telling a random
website even though it happens

2509
01:46:53,616 --> 01:46:56,396
to be running on local host
where I am in the world.

2510
01:46:56,396 --> 01:46:58,636
I mean this could get down
to a pretty precise location.

2511
01:46:58,636 --> 01:47:00,416
You don't want just to
give that information

2512
01:47:00,416 --> 01:47:02,136
out to anyone that asks for it.

2513
01:47:02,436 --> 01:47:05,576
So if I go over here, I
can deny or allow this.

2514
01:47:05,576 --> 01:47:08,656
Well, let's allow this and
now let's see what happens.

2515
01:47:08,896 --> 01:47:11,026
Apparently, this page's
purpose in life is just

2516
01:47:11,026 --> 01:47:13,896
to tell me my GPS coordinates
with some degree of confidence.

2517
01:47:13,896 --> 01:47:17,926
So we're at 42.3, negative 71.1.

2518
01:47:17,926 --> 01:47:20,356
So if we look that up on
Google Maps, we'll probably end

2519
01:47:20,356 --> 01:47:22,286
up in roughly that location.

2520
01:47:22,286 --> 01:47:24,286
Let's actually see if
we can search Google

2521
01:47:24,286 --> 01:47:25,616
by GPS coordinates.

2522
01:47:25,616 --> 01:47:29,666
Let's go to the actual
maps.google.com.

2523
01:47:29,976 --> 01:47:35,016
Search here and indeed, we
are-- turn on satellite view.

2524
01:47:36,476 --> 01:47:41,846
My laptop is underneath
the grass there

2525
01:47:41,846 --> 01:47:43,736
and that's actually--
well, it's true.

2526
01:47:43,736 --> 01:47:44,466
We are in the basement.

2527
01:47:44,676 --> 01:47:46,136
So, it's pretty darn accurate.

2528
01:47:46,306 --> 01:47:47,806
So how in the world
does my laptop,

2529
01:47:47,806 --> 01:47:51,386
which does not have a GPS
radio, I'm not using my phone

2530
01:47:51,386 --> 01:47:52,476
or anything in this context,

2531
01:47:52,926 --> 01:47:55,666
how does Google know
where my laptop is?

2532
01:47:57,056 --> 01:47:58,916
So WiFi, how do you mean?

2533
01:47:58,916 --> 01:48:03,536
>> The WiFi has its
own [inaudible].

2534
01:48:03,536 --> 01:48:05,896
>> OK. So these-- there are
WiFi antennas, there's one, two,

2535
01:48:05,896 --> 01:48:10,556
three, four, five, six of them
in this room alone at least

2536
01:48:10,816 --> 01:48:14,296
and those WiFi radios all have
unique identifiers of some sort.

2537
01:48:14,296 --> 01:48:16,956
They have the SSID to which we
connect like Harvard University

2538
01:48:16,956 --> 01:48:18,946
and they other metadata
associated with them.

2539
01:48:18,946 --> 01:48:22,386
For years, there was a technique
known as wardriving which was

2540
01:48:22,436 --> 01:48:24,616
like literally people in
cars driving around trying

2541
01:48:24,616 --> 01:48:25,746
to find open access--

2542
01:48:25,776 --> 01:48:27,896
WiFi access points
for various reasons.

2543
01:48:28,116 --> 01:48:31,086
And companies among them Google
do, do this too to figure

2544
01:48:31,086 --> 01:48:33,406
out just by driving
around for instance

2545
01:48:33,406 --> 01:48:36,326
where do you hear Harvard
University and they carry

2546
01:48:36,326 --> 01:48:39,866
around the GPS radio with
that computer program to say,

2547
01:48:39,936 --> 01:48:43,306
"I heard Harvard University
at these GPS coordinates."

2548
01:48:43,306 --> 01:48:45,116
But the world has gotten
even more sophisticated

2549
01:48:45,116 --> 01:48:46,266
than 10 years ago.

2550
01:48:46,606 --> 01:48:48,926
Nowadays, we don't need
cars driving around campus.

2551
01:48:48,926 --> 01:48:51,506
Who is doing all of
the snooping for us?

2552
01:48:52,736 --> 01:48:54,526
Like all of us idiots, right?

2553
01:48:54,526 --> 01:48:57,186
Every one of us that has one of
these cellphones in our pockets

2554
01:48:57,186 --> 01:49:00,656
that has a GPS radio
and also has WiFi or 3G

2555
01:49:00,656 --> 01:49:04,326
or LTE access can be phoning
home to Apple in this case,

2556
01:49:04,326 --> 01:49:06,426
or if you have an Android
phone to Google in that case,

2557
01:49:06,426 --> 01:49:08,866
if you have a Windows phone,
to Microsoft in that case,

2558
01:49:09,226 --> 01:49:10,406
telling the world when you're

2559
01:49:10,406 --> 01:49:12,566
on the Harvard University
network what your GPS

2560
01:49:12,566 --> 01:49:13,176
coordinates are.

2561
01:49:13,176 --> 01:49:14,516
When you're on the
Starbucks network,

2562
01:49:14,516 --> 01:49:16,046
what its GPS coordinates are.

2563
01:49:16,306 --> 01:49:18,206
So all of us are
effectively phoning home

2564
01:49:18,206 --> 01:49:21,296
and training these big companies
to know with some degree

2565
01:49:21,296 --> 01:49:23,336
of probability where we are.

2566
01:49:23,336 --> 01:49:25,236
And clearly, it works
pretty well.

2567
01:49:25,236 --> 01:49:28,226
But that's because we've all
been helping them for some time.

2568
01:49:28,226 --> 01:49:30,436
So putting aside the fear
factor, let's just focus

2569
01:49:30,436 --> 01:49:32,536
on the positive which
is what we can now do

2570
01:49:32,686 --> 01:49:33,786
with this functionality.

2571
01:49:33,956 --> 01:49:35,946
So apparently, I, any random guy

2572
01:49:35,986 --> 01:49:38,906
on the internet making a web
page who knows some JavaScript

2573
01:49:38,906 --> 01:49:41,396
and has a web server can
write JavaScript code

2574
01:49:41,596 --> 01:49:43,836
that asks the user for
his or her location

2575
01:49:43,836 --> 01:49:45,016
and then does something with it.

2576
01:49:45,016 --> 01:49:46,436
In this case, totally
underwhelming

2577
01:49:46,436 --> 01:49:49,346
and that we just prompted the
user with their GPS coordinates.

2578
01:49:49,626 --> 01:49:51,066
But what could you
use the location

2579
01:49:51,066 --> 01:49:53,346
for to be more a
sexier application?

2580
01:49:53,376 --> 01:49:58,956
>> Show location on the map.

2581
01:49:59,096 --> 01:50:01,036
>> You can show the user's
location on the map, right?

2582
01:50:01,036 --> 01:50:03,806
I kind of implemented that
myself manually by going

2583
01:50:03,806 --> 01:50:05,596
to Google Maps and
pasting it in.

2584
01:50:05,596 --> 01:50:07,136
We could do that
programmatically

2585
01:50:07,266 --> 01:50:09,916
by using the Google Maps API.

2586
01:50:09,916 --> 01:50:11,046
The website could tell me

2587
01:50:11,046 --> 01:50:13,396
where the nearest Starbucks
is based on my location.

2588
01:50:13,396 --> 01:50:15,806
It could tell me what the news
is for Cambridge, Massachusetts

2589
01:50:15,806 --> 01:50:18,206
or the weather for Cambridge,
Massachusetts 'cause it knows

2590
01:50:18,206 --> 01:50:19,006
where my coordinates are.

2591
01:50:19,006 --> 01:50:21,416
So, there's a number of things
they can just lower the bar

2592
01:50:21,416 --> 01:50:23,696
to giving me things that
I might be interested in.

2593
01:50:23,696 --> 01:50:26,236
So, it's a pretty
compelling user feature albeit

2594
01:50:26,236 --> 01:50:28,286
at utter cost of privacy.

2595
01:50:28,286 --> 01:50:31,216
So, how do we go
about leveraging this?

2596
01:50:31,216 --> 01:50:32,246
Let's look at the source code.

2597
01:50:32,456 --> 01:50:34,896
This is geolocation0.html.

2598
01:50:35,186 --> 01:50:37,996
Notice again, the body of
the page is super simple

2599
01:50:37,996 --> 01:50:41,206
with an on-load attribute
whose value is geolocate,

2600
01:50:41,596 --> 01:50:43,216
arbitrary named function
that I wrote,

2601
01:50:43,216 --> 01:50:44,496
could have called
it whatever we want.

2602
01:50:44,836 --> 01:50:46,606
Open paren and close
paren means call it.

2603
01:50:47,066 --> 01:50:49,876
And now if we look at the head
of my page where the script is,

2604
01:50:50,046 --> 01:50:52,296
again I could be putting
this code in a separate file

2605
01:50:52,296 --> 01:50:53,686
but I've kept in the HTML file,

2606
01:50:53,686 --> 01:50:55,396
so all the demos
are self-contained.

2607
01:50:55,746 --> 01:50:57,906
Notice that we have
two functions.

2608
01:50:58,206 --> 01:51:00,366
One is literally called callback

2609
01:51:01,066 --> 01:51:03,206
and it takes an argument
called position.

2610
01:51:03,476 --> 01:51:04,716
Let's come back to
that in a moment,

2611
01:51:05,076 --> 01:51:07,346
one is called geolocate,
no arguments.

2612
01:51:07,346 --> 01:51:08,116
What does it do?

2613
01:51:08,386 --> 01:51:10,066
If first checks if the type

2614
01:51:10,066 --> 01:51:13,126
of navigator.geolocation
is not undefined.

2615
01:51:13,566 --> 01:51:15,896
So, what does it mean if
geolocation is not undefined?

2616
01:51:16,016 --> 01:51:17,836
[ Pause ]

2617
01:51:17,836 --> 01:51:20,346
The browser supports it which
means we can proceed to use it

2618
01:51:20,346 --> 01:51:23,146
without throwing one of those
red error messages where like

2619
01:51:23,196 --> 01:51:24,966
"Symbol not found" or
something like that.

2620
01:51:25,286 --> 01:51:28,046
So navigator.geolocation.get

2621
01:51:28,046 --> 01:51:30,666
currentposition and then
I'm passing in what?

2622
01:51:32,186 --> 01:51:35,696
Callback, but notice, there's
a close paren around callback

2623
01:51:36,036 --> 01:51:37,056
but what is there not?

2624
01:51:37,776 --> 01:51:38,596
There's not a pair

2625
01:51:38,596 --> 01:51:41,056
of parentheses right
next to callback itself.

2626
01:51:41,056 --> 01:51:42,966
So, am I calling callback here?

2627
01:51:44,026 --> 01:51:47,046
So, no, I'm just passing
its address effectively.

2628
01:51:47,046 --> 01:51:49,536
I'm passing a reference
to that function

2629
01:51:49,826 --> 01:51:52,556
to the function called
getCurrentPosition

2630
01:51:52,556 --> 01:51:57,056
so that he can call
callback when he's ready.

2631
01:51:57,376 --> 01:51:59,146
Now, why might it
take some time?

2632
01:51:59,146 --> 01:52:00,226
Well, we just saw an example.

2633
01:52:00,226 --> 01:52:03,366
If the browser prompts me,
the human, to decide yes

2634
01:52:03,366 --> 01:52:04,586
or no, share my location.

2635
01:52:04,676 --> 01:52:07,316
That could be a minute later or
a second later, an hour later.

2636
01:52:07,516 --> 01:52:09,376
You don't want-- necessarily
want the whole web page

2637
01:52:09,376 --> 01:52:11,616
to lockup while you're
waiting for the user's input.

2638
01:52:11,846 --> 01:52:16,166
So instead, you do this
asynchronous trick whereby this

2639
01:52:16,166 --> 01:52:18,956
function getCurrentPosition
will return immediately.

2640
01:52:19,246 --> 01:52:21,066
Close paren, semicolon, called,

2641
01:52:21,606 --> 01:52:24,956
but it will call my callback
function when it's ready

2642
01:52:24,956 --> 01:52:27,426
to give me the GPS coordinates
which could be a second,

2643
01:52:27,426 --> 01:52:28,706
a minute, an hour later.

2644
01:52:29,206 --> 01:52:31,886
That function when called takes
an argument called position,

2645
01:52:32,316 --> 01:52:33,456
it turns out and I figured this

2646
01:52:33,456 --> 01:52:34,766
out by reading the
documentation.

2647
01:52:35,046 --> 01:52:38,756
Inside of the position as
returned by this function,

2648
01:52:38,756 --> 01:52:43,036
as passed by this function is
another property called coords,

2649
01:52:43,036 --> 01:52:43,706
coordinates.

2650
01:52:44,056 --> 01:52:46,106
Inside of which more
specifically is a latitude

2651
01:52:46,106 --> 01:52:48,146
coordinate and a
longitude coordinate.

2652
01:52:48,686 --> 01:52:50,836
So by accessing latitude
and longitude

2653
01:52:50,836 --> 01:52:53,506
and just concatenating them
with a comma and a space,

2654
01:52:53,826 --> 01:52:57,216
I get that very simple prompt
that we saw a moment ago.

2655
01:52:57,966 --> 01:52:59,556
So, it's as simple as that.

2656
01:52:59,966 --> 01:53:01,626
But we can refine
this a little bit.

2657
01:53:01,626 --> 01:53:04,726
Let me open up geolocation
one which looks

2658
01:53:04,726 --> 01:53:06,346
like it has the same behavior

2659
01:53:06,636 --> 01:53:08,706
but if I view the
page source this time,

2660
01:53:09,276 --> 01:53:11,576
what have I done differently?

2661
01:53:12,196 --> 01:53:16,766
I'm trying-- I'm sort of
learning from past mistakes

2662
01:53:16,766 --> 01:53:19,416
or reapplying past improvements.

2663
01:53:20,516 --> 01:53:23,696
[ Pause ]

2664
01:53:24,196 --> 01:53:26,726
What's different fundamentally
about this example?

2665
01:53:27,936 --> 01:53:30,966
It's not undefined, so
this we had before though.

2666
01:53:31,046 --> 01:53:33,046
[ Inaudible Remark ]

2667
01:53:33,076 --> 01:53:36,126
Yes, so I have a lambda--
an anonymous function,

2668
01:53:36,126 --> 01:53:37,666
a nameless function where?

2669
01:53:37,956 --> 01:53:40,846
Here. So, what function
name did I used to use?

2670
01:53:41,726 --> 01:53:43,616
Literally callback, it could
have been called anything.

2671
01:53:43,616 --> 01:53:46,586
I just called it a callback but
if it's a callback whose purpose

2672
01:53:46,586 --> 01:53:49,436
in life is to get called
once and only one location

2673
01:53:49,436 --> 01:53:53,306
and never again, why am I
wasting time confusing me

2674
01:53:53,306 --> 01:53:55,696
and subsequent readers of the
code with multiple functions?

2675
01:53:55,836 --> 01:53:56,986
Just put it where I want it.

2676
01:53:57,376 --> 01:54:00,566
Now, notice function open
paren, close paren position,

2677
01:54:00,736 --> 01:54:02,276
so I'm still taking
the same arguments.

2678
01:54:02,276 --> 01:54:05,376
I'm just not bothering to give
it a name then I call the alert

2679
01:54:05,376 --> 01:54:06,616
and I have to be careful.

2680
01:54:06,616 --> 01:54:09,556
Notice I have open paren,
open paren, close paren,

2681
01:54:09,556 --> 01:54:10,396
so those are balanced.

2682
01:54:10,566 --> 01:54:13,666
Open curly brace, so down
here, I have to remember

2683
01:54:13,666 --> 01:54:16,236
to close the curly brace,
close the close paren.

2684
01:54:16,236 --> 01:54:18,256
So, that's the only price
you pay in just a bit

2685
01:54:18,256 --> 01:54:20,406
of syntactic potential
for confusion.

2686
01:54:20,936 --> 01:54:24,556
All right, pretty cool what
you can do with the browser.

2687
01:54:25,916 --> 01:54:26,936
Questions?

2688
01:54:27,016 --> 01:54:28,456
[ Pause ]

2689
01:54:28,456 --> 01:54:31,516
All right, let's do
one last big feature

2690
01:54:31,516 --> 01:54:32,796
that will take us home here.

2691
01:54:32,796 --> 01:54:37,276
So here, I have an
example called ajax0.html.

2692
01:54:37,276 --> 01:54:41,406
I said a moment ago, Ajax is
asynchronous JavaScript and XML.

2693
01:54:41,506 --> 01:54:43,796
Though that's kind of a white
lie these days 'cause it doesn't

2694
01:54:43,796 --> 01:54:46,216
always and if ever
use XML these days.

2695
01:54:46,786 --> 01:54:49,826
What does it do, Ajax, for us?

2696
01:54:50,516 --> 01:54:52,516
[ Pause ]

2697
01:54:53,016 --> 01:54:56,000
[ Inaudible Remark ]

2698
01:54:57,096 --> 01:54:59,746
And so it lets asynchronously
load data

2699
01:54:59,746 --> 01:55:01,866
from servers or asynchronously.

2700
01:55:01,866 --> 01:55:02,886
So, both actually.

2701
01:55:03,266 --> 01:55:05,026
So, the A means asynchronously.

2702
01:55:05,026 --> 01:55:06,336
You can run it in both modes.

2703
01:55:06,336 --> 01:55:08,306
And it looks like this
which is a wonderful picture

2704
01:55:08,306 --> 01:55:09,356
which makes this super simple.

2705
01:55:09,926 --> 01:55:12,386
Oh, it's actually pretty
simple once we look at it.

2706
01:55:12,636 --> 01:55:14,526
So, here we go.

2707
01:55:14,526 --> 01:55:16,966
Ajax is just a technique.

2708
01:55:17,126 --> 01:55:20,066
It is the application of
built-in features of JavaScript

2709
01:55:20,436 --> 01:55:23,646
to programmatically get
more data from a web page

2710
01:55:23,776 --> 01:55:25,606
after the original
web page is loaded.

2711
01:55:25,786 --> 01:55:27,426
So, we've seen this for years.

2712
01:55:27,426 --> 01:55:28,826
Thanks to things
like Google Maps.

2713
01:55:29,046 --> 01:55:30,346
For instance, when
you click and drag

2714
01:55:30,346 --> 01:55:33,206
on a Google Map before
you see more of the Earth,

2715
01:55:33,486 --> 01:55:36,576
you often see little
gray tiles, gray squares,

2716
01:55:36,786 --> 01:55:39,006
before those portions of
the map have downloaded.

2717
01:55:39,226 --> 01:55:42,156
But thanks to Ajax
the code Google wrote

2718
01:55:42,156 --> 01:55:45,216
in JavaScript can ask
Google.com, "Give me more tiles.

2719
01:55:45,216 --> 01:55:45,876
Give me more tiles."

2720
01:55:45,876 --> 01:55:48,206
Sometimes that takes a few
seconds if the network is slow

2721
01:55:48,406 --> 01:55:50,746
and that's why those tiles
only gradually appear.

2722
01:55:50,976 --> 01:55:54,056
Twitter, and Facebook, and
Gmail, Gchat, all of these tools

2723
01:55:54,086 --> 01:55:56,016
with that you might--
that you might use

2724
01:55:56,206 --> 01:55:58,756
that update themselves
overtime are using Ajax

2725
01:55:58,756 --> 01:56:00,206
to go get more data.

2726
01:56:00,516 --> 01:56:03,386
Rewind 10, 15 years when you
had sites like Map Quest,

2727
01:56:03,386 --> 01:56:05,756
which still exist and I
think you still use it

2728
01:56:05,756 --> 01:56:06,386
in the same way.

2729
01:56:06,386 --> 01:56:08,066
When you click the Up
arrow, or the Down,

2730
01:56:08,066 --> 01:56:09,586
or the Left to the Right
arrow to move the map,

2731
01:56:09,936 --> 01:56:11,706
it would reload the
whole darn page.

2732
01:56:11,706 --> 01:56:13,326
That's before the days of Ajax.

2733
01:56:13,326 --> 01:56:15,606
So, Ajax let's us
create the illusion

2734
01:56:15,606 --> 01:56:17,456
of the dynamically
changing content

2735
01:56:17,706 --> 01:56:20,276
without having the force
reload some whole page.

2736
01:56:20,576 --> 01:56:20,846
All right.

2737
01:56:20,846 --> 01:56:23,076
So, here's a picture
that makes it less clear.

2738
01:56:23,396 --> 01:56:26,036
So, we have a user interface
named "Little Browser,"

2739
01:56:26,206 --> 01:56:27,946
use some JavaScript in step one.

2740
01:56:28,326 --> 01:56:29,766
And this is actually
worth knowing

2741
01:56:29,766 --> 01:56:32,836
or at least talking away
this feature of JavaScript

2742
01:56:32,836 --> 01:56:36,796
that makes this possible
is called an XML HTTP

2743
01:56:36,866 --> 01:56:37,966
request object.

2744
01:56:38,186 --> 01:56:39,956
So, much like we
saw Geolocation,

2745
01:56:39,956 --> 01:56:43,566
much like we saw
the local storage,

2746
01:56:43,866 --> 01:56:45,796
this is another key
word introduced

2747
01:56:45,796 --> 01:56:48,256
to JavaScript a few
years ago that allows us

2748
01:56:48,256 --> 01:56:52,066
to make these asynchronous
calls back to the server.

2749
01:56:52,066 --> 01:56:53,536
All right.

2750
01:56:53,936 --> 01:56:56,726
Once you have instantiated
one of those objects

2751
01:56:56,726 --> 01:56:59,616
as we'll see you send an HTP
request, whoop, to the server.

2752
01:56:59,616 --> 01:57:00,286
Can't do that anymore.

2753
01:57:00,816 --> 01:57:04,746
Send an HTP to the server, it
responds years ago with XML data

2754
01:57:04,746 --> 01:57:06,126
and occasionally still today.

2755
01:57:06,286 --> 01:57:09,446
And then your JavaScript code
parses this thing called XML.

2756
01:57:09,446 --> 01:57:12,996
If unfamiliar, XML is
like home made HTML.

2757
01:57:12,996 --> 01:57:15,146
It's make your own tags,
make your own attributes,

2758
01:57:15,346 --> 01:57:18,506
but there's a simple format
these days called JSON, J-S-O-N,

2759
01:57:18,506 --> 01:57:20,806
which is more popular
and lighter weight.

2760
01:57:21,446 --> 01:57:24,326
So, when you get this XML back,
you then do something with it.

2761
01:57:24,736 --> 01:57:30,866
So, this is a cryptic five-step
way of explaining how Google

2762
01:57:30,866 --> 01:57:32,516
and Facebook and
Gchat and Twitter go

2763
01:57:32,516 --> 01:57:34,446
about dynamically
updating their DOMS

2764
01:57:34,596 --> 01:57:35,926
without reloading a whole page.

2765
01:57:35,926 --> 01:57:38,576
They're just making more HTP
requests across the wire.

2766
01:57:38,836 --> 01:57:41,606
And, we can probably see this.

2767
01:57:41,606 --> 01:57:43,736
What might be-- Let's
see if I can pick a site

2768
01:57:43,736 --> 01:57:46,606
that without logging in
would do this for us.

2769
01:57:47,356 --> 01:57:51,356
Let's-- What is a site
that could do this.

2770
01:57:51,556 --> 01:57:54,716
Google live stream?

2771
01:57:55,256 --> 01:57:57,406
No. That doesn't work.

2772
01:58:00,336 --> 01:58:02,716
Twitter? Yeah.

2773
01:58:03,146 --> 01:58:07,286
Who's the fam-- Who is famous--
well, no, no, that won't work.

2774
01:58:07,286 --> 01:58:07,846
We need someone.

2775
01:58:08,286 --> 01:58:11,586
Almost every site on the
internet does this today.

2776
01:58:11,586 --> 01:58:12,526
And I can't think of one.

2777
01:58:13,516 --> 01:58:17,386
[ Inaudible Remark ]

2778
01:58:17,886 --> 01:58:19,846
OK. What's trending [inaudible].

2779
01:58:20,676 --> 01:58:23,976
And let's draw something
acceptable?

2780
01:58:24,051 --> 01:58:26,051
[ Inaudible Remark ]

2781
01:58:26,086 --> 01:58:29,136
Oh, only I am seeing
the material.

2782
01:58:29,506 --> 01:58:29,866
There you go.

2783
01:58:29,866 --> 01:58:30,906
All right.

2784
01:58:31,026 --> 01:58:31,826
What's happening right now?

2785
01:58:31,826 --> 01:58:34,736
What's popular today?

2786
01:58:34,916 --> 01:58:35,306
News.

2787
01:58:36,226 --> 01:58:38,226
[ Laughter ]

2788
01:58:38,436 --> 01:58:39,046
All right.

2789
01:58:39,046 --> 01:58:41,066
In five hours ago or
three minutes ago--

2790
01:58:41,126 --> 01:58:43,056
well, let's see there
must be some aspects here.

2791
01:58:43,586 --> 01:58:44,466
Let's see if we can cheat.

2792
01:58:45,516 --> 01:58:47,546
[ Pause ]

2793
01:58:48,046 --> 01:58:48,836
This is a horrible demo.

2794
01:58:49,016 --> 01:58:50,386
[ Laughter ]

2795
01:58:50,386 --> 01:58:52,866
OK. So, let me fake the story

2796
01:58:53,006 --> 01:58:55,436
and then I'll come
better equipped.

2797
01:58:55,436 --> 01:58:57,026
I will stop doing
spontaneous demos.

2798
01:58:57,026 --> 01:58:57,656
That's what I'll do.

2799
01:58:57,926 --> 01:59:00,906
So, what I did was I opened the
same tool that we opened earlier

2800
01:59:00,906 --> 01:59:04,766
which is Chrome's Inspector
tab and again Safari and IE

2801
01:59:04,766 --> 01:59:06,576
and Firefox have the
same kinds of tools.

2802
01:59:06,856 --> 01:59:08,046
And-- Oh, there we go.

2803
01:59:08,046 --> 01:59:09,376
And I clicked on the Network tab

2804
01:59:09,376 --> 01:59:14,206
because as I expected we would
have [laughter] this little row

2805
01:59:14,206 --> 01:59:14,926
appear here.

2806
01:59:14,926 --> 01:59:15,936
And if we waited long enough--

2807
01:59:15,936 --> 01:59:18,976
so, what happened is apparently
Twitter's JavaScript code is

2808
01:59:18,976 --> 01:59:21,546
making an Ajax call every
half a minute, minute,

2809
01:59:21,546 --> 01:59:23,466
however often that's going
to flash on the screen.

2810
01:59:23,656 --> 01:59:26,966
And if I click Hover on this,
you can see that the URL

2811
01:59:26,966 --> 01:59:31,896
that was requested was this long
one here, twitter.com/i/search.

2812
01:59:32,176 --> 01:59:34,216
And that is because
Twitter instantiated one

2813
01:59:34,216 --> 01:59:38,066
of those XML HTP request objects
and just made an HTP request

2814
01:59:38,066 --> 01:59:40,246
from the client's
side JavaScript code

2815
01:59:40,246 --> 01:59:42,426
that I downloaded
a minute ago back

2816
01:59:42,426 --> 01:59:44,856
to there servers presumably
checking for more tweets.

2817
01:59:44,856 --> 01:59:46,426
And there might not
be new tweets,

2818
01:59:46,426 --> 01:59:48,666
but they're at least pulling
their servers to check

2819
01:59:48,666 --> 01:59:50,206
for some amount of time.

2820
01:59:50,426 --> 01:59:52,546
And indeed, if I
click on this request,

2821
01:59:52,766 --> 01:59:54,546
we won't go into much
detail here on this

2822
01:59:54,576 --> 01:59:56,836
but you can see all
of the HTTP headers.

2823
01:59:57,056 --> 01:59:58,936
You can see exactly what
came back in their response.

2824
01:59:59,946 --> 02:00:02,086
Apparently, there
were more items.

2825
02:00:02,086 --> 02:00:03,626
There's a key called
has more items.

2826
02:00:03,626 --> 02:00:05,296
So Twitter is actually
using JSON,

2827
02:00:05,296 --> 02:00:07,936
JavaScript Object
Notation instead of XML.

2828
02:00:08,226 --> 02:00:10,806
But any side, if you are
a Facebook user, Gmail,

2829
02:00:10,896 --> 02:00:13,526
Gchat user, tonight and you
use Chrome, log-in into one

2830
02:00:13,526 --> 02:00:16,496
of those websites and
just watch the network tab

2831
02:00:16,796 --> 02:00:17,916
of the Chrome inspector

2832
02:00:18,006 --> 02:00:20,206
and you'll see pretty
constant traffic.

2833
02:00:20,206 --> 02:00:22,416
Certainly if there's a busy
side or if you're chatting back

2834
02:00:22,416 --> 02:00:25,556
and forth with friends, you'll
see all of these HTTP requests.

2835
02:00:25,646 --> 02:00:27,336
This is arguably
what makes the web

2836
02:00:27,336 --> 02:00:29,756
or web development really
interesting these days

2837
02:00:29,756 --> 02:00:33,106
and that you can make much, much
more dynamic sites as a result.

2838
02:00:33,486 --> 02:00:36,836
So this site as we'll see
allows me to get a stock quote.

2839
02:00:36,836 --> 02:00:39,136
Let me type in something
like GOOG

2840
02:00:39,136 --> 02:00:40,836
which is the ticker
symbol for Google.

2841
02:00:41,376 --> 02:00:44,506
Get quote and there's an
error with the Ajax call.

2842
02:00:44,506 --> 02:00:46,546
So why might this be?

2843
02:00:46,996 --> 02:00:51,546
So let me go back over here
to my-- oh, tsk, tsk, tsk.

2844
02:00:52,096 --> 02:00:54,876
Let's see how to do this.

2845
02:00:56,146 --> 02:00:59,946
Let's open Ajax 0.

2846
02:01:04,176 --> 02:01:07,946
Ah, that's why, typo.

2847
02:01:07,946 --> 02:01:09,176
GOOG, get quote.

2848
02:01:09,686 --> 02:01:10,086
There we go.

2849
02:01:10,566 --> 02:01:12,526
So I renamed the file
earlier and forgot

2850
02:01:12,526 --> 02:01:13,626
to change it in the HTML.

2851
02:01:13,866 --> 02:01:17,206
So, apparently, as of
4:30 p.m. or so today,

2852
02:01:17,236 --> 02:01:20,476
the Google stock price is
869 dollars and 79 cents.

2853
02:01:20,656 --> 02:01:23,476
So I did not know that in
advance though technically I

2854
02:01:23,476 --> 02:01:24,876
could have just hard
coded this I supposed

2855
02:01:24,876 --> 02:01:26,556
after 4:30 p.m. for
a 6:30 class.

2856
02:01:26,966 --> 02:01:29,346
But this was in fact
fetched dynamically

2857
02:01:29,346 --> 02:01:31,776
and if you use the same
demo tomorrow morning,

2858
02:01:31,986 --> 02:01:34,026
you would get a different
answer slightly and certainly

2859
02:01:34,026 --> 02:01:36,556
for other websites, we could
get back different stock quotes.

2860
02:01:36,556 --> 02:01:38,356
So let's see how this is
working underneath the hood.

2861
02:01:38,726 --> 02:01:40,536
If I do the page
source, let's scroll

2862
02:01:40,536 --> 02:01:41,856
down to the easier part first.

2863
02:01:41,856 --> 02:01:43,226
There's some HTML at the bottom

2864
02:01:43,426 --> 02:01:46,396
and it's really just a super
simple form that borrow some

2865
02:01:46,396 --> 02:01:47,956
of the lessons learned
from earlier

2866
02:01:48,116 --> 02:01:49,566
on submit called what function.

2867
02:01:50,816 --> 02:01:52,476
Quote, this is in a
built-in function,

2868
02:01:52,476 --> 02:01:54,376
this is apparently
one I wrote up above

2869
02:01:54,376 --> 02:01:55,346
that we'll look at in a second.

2870
02:01:55,586 --> 02:01:58,346
Return false so that it doesn't
actually submit to the server

2871
02:01:58,796 --> 02:01:59,906
in the traditional way.

2872
02:02:00,196 --> 02:02:02,876
So Ajax is all about
sending data to the server.

2873
02:02:03,076 --> 02:02:06,826
It's just I don't want it to be
submitted via that form per se.

2874
02:02:06,826 --> 02:02:10,966
I want it to be submitted via my
code, my event handler up above.

2875
02:02:11,406 --> 02:02:13,666
So this symbol is an input.

2876
02:02:13,946 --> 02:02:14,956
Autocomplete is off.

2877
02:02:14,956 --> 02:02:17,936
It has an ID of, let's scroll
to the right, "symbol".

2878
02:02:17,936 --> 02:02:19,946
That's probably going
to be useful

2879
02:02:19,946 --> 02:02:23,136
so I can uniquely identify
what the user typed in.

2880
02:02:23,476 --> 02:02:26,276
So let me zoom out and scroll
back up and you're going

2881
02:02:26,276 --> 02:02:27,586
to see some mess of a code.

2882
02:02:27,586 --> 02:02:30,206
And here to jQuery, we'll
make our lives better.

2883
02:02:30,626 --> 02:02:34,926
So at the top of my script tag,
I have a variable called XHR,

2884
02:02:34,926 --> 02:02:38,486
could have called it anything,
XMLHttpRequest initializing it

2885
02:02:38,486 --> 02:02:40,606
to null just so that the
variable exists for me.

2886
02:02:41,316 --> 02:02:43,426
Down here, I have a
function called quote

2887
02:02:43,426 --> 02:02:45,646
with some simple comments
above it to remind me.

2888
02:02:45,986 --> 02:02:48,036
And now, we have kind
of a mess of code

2889
02:02:48,036 --> 02:02:51,066
that again is dramatically
simplified by libraries.

2890
02:02:51,416 --> 02:02:52,756
But I'm going to try

2891
02:02:52,756 --> 02:02:56,466
to instantiate a new
XMLHttpRequest object.

2892
02:02:57,176 --> 02:02:59,226
If something goes wrong,

2893
02:02:59,336 --> 02:03:01,736
something called an exception
is going to be thrown,

2894
02:03:01,946 --> 02:03:05,756
the browser specifically if it
has no idea what this symbol is,

2895
02:03:05,756 --> 02:03:08,586
XMLHttpRequest 'cause
I'm using Netscape 1.0

2896
02:03:08,856 --> 02:03:09,906
or many versions of IE.

2897
02:03:09,906 --> 02:03:13,916
It will throw an exception
that I am prepared to catch.

2898
02:03:14,406 --> 02:03:20,036
If I do catch it, I am going to
reasonably but not definitively

2899
02:03:20,396 --> 02:03:22,126
and assume that it's
what browser.

2900
02:03:22,686 --> 02:03:29,636
Yeah. So there's a lot of this
kind of code on the internet

2901
02:03:29,636 --> 02:03:32,776
because IE 6 and 7, and 8,

2902
02:03:32,776 --> 02:03:35,366
and 9 to some extent have
not always played so nicely

2903
02:03:35,366 --> 02:03:37,906
with certain standards
and all the browsers kind

2904
02:03:37,906 --> 02:03:38,926
of cut corners here and there.

2905
02:03:39,216 --> 02:03:41,556
But this is just an example
of error checking code

2906
02:03:41,556 --> 02:03:43,456
and what jQuery will do for us

2907
02:03:43,456 --> 02:03:46,306
in just a few moments is
collapse all of these messiness

2908
02:03:46,306 --> 02:03:49,086
and all of these care about
what browser the user is using

2909
02:03:49,286 --> 02:03:50,446
into a simple function call.

2910
02:03:50,446 --> 02:03:52,716
But what's really going
underneath the hood is something

2911
02:03:52,716 --> 02:03:53,096
like this.

2912
02:03:53,096 --> 02:03:54,986
So this is raw JavaScript code.

2913
02:03:55,166 --> 02:03:59,176
I proceed to check if the XHR
object is null, then I'm going

2914
02:03:59,176 --> 02:04:01,706
to return in alert saying,
"Ajax is not supported

2915
02:04:01,706 --> 02:04:03,296
in your browser," but
we didn't see that.

2916
02:04:03,646 --> 02:04:06,096
And then down here, I'm going to
do just a little bit more work

2917
02:04:06,696 --> 02:04:08,006
to make this magic happen.

2918
02:04:08,246 --> 02:04:12,036
I'm going to declare a variable
called URL whose value is

2919
02:04:12,206 --> 02:04:16,016
quote.php and it happens
to be written in PHP

2920
02:04:16,016 --> 02:04:17,566
but that's just 'cause
it's a language I know.

2921
02:04:17,566 --> 02:04:19,856
It's-- I'm running it on
a PHP-supported server.

2922
02:04:19,856 --> 02:04:21,466
XAMPP comes with
support for a PHP.

2923
02:04:22,226 --> 02:04:25,466
Question mark symbol equals and
then what am I concatenating

2924
02:04:25,466 --> 02:04:29,776
on is the value of that
URL, its parameter,

2925
02:04:30,746 --> 02:04:32,466
whatever the symbols value is

2926
02:04:32,466 --> 02:04:33,866
that the user typed
into the DOM.

2927
02:04:34,076 --> 02:04:36,976
So the only thing new in this
example besides the exception

2928
02:04:36,976 --> 02:04:38,946
handling stuff is the
fact that I'm using PHP,

2929
02:04:38,946 --> 02:04:41,706
but we're not even going
to look at the PHP code.

2930
02:04:41,706 --> 02:04:45,066
Just know that it's returning
dynamically a price using some

2931
02:04:45,066 --> 02:04:47,976
PHP code, talking to Yahoo
Finance in real time.

2932
02:04:48,516 --> 02:04:50,856
[ Inaudible Remark ]

2933
02:04:51,356 --> 02:04:54,826
Yes. We will simplify all this
code in a moment with jQuery

2934
02:04:54,826 --> 02:04:56,166
to get rid of most
of these lines.

2935
02:04:56,616 --> 02:04:59,846
So the last thing I need to do
is actually contact the server.

2936
02:04:59,846 --> 02:05:01,776
All I've done this far
is create a string,

2937
02:05:01,776 --> 02:05:03,786
a variable that is a URL.

2938
02:05:04,176 --> 02:05:06,346
Now, I need to do
something with that URL.

2939
02:05:06,656 --> 02:05:07,966
So I need these three lines.

2940
02:05:08,316 --> 02:05:12,076
My XHR object which again is my
sort of gateway to the server

2941
02:05:12,076 --> 02:05:13,666
for this feature called Ajax.

2942
02:05:14,656 --> 02:05:18,036
Horrible property name,
onreadystatechange,

2943
02:05:18,416 --> 02:05:19,526
what am I going to call?

2944
02:05:19,766 --> 02:05:21,056
Call my handler function.

2945
02:05:21,266 --> 02:05:23,546
So in a moment, we'll see
a function called handler

2946
02:05:23,766 --> 02:05:26,866
and this is just my way of
saying, "Hey, special object,

2947
02:05:27,056 --> 02:05:29,606
when you change state, when
you turn on, when you turn off,

2948
02:05:29,916 --> 02:05:32,146
call this function so I
can check what's going on,"

2949
02:05:32,236 --> 02:05:33,416
is what that boils down to.

2950
02:05:33,966 --> 02:05:36,906
Open is opening a TCP
connection to the server,

2951
02:05:37,446 --> 02:05:40,256
HTTP specifically connection
using the GET method,

2952
02:05:40,256 --> 02:05:40,816
if familiar.

2953
02:05:40,816 --> 02:05:41,596
If not, don't worry.

2954
02:05:41,896 --> 02:05:42,976
It's the opposite of post

2955
02:05:43,506 --> 02:05:45,906
to this URL making
the call asynchronous.

2956
02:05:46,336 --> 02:05:50,176
Asynchronous means this
function will return immediately

2957
02:05:50,826 --> 02:05:53,976
and handler will get
called when the server,

2958
02:05:54,066 --> 02:05:56,346
if the server eventually
replies.

2959
02:05:57,156 --> 02:05:59,726
By contrast, if we made
this false and said,

2960
02:05:59,726 --> 02:06:02,236
make the open call
synchronous, that would mean

2961
02:06:02,236 --> 02:06:04,406
that this function
open would not return

2962
02:06:04,406 --> 02:06:08,796
until the server answered back
to me which is not what we want.

2963
02:06:08,796 --> 02:06:10,636
We don't want the whole
page to lock up just

2964
02:06:10,636 --> 02:06:11,886
in case the server is slow.

2965
02:06:12,216 --> 02:06:14,836
Finally send null, this means
I have no more arguments,

2966
02:06:14,836 --> 02:06:16,996
no post data, just
send the request.

2967
02:06:17,176 --> 02:06:20,546
So some number of milliseconds,
seconds, minutes, hours later,

2968
02:06:20,936 --> 02:06:23,336
the handler function will
get called because the state

2969
02:06:23,336 --> 02:06:26,176
of this object will change just
because the network responds--

2970
02:06:26,176 --> 02:06:27,776
the server responds
with an answer.

2971
02:06:28,076 --> 02:06:29,076
What does handler do?

2972
02:06:29,306 --> 02:06:30,526
It's pretty straightforward.

2973
02:06:31,146 --> 02:06:33,406
It first checks this and
you would only know this

2974
02:06:33,406 --> 02:06:34,836
from looking in the
documentation.

2975
02:06:35,236 --> 02:06:38,006
If the readyState value
of the object is four.

2976
02:06:38,206 --> 02:06:39,376
So there's literally
a cheat sheet.

2977
02:06:39,426 --> 02:06:40,166
Four is good.

2978
02:06:40,236 --> 02:06:41,916
Four means the whole
thing is done.

2979
02:06:41,916 --> 02:06:44,576
A request went, it came
back, it's been examined

2980
02:06:44,576 --> 02:06:45,626
and it's ready for you.

2981
02:06:45,976 --> 02:06:47,386
If you're in request state four

2982
02:06:47,686 --> 02:06:52,016
and the server's response
was 200, 200 is the opposite

2983
02:06:52,016 --> 02:06:56,066
of something like 404,
403, 401, 500 error codes

2984
02:06:56,066 --> 02:06:57,296
that if you ever
see them are bad.

2985
02:06:57,536 --> 02:07:00,596
200 is when you never see
'cause it's good, literally OK.

2986
02:07:00,886 --> 02:07:03,906
The request worked, then
go ahead and alert the user

2987
02:07:03,906 --> 02:07:07,416
with the window to
xhr.responseText.

2988
02:07:07,416 --> 02:07:08,416
And again, you'd only know this

2989
02:07:08,416 --> 02:07:09,676
from looking at the
documentation.

2990
02:07:10,136 --> 02:07:13,306
responseText is the value of
whatever the server spit out.

2991
02:07:13,476 --> 02:07:16,376
And in this case, all the
server spit out was 800

2992
02:07:16,376 --> 02:07:19,046
and some odd dollars just
the super simple text string.

2993
02:07:19,326 --> 02:07:20,936
In the case of Google
Maps, it would have spit

2994
02:07:20,936 --> 02:07:22,796
out a ping or a JPEG or a GIF.

2995
02:07:23,036 --> 02:07:23,936
In the case of Facebook,

2996
02:07:23,936 --> 02:07:25,376
it would have spit
out a status update.

2997
02:07:25,376 --> 02:07:27,826
In Twitter, it would spit
out a tweet and so forth.

2998
02:07:27,826 --> 02:07:29,866
And in this case, it's
just a stock price.

2999
02:07:30,396 --> 02:07:32,976
So how can we simplify
this code?

3000
02:07:32,976 --> 02:07:37,716
Well, let me go into a
slightly cleaned up version--

3001
02:07:38,226 --> 02:07:38,293
>> Sir?

3002
02:07:38,876 --> 02:07:38,976
>> Yeah?

3003
02:07:39,496 --> 02:07:41,496
[ Inaudible Remark ]

3004
02:07:41,976 --> 02:07:44,376
Oh sure. It was just a
stupid mistake on my part.

3005
02:07:44,406 --> 02:07:48,326
If I go into the
source of ajax0, I'll--

3006
02:07:48,326 --> 02:07:50,836
you'll have to fix this as well
and I'll fix this tonight online

3007
02:07:50,836 --> 02:07:51,806
and re-upload the file.

3008
02:07:51,806 --> 02:07:55,626
I had accidentally called
the file quote1.php,

3009
02:07:56,116 --> 02:07:58,276
but it's actually quote.php.

3010
02:07:58,276 --> 02:07:59,216
I renamed it earlier.

3011
02:08:00,816 --> 02:08:02,456
So I'll fix that permanently.

3012
02:08:02,826 --> 02:08:05,736
Ajax1.html, so here
is a very version

3013
02:08:05,736 --> 02:08:07,806
that we had not looked at, at
source code but you can kind

3014
02:08:07,806 --> 02:08:09,806
of guess that this
is a little better.

3015
02:08:09,956 --> 02:08:13,546
In what sense is this example
about to be better designed?

3016
02:08:14,256 --> 02:08:14,366
Yeah.

3017
02:08:14,546 --> 02:08:17,066
>> They have annoying
alert [inaudible].

3018
02:08:17,236 --> 02:08:19,346
>> Yeah, no annoying alert.

3019
02:08:19,346 --> 02:08:21,406
We're kind of doing something
that approximates the idea

3020
02:08:21,406 --> 02:08:24,446
of what Twitter and Facebook
do is that they update the DOM.

3021
02:08:24,446 --> 02:08:26,696
They change the contents
of the webpage itself

3022
02:08:26,696 --> 02:08:28,576
by inserting new
data dynamically.

3023
02:08:28,796 --> 02:08:32,246
So where I say to be determined,
let's hope that's actually true.

3024
02:08:32,456 --> 02:08:33,536
First, let me look at the source

3025
02:08:33,536 --> 02:08:35,056
and make sure I didn't
mess up the filename.

3026
02:08:35,616 --> 02:08:37,576
It's OK. I did correct
this one earlier.

3027
02:08:38,086 --> 02:08:40,586
So now if I typed
in GOOG, get quote,

3028
02:08:41,896 --> 02:08:44,036
the page is dynamically
updated itself.

3029
02:08:44,076 --> 02:08:46,826
If I reload the page, notice
it goes back to its defaults

3030
02:08:46,826 --> 02:08:48,426
and now let me show
you one other feature

3031
02:08:48,426 --> 02:08:49,756
of Chrome inspector and again,

3032
02:08:50,016 --> 02:08:51,806
different browsers have
this in different forms.

3033
02:08:51,806 --> 02:08:54,836
I'm going to go ahead and
control click or right click

3034
02:08:54,976 --> 02:08:57,886
on the word "determined" or
really anywhere in that area.

3035
02:08:57,886 --> 02:09:00,616
I'm going to click Inspect
Element and notice what happens.

3036
02:09:00,616 --> 02:09:03,666
By default, I'm already
on this elements tab.

3037
02:09:04,266 --> 02:09:06,166
But if I-- I'll zoom
it in a moment,

3038
02:09:06,166 --> 02:09:07,686
if I choose Inspect Element,

3039
02:09:07,906 --> 02:09:12,056
notice that the browser very
helpfully expanded the HTML

3040
02:09:12,056 --> 02:09:16,046
in this inspector tab and
highlighted the actual HTML

3041
02:09:16,656 --> 02:09:18,736
that I ask it to inspect.

3042
02:09:19,446 --> 02:09:22,356
So no matter how messy your
HTML is, which it shouldn't be,

3043
02:09:22,836 --> 02:09:25,476
this inspector shows you
everything beautifully

3044
02:09:25,476 --> 02:09:28,706
hierarchically, essentially
giving you a navigable version

3045
02:09:28,706 --> 02:09:29,316
of the DOM.

3046
02:09:29,316 --> 02:09:32,416
This is the tree and it's
indented exactly as it should be

3047
02:09:32,646 --> 02:09:34,516
to convey the notion
of hierarchy.

3048
02:09:34,926 --> 02:09:36,636
So, watch what happens now.

3049
02:09:36,636 --> 02:09:41,166
It's going to be a little small
so I'm going to do this one.

3050
02:09:41,166 --> 02:09:43,046
I'm going to type in GOOG.

3051
02:09:43,046 --> 02:09:44,506
I'm not going to hit
Enter or submit yet.

3052
02:09:44,506 --> 02:09:48,296
I'm going to scroll down
to the bottom here and now,

3053
02:09:48,296 --> 02:09:51,126
I'm going to hit Enter
while this is on screen

3054
02:09:51,466 --> 02:09:53,816
and what do you expect should
happen to the actual DOM

3055
02:09:53,816 --> 02:09:55,706
which again the inspector
here is showing me?

3056
02:09:55,706 --> 02:09:58,016
It should actually change.

3057
02:09:58,016 --> 02:10:00,976
That rectangle's value should be
changed from "to be determined"

3058
02:10:00,976 --> 02:10:01,976
to 800 dollars something.

3059
02:10:02,506 --> 02:10:03,186
So, here we go.

3060
02:10:03,186 --> 02:10:06,886
Enter, and indeed,
it actually changed.

3061
02:10:07,256 --> 02:10:09,726
So, this probably didn't take
much effort 'cause we're just

3062
02:10:09,726 --> 02:10:11,916
replacing the alert function

3063
02:10:12,246 --> 02:10:14,736
with something slightly
more elegant and indeed,

3064
02:10:14,736 --> 02:10:17,136
if I go into my handler
function, notice,

3065
02:10:17,136 --> 02:10:18,716
there's only one real change.

3066
02:10:19,606 --> 02:10:23,146
I've replaced my alert
line with this guy here,

3067
02:10:23,726 --> 02:10:26,576
document.getElementById
of "price".

3068
02:10:26,576 --> 02:10:27,316
But wait a minute.

3069
02:10:27,446 --> 02:10:29,766
We haven't seen a
price ID before

3070
02:10:30,066 --> 02:10:32,746
but you can probably infer
where is it probably.

3071
02:10:33,316 --> 02:10:38,346
The text, which text.

3072
02:10:40,076 --> 02:10:42,026
The "to be determined".

3073
02:10:42,026 --> 02:10:43,036
So, let's actually go

3074
02:10:43,036 --> 02:10:45,986
to the HTML 'cause I must have
made some other change here--

3075
02:10:46,096 --> 02:10:47,066
oh, interesting.

3076
02:10:47,386 --> 02:10:50,466
So, price colon, it does
say "to be determined"

3077
02:10:50,466 --> 02:10:52,716
and there was a bold-faced
tag but I also wrapped it

3078
02:10:52,716 --> 02:10:55,716
with an inline element, a span
element which is like a div

3079
02:10:55,716 --> 02:10:58,946
but it doesn't force a line
break and I gave it arbitrarily

3080
02:10:58,946 --> 02:11:01,946
but usefully, an ID
at the value of price

3081
02:11:02,596 --> 02:11:06,076
so that I can uniquely
identify that string there.

3082
02:11:06,256 --> 02:11:09,336
So now, up above, let's see
what the rest of this line is.

3083
02:11:09,706 --> 02:11:13,186
getElementById of
price dot innerHTML.

3084
02:11:13,456 --> 02:11:15,006
So, there's different
ways of doing this

3085
02:11:15,006 --> 02:11:17,476
and this is somewhat
of a kludgy approach.

3086
02:11:17,476 --> 02:11:20,546
The right way to do this would
be to create a new text note

3087
02:11:20,736 --> 02:11:24,476
to remove the old text note,
insert or append the text note

3088
02:11:24,676 --> 02:11:26,206
and it would take
three lines of code.

3089
02:11:26,206 --> 02:11:28,326
It actually tends to be slower
at least if you're doing this

3090
02:11:28,326 --> 02:11:30,956
for lots of nodes in a DOM like
a Facebook or a Twitter does.

3091
02:11:31,316 --> 02:11:34,726
InnerHTML literally just
says, "Cram the new content

3092
02:11:34,936 --> 02:11:36,866
where the old HTML should be,"

3093
02:11:36,906 --> 02:11:39,566
without actually parsing
it like DOM objects.

3094
02:11:39,936 --> 02:11:41,556
So, this gets the job done here.

3095
02:11:41,746 --> 02:11:45,956
If I scroll to the right, I'm
just pushing the response text,

3096
02:11:45,956 --> 02:11:50,816
the 800 dollar string into the
innermost HTML of that span

3097
02:11:50,816 --> 02:11:53,866
which is why we saw DOM
element update a moment ago.

3098
02:11:54,146 --> 02:11:56,696
So, if we do it again to
recap now with that context

3099
02:11:56,696 --> 02:11:58,236
and I pre-type in GOOG.

3100
02:11:58,416 --> 02:12:01,046
I don't hit Enter yet, but
I instead scroll down to

3101
02:12:01,046 --> 02:12:02,516
where it says "to
be determined",

3102
02:12:03,166 --> 02:12:05,906
is the span tag going to be
replaced or the bold tag.

3103
02:12:06,516 --> 02:12:11,776
[ Pause ]

3104
02:12:12,276 --> 02:12:12,596
>> Bold tag.

3105
02:12:12,596 --> 02:12:16,156
>> Just the bold tag because
when I uniquely identify the

3106
02:12:16,156 --> 02:12:21,996
span element by its ID called
"price" and change its innerHTML

3107
02:12:22,206 --> 02:12:26,866
that won't blow away the span
tag itself, just its innerHTML

3108
02:12:27,156 --> 02:12:30,176
which is apparently a
bold-faced and a line

3109
02:12:30,176 --> 02:12:31,626
of text "to be determined".

3110
02:12:31,886 --> 02:12:35,156
So, if I hit Enter, sure
enough, that changes.

3111
02:12:35,456 --> 02:12:37,136
It would be somewhat
counterproductive

3112
02:12:37,136 --> 02:12:39,996
if the active updating the
span tag with the unique ID

3113
02:12:39,996 --> 02:12:43,066
of price has the effect of
blowing away that span tag

3114
02:12:43,066 --> 02:12:45,626
with the unique ID 'cause then
I could never update it a second

3115
02:12:45,626 --> 02:12:48,296
time maybe a minute or so
later if I actually did this

3116
02:12:48,296 --> 02:12:49,956
in a loop with the timer.

3117
02:12:50,616 --> 02:12:53,126
All right, let's clean this
up ever so slightly more.

3118
02:12:53,366 --> 02:12:58,066
In ajax2.html, if I
view the source here,

3119
02:12:58,326 --> 02:13:01,846
notice that I've done
a way with quote.php.

3120
02:13:03,216 --> 02:13:07,306
The one thing I don't like about
those previous two demos is

3121
02:13:07,306 --> 02:13:09,006
that it requires that I'd
be running a web server

3122
02:13:09,006 --> 02:13:11,036
that supports PHP
that I have written

3123
02:13:11,036 --> 02:13:14,076
in advance a file called
quote1.php and that three,

3124
02:13:14,076 --> 02:13:16,686
the reader knows something about
PHP to actually look at it.

3125
02:13:16,916 --> 02:13:18,636
In reality, it's a
super short file.

3126
02:13:18,636 --> 02:13:20,976
It's not hard to understand
but it's still a dependency.

3127
02:13:20,976 --> 02:13:23,716
If the whole point at least of
this person of the course is

3128
02:13:23,716 --> 02:13:26,446
to do client side development
and not have to get tied

3129
02:13:26,446 --> 02:13:29,046
down to some language like
Java or Python or Ruby or PHP,

3130
02:13:29,046 --> 02:13:32,856
it'd be nice if we can eliminate
my PHP dependency all together.

3131
02:13:33,186 --> 02:13:35,276
Now, the catch is that
there's a problem.

3132
02:13:36,056 --> 02:13:39,116
Yahoo, as I said before, is
the one supplying the data.

3133
02:13:39,336 --> 02:13:42,316
Long story short, Yahoo
Finance let's you grab data

3134
02:13:42,426 --> 02:13:44,766
in CSV format, sort of
poor man's Excel format

3135
02:13:45,036 --> 02:13:47,216
which is nice 'cause it's
just text and I can parse it

3136
02:13:47,216 --> 02:13:49,656
by splitting on the commas
that separate the values.

3137
02:13:50,126 --> 02:13:51,676
The problem though
is that because

3138
02:13:51,676 --> 02:13:54,476
of a policy called the
"Same Origin Policy".

3139
02:13:54,926 --> 02:13:58,016
When you write JavaScript
code and you query a server

3140
02:13:58,016 --> 02:14:01,876
like Yahoo for data using
JavaScript, Yahoo can reply

3141
02:14:01,876 --> 02:14:03,786
to you and give you
that stock price,

3142
02:14:03,826 --> 02:14:06,926
but you are not allowed
typically to do anything

3143
02:14:06,926 --> 02:14:09,706
with the value that involves
manipulating your DOM.

3144
02:14:10,136 --> 02:14:12,456
In other words, if you have
a DOM from your own server

3145
02:14:12,606 --> 02:14:15,726
from the HTML and you're running
some JavaScript code that talks

3146
02:14:15,726 --> 02:14:18,426
to Yahoo and Yahoo says, "Here
is a piece of data for you,"

3147
02:14:18,676 --> 02:14:21,956
you cannot add that piece
of data to your own DOM.

3148
02:14:22,166 --> 02:14:25,406
It sort of breaks a barrier
that's meant to exist

3149
02:14:25,406 --> 02:14:26,926
between your site and others

3150
02:14:27,136 --> 02:14:30,356
so that certain threat scenarios
don't necessarily arise.

3151
02:14:30,606 --> 02:14:32,316
This is obviously
kind of a problem.

3152
02:14:32,586 --> 02:14:34,656
I worked around this in
the first two examples

3153
02:14:34,726 --> 02:14:38,176
by writing quote.php who's a
middleman, a proxy of sorts

3154
02:14:38,176 --> 02:14:41,516
that gets the data from
Yahoo then replies to me

3155
02:14:41,716 --> 02:14:44,176
so that rather than the
data going Yahoo to browser,

3156
02:14:44,176 --> 02:14:48,546
Yahoo to browser, it's going
server-Yahoo-server-browser.

3157
02:14:48,736 --> 02:14:51,516
But now, I'm this middleman,
God forbid my server goes down,

3158
02:14:51,516 --> 02:14:54,996
then my website won't even
work in terms of the PHP code.

3159
02:14:55,266 --> 02:14:57,096
So, it's just an
unnecessary barrier.

3160
02:14:57,096 --> 02:14:59,916
Not to mention, it requires
code that I read on the server.

3161
02:15:00,086 --> 02:15:02,086
It'd be really nice if I
could just talk to Yahoo.

3162
02:15:02,876 --> 02:15:08,346
Some companies allow you to grab
their data via JSONP format,

3163
02:15:08,886 --> 02:15:13,136
JavaScript Object
Notation Padded format.

3164
02:15:13,526 --> 02:15:14,886
This is just a fancy
way of saying,

3165
02:15:14,886 --> 02:15:16,306
it's a different type of JSON.

3166
02:15:16,456 --> 02:15:18,496
We've seen JSON briefly
in the browser,

3167
02:15:18,496 --> 02:15:19,886
but it's actually super simple.

3168
02:15:19,886 --> 02:15:22,406
You may recall from
earlier that--

3169
02:15:24,056 --> 02:15:25,756
what is the syntax for an array.

3170
02:15:25,916 --> 02:15:27,966
If I have an array,
we'll call it "foo".

3171
02:15:27,966 --> 02:15:29,956
In JavaScript, how do I
get myself an empty array?

3172
02:15:31,456 --> 02:15:32,286
Square brackets.

3173
02:15:32,456 --> 02:15:36,156
How do I give myself an array
containing the number 42

3174
02:15:36,746 --> 02:15:37,046
like this?

3175
02:15:37,186 --> 02:15:41,256
42, 43-- 42, 43, 44.

3176
02:15:41,256 --> 02:15:42,466
So, it's just as
you would expect

3177
02:15:42,466 --> 02:15:43,936
in most any similar language.

3178
02:15:44,236 --> 02:15:47,236
What about now an object?

3179
02:15:47,496 --> 02:15:51,396
An object in JavaScript is just
the incarnation of a hash table,

3180
02:15:51,396 --> 02:15:52,546
an associative array,
a dictionary,

3181
02:15:52,546 --> 02:15:53,986
a collection of key value pairs.

3182
02:15:54,266 --> 02:15:56,086
The syntax for an
empty one is this.

3183
02:15:56,736 --> 02:15:58,346
How do we have key value pairs?

3184
02:15:58,346 --> 02:16:01,466
We only briefly glimpse
this earlier but you do it

3185
02:16:01,466 --> 02:16:03,996
in this form, key: value.

3186
02:16:04,356 --> 02:16:10,546
And if you want another one
key2: value and this is a bit

3187
02:16:10,546 --> 02:16:14,226
of an oversimplification to
be super proper JSON keys

3188
02:16:14,226 --> 02:16:16,466
and values need to be coded
even though this is the pain

3189
02:16:16,466 --> 02:16:17,526
in the neck.

3190
02:16:17,526 --> 02:16:19,156
It's not strictly
necessary in JavaScript.

3191
02:16:19,156 --> 02:16:20,346
It is necessary in JSON.

3192
02:16:20,346 --> 02:16:24,446
So, this now is a collection
of two key value pairs.

3193
02:16:24,806 --> 02:16:27,486
So what if I want to get
back an array of objects?

3194
02:16:27,486 --> 02:16:32,316
I could get back an
array of key colon,

3195
02:16:32,466 --> 02:16:38,596
this going to get tedious
quickly, value, key2 colon--

3196
02:16:38,596 --> 02:16:41,786
oops-- colon value,
we'll stop there.

3197
02:16:42,016 --> 02:16:45,736
So, you can combine these basic
syntactic constructs to come

3198
02:16:45,736 --> 02:16:47,216
up with arrays of objects,

3199
02:16:47,296 --> 02:16:50,076
objects with arrays inside
of them and so forth.

3200
02:16:50,286 --> 02:16:51,716
This is essentially JSON.

3201
02:16:51,716 --> 02:16:53,876
It's JavaScript Object Notation.

3202
02:16:54,146 --> 02:16:56,786
So, when Google sends back data,
when Twitter sends back data,

3203
02:16:56,786 --> 02:16:59,426
when Facebook sends back data,
they're not usually using XML

3204
02:16:59,426 --> 02:17:01,606
which looks like HTML these
days, they're using this

3205
02:17:01,846 --> 02:17:03,076
because it's much lighter weight

3206
02:17:03,076 --> 02:17:04,756
and more compact
among other reasons.

3207
02:17:05,086 --> 02:17:07,376
So, what's the point here?

3208
02:17:07,526 --> 02:17:11,076
Well, if Yahoo Finance were
spitting out not just JSON

3209
02:17:11,266 --> 02:17:15,066
but padded JSON, I could work
around the same origin policy

3210
02:17:15,066 --> 02:17:16,756
and we won't dwell too
much on the details

3211
02:17:16,786 --> 02:17:19,636
but padded JSON means
that the data coming back

3212
02:17:19,636 --> 02:17:23,106
from a server can be
embedded into your website.

3213
02:17:23,316 --> 02:17:25,416
As you'll see in
the first project,

3214
02:17:25,416 --> 02:17:28,406
the spect for which will
release online on Wednesday,

3215
02:17:29,056 --> 02:17:31,616
there is a service that
is coincidentally made

3216
02:17:31,616 --> 02:17:36,226
by Yahoo called YQL, Yahoo Query
Language that simply allows you

3217
02:17:36,226 --> 02:17:39,316
to query websites like Yahoo
Finance, Facebook, Google,

3218
02:17:39,316 --> 02:17:40,786
Twitter, any website
on the internet.

3219
02:17:41,066 --> 02:17:45,666
And if they expose their data
as JSON data or XML data,

3220
02:17:45,666 --> 02:17:48,756
Yahoo Query Language will
allow you to fetch that data

3221
02:17:48,756 --> 02:17:51,326
and it will wrap it in
this modified version

3222
02:17:51,326 --> 02:17:53,236
of JSON called Padded JSON

3223
02:17:53,506 --> 02:17:56,746
so that you can integrate the
results into your own page.

3224
02:17:57,106 --> 02:17:59,796
So, this will become much more
clear in the project spec,

3225
02:17:59,836 --> 02:18:02,906
but for now, notice that
the solution is as simple

3226
02:18:02,906 --> 02:18:04,196
as a URL that looks like this.

3227
02:18:04,836 --> 02:18:09,376
So, this URL you'll notice
hits Yahoo, their YQL server.

3228
02:18:09,616 --> 02:18:11,856
Notice that if I really
look hard in here,

3229
02:18:11,856 --> 02:18:14,796
you can also see
finance.yahoo.com mentioned.

3230
02:18:15,116 --> 02:18:17,316
So, this is essentially a URL,
took me a couple of minutes

3231
02:18:17,316 --> 02:18:19,416
to construct and they have a
little GUI that helps you figure

3232
02:18:19,416 --> 02:18:20,596
out what the syntax should be,

3233
02:18:21,026 --> 02:18:23,486
but these just is
a URL that's going

3234
02:18:23,486 --> 02:18:28,166
to tell Yahoo's query service
to go ask Yahoo Finance

3235
02:18:28,236 --> 02:18:31,736
for a stock quote, then return
it to me in padded JSON format.

3236
02:18:32,176 --> 02:18:34,546
And the only difference
with padded JSON is

3237
02:18:34,546 --> 02:18:38,386
that whereas Twitter a moment
ago returned to us a string

3238
02:18:38,386 --> 02:18:39,346
that looks like this,

3239
02:18:39,706 --> 02:18:43,346
padded JSON would literally
return something that looks

3240
02:18:43,346 --> 02:18:48,286
like this so that you are
tricking the server effectively

3241
02:18:48,616 --> 02:18:50,736
into returning a snippet
of JavaScript code

3242
02:18:50,736 --> 02:18:55,216
that looks exactly
like a function call.

3243
02:18:55,636 --> 02:18:58,946
And so long as I, the developer,
have written a function called

3244
02:18:58,946 --> 02:19:01,866
"callback" or whatever it
is, my data will get passed

3245
02:19:01,866 --> 02:19:05,096
to that function, thereby
circumventing the story

3246
02:19:05,096 --> 02:19:06,846
that I've told even
though we haven't tripped

3247
02:19:06,846 --> 02:19:07,736
over it ourselves.

3248
02:19:08,106 --> 02:19:10,506
And again, you'll
deliberately encounter this

3249
02:19:10,506 --> 02:19:13,486
in the first project and this
is why you'll be using YQL

3250
02:19:13,486 --> 02:19:16,676
to get data back from a
server so that you don't have

3251
02:19:16,676 --> 02:19:18,406
to use PHP or Python
or Ruby or Java

3252
02:19:18,406 --> 02:19:19,546
or anything in the appliance.

3253
02:19:19,596 --> 02:19:22,636
All of your code will be client
side and you won't run a foul

3254
02:19:22,846 --> 02:19:25,636
of this restriction, but we
promise to simplify this.

3255
02:19:26,206 --> 02:19:29,006
So our last touch
to this Ajax example

3256
02:19:29,006 --> 02:19:32,616
which still works the same
GOOG, pops up the 800 dollars.

3257
02:19:32,896 --> 02:19:34,316
If I view the page source,

3258
02:19:34,716 --> 02:19:38,836
notice that I can now
simplify my code as follows.

3259
02:19:38,836 --> 02:19:41,486
I'm still using this
longer URL but that's just

3260
02:19:41,566 --> 02:19:43,896
so that I'm avoiding
the same origin as you.

3261
02:19:43,896 --> 02:19:45,646
I can change this
back to quote.php.

3262
02:19:45,646 --> 02:19:50,906
Here is how in jQuery
I can get a quote.

3263
02:19:51,676 --> 02:19:55,276
I call $.ajax.

3264
02:19:55,586 --> 02:19:56,616
So this looks a little weird.

3265
02:19:56,616 --> 02:19:58,776
But again, remember that that
dollar sign is just shorthand

3266
02:19:58,776 --> 02:20:01,886
notation for a function
called jQuery.

3267
02:20:02,046 --> 02:20:06,476
So this is jQuery.ajax
as is common

3268
02:20:06,476 --> 02:20:07,876
in JavaScript is you'll see

3269
02:20:07,876 --> 02:20:12,366
with various libraries online
many functions take not a comma

3270
02:20:12,426 --> 02:20:14,226
separated list of
arguments as their values,

3271
02:20:14,436 --> 02:20:18,436
they often take a
object of key value pairs

3272
02:20:18,436 --> 02:20:20,056
so that the order
does not matter.

3273
02:20:20,056 --> 02:20:21,166
It's just a nice convention.

3274
02:20:21,166 --> 02:20:24,646
Pearl does this a lot and Python
can do this and other languages.

3275
02:20:25,056 --> 02:20:28,046
So this is saying one
of the keys being passed

3276
02:20:28,046 --> 02:20:31,196
into this method is
called data type "jsonp".

3277
02:20:31,196 --> 02:20:34,726
I'm just telling jQuery what
response to expect back.

3278
02:20:34,726 --> 02:20:39,666
The URL is-- has a value
of URL and that's it.

3279
02:20:40,766 --> 02:20:41,746
There's a little bit of magic.

3280
02:20:41,746 --> 02:20:46,186
It turns out and this
is just to pave the way

3281
02:20:46,186 --> 02:20:47,166
for the first project.

3282
02:20:47,626 --> 02:20:53,536
Notice that somewhere in this
long URL, I have told Yahoo

3283
02:20:54,196 --> 02:20:56,786
that my callback function
will be called handler.

3284
02:20:57,126 --> 02:20:58,276
The name we view as before.

3285
02:20:59,066 --> 02:21:03,396
So jQuery is actually and this
is one of these hidden features.

3286
02:21:03,396 --> 02:21:05,286
Well, it's in the documentation,
but it's not obvious.

3287
02:21:05,586 --> 02:21:08,716
jQuery, if it notices that
you are contacting a server

3288
02:21:09,176 --> 02:21:12,846
with the parameter whose value
is callback equals something,

3289
02:21:13,046 --> 02:21:15,956
jQuery will very nicely assume
that, "Oh, when I get a response

3290
02:21:15,956 --> 02:21:20,656
from this URL, I'm going to call
your function called handler

3291
02:21:21,086 --> 02:21:23,586
which just means that
we're on the system here."

3292
02:21:23,586 --> 02:21:24,446
I just have to make sure

3293
02:21:24,446 --> 02:21:26,456
to implement this thing
just like I did before.

3294
02:21:26,706 --> 02:21:28,726
So handler expects a response.

3295
02:21:29,246 --> 02:21:32,016
I happen to know by reading
Yahoo's documentation,

3296
02:21:32,016 --> 02:21:35,716
if the response object
has a query property,

3297
02:21:36,016 --> 02:21:38,196
has account value of one,

3298
02:21:38,196 --> 02:21:40,616
that means I got back one stock
price, and it took some trial

3299
02:21:40,616 --> 02:21:42,476
and error to figure out what
the server were sending me,

3300
02:21:42,666 --> 02:21:45,666
but I figured out that it should
equal one, and when the happens,

3301
02:21:45,666 --> 02:21:49,996
I should output
response.query.results.

3302
02:21:50,596 --> 02:21:55,026
row.price, very convoluted
number of steps to get

3303
02:21:55,026 --> 02:21:57,946
to that point, but again, you'll
see in the first specification

3304
02:21:57,946 --> 02:22:00,756
of the project exactly
what's that doing

3305
02:22:00,916 --> 02:22:02,866
and why it's doing it.

3306
02:22:03,886 --> 02:22:06,336
Questions on-- I
know that was a lot.

3307
02:22:06,866 --> 02:22:12,296
Questions on Ajax having just
started JavaScript an hour ago.

3308
02:22:13,516 --> 02:22:21,336
[ Inaudible Remark ]

3309
02:22:21,836 --> 02:22:22,816
When the-- yes.

3310
02:22:22,816 --> 02:22:25,746
When the server calls
the callback function,

3311
02:22:26,156 --> 02:22:29,286
it passes in the response
arguments, also tucked away

3312
02:22:29,286 --> 02:22:32,006
in that response argument, which
I didn't bother using this time

3313
02:22:32,006 --> 02:22:35,006
or the 200 and details
like that,

3314
02:22:35,326 --> 02:22:38,116
because jQuery similarly checks
those kinds of things for me

3315
02:22:38,536 --> 02:22:40,746
so I don't have to
worry as much about it.

3316
02:22:42,256 --> 02:22:43,186
All right.

3317
02:22:44,066 --> 02:22:45,376
So that was jQuery.

3318
02:22:45,536 --> 02:22:48,226
So that only leaves a
semester of Objective-C.

3319
02:22:48,716 --> 02:22:52,556
So Objective-C as we will see is
much more mind bending at least

3320
02:22:52,556 --> 02:22:55,236
at first for most people than
JavaScript, but rest assured

3321
02:22:55,236 --> 02:22:56,336
that this coming week,

3322
02:22:56,336 --> 02:22:59,026
on Wednesday we'll have our
first lab with RJ and Rob,

3323
02:22:59,026 --> 02:23:01,306
it will be an opportunity to
dive in hands on with some

3324
02:23:01,306 --> 02:23:03,136
of this code and some of you
seemed to be following along

3325
02:23:03,136 --> 02:23:05,306
with some of it, but we'll
look at other examples

3326
02:23:05,306 --> 02:23:09,436
that apply these same concepts
and we'll also give you a tour

3327
02:23:09,676 --> 02:23:12,936
of the first project which will
involve mashing together some

3328
02:23:12,936 --> 02:23:15,896
location information, some
weather, some news, some HTML,

3329
02:23:15,896 --> 02:23:18,866
some JavaScript, and we'll
leverage concepts like Ajax

3330
02:23:18,866 --> 02:23:20,206
and the like but
won't necessarily go

3331
02:23:20,206 --> 02:23:22,546
into as much detail as
some of these things here

3332
02:23:22,546 --> 02:23:25,236
and you'll see the spec too will
hold your hand through a tour

3333
02:23:25,236 --> 02:23:27,606
of some of these
concepts and technologies

3334
02:23:27,606 --> 02:23:28,896
that might be unfamiliar.

3335
02:23:29,156 --> 02:23:31,516
And two weeks hence
in the lab 2,

3336
02:23:31,606 --> 02:23:34,216
we'll also offer another
opportunity to explore

3337
02:23:34,216 --> 02:23:36,656
that material and
specifically explore the project

3338
02:23:36,656 --> 02:23:38,316
for which there are
roughly two-week deadlines

3339
02:23:38,586 --> 02:23:41,616
as you can see in the course's
syllabus which is at cs76.net,

3340
02:23:41,986 --> 02:23:44,426
but very quickly will we
transition to Objective-C.

3341
02:23:44,426 --> 02:23:47,336
And so what we'll do next Monday
when we return for lecture

3342
02:23:47,516 --> 02:23:49,036
and I unfortunately have
to be at a conference.

3343
02:23:49,036 --> 02:23:50,436
Rob will be leading
us on Monday.

3344
02:23:50,776 --> 02:23:54,336
We'll be diving into Objective-C
itself for those unfamiliar, C--

3345
02:23:54,336 --> 02:23:58,196
Objective-C is a super set of
C. For those unfamiliar with C,

3346
02:23:58,196 --> 02:24:00,966
we will give you a crash
course on Monday in C

3347
02:24:00,966 --> 02:24:02,866
and everything you need to
know about memory management

3348
02:24:02,866 --> 02:24:04,486
and pointers and
the syntax thereof,

3349
02:24:04,746 --> 02:24:07,666
so that we can focus really on
the OO features of Objective-C

3350
02:24:07,896 --> 02:24:10,966
and then transition toward
the end of next week--

3351
02:24:10,966 --> 02:24:15,266
or rather the start of
week three to the iOS SDK,

3352
02:24:15,616 --> 02:24:16,786
software development kit,

3353
02:24:17,076 --> 02:24:19,116
and even though next week
we'll spend some of our time

3354
02:24:19,116 --> 02:24:21,626
in Xcode and/or at the
command line, ultimately,

3355
02:24:21,626 --> 02:24:24,366
we'll spend most of the semester
in a tool that looks like this.

3356
02:24:24,586 --> 02:24:26,196
I've opened up most
of the panels

3357
02:24:26,846 --> 02:24:28,556
for this particular screenshot,

3358
02:24:28,556 --> 02:24:31,326
but Xcode which is Apple's
integrated development

3359
02:24:31,326 --> 02:24:33,826
environment, similar in
spirit to NetBeans, or IDE,

3360
02:24:33,826 --> 02:24:36,556
or similar tools if you're
familiar is kind of designed

3361
02:24:36,556 --> 02:24:38,806
to make programming fun
and look like iTunes

3362
02:24:38,806 --> 02:24:41,026
such that once you write your
program, all you do is hit Play

3363
02:24:41,026 --> 02:24:43,026
and everything just works
nicely in the simulator

3364
02:24:43,246 --> 02:24:45,666
or if you connect a USB cable,
it will burn the software

3365
02:24:45,666 --> 02:24:47,736
onto your device
if you so choose.

3366
02:24:48,046 --> 02:24:51,086
But through this environment,
we'll use Objective-C.

3367
02:24:51,086 --> 02:24:52,856
We'll use a tool called
interphase builder

3368
02:24:52,856 --> 02:24:54,996
that allows you to
construct fairly simple

3369
02:24:54,996 --> 02:24:58,536
but fairly quickly user
interfaces that are very similar

3370
02:24:58,536 --> 02:25:01,416
in spirit to iOS 6's paradigm.

3371
02:25:02,136 --> 02:25:05,116
You'll be then able to compile
and run them in the simulator

3372
02:25:05,116 --> 02:25:07,226
or if you have a device, again,
we'll set you up with that.

3373
02:25:07,506 --> 02:25:12,336
Word on iOS 7, the tragedy of
summer course and the tragedy

3374
02:25:12,336 --> 02:25:14,376
of WWDC, which is Apple's
conference, which always happens

3375
02:25:14,376 --> 02:25:15,946
like two weeks before
the semester begins,

3376
02:25:15,946 --> 02:25:17,146
is that they always start to--

3377
02:25:17,146 --> 02:25:18,576
they announced that
things are changing

3378
02:25:18,806 --> 02:25:21,326
and then they actually
change like two months later.

3379
02:25:21,326 --> 02:25:24,036
So we're in this sort of weird
limbo state, but thankfully,

3380
02:25:24,036 --> 02:25:27,856
there's nothing-- most of the
changes in iOS 7 are aesthetics

3381
02:25:27,856 --> 02:25:30,096
so far as we would be
concern for a class like this.

3382
02:25:30,096 --> 02:25:31,966
Underneath the hood,
there's new functionality,

3383
02:25:31,966 --> 02:25:33,166
there's some new
method, there is new--

3384
02:25:33,166 --> 02:25:35,626
some new constants and the like,

3385
02:25:35,836 --> 02:25:37,866
but nothing that will
fundamentally change any

3386
02:25:37,866 --> 02:25:40,016
of the things we do over
the next six to seven weeks

3387
02:25:40,016 --> 02:25:41,666
so you can rest assured
legitimately

3388
02:25:41,986 --> 02:25:43,946
with this transition
to iOS 6 and 7

3389
02:25:43,946 --> 02:25:46,806
that everything we explore
will continue to apply,

3390
02:25:47,176 --> 02:25:50,556
that wasn't the case
from iOS 5 to 6

3391
02:25:50,556 --> 02:25:52,096
where some fundamental aspects

3392
02:25:52,096 --> 02:25:54,026
of Objective-C itself
were altered.

3393
02:25:54,026 --> 02:25:56,016
So if you're a bit worried
about that, rest assured

3394
02:25:56,016 --> 02:25:58,046
that will be OK and
the transition

3395
02:25:58,046 --> 02:26:01,046
to iOS 7 should be a
fairly smooth one for you

3396
02:26:01,046 --> 02:26:02,286
if you take things further.

3397
02:26:02,606 --> 02:26:06,166
Beyond that, we will ultimately
start in a couple of week's time

3398
02:26:06,166 --> 02:26:08,096
with the simplest of
hello world applications

3399
02:26:08,096 --> 02:26:09,866
and then go much,
much beyond that.

3400
02:26:10,116 --> 02:26:10,986
That's it for tonight.

3401
02:26:10,986 --> 02:26:13,056
I'll stick around for
questions with Rob or RJ.

3402
02:26:13,476 --> 02:26:15,146
Otherwise, we will
see you on Wednesday

3403
02:26:15,146 --> 02:26:16,436
across the hall and B108.