1
00:00:00,506 --> 00:00:06,706
[ Silence ]

2
00:00:07,206 --> 00:00:09,746
>> Okay so we're going to get
started in just a second here.

3
00:00:09,816 --> 00:00:12,046
I think we're all
set with the cameras.

4
00:00:12,186 --> 00:00:16,426
Great. So the first thing
we're going to do today,

5
00:00:16,426 --> 00:00:20,356
well first user directions,
my name is RJ, this is Rob

6
00:00:21,096 --> 00:00:23,586
and we'll be the teaching
fellows for S-76 this year.

7
00:00:24,126 --> 00:00:28,746
And these labs are meant to be
time for more hands on exercises

8
00:00:28,746 --> 00:00:30,776
where we'll give
some instructions.

9
00:00:30,776 --> 00:00:33,246
We'll break up into groups kind
of like this, work through them.

10
00:00:33,676 --> 00:00:35,886
And we'll floating
around to help out.

11
00:00:35,886 --> 00:00:37,836
And then we'll go over
an example solution

12
00:00:37,836 --> 00:00:40,046
or take example solutions
from the group.

13
00:00:40,536 --> 00:00:44,186
>> Yeah if you ever have
any questions and one of us,

14
00:00:44,186 --> 00:00:47,106
even if like RJ's talking, I
can come over and help whenever.

15
00:00:48,106 --> 00:00:52,016
>> Especially these early labs
we'll be getting everyone's

16
00:00:52,446 --> 00:00:56,486
configuration on the same page
is the most important thing.

17
00:00:56,486 --> 00:00:57,606
So definitely raise your hand

18
00:00:57,606 --> 00:00:59,906
if something doesn't seem
quite the same as it is up here

19
00:00:59,906 --> 00:01:02,286
or something doesn't
seem to be quite working.

20
00:01:04,276 --> 00:01:07,786
If you got my email a while
ago there's a link in there

21
00:01:07,996 --> 00:01:09,186
on how to install Zamp.

22
00:01:09,186 --> 00:01:11,966
You can clink the link in
there and install Zamp.

23
00:01:11,966 --> 00:01:13,506
That's the first thing we're
going to do is just download

24
00:01:13,506 --> 00:01:17,506
that software, get it installed,
try to put an example html file

25
00:01:17,506 --> 00:01:20,186
in your sites folder
and get that to load.

26
00:01:20,186 --> 00:01:24,366
So anything you put in
that file and pull it up.

27
00:01:24,836 --> 00:01:26,646
So who here has installed Zamp?

28
00:01:27,716 --> 00:01:31,186
Has successfully installed Zamp?

29
00:01:31,426 --> 00:01:33,986
Oh great, okay, who has not?

30
00:01:34,466 --> 00:01:35,606
>> Or other web server?

31
00:01:35,686 --> 00:01:41,076
Is there anyone who is in
the process of installing it?

32
00:01:41,576 --> 00:01:45,216
>> So we'll get that set up.

33
00:01:45,246 --> 00:01:48,496
So for those of you who have
installed it, have you been able

34
00:01:48,496 --> 00:01:51,086
to put a file in your sites
folder to try things out?

35
00:01:52,356 --> 00:01:55,056
If not let's open up
your favorite text editor

36
00:01:55,646 --> 00:01:57,746
and save a file in
your sites folder.

37
00:01:57,836 --> 00:01:59,806
Okay so everyone has
got everything set up.

38
00:01:59,976 --> 00:02:01,926
We're going to keep
pushing ahead.

39
00:02:02,366 --> 00:02:04,616
For those that have not
gotten things fully set

40
00:02:04,616 --> 00:02:06,456
up just raise your hand
and David is floating

41
00:02:06,456 --> 00:02:07,846
around to help out as well.

42
00:02:07,846 --> 00:02:12,806
So the next thing we're
going to do is you just have

43
00:02:12,806 --> 00:02:16,446
at least a basic index
html or test study html

44
00:02:16,446 --> 00:02:18,996
or the lectures examples
in that folder.

45
00:02:19,176 --> 00:02:22,676
We're going to take
one of those files

46
00:02:23,136 --> 00:02:25,506
and make it a little
more useable.

47
00:02:26,226 --> 00:02:31,776
So we're going to add the
meta tag in the head as we saw

48
00:02:31,776 --> 00:02:34,176
in lecture and add a
viewpoint element to that,

49
00:02:34,296 --> 00:02:35,736
a viewpoint property to that.

50
00:02:36,346 --> 00:02:39,326
In addition we're going
to add some script types

51
00:02:39,326 --> 00:02:43,046
and add some JavaScript to
make it a little more dynamic.

52
00:02:43,466 --> 00:02:46,356
So I want you guys to
make a page that has

53
00:02:46,356 --> 00:02:51,806
at the very least a textbox
and a button, a submit button,

54
00:02:52,146 --> 00:02:56,576
and a div of some
sort with an id.

55
00:02:56,576 --> 00:02:58,636
And so collaborate
with your group.

56
00:02:58,726 --> 00:03:03,126
The goal is when you
click the submit button,

57
00:03:03,416 --> 00:03:06,776
whatever is in that text
box populates that div.

58
00:03:07,196 --> 00:03:09,586
So Rob is going to
draw a picture.

59
00:03:09,586 --> 00:03:10,816
Is that what Rob's doing?

60
00:03:10,816 --> 00:03:10,976
>> Okay. [laughter]

61
00:03:11,516 --> 00:03:24,636
[ Silence ]

62
00:03:25,136 --> 00:03:26,826
What did you say, a button?

63
00:03:27,516 --> 00:03:41,056
[ Silence ]

64
00:03:41,556 --> 00:03:47,536
>> The goal is first up,
the html, has this textbox,

65
00:03:47,996 --> 00:03:52,066
the submit button and
then some space below.

66
00:03:52,106 --> 00:03:53,836
>> It can be an invisible space.

67
00:03:53,836 --> 00:03:55,456
Like if you have a div
you're not going to be able

68
00:03:55,456 --> 00:03:57,156
to see it but it'll be there.

69
00:03:58,336 --> 00:04:00,386
And then whatever you
type here and submit,

70
00:04:00,456 --> 00:04:01,626
it should show up down here.

71
00:04:02,896 --> 00:04:06,976
>> So once you have the
structure base all set

72
00:04:06,976 --> 00:04:11,936
up you'll need two things at
the very least, a script tag

73
00:04:12,056 --> 00:04:14,846
that includes JavaScript and
you'll likely have a script tag

74
00:04:14,846 --> 00:04:17,256
that includes jQuery,
as we saw in lecture.

75
00:04:17,486 --> 00:04:19,766
So if you don't remember
exactly how to do that,

76
00:04:19,766 --> 00:04:20,926
feel free to collaborate
with your partners,

77
00:04:20,926 --> 00:04:23,156
look on the courses
website or raise your hand

78
00:04:23,156 --> 00:04:24,126
and we'll be floating around.

79
00:04:24,546 --> 00:04:28,176
But the goal is to, again, once
you click that submit button,

80
00:04:28,566 --> 00:04:31,406
have the contents
reflected in the div below.

81
00:04:31,916 --> 00:04:35,816
>> Just to put something out,

82
00:04:36,266 --> 00:04:40,656
this little line right here is
what I'm using to include jQuery

83
00:04:40,776 --> 00:04:44,096
so if you wanted you could
just download jQuery locally

84
00:04:44,096 --> 00:04:47,326
and then include it with
like scriptsource=jQuery.js

85
00:04:47,326 --> 00:04:50,266
or whatever, if it were
inside of the same directory

86
00:04:50,266 --> 00:04:52,756
as this exercise1.html.

87
00:04:53,246 --> 00:04:59,456
Here Google happens to
provide a jQuery link online

88
00:04:59,456 --> 00:05:02,636
so I'm just directly linking to
Google and pulling down jQuery

89
00:05:02,636 --> 00:05:05,886
that way so either works.

90
00:05:06,266 --> 00:05:10,076
Okay so a couple
things I've added just

91
00:05:10,076 --> 00:05:12,896
to get you going
if you're stuck.

92
00:05:13,326 --> 00:05:16,496
So notice I've given
some ID's to my div

93
00:05:16,496 --> 00:05:19,256
and my form and my
input textbox.

94
00:05:19,726 --> 00:05:22,536
Because jQuery is
going to conveniently,

95
00:05:22,746 --> 00:05:24,186
some of them didn't
really need ID's

96
00:05:24,686 --> 00:05:28,516
but it's convenient
to have them.

97
00:05:28,516 --> 00:05:36,076
Remember this syntax is going
let me $(# is going to refer

98
00:05:36,336 --> 00:05:39,266
to the element with that ID.

99
00:05:39,506 --> 00:05:42,006
I wasn't very creative
with my ID name

100
00:05:42,006 --> 00:05:46,346
so we've exercised one
form, exercised one text

101
00:05:47,086 --> 00:05:52,936
and exercised1-id div.

102
00:05:53,386 --> 00:05:55,486
Okay so what this
particular line

103
00:05:55,486 --> 00:06:00,266
of jQuery is saying is grab,
select, this particular item

104
00:06:00,556 --> 00:06:01,686
so we're selecting the item

105
00:06:01,686 --> 00:06:05,486
with id exercise1 form
which is this guy.

106
00:06:05,666 --> 00:06:08,246
There should only be one
thing in your entire document

107
00:06:08,246 --> 00:06:10,346
with that id and
so that's this guy.

108
00:06:10,786 --> 00:06:15,176
And we're saying when the
submit event is triggered,

109
00:06:15,396 --> 00:06:18,356
so when we actually hit
submit on that form,

110
00:06:18,716 --> 00:06:20,576
we're going to run
this function.

111
00:06:21,016 --> 00:06:22,706
So I haven't defined what
the function does yet

112
00:06:23,156 --> 00:06:25,736
but we're going to want the
function to do something

113
00:06:25,736 --> 00:06:30,876
like copy this text down into
this div and also make sure

114
00:06:30,876 --> 00:06:32,526
that the form doesn't
actually end up submitting.

115
00:06:32,846 --> 00:06:37,076
So let's actually talk
about the third point first.

116
00:06:37,676 --> 00:06:39,796
We saw this in lecture,
how do we prevent the form

117
00:06:39,796 --> 00:06:40,756
from actually submitting?

118
00:06:40,976 --> 00:06:41,626
What do we need to do?

119
00:06:42,896 --> 00:06:43,306
[inaudible background
comment] Yes.

120
00:06:43,806 --> 00:06:46,686
So we can do that
just by return false.

121
00:06:47,596 --> 00:06:50,086
If we return true that means
the form should actually submit.

122
00:06:50,086 --> 00:06:51,856
And this is going to
be useful for things

123
00:06:51,856 --> 00:06:56,776
like validating the submission
because like if you didn't fill

124
00:06:56,776 --> 00:06:59,166
out a textbox maybe you
don't want the form to submit

125
00:06:59,516 --> 00:07:01,126
so return false will
prevent that.

126
00:07:01,126 --> 00:07:03,656
But if it is filled out then
you do want it to submit

127
00:07:03,656 --> 00:07:04,466
so you can return true.

128
00:07:09,556 --> 00:07:12,576
And for points one and two
I'm going to use jQuery.

129
00:07:12,576 --> 00:07:14,966
You can use regular
straight JavaScript

130
00:07:15,666 --> 00:07:19,186
but what is the selector?

131
00:07:20,216 --> 00:07:22,796
And this being the selector,
this jQuery selector,

132
00:07:23,116 --> 00:07:25,196
what is the selector I'm
going to want to use in order

133
00:07:25,196 --> 00:07:28,696
to get something from this?

134
00:07:30,366 --> 00:07:31,736
[laughter] Yeah,
this is the selector.

135
00:07:32,056 --> 00:07:35,726
So remember that the pound,
the hash, the whatever you want

136
00:07:35,726 --> 00:07:40,176
to call it, refers to
the element with that id.

137
00:07:40,666 --> 00:07:45,206
If I said this, that would
mean the element with that tag,

138
00:07:45,526 --> 00:07:46,686
which there isn't any.

139
00:07:46,856 --> 00:07:51,606
You might see that if I did
something like div or if I did,

140
00:07:51,606 --> 00:07:58,476
actually div would be
pretty good so we don't want

141
00:07:58,476 --> 00:08:02,206
that from form, we
want that from text.

142
00:08:03,256 --> 00:08:08,176
So the text is inside of this
input box, exercise1 text.

143
00:08:08,286 --> 00:08:16,596
I gave it that id
just to get the text.

144
00:08:16,886 --> 00:08:21,516
We have now selected the item
and this is where you kind

145
00:08:21,516 --> 00:08:22,726
of just learn them or you can go

146
00:08:22,726 --> 00:08:24,236
through the jQuery
documentation.

147
00:08:24,726 --> 00:08:27,116
But what we're going
to want to do

148
00:08:27,196 --> 00:08:31,136
to actually get the text that's
inside the text box is .val.

149
00:08:31,686 --> 00:08:36,496
And so then I can store
that in just a variable.

150
00:08:36,816 --> 00:08:38,716
Our text equals blah.

151
00:08:39,186 --> 00:08:43,386
Okay so [laughter]
the line I just added,

152
00:08:43,816 --> 00:08:45,536
I wrapped that around
everything we had so far,

153
00:08:46,116 --> 00:08:51,106
inside of this skirt tag,
is another jQuery thing.

154
00:08:51,486 --> 00:08:55,866
So you'll notice, and there are
some shortcuts you might know

155
00:08:55,866 --> 00:08:58,506
so .submit also exists but
I'm not going to use those.

156
00:08:58,916 --> 00:09:00,696
So whenever you see
.on that refers

157
00:09:00,696 --> 00:09:03,506
to like something should
happen when this event happens.

158
00:09:03,766 --> 00:09:05,116
So submit is one event

159
00:09:05,116 --> 00:09:07,146
that happens whenever
you like submit a form.

160
00:09:07,616 --> 00:09:09,986
So ready is another event
that happens whenever

161
00:09:09,986 --> 00:09:12,566
that thing has been
fully loaded on the page.

162
00:09:13,086 --> 00:09:17,506
So here we're saying when the
entire page has been loaded,

163
00:09:17,866 --> 00:09:18,606
do this.

164
00:09:19,176 --> 00:09:25,896
So without this line then we are
doing this function before we've

165
00:09:25,896 --> 00:09:28,716
even gotten to the html that
causes these things to exist.

166
00:09:29,656 --> 00:09:34,376
So when the page fully
loads, then do this stuff.

167
00:09:34,986 --> 00:09:37,736
And this is a very common
pattern that you don't want

168
00:09:37,736 --> 00:09:44,746
to do things until
the page is loaded.

169
00:09:45,956 --> 00:09:53,066
[inaudible background question]
No, well, no, you can do that.

170
00:09:54,036 --> 00:09:58,446
The thing is that like
eventually this will probably

171
00:09:58,446 --> 00:10:00,946
get put into like, or
should probably get put

172
00:10:00,946 --> 00:10:03,386
into a separate JavaScript
file, which you could include

173
00:10:03,386 --> 00:10:05,226
at the bottom but I usually see

174
00:10:05,226 --> 00:10:11,346
like all these script
tags at the top.

175
00:10:12,656 --> 00:10:12,806
[inaudible background
question] Yeah

176
00:10:12,956 --> 00:10:20,376
so the .ready function is
an alternative to this.

177
00:10:22,376 --> 00:10:22,576
[inaudible background
question] Sure,

178
00:10:23,056 --> 00:10:27,776
we'll do the last point now.

179
00:10:27,856 --> 00:10:29,586
Insert the text into the div.

180
00:10:30,976 --> 00:10:34,836
So what selector
do you want to use?

181
00:10:34,836 --> 00:10:41,786
It's exactly this
guy, #exercise1-div.

182
00:10:42,296 --> 00:10:50,086
And then we're going to want to
put inside of it whatever was

183
00:10:50,086 --> 00:10:53,566
in that text box
and so you can look

184
00:10:53,566 --> 00:10:55,836
at the various jQuery methods
that are available to you.

185
00:10:56,196 --> 00:11:00,286
Here I happen to know that I
want to use the text method

186
00:11:00,286 --> 00:11:01,066
which is kind of confusing

187
00:11:01,066 --> 00:11:02,726
because I call this
variable text

188
00:11:02,726 --> 00:11:05,416
so let's say this is text box.

189
00:11:06,486 --> 00:11:09,776
So we're using the
text method and calling

190
00:11:10,416 --> 00:11:13,196
or putting inside
of it text box.

191
00:11:14,046 --> 00:11:17,586
So this line is saying
that take this div,

192
00:11:17,926 --> 00:11:19,406
replace whatever is inside of it

193
00:11:19,596 --> 00:11:21,316
with whatever is
in this variable.

194
00:11:21,866 --> 00:11:29,776
>> And after the lab we'll
definitely post our example

195
00:11:29,776 --> 00:11:33,236
solution with extensive
comments, similar to this

196
00:11:33,236 --> 00:11:34,686
but with a little
more explanation.

197
00:11:34,686 --> 00:11:34,786
>> Yeah.

198
00:11:35,096 --> 00:11:36,216
>> So that if you missed a bit

199
00:11:36,216 --> 00:11:40,956
or don't understand what
one line does you can see it

200
00:11:41,096 --> 00:11:42,526
after the lab is over.

201
00:11:43,516 --> 00:11:56,016
[ Classroom discussion ]

202
00:11:56,516 --> 00:12:00,036
So I'll get us started on
the second part of this.

203
00:12:00,036 --> 00:12:04,446
So if you haven't fully got
this working, flag us down,

204
00:12:04,446 --> 00:12:05,716
we'll help get it working.

205
00:12:06,376 --> 00:12:08,146
But the second part is going

206
00:12:08,146 --> 00:12:11,986
to tease a bit behind the
mechanics of the project.

207
00:12:12,676 --> 00:12:19,996
So we'll look at, if you go to
cs76.net, there's a projects tab

208
00:12:19,996 --> 00:12:22,806
on the left and there's the
link for our first project

209
00:12:22,806 --> 00:12:27,946
which is due approximately
two weeks hence.

210
00:12:28,076 --> 00:12:29,616
Yeah, project I've
got attention.

211
00:12:29,806 --> 00:12:34,636
As for the project
there's a section labeled,

212
00:12:34,636 --> 00:12:38,666
let me get the name right,
geocoding, and there's a link

213
00:12:38,666 --> 00:12:40,416
to Google's geocoding API.

214
00:12:42,066 --> 00:12:44,666
So through jQuery, and
the project [inaudible],

215
00:12:44,666 --> 00:12:50,386
you're able to make external
requests, asking for information

216
00:12:50,596 --> 00:12:53,576
from an external API
like the geocoding API.

217
00:12:54,496 --> 00:12:58,706
In this sense the geocoding API
allows you to turn addresses

218
00:12:58,706 --> 00:13:02,166
or zip codes into, or get
more information about them.

219
00:13:03,046 --> 00:13:07,636
So we're going to extend
this example to change,

220
00:13:07,836 --> 00:13:11,466
instead of changing
text, when you type

221
00:13:11,466 --> 00:13:14,916
in a zip code we want
you to send that zip code

222
00:13:15,126 --> 00:13:20,056
through the geocoding
API and get back the city

223
00:13:20,056 --> 00:13:21,996
and state for that zip code.

224
00:13:22,556 --> 00:13:26,406
So as the first test
go to link on cs76.net,

225
00:13:27,216 --> 00:13:29,686
go to the projects
tab to projects link

226
00:13:29,686 --> 00:13:31,086
and there's a link
to the geocoding API.

227
00:13:32,516 --> 00:13:35,926
Look at the example there
and try it out just by going

228
00:13:35,926 --> 00:13:37,976
to the URL at the geocoding API.

229
00:13:38,196 --> 00:13:40,536
And definitely talk with the
people at your table to see

230
00:13:40,766 --> 00:13:43,346
if you can't seem to find
the page I'm talking about.

231
00:13:44,356 --> 00:13:46,676
Then you're going to
want to modify this

232
00:13:47,136 --> 00:13:50,636
to make your submit box and the
request to this geocoding API

233
00:13:51,216 --> 00:13:53,036
with jQuery's get
[inaudible] function.

234
00:13:54,096 --> 00:13:59,896
So I'll float around to help
get exercise1 working which was

235
00:14:00,216 --> 00:14:02,646
up there a second ago and
then we can push ahead

236
00:14:03,046 --> 00:14:04,626
on with this second example.

237
00:14:05,196 --> 00:14:10,996
>> Okay so once again I'm
going to use jQuery for this,

238
00:14:10,996 --> 00:14:14,246
although you can use straight
JavaScript but as you saw

239
00:14:14,246 --> 00:14:17,486
in lecture, when you
start using Ajax requests

240
00:14:17,786 --> 00:14:20,766
where jQuery becomes like
a single line of stuff,

241
00:14:21,086 --> 00:14:23,306
JavaScript tends to be a
whole bunch of if else's

242
00:14:23,306 --> 00:14:26,396
and making sure it works for
internet explorer and all

243
00:14:26,396 --> 00:14:28,726
that stuff so jQuery
makes this stuff nice.

244
00:14:29,506 --> 00:14:32,556
And so you can look through the
jQuery documentation looking

245
00:14:32,556 --> 00:14:33,836
for the appropriate functions.

246
00:14:34,236 --> 00:14:37,976
In this spec we give you the
hint that you can use getjason.

247
00:14:39,136 --> 00:14:42,586
And so just Googling
for that I get this guy.

248
00:14:42,586 --> 00:14:45,646
It will also reference the
fact that this is shorthand

249
00:14:45,646 --> 00:14:50,976
for the .Ajax function so jQuery
also provides an Ajax function

250
00:14:50,976 --> 00:14:55,476
which is like a very general
Ajax can do anything you want.

251
00:14:55,866 --> 00:15:00,186
But it has some shorthand
functions like getjason and .get

252
00:15:00,186 --> 00:15:03,566
and .post that fill in some
default parameters for you.

253
00:15:03,666 --> 00:15:06,176
So here we're going
to use getjason.

254
00:15:07,166 --> 00:15:10,656
And so if we look here we
figure out the URL, the data

255
00:15:11,066 --> 00:15:13,836
and success we'll get to in
a second but that's going

256
00:15:13,836 --> 00:15:18,296
to be a function that will
handle whatever the response

257
00:15:18,406 --> 00:15:20,486
from that Ajax request was.

258
00:15:21,256 --> 00:15:28,856
So first we need to figure out
what the URL is going to be.

259
00:15:28,856 --> 00:15:31,116
>> So I want to show
jQuery's example .jason.

260
00:15:31,116 --> 00:15:38,696
>> This guy, well that's making
a request to, there's a URL

261
00:15:38,696 --> 00:15:41,016
and there's a function so.

262
00:15:41,436 --> 00:15:42,986
The jQuery's documentation,
if you look at it,

263
00:15:42,986 --> 00:15:46,046
it's going to give you a bunch
of examples for these functions.

264
00:15:46,316 --> 00:15:48,576
Here their example is a $ sign.

265
00:15:48,576 --> 00:15:53,256
When you see the $ sign you
immediately jQuery so $.getjason

266
00:15:53,656 --> 00:15:58,136
and then this is the URL they're
giving it and this just happens

267
00:15:58,136 --> 00:16:02,766
to mean like if you had
a file in your like,

268
00:16:03,806 --> 00:16:07,446
if you had a file inside a
folder Ajax called test.jason

269
00:16:07,606 --> 00:16:10,926
you could do this,
unfortunately you don't.

270
00:16:10,926 --> 00:16:13,206
You could create
one if you wanted.

271
00:16:14,006 --> 00:16:16,416
But you can also
include here links

272
00:16:16,416 --> 00:16:22,326
to like http://google
something so any type

273
00:16:22,326 --> 00:16:23,306
of URL can go in there.

274
00:16:23,966 --> 00:16:26,656
And then here is an example
of a success function

275
00:16:26,986 --> 00:16:30,416
where the function takes one
argument, it can take more,

276
00:16:30,476 --> 00:16:32,886
but here we only need to
take one argument data,

277
00:16:33,406 --> 00:16:35,476
which is the data that
the server returned.

278
00:16:36,216 --> 00:16:39,626
And so then inside of this
function we can do stuff

279
00:16:39,626 --> 00:16:40,336
with that data.

280
00:16:41,006 --> 00:16:43,076
And so in our example the
URL is going to be something

281
00:16:43,076 --> 00:16:46,066
with the geocoding API and
the data that it's going

282
00:16:46,066 --> 00:16:48,046
to return is hopefully something

283
00:16:48,106 --> 00:16:51,866
in which we can find
the city and state.

284
00:16:52,716 --> 00:16:57,826
Okay so this is an example URL.

285
00:16:58,176 --> 00:17:02,046
This will only currently work
for Cambridge, MA so we're going

286
00:17:02,046 --> 00:17:06,396
to want to programmatically
replace this with zip code

287
00:17:07,596 --> 00:17:09,586
and I'll guess I'll just use
URL because that's simple.

288
00:17:10,626 --> 00:17:11,896
So how do we do that?

289
00:17:12,776 --> 00:17:18,266
Just zip code so in JavaScript
you can concatenate strings

290
00:17:18,266 --> 00:17:18,846
like this.

291
00:17:19,176 --> 00:17:22,506
So to enter zip code
just enter the middle

292
00:17:23,366 --> 00:17:27,256
of the string, we can do this.

293
00:17:27,496 --> 00:17:27,766
Yeah? [inaudible
background question]

294
00:17:28,626 --> 00:17:40,816
>> Is looking here, one
sec, so do you want to try?

295
00:17:43,316 --> 00:17:52,926
Well now we're in, hold on,
hit escape and then command.

296
00:17:52,926 --> 00:17:57,256
You don't have the
same, common, nice.

297
00:17:57,256 --> 00:18:00,876
So here's an example
of [inaudible] API.

298
00:18:01,816 --> 00:18:03,226
If we go to the URL,

299
00:18:03,496 --> 00:18:12,016
maps.googleapi.com/map/
api/geocode/Jason?=02138

300
00:18:12,306 --> 00:18:16,976
and hit enter, this
is what we get back.

301
00:18:17,296 --> 00:18:19,286
There's all sorts of data here.

302
00:18:19,486 --> 00:18:21,366
There's something
called results,

303
00:18:21,366 --> 00:18:23,496
inside of results something
called address components

304
00:18:23,496 --> 00:18:24,766
and long name and
short name and all

305
00:18:24,766 --> 00:18:28,116
of this data is what
you'll get back

306
00:18:28,116 --> 00:18:32,006
if you do jQuery's getjason
function and give it this URL.

307
00:18:32,476 --> 00:18:38,116
And then you can access this
data by using JavaScript,

308
00:18:38,116 --> 00:18:39,236
you'll get it back as an object

309
00:18:39,486 --> 00:18:41,556
so you use data.results
would be the first thing

310
00:18:41,556 --> 00:18:43,816
and that gives you
access to all of these,

311
00:18:44,116 --> 00:18:45,746
everything inside the results.

312
00:18:46,016 --> 00:18:48,776
Data.results.addresscomponent
would give you access

313
00:18:48,776 --> 00:18:49,736
to the address components.

314
00:18:50,596 --> 00:18:54,276
And so you may want
to try just doing,

315
00:18:54,556 --> 00:18:58,076
without patching the zip code
or taking example code here

316
00:18:58,166 --> 00:19:03,376
and seeing if you consult.log
or alert data.results,

317
00:19:04,326 --> 00:19:06,366
which come back as
an array or object.

318
00:19:06,636 --> 00:19:10,496
But see if you can jason.working
without worrying too much

319
00:19:10,496 --> 00:19:12,056
about what you do with the data.

320
00:19:12,736 --> 00:19:14,096
Just you know get it
working to the point

321
00:19:14,096 --> 00:19:15,726
where you are sending
a request to Google

322
00:19:15,726 --> 00:19:16,506
and you're getting
something back

323
00:19:16,506 --> 00:19:17,716
and you know that
part is working.

324
00:19:17,716 --> 00:19:20,696
>> It's very common in this,
like once you start dealing

325
00:19:20,696 --> 00:19:24,016
with Ajax requests and
things, like set up the call.

326
00:19:24,316 --> 00:19:26,896
Don't set up what you actually
want to do with the data yet.

327
00:19:27,096 --> 00:19:29,096
Just log to make sure
the data got there

328
00:19:29,096 --> 00:19:30,906
because if it didn't get there
then everything else you're

329
00:19:30,906 --> 00:19:33,226
doing isn't going to work yet.

330
00:19:34,136 --> 00:19:41,036
And if in Chrome, you should
get very familiar with,

331
00:19:41,596 --> 00:19:42,946
well I get to it by going here

332
00:19:42,946 --> 00:19:44,696
but there are other
ways to open this.

333
00:19:45,246 --> 00:19:48,206
This little console
tab down here

334
00:19:48,476 --> 00:19:51,376
so in this console tab you can
just type regular JavaScript

335
00:19:51,376 --> 00:19:52,806
or whatever you console that log

336
00:19:52,806 --> 00:19:54,776
in your JavaScript
files appear down here.

337
00:19:54,776 --> 00:19:56,476
I can show you that
pretty readily.

338
00:19:56,706 --> 00:19:59,296
For those interested how we
got there, you right click

339
00:19:59,406 --> 00:20:01,796
and click inspect element and
then click the console tab

340
00:20:01,896 --> 00:20:04,516
or in the view bar click view.

341
00:20:04,856 --> 00:20:12,266
In the view bar click
developer, JavaScript, console.

342
00:20:13,096 --> 00:20:15,666
That's the other way to get
this console to come up.

343
00:20:15,666 --> 00:20:19,256
And from here you can type in
JavaScript and so you can type

344
00:20:19,256 --> 00:20:20,426
in any JavaScript
you want in here.

345
00:20:20,426 --> 00:20:25,786
So like I happen to have
jQuery already loaded

346
00:20:25,786 --> 00:20:32,476
which means I can also
type jQuery on there

347
00:20:32,946 --> 00:20:35,036
so body.css background
color red.

348
00:20:35,956 --> 00:20:37,406
It's not css.

349
00:20:37,406 --> 00:20:40,506
It is style.

350
00:20:41,116 --> 00:20:44,526
I have no idea what it is.

351
00:20:45,816 --> 00:20:51,856
Background color boom.

352
00:20:52,736 --> 00:20:56,296
So you can interactively
place with your page

353
00:20:56,886 --> 00:20:58,786
in this little JavaScript
console

354
00:20:58,786 --> 00:20:59,956
to test out what things do.

355
00:21:00,546 --> 00:21:01,726
>> So let's say you were testing

356
00:21:01,726 --> 00:21:05,046
out a one line jQuery function
just to make sure you know

357
00:21:05,486 --> 00:21:07,906
that you're putting the right
line in your code trying

358
00:21:07,986 --> 00:21:11,256
to figure out which
line isn't working.

359
00:21:11,496 --> 00:21:15,626
>> And this is also
where, and so this is

360
00:21:15,626 --> 00:21:18,916
where like I insert
console.log ready here.

361
00:21:19,496 --> 00:21:22,486
So this is a very
proven thing that I do

362
00:21:22,486 --> 00:21:27,956
like when the document loads,
this function should be called

363
00:21:28,426 --> 00:21:31,336
and so I console.log to actually
verify that it is called.

364
00:21:32,086 --> 00:21:36,586
And so we reload this
page we see down here.

365
00:21:36,586 --> 00:21:42,476
And so ignoring this stuff
in the previous reload

366
00:21:42,476 --> 00:21:44,826
but every time I reload
you'll see another ready.

367
00:21:44,826 --> 00:21:47,346
Because when the document
is ready it's supposed

368
00:21:47,346 --> 00:21:48,216
to console.log that.

369
00:21:48,756 --> 00:21:51,486
>> And there are advanced
debugging tools that allow you

370
00:21:51,486 --> 00:21:54,136
to go through line by
line and make break points

371
00:21:54,136 --> 00:21:56,976
and pause your code but
sometimes when I'm kind

372
00:21:57,136 --> 00:22:00,056
of frustrated and want to figure
out which line isn't working,

373
00:22:00,606 --> 00:22:05,476
I'll put console.log12345
and I'll try to figure

374
00:22:05,476 --> 00:22:08,636
out which ones aren't showing
up, to figure out which blocks

375
00:22:08,636 --> 00:22:09,846
of my code aren't being run.

376
00:22:10,516 --> 00:22:22,496
[ Inaudible background
question ]

377
00:22:22,996 --> 00:22:28,786
>> I literally have no idea
and I want to ask David that.

378
00:22:28,786 --> 00:22:30,906
So basically there's three
things you're going to need

379
00:22:30,946 --> 00:22:33,546
to be Ajaxing for the P set.

380
00:22:33,756 --> 00:22:35,506
Two of them you need
to do jasonp.

381
00:22:36,316 --> 00:22:40,186
I could not figure out why
this one I did not need

382
00:22:40,186 --> 00:22:45,996
to so it's obviously something
so I'm just going to ask.

383
00:22:46,146 --> 00:22:52,056
I'll get back to you.

384
00:22:52,436 --> 00:22:55,326
I'll post it on the forum.

385
00:22:56,066 --> 00:22:57,976
Yeah there'll be, sure, sure.

386
00:22:58,486 --> 00:23:02,206
We'll take a break
or we can continue.

387
00:23:03,616 --> 00:23:05,626
>> We promise we
will not progress

388
00:23:05,626 --> 00:23:14,576
without an example solution
in the next seven minutes.

389
00:23:14,746 --> 00:23:18,226
So stretch your legs.

390
00:23:18,226 --> 00:23:24,796
I'm going to look up why.

391
00:23:24,996 --> 00:23:28,896
>> Lets first see whether this
is returning what I want it

392
00:23:28,896 --> 00:23:34,336
to be returning so I'm hoping
that this returns some stuff,

393
00:23:34,726 --> 00:23:37,256
like the geocode API says what
the return stuff looks like

394
00:23:37,256 --> 00:23:39,186
but let's just see
how this runs again.

395
00:23:39,186 --> 00:23:45,026
So H13 submit, so now since
I console.log over here,

396
00:23:45,476 --> 00:23:51,226
the stuff that got returned,

397
00:23:51,316 --> 00:23:53,936
that's what I should
be seeing down here.

398
00:23:53,936 --> 00:23:55,696
This and you'll see
that I can click on this

399
00:23:55,696 --> 00:23:58,576
to like expand the
object and inside

400
00:23:58,576 --> 00:24:00,776
of the object we
have a results array,

401
00:24:01,006 --> 00:24:06,356
inside of that we have
this guy so I'm going to,

402
00:24:06,496 --> 00:24:11,506
for simplicity I'm just
going to copy and paste.

403
00:24:11,506 --> 00:24:13,756
I won't copy and paste
just Cambridge, MA.

404
00:24:13,756 --> 00:24:15,316
I'll copy paste this way.

405
00:24:15,886 --> 00:24:25,356
We could go further and like
pars it but let's just do this.

406
00:24:25,356 --> 00:24:29,666
Or you could go into
the address components

407
00:24:30,236 --> 00:24:33,496
and actually we'll do that.

408
00:24:33,656 --> 00:24:36,846
Alright so you can also do this,

409
00:24:37,016 --> 00:24:41,126
just like see what the
object actually looks like.

410
00:24:41,126 --> 00:24:46,296
So now I know that in
data, data's going to have,

411
00:24:46,296 --> 00:24:54,486
we have data.results so there's
going to be array and inside

412
00:24:54,486 --> 00:25:00,396
of results we only care about
the first thing in the array.

413
00:25:01,076 --> 00:25:05,886
So this is how you traverse
objects is the .notation

414
00:25:06,506 --> 00:25:09,296
and results is an array.

415
00:25:09,296 --> 00:25:11,626
We just want the first
thing in that array.

416
00:25:11,626 --> 00:25:14,566
And so inside of
here so now we want

417
00:25:14,566 --> 00:25:19,406
to traverse address components
because we want to find first,

418
00:25:19,406 --> 00:25:23,196
we want to find Massachusetts,

419
00:25:23,686 --> 00:25:27,006
which apparently
the political type,

420
00:25:27,006 --> 00:25:33,436
and we want to find Cambridge
which is local so locality

421
00:25:33,616 --> 00:25:38,586
and administrative level 1
is what we're looking for.

422
00:25:38,586 --> 00:25:42,726
What I just said might
have been confusing

423
00:25:43,266 --> 00:25:47,306
but
data.result0.addresscomponents

424
00:25:47,306 --> 00:25:52,046
is an array of these address
components that contains

425
00:25:52,046 --> 00:25:55,256
like cambridgema02138usa.

426
00:25:55,816 --> 00:26:00,746
And so in those address
components we specifically want

427
00:26:00,816 --> 00:26:02,426
to find Cambridge and ma.

428
00:26:02,426 --> 00:26:10,106
And we can find those by
looking at the types specified

429
00:26:10,106 --> 00:26:17,216
in these components where
0213 has a type postal code,

430
00:26:17,216 --> 00:26:18,596
which is not surprising.

431
00:26:18,596 --> 00:26:27,086
And Cambridge has
the type locality,

432
00:26:27,086 --> 00:26:30,056
which is a little
less intuitive.

433
00:26:30,056 --> 00:26:39,116
And Massachusetts has
administrative area level1

434
00:26:40,016 --> 00:26:42,046
which is impossible.

435
00:26:42,246 --> 00:26:48,326
So the two things we are
looking for are city.

436
00:26:49,406 --> 00:26:54,286
I'll specify in here, I
just like initializing them

437
00:26:54,286 --> 00:26:57,666
to nothing, state equals null.

438
00:26:57,666 --> 00:26:59,976
So now we want to
traverse this array.

439
00:27:00,516 --> 00:27:09,546
[ Inaudible background comment ]

440
00:27:10,046 --> 00:27:15,676
And as a thing I'm going
to go over in a bit,

441
00:27:15,676 --> 00:27:23,816
you might also sometimes
see this sort of syntax

442
00:27:24,266 --> 00:27:27,726
so do not use this
syntax on arrays.

443
00:27:27,976 --> 00:27:31,396
This syntax is exclusively
for objects.

444
00:27:31,576 --> 00:27:34,306
So iterating over
objects is this syntax.

445
00:27:34,306 --> 00:27:37,606
The fact that there's two
different four loops is why a

446
00:27:37,606 --> 00:27:40,686
lot of libraries have a lot of
things like an each function

447
00:27:40,826 --> 00:27:43,766
which reads over
objects or arrays blindly

448
00:27:44,146 --> 00:27:48,166
but this is the syntax you
want to use for arrays,

449
00:27:48,166 --> 00:27:49,826
which is probably similar

450
00:27:49,826 --> 00:27:51,966
to other programming
languages you've ever used.

451
00:27:51,966 --> 00:28:01,166
Okay so as a shorthand I'm
going to just say that.

452
00:28:01,356 --> 00:28:06,286
And so now this is where I
tend to over consule.log.

453
00:28:06,476 --> 00:28:08,336
Let's make sure things
are working

454
00:28:08,336 --> 00:28:09,116
where we want them to be.

455
00:28:09,336 --> 00:28:14,446
So I'm just going to log
what code what code you can

456
00:28:14,446 --> 00:28:15,726
actually use.

457
00:28:15,726 --> 00:28:24,486
And it's coming back to
here, refresh, 02138.

458
00:28:25,006 --> 00:28:30,306
So we see four things were
logged where they're all objects

459
00:28:30,706 --> 00:28:34,596
and inside of those objects
are all these things.

460
00:28:35,386 --> 00:28:40,986
So in each of those objects we
want to look in the types to see

461
00:28:40,986 --> 00:28:42,956
if it has one of the
types we were looking for.

462
00:28:42,956 --> 00:28:45,996
We were looking for specifically
how many needs copies

463
00:28:46,146 --> 00:28:47,716
so locality and administrative
area level 1.

464
00:28:47,786 --> 00:28:51,956
So there are a couple of
different ways you can do this

465
00:28:52,036 --> 00:28:55,206
but how I'm going to do it
is if inside comp.types,

466
00:28:55,206 --> 00:28:58,136
so we want to look
inside comp.types and see

467
00:28:58,136 --> 00:28:59,656
if either these locality

468
00:29:00,296 --> 00:29:02,626
or administrative 1 is
inside of that array.

469
00:29:02,626 --> 00:29:04,636
And so to do that I'm going
to do .index of locality.

470
00:29:04,826 --> 00:29:09,006
And so if that returns negative
1, if it returns negative 1

471
00:29:09,006 --> 00:29:12,396
that means that locality is
not inside that locality array.

472
00:29:12,396 --> 00:29:13,566
If it returns anything
else it's going

473
00:29:13,596 --> 00:29:14,526
to return the index
of that string.

474
00:29:14,556 --> 00:29:16,086
And so if it returns the index
of that string that means

475
00:29:16,116 --> 00:29:16,866
that it is of the correct type.

476
00:29:16,896 --> 00:29:18,546
So here, if it doesn't equal
negative 1 then this component

477
00:29:18,576 --> 00:29:19,896
represents the locality
which is Cambridge, I think.

478
00:29:19,926 --> 00:29:20,976
So now we want to
store inside of city.

479
00:29:21,516 --> 00:29:29,196
[ Silence ]

480
00:29:29,696 --> 00:29:31,826
City equals comp.long_name.

481
00:29:31,896 --> 00:29:36,246
And I can look back here in case
I forgot what it actually is

482
00:29:36,246 --> 00:29:39,186
but yeah it's, if
locality is inside

483
00:29:39,726 --> 00:29:44,816
of this array then I
want either long name

484
00:29:44,816 --> 00:29:46,886
or short name, it
doesn't matter.

485
00:29:46,886 --> 00:29:51,066
Else if comp.types.indexof this
guy does not equal negative 1,

486
00:29:51,066 --> 00:29:54,926
this means I found the
state and so I'm going

487
00:29:54,926 --> 00:29:58,836
to store inside of state comp.

488
00:29:58,936 --> 00:30:01,436
and just so it's ma instead

489
00:30:01,586 --> 00:30:04,016
of Massachusetts I'll
store shortening.

490
00:30:04,266 --> 00:30:09,756
Okay and now after this
four loop I'm just going

491
00:30:10,036 --> 00:30:14,146
to do a sanity check where
if city is still null

492
00:30:14,146 --> 00:30:18,726
or state is still null, that
means that I was not able

493
00:30:19,736 --> 00:30:33,436
to find a city or state for
the zip code that you entered

494
00:30:33,526 --> 00:30:34,966
and things have gone wrong.

495
00:30:35,176 --> 00:30:37,236
I don't know what we'll do.

496
00:30:37,236 --> 00:30:38,576
Alert, uh oh and return.

497
00:30:38,576 --> 00:30:43,686
Okay else, now we have
our city and state

498
00:30:43,926 --> 00:30:47,216
so these guys are going
to need to go inside of,

499
00:30:47,216 --> 00:30:55,676
it's hard to pull this x,
notice we're still inside

500
00:31:02,256 --> 00:31:04,866
of this getjason function

501
00:31:04,866 --> 00:31:11,586
so after we have retrieved this
data, inside of this we're going

502
00:31:11,586 --> 00:31:18,966
to want to find the city and
state and now we still need

503
00:31:19,056 --> 00:31:24,236
to insert the city and
state into our div,

504
00:31:24,476 --> 00:31:30,216
which is exactly
what we did before.

505
00:31:31,326 --> 00:31:51,356
And the text is going to
be city plus, plus state.

506
00:32:38,516 --> 00:32:44,226
[ Silence ]

507
00:32:44,726 --> 00:32:47,516
Okay so questions
on what we just did?

508
00:32:51,216 --> 00:32:55,376
In the end we'll put
these online with comments

509
00:32:55,376 --> 00:32:59,876
on exactly what everything
is for.

510
00:33:00,856 --> 00:33:02,916
[inaudible background question]
So index of, if I give you,

511
00:33:03,796 --> 00:33:08,606
well we could run it in
the console and let's see

512
00:33:08,656 --> 00:33:18,356
so let's add this array,
let's do var array=1234

513
00:33:20,006 --> 00:33:22,336
so this is what array
looks like.

514
00:33:22,926 --> 00:33:26,096
Inside of this array if I
do arr.indexOf2 it's going

515
00:33:26,336 --> 00:33:31,646
to return 1, yes 1 is
the index of the value 2

516
00:33:32,106 --> 00:33:35,166
and index of 4 will return 3.

517
00:33:35,626 --> 00:33:39,316
But if I do index of 5
it will return negative 1

518
00:33:39,316 --> 00:33:40,726
because it was not
found in that array.

519
00:33:41,206 --> 00:33:43,406
So I'm using nxl
to see if locality

520
00:33:43,716 --> 00:33:48,976
or if administrative area level
1 are inside of the types array

521
00:33:49,706 --> 00:33:51,106
that I'm currently
searching through.

522
00:33:57,496 --> 00:33:58,826
And let's run this.

523
00:33:58,826 --> 00:34:07,856
I'll probably get
some sort of errors.

524
00:34:09,096 --> 00:34:11,026
Ooh, unexpected.

525
00:34:13,216 --> 00:34:18,516
[laughter] And this is stuff

526
00:34:18,576 --> 00:34:21,616
that you will be
doing for the project.

527
00:34:23,056 --> 00:34:25,736
It's unfortunate.

528
00:34:25,806 --> 00:34:28,466
I find the iterating through
those address components things

529
00:34:29,186 --> 00:34:35,316
tedious but Google just kind
of returns everything at you

530
00:34:35,536 --> 00:34:46,846
and you have to put it together
however you want it to be.

531
00:34:47,196 --> 00:34:48,006
[inaudible background
question] You're free,

532
00:34:48,476 --> 00:34:52,266
well the spec currently says
that you have to email us

533
00:34:52,266 --> 00:34:56,506
about any libraries you
want to use so do that.

534
00:34:57,606 --> 00:35:00,106
Underscore is fine is if
you want to use underscore.

535
00:35:00,396 --> 00:35:02,606
>> For those unfamiliar,

536
00:35:02,606 --> 00:35:04,696
underscore is a library
like jQuery.

537
00:35:04,696 --> 00:35:06,796
It gives you access
to more functions

538
00:35:06,796 --> 00:35:08,776
and some functions
that are handy.

539
00:35:09,086 --> 00:35:14,656
>> Yeah underscore can be
useful in this project.

540
00:35:16,036 --> 00:35:20,756
But if you like, if you don't
know jQuery then don't overwhelm

541
00:35:20,756 --> 00:35:21,896
yourself with libraries.

542
00:35:22,046 --> 00:35:23,936
Just use jQuery and
get use to that.

543
00:35:24,516 --> 00:35:33,516
[ Silence ]

544
00:35:34,016 --> 00:35:41,000
[ Inaudible background
question ]

545
00:35:42,056 --> 00:35:47,396
>> If you save it, what?

546
00:35:47,526 --> 00:35:49,636
[inaudible background
question] Yes so in JavaScript,

547
00:35:49,636 --> 00:35:52,556
unlike in C or other languages,

548
00:35:53,376 --> 00:35:56,936
there is no notion
of variable scoping.

549
00:35:57,516 --> 00:35:59,876
There is some notion but
there's basically only

550
00:35:59,876 --> 00:36:01,646
like global scope
and function scope.

551
00:36:01,916 --> 00:36:05,486
So in JavaScript if I
define a variable inside of,

552
00:36:05,486 --> 00:36:10,086
not inside of here, inside of
here, say blah equals hello.

553
00:36:11,206 --> 00:36:14,876
Then blah will still be
accessible down here,

554
00:36:15,296 --> 00:36:17,916
if it happened to be
defined inside that if.

555
00:36:18,146 --> 00:36:21,296
So like in C since it's defined
in that set of curly braces,

556
00:36:21,296 --> 00:36:23,586
it would not be available
outside

557
00:36:23,586 --> 00:36:24,746
of that set of curly braces.

558
00:36:24,996 --> 00:36:28,986
That's not true of JavaScript,
which means what I did up here

559
00:36:28,986 --> 00:36:32,306
with settings city equal to
null and state equal to null,

560
00:36:32,526 --> 00:36:38,476
I could also have just not
said that at all and so what

561
00:36:38,476 --> 00:36:44,206
that means is city is
going to be set in here

562
00:36:44,566 --> 00:36:46,076
and state will be set in here.

563
00:36:46,146 --> 00:36:50,886
And down here I can say,
and you saw this in lecture,

564
00:36:50,886 --> 00:36:56,806
but if this type of city
is undefined or type

565
00:36:56,806 --> 00:37:02,986
of state is undefined, so
what this is just saying is

566
00:37:03,036 --> 00:37:06,276
if those variables have not
been defined, that means we got

567
00:37:06,276 --> 00:37:08,666
through this whole four
loop without hitting lines,

568
00:37:08,666 --> 00:37:11,616
var city= whatever and
var state= whatever,

569
00:37:12,246 --> 00:37:15,006
which means we did not
find a city or state

570
00:37:15,006 --> 00:37:17,086
and we should alert
the same uh oh.

571
00:37:18,076 --> 00:37:23,896
So this pattern type of variable
equals undefined is your way

572
00:37:23,896 --> 00:37:25,876
of checking to see if
the variable exists.

573
00:37:26,606 --> 00:37:28,976
>> So for those still working
on this one, keep working

574
00:37:28,976 --> 00:37:30,266
on it, we'll float around.

575
00:37:30,266 --> 00:37:31,396
Those who have finished
this one.

576
00:37:32,476 --> 00:37:37,056
Something else you may
want to try is that instead

577
00:37:37,056 --> 00:37:40,216
of the [inaudible] field,
the geolocatingapi allows you

578
00:37:40,216 --> 00:37:44,676
to pass in a latitude
and longitude.

579
00:37:44,736 --> 00:37:51,906
So lat lng equals and
then latitude, longitude.

580
00:37:53,276 --> 00:37:56,466
So give that a try with
some made up numbers,

581
00:37:56,466 --> 00:37:57,766
numbers you got from
Google maps.

582
00:37:57,986 --> 00:38:01,236
And when that works try
using your current location.

583
00:38:01,946 --> 00:38:03,996
The way you can access
your current location is

584
00:38:03,996 --> 00:38:09,566
through a cool JavaScript
thing call geolocation used

585
00:38:09,666 --> 00:38:12,116
by navigator.geolocate.

586
00:38:12,786 --> 00:38:20,276
It takes a few call backs like
getjason did but take a look

587
00:38:20,396 --> 00:38:24,656
at some documentation
and see if you can figure

588
00:38:24,946 --> 00:38:28,466
out how the navigator.geolocate
function works in JavaScript.

589
00:38:29,086 --> 00:38:31,816
As a hint, it will give
you a matching longitude

590
00:38:31,906 --> 00:38:37,336
and you'll probably want to
send that long to Google.

591
00:38:37,786 --> 00:38:41,236
But try just getting
your current latitude

592
00:38:41,236 --> 00:38:46,116
and longitude using
navigator.geolocate.

593
00:38:48,276 --> 00:38:50,566
>> That says get current
location, that button.

594
00:38:51,386 --> 00:38:59,336
>> And the easiest way to try
it out, right from your console.

595
00:38:59,566 --> 00:39:04,076
Go to your console and
type in navigator.geolocate

596
00:39:05,356 --> 00:39:07,666
and then pass in whatever
you're supposed to pass in.

597
00:39:08,486 --> 00:39:15,366
It should work for you,
.geolocation, .geolocate.

598
00:39:17,526 --> 00:39:22,926
So you type in the
console .geolocation.

599
00:39:24,026 --> 00:39:26,146
The console tells us it
has two consoles inside

600
00:39:26,146 --> 00:39:29,976
of it getcurrentposition,
watchposition and clearwatch.

601
00:39:30,286 --> 00:39:33,876
We only care about the
last two but we want

602
00:39:33,876 --> 00:39:35,576
to get this getcurrentposition
function.

603
00:39:36,466 --> 00:39:41,796
And no arguments for example.

604
00:39:42,206 --> 00:39:50,256
So no arguments is not the
right way to call this function.

605
00:39:51,096 --> 00:39:53,566
It does take one
or more arguments.

606
00:39:53,566 --> 00:39:57,116
The call back function
is a lot like getjason.

607
00:39:57,466 --> 00:39:59,996
If you try it without them it
will tell you that you're wrong.

608
00:40:01,396 --> 00:40:04,596
But not to give what an
example callback would be

609
00:40:05,036 --> 00:40:09,826
but if you look it up it will
tell you what kind of function

610
00:40:09,826 --> 00:40:14,216
and what kind of
argument it's expecting.

611
00:40:14,216 --> 00:40:16,936
And my bottom left
corner does that, Rob.

612
00:40:16,936 --> 00:40:17,226
[inaudible background question]

613
00:40:17,226 --> 00:40:20,156
>> Yes so it's an html5 thing

614
00:40:20,156 --> 00:40:23,456
that in newer browsers they
have a navigator object

615
00:40:23,456 --> 00:40:25,596
that has this geolocation
ability.

616
00:40:25,746 --> 00:40:27,886
>> The same way you have a
document under geowindow object.

617
00:40:28,376 --> 00:40:34,536
It just comes kind of built in.

618
00:40:35,036 --> 00:40:39,726
>> You don't have
natural scrolling.

619
00:40:41,476 --> 00:40:41,786
>> Correct.

620
00:40:42,646 --> 00:40:53,686
>> So I looked up
developer.mozilla.word,

621
00:40:53,686 --> 00:40:54,666
that would be the first link.

622
00:40:54,666 --> 00:40:57,456
That tends to be a pretty
good site for documentation.

623
00:40:58,096 --> 00:41:02,416
And here you'll see that
this I recall it it has three

624
00:41:02,416 --> 00:41:04,766
parameters, success,
errors and options.

625
00:41:05,226 --> 00:41:07,926
So the only one you need
to specify here is success.

626
00:41:08,636 --> 00:41:11,176
But remember in the problem set

627
00:41:11,176 --> 00:41:13,546
that there should be
absolutely no way for us

628
00:41:13,546 --> 00:41:16,266
to trigger absolutely any
errors in your console,

629
00:41:16,316 --> 00:41:19,606
meaning like you should
never get any red warnings

630
00:41:19,606 --> 00:41:21,446
down here, in here.

631
00:41:21,996 --> 00:41:27,376
So you will probably want to,
in your project you're going

632
00:41:27,376 --> 00:41:30,006
to want to specify an
error function that's going

633
00:41:30,006 --> 00:41:31,736
to handle errors appropriately.

634
00:41:32,426 --> 00:41:33,216
If you don't specify

635
00:41:33,216 --> 00:41:36,966
that function then whenever
something goes wrong we're going

636
00:41:36,966 --> 00:41:41,646
to get red text in your console.

637
00:41:41,646 --> 00:41:44,466
So quick callback to
the previous exercise

638
00:41:44,466 --> 00:41:47,536
that we did before we got
into the geolocation stuff.

639
00:41:48,186 --> 00:41:50,616
An error that we did not
consider that I had meant

640
00:41:50,616 --> 00:41:54,086
to is what if I enter something
that is an invalid zip code?

641
00:41:54,356 --> 00:41:56,956
So even if it is a
set of five numbers

642
00:41:56,956 --> 00:41:57,896
that is an invalid zip code

643
00:41:57,896 --> 00:41:59,636
or Google doesn't have
any information about it?

644
00:42:00,156 --> 00:42:02,986
So this is something that
Google happens to say

645
00:42:02,986 --> 00:42:07,336
that it will return something
like its data on status will be

646
00:42:07,336 --> 00:42:09,256
like zero results or something.

647
00:42:09,976 --> 00:42:15,116
So if that is the case this is
just another error scenario you

648
00:42:15,116 --> 00:42:19,916
need to watch out for so another
alert uh oh, or whatever,

649
00:42:19,916 --> 00:42:23,986
because if you don't
look out for this then,

650
00:42:24,466 --> 00:42:27,736
I should do that right
here, if you don't look

651
00:42:27,736 --> 00:42:30,506
out for this then here when
you say our components equal

652
00:42:30,506 --> 00:42:34,306
data.results0, there
will not be a results0

653
00:42:34,306 --> 00:42:35,646
because that array
will be empty.

654
00:42:36,166 --> 00:42:41,256
So you need to be making
sure that everything is valid

655
00:42:41,256 --> 00:42:48,366
so that you don't get
any of these errors.

656
00:42:48,456 --> 00:42:53,026
And for the recent exercise,
now back to geolocation stuff,

657
00:42:53,436 --> 00:42:54,876
what I've changed so far is,

658
00:42:54,876 --> 00:42:57,006
like up there I've
changed the top to be

659
00:42:57,006 --> 00:42:58,906
from like a text field
to like a button.

660
00:42:59,186 --> 00:43:00,856
It says use current location.

661
00:43:01,236 --> 00:43:05,196
And now since I'm using a
button all the way up here,

662
00:43:05,356 --> 00:43:07,326
what we used to have
is on submit,

663
00:43:07,636 --> 00:43:10,516
since we're no longer submitting
a form we're just clicking a

664
00:43:11,296 --> 00:43:14,496
button, now I'm using a
different event handler.

665
00:43:14,736 --> 00:43:17,726
So the event now isn't
submit, it's click.

666
00:43:18,276 --> 00:43:21,096
So when we click this
button we're going

667
00:43:21,096 --> 00:43:22,806
to want to do our thing.

668
00:43:23,826 --> 00:43:27,216
And I've started with
using get chrome position,

669
00:43:27,436 --> 00:43:29,546
the success function is
going to take the position

670
00:43:29,976 --> 00:43:34,996
and then we need to do
things with that position.

671
00:43:34,996 --> 00:43:39,746
And over in the console
is an easy way, darn it,

672
00:43:41,256 --> 00:43:45,606
avigator.geolocation.getCurrent
Position functionpositionconsole

673
00:43:46,376 --> 00:43:48,846
.logposition, there you go.

674
00:43:49,786 --> 00:43:55,516
Okay, I did this just to
see what the object looks

675
00:43:55,516 --> 00:43:56,876
like that this is returning.

676
00:43:58,716 --> 00:44:01,826
And so I can look
in here and see

677
00:44:01,826 --> 00:44:05,896
that there's a time stamp
field and a chords field.

678
00:44:05,896 --> 00:44:09,526
And inside of chords there
is a latitude and longitude.

679
00:44:09,526 --> 00:44:13,516
So I'm going to directly
use those and I can say,

680
00:44:13,516 --> 00:44:15,296
this is unnecessary
but the latitude is

681
00:44:15,296 --> 00:44:17,676
position.chords.latitude,

682
00:44:17,676 --> 00:44:21,786
longitude is
position.chords.longitude

683
00:44:21,786 --> 00:44:28,856
and now inside of our URL we no
longer we want to use Google.

684
00:44:29,466 --> 00:44:31,906
Before this was address
and we used a zip code.

685
00:44:31,906 --> 00:44:32,996
Now we want to use latlng.

686
00:44:32,996 --> 00:44:35,206
And you can see this just
in Googles on the API page

687
00:44:35,206 --> 00:44:39,196
that you can use latitude and
longitude and I'll do lat+,

688
00:44:39,266 --> 00:44:41,346
I'm separating them, +long.

689
00:44:41,346 --> 00:44:42,736
So now we're using that.

690
00:44:42,736 --> 00:44:47,596
And let's see what the object
looks like that it's returning,

691
00:44:47,596 --> 00:44:50,406
refresh, no that's 3,
okay use current location.

692
00:44:50,406 --> 00:44:52,636
See object is it's
an array of like 9

693
00:44:52,636 --> 00:44:56,406
so we have 9 different
objects in here.

694
00:44:56,406 --> 00:45:00,016
I am still using the first one

695
00:45:00,846 --> 00:45:08,226
which we see contains
literally the entire address

696
00:45:08,226 --> 00:45:25,616
so 52 Oster Street, Harvard
University, Cambridge, MA 02138.

697
00:45:25,616 --> 00:45:36,296
The rest of these objects as we
go down will says United States.

698
00:45:36,296 --> 00:45:43,366
This one says Massachusetts,
USA and United States sequence

699
00:45:43,366 --> 00:45:47,056
of characters, Middlesex,
MA, USA.

700
00:45:47,056 --> 00:45:50,846
So as we go down this
results array we get more

701
00:45:51,156 --> 00:45:52,726
and more general areas along

702
00:45:52,726 --> 00:45:56,716
with some different
languages or something.

703
00:45:57,066 --> 00:46:01,646
So the top one is
good enough for us

704
00:46:01,646 --> 00:46:05,186
because we're still iterating

705
00:46:05,186 --> 00:46:10,156
over these address
components looking for locality

706
00:46:11,666 --> 00:46:17,836
and administrative area level 1.

707
00:46:17,836 --> 00:46:24,696
So we really didn't need
to change anything else

708
00:46:24,696 --> 00:46:28,096
to get this working
because all this up from

709
00:46:28,096 --> 00:46:29,916
when we're using zip
code still applies.

710
00:46:29,916 --> 00:46:30,976
We're just now using
lat and long.

711
00:46:31,516 --> 00:46:35,516
[ Silence ]

712
00:46:36,016 --> 00:46:43,000
[ Inaudible background
question ]

713
00:46:43,056 --> 00:46:43,186
Yes.

714
00:46:43,606 --> 00:46:56,356
>> Manhattan is a sub locality,
like New York, New York.

715
00:46:56,356 --> 00:46:59,606
So if I can have
everyone's attention

716
00:47:00,366 --> 00:47:03,156
for a little bit I'm going

717
00:47:03,156 --> 00:47:05,136
to introduce what will
be our next exercise.

718
00:47:05,286 --> 00:47:08,106
But if you want to keep
working on the previous two,

719
00:47:08,106 --> 00:47:10,886
wherever you are, I'll keep
floating, helping with anything.

720
00:47:11,226 --> 00:47:13,676
Or if you want to put those
aside and move onto this one,

721
00:47:13,826 --> 00:47:14,796
that's also totally fine.

722
00:47:14,796 --> 00:47:17,636
In the interest of making
sure we cover all the topics

723
00:47:17,636 --> 00:47:19,796
and lean toward the project,

724
00:47:19,936 --> 00:47:21,366
I'll just introduce
this next one.

725
00:47:22,106 --> 00:47:25,186
So we're actually going
to go back to html

726
00:47:25,186 --> 00:47:30,306
from the very exercise, just a
textbox and a button and a div.

727
00:47:30,306 --> 00:47:33,656
If you deleted that or extended
that it shouldn't be too much

728
00:47:33,656 --> 00:47:36,126
to make a new one with
textbox, button, div.

729
00:47:36,686 --> 00:47:39,236
The goal here is to play with
local storage and make it

730
00:47:39,266 --> 00:47:41,956
so that when you enter a word

731
00:47:41,956 --> 00:47:45,526
and hit submit it will add
it will add to this list.

732
00:47:45,526 --> 00:47:48,596
So the first thing I would do
is modify our exercise1 code

733
00:47:48,596 --> 00:47:50,616
from replacing to adding.

734
00:47:50,766 --> 00:47:53,416
Instead of just fully replacing
the html, you'll going to want

735
00:47:53,416 --> 00:47:56,106
to get the html that's
already there and add

736
00:47:56,106 --> 00:47:58,356
to it and put it back.

737
00:47:58,356 --> 00:48:00,746
That shouldn't be too much
of a change from exercise1.

738
00:48:01,286 --> 00:48:03,496
The local storage
however we want to make it

739
00:48:03,496 --> 00:48:06,436
when you refresh the page
or restore the browser

740
00:48:06,436 --> 00:48:08,796
and come back, the list stays.

741
00:48:08,896 --> 00:48:10,986
Think of this like the
to do list of words

742
00:48:11,456 --> 00:48:12,696
that I want to remember.

743
00:48:14,056 --> 00:48:17,686
So first exercise1, for
those doing this exercise,

744
00:48:17,686 --> 00:48:21,216
the very first thing you
do after running again,

745
00:48:21,506 --> 00:48:24,246
you now have add
instead of replacing.

746
00:48:24,816 --> 00:48:27,726
And then local storage
whereby you can set,

747
00:48:28,466 --> 00:48:31,626
you can save items
in local storage.

748
00:48:32,516 --> 00:48:37,666
So yeah, again any exercises
we've been talking about,

749
00:48:37,666 --> 00:48:40,076
we did just email
out the solution set,

750
00:48:40,406 --> 00:48:44,986
the draft of the solution
set from the previous ones

751
00:48:44,986 --> 00:48:46,936
so feel free to do
whichever exercise you like.

752
00:48:47,296 --> 00:48:52,356
If you're looking for a
tutorial on local storage,

753
00:48:52,516 --> 00:48:55,776
a quick Google search should
bring out the methods you use

754
00:48:55,776 --> 00:49:00,766
to put things in local storage
and bring them back out again.

755
00:49:00,766 --> 00:49:04,766
Rob just reminded me that
jQuery has an append function

756
00:49:05,106 --> 00:49:08,426
that will add onto
the content in a div

757
00:49:08,776 --> 00:49:16,846
so if this div was called
text$#text.appendworld,

758
00:49:17,476 --> 00:49:20,746
we'll put world after whatever's
inside of there so we'll need

759
00:49:20,746 --> 00:49:22,686
to get whatever's inside
of there, remember it,

760
00:49:22,686 --> 00:49:24,446
add to it, put it right back.

761
00:49:24,446 --> 00:49:28,316
Dollar sign, a selector and
then .append will allow you

762
00:49:28,316 --> 00:49:30,166
to add things to the
content of addend.

763
00:49:30,476 --> 00:49:33,886
So the extra is 1.html
that was sent out.

764
00:49:34,456 --> 00:49:36,496
This is literally the
only change so far.

765
00:49:38,236 --> 00:49:40,136
He's changing text to append,

766
00:49:41,046 --> 00:49:45,946
for those getting
closer to mine.

767
00:49:45,946 --> 00:49:46,806
[laughter]

768
00:49:46,806 --> 00:49:49,846
>> So the objective here is that
like after I refresh this page,

769
00:49:49,966 --> 00:49:54,216
all of these highs would
stay here but as of right now

770
00:49:54,386 --> 00:49:56,256
if I refresh they're gone.

771
00:49:56,256 --> 00:50:03,806
So as a teaser we have this
local storage object in html5

772
00:50:03,806 --> 00:50:11,936
and ignoring what's
already in that object

773
00:50:11,936 --> 00:50:17,166
that apparently RJ put
in there or something.

774
00:50:17,316 --> 00:50:24,336
You'll notice like if I
do localstorage.foo=bar.

775
00:50:25,016 --> 00:50:32,396
Now if I refresh the page
and look inside storage,

776
00:50:32,816 --> 00:50:34,876
we see that foo is still there.

777
00:50:35,246 --> 00:50:39,336
So this local storage object
persists beyond refresh

778
00:50:39,336 --> 00:50:41,266
of the page and look
inside of storage we see

779
00:50:41,266 --> 00:50:41,876
that foo is still there.

780
00:50:42,056 --> 00:50:47,066
And so you can store things
in that for subsequent visits

781
00:50:47,196 --> 00:50:49,256
to a page and you'll
probably want

782
00:50:49,256 --> 00:50:51,466
to be storing whatever
is inside of this div

783
00:50:51,466 --> 00:50:53,206
in that local storage
index somewhere.

784
00:50:54,516 --> 00:50:59,686
[ Inaudible background comment ]

785
00:51:00,186 --> 00:51:03,936
And for reference this is a
pretty common thing in jQuery

786
00:51:04,426 --> 00:51:08,656
where like here if
I say, let's see,

787
00:51:09,026 --> 00:51:11,296
if I say
exercise4-div.texthello,

788
00:51:11,376 --> 00:51:18,796
this would insert into
exercise4-div.hello.

789
00:51:19,526 --> 00:51:25,386
It would make the text
inside of this div hello.

790
00:51:25,786 --> 00:51:29,826
But if instead I used the
.text method with no argument,

791
00:51:29,826 --> 00:51:32,456
that retrieves the text
that is inside of that div.

792
00:51:33,346 --> 00:51:37,006
Okay so I'm just going to pick,

793
00:51:37,216 --> 00:51:39,646
you can pick whatever
name you want

794
00:51:39,646 --> 00:51:41,046
to store inside of
local storage.

795
00:51:41,046 --> 00:51:42,946
You can pick whatever the
key you want to call it.

796
00:51:42,946 --> 00:51:44,986
I'm going to call it divtext.

797
00:51:45,296 --> 00:51:49,856
So local storage
.divtext=alltext.

798
00:51:50,176 --> 00:51:56,766
Okay so now what
have I forgotten

799
00:51:56,766 --> 00:51:58,976
to do/why won't this
entirely work yet?

800
00:51:59,516 --> 00:52:04,596
[ Inaudible background comment ]

801
00:52:05,096 --> 00:52:09,376
Yes and that's fine
so the alternative

802
00:52:09,376 --> 00:52:13,396
to doing this is like,
so it's kind of like

803
00:52:13,396 --> 00:52:17,536
if my div currently
says helloworlddog

804
00:52:17,536 --> 00:52:21,976
or helloworldcat then my
local storage .divtext also

805
00:52:21,976 --> 00:52:23,176
says helloworldcat.

806
00:52:23,496 --> 00:52:27,836
And then if I proceed to add dog
I'm completely overwriting what

807
00:52:27,836 --> 00:52:30,166
is currently inside of
local storage .divtext.

808
00:52:30,166 --> 00:52:32,556
Instead I could just
append to it dog.

809
00:52:33,276 --> 00:52:35,066
So that is an alternative.

810
00:52:36,036 --> 00:52:40,216
But still if I miss
at least succeeds

811
00:52:40,216 --> 00:52:49,806
in now they say
localStorage.divtext.

812
00:52:51,096 --> 00:52:57,366
I see all that but
what is the issue

813
00:52:58,516 --> 00:53:04,556
[ Inaudible background comment ]

814
00:53:05,056 --> 00:53:07,796
I'm actually wondering if
that's going to be the case,

815
00:53:08,066 --> 00:53:09,396
ignoring that for now.

816
00:53:10,486 --> 00:53:13,746
Oh, I know why that
will be the case.

817
00:53:14,046 --> 00:53:19,366
[laughter] Why does it not
currently remember what was

818
00:53:19,366 --> 00:53:20,926
in global storage?

819
00:53:20,926 --> 00:53:24,686
It's remembering it but it
should reappear in this div.

820
00:53:24,936 --> 00:53:26,506
Why is it not reappearing
in the div?

821
00:53:27,516 --> 00:53:33,616
[ Inaudible background comment ]

822
00:53:34,116 --> 00:53:37,706
Because I'm updating local
storage .divtext whenever

823
00:53:37,706 --> 00:53:39,776
there's something added
to it but I'm never,

824
00:53:39,776 --> 00:53:43,806
when I refresh the
page I need to insert

825
00:53:43,806 --> 00:53:46,796
that text into the div.

826
00:53:46,876 --> 00:53:52,996
So I want to do that,
probably on ready.

827
00:53:53,286 --> 00:54:01,246
Okay so when the document
loads I want to insert

828
00:54:01,736 --> 00:54:05,266
into our exercise4div.

829
00:54:05,266 --> 00:54:07,826
I want to give it
the text and what is,

830
00:54:08,036 --> 00:54:11,136
okay the text we want
is localStorage.divtext.

831
00:54:11,136 --> 00:54:13,226
And I could insert
that directly in there

832
00:54:13,276 --> 00:54:15,076
but we'll see what this does.

833
00:54:15,206 --> 00:54:20,116
So it correctly inserts
the text into the div.

834
00:54:20,116 --> 00:54:27,636
Notice if I insert something,
let's do other letters.

835
00:54:27,636 --> 00:54:33,886
Oh there we go, so notice that
they're going on separate lines

836
00:54:33,886 --> 00:54:37,826
and that's correct because I
put a br tag here, line break.

837
00:54:37,826 --> 00:54:42,826
But if I refresh it all
ends up on the same line.

838
00:54:42,826 --> 00:54:46,616
And that's because of jQuery
you have to be careful

839
00:54:46,616 --> 00:54:49,596
of what function to use.

840
00:54:49,596 --> 00:54:52,996
So there's text and
there is html.

841
00:54:53,196 --> 00:55:03,586
So text grabs literally only
the text inside the data.

842
00:55:03,696 --> 00:55:08,336
Html will also grab all of
the relevant tags and dates.

843
00:55:08,486 --> 00:55:14,576
So it was ignoring the br
tags when I was using tags.

844
00:55:15,146 --> 00:55:20,056
But now we're using html so
something it still wrong.

845
00:55:20,056 --> 00:55:21,266
Let's see what it is.

846
00:55:21,266 --> 00:55:22,546
Refresh first, refresh
so now we see

847
00:55:22,546 --> 00:55:26,966
that all the br tags are
literally in the code and that's

848
00:55:26,966 --> 00:55:29,026
because of this text up here

849
00:55:29,226 --> 00:55:33,506
because we want this
to also be html.

850
00:55:33,506 --> 00:55:40,206
So when we say text
it was taking the html

851
00:55:40,296 --> 00:55:42,936
characters literally.

852
00:55:44,306 --> 00:55:46,256
Like I wanted a less
than sign right here.

853
00:55:46,286 --> 00:55:52,156
When we say html it
interprets the less than sign

854
00:55:52,546 --> 00:55:56,196
as the beginning
as the html tag.

855
00:55:56,196 --> 00:56:03,866
And there's one last thing that
we want to do and that is going

856
00:56:03,986 --> 00:56:11,986
to be, so a frequent
issue with local storage

857
00:56:12,396 --> 00:56:16,896
when you're working with,
so this looks good now,

858
00:56:16,896 --> 00:56:19,376
as we add things,
refresh and it's there.

859
00:56:19,436 --> 00:56:23,976
So frequent issue is like
alright now we want to start

860
00:56:23,976 --> 00:56:28,526
over so this works for
any array, any object

861
00:56:29,336 --> 00:56:35,276
and this is also true of
local storage so to do

862
00:56:35,276 --> 00:56:42,016
that we just type in our console
delete a localStorage.divtext.

863
00:56:42,016 --> 00:56:46,496
And so now it no
longer exists again.

864
00:56:46,496 --> 00:56:53,596
But what is going to
happen when I refresh?

865
00:56:53,646 --> 00:56:57,596
Not what I was expecting.

866
00:56:58,086 --> 00:56:58,836
Maybe that,

867
00:56:59,516 --> 00:57:04,546
[ Inaudible background comment ]

868
00:57:05,046 --> 00:57:11,176
So this is probably fighting me.

869
00:57:13,146 --> 00:57:19,146
Alright so I was hoping it
would yell at me but it's not.

870
00:57:20,586 --> 00:57:22,786
It will yell at you
depending on,

871
00:57:23,876 --> 00:57:25,456
so the issue here
is local storage

872
00:57:25,456 --> 00:57:27,796
but the text is not defined.

873
00:57:28,016 --> 00:57:35,106
And so here when we say
bartext=localstorage.divtext,

874
00:57:35,666 --> 00:57:37,266
text is undefined.

875
00:57:38,446 --> 00:57:40,196
Which just happens to
work out because inside

876
00:57:40,196 --> 00:57:42,836
if you ever say html
undefined it's just not going

877
00:57:42,946 --> 00:57:44,296
to put anything.

878
00:57:44,296 --> 00:57:45,376
The right way of doing this,

879
00:57:45,446 --> 00:57:47,956
and in the project you're
almost assuredly going to want

880
00:57:47,956 --> 00:57:48,816
to do this because
you're going to need

881
00:57:48,816 --> 00:57:50,656
to work local storage a
little bit differently,

882
00:57:51,196 --> 00:57:55,396
is to first say if, and
this is what we did before

883
00:57:55,466 --> 00:57:57,866
with if localStorage.divtext,

884
00:57:58,626 --> 00:58:05,316
is not undefined then
we'll do this stuff

885
00:58:05,736 --> 00:58:12,156
of actually inserting
it into the [inaudible].

886
00:58:12,156 --> 00:58:14,326
And this is the exact same
type of stuff we did before

887
00:58:14,326 --> 00:58:16,916
where we were like is this
variable actually defined?

888
00:58:17,356 --> 00:58:20,136
If so then we'll actually
use it and insert it.

889
00:58:21,016 --> 00:58:24,336
If it's not then avoid
any possible errors

890
00:58:24,336 --> 00:58:28,796
that might happen if we try
to use it as if it does exist.

891
00:58:30,236 --> 00:58:31,866
Questions on that?

892
00:58:33,516 --> 00:58:38,546
[ Background inaudible
question ]

893
00:58:39,046 --> 00:58:40,116
It looks for what?

894
00:58:40,116 --> 00:58:45,796
Yes so I was actually
going to ask David this

895
00:58:45,866 --> 00:58:48,776
but the answer is yes for an
application you really make.

896
00:58:48,906 --> 00:58:54,666
Remember local storage and also
our navigator.geolocation stuff.

897
00:58:54,876 --> 00:58:55,926
All of that is like html5.

898
00:58:55,926 --> 00:58:57,636
It's very new.

899
00:58:57,636 --> 00:59:01,306
If you go back to IE6 or
even like early Chrome

900
00:59:01,306 --> 00:59:03,346
and all this stuff, you
will not have those things.

901
00:59:03,436 --> 00:59:07,026
And so these will cause errors
if you go into earlier browsers.

902
00:59:07,566 --> 00:59:11,136
So technically we should
do something like if type

903
00:59:11,136 --> 00:59:15,716
of local storage does not equal
undefined that means we are

904
00:59:15,716 --> 00:59:21,806
in a html5 compliant browser
that has local storage support,

905
00:59:22,996 --> 00:59:24,466
then we can do this stuff.

906
00:59:24,836 --> 00:59:29,046
And that's, I don't have
it in this but same thing

907
00:59:29,046 --> 00:59:29,996
with the navigator stuff.

908
00:59:30,146 --> 00:59:33,246
If navigator does not
equal undefined then

909
00:59:33,246 --> 00:59:35,076
use navigator.geolocation.

910
00:59:35,296 --> 00:59:36,466
getcurrentposition.

911
00:59:37,756 --> 00:59:40,316
That is the right way
of making any app.

912
00:59:40,746 --> 00:59:43,586
Although if your app is using
a bunch of other features

913
00:59:43,586 --> 00:59:45,606
that your website will
basically be broken

914
00:59:45,606 --> 00:59:48,366
if it doesn't support
local storage,

915
00:59:48,366 --> 00:59:50,996
then usually what
happens is if type

916
00:59:50,996 --> 00:59:57,776
of local storage is actually
undefined or get a newer browser

917
00:59:57,876 --> 01:00:01,836
or something, which a lot
of websites actually do.

918
01:00:01,836 --> 01:00:03,426
Or a lot of websites
will say like turn

919
01:00:03,426 --> 01:00:04,966
on JavaScript and
stuff like that.

920
01:00:05,516 --> 01:00:14,346
[ Inaudible background
question ]

921
01:00:14,846 --> 01:00:16,036
Twenty five bars?

922
01:00:17,476 --> 01:00:18,686
[inaudible background
question] Oh yeah

923
01:00:18,686 --> 01:00:23,956
so this is what would have been
exercised by another 15 minutes.

924
01:00:24,596 --> 01:00:29,896
So local storage
only stores strings.

925
01:00:30,496 --> 01:00:36,326
And you will notice in the,
well you don't have to,

926
01:00:36,556 --> 01:00:41,156
but if you want to store an
array or an object inside

927
01:00:41,156 --> 01:00:45,056
of local storage then you'll
need to store them as strings.

928
01:00:45,496 --> 01:00:50,636
One way of doing that is this
convenient, so using in console,

929
01:00:51,106 --> 01:00:54,306
we have jason.pars
and jason.stringify.

930
01:00:54,946 --> 01:00:59,016
So what jason.strong5 is
let's a, we have some array.

931
01:01:02,876 --> 01:01:09,796
Then jason.stringify of that
array will return a string

932
01:01:09,796 --> 01:01:15,956
version of that array or
let's say string equals ix.

933
01:01:17,536 --> 01:01:23,286
And then if we jason.pars,
that string,

934
01:01:23,286 --> 01:01:25,876
it will return the
original array that we had.

935
01:01:26,426 --> 01:01:32,446
So inside of local storage,
let's say localstorage.array=x

936
01:01:33,376 --> 01:01:38,436
so when we refresh
this page and look

937
01:01:38,436 --> 01:01:44,306
at localstorage.x it's undefined
or we do not call it that.

938
01:01:45,196 --> 01:01:51,576
It shows this string 1, 2, 3,
4, which is not a valid array.

939
01:01:52,216 --> 01:01:57,106
And so the way we want to
store it is localstorage.array

940
01:01:57,106 --> 01:02:01,646
=jason.stringify
the array 1,2,3,4.

941
01:02:02,246 --> 01:02:07,986
Now when we refresh
the page and look

942
01:02:08,706 --> 01:02:13,936
at localstorage.array we see
it's in appropriate array form

943
01:02:13,936 --> 01:02:17,596
but it's still a string
and so we can jason.pars.

944
01:02:17,806 --> 01:02:25,276
And so we're just showing
these functions to you

945
01:02:25,276 --> 01:02:26,996
so that you know
they're available.

946
01:02:27,226 --> 01:02:29,976
You're probably going to want
to use them in the project.

947
01:02:30,456 --> 01:02:33,306
Remember localstorage cannot
store objects or arrays.

948
01:02:33,526 --> 01:02:36,456
So if you want to store them
you need to first stringify it

949
01:02:36,706 --> 01:02:38,016
and store it in local storage.

950
01:02:38,286 --> 01:02:38,906
And then when you want

951
01:02:38,906 --> 01:02:41,206
to retrieve it you
need to pars the jason.

952
01:02:46,276 --> 01:02:47,206
Questions?

953
01:02:48,516 --> 01:02:52,866
[ Silence ]

954
01:02:53,366 --> 01:02:55,946
>> Okay so those are
the exercises we had.

955
01:02:56,006 --> 01:02:58,846
The last 10 minutes will be more
free form question and answer.

956
01:02:58,846 --> 01:03:01,246
We'll float around
and definitely

957
01:03:01,246 --> 01:03:04,066
if you have any questions on
the problems you've been doing,

958
01:03:04,176 --> 01:03:06,186
the example solutions,
your own solutions,

959
01:03:06,506 --> 01:03:10,136
feel free to ask right now
or reach out to us via email

960
01:03:10,136 --> 01:03:14,116
or post to discuss where we
can discuss them as a group.

961
01:03:14,576 --> 01:03:18,546
>> And tonight we'll write up
like nice commented versions

962
01:03:18,546 --> 01:03:23,436
of the things I just
sent out to you.

963
01:03:23,436 --> 01:03:31,116
>> We'll just continue to float.

964
01:03:31,726 --> 01:03:34,486
>> Just to point
out, the syntax,

965
01:03:34,486 --> 01:03:38,926
localstorage.foo is exactly
the same as localstorage[foo]

966
01:03:38,926 --> 01:03:46,136
so any object you can
reference things in either way.

967
01:03:46,616 --> 01:03:54,456
The exception being you
can't say like .tilda

968
01:03:55,716 --> 01:04:03,486
or something but
you can say this.

969
01:04:05,666 --> 01:04:06,976
It's over.

970
01:04:07,516 --> 01:04:10,410
[ Silence ]