1
00:00:00,000 --> 00:00:02,850
[Section 9 - Less Comfortable]

2
00:00:02,850 --> 00:00:04,920
[Nate Hardison - Harvard University]

3
00:00:04,920 --> 00:00:07,230
[This is CS50. - CS50.TV]

4
00:00:07,230 --> 00:00:11,140
>> All right. So, last section of the semester.

5
00:00:11,140 --> 00:00:18,380
To start, I know that there have been some cries to do some Ajax,

6
00:00:18,380 --> 00:00:21,860
but are there any other topics that we should be doing first?

7
00:00:21,860 --> 00:00:24,960
Let me switch over to the iPad so that we have--

8
00:00:24,960 --> 00:00:29,160
Let me use black instead of orange.

9
00:00:29,160 --> 00:00:35,730
Ajax is on the menu. Any other?

10
00:00:35,730 --> 00:00:40,670
Any other topics that people want to see? I heard DOM too earlier.

11
00:00:40,670 --> 00:00:45,130
[student] jQuery. >>jQuery. Okay.

12
00:00:45,130 --> 00:00:49,190
jQuery. We can make a stab at that too.

13
00:00:49,190 --> 00:00:58,190
[student] XML. >>XML. >>[student] JSON. >>XML, JSON. Okay.

14
00:00:58,190 --> 00:01:06,390
PHP? All good? C? All good? >>[student] It wouldn't hurt to talk about PHP.

15
00:01:06,390 --> 00:01:10,890
Hash tables? Tries? Linked lists?

16
00:01:10,890 --> 00:01:16,970
[student] Oh, on the quiz from last year, there is a table for the omega and the big O.

17
00:01:16,970 --> 00:01:21,360
Yeah. >>[student] for the time for the different kinds of versions and illusions.

18
00:01:21,360 --> 00:01:25,140
Can we talk about that? >>Yeah. We'll talk about a little bit of data structures. 

19
00:01:25,140 --> 00:01:33,640
[student] Yeah. >>[student] Tries. >>[Hardison] Data structures.

20
00:01:33,640 --> 00:01:37,230
We'll talk about some tries for sure.

21
00:01:37,230 --> 00:01:42,530
[student] Can we have CSS a little bit? >>Yeah, we can do a little CSS.

22
00:01:45,280 --> 00:01:49,290
Any other topics? Sam? >>[student] Scope in PHP. >>[Hardison] Scope.

23
00:01:52,540 --> 00:01:56,760
Scope in PHP. >>[student] HTTP.

24
00:01:56,760 --> 00:02:01,410
HTTP. Awesome.

25
00:02:09,729 --> 00:02:14,380
I guess one way to do this would be to organize everything kind of chronologically

26
00:02:14,380 --> 00:02:17,930
and start with data structures since those were the earliest.

27
00:02:17,930 --> 00:02:23,480
Or we can assign these some sort of priority weighting and go from there.

28
00:02:23,480 --> 00:02:25,860
So what do you guys think?

29
00:02:25,860 --> 00:02:27,820
Is there something that everybody is dying to see?

30
00:02:27,820 --> 00:02:31,200
Let's do a raise of hands. How about Ajax?

31
00:02:31,200 --> 00:02:33,320
How many of you guys want to know about Ajax?

32
00:02:33,320 --> 00:02:37,870
How many of you are like, "Man, Ajax, I've got you"? Nobody. All right.

33
00:02:37,870 --> 00:02:40,900
So Ajax is pretty high. Let's star that guy.

34
00:02:40,900 --> 00:02:46,650
How about DOM? Everybody ready to rock DOM? No? Okay. We'll star that one too.

35
00:02:46,650 --> 00:02:49,040
jQuery?

36
00:02:50,330 --> 00:02:52,780
Queryless. Yes. Okay.

37
00:02:52,780 --> 00:02:56,380
A couple people for jQuery, but still people are a little more chill with that. Okay.

38
00:02:56,380 --> 00:03:03,000
XML? XML. >>[student] Do you use that more than in the context of Ajax?

39
00:03:03,000 --> 00:03:08,670
In the sense that-- Yes. 

40
00:03:08,670 --> 00:03:14,540
I mean, it is a key component of Ajax, so I guess we can bundle that with Ajax,

41
00:03:14,540 --> 00:03:16,700
chat about the whole thing there.

42
00:03:16,700 --> 00:03:21,830
JSON? What is JSON? Okay, cool.

43
00:03:21,830 --> 00:03:27,200
Data structures? People feeling pretty good there?

44
00:03:27,200 --> 00:03:29,640
You know your linked lists, know your hash tables?

45
00:03:29,640 --> 00:03:33,510
How did Speller go for everybody? That was a doozy, huh? Yeah. Okay.

46
00:03:33,510 --> 00:03:37,320
Yeah, we can talk a little bit about those but again, not as important.

47
00:03:37,320 --> 00:03:39,240
CSS? 

48
00:03:41,210 --> 00:03:43,960
Making your websites look pretty. Okay.

49
00:03:43,960 --> 00:03:50,670
Scope in PHP? One big hand over there. Two big hands, three. Okay.

50
00:03:50,670 --> 00:03:53,060
Maybe a medium hand. >>[student] More than 2.

51
00:03:53,060 --> 00:03:56,280
Yeah. Sam is campaigning. Get your hands up.

52
00:03:56,280 --> 00:04:00,910
HTTP? Okay.

53
00:04:00,910 --> 00:04:07,410
>> So let's see. It looks definitely like Ajax and the DOM are up for grabs.

54
00:04:07,410 --> 00:04:10,300
So let's start with that.

55
00:04:12,740 --> 00:04:16,380
I guess we have a couple of options here.

56
00:04:16,380 --> 00:04:21,040
One is to kind of do a recap of what Ajax and XML are

57
00:04:21,040 --> 00:04:26,520
since we didn't really have time to do that in section or in the problem sets.

58
00:04:26,520 --> 00:04:31,600
The other thing is to dive into some problems from previous years' quizzes

59
00:04:31,600 --> 00:04:33,990
and see what's going on there.

60
00:04:33,990 --> 00:04:40,210
Any preference between the 2? >>[student] I think concrete examples would be more helpful.

61
00:04:40,210 --> 00:04:42,820
Concrete examples more helpful? All right.

62
00:04:42,820 --> 00:04:46,300
Any ones in particular, those of you from the Ajax crew?

63
00:04:46,300 --> 00:04:48,840
Any problems you want to look at?

64
00:04:48,840 --> 00:04:54,850
[student] Is the event handler related to Ajax at all? I think that's--

65
00:04:54,850 --> 00:05:00,380
JavaScript event handlers don't necessarily relate to Ajax. They can.

66
00:05:00,380 --> 00:05:03,240
[student] Yeah, that's another concept that I don't actually get. >>Okay.

67
00:05:03,240 --> 00:05:06,670
[student] But I think in the quiz from the past year there is 1 big problem

68
00:05:06,670 --> 00:05:12,320
in the later parts of the quiz that's related to Ajax and the syntax that I didn't really--

69
00:05:12,320 --> 00:05:14,330
All right. And Ella?

70
00:05:14,330 --> 00:05:18,950
[student] I feel like I know what Ajax is but I wouldn't know how to use it.

71
00:05:18,950 --> 00:05:24,580
Okay. >>[student] I feel like I don't know what Ajax is or how to use it. [laughter]

72
00:05:24,580 --> 00:05:27,280
Okay. That works pretty well.

73
00:05:27,280 --> 00:05:34,700
Let's see. Let's maybe look at a good example of Ajax first.

74
00:05:34,700 --> 00:05:39,030
>> Welcome, welcome. I hope you are okay on camera.

75
00:05:39,030 --> 00:05:42,160
If not, you can hang out in the back.

76
00:05:44,610 --> 00:05:48,150
>> Good example of Ajax.

77
00:05:51,940 --> 00:05:54,650
Let me switch over to my laptop.

78
00:05:54,650 --> 00:05:57,690
Here we are at Google.com.

79
00:05:57,690 --> 00:06:05,460
How many of you guys have ever played the fun "How Do I?" game on Google?

80
00:06:05,460 --> 00:06:11,940
How do I--and you get to see all the fun things that come up--

81
00:06:11,940 --> 00:06:15,200
put this music on my Tumblr?

82
00:06:15,200 --> 00:06:18,100
And you can keep going and get all this sort of fun stuff.

83
00:06:18,100 --> 00:06:21,380
What is happening here?

84
00:06:21,380 --> 00:06:29,270
As you type in the Google query box, the real-time results are updating.

85
00:06:29,270 --> 00:06:37,380
So put this--and you notice that all of the results start updating on the Google web page.

86
00:06:37,380 --> 00:06:43,940
That's not something that's happening on your computer.

87
00:06:43,940 --> 00:06:47,870
The network is involved in this. Google is involved with this.

88
00:06:47,870 --> 00:06:56,180
It turns out that every time you press a key, like say G or L,

89
00:06:56,180 --> 00:06:58,770
and the search results update, what's happening 

90
00:06:58,770 --> 00:07:04,200
is there is some JavaScript on the page that's detecting that you pressed the key,

91
00:07:04,200 --> 00:07:14,750
and it is making a network request to Google.com to load up all of the latest results

92
00:07:14,750 --> 00:07:18,670
that best fit the query that you've typed so far.

93
00:07:21,610 --> 00:07:25,690
Unfortunately, I believe that if we were to look at this--

94
00:07:25,690 --> 00:07:32,690
I'm going to look at the source--most of this Ajax or JavaScript code in here

95
00:07:32,690 --> 00:07:37,830
is all minified and often scrambled a little bit too.

96
00:07:37,830 --> 00:07:43,180
The minification literally is a program you can run your JavaScript code through

97
00:07:43,180 --> 00:07:46,620
and it changes all your variable names and makes it totally unreadable

98
00:07:46,620 --> 00:07:49,180
but tries to make your JavaScript as short as possible

99
00:07:49,180 --> 00:07:52,090
so that when you send your JavaScript files over the network

100
00:07:52,090 --> 00:07:55,960
you're not having to load or send big files.

101
00:07:55,960 --> 00:07:57,960
So this stuff is pretty hard to read,

102
00:07:57,960 --> 00:08:03,450
but buried in here, what powers this typeahead--the buzzword for this--

103
00:08:03,450 --> 00:08:07,450
is Ajax requests.

104
00:08:07,450 --> 00:08:15,230
>> What makes an Ajax request different from any other kind of network request?

105
00:08:15,230 --> 00:08:18,820
Sam? >>[student] You don't change the URL. >>[Hardison] Right. Exactly.

106
00:08:18,820 --> 00:08:24,880
You notice as I type, "how do I put my jawbone in pairing mode?" [chuckles]

107
00:08:24,880 --> 00:08:28,100
There are always some fun-- Yeah.

108
00:08:28,100 --> 00:08:30,990
You notice that this URL up here at the top isn't changing,

109
00:08:30,990 --> 00:08:34,280
and the entire page isn't refreshing.

110
00:08:34,280 --> 00:08:39,590
So if we look at this kind of stuff right up here, this bar at the top, this Google,

111
00:08:39,590 --> 00:08:44,630
and then the black bar up here, which is often called the chrome of a web page,

112
00:08:44,630 --> 00:08:48,630
that's not changing. The entire page isn't refreshing.

113
00:08:48,630 --> 00:08:53,890
The Ajax request is used to refresh just the results of the page,

114
00:08:53,890 --> 00:08:59,450
just that 1 little part of the page so you're not having to go to an entirely different URL,

115
00:08:59,450 --> 00:09:04,690
an entirely different file, and load that into memory.

116
00:09:04,690 --> 00:09:12,640
So when you hear people talking about the dynamic Web 2.0 type of revolution,

117
00:09:12,640 --> 00:09:15,370
this was behind a lot of it.

118
00:09:15,370 --> 00:09:19,800
This is what enables you to write a wall post on Facebook, hit Post,

119
00:09:19,800 --> 00:09:26,350
and have the post appear without the entire Facebook page refreshing

120
00:09:26,350 --> 00:09:33,670
or scroll through a bunch of photos and load the photos dynamically,

121
00:09:33,670 --> 00:09:35,970
because how much would it suck if you went to your Facebook page,

122
00:09:35,970 --> 00:09:38,130
clicked on Photos, and then had to sit there and wait

123
00:09:38,130 --> 00:09:43,730
while all couple thousand of your Facebook photos loaded into memory?

124
00:09:43,730 --> 00:09:45,170
That's a huge load.

125
00:09:45,170 --> 00:09:48,360
But with Ajax you can do that asynchronously,

126
00:09:48,360 --> 00:09:54,810
and that's the asynchronous part of the Ajax.

127
00:09:54,810 --> 00:09:56,980
>> All right.

128
00:09:59,230 --> 00:10:04,370
Are we good? Does everybody kind of understand roughly what Ajax is doing?

129
00:10:04,370 --> 00:10:10,670
It's done by the JavaScript, it's done kind of dynamically and asynchronously

130
00:10:10,670 --> 00:10:12,540
after the page is loaded. 

131
00:10:12,540 --> 00:10:18,010
It often comes in after as kind of the response to an event,

132
00:10:18,010 --> 00:10:23,860
which is either a mouse click or a key press or something like that.

133
00:10:23,860 --> 00:10:30,820
And then it makes a call back to the server, whether you're on Google.com

134
00:10:30,820 --> 00:10:35,860
or Facebook.com, retrieves some new content to then display or update

135
00:10:35,860 --> 00:10:38,050
or anything like that.

136
00:10:38,050 --> 00:10:40,080
>> Cool. All right.

137
00:10:40,080 --> 00:10:45,260
Let's look at a couple of examples from previous years.

138
00:10:47,260 --> 00:10:49,140
We'll go to the quizzes.

139
00:10:49,140 --> 00:10:54,160
And then Charlotte, you were mentioning Quiz 1 from 2011. >>[student] Yeah.

140
00:10:54,160 --> 00:11:00,520
One thing I will caution is that in looking at previous years' quizzes

141
00:11:00,520 --> 00:11:07,970
you'll see this stuff called XHR often with relationship to Ajax.

142
00:11:07,970 --> 00:11:18,750
XHR and XML HttpRequest is kind of the raw way of doing Ajax, if you will.

143
00:11:18,750 --> 00:11:25,740
This year we've transitioned to almost entirely using this jQuery library.

144
00:11:25,740 --> 00:11:34,540
jQuery is a library of helper JavaScript functions and classes and all sorts of goodies,

145
00:11:34,540 --> 00:11:40,730
and jQuery kind of abstracts the raw XHR stuff away from you

146
00:11:40,730 --> 00:11:44,930
so that it's a lot easier to do the actual Ajax stuff.

147
00:11:44,930 --> 00:11:47,020
So as you're scrolling through these previous years' quizzes

148
00:11:47,020 --> 00:11:51,860
and you're seeing stuff that says XHR and new XML HttpRequest,

149
00:11:51,860 --> 00:11:54,490
all that kind of stuff, you can ignore that.

150
00:11:54,490 --> 00:11:56,520
Instead we're going just the jQuery way.

151
00:11:56,520 --> 00:12:00,490
We don't expect you to know XML HttpRequest.

152
00:12:00,490 --> 00:12:05,690
But good to know that it is synonymous with this idea of Ajax,

153
00:12:05,690 --> 00:12:13,620
this Asynchronous JavaScript fetching XML or JSON or whatever over the network.

154
00:12:13,620 --> 00:12:20,260
But originally, it was correlated with XML or connected to XML.

155
00:12:20,260 --> 00:12:22,440
>> All right.

156
00:12:24,090 --> 00:12:27,950
Let's scroll down. Do you remember which problem in particular, Charlotte?

157
00:12:33,080 --> 00:12:36,550
Was it this page that I'm looking at right here? >>[student] Yeah, I think so.

158
00:12:36,550 --> 00:12:38,810
[Hardison] Ah, I got it. Okay. Yeah.

159
00:12:38,810 --> 00:12:41,660
Let's talk about this really quickly.

160
00:12:44,640 --> 00:12:53,860
The way Ajax works is you've got some JavaScript file on your computer,

161
00:12:53,860 --> 00:12:59,570
and really it's running kind of in the context of your web browser.

162
00:12:59,570 --> 00:13:10,820
So if your final project is to make--I don't know--a new dating site for Harvard people

163
00:13:10,820 --> 00:13:15,000
and you want your dating site to have the ability to send anonymous messages

164
00:13:15,000 --> 00:13:19,130
from person to person or anonymous Facebook wall-like posts

165
00:13:19,130 --> 00:13:24,190
and you want to use Ajax in that somehow so that when you post a message

166
00:13:24,190 --> 00:13:26,960
it doesn't refresh the entire site,

167
00:13:26,960 --> 00:13:32,870
in your JavaScript code you would set up a new Ajax call.

168
00:13:32,870 --> 00:13:36,570
I'm debating about whether or not to do this on the laptop.

169
00:13:36,570 --> 00:13:45,940
The important part about the Ajax call is that there is this kind of asynchronicity to it

170
00:13:45,940 --> 00:13:50,250
in the sense that--let me switch back to my iPad--

171
00:13:52,120 --> 00:14:07,160
in the sense that if I have code that's going to say do some Ajax,

172
00:14:07,160 --> 00:14:11,160
then I can't on the very next line of my JavaScript code

173
00:14:11,160 --> 00:14:15,170
expect that the Ajax will have completed.

174
00:14:15,170 --> 00:14:24,260
What happens is that as your code runs sequentially in JavaScript,

175
00:14:24,260 --> 00:14:28,760
when you make this Ajax call, you're essentially forking off

176
00:14:28,760 --> 00:14:33,960
and sending a request out to the Internet to some server over here,

177
00:14:33,960 --> 00:14:37,740
which is this box I'm drawing and clearly not drawing it very well.

178
00:14:37,740 --> 00:14:41,280
You're forking off this call to the server that's going to take some time

179
00:14:41,280 --> 00:14:45,020
as it goes off to the Internet and goes and hits that server

180
00:14:45,020 --> 00:14:49,350
and goes and calls that PHP script that you've written on the back end

181
00:14:49,350 --> 00:14:55,110
to actually record that anonymous message in your database or something like that.

182
00:14:55,110 --> 00:15:01,640
So that will take some time, and then eventually when the server is done processing

183
00:15:01,640 --> 00:15:10,090
your Ajax request, it will return to your JavaScript code,

184
00:15:10,090 --> 00:15:15,190
but you don't really know where, at what point in the execution

185
00:15:15,190 --> 00:15:19,680
you're going to receive this response.

186
00:15:23,430 --> 00:15:28,620
How is this handled in JavaScript?

187
00:15:28,620 --> 00:15:36,510
This is where it comes into this problem that we're talking about on the laptop

188
00:15:36,510 --> 00:15:47,230
where you register a handler, you register a particular JavaScript function

189
00:15:47,230 --> 00:15:52,650
to run when the Ajax request is finished.

190
00:15:52,650 --> 00:15:58,010
You can't just make your Ajax call and then in the very next line of code

191
00:15:58,010 --> 00:16:01,570
assume that the Ajax call has completed.

192
00:16:03,670 --> 00:16:08,310
Part of the beauty of this is you want your JavaScript to continue to run

193
00:16:08,310 --> 00:16:13,210
after it's made the Ajax call because it can fork off this separate request

194
00:16:13,210 --> 00:16:15,750
and keep processing other things.

195
00:16:15,750 --> 00:16:19,300
You've got this kind of concurrency going here where your JavaScript continues to run

196
00:16:19,300 --> 00:16:23,520
and keep doing other fun things, could continue to spin out other Ajax requests.

197
00:16:23,520 --> 00:16:28,630
Your Ajax requests just go out to the network and then come back whenever they come back,

198
00:16:28,630 --> 00:16:33,390
but when you register this handler function,

199
00:16:33,390 --> 00:16:40,040
that's when you know that your Ajax call has returned because this function gets called.

200
00:16:40,040 --> 00:16:46,040
So instead of having this sequential execution path that we're used to in C,

201
00:16:46,040 --> 00:16:51,430
you have what's more similar to what we saw in Scratch at the beginning of the semester

202
00:16:51,430 --> 00:16:54,590
where you have these broadcasts

203
00:16:54,590 --> 00:17:00,930
and then you have these "when green flag clicked" or "when I receive this event."

204
00:17:00,930 --> 00:17:05,030
That's essentially what's happening here in JavaScript with these Ajax requests.

205
00:17:08,790 --> 00:17:11,940
>> For the answer to this question on line 20,

206
00:17:11,940 --> 00:17:15,500
"In the context of Ajax, what does this line of code do?"

207
00:17:15,500 --> 00:17:22,339
can somebody kind of paraphrase what I just said to confirm understanding?

208
00:17:22,339 --> 00:17:24,630
[student] I'm sorry. What does the left half of it say?

209
00:17:24,630 --> 00:17:28,600
[Hardison] xhr.onreadystatechange. Sorry. Am I getting cut off?

210
00:17:28,600 --> 00:17:31,360
This is that XHR syntax that we won't have to deal with.

211
00:17:31,360 --> 00:17:34,060
You have the similar concept with the jQuery.

212
00:17:34,060 --> 00:17:39,400
Let's go to Source Code, Wednesday, Index.

213
00:17:39,400 --> 00:17:45,020
Let's look this up. All right. Got it.

214
00:17:48,110 --> 00:17:52,700
Here is that Ajax syntax that we're talking about.

215
00:17:52,700 --> 00:17:56,270
Here you're specifying the Ajax request.

216
00:17:56,270 --> 00:18:03,590
You're saying, "This is the URL I want to go out and ping."

217
00:18:03,590 --> 00:18:09,250
"I want to use POST as opposed to GET."

218
00:18:09,250 --> 00:18:13,520
And then the data type is "I want JSON to be returned."

219
00:18:13,520 --> 00:18:15,670
Again, XML was kind of the traditional thing.

220
00:18:15,670 --> 00:18:18,600
But what we're looking for is that function.

221
00:18:18,600 --> 00:18:21,130
This is that right here.

222
00:18:21,130 --> 00:18:24,870
This function(response) is that onreadystatechange.

223
00:18:24,870 --> 00:18:30,300
This is the handler. This is what will execute when this request comes back.

224
00:18:30,300 --> 00:18:35,030
So you notice that this function that Tommy has written right here

225
00:18:35,030 --> 00:18:41,850
that we talked about in lecture on Wednesday was all about creating that fun typeahead for us.

226
00:18:41,850 --> 00:18:46,490
You notice that what he's doing is he's building the Ajax request

227
00:18:46,490 --> 00:18:52,680
and then there's nothing after the Ajax request.

228
00:18:52,680 --> 00:18:57,470
He's not processing the response of the Ajax request after the call is made.

229
00:18:57,470 --> 00:19:00,770
He's only doing it in this handler function

230
00:19:00,770 --> 00:19:05,170
that will be called as soon as the response does come back.

231
00:19:08,330 --> 00:19:12,580
>> Sam. >>[student] Do Ajax requests have to be of type POST or can it be GET?

232
00:19:12,580 --> 00:19:16,970
They can be either. >>[student] How would that work if you're not changing the URL?

233
00:19:16,970 --> 00:19:22,280
How would that work if you're not changing the URL?

234
00:19:22,280 --> 00:19:26,400
It just depends on where the data is going.

235
00:19:26,400 --> 00:19:30,450
So the question is can Ajax requests be POST or GET?

236
00:19:30,450 --> 00:19:37,730
That's where it can be either. It's just really a semantic difference between POST and GET.

237
00:19:40,460 --> 00:19:45,670
GET typically means that you're just reading something from the server

238
00:19:45,670 --> 00:19:50,940
and you're not changing anything, whereas a POST typically implies

239
00:19:50,940 --> 00:19:54,390
that you're writing data or you're writing something to a server.

240
00:19:54,390 --> 00:19:59,500
Often you use POST when you're trying to change state somewhere.

241
00:19:59,500 --> 00:20:04,400
That's why logins always go with HTTP POST, 

242
00:20:04,400 --> 00:20:07,940
whereas Google makes a bunch of GET requests.

243
00:20:07,940 --> 00:20:19,850
Actually, if we go back to our Google example and if we look at our developer tools here,

244
00:20:19,850 --> 00:20:25,360
let's look at the developer tools here at the bottom and open up the network.

245
00:20:25,360 --> 00:20:32,910
As we start typing, you can see all of these GET requests coming in.

246
00:20:36,240 --> 00:20:40,260
You see all these GET requests here at the bottom of the screen

247
00:20:40,260 --> 00:20:44,550
that are all of these xjs.

248
00:20:44,550 --> 00:20:52,390
This is the Ajax request coming back.

249
00:20:52,390 --> 00:20:59,680
And if we were to click on it, we can see what it's saying and what its response is.

250
00:20:59,680 --> 00:21:04,190
It's giving us all this information about the response that we got

251
00:21:04,190 --> 00:21:09,430
when we sent to Google the headers that were down here.

252
00:21:09,430 --> 00:21:15,380
Let's see if it has-- It will have our query string somewhere.

253
00:21:19,060 --> 00:21:22,310
Request URL. Yeah.

254
00:21:22,310 --> 00:21:31,630
Original query, ignore bad query, second pass, how I meter--

255
00:21:31,630 --> 00:21:35,900
Anyway, somewhere in here you can find this "how I meter" query

256
00:21:35,900 --> 00:21:39,010
in the request made to the server.

257
00:21:39,010 --> 00:21:42,480
And then the response coming back is what we're seeing.

258
00:21:42,480 --> 00:21:45,120
So yes, it can be either GET or POST.

259
00:21:45,120 --> 00:21:50,650
It tends to be just a semantic difference. We can cover that with HTTP. Yes, Ella?

260
00:21:50,650 --> 00:21:55,360
>> [student] Is the difference between JSON and XML just that JSON is more modern?

261
00:21:55,360 --> 00:22:00,730
Is the difference between JSON and XML that JSON is more modern?

262
00:22:04,100 --> 00:22:09,900
XML and JSON are just 2 different ways of encoding data.

263
00:22:15,130 --> 00:22:20,540
XML is the Extensible Markup Language.

264
00:22:20,540 --> 00:22:29,390
HTML is a subset of XML.

265
00:22:29,390 --> 00:22:34,650
So for example, let's pull up TextEdit.

266
00:22:34,650 --> 00:22:44,990
XML is just defined as data that's enclosed in a series of tags.

267
00:22:44,990 --> 00:22:52,820
So html, /html, these guys are valid tags.

268
00:22:52,820 --> 00:22:57,470
Let's blow up this size here and make it more readable.

269
00:23:00,130 --> 00:23:02,070
hello!

270
00:23:02,070 --> 00:23:06,300
XML just defines a tag as being something like this

271
00:23:06,300 --> 00:23:09,880
where you have an open angle bracket, the name of the tag,

272
00:23:09,880 --> 00:23:15,870
and then any number of attributes, which in HTML we often don't have attributes.

273
00:23:15,870 --> 00:23:25,820
But for example, if we had a script tag, often it has the type of text, JavaScript.

274
00:23:30,130 --> 00:23:35,770
And inside of the tags is data.

275
00:23:37,600 --> 00:23:44,650
In true XML you can actually define these tags to be whatever you want.

276
00:23:44,650 --> 00:23:46,840
It's just a way of structuring your information.

277
00:23:46,840 --> 00:23:53,800
So for example, if I wanted to encode my family in XML,

278
00:23:53,800 --> 00:24:01,500
I could do something like this, like father and then put information about him

279
00:24:01,500 --> 00:24:09,240
and brother and put information about my brother.

280
00:24:09,240 --> 00:24:18,370
Just this way of structuring your data is XML.

281
00:24:18,370 --> 00:24:24,220
JSON, on the other hand, follows the JavaScript Object Notation,

282
00:24:24,220 --> 00:24:27,140
hence J-S-O-N, JSON.

283
00:24:27,140 --> 00:24:34,040
So rather than writing with this kind of tag, close tag type format,

284
00:24:34,040 --> 00:24:39,290
we instead write it as a JavaScript object.

285
00:24:39,290 --> 00:24:45,000
So the JavaScript object has the curly brace to open things

286
00:24:45,000 --> 00:24:48,700
and then a curly brace to close things.

287
00:24:48,700 --> 00:24:53,580
Let me zoom out a little bit, zoom in.

288
00:24:53,580 --> 00:24:59,790
And then what you have are the names of fields, so "father":

289
00:24:59,790 --> 00:25:05,480
and then I could put information about him

290
00:25:05,480 --> 00:25:12,990
and then "brother": and information about my brother.

291
00:25:16,930 --> 00:25:23,040
And of course everything in here is--

292
00:25:23,040 --> 00:25:26,340
I guess what's nice about JSON as opposed to XML

293
00:25:26,340 --> 00:25:35,750
is because a JSON object is in this object notation that JavaScript has.

294
00:25:35,750 --> 00:25:43,600
JavaScript can really easily pull that into memory and treat it just as a JavaScript object

295
00:25:43,600 --> 00:25:45,500
right when you receive it back from the server.

296
00:25:45,500 --> 00:25:49,460
There's no parsing that it really has to do that's heavy duty or heavy lifting,

297
00:25:49,460 --> 00:25:55,690
whereas with XML you have to use either plugins or some sort of--

298
00:25:55,690 --> 00:25:59,130
Depending on what exactly you're transmitting

299
00:25:59,130 --> 00:26:04,770
and what you're using to receive the XML, you might have to do a little bit more work parsing,

300
00:26:04,770 --> 00:26:10,090
whereas this JavaScript stuff, if you're just writing with JavaScript

301
00:26:10,090 --> 00:26:14,780
and you're receiving JavaScript back, it's really easy to work with.

302
00:26:16,590 --> 00:26:19,890
The other thing that people will also mention sometimes

303
00:26:19,890 --> 00:26:23,630
is that with XML you have all of these open tags and close tags,

304
00:26:23,630 --> 00:26:30,620
so it can get big, it can get a little bloated.

305
00:26:30,620 --> 00:26:33,990
So there are some who will talk about how with JSON

306
00:26:33,990 --> 00:26:42,280
you don't have all these open tags and close tags, so it's more compressed.

307
00:26:42,280 --> 00:26:47,350
The reason that that's important is that when you have to load things over the network

308
00:26:47,350 --> 00:26:50,040
when you're talking to a remote server,

309
00:26:50,040 --> 00:26:55,010
the less that needs to be transmitted over the Internet, the faster everything goes.

310
00:26:56,890 --> 00:26:59,700
Anyway, the key takeaway here is they are just 2 different ways of structuring your data,

311
00:26:59,700 --> 00:27:02,150
formatting your data.

312
00:27:04,950 --> 00:27:06,110
>> All right.

313
00:27:06,110 --> 00:27:08,230
Other questions? Charlotte?

314
00:27:08,230 --> 00:27:11,280
[student] Can I ask 1 last question about the syntax of Ajax? >>Sure.

315
00:27:11,280 --> 00:27:16,590
[student] If you go back to the example code and just zoom out a little bit,

316
00:27:16,590 --> 00:27:19,280
there's just 1 line of code above.

317
00:27:19,280 --> 00:27:21,530
Can we just go up? 

318
00:27:21,530 --> 00:27:24,260
on('keyup', function()

319
00:27:24,260 --> 00:27:30,670
Is that set of empty parentheses after on('keyup' referring to the function after success?

320
00:27:30,670 --> 00:27:33,580
[Hardison] No.

321
00:27:33,580 --> 00:27:35,450
A couple of things here.

322
00:27:35,450 --> 00:27:43,170
on('keyup', this is a way of doing the equivalent in Scratch

323
00:27:43,170 --> 00:27:50,330
of when a key is pressed and you lift up off of the key.

324
00:27:50,330 --> 00:27:57,440
Actually, in JavaScript you have on('keydown', on('keyup', and on('keypress',

325
00:27:57,440 --> 00:28:06,340
and you can do things on each of those 3 different events.

326
00:28:06,340 --> 00:28:11,060
This is registering an event handler any time a key comes up,

327
00:28:11,060 --> 00:28:16,210
and then this function is this entire thing

328
00:28:16,210 --> 00:28:19,560
all the way down to there.

329
00:28:19,560 --> 00:28:23,880
This function doesn't have a name.

330
00:28:23,880 --> 00:28:25,580
Kind of weird.

331
00:28:25,580 --> 00:28:31,500
All of our functions we've done in C and PHP have all had names.

332
00:28:31,500 --> 00:28:39,900
This is what we call an anonymous function. Makes sense, right? No name. Anonymous.

333
00:28:39,900 --> 00:28:43,550
What's handy about the anonymous function?

334
00:28:43,550 --> 00:28:47,860
Clearly, we can't call this function anywhere else in our code.

335
00:28:47,860 --> 00:28:53,920
How would we call this function elsewhere in our code? We can't.

336
00:28:56,540 --> 00:29:03,120
There's no name. I can't say, "Oh yeah, call that function that I said with on('keyup'."

337
00:29:05,080 --> 00:29:08,190
What's handy about it though is that in JavaScript

338
00:29:08,190 --> 00:29:11,100
when we are constantly registering these event handlers--

339
00:29:11,100 --> 00:29:17,510
that's what this is called; you're registering this function as a handler when a key comes up--

340
00:29:17,510 --> 00:29:23,830
is it's really nice to be able to just define these functions kind of inline and just say,

341
00:29:23,830 --> 00:29:28,840
"When the keyup is pressed, remember this function that I'm going to define right here,

342
00:29:28,840 --> 00:29:35,340
and it will remember this function and then it will do this function

343
00:29:35,340 --> 00:29:37,590
whenever the key comes up.

344
00:29:37,590 --> 00:29:41,930
We'll talk about this more once you get more into functional programming.

345
00:29:41,930 --> 00:29:46,080
This is a little bit of a taste of that where we're essentially passing a function around

346
00:29:46,080 --> 00:29:49,960
as an object, almost as if it were like a variable.

347
00:29:49,960 --> 00:29:54,410
Rather than passing a string or an int, we're passing a function.

348
00:29:56,000 --> 00:30:00,400
That's kind of a weird thing, but what's nice is that all of the variables in here,

349
00:30:00,400 --> 00:30:08,020
inside of this function, the scoping issues are nice

350
00:30:08,020 --> 00:30:18,500
because if you have a variable up here, you can refer to that variable inside of this function

351
00:30:18,500 --> 00:30:22,720
because this function is declared inside of this other function.

352
00:30:22,720 --> 00:30:26,670
So you get to have benefits like that.

353
00:30:26,670 --> 00:30:31,290
Again, that's something that is more meta. You'll cover it in future classes.

354
00:30:31,290 --> 00:30:36,150
>> Yeah. >>[student] Since the function is anonymous, can it be used somewhere else?

355
00:30:36,150 --> 00:30:40,750
Or can it only be used in the context of this function?

356
00:30:40,750 --> 00:30:45,460
[Hardison] It's used only in the context of this function. Yeah. Yes?

357
00:30:45,460 --> 00:30:48,860
>> Does it have something to do with the fact that it's an object-oriented language?

358
00:30:48,860 --> 00:30:52,650
[Hardison] Does it have something to do with the fact that it's object-oriented?

359
00:30:58,000 --> 00:31:03,190
I would say that this has more to do with the fact that this has functional aspects.

360
00:31:03,190 --> 00:31:05,640
We're talking about the object-oriented paradigm of programming,

361
00:31:05,640 --> 00:31:09,890
and this is kind of one of those aspects of the functional paradigm of programming

362
00:31:09,890 --> 00:31:17,520
where you are making functions that are composed of other functions

363
00:31:17,520 --> 00:31:22,460
and you are passing functions around.

364
00:31:22,460 --> 00:31:25,040
>> [student] So JavaScript is a function language also.

365
00:31:25,040 --> 00:31:28,420
It has elements of it, yes. Yeah.

366
00:31:28,420 --> 00:31:30,000
JavaScript and many--

367
00:31:30,000 --> 00:31:35,120
PHP has some of this too, Python has this same sort of stuff,

368
00:31:35,120 --> 00:31:43,390
Ruby has this sort of stuff as well, and this is common in more of these modern languages.

369
00:31:43,390 --> 00:31:49,660
You really get these scripting languages that are kind of jack-of-all-trades.

370
00:31:49,660 --> 00:31:53,180
It's like the big fatty Swiss Army knife, the one that you can't even put in your pocket

371
00:31:53,180 --> 00:31:55,090
because it's too wide.

372
00:31:55,090 --> 00:31:57,970
That's kind of how some of these languages have become.

373
00:32:01,190 --> 00:32:04,520
>> Any other questions? All right.

374
00:32:04,520 --> 00:32:06,280
How are you guys feeling?

375
00:32:06,280 --> 00:32:13,830
Let's go back to that quiz really quick and see if we can answer 21 and 20.

376
00:32:13,830 --> 00:32:22,030
We talked about 20 as we registered this handler.

377
00:32:22,030 --> 00:32:31,550
This question here, "What would be the effect if we wrote that line with a pair of parentheses?"

378
00:32:31,550 --> 00:32:34,680
you see the difference, how up at the top there are no parentheses

379
00:32:34,680 --> 00:32:38,370
and down here there are parentheses after the function name?

380
00:32:38,370 --> 00:32:43,520
One thing that is important to note,

381
00:32:43,520 --> 00:32:45,410
here we're referring to a function.

382
00:32:45,410 --> 00:32:48,780
This is not an anonymous function. It's been given a name, handler,

383
00:32:48,780 --> 00:32:52,580
whereas in our Ajax over here that we were just looking at,

384
00:32:52,580 --> 00:32:58,260
all of the functions that we were passing around were all anonymous: no function name,

385
00:32:58,260 --> 00:33:00,400
no function name.

386
00:33:00,400 --> 00:33:05,670
So it is common practice to define these functions kind of inline as anonymous functions

387
00:33:05,670 --> 00:33:08,660
for some of the scoping benefits.

388
00:33:08,660 --> 00:33:15,340
You could very well have defined this function right here or this on('keyup' function.

389
00:33:15,340 --> 00:33:22,400
You could have defined this guy as functions with names elsewhere in your JavaScript code,

390
00:33:22,400 --> 00:33:27,650
and then instead of defining the function here, you would pass the name of the function

391
00:33:27,650 --> 00:33:31,320
right in this spot.

392
00:33:31,320 --> 00:33:36,570
One thing to note is that you wouldn't want to use the parentheses

393
00:33:36,570 --> 00:33:39,400
if you were passing the name of the function,

394
00:33:39,400 --> 00:33:44,480
because when you use the parentheses, you're implying "call this function,"

395
00:33:44,480 --> 00:33:48,820
whereas instead here we just want to pass the name of the function.

396
00:33:53,740 --> 00:34:02,400
If we look at what's going on here, the big difference is that this top line of code says

397
00:34:02,400 --> 00:34:08,420
effectively, maintain a pointer to the function called handler,

398
00:34:08,420 --> 00:34:11,820
and when the Ajax call completes, call this function,

399
00:34:11,820 --> 00:34:17,210
actually perform the function, plug in the arguments, do all of that work,

400
00:34:17,210 --> 00:34:23,480
whereas this line down here says instead of maintaining a pointer

401
00:34:23,480 --> 00:34:30,389
to the function called handler, this onreadystatechange field

402
00:34:30,389 --> 00:34:33,980
is going to hold the result of a function called to handler,

403
00:34:33,980 --> 00:34:38,409
so it's going to evaluate handler, it's going to actually call handler right now--

404
00:34:38,409 --> 00:34:41,250
not when the Ajax call completes but right now,

405
00:34:41,250 --> 00:34:43,940
which is not what you want to do if you're writing something

406
00:34:43,940 --> 00:34:48,150
to deal with an Ajax call that's completed.

407
00:34:56,520 --> 00:35:02,250
>> All right. Questions about that? It's a subtle difference.

408
00:35:03,640 --> 00:35:06,340
It's a subtle difference.

409
00:35:06,340 --> 00:35:09,710
One thing I would definitely suggest doing if you haven't done it--

410
00:35:09,710 --> 00:35:15,040
because this is new stuff; it takes a while for it to really sink in

411
00:35:15,040 --> 00:35:17,840
unless you actually type some of this stuff out--

412
00:35:17,840 --> 00:35:23,340
I'd encourage you to go through the source code

413
00:35:23,340 --> 00:35:25,610
that Tommy presented in lecture on Wednesday

414
00:35:25,610 --> 00:35:30,690
because he definitely went through a lot of stuff, kind of in a blur.

415
00:35:30,690 --> 00:35:32,980
I'd actually try typing it out.

416
00:35:32,980 --> 00:35:35,120
Try coding some stuff up.

417
00:35:35,120 --> 00:35:40,530
Make a .js file. Type out the code yourself. Don't just copy and paste.

418
00:35:40,530 --> 00:35:42,890
Don't just run CP.

419
00:35:42,890 --> 00:35:47,380
Try doing that just to kind of flex your JavaScript muscle.

420
00:35:47,380 --> 00:35:49,490
See what the things are.

421
00:35:49,490 --> 00:35:58,830
For example, here I'm looking at quote7.js in the source code from Wednesday's lecture.

422
00:35:58,830 --> 00:36:04,150
Try going in and instead of just making all of these functions anonymous,

423
00:36:04,150 --> 00:36:10,470
copy this code, literally go down to this success code,

424
00:36:10,470 --> 00:36:17,270
copy this, paste it into another function, and give it a name,

425
00:36:17,270 --> 00:36:22,370
and then try passing the name in and see what happens.

426
00:36:22,370 --> 00:36:26,320
[student] Could that be in a separate file or in the same file?

427
00:36:26,320 --> 00:36:29,900
It could be in a separate file if you properly include it.

428
00:36:29,900 --> 00:36:34,170
One thing that's going to be--

429
00:36:34,170 --> 00:36:42,770
The trick is does this function refer to any of the variables that are outside of it?

430
00:36:42,770 --> 00:36:49,990
And I think it only refers to response.

431
00:36:49,990 --> 00:36:51,640
Yeah.

432
00:36:56,360 --> 00:36:59,280
You can name this.

433
00:36:59,280 --> 00:37:03,150
You can pull it out, you can give it a name, and then you can pass the name in here.

434
00:37:03,150 --> 00:37:07,390
So I'd give that a try, see how that works.

435
00:37:09,990 --> 00:37:13,530
>> All right. Questions? Questions? I love questions.

436
00:37:13,530 --> 00:37:16,460
I don't know about you guys, but I like them.

437
00:37:19,120 --> 00:37:21,320
How are you guys feeling about this?

438
00:37:21,320 --> 00:37:26,910
There's kind of this, "Oh, crap" mood in the room. [students chuckle]

439
00:37:26,910 --> 00:37:32,030
Is that kind of how you guys are feeling? >>[student] Yeah. >>Yeah? Yes, Daniel?

440
00:37:32,030 --> 00:37:35,270
>> [student] I think I understand kind of the overall concepts that you're talking about,

441
00:37:35,270 --> 00:37:37,920
like the anonymous functions and all this stuff,

442
00:37:37,920 --> 00:37:42,490
but I don't understand half the syntax that's up there right now,

443
00:37:42,490 --> 00:37:46,510
like what ul means, li, these different tags.

444
00:37:46,510 --> 00:37:51,840
I don't think I'd be able to code something with JavaScript. >>Fair.

445
00:37:51,840 --> 00:37:59,960
Is that a common feeling, common sentiment, it sounds like? Okay.

446
00:37:59,960 --> 00:38:03,370
[student] Will we need to? >>Will we need to code?

447
00:38:03,370 --> 00:38:09,280
You should be prepared to dissect something like this, I would say.

448
00:38:09,280 --> 00:38:15,550
I'm not the one writing the exam,

449
00:38:15,550 --> 00:38:18,770
but I would definitely say that if that is a common sentiment,

450
00:38:18,770 --> 00:38:23,020
kind of that a lot of this syntax here looks like, "What the hell is going on?"

451
00:38:23,020 --> 00:38:27,900
"I'm totally swimming," then let's talk about that and fix that.

452
00:38:29,080 --> 00:38:30,520
Sound good?

453
00:38:30,520 --> 00:38:32,150
All right.

454
00:38:32,150 --> 00:38:36,550
>> So what's going on here? Let's take this line by line.

455
00:38:36,550 --> 00:38:38,300
Let's try going around the room.

456
00:38:38,300 --> 00:38:41,440
I'm just going to call on people 1 by 1, and give me your best guess.

457
00:38:41,440 --> 00:38:44,470
We'll do it fast. You've got 5 seconds to answer.

458
00:38:44,470 --> 00:38:46,130
If you don't answer, we move to the next person.

459
00:38:46,130 --> 00:38:48,460
And it's not a big deal because I know this is crazy stuff.

460
00:38:48,460 --> 00:38:52,520
We'll start over here. Charlotte, what does this line do?

461
00:38:52,520 --> 00:38:54,450
[student] It's creating a variable called suggestions

462
00:38:54,450 --> 00:38:57,890
and setting it equal to whatever ul is. >>[Hardison] Right.

463
00:38:57,890 --> 00:39:02,220
>> Jimmy, what is ul?

464
00:39:02,220 --> 00:39:07,740
[student] I don't know. >>[Hardison] Okay, cool. Charlotte was totally right.

465
00:39:07,740 --> 00:39:11,680
This line of code that I've highlighted right here declares a variable called suggestions,

466
00:39:11,680 --> 00:39:13,710
a JavaScript variable.

467
00:39:13,710 --> 00:39:18,760
We've got this var keyword in front which makes sure that the variable stays local

468
00:39:18,760 --> 00:39:21,140
to the scope that it's in.

469
00:39:21,140 --> 00:39:28,490
And this ul thing that we haven't seen before really,

470
00:39:28,490 --> 00:39:34,290
let's see if there's a good-- Let me switch back to my iPad.

471
00:39:36,270 --> 00:39:37,860
New page.

472
00:39:37,860 --> 00:39:40,700
I'm sure you guys have seen the ul before.

473
00:39:40,700 --> 00:39:42,620
It's an unordered list.

474
00:39:42,620 --> 00:39:45,590
So have you ever seen on a web page where you have the bullets

475
00:39:45,590 --> 00:39:56,970
and you have Thing 1, Thing 2, and so on and so forth?

476
00:39:56,970 --> 00:40:00,770
This is an unordered list.

477
00:40:00,770 --> 00:40:09,120
The way you would code this in HTML is you'd start with an open tag

478
00:40:09,120 --> 00:40:19,060
that opens the unordered list, you'd close it with a close tag that closes the unordered list,

479
00:40:19,060 --> 00:40:31,820
and then in the middle you'd have to list items, li.

480
00:40:31,820 --> 00:40:43,110
And inside the li's would be the text to display, so Thing 1 and Thing 2.

481
00:40:43,110 --> 00:40:49,400
Then we'd close our list item tags.

482
00:40:54,130 --> 00:41:01,110
Unordered lists are super common because it's a great way to get the same styling

483
00:41:01,110 --> 00:41:03,720
applied to a row of things.

484
00:41:03,720 --> 00:41:08,170
So if you look in, for example, the pset 7 code,

485
00:41:08,170 --> 00:41:12,710
a lot of the nav pills, the navigation pills that were used for the different links

486
00:41:12,710 --> 00:41:18,740
to Buy, Sell, Quote, History, all of that, those are implemented as unordered lists,

487
00:41:18,740 --> 00:41:23,160
and they used CSS to remove these bullet points

488
00:41:23,160 --> 00:41:27,530
and kind of change things around slightly.

489
00:41:27,530 --> 00:41:33,920
That's kind of the power of the CSS is that the HTML describes the structure.

490
00:41:33,920 --> 00:41:36,680
We've got a list of list items.

491
00:41:36,680 --> 00:41:41,360
It's unordered. There's no first, second, or third. It's just a list.

492
00:41:41,360 --> 00:41:45,020
And so by default it will draw it with just bullets.

493
00:41:45,020 --> 00:41:50,270
If we instead had written ol, so I'm going to change this to an ol list

494
00:41:50,270 --> 00:41:53,870
as opposed to a ul, what would that do?

495
00:41:53,870 --> 00:42:01,840
It would get rid of these bullets, and the default would instead be a numbered list

496
00:42:01,840 --> 00:42:04,020
because now we've got ordering.

497
00:42:09,700 --> 00:42:14,840
The styling of the list is then what you play around with in CSS,

498
00:42:14,840 --> 00:42:21,620
and that's where the folks who wrote the Bootstrap library for CSS played around

499
00:42:21,620 --> 00:42:30,030
with the styling of an unordered list to get it to display those nice little nav pills.

500
00:42:30,030 --> 00:42:33,730
If we look at Google, for example, let's take a look at this guy.

501
00:42:33,730 --> 00:42:38,450
Back to "how I meter your mother"--sounds kind of German.

502
00:42:38,450 --> 00:42:43,490
I love German. It sounds so fun.

503
00:42:43,490 --> 00:42:47,040
I'm sorry if there are any German folks watching who feel offended.

504
00:42:47,040 --> 00:42:51,550
Anyway, if we look at these links up here at the top

505
00:42:51,550 --> 00:42:57,610
and we look at what's going on there, we can inspect it using this guy.

506
00:42:57,610 --> 00:42:59,430
I'm way down here in the corner.

507
00:42:59,430 --> 00:43:01,690
Developer tools on Chrome is awesome.

508
00:43:01,690 --> 00:43:05,780
If you guys start to play around with it or look up tutorials for it, it will help a lot

509
00:43:05,780 --> 00:43:07,620
if you're doing web-based projects.

510
00:43:07,620 --> 00:43:10,720
I click my little inspector. I'm going to scroll back up here.

511
00:43:10,720 --> 00:43:15,680
I'm going to see what all these guys are.

512
00:43:15,680 --> 00:43:19,300
I zoom in. I'm going to click on these.

513
00:43:19,300 --> 00:43:25,850
Then I can zoom back out and see what it actually is in the HTML way down here.

514
00:43:25,850 --> 00:43:30,050
It looks like Google has nested it in an ordered list.

515
00:43:30,050 --> 00:43:36,220
So we've got this span that says +You, and that's nested inside an anchor tag,

516
00:43:36,220 --> 00:43:41,030
so that's what makes it clickable and it links it to my Google+ page.

517
00:43:41,030 --> 00:43:47,130
It's nested inside a list item,

518
00:43:47,130 --> 00:43:49,670
and it's nested inside this ordered list.

519
00:43:49,670 --> 00:43:55,060
And now if I actually click the list item, it will highlight it for me up there.

520
00:43:55,060 --> 00:43:59,530
If I highlight the unordered list, you see how the focus goes at the top.

521
00:43:59,530 --> 00:44:03,460
It shifts up and shows me the entire ordered list.

522
00:44:03,460 --> 00:44:08,380
So Google has just played around with the styling to get these lists to show up like that.

523
00:44:08,380 --> 00:44:15,510
That's enough fun with lists. Back to the quiz or this stuff.

524
00:44:15,510 --> 00:44:19,260
Now we know what an unordered list is--hopefully.

525
00:44:19,260 --> 00:44:28,690
>> Let's talk about this next line of code, for (var i in response.symbols). Ella.

526
00:44:28,690 --> 00:44:35,980
[student] I have no idea. >>[Hardison] No idea.

527
00:44:35,980 --> 00:44:40,290
Okay. You've seen a for loop before, I presume. >>[student] Yeah.

528
00:44:40,290 --> 00:44:43,930
[Hardison] Do you remember doing for each in PHP? >>[student] Yes.

529
00:44:43,930 --> 00:44:46,340
[Hardison] This is exactly that.

530
00:44:46,340 --> 00:44:51,210
This is a for each loop in JavaScript.

531
00:44:51,210 --> 00:45:00,860
This is a shorter way than doing the for (var i=0; i<response.symbols.length; i++),

532
00:45:00,860 --> 00:45:04,400
which we could do,

533
00:45:04,400 --> 00:45:08,620
but this is a more concise way of writing it.

534
00:45:08,620 --> 00:45:17,530
One thing to be careful of in JavaScript is that this doesn't necessarily follow the order.

535
00:45:17,530 --> 00:45:23,030
If response.symbols is presumably an array,

536
00:45:23,030 --> 00:45:33,140
var i will be an index into this array, but it isn't necessarily the 0 and then the 1

537
00:45:33,140 --> 00:45:36,340
and then the 2 and then the 3.

538
00:45:36,340 --> 00:45:47,360
They do say use the for (var i=0) if you care about the ordering.

539
00:45:47,360 --> 00:45:55,860
I guess the other thing to note is that when we used a for each in PHP,

540
00:45:55,860 --> 00:46:03,470
we specified the array name first and then we had the as keyword

541
00:46:03,470 --> 00:46:07,490
and then we specified the value that we wanted to retrieve from the array.

542
00:46:07,490 --> 00:46:12,680
Or we could specify both the key and the value that we wanted to retrieve from the array.

543
00:46:12,680 --> 00:46:16,730
Here we're just getting the index.

544
00:46:16,730 --> 00:46:22,090
We're not getting the actual element itself.

545
00:46:22,090 --> 00:46:29,510
So you see that when we go down here we are actually having to retrieve the ith element

546
00:46:29,510 --> 00:46:34,810
out of the response.symbols object.

547
00:46:37,680 --> 00:46:46,400
The other thing that's crazy about this is you can use this to loop over objects in JavaScript

548
00:46:46,400 --> 00:46:52,070
and retrieve each of the properties of that object 1 by 1.

549
00:46:52,070 --> 00:46:57,950
If we went back to that JavaScript Object Notation depiction of my family

550
00:46:57,950 --> 00:47:03,280
where it was literally those curly braces and father, brother, mother, all that,

551
00:47:03,280 --> 00:47:06,420
you could use a for loop to iterate over that as well

552
00:47:06,420 --> 00:47:10,130
and retrieve the properties 1 by 1.

553
00:47:10,130 --> 00:47:12,110
Kind of crazy.

554
00:47:14,120 --> 00:47:18,200
So what we're doing, it looks like, is we're building up an HTML string

555
00:47:18,200 --> 00:47:22,220
just like this comment says, "build html string for a list of suggestions."

556
00:47:22,220 --> 00:47:26,340
We're going to start out with our open tag for our unordered list

557
00:47:26,340 --> 00:47:30,110
in which we presume we're going to store all the suggestions as list items.

558
00:47:30,110 --> 00:47:36,490
Then we're going to loop over all of the symbols in the response

559
00:47:36,490 --> 00:47:39,230
because remember this is a typeahead for CS50 Finance,

560
00:47:39,230 --> 00:47:44,180
so we're pulling out the stock symbols 1 by 1.

561
00:47:44,180 --> 00:47:50,410
And then we're adding to our suggestions string what?

562
00:47:50,410 --> 00:47:53,880
>> Jared, what does this look like?

563
00:47:53,880 --> 00:48:00,140
[student] It seems like it's grabbing from some kind of database

564
00:48:00,140 --> 00:48:02,250
whatever letter you're typing in,

565
00:48:02,250 --> 00:48:06,640
leaving some kind of suggestion what word-- >>[Hardison] Yeah.

566
00:48:06,640 --> 00:48:10,490
The Ajax request already actually did go and grab that. This is our response.

567
00:48:10,490 --> 00:48:14,890
This is actually after we've gotten the response from the database, from the server.

568
00:48:14,890 --> 00:48:20,150
>> And so what is this? What does this single quote thing denote?

569
00:48:20,150 --> 00:48:23,990
[student] The single quote? >>[Hardison] Yeah. It's just a string, right?

570
00:48:23,990 --> 00:48:26,930
And so what is this crafting?

571
00:48:26,930 --> 00:48:31,080
It's a string and we're putting stuff in the string. And what is the string looking like?

572
00:48:31,080 --> 00:48:35,140
[student] Just the suggestion that we're-- >>[Hardison] Yeah, exactly.

573
00:48:35,140 --> 00:48:43,050
It's the suggestion nested inside an anchor tag,

574
00:48:43,050 --> 00:48:49,570
and that is also anchored inside a list item so that it will go inside the list.

575
00:48:49,570 --> 00:48:56,790
Literally, all we're doing here is we're just building up a big HTML string.

576
00:48:56,790 --> 00:49:02,570
We're just building it up literally as a string in memory.

577
00:49:02,570 --> 00:49:04,740
We're not doing anything fancy.

578
00:49:04,740 --> 00:49:09,660
We're not creating new nodes in the DOM or anything like that.

579
00:49:09,660 --> 00:49:15,030
We're literally just building a string as if you were to write out, for example,

580
00:49:15,030 --> 00:49:21,220
on your iPad like I have--in case you guys have an iPad and like writing HTML on your iPad--

581
00:49:21,220 --> 00:49:33,250
you're just writing a big long string that's like ul, li, a...

582
00:49:33,250 --> 00:49:38,440
and then we're of course going to terminate it with this ul.

583
00:49:38,440 --> 00:49:41,410
So that's all we're getting is 1 big, massive string.

584
00:49:43,750 --> 00:49:51,180
And inside there's an li and an a for each of the symbols that we found.

585
00:49:54,210 --> 00:50:01,760
>> And now, continuing on, what does this line do, Stella, right here?

586
00:50:01,760 --> 00:50:06,670
What does this line do right here?

587
00:50:06,670 --> 00:50:11,560
[inaudible student response]

588
00:50:11,560 --> 00:50:14,970
[Hardison] Yeah. It's just adding this guy.

589
00:50:14,970 --> 00:50:17,650
We're just ending our list. Exactly.

590
00:50:17,650 --> 00:50:25,430
>> And then this final line--and this looks kind of goofy--

591
00:50:25,430 --> 00:50:30,230
I'm sorry. I don't know your name in the red sweatshirt. Do you know what this does?

592
00:50:30,230 --> 00:50:33,270
Or are you going to decide no?

593
00:50:33,270 --> 00:50:38,560
And you? >>[student] It calls jQuery on it, but I don't exactly know which function it is.

594
00:50:38,560 --> 00:50:40,490
[Hardison] Yeah. It calls jQuery.

595
00:50:40,490 --> 00:50:42,870
How about anybody here over on the left side of me?

596
00:50:42,870 --> 00:50:51,110
Do you know what this line does? What does it seem like it's doing if you had to guess?

597
00:50:51,110 --> 00:50:57,620
[student] Submitting to the HTML the list of suggestions, or is it--

598
00:50:57,620 --> 00:50:59,410
Yeah. What do you mean by submitting?

599
00:50:59,410 --> 00:51:04,370
[student] Saying to HTML what we just dealt with in JavaScript

600
00:51:04,370 --> 00:51:07,560
is now definitely just HTML. >>[Hardison] Yeah.

601
00:51:07,560 --> 00:51:10,600
That's a great start.

602
00:51:10,600 --> 00:51:12,100
Let's dissect this a little more.

603
00:51:12,100 --> 00:51:14,140
That's exactly what this part is doing right here.

604
00:51:14,140 --> 00:51:17,660
[student] What aspect of it makes it clear that it's jQuery?

605
00:51:17,660 --> 00:51:20,380
[Hardison] jQuery is this dollar sign guy.

606
00:51:20,380 --> 00:51:25,630
Whenever you're writing jQuery, you will see this dollar sign all over the place.

607
00:51:25,630 --> 00:51:36,020
This has just been used in jQuery as kind of a special symbol.

608
00:51:36,020 --> 00:51:38,280
It does a whole bunch of things.

609
00:51:38,280 --> 00:51:46,980
In the context of this right here, this part of the line, it is a selector.

610
00:51:46,980 --> 00:51:53,350
It is the jQuery selector, and it is selecting the HTML element

611
00:51:53,350 --> 00:51:58,440
that has the ID suggestions.

612
00:51:58,440 --> 00:52:01,730
Remember how HTML elements can have that ID attribute

613
00:52:01,730 --> 00:52:06,920
where you can have a paragraph tag that has ID suggestions?

614
00:52:06,920 --> 00:52:13,380
This jQuery selector will grab that element

615
00:52:13,380 --> 00:52:18,000
because that element has to exist somewhere in memory.

616
00:52:18,000 --> 00:52:21,120
JavaScript is able to kind of pinpoint that element and say,

617
00:52:21,120 --> 00:52:24,830
"Oh, okay, you are the paragraph that has this ID,"

618
00:52:24,830 --> 00:52:34,940
and then this .html says, "Okay, replace the current HTML inside of you

619
00:52:34,940 --> 00:52:41,210
"with this new string, this new HTML that I'm going to give you."

620
00:52:41,210 --> 00:52:49,950
So if we look back over at the iPad--ha, ha, I remembered to switch this time--

621
00:52:49,950 --> 00:53:07,470
you often insert into things like divs, so imagine we had a div that had id="suggestions";

622
00:53:07,470 --> 00:53:13,080
We're going to close the div tag down here.

623
00:53:13,080 --> 00:53:21,500
When we use the jQuery selector to grab the element in the DOM

624
00:53:21,500 --> 00:53:29,270
that has the ID of suggestions, it literally selects this entire div right here,

625
00:53:29,270 --> 00:53:37,920
and then the HTML method says, "Replace all of this stuff right in here

626
00:53:37,920 --> 00:53:41,840
"right in that ul, that unordered list that we just built up."

627
00:53:41,840 --> 00:53:47,170
Literally, if you were viewing the entire HTML file's string in memory,

628
00:53:47,170 --> 00:53:51,750
you would just say, "Go into that spot and plunk in that ul stuff,"

629
00:53:51,750 --> 00:53:57,210
and then update the page so that you now see the unordered list there.

630
00:53:57,210 --> 00:54:04,510
So what this has effectively done is it's dynamically updated this div.

631
00:54:04,510 --> 00:54:08,980
The code that we just saw on the laptop has updated this div

632
00:54:08,980 --> 00:54:13,760
to hold the new suggestions that were retrieved from the server somewhere.

633
00:54:13,760 --> 00:54:18,790
[student] Which suggestions represents the new suggestions and the old suggestions?

634
00:54:18,790 --> 00:54:21,070
The new suggestions and the old suggestions.

635
00:54:21,070 --> 00:54:24,950
[student] What represents which one is being replaced and which one is doing the replacing?

636
00:54:24,950 --> 00:54:26,400
[Hardison] Got it.

637
00:54:26,400 --> 00:54:29,110
See right here, this guy is a string.

638
00:54:29,110 --> 00:54:34,580
This specifies the ID of an element--we call it in the DOM--

639
00:54:34,580 --> 00:54:40,570
which literally just means some HTML element that is somewhere being displayed

640
00:54:40,570 --> 00:54:42,490
on the web page.

641
00:54:42,490 --> 00:54:47,830
If we were to look at this, if we go back to our Google page,

642
00:54:47,830 --> 00:54:53,460
we see all these divs and these ol's and these li's and these a's.

643
00:54:53,460 --> 00:55:00,020
These all constitute the HTML elements that currently make up this page.

644
00:55:00,020 --> 00:55:08,140
These all correlate to individual elements on the page.

645
00:55:08,140 --> 00:55:13,650
And if we were to change this, you would watch the DOM change,

646
00:55:13,650 --> 00:55:16,220
and you can see this kind of shifting.

647
00:55:16,220 --> 00:55:20,600
So if we were to type Harvard, you'd see the DOM start to change

648
00:55:20,600 --> 00:55:24,970
and the list elements starting to change in here.

649
00:55:24,970 --> 00:55:26,880
That's actually what's happening.

650
00:55:26,880 --> 00:55:35,020
>> Let's see if we can find some of this stuff right in here.

651
00:55:35,020 --> 00:55:41,490
Let's look at this link. Let's look at this Harvard Wikipedia link, and we'll watch it change.

652
00:55:41,490 --> 00:55:48,160
We can see that as I've selected this, it corresponds to this div right here,

653
00:55:48,160 --> 00:55:52,680
which is also part of a list element, which is right next to another list element,

654
00:55:52,680 --> 00:55:56,500
which is part of the unordered list here.

655
00:55:56,500 --> 00:56:07,470
Now what happens if we search for our lesser school a little down south?

656
00:56:07,470 --> 00:56:09,040
It now changes.

657
00:56:09,040 --> 00:56:13,460
So we lost our handle on that div and that list element

658
00:56:13,460 --> 00:56:19,010
because now we have different elements in our DOM,

659
00:56:19,010 --> 00:56:24,280
different list elements, different list items, different lengths, all of that.

660
00:56:24,280 --> 00:56:28,750
So this HTML document is being dynamically updated.

661
00:56:28,750 --> 00:56:33,240
Old elements are being deleted, new elements are being added.

662
00:56:33,240 --> 00:56:42,600
Back here we're just specifying this element, which presumably will be stable

663
00:56:42,600 --> 00:56:44,870
throughout our typeahead update,

664
00:56:44,870 --> 00:56:50,270
because otherwise if jQuery can't find an element that has an ID of suggestions,

665
00:56:50,270 --> 00:56:53,320
it'll just crash at this point.

666
00:56:53,320 --> 00:56:57,020
And then we're updating its inner HTML.

667
00:56:57,020 --> 00:57:03,970
So it's these list items, these anchor tags that will constantly update and refresh as you type.

668
00:57:10,440 --> 00:57:15,750
Does that do a better job? >>[student] That helps a lot. >>[Hardison] Okay.

669
00:57:15,750 --> 00:57:24,210
The syntax that you'll see a lot--know what this guy does.

670
00:57:24,210 --> 00:57:27,810
Know the jQuery selector.

671
00:57:27,810 --> 00:57:36,610
This jQuery selector with a hash tag in front implies an ID.

672
00:57:36,610 --> 00:57:42,410
This guy says, "Get me the element that has the ID suggestions."

673
00:57:48,440 --> 00:57:56,480
This guy down here also says, "Get me that same element with ID suggestions."

674
00:57:56,480 --> 00:58:03,350
This guy below it is slightly more complex.

675
00:58:03,350 --> 00:58:12,420
This says, "Get me the element with ID form-quote,

676
00:58:12,420 --> 00:58:21,180
"but then go inside that form and find the child"--

677
00:58:21,180 --> 00:58:25,710
so this space right here implies that we're going to a child element, a nested element.

678
00:58:25,710 --> 00:58:33,550
"Find the form that has this ID and then find the input inside that form whose name is symbol."

679
00:58:38,410 --> 00:58:45,050
This is definitely in Tommy's lecture slides, these different types of jQuery selectors.

680
00:58:45,050 --> 00:58:50,490
You should know what kinds of elements these are retrieving.

681
00:58:51,970 --> 00:58:54,590
For example, let's switch back to the iPad really quickly.

682
00:58:58,450 --> 00:59:14,970
If we had a form element with id="form-quote"--

683
00:59:14,970 --> 00:59:21,110
of course that's missing the method=POST or method=GET and action attributes as well

684
00:59:21,110 --> 00:59:37,010
that you should have on forms, but just for this example a form, as you know, has inputs

685
00:59:37,010 --> 00:59:51,860
and that code that we just saw would get the input element

686
00:59:51,860 --> 00:59:57,580
that had name="symbol".

687
00:59:57,580 --> 01:00:02,970
This is important when you're trying to fill different fields inside of your form.

688
01:00:02,970 --> 01:00:07,440
This is how auto-filling works.

689
01:00:07,440 --> 01:00:09,500
>> Yes, Ella?

690
01:00:09,500 --> 01:00:16,050
[student] What's the difference between an ID and a class? >>An ID and a class? Yeah.

691
01:00:16,050 --> 01:00:21,970
A class is used for styling purposes.

692
01:00:21,970 --> 01:00:29,120
An ID is used for what it sounds like: uniquely identifying a particular element.

693
01:00:29,120 --> 01:00:37,610
So within an HTML page, you can only have 1 element with a particular ID.

694
01:00:40,370 --> 01:00:46,120
There's only 1 form with the ID form-quote.

695
01:00:46,120 --> 01:00:56,940
However, the nav pills class or nav class was probably something that you used

696
01:00:56,940 --> 01:01:01,380
possibly or saw in the context of your Problem Set 7 code.

697
01:01:01,380 --> 01:01:11,340
A class is used to apply a particular styling to a bunch of different elements.

698
01:01:11,340 --> 01:01:17,580
For example, in the old days of HTML before there were style sheets,

699
01:01:17,580 --> 01:01:21,440
before there was CSS, these Cascading Style Sheets,

700
01:01:21,440 --> 01:01:29,540
if you wanted to center a paragraph or center the text in a div,

701
01:01:29,540 --> 01:01:43,940
you'd have a div and then you'd have something like text-align="center"

702
01:01:43,940 --> 01:01:51,290
as like an attribute within your div.

703
01:01:51,290 --> 01:01:54,490
This is no good.

704
01:01:54,490 --> 01:01:57,890
The reason people didn't like this is because then when you wanted to update

705
01:01:57,890 --> 01:02:01,960
how things displayed on your website, you had to literally go into every page

706
01:02:01,960 --> 01:02:06,230
and every HTML file and go change all the stylings on all the different elements,

707
01:02:06,230 --> 01:02:10,420
and it was a huge pain because often you wanted to have a bunch of divs

708
01:02:10,420 --> 01:02:15,090
that were all center aligned or fit a certain way.

709
01:02:15,090 --> 01:02:18,760
So the solution to that was the class.

710
01:02:18,760 --> 01:02:28,120
Now we have a div where we have the class specified to be whatever you want to call it.

711
01:02:28,120 --> 01:02:39,160
You could call it "centered"; and close your div somewhere down here

712
01:02:39,160 --> 01:02:42,390
and you have all your fun stuff in there.

713
01:02:42,390 --> 01:02:47,650
And then somewhere in your style sheet you would specify a particular styling

714
01:02:47,650 --> 01:02:51,980
that would apply to this class.

715
01:02:51,980 --> 01:02:57,280
This didn't have to be the only div that was centered.

716
01:02:57,280 --> 01:03:02,240
You could have other divs that also had centered text.

717
01:03:06,580 --> 01:03:09,980
>> Yes, Charlotte? >>[student] Going back to the quote, what does the dot mean?

718
01:03:09,980 --> 01:03:13,120
What is the dot? >>[student] Yeah.

719
01:03:14,000 --> 01:03:17,900
Back to the laptop, you mean? >>[student] Yeah. >>Okay.

720
01:03:17,900 --> 01:03:23,920
[student] For instance, in this line does that mean that there is this variable called val

721
01:03:23,920 --> 01:03:27,730
inside of the form? >>Yeah.

722
01:03:27,730 --> 01:03:34,690
The dot notation in JavaScript does a couple of things.

723
01:03:34,690 --> 01:03:43,530
In this case you are calling a function whose name is val.

724
01:03:43,530 --> 01:03:45,960
It's a method.

725
01:03:45,960 --> 01:03:50,150
This is where we get into the object-oriented stuff that we were talking about, Sam.

726
01:03:50,150 --> 01:04:00,840
This is where object--in this case the input element--has a function or a method called val

727
01:04:00,840 --> 01:04:10,480
that basically says, "Hey, set your value to be this thing."

728
01:04:15,120 --> 01:04:19,050
Imagine that instead of this gobbledygook we had written the number 7 or the string 7.

729
01:04:19,050 --> 01:04:23,820
That would change the value of this input element to be 7.

730
01:04:23,820 --> 01:04:26,030
[student] The input element being everything in front of the dot?

731
01:04:26,030 --> 01:04:29,190
[Hardison] The input element, exactly, being the element within the HTML,

732
01:04:29,190 --> 01:04:33,230
within the DOM, that matches this query.

733
01:04:33,230 --> 01:04:37,150
[student] So it's input element .function and then what that value should be.

734
01:04:37,150 --> 01:04:39,360
[Hardison] Exactly. >>[student] Okay.

735
01:04:39,360 --> 01:04:42,780
And you also use this to access properties.

736
01:04:42,780 --> 01:04:47,690
So if we look back up at the code that we were walking through line by line

737
01:04:47,690 --> 01:04:54,830
where we have response.symbols[i].name,

738
01:04:54,830 --> 01:04:58,600
we're not calling a function here.

739
01:04:58,600 --> 01:05:02,270
There are no parentheses.

740
01:05:02,270 --> 01:05:05,220
One thing you should just keep in mind as you rip through this code,

741
01:05:05,220 --> 01:05:09,860
when you see parentheses, that means function call.

742
01:05:09,860 --> 01:05:12,340
A function is being called,

743
01:05:12,340 --> 01:05:15,910
and the name of that function is whatever precedes those parentheses.

744
01:05:15,910 --> 01:05:21,480
So in this case down below, it's val. In this case right here it's html.

745
01:05:21,480 --> 01:05:31,700
In this case right here the name of the function is literally $,

746
01:05:31,700 --> 01:05:35,170
and we just know that this is the jQuery selector,

747
01:05:35,170 --> 01:05:40,090
it's the function that is selecting whatever this guy is.

748
01:05:40,090 --> 01:05:47,030
And then when you don't see parentheses, like here or here,

749
01:05:47,030 --> 01:05:51,690
what you're accessing instead is a property of the object.

750
01:05:51,690 --> 01:05:53,910
This is like using the array notation.

751
01:05:53,910 --> 01:05:59,280
It's an alternative to using the array notation.

752
01:05:59,280 --> 01:06:02,440
It's just a shorthand.

753
01:06:06,680 --> 01:06:17,050
So we're accessing the symbols field of the response object.

754
01:06:21,590 --> 01:06:29,160
>> We've done a lot on Ajax, DOM, some HTML, not much CSS.

755
01:06:29,160 --> 01:06:34,370
Do you guys want to spend the last 15 minutes or so on this?

756
01:06:34,370 --> 01:06:37,990
I guess we've really got about 10 minutes before we need to start wrapping up.

757
01:06:37,990 --> 01:06:44,190
Or should we go back and talk about some of the other things on our list?

758
01:06:44,190 --> 01:06:46,800
Let's see.

759
01:06:46,800 --> 01:06:52,180
If we go back to the beginning, we switch over to my iPad again so you guys can see this,

760
01:06:52,180 --> 01:06:57,840
we've done a lot of Ajax, we've done some jQuery,

761
01:06:57,840 --> 01:07:00,980
we've done some JSON, we've done some XML, we've done some DOM,

762
01:07:00,980 --> 01:07:05,510
we've done some--nope, not HTTP. Scratch that.

763
01:07:05,510 --> 01:07:10,640
Not much scope. We sort of talked about CSS--not really.

764
01:07:13,200 --> 01:07:16,540
Do you guys feel good on Ajax? Do you want to spend more time on Ajax?

765
01:07:16,540 --> 01:07:19,190
Show of hands. Okay.

766
01:07:19,190 --> 01:07:22,260
DOM? Anybody want to spend more time on DOM?

767
01:07:22,260 --> 01:07:26,960
The easiest way to really get a feel for what's going on with the DOM--

768
01:07:26,960 --> 01:07:34,510
people talk about the DOM and throw around, "Oh, the DOM this, the DOM that."

769
01:07:34,510 --> 01:07:45,910
Really the DOM is just the way all of these HTML elements are held in memory.

770
01:07:45,910 --> 01:07:49,310
and it's just explaining--that's what it is.

771
01:07:49,310 --> 01:07:55,700
It's structured like a tree, and you can access individual HTML elements

772
01:07:55,700 --> 01:07:58,850
with that jQuery selector, that dollar sign thingy.

773
01:07:58,850 --> 01:08:02,730
You can manipulate things. You can add elements to the DOM.

774
01:08:02,730 --> 01:08:04,920
You can add a new paragraph element to the DOM,

775
01:08:04,920 --> 01:08:09,280
you can take away a div element from the DOM if you want.

776
01:08:09,280 --> 01:08:15,640
That's all it is. It's just kind of the in memory representation of your HTML file.

777
01:08:15,640 --> 01:08:19,430
It can be manipulated and traversed.

778
01:08:19,430 --> 01:08:23,240
How about jQuery and that selector? Yes, Sam?

779
01:08:23,240 --> 01:08:28,240
>> [student] Does that mean that the DOM includes all of your CSS and JavaScript?

780
01:08:28,240 --> 01:08:32,729
[Hardison] The DOM includes those nodes, yes.

781
01:08:32,729 --> 01:08:38,270
[student] It includes the HTML that those other auxiliary documents output?

782
01:08:38,270 --> 01:08:47,250
If JavaScript modifies the HTML like it was doing in this Google--

783
01:08:47,250 --> 01:08:50,160
oops, sorry, I'm not back on that.

784
01:08:50,160 --> 01:08:55,420
Remember how JavaScript would modify the list of Google results?

785
01:08:55,420 --> 01:09:04,279
If JavaScript modifies that, then those new list elements are now part of the DOM.

786
01:09:04,279 --> 01:09:06,990
They were injected into the DOM.

787
01:09:06,990 --> 01:09:10,109
And it turns out that the scripts and the style sheets themselves

788
01:09:10,109 --> 01:09:11,830
are indeed part of the DOM.

789
01:09:11,830 --> 01:09:17,819
You see down here that we've got these script nodes and these style nodes.

790
01:09:17,819 --> 01:09:21,800
JavaScript can add and delete these too.

791
01:09:21,800 --> 01:09:25,550
This is why it's so bad to have malicious JavaScript on your page

792
01:09:25,550 --> 01:09:30,500
is that it can now start bringing in other JavaScript from other places.

793
01:09:30,500 --> 01:09:34,080
So you can start out with just 1 JavaScript file,

794
01:09:34,080 --> 01:09:37,189
but then it can start pulling in other JavaScript files.

795
01:09:37,189 --> 01:09:42,330
You can use Ajax to load in JavaScript and dynamically have new JavaScript

796
01:09:42,330 --> 01:09:45,029
running on your web page.

797
01:09:45,029 --> 01:09:50,680
So it's a really powerful thing that our browsers are able to kind of constantly re-render

798
01:09:50,680 --> 01:09:56,280
and re-adapt whatever is being generated by JavaScript.

799
01:09:58,740 --> 01:10:01,450
>> [student] Those style tags are contained in CSS?

800
01:10:01,450 --> 01:10:04,100
Let's look at it. Yeah.

801
01:10:04,100 --> 01:10:08,480
This CSS, again you can see where jQuery got its selector from.

802
01:10:08,480 --> 01:10:18,760
We've got this #gb which is saying, "This styling applies to an element with ID gb."

803
01:10:18,760 --> 01:10:24,330
"An element with ID gb is going to have this size font with this font family,

804
01:10:24,330 --> 01:10:28,150
"sans-serif; height."

805
01:10:32,340 --> 01:10:33,650
>> Okay.

806
01:10:33,650 --> 01:10:36,010
Back to the iPad.

807
01:10:37,330 --> 01:10:40,550
How about data structures--tries, linked lists?

808
01:10:40,550 --> 01:10:44,700
Do you guys want to do a quick refresher on that, or are you guys feeling--

809
01:10:44,700 --> 01:10:48,940
Yea? Nay? Who wants data structures? Raise your hand.

810
01:10:48,940 --> 01:10:52,780
Who hates data structures? >>[student] I only want tries. >>You only want tries.

811
01:10:52,780 --> 01:10:55,120
Okay.

812
01:10:55,120 --> 01:11:00,600
Does anybody not want tries? Is everybody like, "I hate tries. I did it. I tried it."

813
01:11:00,600 --> 01:11:02,930
[student] I just want to know about the omega and big O.

814
01:11:02,930 --> 01:11:05,600
Okay. We can definitely go over that.

815
01:11:05,600 --> 01:11:11,290
Does that sound like something that we want to do as a group? Yes? Sort of? No?

816
01:11:11,290 --> 01:11:18,090
>> How about HTTP? Does that seem like something more people want to do?

817
01:11:18,090 --> 01:11:22,300
Or are you kind of, "Eh." Let's do HTTP first.

818
01:11:24,850 --> 01:11:32,010
How many of you guys have seen David's ridiculously awesome HTTP short? Anybody?

819
01:11:32,010 --> 01:11:33,950
I've seen it a whole bunch.

820
01:11:33,950 --> 01:11:37,890
It was one of the first ones we did, and so it was like our demo this summer.

821
01:11:37,890 --> 01:11:40,750
Dan's seen it a bunch too, Dan the Man back there.

822
01:11:43,150 --> 01:11:50,820
HTTP and then there's this HTTPS thing that we've been talking about a little bit.

823
01:11:50,820 --> 01:11:53,020
What do you need to know about HTTP?

824
01:11:53,020 --> 01:12:00,220
It's literally just the protocol for interacting with a web server.

825
01:12:00,220 --> 01:12:09,860
When you want to talk to Google.com, you're talking to another computer over a network,

826
01:12:09,860 --> 01:12:13,670
what do you do?

827
01:12:13,670 --> 01:12:16,160
Let's maybe do this.

828
01:12:16,160 --> 01:12:19,420
Let me pull up a terminal.

829
01:12:19,420 --> 01:12:21,820
Here's my little terminal window.

830
01:12:21,820 --> 01:12:31,470
We can do something like telnet, which allows us to actually start a connection to Google.com.

831
01:12:31,470 --> 01:12:33,480
This is not something you need to know,

832
01:12:33,480 --> 01:12:35,830
but it's just to illustrate what's happening with the HTTP.

833
01:12:35,830 --> 01:12:42,360
www.google.com, port 80.

834
01:12:42,360 --> 01:12:44,860
What is this doing?

835
01:12:44,860 --> 01:12:49,800
It's making an Internet connection between my computer and Google.

836
01:12:49,800 --> 01:12:56,080
And it's actually connecting to 173.194.75.99, which is some computer,

837
01:12:56,080 --> 01:13:02,790
some Google server living somewhere probably out here,

838
01:13:02,790 --> 01:13:05,600
though it might be all the way back in California.

839
01:13:05,600 --> 01:13:08,320
Now I'm connected.

840
01:13:08,320 --> 01:13:10,810
Okay, that's all good.

841
01:13:10,810 --> 01:13:15,260
But when you go to Google.com, typically you expect Google.com,

842
01:13:15,260 --> 01:13:19,380
some HTML to show up, right? Not just this.

843
01:13:19,380 --> 01:13:27,740
The problem is I want to say, "GIVE ME GOOGLE.COM" or whatever.

844
01:13:27,740 --> 01:13:34,320
But if I say that, nothing happens.

845
01:13:34,320 --> 01:13:39,210
In fact, if I hit Enter a couple of times, it comes back and it says,

846
01:13:39,210 --> 01:13:42,930
"That was a bad request."

847
01:13:42,930 --> 01:13:46,270
This was saying, "No, no, no, no, no, no, no, no, no."

848
01:13:46,270 --> 01:13:51,850
"You can't just put stuff in. You actually have to speak HTTP to me."

849
01:13:51,850 --> 01:13:56,350
"You have to format your request as an HTTP request, as a GET or a POST

850
01:13:56,350 --> 01:13:58,180
"or something like that."

851
01:13:58,180 --> 01:14:02,040
"And then I'll return the proper HTML to you."

852
01:14:02,040 --> 01:14:04,070
So you see what it gave me in this case.

853
01:14:04,070 --> 01:14:24,170
It gave me HTML that if I copy it and I textedit html, if I put it in here,

854
01:14:24,170 --> 01:14:33,040
and I save it as test.html--oh, come on.

855
01:14:33,040 --> 01:14:36,010
Web page. There we go.

856
01:14:36,010 --> 01:14:46,310
Now if I open Downloads/test.html, now it gave me the bad--

857
01:14:46,310 --> 01:14:51,640
It didn't quite render it as HTML.

858
01:14:51,640 --> 01:14:54,890
It looks like it didn't close it. Here, let's see.

859
01:15:00,610 --> 01:15:02,900
Nope. Okay.

860
01:15:02,900 --> 01:15:07,330
It's not going to render. Anyway, not going to figure that out.

861
01:15:07,330 --> 01:15:10,080
But anyway, what it is doing is it's returning to me the HTML,

862
01:15:10,080 --> 01:15:15,800
but it's saying essentially, "You didn't give me a proper HTTP request."

863
01:15:15,800 --> 01:15:20,810
So what do we need to know about HTTP?

864
01:15:20,810 --> 01:15:27,620
It's the way of formatting requests to web servers to get, typically, HTML in response.

865
01:15:27,620 --> 01:15:37,050
>> The other thing to note is that when you make a request to a web server,

866
01:15:37,050 --> 01:15:45,650
you have to specify the HTTP method that you want to use.

867
01:15:45,650 --> 01:15:48,730
We talked about this a little bit earlier, where the 2 big ones that we see

868
01:15:48,730 --> 01:15:52,170
are GET and POST.

869
01:15:52,170 --> 01:15:53,710
There are also a whole bunch of other ones.

870
01:15:53,710 --> 01:15:58,420
There's HEAD and PUT and DELETE and all of these other things,

871
01:15:58,420 --> 01:16:00,410
but GET and POST are the 2 main ones.

872
01:16:00,410 --> 01:16:04,110
Where do you see those crop up? When you're writing forms.

873
01:16:04,110 --> 01:16:08,000
When you're writing HTML forms, you have to specify the HTTP method

874
01:16:08,000 --> 01:16:11,270
by which you want that form data to be transmitted.

875
01:16:11,270 --> 01:16:15,000
And then you see it on the server side when you're writing PHP code

876
01:16:15,000 --> 01:16:19,850
when you handle the data and you have to look in the POST superglobal

877
01:16:19,850 --> 01:16:24,860
or the GET superglobal to retrieve the data that was submitted by the user.

878
01:16:24,860 --> 01:16:32,900
And the difference between GET and POST is that GET modifies the actual URL

879
01:16:32,900 --> 01:16:40,890
and for the most part you can see what parameters were passed to a GET request

880
01:16:40,890 --> 01:16:45,580
very easily just by looking in the URL, whereas with a POST request

881
01:16:45,580 --> 01:16:52,880
you don't transmit the parameters of the request in the URL.

882
01:16:52,880 --> 01:16:58,610
But they're not encrypted or anything unless you're going over HTTPS.

883
01:16:58,610 --> 01:17:02,130
The POST parameters are just part of the--

884
01:17:02,130 --> 01:17:05,750
They don't go in the URL, effectively.

885
01:17:05,750 --> 01:17:10,320
We tend to just kind of semantically separate the 2,

886
01:17:10,320 --> 01:17:15,270
which just says that really, you can do the same thing with GET that you can with POST.

887
01:17:15,270 --> 01:17:20,200
You can do the same thing. It's just that we use them in different situations.

888
01:17:20,200 --> 01:17:23,330
We use GET when we're trying to just read something and we're just saying,

889
01:17:23,330 --> 01:17:24,900
"Give me this data."

890
01:17:24,900 --> 01:17:28,670
And we use POST typically when we're trying to update something on the server.

891
01:17:28,670 --> 01:17:31,900
That's why whenever you go to Google.com and we were doing that typeahead

892
01:17:31,900 --> 01:17:33,470
we saw all those GET requests

893
01:17:33,470 --> 01:17:36,960
because we were literally just retrieving information from Google,

894
01:17:36,960 --> 01:17:43,710
whereas if you make a Facebook wall post, you're going to be using,

895
01:17:43,710 --> 01:17:51,990
most likely, an HTTP POST method to send that data and make a change to Facebook

896
01:17:51,990 --> 01:17:56,220
in your wall, your friend's wall.

897
01:17:56,220 --> 01:17:58,510
Let's see.

898
01:18:00,360 --> 01:18:10,030
I guess the difference with HTTPS is that it is HTTP but encrypted.

899
01:18:10,030 --> 01:18:12,960
[chuckles] Secure.

900
01:18:12,960 --> 01:18:16,820
Yeah. And there are a lot of fun details about that.

901
01:18:18,560 --> 01:18:21,100
>> Questions?

902
01:18:21,100 --> 01:18:28,030
We need to start wrapping up, and so we'll do some data structures on the side. Charlotte?

903
01:18:28,030 --> 01:18:32,270
[student] What's included in the HTTP header files from the host to the method

904
01:18:32,270 --> 01:18:35,480
and the method and the number? >>Ah.

905
01:18:35,480 --> 01:18:40,060
The best way to look at it is to go to your Network tab

906
01:18:40,060 --> 01:18:48,320
 and just see what happens when you just go to Google.com.

907
01:18:48,320 --> 01:18:55,300
You can come down here and you can see all of the different HTTP requests that were made.

908
01:18:55,300 --> 01:18:58,000
Google.com.

909
01:18:58,000 --> 01:19:02,690
The first one was I tried to go to Google.com and it said,

910
01:19:02,690 --> 01:19:05,270
"Oh, Google.com doesn't really exist."

911
01:19:05,270 --> 01:19:08,700
"Where you really want to go is to www.google.com."

912
01:19:08,700 --> 01:19:10,010
So I got redirected here.

913
01:19:10,010 --> 01:19:13,020
That's where I got this 301 then I got the 200 OK.

914
01:19:13,020 --> 01:19:17,240
So what is in here, in your headers?

915
01:19:17,240 --> 01:19:21,840
It says this is the URL to which I made the request, the request method,

916
01:19:21,840 --> 01:19:24,550
and then the status code.

917
01:19:24,550 --> 01:19:26,070
Those are the 3 biggies.

918
01:19:26,070 --> 01:19:30,190
The other things in here, cookies,

919
01:19:30,190 --> 01:19:37,130
cookies are handy for figuring out the session, if somebody is logged in or not.

920
01:19:37,130 --> 01:19:42,010
They're also handy for tracking people. This is how websites track you all over the place.

921
01:19:42,010 --> 01:19:44,620
They put cookies on your computer.

922
01:19:44,620 --> 01:19:48,320
They're trained to recognize other websites' cookies if they can.

923
01:19:48,320 --> 01:19:52,640
And then there's this other stuff that says the user agent right here.

924
01:19:52,640 --> 01:19:57,490
This user agent string identifies my computer to Google.com and says,

925
01:19:57,490 --> 01:20:03,010
"Google.com, just so you know, some dude running this browser

926
01:20:03,010 --> 01:20:08,050
"on Intel Mac 10_8_2 just went to Google.com."

927
01:20:08,050 --> 01:20:12,560
And then these Accept things just say, "What is my computer,

928
01:20:12,560 --> 01:20:14,590
"what is my web browser prepared to accept?"

929
01:20:14,590 --> 01:20:20,900
It can accept HTML, it can accept XML, all this other stuff.

930
01:20:20,900 --> 01:20:24,310
What kind of character encodings does it accept?

931
01:20:24,310 --> 01:20:30,030
Does it accept gzipped compressed stuff?

932
01:20:30,030 --> 01:20:36,120
Sometimes websites will compress things to make it faster to send over the network.

933
01:20:36,120 --> 01:20:38,580
>> Cool. All right.

934
01:20:38,580 --> 01:20:44,460
I think that's it for now. We'll close down, but I will remain for questions.

935
01:20:44,460 --> 01:20:47,000
>> [CS50.TV]