1
00:00:00,000 --> 00:00:05,616

2
00:00:05,616 --> 00:00:07,030
>> HANNAH BLUMBERG: Hi everyone.

3
00:00:07,030 --> 00:00:09,530
We're going to get started
just a couple of minutes early

4
00:00:09,530 --> 00:00:11,738
since we have a whole lot
of material to get through.

5
00:00:11,738 --> 00:00:12,790
I'm Hannah.

6
00:00:12,790 --> 00:00:13,865
I'm a TF.

7
00:00:13,865 --> 00:00:16,239
Maria is going to be joining
us in just a couple minutes.

8
00:00:16,239 --> 00:00:17,560
She teaches section right before.

9
00:00:17,560 --> 00:00:19,351
I teach section right
after, so we're going

10
00:00:19,351 --> 00:00:21,200
to keep it to the hour and a half.

11
00:00:21,200 --> 00:00:25,490
>> So as you'll see up here, we have quite
a few topics we need to get through,

12
00:00:25,490 --> 00:00:27,200
so we'll be going a little bit fast.

13
00:00:27,200 --> 00:00:31,140
But if at any point we say something
too quickly or you don't understand,

14
00:00:31,140 --> 00:00:33,170
feel free to interrupt with questions.

15
00:00:33,170 --> 00:00:36,610
We want to be able to make this a
review session as useful to all of you

16
00:00:36,610 --> 00:00:37,973
as possible.

17
00:00:37,973 --> 00:00:38,920
Awesome.

18
00:00:38,920 --> 00:00:41,650
>> So let's jump right in with
some topics that we actually

19
00:00:41,650 --> 00:00:46,980
very, very briefly covered for the
quiz 0 in the quiz 0 review session.

20
00:00:46,980 --> 00:00:48,840
So starting with linked lists.

21
00:00:48,840 --> 00:00:52,090
So just make sure you have some
basic knowledge about linked lists

22
00:00:52,090 --> 00:00:55,110
and are comfortable doing
some of the basic operations.

23
00:00:55,110 --> 00:00:58,560
>> So just to review, linked
lists are better than arrays

24
00:00:58,560 --> 00:01:01,020
because they can grow dynamically.

25
00:01:01,020 --> 00:01:03,300
So we have that huge advantage.

26
00:01:03,300 --> 00:01:06,031
We've seen them used
in hash tables when we

27
00:01:06,031 --> 00:01:08,280
don't know exactly how many
things we're going to want

28
00:01:08,280 --> 00:01:10,900
to insert into our data structure.

29
00:01:10,900 --> 00:01:15,700
Unfortunately, we have pieces of
the linked list all over memory,

30
00:01:15,700 --> 00:01:20,820
so we won't necessarily be
able to do constant time access

31
00:01:20,820 --> 00:01:22,502
to any element in the linked list.

32
00:01:22,502 --> 00:01:24,210
In order to find a
particular element, we

33
00:01:24,210 --> 00:01:26,510
have to iterate all the
way from the beginning.

34
00:01:26,510 --> 00:01:30,610
So keep in mind that most of the
basic operations are omega of 1.

35
00:01:30,610 --> 00:01:32,130
So insert is just going to take 1.

36
00:01:32,130 --> 00:01:37,520
Delete is going to take n since we
have to go find it from the list.

37
00:01:37,520 --> 00:01:39,260
And search could take, at worst, n.

38
00:01:39,260 --> 00:01:42,330
We can't do something like
binary search on a linked list

39
00:01:42,330 --> 00:01:45,101
since we can't just
randomly jump to the middle.

40
00:01:45,101 --> 00:01:45,600
Cool.

41
00:01:45,600 --> 00:01:48,160

42
00:01:48,160 --> 00:01:48,960
Awesome.

43
00:01:48,960 --> 00:01:50,270
>> A little bit of stacks.

44
00:01:50,270 --> 00:01:53,980
This, again, came up on quiz 0, so you
should be super comfortable with it.

45
00:01:53,980 --> 00:01:57,210
But for stacks, we ask you
to remember a stack of trays.

46
00:01:57,210 --> 00:01:59,940
And it's going to be first in, last out.

47
00:01:59,940 --> 00:02:02,272
So we stack things up
in the stack, and then

48
00:02:02,272 --> 00:02:04,980
if we're trying to take something
off-- which we call popping off

49
00:02:04,980 --> 00:02:06,581
the stack-- we come off the top.

50
00:02:06,581 --> 00:02:09,289
And if we want to put something
in the stack, we call it pushing.

51
00:02:09,289 --> 00:02:13,170
So it's always going to be growing up
from the bottom like a stack of trays.

52
00:02:13,170 --> 00:02:14,540
Awesome.

53
00:02:14,540 --> 00:02:17,607
>> We've seen stacks implemented
with both linked lists and arrays.

54
00:02:17,607 --> 00:02:19,440
If you're implementing
with arrays, you want

55
00:02:19,440 --> 00:02:22,350
to make sure to keep track of
both the size and the capacity.

56
00:02:22,350 --> 00:02:27,540
So size is going to be the current
number of things in your stack,

57
00:02:27,540 --> 00:02:32,900
whereas capacity is the total number
of things you can store in your stack.

58
00:02:32,900 --> 00:02:34,220
Cool.

59
00:02:34,220 --> 00:02:35,767
>> Very similarly, we have queues.

60
00:02:35,767 --> 00:02:38,850
In this case, instead of thinking about
a stack of trays, think of a line.

61
00:02:38,850 --> 00:02:40,697
This is going to be first in, first out.

62
00:02:40,697 --> 00:02:42,780
So if you're lining up for
something at the store,

63
00:02:42,780 --> 00:02:46,920
we hope that the person first in
line is going to be helped first.

64
00:02:46,920 --> 00:02:49,350
>> Instead of saying push and
pop like we do for stack,

65
00:02:49,350 --> 00:02:52,000
we just say enqueue and dequeue.

66
00:02:52,000 --> 00:02:54,970
And again, if you are
implementing this with an array,

67
00:02:54,970 --> 00:02:56,720
we need to keep track
of not only the size

68
00:02:56,720 --> 00:03:02,390
and capacity, but also the head, which
is going to be the front of our queue.

69
00:03:02,390 --> 00:03:03,010
Cool.

70
00:03:03,010 --> 00:03:05,770
Any questions on any of that?

71
00:03:05,770 --> 00:03:06,320
Awesome.

72
00:03:06,320 --> 00:03:07,640
Moving right along.

73
00:03:07,640 --> 00:03:08,564
>> OK, hash tables.

74
00:03:08,564 --> 00:03:10,605
Here's where it starts to
get really interesting.

75
00:03:10,605 --> 00:03:14,150
So a hash table is one implementation
of an associative array.

76
00:03:14,150 --> 00:03:16,700
So basically what happened
is we have all this input,

77
00:03:16,700 --> 00:03:18,750
and we give it to a hash
function which says,

78
00:03:18,750 --> 00:03:21,840
OK, this is where in the
hash table it belongs.

79
00:03:21,840 --> 00:03:24,860
>> So the simplest hash function
that we've seen is just saying,

80
00:03:24,860 --> 00:03:28,170
OK, suppose we want to put
strings in our hash table.

81
00:03:28,170 --> 00:03:30,870
And a really simple idea
might be to say, OK,

82
00:03:30,870 --> 00:03:34,350
let's just sort by the
first letter of the word.

83
00:03:34,350 --> 00:03:37,570
So you can see here, we take banana,
we put it through a hash function,

84
00:03:37,570 --> 00:03:40,190
and it says, hey, that
should go at index 1.

85
00:03:40,190 --> 00:03:45,120
>> So we can essentially think of a hash
table as a bunch of different buckets.

86
00:03:45,120 --> 00:03:49,880
And each of those buckets is going
to hold the head of a linked list.

87
00:03:49,880 --> 00:03:55,030
And in that linked list is where we can
actually put different pieces of data.

88
00:03:55,030 --> 00:03:57,820
>> So diving a little bit more
into a hash function, here's

89
00:03:57,820 --> 00:03:59,870
the example I just
described where we just say,

90
00:03:59,870 --> 00:04:02,460
OK, take the first letter
of the word and we're

91
00:04:02,460 --> 00:04:03,990
going to sort it into the buckets.

92
00:04:03,990 --> 00:04:08,490
So presumably, there'll be 26 buckets,
one for each letter of the alphabet.

93
00:04:08,490 --> 00:04:10,090
Why isn't this a great hash function?

94
00:04:10,090 --> 00:04:13,461
What makes this non-ideal?

95
00:04:13,461 --> 00:04:13,960
Yeah.

96
00:04:13,960 --> 00:04:15,790
>> AUDIENCE: You're going
to have collisions.

97
00:04:15,790 --> 00:04:16,390
>> HANNAH BLUMBERG: Yeah, exactly.

98
00:04:16,390 --> 00:04:18,000
You're going to have collisions.

99
00:04:18,000 --> 00:04:18,954
So that's one thing.

100
00:04:18,954 --> 00:04:21,620
And we'll talk about how we can
fix collisions in just a second.

101
00:04:21,620 --> 00:04:23,980
Another problem with this
particular hash function

102
00:04:23,980 --> 00:04:25,980
is that our different
buckets are going to be

103
00:04:25,980 --> 00:04:28,960
of pretty drastically different sizes.

104
00:04:28,960 --> 00:04:33,840
>> We know that there's a whole lot
more words that start with A than X,

105
00:04:33,840 --> 00:04:38,980
so we're going to have very
unbalanced buckets in our hash table.

106
00:04:38,980 --> 00:04:40,050
Cool.

107
00:04:40,050 --> 00:04:41,340
So yeah, let's get back to
the point of collisions.

108
00:04:41,340 --> 00:04:42,900
What do we do if there's a collision?

109
00:04:42,900 --> 00:04:44,490
>> We have a couple different options.

110
00:04:44,490 --> 00:04:47,600
So one, so suppose we're trying
to put berry into our hash table.

111
00:04:47,600 --> 00:04:50,370
And we see, oh, we want
to put it in index 1,

112
00:04:50,370 --> 00:04:52,070
but banana already lives there.

113
00:04:52,070 --> 00:04:53,110
What are we going to do?

114
00:04:53,110 --> 00:04:54,560
We have two main options.

115
00:04:54,560 --> 00:04:58,050
>> Number one is we can say, OK,
there's no room in index 1,

116
00:04:58,050 --> 00:05:03,210
but let's just keep looking through
until we can find another open spot.

117
00:05:03,210 --> 00:05:08,490
So we'll say, OK,
let's put it in spot 3.

118
00:05:08,490 --> 00:05:09,240
That's one option.

119
00:05:09,240 --> 00:05:11,470
That's called linear probing.

120
00:05:11,470 --> 00:05:15,500
>> And a second option is saying, OK, well,
let's just make each of these buckets

121
00:05:15,500 --> 00:05:17,470
be heads of linked lists.

122
00:05:17,470 --> 00:05:21,910
And it's OK if there's more
than one thing in a bucket.

123
00:05:21,910 --> 00:05:23,820
We're just going to
append it onto the front.

124
00:05:23,820 --> 00:05:26,032
So here you can see, OK,
when we inserted berry, we

125
00:05:26,032 --> 00:05:28,240
just took banana, kind of
pushed it over a little bit

126
00:05:28,240 --> 00:05:29,842
and threw a berry in there.

127
00:05:29,842 --> 00:05:31,050
And that's also totally fine.

128
00:05:31,050 --> 00:05:32,830
This is called separate chaining.

129
00:05:32,830 --> 00:05:38,100
You can think of this as kind of like
an array of heads to linked lists.

130
00:05:38,100 --> 00:05:41,950
Any questions on hash
tables, hash functions?

131
00:05:41,950 --> 00:05:44,290
Awesome.

132
00:05:44,290 --> 00:05:45,470
>> Trees and tries.

133
00:05:45,470 --> 00:05:47,287
So a tree is any sort
of the data structure

134
00:05:47,287 --> 00:05:49,453
in which there's some sort
of hierarchy or some sort

135
00:05:49,453 --> 00:05:51,247
of ranking to your different objects.

136
00:05:51,247 --> 00:05:53,580
And this will become super
clear when we see an example.

137
00:05:53,580 --> 00:05:56,960
And we saw tries, along
with hash tables, in pset5--

138
00:05:56,960 --> 00:06:00,700
which, again, totally fair game
for this quiz-- as another data

139
00:06:00,700 --> 00:06:03,110
structures that we can
store different things.

140
00:06:03,110 --> 00:06:06,782
In the case of dictionary,
we stored a bunch of words.

141
00:06:06,782 --> 00:06:08,240
So let's take a look at some trees.

142
00:06:08,240 --> 00:06:10,190
So this is an example of a tree.

143
00:06:10,190 --> 00:06:13,105
It has a kind of structure,
that hierarchical structure,

144
00:06:13,105 --> 00:06:15,920
where you can see that
this 1 node at the top

145
00:06:15,920 --> 00:06:20,750
has some sort of rank above 2 and 3,
which are above 4, 5, and 6 and 7,

146
00:06:20,750 --> 00:06:22,860
which are above 8 and 9.

147
00:06:22,860 --> 00:06:25,210
So that's all we mean by a
tree, so you can just kind

148
00:06:25,210 --> 00:06:26,660
of picture this in your head.

149
00:06:26,660 --> 00:06:29,050
>> Now, we have a couple of
more specialized trees.

150
00:06:29,050 --> 00:06:31,070
So one example is a binary tree.

151
00:06:31,070 --> 00:06:33,290
And a binary tree is,
again, just going to be

152
00:06:33,290 --> 00:06:37,040
a data structure with some sort of
hierarchy, but each of the nodes

153
00:06:37,040 --> 00:06:38,650
can have at most two children.

154
00:06:38,650 --> 00:06:41,530
That's where the word binary comes from.

155
00:06:41,530 --> 00:06:43,410
So this is an example of a binary tree.

156
00:06:43,410 --> 00:06:45,720
So that's a smaller category of trees.

157
00:06:45,720 --> 00:06:48,960
>> Now let's get even more specific and
talk about binary trees-- binary search

158
00:06:48,960 --> 00:06:51,310
trees, rather.

159
00:06:51,310 --> 00:06:56,430
So here the idea is not only does
every node have at most two children,

160
00:06:56,430 --> 00:07:00,300
but all of the children to the
left are going to be smaller

161
00:07:00,300 --> 00:07:03,450
and all of the children to the
right are going to be bigger.

162
00:07:03,450 --> 00:07:05,890
So notice in just our
binary tree, there's

163
00:07:05,890 --> 00:07:08,650
no relationship between the numbers.

164
00:07:08,650 --> 00:07:12,990
But in our binary search
tree, we see, OK, here's 44.

165
00:07:12,990 --> 00:07:17,080
And every number to the left of 44 is
smaller and everything to the right

166
00:07:17,080 --> 00:07:17,920
is bigger.

167
00:07:17,920 --> 00:07:20,130
>> And that holds at every
level of the tree.

168
00:07:20,130 --> 00:07:24,810
So here, this is smaller than
22 and this is larger than 22.

169
00:07:24,810 --> 00:07:26,390
And that's binary search tree.

170
00:07:26,390 --> 00:07:28,900
Why do we think it's called
a binary search tree?

171
00:07:28,900 --> 00:07:30,651
What algorithm does it remind you of?

172
00:07:30,651 --> 00:07:31,650
AUDIENCE: Binary search.

173
00:07:31,650 --> 00:07:32,480
HANNAH BLUMBERG: Binary search.

174
00:07:32,480 --> 00:07:35,150
Because if you're looking for a
particular number in this tree,

175
00:07:35,150 --> 00:07:38,800
at every point, you can just knock
off half of the tree, which is great.

176
00:07:38,800 --> 00:07:43,800
And so that's going to give us something
that looks a lot like binary search.

177
00:07:43,800 --> 00:07:45,870
Any questions?

178
00:07:45,870 --> 00:07:47,570
All right, cool.

179
00:07:47,570 --> 00:07:48,560
>> All right, tries.

180
00:07:48,560 --> 00:07:49,657
Everyone's favorite.

181
00:07:49,657 --> 00:07:51,990
So this is the example that
we've seen a bunch in class.

182
00:07:51,990 --> 00:07:54,710
And again, this is just another
way that we can store data.

183
00:07:54,710 --> 00:07:57,530
In the case of dictionary, again,
this is just going to be strings.

184
00:07:57,530 --> 00:08:00,870
So let's see what this actually
looks like at a slightly lower level.

185
00:08:00,870 --> 00:08:03,690
>> So let's take a look
at one node in a trie.

186
00:08:03,690 --> 00:08:07,532
And we see, OK, there's going
to be a Boolean and a node,

187
00:08:07,532 --> 00:08:09,170
a pointer to a node.

188
00:08:09,170 --> 00:08:11,400
And we see that the
Boolean is called is_word.

189
00:08:11,400 --> 00:08:13,490
So essentially, that's
going to correspond

190
00:08:13,490 --> 00:08:16,750
to these little triangles which
says, if you've gotten here,

191
00:08:16,750 --> 00:08:19,100
you've found a complete word.

192
00:08:19,100 --> 00:08:23,670
>> We know that "turing" over
here is a complete word,

193
00:08:23,670 --> 00:08:28,030
whereas just T-U-R is not a word
because we don't see that little delta.

194
00:08:28,030 --> 00:08:31,440
And that little delta, again,
corresponds to this is_word,

195
00:08:31,440 --> 00:08:34,480
this Boolean is_word.

196
00:08:34,480 --> 00:08:36,320
And then we have an array of children.

197
00:08:36,320 --> 00:08:39,860
So at each level, you
have a particular node,

198
00:08:39,860 --> 00:08:42,470
and that node points to an
array of the entire alphabet.

199
00:08:42,470 --> 00:08:44,346
>> So you can see, again,
in this picture-- I'm

200
00:08:44,346 --> 00:08:48,170
going to keep jumping back and
forth-- that that array at the top

201
00:08:48,170 --> 00:08:51,640
has a bunch of different
nodes coming off of it.

202
00:08:51,640 --> 00:08:57,140
It has 26, or 27 if you want
to include an extra character.

203
00:08:57,140 --> 00:09:01,320
And this gives us a
way to store our data

204
00:09:01,320 --> 00:09:04,450
in a way that can be looked on
that you can look up super fast.

205
00:09:04,450 --> 00:09:06,650
What is the lookup time for a trie?

206
00:09:06,650 --> 00:09:07,970
>> AUDIENCE: [INAUDIBLE].

207
00:09:07,970 --> 00:09:08,300
>> HANNAH BLUMBERG: Yeah.

208
00:09:08,300 --> 00:09:09,550
In theory, it's constant time.

209
00:09:09,550 --> 00:09:13,230
It's only going to be the size of
the word that you want to look up.

210
00:09:13,230 --> 00:09:15,950
Even if we add a zillion
more words to our trie,

211
00:09:15,950 --> 00:09:18,160
it's not going to take us
any longer to determine

212
00:09:18,160 --> 00:09:19,690
if a given word is in the trie.

213
00:09:19,690 --> 00:09:21,412
So that's really nice.

214
00:09:21,412 --> 00:09:23,697
>> AUDIENCE: Did you just
initialize that array?

215
00:09:23,697 --> 00:09:24,780
You missed a point or two.

216
00:09:24,780 --> 00:09:26,130
Can you just talk about
that for a second?

217
00:09:26,130 --> 00:09:26,680
>> HANNAH BLUMBERG: Sure, absolutely.

218
00:09:26,680 --> 00:09:27,590
Good question.

219
00:09:27,590 --> 00:09:31,140
The question was, we
have an array that's

220
00:09:31,140 --> 00:09:34,180
going to have node star as
opposed to just node, right?

221
00:09:34,180 --> 00:09:35,180
Cool.

222
00:09:35,180 --> 00:09:37,990
So here what we're saying
is our array is just

223
00:09:37,990 --> 00:09:40,035
going to be pointers to other arrays.

224
00:09:40,035 --> 00:09:42,910
So it's essentially-- it kind of
feels like a linked list in this way

225
00:09:42,910 --> 00:09:46,620
where each of these children
just point to the next node.

226
00:09:46,620 --> 00:09:49,030
>> And the way that we
actually determine, hey, OK,

227
00:09:49,030 --> 00:09:52,320
we've iterated through an entire
word, is this word in the dictionary,

228
00:09:52,320 --> 00:09:54,476
we just check this is_word.

229
00:09:54,476 --> 00:09:55,100
Great question.

230
00:09:55,100 --> 00:09:55,675
Yeah.

231
00:09:55,675 --> 00:09:56,216
AUDIENCE: OK.

232
00:09:56,216 --> 00:09:57,470
So what was the runtime for the trie?

233
00:09:57,470 --> 00:09:58,386
>> HANNAH BLUMBERG: Sure.

234
00:09:58,386 --> 00:10:01,852
So the runtime for a trie for
lookup is going to be constant time.

235
00:10:01,852 --> 00:10:04,310
So it's just going to be the
number of letters in the word.

236
00:10:04,310 --> 00:10:06,310
It's not dependent on the
size of the dictionary

237
00:10:06,310 --> 00:10:09,510
or the size of the data structure.

238
00:10:09,510 --> 00:10:12,170
So here's a slightly simpler example.

239
00:10:12,170 --> 00:10:15,430
>> In this case, you can see that
the word bat is in the dictionary

240
00:10:15,430 --> 00:10:18,900
and you have zoom, but you
don't have something like zoo.

241
00:10:18,900 --> 00:10:20,050
How would we make zoo?

242
00:10:20,050 --> 00:10:24,276
How do we add zoo to our
dictionary, to our trie?

243
00:10:24,276 --> 00:10:24,776
Yeah.

244
00:10:24,776 --> 00:10:27,014
>> AUDIENCE: Make is_word
true for the [INAUDIBLE].

245
00:10:27,014 --> 00:10:27,930
HANNAH BLUMBERG: Good.

246
00:10:27,930 --> 00:10:31,731
So we'd say Z-O-O, and then we'd
want to check off that box as well.

247
00:10:31,731 --> 00:10:32,230
Great.

248
00:10:32,230 --> 00:10:35,160

249
00:10:35,160 --> 00:10:37,930
Let's compare very briefly
tries versus hash tables.

250
00:10:37,930 --> 00:10:39,770
Tries are really great
because, as we said,

251
00:10:39,770 --> 00:10:41,610
they provide constant-time lookup.

252
00:10:41,610 --> 00:10:44,285
But the huge disadvantage
is they're humongous.

253
00:10:44,285 --> 00:10:46,160
You can get the sense,
even by looking at it,

254
00:10:46,160 --> 00:10:48,454
that it's going to take
a huge amount of memory.

255
00:10:48,454 --> 00:10:50,620
So they're going to be much
bigger than hash tables,

256
00:10:50,620 --> 00:10:52,270
but they're going to give
us much faster lookup times.

257
00:10:52,270 --> 00:10:54,478
So that's kind of your
tradeoff, what you care about,

258
00:10:54,478 --> 00:10:57,350
whether it's speed or memory.

259
00:10:57,350 --> 00:11:02,251
Any questions on any of that,
all of the C data structures.

260
00:11:02,251 --> 00:11:02,750
Beautiful.

261
00:11:02,750 --> 00:11:03,250
OK.

262
00:11:03,250 --> 00:11:07,322
We're going to move on to a little
bit of web development with Maria.

263
00:11:07,322 --> 00:11:08,280
MARIA ZLATKOVA: Lovely.

264
00:11:08,280 --> 00:11:09,036
OK.

265
00:11:09,036 --> 00:11:10,380
>> HANNAH BLUMBERG: You can use my laptop.

266
00:11:10,380 --> 00:11:11,255
>> MARIA ZLATKOVA: Nice.

267
00:11:11,255 --> 00:11:13,320

268
00:11:13,320 --> 00:11:14,912
OK, cool.

269
00:11:14,912 --> 00:11:17,120
As we move now to web
development, we talked a little

270
00:11:17,120 --> 00:11:20,680
about changing permissions
of files and directories

271
00:11:20,680 --> 00:11:24,190
so that they can be accessible
to other users, to the world,

272
00:11:24,190 --> 00:11:28,640
and so that we can see how
basically we can convey them

273
00:11:28,640 --> 00:11:32,600
when we develop things like websites
that we've mostly been doing.

274
00:11:32,600 --> 00:11:36,400
>> So we saw the chmod command,
which is change mode, basically.

275
00:11:36,400 --> 00:11:39,300
That's a Linux command and
it changes access permissions

276
00:11:39,300 --> 00:11:40,410
of file system objects.

277
00:11:40,410 --> 00:11:43,370
And a file system object is
just a directory, a file,

278
00:11:43,370 --> 00:11:46,810
anything that you can
change the permissions of.

279
00:11:46,810 --> 00:11:53,750
>> So to see the file permissions,
we type the command ls, list, -l.

280
00:11:53,750 --> 00:11:56,500
And when we type that, we
usually see some permissions

281
00:11:56,500 --> 00:11:59,660
that look sort of like this
in front of a directory name.

282
00:11:59,660 --> 00:12:01,260
So d refers to directory.

283
00:12:01,260 --> 00:12:05,930
And then we have three
triads that basically

284
00:12:05,930 --> 00:12:11,675
refer to the permissions of either
a user, a group, or the world.

285
00:12:11,675 --> 00:12:16,490
>> The types of permissions that we can
have for these three groups of people

286
00:12:16,490 --> 00:12:20,830
are either r for read, w for
write, and x for execute.

287
00:12:20,830 --> 00:12:23,650
And we can have those for
the group and world as well.

288
00:12:23,650 --> 00:12:26,940
The tricky thing is that sometimes
when we type the chmod command,

289
00:12:26,940 --> 00:12:32,960
we would type some number
that consisted of three bits.

290
00:12:32,960 --> 00:12:36,990
So we could do like
777 and that basically

291
00:12:36,990 --> 00:12:40,450
referred to the added value
of each of these triads

292
00:12:40,450 --> 00:12:45,060
because r would refer to 4, w would
refer to 2, and x would refer to 1,

293
00:12:45,060 --> 00:12:50,020
so when added up, each of the numbers
would come down to a cumulative number

294
00:12:50,020 --> 00:12:52,750
to a cumulative value between 0 and 7.

295
00:12:52,750 --> 00:12:55,150
So we could also have 0
for no permissions at all.

296
00:12:55,150 --> 00:12:58,200
And that would basically give us
the permissions for either the user,

297
00:12:58,200 --> 00:13:00,450
the group, or the world.

298
00:13:00,450 --> 00:13:02,620
Any questions on this so far?

299
00:13:02,620 --> 00:13:05,331
>> AUDIENCE: You said read was 4?

300
00:13:05,331 --> 00:13:06,164
MARIA ZLATKOVA: Yes.

301
00:13:06,164 --> 00:13:07,568
AUDIENCE: [INAUDIBLE].

302
00:13:07,568 --> 00:13:08,504
HANNAH BLUMBERG: Yup.

303
00:13:08,504 --> 00:13:11,790
AUDIENCE: And then by adding all those
others would indicate your number.

304
00:13:11,790 --> 00:13:12,665
MARIA ZLATKOVA: Yeah.

305
00:13:12,665 --> 00:13:14,970
Yeah.

306
00:13:14,970 --> 00:13:17,810
These are great questions.

307
00:13:17,810 --> 00:13:20,490
Lovely.

308
00:13:20,490 --> 00:13:25,340
Next, we jumped into HTML and a
bit more about web development.

309
00:13:25,340 --> 00:13:27,990
So HTML just means
HyperText Markup Language.

310
00:13:27,990 --> 00:13:30,460
And that is the markup
language that is a standard

311
00:13:30,460 --> 00:13:32,720
that it's used to create web pages.

312
00:13:32,720 --> 00:13:35,750
>> It's called a markup language
because it's not actually compiled.

313
00:13:35,750 --> 00:13:40,310
It doesn't say how some code should
be executed or anything like that.

314
00:13:40,310 --> 00:13:44,800
It just delineates and
describes how a web

315
00:13:44,800 --> 00:13:46,840
page should be set up
with each of its elements

316
00:13:46,840 --> 00:13:48,460
and how they should look to the user.

317
00:13:48,460 --> 00:13:53,090

318
00:13:53,090 --> 00:13:57,110
>> Some of the HTML tags that we
went over are the following.

319
00:13:57,110 --> 00:14:00,500
All of our HTML documents
started with the DOCTYPE html.

320
00:14:00,500 --> 00:14:02,550
Then we always have the html tag.

321
00:14:02,550 --> 00:14:03,930
We have a head and a body.

322
00:14:03,930 --> 00:14:07,890
And it's important that HTML has
this sort of nested structure

323
00:14:07,890 --> 00:14:09,280
because it's very clear.

324
00:14:09,280 --> 00:14:13,200
And then it becomes very clear when we
need to open and actually close tags.

325
00:14:13,200 --> 00:14:18,400
And we always need to close
tags that we've opened.

326
00:14:18,400 --> 00:14:23,170
>> And here we have some of the types
of things ahead that we want to have.

327
00:14:23,170 --> 00:14:26,580
So we have, for example,
the title of CS50.

328
00:14:26,580 --> 00:14:31,980
And then we actually
can link a style sheet

329
00:14:31,980 --> 00:14:34,030
that defines how we style our website.

330
00:14:34,030 --> 00:14:35,650
That is CSS.

331
00:14:35,650 --> 00:14:39,320
We're going to go over it in the
next couple of slides as well.

332
00:14:39,320 --> 00:14:42,580
>> Within the body, we set
some classes and IDs.

333
00:14:42,580 --> 00:14:45,860
And as a reminder, again,
IDs are unique and classes

334
00:14:45,860 --> 00:14:47,390
can be assigned to multiple items.

335
00:14:47,390 --> 00:14:52,110
And that just means that
we can use classes and IDs

336
00:14:52,110 --> 00:14:55,860
within other structures-- so, for
example, within CSS files or style

337
00:14:55,860 --> 00:15:00,940
sheets-- to refer to specific elements
and basically say that we want to style

338
00:15:00,940 --> 00:15:03,280
or design some element
in some particular way.

339
00:15:03,280 --> 00:15:06,440
And we refer to them by
their IDs and classes.

340
00:15:06,440 --> 00:15:09,870
And we can also refer to
different things by tags as well,

341
00:15:09,870 --> 00:15:13,830
but IDs and classes just give us some
versatility and what specifically we

342
00:15:13,830 --> 00:15:15,850
want to refer to.

343
00:15:15,850 --> 00:15:19,620
>> So just an example.

344
00:15:19,620 --> 00:15:22,730
We can, again, within
a CSS file where we

345
00:15:22,730 --> 00:15:25,770
want to define some
style-- so colors, fonts,

346
00:15:25,770 --> 00:15:30,340
and stuff like that-- we can
define the style for a body.

347
00:15:30,340 --> 00:15:32,640
So that would define it
for the whole body tag.

348
00:15:32,640 --> 00:15:36,160
But then we can also define
a style for a #title.

349
00:15:36,160 --> 00:15:40,390
And again, the hashtag refers to our
ID and the dot refers to our class.

350
00:15:40,390 --> 00:15:44,760
>> And then for the .info, we
can also set some attributes.

351
00:15:44,760 --> 00:15:49,750
And again, when we go back, we had our
class called info and our ID title.

352
00:15:49,750 --> 00:15:53,422
And we can see that we refer
to them by #title and .info.

353
00:15:53,422 --> 00:15:55,380
AUDIENCE: Would you say
hashtag [? adopt me? ?]

354
00:15:55,380 --> 00:15:55,725
MARIA ZLATKOVA: Sorry?

355
00:15:55,725 --> 00:15:58,120
AUDIENCE: Would you say
hashtag [? adopt me? ?]

356
00:15:58,120 --> 00:16:01,400
MARIA ZLATKOVA: Hashtag
means ID, so #title

357
00:16:01,400 --> 00:16:07,890
refers to whatever elements
have this ID called title.

358
00:16:07,890 --> 00:16:10,735
And then the dot refers to a class.

359
00:16:10,735 --> 00:16:14,590
So .info refers to this element
because it has the class info.

360
00:16:14,590 --> 00:16:15,090
Yup.

361
00:16:15,090 --> 00:16:17,905
>> AUDIENCE: Why do you
distinguish them in the HTML?

362
00:16:17,905 --> 00:16:20,985
Why do you say certain things are
IDs and certain things are class?

363
00:16:20,985 --> 00:16:22,610
MARIA ZLATKOVA: That's just up to you--

364
00:16:22,610 --> 00:16:24,151
HANNAH BLUMBERG: Repeat the question.

365
00:16:24,151 --> 00:16:25,370
MARIA ZLATKOVA: Oh, sorry.

366
00:16:25,370 --> 00:16:29,480
Why do we distinguish certain elements
as IDs and other elements as classes?

367
00:16:29,480 --> 00:16:34,760
That's just because it's
really often a design choice.

368
00:16:34,760 --> 00:16:38,520
It gives you a lot of
versatility in being

369
00:16:38,520 --> 00:16:43,250
able to say I want this specific item
to have this ID because they want

370
00:16:43,250 --> 00:16:45,300
to do a lot of things
with it, and I only

371
00:16:45,300 --> 00:16:50,010
want to define a style, certain style
or color whatever for that item.

372
00:16:50,010 --> 00:16:52,630
And the way to do that
is just giving it an ID.

373
00:16:52,630 --> 00:16:55,060
>> And then if I want to have
a couple of different items

374
00:16:55,060 --> 00:16:58,940
having that, instead of
going and setting their--

375
00:16:58,940 --> 00:17:03,840
instead of doing it by
tag because the tag would

376
00:17:03,840 --> 00:17:07,369
set the cell for the whole tag
for every time that tag is used,

377
00:17:07,369 --> 00:17:09,740
you can set a class to multiple items.

378
00:17:09,740 --> 00:17:15,109
And then just access that class and say
I want to style this class that way.

379
00:17:15,109 --> 00:17:17,579
>> And again, the class can
be multiple different items

380
00:17:17,579 --> 00:17:21,150
and the ID has to be unique.

381
00:17:21,150 --> 00:17:21,849
Great questions.

382
00:17:21,849 --> 00:17:25,339
Any other questions?

383
00:17:25,339 --> 00:17:26,220
OK, awesome.

384
00:17:26,220 --> 00:17:30,680

385
00:17:30,680 --> 00:17:35,330
Again, this is how these selectors
are referenced in CSS, with hashtag,

386
00:17:35,330 --> 00:17:40,031
with dot, or without anything for
assigning the style of some tag,

387
00:17:40,031 --> 00:17:40,530
like body.

388
00:17:40,530 --> 00:17:43,500

389
00:17:43,500 --> 00:17:47,860
And here we have the general
syntax of how this is done.

390
00:17:47,860 --> 00:17:52,830

391
00:17:52,830 --> 00:17:55,680
>> To repeat some best
practices for HTML and CSS,

392
00:17:55,680 --> 00:17:59,170
we need to, again, close all
the HTML tags that we open.

393
00:17:59,170 --> 00:18:03,950
And what we recommended you
do for your final projects,

394
00:18:03,950 --> 00:18:10,560
as well as for CS50 Finance, is to make
sure that all of your HTML validates.

395
00:18:10,560 --> 00:18:12,920
And that's done with the W3 Validator.

396
00:18:12,920 --> 00:18:16,940
>> And then what we did and
what we recommend doing

397
00:18:16,940 --> 00:18:19,790
is separating style, so
CSS from markup HTML.

398
00:18:19,790 --> 00:18:24,210
So anything that relates to how
your page is going to visually look

399
00:18:24,210 --> 00:18:27,330
and how it's going to be modified
should go into a CSS document.

400
00:18:27,330 --> 00:18:33,880
And then your markup saying how things
are in relation to each other is HTML,

401
00:18:33,880 --> 00:18:37,550
and that should go inside
of your HTML documents.

402
00:18:37,550 --> 00:18:38,590
Any questions?

403
00:18:38,590 --> 00:18:39,226
Mhm.

404
00:18:39,226 --> 00:18:42,628
>> AUDIENCE: What exactly is going
on with the page validation

405
00:18:42,628 --> 00:18:47,945
when we're validating the
HTML that [INAUDIBLE] created?

406
00:18:47,945 --> 00:18:49,850
>> MARIA ZLATKOVA: So what-- think you.

407
00:18:49,850 --> 00:18:53,020
So what exactly is going
on with page validation

408
00:18:53,020 --> 00:18:55,570
and why do we need to do that?

409
00:18:55,570 --> 00:18:59,180
Basically, we need to do that
because a lot of times, your browser,

410
00:18:59,180 --> 00:19:01,390
if you don't close a tag
or something like that,

411
00:19:01,390 --> 00:19:05,680
your browser is still going to
render a page and might still work,

412
00:19:05,680 --> 00:19:10,840
but it's best practice to make sure that
you've, again, closed all your tags,

413
00:19:10,840 --> 00:19:13,190
that all your elements are
the way that they should be,

414
00:19:13,190 --> 00:19:18,470
and basically that it's by the
conventions that are preset.

415
00:19:18,470 --> 00:19:21,970
>> It's, again, just a
thing that you should

416
00:19:21,970 --> 00:19:24,040
be learning to be doing,
as opposed to having

417
00:19:24,040 --> 00:19:25,696
sloppier code and stuff like that.

418
00:19:25,696 --> 00:19:26,688
Yeah.

419
00:19:26,688 --> 00:19:27,680
Oh, sorry.

420
00:19:27,680 --> 00:19:29,221
I thought you were raising your hand.

421
00:19:29,221 --> 00:19:31,240
AUDIENCE: No, I was just [INAUDIBLE].

422
00:19:31,240 --> 00:19:33,800
>> MARIA ZLATKOVA: OK.

423
00:19:33,800 --> 00:19:34,640
>> AUDIENCE: Thank you.

424
00:19:34,640 --> 00:19:36,181
>> MARIA ZLATKOVA: Of course, thank you.

425
00:19:36,181 --> 00:19:41,680
So again, going on into how
information is transferred

426
00:19:41,680 --> 00:19:44,630
and communication models
to transfer information.

427
00:19:44,630 --> 00:19:45,730
TCP/IP.

428
00:19:45,730 --> 00:19:48,600
TCP just means Transmission
Control Protocol and IP

429
00:19:48,600 --> 00:19:51,260
refers to Internet Protocol.

430
00:19:51,260 --> 00:19:54,275
And that just refers to
the way data is delivered.

431
00:19:54,275 --> 00:19:59,470

432
00:19:59,470 --> 00:20:02,710
>> If we have some data that
needs to delivered to you-- so

433
00:20:02,710 --> 00:20:06,770
you make a request for a certain server.

434
00:20:06,770 --> 00:20:09,800
For example, when we
try to access cs50.net,

435
00:20:09,800 --> 00:20:12,420
we make a request to
the CS50 server and we

436
00:20:12,420 --> 00:20:14,720
see that we want to get
this sort of information.

437
00:20:14,720 --> 00:20:19,294
And then are based on this protocol
for how this information is delivered,

438
00:20:19,294 --> 00:20:21,460
the server gives information
back to us, the client.

439
00:20:21,460 --> 00:20:25,590
And then we're able to view
the information for the page

440
00:20:25,590 --> 00:20:26,390
and then use it.

441
00:20:26,390 --> 00:20:29,300

442
00:20:29,300 --> 00:20:33,050
>> So then Hypertext Transfer Protocol
is just another protocol or set

443
00:20:33,050 --> 00:20:37,470
of conventions that defines how
the web browser and the web server

444
00:20:37,470 --> 00:20:38,890
should communicate.

445
00:20:38,890 --> 00:20:43,730
And putting this all
together, HTTP, again,

446
00:20:43,730 --> 00:20:50,960
just defines how this hypertext defined
by the HTML that we've been working it,

447
00:20:50,960 --> 00:20:59,500
how it should be delivered to you and
how that data that is delivered to you

448
00:20:59,500 --> 00:21:00,540
gets to you.

449
00:21:00,540 --> 00:21:05,990
>> And that's why, if you guys remember
from a class, we had a lot of requests

450
00:21:05,990 --> 00:21:08,970
and we had a lot of syntax
for these requests that we're

451
00:21:08,970 --> 00:21:10,250
going to go over right now.

452
00:21:10,250 --> 00:21:13,270
So again, when we send
a request to a server,

453
00:21:13,270 --> 00:21:15,920
we have to define a couple of things.

454
00:21:15,920 --> 00:21:18,520
So we need to find the type
of request that we're setting.

455
00:21:18,520 --> 00:21:22,180
And again, we have, for example,
GET is one type of method

456
00:21:22,180 --> 00:21:25,290
that we have in our request.

457
00:21:25,290 --> 00:21:31,710
>> And then HTTP/1.1 is just the
protocol that we're using currently.

458
00:21:31,710 --> 00:21:34,224

459
00:21:34,224 --> 00:21:36,890
Most of the time, that's going
to the protocol that we're using.

460
00:21:36,890 --> 00:21:40,290
So if you have a question
like that on your quiz.

461
00:21:40,290 --> 00:21:43,120
That's the conventions
that we have so far.

462
00:21:43,120 --> 00:21:46,580
>> Backslash refers to what sort
of things we're requesting.

463
00:21:46,580 --> 00:21:52,810
Then, our host is, for example, in this
case, we're trying to go to google.com.

464
00:21:52,810 --> 00:21:57,070
So this is the value for a host.

465
00:21:57,070 --> 00:21:59,330
This is a type of request
that could be sent.

466
00:21:59,330 --> 00:22:02,890
>> And then a type of response that could
be sent, again, based on this protocol,

467
00:22:02,890 --> 00:22:05,190
is again, HTTP/1.1.

468
00:22:05,190 --> 00:22:07,150
So that's the HTTP version again.

469
00:22:07,150 --> 00:22:09,730
200 OK is just the status code.

470
00:22:09,730 --> 00:22:12,860
And that OK is just a phrase
based on that status code.

471
00:22:12,860 --> 00:22:15,520
>> And then the Content-Type
refers to the type

472
00:22:15,520 --> 00:22:20,295
that is returned to you that is
for that web page that you receive

473
00:22:20,295 --> 00:22:22,570
and that your browser
can render afterwards.

474
00:22:22,570 --> 00:22:24,401
And that is text/html.

475
00:22:24,401 --> 00:22:26,660
>> AUDIENCE: What does 1.1 mean?

476
00:22:26,660 --> 00:22:29,910
>> MARIA ZLATKOVA: That's just the
version of-- oh, what does 1.1 mean?

477
00:22:29,910 --> 00:22:37,075
That is just the version, the HTTP
version of a protocol that we're using.

478
00:22:37,075 --> 00:22:37,700
Great question.

479
00:22:37,700 --> 00:22:38,366
Other questions?

480
00:22:38,366 --> 00:22:41,222

481
00:22:41,222 --> 00:22:45,080
>> AUDIENCE: Could you sum up
Content-Type real quick?

482
00:22:45,080 --> 00:22:48,150
>> MARIA ZLATKOVA: So that
is what the server.

483
00:22:48,150 --> 00:22:51,020
the type of information-- what is
content type was the questions.

484
00:22:51,020 --> 00:22:53,400
So that was the type of
information that you get back

485
00:22:53,400 --> 00:22:58,200
from the server, the type of
data that the browser can then

486
00:22:58,200 --> 00:23:00,604
render that you're using.

487
00:23:00,604 --> 00:23:03,020
AUDIENCE: Is that what this
protocol is telling you to do?

488
00:23:03,020 --> 00:23:03,390
MARIA ZLATKOVA: Sorry?

489
00:23:03,390 --> 00:23:05,380
AUDIENCE: Is that what the protocol say?

490
00:23:05,380 --> 00:23:05,915
MARIA ZLATKOVA: The protocol--

491
00:23:05,915 --> 00:23:07,940
AUDIENCE: --what the
Content-Type is or what--

492
00:23:07,940 --> 00:23:12,040
MARIA ZLATKOVA: The protocol is based
on-- what is the protocol telling you?

493
00:23:12,040 --> 00:23:16,070
That's just the way
that this information

494
00:23:16,070 --> 00:23:18,610
was delivered to you based
on what sort of protocol

495
00:23:18,610 --> 00:23:21,830
was this information got
delivered back to you.

496
00:23:21,830 --> 00:23:23,500
Does that make sense sort of?

497
00:23:23,500 --> 00:23:28,320

498
00:23:28,320 --> 00:23:30,070
HANNAH BLUMBERG: You
can think of protocol

499
00:23:30,070 --> 00:23:33,300
as a-- I think Professor
Malan described it

500
00:23:33,300 --> 00:23:36,910
in class as kind of like a-- it's like
the equivalent of human handshaking.

501
00:23:36,910 --> 00:23:44,930
Say, like, hey, I'm a request and I
know how to handle HTTP of version 1.1.

502
00:23:44,930 --> 00:23:48,770
And then the server says,
oh, OK, I-- and both exist.

503
00:23:48,770 --> 00:23:51,337
I also know how to deal with HTTP/1.1.

504
00:23:51,337 --> 00:23:53,170
And I'm going to give
you back some content.

505
00:23:53,170 --> 00:23:56,230
In this case, it's going
to be of type text/html.

506
00:23:56,230 --> 00:23:58,480
So it's kind of just a way
of them for communicating--

507
00:23:58,480 --> 00:24:00,480
>> MARIA ZLATKOVA: It's just
confirming that you're

508
00:24:00,480 --> 00:24:03,290
both following the same
protocol and that both

509
00:24:03,290 --> 00:24:06,620
the client and the server-- so
your browser and the server--

510
00:24:06,620 --> 00:24:09,280
sort of know what you're
talking about and have

511
00:24:09,280 --> 00:24:12,557
the convention for passing in data.

512
00:24:12,557 --> 00:24:17,022
>> AUDIENCE: So the Content-Type part--
the Content-Type text/html-- that's

513
00:24:17,022 --> 00:24:18,521
a separate part of the same message?

514
00:24:18,521 --> 00:24:20,509
Or is it part of let's say, 200?

515
00:24:20,509 --> 00:24:22,010
Does 200 tell them that or is--

516
00:24:22,010 --> 00:24:23,770
>> MARIA ZLATKOVA: 200 says it all went OK.

517
00:24:23,770 --> 00:24:27,900
And then content type is sort of a
separate part of the same message,

518
00:24:27,900 --> 00:24:34,274
and saying the thing that I
returned has this type of text/html.

519
00:24:34,274 --> 00:24:35,690
It's just giving more information.

520
00:24:35,690 --> 00:24:38,700

521
00:24:38,700 --> 00:24:39,995
Have anything to add?

522
00:24:39,995 --> 00:24:40,495
OK.

523
00:24:40,495 --> 00:24:43,590

524
00:24:43,590 --> 00:24:46,530
>> Any other questions on this?

525
00:24:46,530 --> 00:24:48,370
Awesome.

526
00:24:48,370 --> 00:24:54,070
So some other HTTP statuses that
we could get in addition to 200 OK,

527
00:24:54,070 --> 00:24:59,500
ones that we've seen maybe
possibly a lot are 403 and 404.

528
00:24:59,500 --> 00:25:05,190
So 404, if you were trying to
access something that doesn't exist.

529
00:25:05,190 --> 00:25:10,460
So for example, in your
CS50 Finance psets,

530
00:25:10,460 --> 00:25:15,640
if you had been rendering quote.html
and you didn't have that file,

531
00:25:15,640 --> 00:25:19,740
but instead you had quote.php, that
would result in a 404 Not Found

532
00:25:19,740 --> 00:25:21,600
because the file might not exist.

533
00:25:21,600 --> 00:25:25,690
>> For a 403 forbidden, that
refers to the permissions.

534
00:25:25,690 --> 00:25:31,150
So if some file is not readable by the
world, you might get a 403 returned.

535
00:25:31,150 --> 00:25:34,510

536
00:25:34,510 --> 00:25:37,810
Some others that you might
get-- 301, Moved Permanently;

537
00:25:37,810 --> 00:25:41,300
302, Found; 304, Modified;
400, Bad Request;

538
00:25:41,300 --> 00:25:47,330
and then Internal Server Error for
500 and 503, Service Unavailable.

539
00:25:47,330 --> 00:25:48,140
Yes.

540
00:25:48,140 --> 00:25:51,490
>> AUDIENCE: Will we expected to
memorize all those statuses?

541
00:25:51,490 --> 00:25:53,739
MARIA ZLATKOVA: I would have
them on your cheat sheet.

542
00:25:53,739 --> 00:25:55,146
[LAUGHTER]

543
00:25:55,146 --> 00:25:59,954
AUDIENCE: Are we expected to
know what triggers each one?

544
00:25:59,954 --> 00:26:00,995
MARIA ZLATKOVA: Are they?

545
00:26:00,995 --> 00:26:03,870
HANNAH BLUMBERG: For ones that we've
run into-- so the question was--

546
00:26:03,870 --> 00:26:08,010
MARIA ZLATKOVA: Are they expected to
know what each one of these status

547
00:26:08,010 --> 00:26:09,330
codes might be triggered by?

548
00:26:09,330 --> 00:26:13,240
So for the ones that we've used
and ran into, I would say, yes.

549
00:26:13,240 --> 00:26:16,610
So we've definitely seen 200
OK and lectured it in psets.

550
00:26:16,610 --> 00:26:19,071
We've seen 403, 404.

551
00:26:19,071 --> 00:26:20,550
For other ones?

552
00:26:20,550 --> 00:26:22,690
>> HANNAH BLUMBERG: I would
say 500 seems fair game.

553
00:26:22,690 --> 00:26:23,330
>> MARIA ZLATKOVA: 500, yeah.

554
00:26:23,330 --> 00:26:24,246
>> HANNAH BLUMBERG: Yeah.

555
00:26:24,246 --> 00:26:27,006
Just have a general sense
of what causes them.

556
00:26:27,006 --> 00:26:28,880
And also just by these
names, you can kind of

557
00:26:28,880 --> 00:26:32,890
like make an educated guess as
to what actually caused them.

558
00:26:32,890 --> 00:26:36,919
For example, move permanently, probably
the file was moved permanently.

559
00:26:36,919 --> 00:26:39,328
>> AUDIENCE: But on a previous
exam, there was a so

560
00:26:39,328 --> 00:26:41,050
how do you expect us to answer that?

561
00:26:41,050 --> 00:26:42,883
>> HANNAH BLUMBERG: That
was worth zero points.

562
00:26:42,883 --> 00:26:45,870
The question on 418 on the teapot
is technically a HTTP status,

563
00:26:45,870 --> 00:26:47,090
but it was worth zero points.

564
00:26:47,090 --> 00:26:48,320
Obviously, you're not
expected to know them.

565
00:26:48,320 --> 00:26:49,670
>> AUDIENCE: Is it a real one?

566
00:26:49,670 --> 00:26:51,970
>> HANNAH BLUMBERG: It is a real
one, but it doesn't mean anything.

567
00:26:51,970 --> 00:26:52,700
It's just a joke.

568
00:26:52,700 --> 00:26:55,480

569
00:26:55,480 --> 00:26:57,010
Internet people are funny.

570
00:26:57,010 --> 00:26:59,680
>> MARIA ZLATKOVA: Great questions, guys.

571
00:26:59,680 --> 00:27:01,452
Any other questions?

572
00:27:01,452 --> 00:27:04,891
>> AUDIENCE: What is internal server error?

573
00:27:04,891 --> 00:27:06,640
MARIA ZLATKOVA: Internal
server error just

574
00:27:06,640 --> 00:27:10,050
means that you have been
unable to communicate

575
00:27:10,050 --> 00:27:13,400
with the server for some reason.

576
00:27:13,400 --> 00:27:15,400
So it's not necessarily
something that has to do

577
00:27:15,400 --> 00:27:19,170
with the client or something like that.

578
00:27:19,170 --> 00:27:22,170
I don't know of any specific example
that we've gone over to explain,

579
00:27:22,170 --> 00:27:23,000
but yeah.

580
00:27:23,000 --> 00:27:23,250
>> HANNAH BLUMBERG: Sure.

581
00:27:23,250 --> 00:27:25,625
So for example, like let's
say you were working on mashup

582
00:27:25,625 --> 00:27:30,440
and a Google server went down for some
reason, a power outage, let's say.

583
00:27:30,440 --> 00:27:33,400
That would be an internal server
error or some sort of-- like you

584
00:27:33,400 --> 00:27:34,630
wouldn't get a response back.

585
00:27:34,630 --> 00:27:35,260
>> MARIA ZLATKOVA: Yeah.

586
00:27:35,260 --> 00:27:37,050
It's just when you're
unable to communicate

587
00:27:37,050 --> 00:27:40,299
with the server for some reason because
of it going down or some other reason.

588
00:27:40,299 --> 00:27:44,430

589
00:27:44,430 --> 00:27:47,690
So jumping into PHP.

590
00:27:47,690 --> 00:27:49,930
PHP, unlike HTML, is a
programming language.

591
00:27:49,930 --> 00:27:54,820
And we started using it because it's
very useful for web development.

592
00:27:54,820 --> 00:27:56,940
>> We first used it in CS50 Finance.

593
00:27:56,940 --> 00:28:02,240
And it basically helps us bring
together this markup, the design,

594
00:28:02,240 --> 00:28:07,460
and how we actually use information
to display things on a web page.

595
00:28:07,460 --> 00:28:11,870
So PHP itself means PHP
Hypertext Preprocessor,

596
00:28:11,870 --> 00:28:15,360
so it's a recursive backnorym by itself.

597
00:28:15,360 --> 00:28:22,330
And opening tags for PHP we the left
and right arrows with the question marks

598
00:28:22,330 --> 00:28:23,060
and php.

599
00:28:23,060 --> 00:28:25,890
>> So we've already seen a bunch of it.

600
00:28:25,890 --> 00:28:29,150
Now, we're just going to go over
some of the basic things about it.

601
00:28:29,150 --> 00:28:32,280
So with PHP, the variable
names start with dollar sign.

602
00:28:32,280 --> 00:28:35,660
We don't specify, again,
a variable type anymore.

603
00:28:35,660 --> 00:28:38,450
Just like we did with C,
we don't need to do that.

604
00:28:38,450 --> 00:28:41,670

605
00:28:41,670 --> 00:28:44,490
>> We can do a bunch of different
stuff with variables.

606
00:28:44,490 --> 00:28:47,750
We can put them together
by concatenating them

607
00:28:47,750 --> 00:28:52,900
with the dot notation, which
we could not do in C again.

608
00:28:52,900 --> 00:28:57,490
Again, we have a bit more versatility
with PHP in terms of variables.

609
00:28:57,490 --> 00:29:00,080
Again, we don't have a main function.

610
00:29:00,080 --> 00:29:03,370
>> And PHP is interpreted
as opposed to compiled,

611
00:29:03,370 --> 00:29:09,970
So just how we did make for C files,
we don't have to do that for PHP.

612
00:29:09,970 --> 00:29:15,440
But rather, the way that the language
is run by itself, it is interpreted.

613
00:29:15,440 --> 00:29:18,550
And then loosely typed
just means that we

614
00:29:18,550 --> 00:29:22,490
don't have to specify a variable
type and the variable types

615
00:29:22,490 --> 00:29:25,415
are understood at runtime.

616
00:29:25,415 --> 00:29:29,185
>> AUDIENCE: But what did you
mean by dot concatenation?

617
00:29:29,185 --> 00:29:30,060
MARIA ZLATKOVA: Sure.

618
00:29:30,060 --> 00:29:37,660
When we want to put things together--
so if we had some variable that

619
00:29:37,660 --> 00:29:41,500
had the value of 3 and we had another
variable that had the value of string,

620
00:29:41,500 --> 00:29:45,920
we could put the variables together
by putting a dot in between them

621
00:29:45,920 --> 00:29:46,970
and concatenating them.

622
00:29:46,970 --> 00:29:52,670
Or we could create a
variable called name

623
00:29:52,670 --> 00:29:56,900
and put it together by
concatenating two strings.

624
00:29:56,900 --> 00:30:00,680
>> So if we had a string in double
quotes and we put a dot after it,

625
00:30:00,680 --> 00:30:03,660
and then we had another string, that
would create a string altogether.

626
00:30:03,660 --> 00:30:05,242
>> AUDIENCE: OK.

627
00:30:05,242 --> 00:30:06,450
MARIA LATVIA: Was that clear?

628
00:30:06,450 --> 00:30:07,099
AUDIENCE: Yeah.

629
00:30:07,099 --> 00:30:07,890
MARIA ZLATKOVA: OK.

630
00:30:07,890 --> 00:30:08,766
Yes.

631
00:30:08,766 --> 00:30:11,146
>> AUDIENCE: When you say
interpreted rather than compiled,

632
00:30:11,146 --> 00:30:14,160
are you talking about you don't
need to be as specific when

633
00:30:14,160 --> 00:30:15,906
it comes to PHP versus C?

634
00:30:15,906 --> 00:30:18,085

635
00:30:18,085 --> 00:30:20,710
MARIA ZLATKOVA: When we say
interpreted as opposed to compiled,

636
00:30:20,710 --> 00:30:21,850
what do we mean?

637
00:30:21,850 --> 00:30:26,220
So that means that we don't need
executable files to run PHP.

638
00:30:26,220 --> 00:30:29,870
It means that it runs as it goes.

639
00:30:29,870 --> 00:30:31,650
Does that make sense?

640
00:30:31,650 --> 00:30:32,495
A bit more.

641
00:30:32,495 --> 00:30:34,620
HANNAH BLUMBERG: So you
can think of an interpreter

642
00:30:34,620 --> 00:30:38,980
as another program that is responsible
for going line by line through PHP

643
00:30:38,980 --> 00:30:42,745
and actually executing it, as opposed
to compiling it all down to binary.

644
00:30:42,745 --> 00:30:46,050
It doesn't actually mean anything
about how specific we need to be.

645
00:30:46,050 --> 00:30:49,470
We still need to be precise, and don't
forget your semicolon, and make sure

646
00:30:49,470 --> 00:30:51,470
you have your dollar sign,
and things like that.

647
00:30:51,470 --> 00:30:52,240
Good question.

648
00:30:52,240 --> 00:30:53,115
>> MARIA ZLATKOVA: Yeah.

649
00:30:53,115 --> 00:30:55,590
So line by line, as
opposed to with C files,

650
00:30:55,590 --> 00:30:59,100
we have to make the whole final
before we can actually run it.

651
00:30:59,100 --> 00:31:00,360
That's the main difference.

652
00:31:00,360 --> 00:31:02,655
But again, we can't
really be less specific.

653
00:31:02,655 --> 00:31:08,760

654
00:31:08,760 --> 00:31:13,950
So arrays in PHP represent
actually an ordered map.

655
00:31:13,950 --> 00:31:17,550
>> So arrays associate values to keys.

656
00:31:17,550 --> 00:31:23,350
The two ways to declare an
array, based on this syntax,

657
00:31:23,350 --> 00:31:26,380
we can be more explicit
in saying we have an array

658
00:31:26,380 --> 00:31:31,010
and we have this key1 that maps to
this value1, key2 that maps value2.

659
00:31:31,010 --> 00:31:34,660
Or we can just create an array
that contains the values itself

660
00:31:34,660 --> 00:31:38,360
and then the keys are
understood in a way.

661
00:31:38,360 --> 00:31:40,000
Any questions on this?

662
00:31:40,000 --> 00:31:42,500
>> AUDIENCE: What would the keys
be in the second example?

663
00:31:42,500 --> 00:31:47,100

664
00:31:47,100 --> 00:31:47,920
0, 1, 2, 3?

665
00:31:47,920 --> 00:31:50,650

666
00:31:50,650 --> 00:31:55,780
>> MARIA ZLATKOVA: For example, it's just
the keys in this don't necessarily

667
00:31:55,780 --> 00:31:56,550
make a difference.

668
00:31:56,550 --> 00:32:01,720
They just define how you can
use the values inside of it.

669
00:32:01,720 --> 00:32:08,660
So if we had a foreach
loop in PHP that would

670
00:32:08,660 --> 00:32:14,760
allow us to go through all the values,
we can go through all the values,

671
00:32:14,760 --> 00:32:19,570
even if we had or hadn't defined
a specific key within the site's

672
00:32:19,570 --> 00:32:20,820
previous syntax.

673
00:32:20,820 --> 00:32:23,460
>> So even with this sort
of array, we could still

674
00:32:23,460 --> 00:32:26,260
have a foreach loop
that goes through each

675
00:32:26,260 --> 00:32:31,240
of the values in the key in the array.

676
00:32:31,240 --> 00:32:36,180
So the syntax of a foreach
loop, we start with an array.

677
00:32:36,180 --> 00:32:38,720

678
00:32:38,720 --> 00:32:43,900
This $arr variable is our actual array
that we defined in the previous slide

679
00:32:43,900 --> 00:32:47,550
as value that literally goes
through each of the values,

680
00:32:47,550 --> 00:32:50,122
regardless of whether
we had a key or not.

681
00:32:50,122 --> 00:32:53,080
And then we can do something with
the value inside of the foreach loop.

682
00:32:53,080 --> 00:32:57,730
So again, if we had an array
like this here created--

683
00:32:57,730 --> 00:33:03,270
so we have the key of foo and value of
bar, the key of baz and value of qux--

684
00:33:03,270 --> 00:33:09,730
we can have a foreach loop that
goes through array as key value

685
00:33:09,730 --> 00:33:11,900
and then do something
with the key and/or value.

686
00:33:11,900 --> 00:33:15,980
But we don't necessarily always
have to have a foreach loops that

687
00:33:15,980 --> 00:33:19,410
goes through array as key map to value.

688
00:33:19,410 --> 00:33:26,060
We can go through the
foreach loop array as value.

689
00:33:26,060 --> 00:33:28,990
>> HANNAH BLUMBERG: And I think
to-- was your question, what

690
00:33:28,990 --> 00:33:31,229
is the implicit index?

691
00:33:31,229 --> 00:33:31,895
AUDIENCE: Kinda.

692
00:33:31,895 --> 00:33:32,240
MARIA ZLATKOVA: Oh.

693
00:33:32,240 --> 00:33:33,406
HANNAH BLUMBERG: Yeah, yeah.

694
00:33:33,406 --> 00:33:36,150
So basically, if you don't specify
a key, it's going to be 01.

695
00:33:36,150 --> 00:33:37,140
>> MARIA ZLATKOVA: Yeah.

696
00:33:37,140 --> 00:33:41,718
Just like with C, it's zero
indexed if you don't specify a key.

697
00:33:41,718 --> 00:33:42,384
AUDIENCE: Sorry.

698
00:33:42,384 --> 00:33:43,827
Could you try speaking
a little bit louder?

699
00:33:43,827 --> 00:33:45,270
I'm having a little bit of
trouble hearing everything.

700
00:33:45,270 --> 00:33:46,478
>> MARIA ZLATKOVA: I'm so sorry.

701
00:33:46,478 --> 00:33:48,439
Yeah, of course.

702
00:33:48,439 --> 00:33:50,230
So do you want to me
to go over this again?

703
00:33:50,230 --> 00:33:51,680
Or is this--

704
00:33:51,680 --> 00:33:54,930
AUDIENCE: So on the previous slide-- if
you could just go back for one second.

705
00:33:54,930 --> 00:33:57,313
MARIA ZLATKOVA: Of course, sorry.

706
00:33:57,313 --> 00:33:59,237
AUDIENCE: So the second
array here doesn't

707
00:33:59,237 --> 00:34:04,135
seem to have a value to key,
sort of [? causation. ?]

708
00:34:04,135 --> 00:34:05,343
MARIA ZLATKOVA: Right, right.

709
00:34:05,343 --> 00:34:07,608
AUDIENCE: So how does that work
when you say it's all or none.

710
00:34:07,608 --> 00:34:08,969
To me, that looks like
a [? foo ?] already.

711
00:34:08,969 --> 00:34:10,093
>> MARIA ZLATKOVA: Yeah, yeah.

712
00:34:10,093 --> 00:34:12,969
So again, this is an
ordered map in this sense

713
00:34:12,969 --> 00:34:15,639
that there are understood,
for example, the indexes

714
00:34:15,639 --> 00:34:20,159
here can be understood as 0, 1, 2, 3.

715
00:34:20,159 --> 00:34:25,929
Again, that's having those
indexes is our equivalent

716
00:34:25,929 --> 00:34:28,980
of having keys mapped onto values.

717
00:34:28,980 --> 00:34:34,710
So if our key was 0-- sorry.

718
00:34:34,710 --> 00:34:36,524
>> HANNAH BLUMBERG: No,
there's chalk up here.

719
00:34:36,524 --> 00:34:36,929
It's actually really nice.

720
00:34:36,929 --> 00:34:37,460
>> MARIA ZLATKOVA: That's great.

721
00:34:37,460 --> 00:34:38,260
OK.

722
00:34:38,260 --> 00:34:49,489
So again, $arr 0 would be
the key for the value 1.

723
00:34:49,489 --> 00:34:51,138
0 would be the key for the value 1.

724
00:34:51,138 --> 00:34:51,971
AUDIENCE: I'm sorry.

725
00:34:51,971 --> 00:34:53,190
It's invisible.

726
00:34:53,190 --> 00:34:53,659
>> HANNAH BLUMBERG: All right, nevermind.

727
00:34:53,659 --> 00:34:54,980
Chalk was a bad idea.

728
00:34:54,980 --> 00:34:58,030
I take it back.

729
00:34:58,030 --> 00:35:01,425
You can think of the keys
as 0 maps to the value 1.

730
00:35:01,425 --> 00:35:02,300
MARIA ZLATKOVA: Yeah.

731
00:35:02,300 --> 00:35:04,630
So this is 0, this is 1, 2, 3.

732
00:35:04,630 --> 00:35:05,760
These can be your keys.

733
00:35:05,760 --> 00:35:10,020
You can think of them as-- yeah.

734
00:35:10,020 --> 00:35:12,740
So instead of having
explicit keys, they're

735
00:35:12,740 --> 00:35:17,180
sort of understood as being
the indexes starting at 0.

736
00:35:17,180 --> 00:35:21,630

737
00:35:21,630 --> 00:35:24,820
The chalk didn't help.

738
00:35:24,820 --> 00:35:25,722
Yeah.

739
00:35:25,722 --> 00:35:30,914
>> AUDIENCE: For the foreach loop,
if we wanted to view the as value,

740
00:35:30,914 --> 00:35:33,245
it would just automatically index to 0?

741
00:35:33,245 --> 00:35:34,120
MARIA ZLATKOVA: Yeah.

742
00:35:34,120 --> 00:35:35,745
It would go through each of the values.

743
00:35:35,745 --> 00:35:39,130
AUDIENCE: [INAUDIBLE] as
0 or would that just do 0?

744
00:35:39,130 --> 00:35:43,710
>> MARIA ZLATKOVA: You would have
to say as dollar sign and then

745
00:35:43,710 --> 00:35:46,266
some variable name, value.

746
00:35:46,266 --> 00:35:47,182
AUDIENCE: [INAUDIBLE].

747
00:35:47,182 --> 00:35:50,048

748
00:35:50,048 --> 00:35:50,964
MARIA ZLATKOVA: Sorry?

749
00:35:50,964 --> 00:35:52,839
AUDIENCE: Sorry, I'm
just trying to remember.

750
00:35:52,839 --> 00:35:57,190
How would you do that if you can do it
automatically indexing is just 0 of?

751
00:35:57,190 --> 00:36:00,780
>> MARIA ZLATKOVA: So how would you do that
if you didn't have specific key names?

752
00:36:00,780 --> 00:36:01,710
>> AUDIENCE: Yeah.

753
00:36:01,710 --> 00:36:07,820
>> MARIA ZLATKOVA: You would just define--
just say yourself as some name.

754
00:36:07,820 --> 00:36:17,950
So in your psets, you guys might
remember foreach $row as $rows,

755
00:36:17,950 --> 00:36:24,610
we created ourself this $row saying
we want to go through row as $rows.

756
00:36:24,610 --> 00:36:28,360
Even though we didn't have
this explicit $rows defined,

757
00:36:28,360 --> 00:36:31,990
we could just go and
say this can be our key,

758
00:36:31,990 --> 00:36:33,615
and just go through each of the values.

759
00:36:33,615 --> 00:36:37,295

760
00:36:37,295 --> 00:36:41,660
>> AUDIENCE: So is value a new variable
we're creating to store [INAUDIBLE]?

761
00:36:41,660 --> 00:36:46,820

762
00:36:46,820 --> 00:36:49,990
>> MARIA ZLATKOVA: So it's not
inherently a new variable.

763
00:36:49,990 --> 00:37:00,310
It's a variable that refers to the
inside of the array to each of them.

764
00:37:00,310 --> 00:37:02,060
HANNAH BLUMBERG: It's
a new variable name.

765
00:37:02,060 --> 00:37:04,018
MARIA ZLATKOVA: Yeah,
it's a new variable name,

766
00:37:04,018 --> 00:37:06,680
but it's not inherently-- yeah.

767
00:37:06,680 --> 00:37:08,950
It's just a new variable
that you can do that.

768
00:37:08,950 --> 00:37:12,680
So just how do we did
$row as $rows, rows

769
00:37:12,680 --> 00:37:17,980
was a new variable name that we
could create in our foreach loop.

770
00:37:17,980 --> 00:37:22,065
It doesn't have to preexist before that.

771
00:37:22,065 --> 00:37:25,777
>> AUDIENCE: Could you go through the
logic for each, using the example there?

772
00:37:25,777 --> 00:37:26,610
MARIA ZLATKOVA: Mhm.

773
00:37:26,610 --> 00:37:31,240

774
00:37:31,240 --> 00:37:32,080
Oh, sorry.

775
00:37:32,080 --> 00:37:33,780
Here's the example.

776
00:37:33,780 --> 00:37:34,280
Sure.

777
00:37:34,280 --> 00:37:38,950
So for each array-- so
that means go to this array

778
00:37:38,950 --> 00:37:43,930
as key value-- that's going
to go through this array

779
00:37:43,930 --> 00:37:49,480
and first go and get foo, the
key foo and the value bar.

780
00:37:49,480 --> 00:37:51,570
And then on the second
iteration of the for loop,

781
00:37:51,570 --> 00:37:55,090
it's going to go through and take
the key baz and the value qux.

782
00:37:55,090 --> 00:38:00,512
And then you can do something with
either of them or both of them.

783
00:38:00,512 --> 00:38:03,488
>> AUDIENCE: So the idea behind
having a key point to the value,

784
00:38:03,488 --> 00:38:07,470
what do you end up accessing?

785
00:38:07,470 --> 00:38:10,680
>> MARIA ZLATKOVA: What is the idea
of having a key pointing to value?

786
00:38:10,680 --> 00:38:16,400
It's just another convention, another
way of going through the array

787
00:38:16,400 --> 00:38:22,600
and being able to access either the
key or the value or both and use them.

788
00:38:22,600 --> 00:38:27,100
>> AUDIENCE: What's the role for the
order that the foreach runs in?

789
00:38:27,100 --> 00:38:29,250
So if we were to add
elements to the array later,

790
00:38:29,250 --> 00:38:32,140
would those be the first ones
called in the foreach array,

791
00:38:32,140 --> 00:38:33,750
or would it be later on?

792
00:38:33,750 --> 00:38:37,770
>> MARIA ZLATKOVA: So what is
the order that the foreach

793
00:38:37,770 --> 00:38:39,210
loop goes through an array in?

794
00:38:39,210 --> 00:38:42,220
It goes through the first
element to the last element,

795
00:38:42,220 --> 00:38:43,400
to the last added element.

796
00:38:43,400 --> 00:38:48,020
If you add elements later on, they would
be accessed-- the first elements would

797
00:38:48,020 --> 00:38:51,410
be accessed as the first
elements of the array,

798
00:38:51,410 --> 00:38:57,620
and then you'd go through each of
the elements as sort of an ordered--

799
00:38:57,620 --> 00:39:02,930
not an ordered, but the way that
they have been put into the array.

800
00:39:02,930 --> 00:39:06,855
>> AUDIENCE: So new elements
are added later on?

801
00:39:06,855 --> 00:39:10,680
So they're added-- they'll be the
last ones in the [? iteration. ?]

802
00:39:10,680 --> 00:39:14,280
>> MARIA ZLATKOVA: New elements can--
basically, when new elements are added,

803
00:39:14,280 --> 00:39:16,520
are they added to the end of the array?

804
00:39:16,520 --> 00:39:17,632
>> AUDIENCE: Yeah.

805
00:39:17,632 --> 00:39:18,840
MARIA ZLATKOVA: I believe so.

806
00:39:18,840 --> 00:39:20,850
Yes.

807
00:39:20,850 --> 00:39:24,330
And then with your foreach loop,
after you've added new elements

808
00:39:24,330 --> 00:39:26,790
and you go through them,
the new elements would

809
00:39:26,790 --> 00:39:30,930
be accessed-- the new element, if it's
added last, it would be accessed last.

810
00:39:30,930 --> 00:39:34,416
>> AUDIENCE: Can you just give an example
of something that would [INAUDIBLE]

811
00:39:34,416 --> 00:39:37,404
with something with value
like [INAUDIBLE] or value,

812
00:39:37,404 --> 00:39:38,910
like how you'd format that?

813
00:39:38,910 --> 00:39:39,785
>> MARIA ZLATKOVA: Sure.

814
00:39:39,785 --> 00:39:42,340

815
00:39:42,340 --> 00:39:46,410
Can I give an example of what
we would do with the value?

816
00:39:46,410 --> 00:39:52,440
So what you guys might be familiar with
is that we've gone through an array

817
00:39:52,440 --> 00:39:55,380
and basically printed
each of the elements,

818
00:39:55,380 --> 00:40:00,910
for example, as part of an
ordered list or something that.

819
00:40:00,910 --> 00:40:02,674
Does that make sense or do we want to--

820
00:40:02,674 --> 00:40:04,340
AUDIENCE: Can we print these values out?

821
00:40:04,340 --> 00:40:13,220
MARIA ZLATKOVA: Yeah, we could print
and then basically $value because at

822
00:40:13,220 --> 00:40:16,570
that specific value, we would be
printing the value inside of it.

823
00:40:16,570 --> 00:40:20,150
So if we were at our first iteration
of it and we printed $value,

824
00:40:20,150 --> 00:40:23,775
we would be printing bar.

825
00:40:23,775 --> 00:40:27,020
>> AUDIENCE: Are there are also for
loops in PHP or just foreach loops?

826
00:40:27,020 --> 00:40:30,430
>> MARIA ZLATKOVA: There's
also for loops in PHP.

827
00:40:30,430 --> 00:40:33,399
And their logic is mostly the
same as what you've been used to.

828
00:40:33,399 --> 00:40:34,690
AUDIENCE: So its value is null.

829
00:40:34,690 --> 00:40:35,090
MARIA ZLATKOVA: It's like the same.

830
00:40:35,090 --> 00:40:35,590
Yeah.

831
00:40:35,590 --> 00:40:37,747
AUDIENCE: I'm just going to ask.

832
00:40:37,747 --> 00:40:39,695
So when you declare an
array, you don't need

833
00:40:39,695 --> 00:40:42,617
to tell what size it's going to
be, which means that you can just

834
00:40:42,617 --> 00:40:44,417
add and take away elements [INAUDIBLE].

835
00:40:44,417 --> 00:40:45,250
MARIA ZLATKOVA: Yup.

836
00:40:45,250 --> 00:40:45,750
Yup.

837
00:40:45,750 --> 00:40:46,251
Exactly.

838
00:40:46,251 --> 00:40:48,875
When we declare an array, we
don't need to say what size it is,

839
00:40:48,875 --> 00:40:51,022
so we can just add elements
onto it later as well.

840
00:40:51,022 --> 00:40:55,075

841
00:40:55,075 --> 00:40:55,700
More questions?

842
00:40:55,700 --> 00:40:59,870

843
00:40:59,870 --> 00:41:05,950
So bringing PHP and HTML together,
what we have seen-- well,

844
00:41:05,950 --> 00:41:15,130
for example, in this example, we have
an HTML form that has an input field.

845
00:41:15,130 --> 00:41:18,830
>> And the input field is just name
and then it has a Submit button.

846
00:41:18,830 --> 00:41:26,040
And when you press the Submit
button, in our hello.php file,

847
00:41:26,040 --> 00:41:32,130
because the method for the form is
get, we can access whatever is at name

848
00:41:32,130 --> 00:41:40,360
by this get global variable that
is-- the syntax for it is $_GET.

849
00:41:40,360 --> 00:41:44,520
And then we can access whatever the
user input inside of that form for name

850
00:41:44,520 --> 00:41:47,410
by specifying the name of that field.

851
00:41:47,410 --> 00:41:51,480

852
00:41:51,480 --> 00:41:55,060
>> Any other questions or any
questions on this specific example?

853
00:41:55,060 --> 00:41:58,275
>> AUDIENCE: Where is the PHP?

854
00:41:58,275 --> 00:41:59,150
MARIA ZLATKOVA: Here.

855
00:41:59,150 --> 00:42:01,150
So this is our opening tag for the PHP.

856
00:42:01,150 --> 00:42:01,530
>> AUDIENCE: Oh, right.

857
00:42:01,530 --> 00:42:02,363
>> MARIA ZLATKOVA: Yes.

858
00:42:02,363 --> 00:42:05,320

859
00:42:05,320 --> 00:42:09,609
>> HANNAH BLUMBERG: The ?= is shorthand
for this is PHP and just echo.

860
00:42:09,609 --> 00:42:10,150
AUDIENCE: Oh.

861
00:42:10,150 --> 00:42:10,720
MARIA ZLATKOVA: Yeah, sorry.

862
00:42:10,720 --> 00:42:12,040
I should have made that clear.

863
00:42:12,040 --> 00:42:13,759
>> HANNAH BLUMBERG: Print.

864
00:42:13,759 --> 00:42:16,800
MARIA ZLATKOVA: It's just the function
that allows us to print something.

865
00:42:16,800 --> 00:42:19,795

866
00:42:19,795 --> 00:42:20,420
Great question.

867
00:42:20,420 --> 00:42:24,140

868
00:42:24,140 --> 00:42:25,495
So going-- yes.

869
00:42:25,495 --> 00:42:31,940
>> AUDIENCE: Is there going to be quite
a bit of hand coding of PHP and HTML

870
00:42:31,940 --> 00:42:33,450
on quiz 1?

871
00:42:33,450 --> 00:42:36,310

872
00:42:36,310 --> 00:42:38,810
MARIA ZLATKOVA: There can be a
fair amount of interpretation

873
00:42:38,810 --> 00:42:43,330
of PHP and HTML, not necessarily
like a huge amount of coding,

874
00:42:43,330 --> 00:42:46,960
though you might have to write a
foreach loop, though, a for loop.

875
00:42:46,960 --> 00:42:49,790
Any of the loops that we
cover here is fair game.

876
00:42:49,790 --> 00:42:51,889
And that's mostly it.

877
00:42:51,889 --> 00:42:53,430
HANNAH BLUMBERG: I would be prepared.

878
00:42:53,430 --> 00:42:57,010
In the same way that we asked you to
write a bunch of C functions on quiz 0,

879
00:42:57,010 --> 00:42:59,766
I would be prepared to do the
same in PHP and JavaScript.

880
00:42:59,766 --> 00:43:00,640
MARIA ZLATKOVA: Yeah.

881
00:43:00,640 --> 00:43:03,210
HANNAH BLUMBERG: I would say
a little-- like we're not

882
00:43:03,210 --> 00:43:06,251
going to make you write a huge HTML
page just because that's a little bit

883
00:43:06,251 --> 00:43:08,240
tedious, but you might have parts.

884
00:43:08,240 --> 00:43:09,310
That's totally fair game.

885
00:43:09,310 --> 00:43:11,082
Like small HTML page, totally fair.

886
00:43:11,082 --> 00:43:11,623
AUDIENCE: OK.

887
00:43:11,623 --> 00:43:13,814
How about in JavaScript as well?

888
00:43:13,814 --> 00:43:14,730
HANNAH BLUMBERG: Yeah.

889
00:43:14,730 --> 00:43:15,250
JavaScript's fair game.

890
00:43:15,250 --> 00:43:15,635
>> MARIA ZLATKOVA: Yeah.

891
00:43:15,635 --> 00:43:16,801
That's completely fair game.

892
00:43:16,801 --> 00:43:19,280
HANNAH BLUMBERG: We'll get
to that in like 10 minutes.

893
00:43:19,280 --> 00:43:23,750
>> MARIA ZLATKOVA: SQL, again,
Structured Query Language.

894
00:43:23,750 --> 00:43:28,651
It basically allows us to manage data
in a relational database management

895
00:43:28,651 --> 00:43:29,150
system.

896
00:43:29,150 --> 00:43:31,149
That just basically means
that we have somewhere

897
00:43:31,149 --> 00:43:37,980
to store some data that we might want to
use in a website or in some other form.

898
00:43:37,980 --> 00:43:42,190
And then we have queries to get
information from our database,

899
00:43:42,190 --> 00:43:44,320
or to insert information in them.

900
00:43:44,320 --> 00:43:47,560
A lot of the common ones-- UPDATE,
INSERT, SELECT, and DELETE.

901
00:43:47,560 --> 00:43:50,790
>> So for UPDATE, this is the syntax
for updating data in a database.

902
00:43:50,790 --> 00:43:53,330

903
00:43:53,330 --> 00:43:57,340
Updating this table called
table by saying SET,

904
00:43:57,340 --> 00:44:04,170
we can set some values in all
rows to equal something else.

905
00:44:04,170 --> 00:44:09,410
So we can also specify some specific
entries that we want to modify

906
00:44:09,410 --> 00:44:11,240
and that can be using WHERE.

907
00:44:11,240 --> 00:44:16,380
And we can specify that we only want to
modify some rows where the house for,

908
00:44:16,380 --> 00:44:19,830
if we had a table of students
and all the students had house,

909
00:44:19,830 --> 00:44:24,890
so we would only modify some values
where a house equals Currier,

910
00:44:24,890 --> 00:44:25,430
for example.

911
00:44:25,430 --> 00:44:29,120

912
00:44:29,120 --> 00:44:31,800
>> For INSERT, we can insert
certain values into a table.

913
00:44:31,800 --> 00:44:35,150
So INSERT INTO table,
and then the values,

914
00:44:35,150 --> 00:44:39,080
and then in parentheses, we specify
which values you want to insert.

915
00:44:39,080 --> 00:44:43,220
So INSERT INTO table, col1 and
col2, the value is val1 and val2.

916
00:44:43,220 --> 00:44:48,930
So this inserts basically a new row into
a table containing the values 1 and 2

917
00:44:48,930 --> 00:44:50,850
under the columns 1 and 2.

918
00:44:50,850 --> 00:44:54,760
>> And then we're going to go over
a quick example of how this looks

919
00:44:54,760 --> 00:44:56,310
like in our database a little bit.

920
00:44:56,310 --> 00:44:58,685
But this final query that I
think we're going to go over,

921
00:44:58,685 --> 00:45:01,450
SELECT, it just allows us
to select data from a table

922
00:45:01,450 --> 00:45:03,080
to possibly use it afterwards.

923
00:45:03,080 --> 00:45:05,830
And the way we do this is we
just store it in some variable.

924
00:45:05,830 --> 00:45:07,780
And then we can possibly use it again.

925
00:45:07,780 --> 00:45:10,260
>> So SELECT star means select all.

926
00:45:10,260 --> 00:45:13,280
That's just a shorthand
for selecting all.

927
00:45:13,280 --> 00:45:19,760
FROM table WHERE, we are looking
for some specific conditions,

928
00:45:19,760 --> 00:45:22,290
so where column equals
something, for example.

929
00:45:22,290 --> 00:45:24,410
If we just wanted to
select all from table,

930
00:45:24,410 --> 00:45:28,400
this just selects all columns
and all rows from a table.

931
00:45:28,400 --> 00:45:32,040
>> And then DELETE FROM table
WHERE col equals something,

932
00:45:32,040 --> 00:45:36,440
this just deletes some
row from our table

933
00:45:36,440 --> 00:45:38,860
where we have some specific conditions.

934
00:45:38,860 --> 00:45:41,870
In this case, the conditions
are column equals something.

935
00:45:41,870 --> 00:45:43,460
So just a quick example of this.

936
00:45:43,460 --> 00:45:49,100
If we have this table right here and we
insert it into a table, these values,

937
00:45:49,100 --> 00:45:50,400
that would insert a new row.

938
00:45:50,400 --> 00:45:56,380
And if we had auto-increment, this would
just increment our ID from 0 to 1 to 2.

939
00:45:56,380 --> 00:46:00,010
>> If we selected all from students, it
just returns all fields and all rows.

940
00:46:00,010 --> 00:46:02,430
Where year is greater
than or equal to 2016,

941
00:46:02,430 --> 00:46:04,390
that would just return
Hannah and myself.

942
00:46:04,390 --> 00:46:08,360
And then if we just selected
year id and year FROM students

943
00:46:08,360 --> 00:46:11,710
where the house is Cabot House, that
would, again, return Hannah and myself.

944
00:46:11,710 --> 00:46:14,430
>> Then if we deleted from students
where name is equal to Rob,

945
00:46:14,430 --> 00:46:16,760
that would delete the whole row.

946
00:46:16,760 --> 00:46:19,696
And then if we set the
name, UPDATE students

947
00:46:19,696 --> 00:46:21,570
SET name equals to Daven
WHERE house is equal

948
00:46:21,570 --> 00:46:27,010
Cabot House, that's going to go to
those rows and then update the name.

949
00:46:27,010 --> 00:46:31,470
>> And then a few SQL data types are
CHAR, VARCHAR, INT, and FLOAT.

950
00:46:31,470 --> 00:46:32,760
These are fair game.

951
00:46:32,760 --> 00:46:36,740
I would go over again
and make sure you know

952
00:46:36,740 --> 00:46:40,930
and have them on your cheat sheet,
what each of those characters

953
00:46:40,930 --> 00:46:44,140
have been used for, what
you used them on your psets,

954
00:46:44,140 --> 00:46:48,050
and make sure you're familiar and
comfortable with having to choose

955
00:46:48,050 --> 00:46:51,450
from different data types in your pset.

956
00:46:51,450 --> 00:46:51,950
Yes.

957
00:46:51,950 --> 00:46:54,300
>> AUDIENCE: What was that table stored?

958
00:46:54,300 --> 00:46:57,119
Yeah, where is this table stored?

959
00:46:57,119 --> 00:46:59,160
MARIA ZLATKOVA: Well,
right now, it's not stored.

960
00:46:59,160 --> 00:47:00,700
Anyway, where is this table stored?

961
00:47:00,700 --> 00:47:04,503
But it can be stored in a SQL database.

962
00:47:04,503 --> 00:47:07,330
>> AUDIENCE: And where is the SQL database?

963
00:47:07,330 --> 00:47:11,200
In the computer, online
somewhere, the server?

964
00:47:11,200 --> 00:47:15,000
>> MARIA ZLATKOVA: It can be a
number of different things.

965
00:47:15,000 --> 00:47:19,690
>> HANNAH BLUMBERG: We've interfaced with
SQL tables mostly with phpMyAdmin.

966
00:47:19,690 --> 00:47:22,060
So we could ask a server
to store them for us.

967
00:47:22,060 --> 00:47:23,830
We could store them on our own computer.

968
00:47:23,830 --> 00:47:27,950
>> MARIA ZLATKOVA: It just depends on
how you want to do it for yourself.

969
00:47:27,950 --> 00:47:30,075
But we have been storing
them, as Hannah mentioned,

970
00:47:30,075 --> 00:47:31,755
on phpMyAdmin, which is online.

971
00:47:31,755 --> 00:47:36,550

972
00:47:36,550 --> 00:47:39,280
And then the way we use
PHP and SQL, we store it

973
00:47:39,280 --> 00:47:43,450
into some variable
what we've queried for.

974
00:47:43,450 --> 00:47:48,370
>> So if we SELECT all FROM history
where user_id equals the SESSION id,

975
00:47:48,370 --> 00:47:53,900
that would select all the rows
for the specific person who

976
00:47:53,900 --> 00:47:58,327
is logged in from the history
table and sort them into rows.

977
00:47:58,327 --> 00:48:00,410
A cool thing to know is
that CS50's query function

978
00:48:00,410 --> 00:48:02,180
protects against SQL injection tags.

979
00:48:02,180 --> 00:48:07,420
That just means that it makes sure
the input that is entered is correct

980
00:48:07,420 --> 00:48:09,920
and that the person who
is entering the input

981
00:48:09,920 --> 00:48:15,100
is not trying to input some malicious
code to either drop our tables

982
00:48:15,100 --> 00:48:17,305
or delete everything
inside of our database.

983
00:48:17,305 --> 00:48:20,060

984
00:48:20,060 --> 00:48:23,400
>> A quick overview of the
Model View Controller model,

985
00:48:23,400 --> 00:48:27,360
it's just a way of organizing
and thinking about code.

986
00:48:27,360 --> 00:48:29,100
It's again, a design paradigm.

987
00:48:29,100 --> 00:48:33,380
What that means is that we
can-- and it's good practice

988
00:48:33,380 --> 00:48:37,790
to separate different parts
of our code and what they

989
00:48:37,790 --> 00:48:40,530
control into these three paradigms.

990
00:48:40,530 --> 00:48:46,700
>> So our view is most often our
templates, our layout, the way

991
00:48:46,700 --> 00:48:48,260
that we set how our code looks.

992
00:48:48,260 --> 00:48:55,190
That's mostly our CSS files and the way
that we defined the design of our code,

993
00:48:55,190 --> 00:48:55,710
basically.

994
00:48:55,710 --> 00:48:59,280
Our controller is mostly what
we've been doing with PHP files.

995
00:48:59,280 --> 00:49:03,030
So again, working with the
information that we have

996
00:49:03,030 --> 00:49:06,700
and defining how that
information is used,

997
00:49:06,700 --> 00:49:10,660
and then passing that information
either onto the view or the model.

998
00:49:10,660 --> 00:49:13,880
And the model, the way that we've
been using is has been our database,

999
00:49:13,880 --> 00:49:17,510
so where our information is
stored so it has somewhere

1000
00:49:17,510 --> 00:49:21,490
to live in, and any of the
code that relates to the way

1001
00:49:21,490 --> 00:49:25,410
that we get that information or the
way that we update that information.

1002
00:49:25,410 --> 00:49:28,940

1003
00:49:28,940 --> 00:49:33,200
>> So in the MVC model, HTTP
requests are sent to a web server.

1004
00:49:33,200 --> 00:49:36,220
Then, the controller interprets
the request from the user

1005
00:49:36,220 --> 00:49:38,260
and then validates the user input.

1006
00:49:38,260 --> 00:49:41,580
It's optional that we have
the controller communicate

1007
00:49:41,580 --> 00:49:44,000
with a model, so something
like our database

1008
00:49:44,000 --> 00:49:47,500
or some other functionality
that relays information.

1009
00:49:47,500 --> 00:49:50,340
And then finally, the controller
passes information onto the view

1010
00:49:50,340 --> 00:49:52,090
so that it can be
rendered and that it can

1011
00:49:52,090 --> 00:49:55,860
become visible to any person
accessing the web page.

1012
00:49:55,860 --> 00:49:58,440

1013
00:49:58,440 --> 00:50:01,340
>> Any questions?

1014
00:50:01,340 --> 00:50:01,840
Awesome.

1015
00:50:01,840 --> 00:50:04,530

1016
00:50:04,530 --> 00:50:08,469
So again, the model,
its function, again,

1017
00:50:08,469 --> 00:50:11,260
is persistent storage of information,
managing and organizing data.

1018
00:50:11,260 --> 00:50:13,890
And what we've seen so
far is the MySQL database

1019
00:50:13,890 --> 00:50:16,200
and any data files that may use.

1020
00:50:16,200 --> 00:50:20,580
>> View, presentation of information to
the user, the UI, or user interface.

1021
00:50:20,580 --> 00:50:22,350
And the example of this is HTML.

1022
00:50:22,350 --> 00:50:23,950
And then we might have minimal PHP.

1023
00:50:23,950 --> 00:50:28,360
So a for loop that iterates
over data that are printed out

1024
00:50:28,360 --> 00:50:30,720
is part of the view, as
opposed to the controller.

1025
00:50:30,720 --> 00:50:35,660
And then a lot of our PHP files
fall into the controller category.

1026
00:50:35,660 --> 00:50:38,410
It just handles user requests and
gets information from the model.

1027
00:50:38,410 --> 00:50:42,880

1028
00:50:42,880 --> 00:50:45,590
>> Jumping into the Document
Object Model, this just

1029
00:50:45,590 --> 00:50:47,700
refers to the way HTML
documents are organized.

1030
00:50:47,700 --> 00:50:51,600
And they're organized into a tree
structure that has a hierarchy.

1031
00:50:51,600 --> 00:50:56,720
So if we have access to [INAUDIBLE]
representation of the document,

1032
00:50:56,720 --> 00:51:02,750
we can work with the document, like
we manipulate objects basically.

1033
00:51:02,750 --> 00:51:06,630
>> And to make this a
little bit clearer, when

1034
00:51:06,630 --> 00:51:10,540
we have a lot of our
different tags respond

1035
00:51:10,540 --> 00:51:12,590
to different routes in our tree.

1036
00:51:12,590 --> 00:51:17,070
And then for this example, we
have the starting document node.

1037
00:51:17,070 --> 00:51:20,010
We have, then, our HTML node
that splits into head and body.

1038
00:51:20,010 --> 00:51:22,810
Head has title and then
title contains hello, world.

1039
00:51:22,810 --> 00:51:24,860
And our body just contains
hello, world as well.

1040
00:51:24,860 --> 00:51:28,700

1041
00:51:28,700 --> 00:51:31,900
>> So any questions on any of the
things that we covered so far?

1042
00:51:31,900 --> 00:51:35,891
And if not, Hannah will
take over with JavaScript.

1043
00:51:35,891 --> 00:51:36,390
Awesome.

1044
00:51:36,390 --> 00:51:37,473
>> HANNAH BLUMBERG: OK, cool.

1045
00:51:37,473 --> 00:51:40,980
If anything comes up with PHP or HTML,
or any of the stuff Maria covered,

1046
00:51:40,980 --> 00:51:42,700
we can always pause.

1047
00:51:42,700 --> 00:51:46,430
We're doing better on
time again, so awesome.

1048
00:51:46,430 --> 00:51:48,770
And just to go back
really quickly to this,

1049
00:51:48,770 --> 00:51:51,010
if you look at every
past year's exam, this

1050
00:51:51,010 --> 00:51:54,120
comes up either-- here is
some HTML, make this diagram.

1051
00:51:54,120 --> 00:51:58,380
Or here's this diagram, make some
HTML, so definitely practice that.

1052
00:51:58,380 --> 00:52:01,500
And then that's one guaranteed
question that you can get right.

1053
00:52:01,500 --> 00:52:02,000
Cool.

1054
00:52:02,000 --> 00:52:04,510
So let's talk about JavaScript
and how it's a little bit

1055
00:52:04,510 --> 00:52:09,130
different from languages like PHP and
C, the two languages we saw beforehand.

1056
00:52:09,130 --> 00:52:10,780
So number one, it's loosely typed.

1057
00:52:10,780 --> 00:52:14,630
That is like PHP, but unlike C.

1058
00:52:14,630 --> 00:52:15,890
>> It's an interpreted language.

1059
00:52:15,890 --> 00:52:19,870
Again, that's like
PHP, unlike C. And this

1060
00:52:19,870 --> 00:52:24,630
is going to allow us to use-- it
works really nicely with web pages.

1061
00:52:24,630 --> 00:52:28,350
It's going to allow us to manipulate
the content and how it looks

1062
00:52:28,350 --> 00:52:30,300
and what it does.

1063
00:52:30,300 --> 00:52:32,330
>> We're going to see a little bit of Ajax.

1064
00:52:32,330 --> 00:52:36,140
It allows us to communicate
asynchronously with different servers

1065
00:52:36,140 --> 00:52:37,950
and get information.

1066
00:52:37,950 --> 00:52:42,820
And this is the thing that really
separates JavaScript from PHP and C

1067
00:52:42,820 --> 00:52:45,590
is that it is client-side.

1068
00:52:45,590 --> 00:52:49,860
Both PHP and C are
typically server-side.

1069
00:52:49,860 --> 00:52:51,960
>> For the most part and
almost entirely what

1070
00:52:51,960 --> 00:52:53,900
we've seen, at least in
this class, JavaScript

1071
00:52:53,900 --> 00:52:57,040
acts on client-side, which means
that the browser is actually

1072
00:52:57,040 --> 00:52:58,597
responsible for running it.

1073
00:52:58,597 --> 00:53:01,180
And that means that we don't
need to interact with the server.

1074
00:53:01,180 --> 00:53:04,380
So it means it can be a lot faster
because it's actually just it's Chrome,

1075
00:53:04,380 --> 00:53:10,420
it's Safari, it's Firefox, whatever you
use actually running your JavaScript.

1076
00:53:10,420 --> 00:53:12,290
>> AUDIENCE: What does asynchronous mean?

1077
00:53:12,290 --> 00:53:13,620
>> HANNAH BLUMBERG: Ah, what
does asynchronously mean?

1078
00:53:13,620 --> 00:53:14,250
Great question.

1079
00:53:14,250 --> 00:53:17,890
Asynchronously means--
well, the content in which

1080
00:53:17,890 --> 00:53:22,140
we use it is, OK, we
are creating a web page

1081
00:53:22,140 --> 00:53:23,860
and we need to get some information.

1082
00:53:23,860 --> 00:53:28,250
So with the example of mashup,
some information that we might want

1083
00:53:28,250 --> 00:53:30,580
is article titles.

1084
00:53:30,580 --> 00:53:33,330
Now, we could-- one option
is to do it synchronously

1085
00:53:33,330 --> 00:53:37,940
and that means let's
stop, go get the article,

1086
00:53:37,940 --> 00:53:41,275
get the article back, and then
render, but that would be really slow.

1087
00:53:41,275 --> 00:53:44,150
That would be a bad user experience
because you would just be sitting

1088
00:53:44,150 --> 00:53:46,630
there waiting for something to respond.

1089
00:53:46,630 --> 00:53:50,020
>> Asynchronously means we'll
continue going about our business,

1090
00:53:50,020 --> 00:53:52,529
rendering the page, and
we'll send off a request

1091
00:53:52,529 --> 00:53:54,570
that's kind of going to
happen in the background.

1092
00:53:54,570 --> 00:53:57,610
I think we use the example in
lecture of calling Rob and saying,

1093
00:53:57,610 --> 00:53:59,980
hey, can you look this up
for me and get back to me,

1094
00:53:59,980 --> 00:54:02,870
as opposed to just me
waiting on the phone.

1095
00:54:02,870 --> 00:54:07,020
So asynchronously means it happens
in the background away from us

1096
00:54:07,020 --> 00:54:08,676
in parallel.

1097
00:54:08,676 --> 00:54:10,400
>> Great question.

1098
00:54:10,400 --> 00:54:11,830
Anything else?

1099
00:54:11,830 --> 00:54:12,330
Great.

1100
00:54:12,330 --> 00:54:15,020
We'll jump a lot more into
asynchronous requests with Ajax.

1101
00:54:15,020 --> 00:54:18,287
>> AUDIENCE: Does JavaScript-- where does
it fall with model-view-controller?

1102
00:54:18,287 --> 00:54:19,620
HANNAH BLUMBERG: Great question.

1103
00:54:19,620 --> 00:54:23,320
Where does JavaScript fall
with model-view-controller?

1104
00:54:23,320 --> 00:54:23,930
Hm.

1105
00:54:23,930 --> 00:54:28,350
I guess it can fall--
so we don't usually

1106
00:54:28,350 --> 00:54:31,340
like to squish it into that
paradigm, but I guess I would say,

1107
00:54:31,340 --> 00:54:34,280
OK, so JavaScript
actually is going to allow

1108
00:54:34,280 --> 00:54:37,587
us to gather data,
interpret data, actually do

1109
00:54:37,587 --> 00:54:38,920
meaningful things with the data.

1110
00:54:38,920 --> 00:54:41,100
In that way, it's very control-like.

1111
00:54:41,100 --> 00:54:43,900
>> But it's also going to allow us to
display things and print things.

1112
00:54:43,900 --> 00:54:47,021
In that way, it's very view-like.

1113
00:54:47,021 --> 00:54:47,520
Yeah.

1114
00:54:47,520 --> 00:54:51,710
So it's kind of like PHP in
where it can kind of be both.

1115
00:54:51,710 --> 00:54:53,330
Good question.

1116
00:54:53,330 --> 00:54:55,209
Anything else?

1117
00:54:55,209 --> 00:54:56,000
All right, awesome.

1118
00:54:56,000 --> 00:54:57,120
Moving right along.

1119
00:54:57,120 --> 00:54:59,110
>> So let's see an example
of how we can use

1120
00:54:59,110 --> 00:55:02,250
JavaScript in one of our web programs.

1121
00:55:02,250 --> 00:55:05,680
So I'll consider this
index.html with a bunch of HTML.

1122
00:55:05,680 --> 00:55:08,800
And the thing I want you
focus on is this script tag.

1123
00:55:08,800 --> 00:55:13,280
And this says, OK, I want to run some
JavaScript and here is where it lives.

1124
00:55:13,280 --> 00:55:15,400
It lives in hello.js.

1125
00:55:15,400 --> 00:55:21,120
>> And very much like CSS, we could
put JavaScript within the HTML.

1126
00:55:21,120 --> 00:55:24,000
Why might we want to separate it out?

1127
00:55:24,000 --> 00:55:24,500
Yeah.

1128
00:55:24,500 --> 00:55:25,486
>> AUDIENCE: Easier to rewrite?

1129
00:55:25,486 --> 00:55:26,402
>> HANNAH BLUMBERG: Yeah.

1130
00:55:26,402 --> 00:55:28,450
It's easier to use across
different web pages.

1131
00:55:28,450 --> 00:55:29,980
It keeps things cleaner.

1132
00:55:29,980 --> 00:55:32,090
It's just good practice.

1133
00:55:32,090 --> 00:55:32,590
Awesome.

1134
00:55:32,590 --> 00:55:33,930
Good answer.

1135
00:55:33,930 --> 00:55:36,690
So good, so this is going
to be our index.html.

1136
00:55:36,690 --> 00:55:39,430
And then down here is our
tiny little JavaScript file.

1137
00:55:39,430 --> 00:55:42,410
>> And all it says is alert Hello, world.

1138
00:55:42,410 --> 00:55:46,040
So what happens is when
this page renders--

1139
00:55:46,040 --> 00:55:49,680
so if you go to whatever website
this is-- all that's going to happen

1140
00:55:49,680 --> 00:55:53,330
is it's going to say, OK, I'm
going to run this JavaScript code.

1141
00:55:53,330 --> 00:55:56,370
And this JavaScript code
just says alert Hello, world.

1142
00:55:56,370 --> 00:55:59,090
So I'm going to get this
friendly little pop-up.

1143
00:55:59,090 --> 00:56:00,360
>> Cool?

1144
00:56:00,360 --> 00:56:04,746
That's kind of like our very first
JavaScript program, our Hello, world.

1145
00:56:04,746 --> 00:56:07,690

1146
00:56:07,690 --> 00:56:12,190
Let's look a little bit more about what
the syntax of JavaScript looks like.

1147
00:56:12,190 --> 00:56:16,330
And specifically, let's compare it to
C and PHP, which we've seen before.

1148
00:56:16,330 --> 00:56:20,610
>> In JavaScript, we're going to have
var, the name of the variable, and then

1149
00:56:20,610 --> 00:56:21,690
its actual value.

1150
00:56:21,690 --> 00:56:26,170
And we don't specify a type, just
like in PHP, but very unlike in C.

1151
00:56:26,170 --> 00:56:28,850
So for example, if we wanted
to store the value 50,

1152
00:56:28,850 --> 00:56:32,490
in C, we would have to say,
hey, C, I want an integer,

1153
00:56:32,490 --> 00:56:35,076
I'm going to call it
i, and its value is 50.

1154
00:56:35,076 --> 00:56:36,450
In PHP, it's a little bit easier.

1155
00:56:36,450 --> 00:56:41,880
We say, hey, I want a variable
called i and its value is 50.

1156
00:56:41,880 --> 00:56:45,890
Very similarly, in JavaScript, we
say hey, I want a variable called i,

1157
00:56:45,890 --> 00:56:47,080
its value is 50.

1158
00:56:47,080 --> 00:56:52,140
Every subsequent time that I use
i, I don't need to write var.

1159
00:56:52,140 --> 00:56:53,810
It's just i from that point on.

1160
00:56:53,810 --> 00:56:58,660
In the same way, in C, where
once we say int i, we just use i.

1161
00:56:58,660 --> 00:57:00,340
Cool?

1162
00:57:00,340 --> 00:57:01,800
All right.

1163
00:57:01,800 --> 00:57:03,710
>> Moving on to loops,
luckily, these almost

1164
00:57:03,710 --> 00:57:06,720
look exactly-- I think they're
exactly the same as what

1165
00:57:06,720 --> 00:57:09,799
loops are going to look like in
something like C where your for loop

1166
00:57:09,799 --> 00:57:11,840
is going to have three
parts-- an initialization,

1167
00:57:11,840 --> 00:57:13,640
a condition, and an update.

1168
00:57:13,640 --> 00:57:15,340
A while loop, it looks the exact same.

1169
00:57:15,340 --> 00:57:16,390
We just give it a condition.

1170
00:57:16,390 --> 00:57:18,264
>> And a do while loop,
again, exactly the same.

1171
00:57:18,264 --> 00:57:20,190
We give it a condition.

1172
00:57:20,190 --> 00:57:24,510
Let's say I wanted to iterate over--
I wanted to do something five times.

1173
00:57:24,510 --> 00:57:27,840
In C, we might write
for init i equals 0.

1174
00:57:27,840 --> 00:57:30,480
i is less than 5, i++.

1175
00:57:30,480 --> 00:57:34,240
Only difference, in JavaScript,
instead of saying int i equals 0,

1176
00:57:34,240 --> 00:57:36,820
we say var i equals 0.

1177
00:57:36,820 --> 00:57:38,370
Beautiful.

1178
00:57:38,370 --> 00:57:41,320
That's the only difference.

1179
00:57:41,320 --> 00:57:43,200
Any questions on any of that?

1180
00:57:43,200 --> 00:57:44,160
Yes.

1181
00:57:44,160 --> 00:57:48,480
>> AUDIENCE: So in PHP, it's the same
thing, except but like a variable?

1182
00:57:48,480 --> 00:57:49,564
Or was that a var example?

1183
00:57:49,564 --> 00:57:50,480
HANNAH BLUMBERG: Yeah.

1184
00:57:50,480 --> 00:57:52,310
So in PHP, it's going
to be a dollar sign.

1185
00:57:52,310 --> 00:57:59,450
So it's going to $ i equals
0, $ i is less than 5, $ i++.

1186
00:57:59,450 --> 00:58:02,490
Great question.

1187
00:58:02,490 --> 00:58:04,570
>> Now let's talk about
function declarations.

1188
00:58:04,570 --> 00:58:07,010
In C, when we declared a
function, we gave it a name

1189
00:58:07,010 --> 00:58:08,490
and we gave it some parameters.

1190
00:58:08,490 --> 00:58:10,670
And at the beginning, we wrote the type.

1191
00:58:10,670 --> 00:58:12,440
In JavaScript, all we
have to do is write

1192
00:58:12,440 --> 00:58:15,080
the keyword function that
says, hey, JavaScript,

1193
00:58:15,080 --> 00:58:16,570
I'm about to define a function.

1194
00:58:16,570 --> 00:58:18,520
>> In this case, it has name sum.

1195
00:58:18,520 --> 00:58:20,820
And it takes two arguments, x and y.

1196
00:58:20,820 --> 00:58:23,280
Notice that we don't care
about the types of x and y.

1197
00:58:23,280 --> 00:58:26,280
And just like C, we have
this keyword return,

1198
00:58:26,280 --> 00:58:29,140
so we can do something
like return x and y.

1199
00:58:29,140 --> 00:58:32,540
>> And now once we've written this first
function, we can use sum anywhere.

1200
00:58:32,540 --> 00:58:34,740
And that's totally fine.

1201
00:58:34,740 --> 00:58:37,530
One really cool thing about
JavaScript that is very unlike C

1202
00:58:37,530 --> 00:58:40,770
is that functions can
be treated like values.

1203
00:58:40,770 --> 00:58:43,895
So we can do something like here
where I suppose I cover this up--

1204
00:58:43,895 --> 00:58:46,400
I covered up the var sum
part-- and we just said

1205
00:58:46,400 --> 00:58:49,850
function xy equals return x plus y.

1206
00:58:49,850 --> 00:58:52,140
>> That is what would be called
an anonymous function.

1207
00:58:52,140 --> 00:58:53,920
It's a function without a name.

1208
00:58:53,920 --> 00:58:56,290
Whereas this says function
sum, blah, blah, blah,

1209
00:58:56,290 --> 00:58:59,340
this would just say function.

1210
00:58:59,340 --> 00:59:02,020
But now even though I have
this anonymous function,

1211
00:59:02,020 --> 00:59:03,630
that function is really just a value.

1212
00:59:03,630 --> 00:59:05,160
We can treat it like a value.

1213
00:59:05,160 --> 00:59:10,180
>> So we can save it in a variable the same
way we could store 50 in a variable.

1214
00:59:10,180 --> 00:59:13,870
So we can say, OK, I want a
variable, it's called sum,

1215
00:59:13,870 --> 00:59:16,011
and it is this function.

1216
00:59:16,011 --> 00:59:18,760
So these two things are actually
going to do the exact same thing,

1217
00:59:18,760 --> 00:59:21,576
but the syntax is a little
different and kind of a fun note.

1218
00:59:21,576 --> 00:59:22,076
Yeah.

1219
00:59:22,076 --> 00:59:25,548
>> AUDIENCE: So you could call a
function that was anonymous by saying,

1220
00:59:25,548 --> 00:59:28,244
sum brackets 2, 5?

1221
00:59:28,244 --> 00:59:29,160
HANNAH BLUMBERG: Yeah.

1222
00:59:29,160 --> 00:59:32,280
You can call this anonymous
function in the same way.

1223
00:59:32,280 --> 00:59:33,350
You would do sum (2, 5);.

1224
00:59:33,350 --> 00:59:36,180

1225
00:59:36,180 --> 00:59:38,200
That would be totally fine.

1226
00:59:38,200 --> 00:59:41,575
>> If I didn't do var sum equals
function, if I just deleted

1227
00:59:41,575 --> 00:59:45,480
this-- I know it's on my hand,
but pretend I deleted this-- then

1228
00:59:45,480 --> 00:59:46,964
that function is kind of just gone.

1229
00:59:46,964 --> 00:59:49,630
You can never use it again because
you don't have a name for it.

1230
00:59:49,630 --> 00:59:53,497
It's hard to refer to something
you don't know what to call.

1231
00:59:53,497 --> 00:59:54,080
Good question.

1232
00:59:54,080 --> 00:59:54,580
Yeah.

1233
00:59:54,580 --> 00:59:59,580
>> AUDIENCE: Can you reference sum in
other places with the value of x plus y?

1234
00:59:59,580 --> 01:00:01,940
>> HANNAH BLUMBERG: Can you
reference sum in other places

1235
01:00:01,940 --> 01:00:03,360
with the value x plus y?

1236
01:00:03,360 --> 01:00:05,130
I'm not entirely sure what you mean.

1237
01:00:05,130 --> 01:00:10,582
>> AUDIENCE: So your past semi-anonymous
function is sum is equal to this

1238
01:00:10,582 --> 01:00:14,452
anonymous function, so sum is
now a variable that you can--

1239
01:00:14,452 --> 01:00:15,410
HANNAH BLUMBERG: Right.

1240
01:00:15,410 --> 01:00:18,980
So sum is the variable,
but it's actually--

1241
01:00:18,980 --> 01:00:23,770
so sum is a variable whose
value is the function.

1242
01:00:23,770 --> 01:00:27,030
So it is a function, which is kind of
a weird thing to wrap your head around

1243
01:00:27,030 --> 01:00:29,880
since we've been playing with
C and you can't do that in C.

1244
01:00:29,880 --> 01:00:32,679
But now we can call sum the
same way we could call sum here.

1245
01:00:32,679 --> 01:00:33,220
AUDIENCE: OK.

1246
01:00:33,220 --> 01:00:33,970
HANNAH BLUMBERG: Yeah.

1247
01:00:33,970 --> 01:00:34,553
Good question.

1248
01:00:34,553 --> 01:00:35,438
Yeah.

1249
01:00:35,438 --> 01:00:39,862
>> AUDIENCE: So we don't use the
prototypes in PHP or JavaScript?

1250
01:00:39,862 --> 01:00:42,070
HANNAH BLUMBERG: No, we
don't need to use prototypes,

1251
01:00:42,070 --> 01:00:43,880
especially in JavaScript.

1252
01:00:43,880 --> 01:00:49,380
So one bad practice thing that I'm
going to say that you shouldn't do

1253
01:00:49,380 --> 01:00:52,620
is you don't have to write var i = 50.

1254
01:00:52,620 --> 01:00:54,840
You could just start doing i = 50.

1255
01:00:54,840 --> 01:00:57,490
And would just make i a global variable.

1256
01:00:57,490 --> 01:01:00,550
>> It's very bad practice to
never say explicity var i,

1257
01:01:00,550 --> 01:01:01,800
but it's something you can do.

1258
01:01:01,800 --> 01:01:03,591
The interpreter's not
going to yell at you.

1259
01:01:03,591 --> 01:01:05,920
JavaScript is pretty like,
you can do what you want.

1260
01:01:05,920 --> 01:01:09,301

1261
01:01:09,301 --> 01:01:09,800
Oh, sorry.

1262
01:01:09,800 --> 01:01:10,300
There's two.

1263
01:01:10,300 --> 01:01:12,150
In the orange pants.

1264
01:01:12,150 --> 01:01:13,190
Go ahead.

1265
01:01:13,190 --> 01:01:14,390
>> AUDIENCE: No, you go first.

1266
01:01:14,390 --> 01:01:16,765
>> AUDIENCE: No, I was just saying
I didn't have my hand up.

1267
01:01:16,765 --> 01:01:20,248

1268
01:01:20,248 --> 01:01:20,748
OK.

1269
01:01:20,748 --> 01:01:26,604
So if you were to call
that first time, now sum,

1270
01:01:26,604 --> 01:01:29,864
we call it the same way, x,
y, like every single time?

1271
01:01:29,864 --> 01:01:30,780
HANNAH BLUMBERG: Yeah.

1272
01:01:30,780 --> 01:01:32,572
So these two essentially
do the same thing.

1273
01:01:32,572 --> 01:01:35,113
AUDIENCE: And what's the advantage
of using one or the other?

1274
01:01:35,113 --> 01:01:37,500
HANNAH BLUMBERG: No advantage
of using one or the other.

1275
01:01:37,500 --> 01:01:40,080
I just wanted to show you two
different pieces of syntax.

1276
01:01:40,080 --> 01:01:42,770
A lot of times where anonymous
functions do have a purpose

1277
01:01:42,770 --> 01:01:48,220
is if the argument to another
function should be a function.

1278
01:01:48,220 --> 01:01:50,600
And we'll see that in
just a second with Ajax.

1279
01:01:50,600 --> 01:01:53,577
>> So if that didn't make any sense,
store it in the back of your head.

1280
01:01:53,577 --> 01:01:55,660
That's where an anonymous
function might be useful

1281
01:01:55,660 --> 01:01:58,284
because it's not really worth
giving it a name since we're just

1282
01:01:58,284 --> 01:01:59,443
going to use it once.

1283
01:01:59,443 --> 01:02:00,370
Yeah.

1284
01:02:00,370 --> 01:02:03,635
>> AUDIENCE: If x and y change later
on, will sum change as well?

1285
01:02:03,635 --> 01:02:06,510
HANNAH BLUMBERG: If x and y change
later on, will sum change as well?

1286
01:02:06,510 --> 01:02:08,840
So this is actually I
think something that's,

1287
01:02:08,840 --> 01:02:12,260
again, it just feels very different
from C. This isn't a value.

1288
01:02:12,260 --> 01:02:13,620
It's not 5.

1289
01:02:13,620 --> 01:02:15,550
It's just the function itself.

1290
01:02:15,550 --> 01:02:19,110
So as soon as you give it parameters,
then you'll actually calculate a value.

1291
01:02:19,110 --> 01:02:21,193
>> MARIA ZLATKOVA: And then
you can call the function

1292
01:02:21,193 --> 01:02:23,272
and use it to get some value.

1293
01:02:23,272 --> 01:02:24,230
HANNAH BLUMBERG: Right.

1294
01:02:24,230 --> 01:02:25,250
Exactly.

1295
01:02:25,250 --> 01:02:25,863
Yeah.

1296
01:02:25,863 --> 01:02:27,946
>> AUDIENCE: So if you just
store it in the variable,

1297
01:02:27,946 --> 01:02:31,430
like var x equals sum of two values--

1298
01:02:31,430 --> 01:02:32,420
>> HANNAH BLUMBERG: Yeah.

1299
01:02:32,420 --> 01:02:35,320
So you could just do var sum
equals sum of two values.

1300
01:02:35,320 --> 01:02:37,670
Yeah.

1301
01:02:37,670 --> 01:02:38,680
Any other questions?

1302
01:02:38,680 --> 01:02:39,642
Yeah.

1303
01:02:39,642 --> 01:02:42,047
>> AUDIENCE: But would that
confuse sum and sum?

1304
01:02:42,047 --> 01:02:45,062
Like if you call your variable sum,
would you call the function sum?

1305
01:02:45,062 --> 01:02:45,895
HANNAH BLUMBERG: Mm.

1306
01:02:45,895 --> 01:02:46,395
Mm.

1307
01:02:46,395 --> 01:02:51,253
If you did something
like, sum equals sum 2, 5?

1308
01:02:51,253 --> 01:02:53,170
>> AUDIENCE: Yeah.

1309
01:02:53,170 --> 01:02:56,465
>> HANNAH BLUMBERG: I believe that
would overwrite the value of sum.

1310
01:02:56,465 --> 01:02:59,290
So another interesting
thing about JavaScript

1311
01:02:59,290 --> 01:03:02,950
is that a single variable can take
on a bunch of different types.

1312
01:03:02,950 --> 01:03:03,790
Bad practice.

1313
01:03:03,790 --> 01:03:06,280
You shouldn't do something
like what you just said.

1314
01:03:06,280 --> 01:03:10,240
>> But in C, if i is set
equal to an integer,

1315
01:03:10,240 --> 01:03:13,570
we know that it's never
going to become a string.

1316
01:03:13,570 --> 01:03:15,670
This is not the case in JavaScript.

1317
01:03:15,670 --> 01:03:17,770
Yeah, good question.

1318
01:03:17,770 --> 01:03:20,151
Anything else?

1319
01:03:20,151 --> 01:03:20,650
All right.

1320
01:03:20,650 --> 01:03:21,850
Doing all right on time.

1321
01:03:21,850 --> 01:03:23,050
Keeping going.

1322
01:03:23,050 --> 01:03:25,200
All right.

1323
01:03:25,200 --> 01:03:27,780
>> If we look at an array
in JavaScript, here's

1324
01:03:27,780 --> 01:03:30,250
a quick example of an array of strings.

1325
01:03:30,250 --> 01:03:31,967
And arrays can grow dynamically.

1326
01:03:31,967 --> 01:03:33,675
They don't have a
fixed size the same way

1327
01:03:33,675 --> 01:03:37,990
that they do in C. We can access the
elements with just the square brackets.

1328
01:03:37,990 --> 01:03:41,720
>> That looks a lot like PHP and a lot
like C, where we can say, in this case,

1329
01:03:41,720 --> 01:03:48,360
if I wanted the word JavaScript, I would
do arr square brackets with a 0, 1, 2.

1330
01:03:48,360 --> 01:03:51,450

1331
01:03:51,450 --> 01:03:55,390
And then if you remember in C when we
wanted to get the length of an array,

1332
01:03:55,390 --> 01:03:56,820
it was really annoying.

1333
01:03:56,820 --> 01:03:58,460
But in JavaScript, super easy.

1334
01:03:58,460 --> 01:03:59,910
All we do, .length.

1335
01:03:59,910 --> 01:04:01,120
Gives it the lengths.

1336
01:04:01,120 --> 01:04:01,892
That's it.

1337
01:04:01,892 --> 01:04:03,140
>> AUDIENCE: That's simple.

1338
01:04:03,140 --> 01:04:05,306
>> HANNAH BLUMBERG: Yeah, makes
your life a lot easier.

1339
01:04:05,306 --> 01:04:08,950

1340
01:04:08,950 --> 01:04:11,560
OK, object-- not there.

1341
01:04:11,560 --> 01:04:15,480
Objects in JavaScript feel
a lot like structs in C

1342
01:04:15,480 --> 01:04:18,280
and associative arrays in PHP.

1343
01:04:18,280 --> 01:04:20,270
So what we've seen a
lot of is JSON, which

1344
01:04:20,270 --> 01:04:23,150
stands for JavaScript Object Notation.

1345
01:04:23,150 --> 01:04:25,550
And it's basically a way
of structuring our data.

1346
01:04:25,550 --> 01:04:27,880
>> So let's see an example,
probably the easiest.

1347
01:04:27,880 --> 01:04:32,540
So here's an example of an object
that stores the class, CS50.

1348
01:04:32,540 --> 01:04:37,790
And when I say class, I mean course,
not like-- yeah, the course, CS50.

1349
01:04:37,790 --> 01:04:40,730
And you'll see that
everything in the object

1350
01:04:40,730 --> 01:04:43,526
is going to be contained
in curly braces.

1351
01:04:43,526 --> 01:04:48,260
>> And we start to associate field names
or keys with the different values.

1352
01:04:48,260 --> 01:04:52,920
So you can start to see how this kind of
feels like an associative array in PHP.

1353
01:04:52,920 --> 01:04:57,450
So we're going to associate the field or
the key name, course, with the string,

1354
01:04:57,450 --> 01:04:58,510
CS50.

1355
01:04:58,510 --> 01:04:59,940
>> We're going to have an instructor.

1356
01:04:59,940 --> 01:05:00,940
We're going to have TFs.

1357
01:05:00,940 --> 01:05:05,240
We're going to have number of psets
and we're going to have recorded.

1358
01:05:05,240 --> 01:05:10,720
And one cool thing to note is all of
these things have different types,

1359
01:05:10,720 --> 01:05:12,020
and that's totally fine.

1360
01:05:12,020 --> 01:05:15,330
>> It's fine for an object, in fact,
it's probably expected for an object

1361
01:05:15,330 --> 01:05:19,620
to have a combination of strings
and numbers and Booleans and arrays

1362
01:05:19,620 --> 01:05:23,420
and whatever else you might
want to have inside your object.

1363
01:05:23,420 --> 01:05:28,570
And note that these are going to be
the names or the keys, and then we just

1364
01:05:28,570 --> 01:05:30,300
set it equal with a little colon.

1365
01:05:30,300 --> 01:05:32,015
>> AUDIENCE: What exactly does JSON mean?

1366
01:05:32,015 --> 01:05:33,890
HANNAH BLUMBERG: What
exactly does JSON mean?

1367
01:05:33,890 --> 01:05:36,470
JSON just stands for
JavaScript Object Notation.

1368
01:05:36,470 --> 01:05:38,430
It's just a way of formatting.

1369
01:05:38,430 --> 01:05:40,040
Yeah.

1370
01:05:40,040 --> 01:05:41,800
It's a way of formatting our data.

1371
01:05:41,800 --> 01:05:43,620
>> In C, it's structs.

1372
01:05:43,620 --> 01:05:45,800
In PHP, it's associative arrays.

1373
01:05:45,800 --> 01:05:47,120
In JavaScript, we have objects.

1374
01:05:47,120 --> 01:05:48,969
>> AUDIENCE: So CS50's an object?

1375
01:05:48,969 --> 01:05:51,010
HANNAH BLUMBERG: CS50 is
the object in this case.

1376
01:05:51,010 --> 01:05:54,830

1377
01:05:54,830 --> 01:05:57,880
Now, how do we actually access
those fields or change those fields.

1378
01:05:57,880 --> 01:06:03,920
For example, suppose we decided that
you wanted one fewer pset this semester.

1379
01:06:03,920 --> 01:06:06,300
Instead of nine, we're
just going to have eight.

1380
01:06:06,300 --> 01:06:08,240
How would we change that?

1381
01:06:08,240 --> 01:06:09,436
>> Oh, wrong way.

1382
01:06:09,436 --> 01:06:11,060
There are two ways that we can do that.

1383
01:06:11,060 --> 01:06:13,490
Number one is with the dot
notation and number two

1384
01:06:13,490 --> 01:06:15,750
is with the square bracket notation.

1385
01:06:15,750 --> 01:06:19,720
So, for example, if I
wanted to change or access

1386
01:06:19,720 --> 01:06:26,820
the psets field in our CS50 object,
what I would do is CS50.psets,

1387
01:06:26,820 --> 01:06:30,770
so the name of the object dot
the name of the field or the key.

1388
01:06:30,770 --> 01:06:37,120
>> Very similarly, it's exactly
equivalent to do CS50, and then

1389
01:06:37,120 --> 01:06:42,050
in square braces, psets.

1390
01:06:42,050 --> 01:06:42,837
Cool?

1391
01:06:42,837 --> 01:06:44,298
Yeah.

1392
01:06:44,298 --> 01:06:47,707
>> AUDIENCE: So is JSON
technically JavaScript still,

1393
01:06:47,707 --> 01:06:51,814
even though in the psets we
separate it out [INAUDIBLE]?

1394
01:06:51,814 --> 01:06:52,730
HANNAH BLUMBERG: Sure.

1395
01:06:52,730 --> 01:06:56,290
So the question is, are
JavaScript and JSON equivalent?

1396
01:06:56,290 --> 01:07:00,750
So JSON is notation, basically
the way that we write out

1397
01:07:00,750 --> 01:07:02,700
an object from JavaScript.

1398
01:07:02,700 --> 01:07:05,190
So they're not exactly the same.

1399
01:07:05,190 --> 01:07:08,950
>> I would say JavaScript, there
are objects in JavaScript.

1400
01:07:08,950 --> 01:07:12,590
JSON takes those objects and
prints them and displays them

1401
01:07:12,590 --> 01:07:15,160
or stores them in a nice way.

1402
01:07:15,160 --> 01:07:18,110
So JSON isn't a programming
language the way that JavaScript is.

1403
01:07:18,110 --> 01:07:20,900
It's just the notation for
our objects in JavaScript.

1404
01:07:20,900 --> 01:07:21,400
Yeah.

1405
01:07:21,400 --> 01:07:24,144
>> AUDIENCE: So what exactly
[INAUDIBLE] complete?

1406
01:07:24,144 --> 01:07:25,060
HANNAH BLUMBERG: Sure.

1407
01:07:25,060 --> 01:07:27,727
So this actually does nothing.

1408
01:07:27,727 --> 01:07:28,935
This is just a way to access.

1409
01:07:28,935 --> 01:07:31,393
So let's say we wanted to change
the number of problem sets

1410
01:07:31,393 --> 01:07:32,450
from nine to eight.

1411
01:07:32,450 --> 01:07:34,383
What we do is do something
like CS50.psets=8;.

1412
01:07:34,383 --> 01:07:38,500

1413
01:07:38,500 --> 01:07:39,400
>> Yeah, great question.

1414
01:07:39,400 --> 01:07:40,733
This is just to show you syntax.

1415
01:07:40,733 --> 01:07:43,620
Doesn't actually do anything useful.

1416
01:07:43,620 --> 01:07:46,085
Any questions?

1417
01:07:46,085 --> 01:07:48,210
Moving right along.

1418
01:07:48,210 --> 01:07:51,960
>> So let's look at a quick example of how
JavaScript works because I told you it

1419
01:07:51,960 --> 01:07:55,170
does all these cool things and
allows us to modify web pages.

1420
01:07:55,170 --> 01:07:56,970
Let's actually see it in action.

1421
01:07:56,970 --> 01:07:59,850
So take, for example, this HTML file.

1422
01:07:59,850 --> 01:08:04,350
>> And the thing I want you to focus on is
this particular tag, which is a button,

1423
01:08:04,350 --> 01:08:06,182
with id search_button.

1424
01:08:06,182 --> 01:08:08,670
It's just on the page.

1425
01:08:08,670 --> 01:08:10,690
So now let's see what
we can actually do.

1426
01:08:10,690 --> 01:08:12,560
>> Well, suppose when
you click that button,

1427
01:08:12,560 --> 01:08:16,010
we want to make an alert--
you clicked the button.

1428
01:08:16,010 --> 01:08:17,840
Let's see how we can do that.

1429
01:08:17,840 --> 01:08:23,869
So window.onload-- this isn't something
that you've seen in class, therefore

1430
01:08:23,869 --> 01:08:26,180
won't need to know it for the quiz.

1431
01:08:26,180 --> 01:08:33,660
But this basically says, OK, call
this function when the window loads.

1432
01:08:33,660 --> 01:08:35,080
>> So that's just kind of setup code.

1433
01:08:35,080 --> 01:08:36,390
Don't worry so much about that.

1434
01:08:36,390 --> 01:08:39,170
What I want you to focus on is in here.

1435
01:08:39,170 --> 01:08:44,020
We say var searchButton equals
document.getElementByID search_button.

1436
01:08:44,020 --> 01:08:46,450
>> So as you might guess,
what this does is it says,

1437
01:08:46,450 --> 01:08:50,920
OK, go find the element
with ID search_button.

1438
01:08:50,920 --> 01:08:52,790
And now we have that
actual element and I'm

1439
01:08:52,790 --> 01:08:56,279
going to store it in a
variable searchButton.

1440
01:08:56,279 --> 01:09:00,651
And now we can actually use that element
and change it, or access its values,

1441
01:09:00,651 --> 01:09:01,359
things like that.

1442
01:09:01,359 --> 01:09:04,649
We can actually start to
engage with the web page.

1443
01:09:04,649 --> 01:09:10,330
>> So here I say, OK, now that I have
that button, when it is clicked,

1444
01:09:10,330 --> 01:09:12,859
call this anonymous function.

1445
01:09:12,859 --> 01:09:16,811
So this is where anonymous
functions become useful.

1446
01:09:16,811 --> 01:09:18,060
And what does the function do?

1447
01:09:18,060 --> 01:09:20,529
Well, it just calls this
alert function and it says,

1448
01:09:20,529 --> 01:09:22,910
you clicked the Search button.

1449
01:09:22,910 --> 01:09:29,670
>> So what will happen if I go to wherever
this HTML lives and I click the button,

1450
01:09:29,670 --> 01:09:33,729
I'll get a fancy little alert
that says you clicked the button.

1451
01:09:33,729 --> 01:09:40,710
So the things to focus on
here-- document.getElementByID

1452
01:09:40,710 --> 01:09:44,960
gets a particular HTML
element with the given ID.

1453
01:09:44,960 --> 01:09:48,529
And now we can set
what should happen when

1454
01:09:48,529 --> 01:09:50,702
that particular element is clicked.

1455
01:09:50,702 --> 01:09:52,670
>> AUDIENCE: We have to put all of that in?

1456
01:09:52,670 --> 01:09:53,162
>> HANNAH BLUMBERG: Sorry?

1457
01:09:53,162 --> 01:09:55,130
>> AUDIENCE: Do we have to
physically code all of that?

1458
01:09:55,130 --> 01:09:56,340
>> HANNAH BLUMBERG: Do we have to
physically code all of that?

1459
01:09:56,340 --> 01:09:56,839
Yes.

1460
01:09:56,839 --> 01:09:58,120
Isn't this kind of annoying?

1461
01:09:58,120 --> 01:10:00,032
This is a lot of code.

1462
01:10:00,032 --> 01:10:01,574
>> AUDIENCE: You could import something.

1463
01:10:01,574 --> 01:10:02,532
HANNAH BLUMBERG: Right.

1464
01:10:02,532 --> 01:10:03,610
We could use something.

1465
01:10:03,610 --> 01:10:08,140
And in particular-- oh, it's
telling me I have to teach section.

1466
01:10:08,140 --> 01:10:11,061
In particular, let's
use the library jQuery,

1467
01:10:11,061 --> 01:10:13,060
because that was really
long and really annoying

1468
01:10:13,060 --> 01:10:16,860
and I want to be able to simplify it
and make it shorter and easier to write.

1469
01:10:16,860 --> 01:10:19,810
>> So jQuery is a JavaScript library.

1470
01:10:19,810 --> 01:10:24,930
So JavaScript is programming
language; jQuery is a library.

1471
01:10:24,930 --> 01:10:27,190
And it makes a bunch of things easier.

1472
01:10:27,190 --> 01:10:33,230
It makes changing and going across
a HTML document much easier.

1473
01:10:33,230 --> 01:10:35,030
>> It makes handling events easier.

1474
01:10:35,030 --> 01:10:37,580
It makes animation easier
and it makes Ajax easier.

1475
01:10:37,580 --> 01:10:40,140
So let's jump into two of
those things right now.

1476
01:10:40,140 --> 01:10:40,900
Excuse me.

1477
01:10:40,900 --> 01:10:42,620
Before we do, some basic syntax.

1478
01:10:42,620 --> 01:10:46,870
>> This is what most calls to
the jQuery library look like.

1479
01:10:46,870 --> 01:10:50,520
We use this dollar sign--
no connection sign to PHP,

1480
01:10:50,520 --> 01:10:56,030
just inconvenient-- the name of a
selector, dot, and then an action.

1481
01:10:56,030 --> 01:10:58,860
So let's see some
concrete examples of that.

1482
01:10:58,860 --> 01:11:02,980
>> So this actually is the same
code from the event slide.

1483
01:11:02,980 --> 01:11:08,740
So this long, ugly thing becomes
this much nicer, smaller thing.

1484
01:11:08,740 --> 01:11:10,370
So let's try to break this down.

1485
01:11:10,370 --> 01:11:17,090
This says, OK, jQuery-- this dollar
sign-- jQuery, find me the window.

1486
01:11:17,090 --> 01:11:18,480
So that's the selector.

1487
01:11:18,480 --> 01:11:21,800
>> When it loads, call this function.

1488
01:11:21,800 --> 01:11:23,880
So that's everything inside.

1489
01:11:23,880 --> 01:11:24,380
OK.

1490
01:11:24,380 --> 01:11:25,740
So far, so good?

1491
01:11:25,740 --> 01:11:26,750
All right.

1492
01:11:26,750 --> 01:11:32,970
>> Now, jQuery, find me the
thing with ID search_button.

1493
01:11:32,970 --> 01:11:36,090
And what it is clicked,
call this function.

1494
01:11:36,090 --> 01:11:37,900
And then this function's
exactly the same.

1495
01:11:37,900 --> 01:11:41,052
Just do a little bit of alert,
you clicked the Search button.

1496
01:11:41,052 --> 01:11:42,650
>> So it's really nice.

1497
01:11:42,650 --> 01:11:46,260
It really condenses and
simplifies our code.

1498
01:11:46,260 --> 01:11:49,030
How did I know that
it's ID search_button

1499
01:11:49,030 --> 01:11:50,960
and not like class search_button?

1500
01:11:50,960 --> 01:11:52,024
>> AUDIENCE: Hashtag?

1501
01:11:52,024 --> 01:11:52,940
HANNAH BLUMBERG: Yeah.

1502
01:11:52,940 --> 01:11:56,450
This hash symbol, it's just like CSS.

1503
01:11:56,450 --> 01:12:00,080
So remember, with CSS, when we
wanted to select something by ID,

1504
01:12:00,080 --> 01:12:01,590
we used the pound sign.

1505
01:12:01,590 --> 01:12:05,400
And when we wanted to select
something by class, we use the dot.

1506
01:12:05,400 --> 01:12:06,870
Great.

1507
01:12:06,870 --> 01:12:08,230
Make sense?

1508
01:12:08,230 --> 01:12:11,500
So jQuery is supposed to
just make our life easier.

1509
01:12:11,500 --> 01:12:12,000
Yeah.

1510
01:12:12,000 --> 01:12:15,660
>> AUDIENCE: So I'm a little confused as
to how the anonymous function works.

1511
01:12:15,660 --> 01:12:19,027
Do you name this anonymouse
function, function?

1512
01:12:19,027 --> 01:12:20,594
How is it called?

1513
01:12:20,594 --> 01:12:21,510
HANNAH BLUMBERG: Sure.

1514
01:12:21,510 --> 01:12:25,812
So function is just a keyword that
says, I'm about to define a function.

1515
01:12:25,812 --> 01:12:26,520
AUDIENCE: Oh, OK.

1516
01:12:26,520 --> 01:12:27,353
HANNAH BLUMBERG: OK?

1517
01:12:27,353 --> 01:12:32,120
And then we pass it as an
argument to-- let's take

1518
01:12:32,120 --> 01:12:37,040
this inner one-- to the click function.

1519
01:12:37,040 --> 01:12:39,420
So yeah, so that function,
this anonymous function,

1520
01:12:39,420 --> 01:12:40,910
becomes an actual argument.

1521
01:12:40,910 --> 01:12:43,632
So remember in JavaScript, we
can treat functions as values.

1522
01:12:43,632 --> 01:12:44,340
AUDIENCE: Oh, OK.

1523
01:12:44,340 --> 01:12:45,256
HANNAH BLUMBERG: Yeah.

1524
01:12:45,256 --> 01:12:46,035
I like that "oh."

1525
01:12:46,035 --> 01:12:47,490
Nice.

1526
01:12:47,490 --> 01:12:49,915
Other questions?

1527
01:12:49,915 --> 01:12:50,505
Time?

1528
01:12:50,505 --> 01:12:51,380
MARIA ZLATKOVA: Good.

1529
01:12:51,380 --> 01:12:52,760
Good.

1530
01:12:52,760 --> 01:12:54,210
>> HANNAH BLUMBERG: Awesome.

1531
01:12:54,210 --> 01:12:55,720
Some quick useful jQuery.

1532
01:12:55,720 --> 01:12:57,559
I'm not going to go
through all of these.

1533
01:12:57,559 --> 01:12:59,350
These slides will be
up online a little bit

1534
01:12:59,350 --> 01:13:02,040
later, so you can check
it out a little bit later.

1535
01:13:02,040 --> 01:13:07,120
But basically, the general
pattern holds where we say,

1536
01:13:07,120 --> 01:13:11,510
OK, hey, jQuery, here's my
selector and then here's an action.

1537
01:13:11,510 --> 01:13:15,940
And you can do things like access the
value of a form, access some HTML,

1538
01:13:15,940 --> 01:13:19,195
control what happens when the user
submits a form, things like that.

1539
01:13:19,195 --> 01:13:20,106
Yes.

1540
01:13:20,106 --> 01:13:22,090
>> AUDIENCE: So in the
exam, we're going to need

1541
01:13:22,090 --> 01:13:25,066
to know quite a lot from
the jQuery documentation.

1542
01:13:25,066 --> 01:13:31,018
So given that we copy/paste the jQuery
documentation to our cheat sheet,

1543
01:13:31,018 --> 01:13:32,506
where's the line drawn?

1544
01:13:32,506 --> 01:13:33,957
Like how many do we need to know?

1545
01:13:33,957 --> 01:13:35,290
HANNAH BLUMBERG: Great question.

1546
01:13:35,290 --> 01:13:37,765
The question is
essentially given that you

1547
01:13:37,765 --> 01:13:41,330
can't access the jQuery documentation
during the test, how much should you

1548
01:13:41,330 --> 01:13:41,830
know?

1549
01:13:41,830 --> 01:13:45,540
We would not expect you to come
up with some random function

1550
01:13:45,540 --> 01:13:47,240
that we would expect you to Google.

1551
01:13:47,240 --> 01:13:52,930
>> Things that are fair game are I would
say just kind of the general syntax,

1552
01:13:52,930 --> 01:13:58,310
being able to select by ID and
by class-- so just like CSS.

1553
01:13:58,310 --> 01:14:01,876
And then the actual functions
themself, we'll likely tell you.

1554
01:14:01,876 --> 01:14:02,376
Yeah.

1555
01:14:02,376 --> 01:14:05,591
>> AUDIENCE: So when you select
by class would mean dot.

1556
01:14:05,591 --> 01:14:06,840
HANNAH BLUMBERG: Yes, exactly.

1557
01:14:06,840 --> 01:14:07,340
Good.

1558
01:14:07,340 --> 01:14:10,461
When you select by class, it's going
to be dot instead of the pound sign.

1559
01:14:10,461 --> 01:14:10,960
Yes.

1560
01:14:10,960 --> 01:14:12,710
>> AUDIENCE: Would you
go over the difference

1561
01:14:12,710 --> 01:14:14,310
between selecting by ID and by class?

1562
01:14:14,310 --> 01:14:14,560
>> HANNAH BLUMBERG: Sure.

1563
01:14:14,560 --> 01:14:17,510
The difference between selecting
ID and selecting by class.

1564
01:14:17,510 --> 01:14:20,685
So as Maria said a
little bit earlier, there

1565
01:14:20,685 --> 01:14:26,280
can only be one HTML element
with a given ID, whereas class,

1566
01:14:26,280 --> 01:14:29,740
it allows us to group a bunch
of different elements together,

1567
01:14:29,740 --> 01:14:34,300
so things that are related,
but not exactly the same.

1568
01:14:34,300 --> 01:14:35,685
Does that answer the question?

1569
01:14:35,685 --> 01:14:36,200
Awesome.

1570
01:14:36,200 --> 01:14:37,194
Yes.

1571
01:14:37,194 --> 01:14:40,680
>> AUDIENCE: What if you have multiple
things that are in the same class?

1572
01:14:40,680 --> 01:14:42,150
>> HANNAH BLUMBERG: What happens
if you have multiple things that

1573
01:14:42,150 --> 01:14:43,280
are the same class?

1574
01:14:43,280 --> 01:14:45,829
So, for example, if we're
just using pure JavaScript,

1575
01:14:45,829 --> 01:14:48,120
we would do something like
document.getElementsByClass.

1576
01:14:48,120 --> 01:14:52,280

1577
01:14:52,280 --> 01:14:56,320
And then what that actually does
is returns an array of elements.

1578
01:14:56,320 --> 01:14:59,517
>> And you have to either iterate over
them or find which one you want.

1579
01:14:59,517 --> 01:15:01,350
It's not going to give
you a single element.

1580
01:15:01,350 --> 01:15:03,450
It's going to give you
an array of elements.

1581
01:15:03,450 --> 01:15:05,280
Great question.

1582
01:15:05,280 --> 01:15:07,700
Anything else?

1583
01:15:07,700 --> 01:15:09,520
Awesome.

1584
01:15:09,520 --> 01:15:12,860
>> So I think if you're familiar with
any jQuery you saw in the pset,

1585
01:15:12,860 --> 01:15:15,600
you should be good to go.

1586
01:15:15,600 --> 01:15:16,325
Question?

1587
01:15:16,325 --> 01:15:17,610
Oh, no.

1588
01:15:17,610 --> 01:15:18,859
I really have to teach.

1589
01:15:18,859 --> 01:15:19,358
Relax.

1590
01:15:19,358 --> 01:15:20,035
It'll be fine.

1591
01:15:20,035 --> 01:15:20,660
I'll get there.

1592
01:15:20,660 --> 01:15:24,670

1593
01:15:24,670 --> 01:15:26,870
>> Let's talk about Ajax.

1594
01:15:26,870 --> 01:15:31,350
So Ajax is going to be a-- well,
let's start with what it stands for.

1595
01:15:31,350 --> 01:15:32,350
It's an acronym.

1596
01:15:32,350 --> 01:15:35,855
It stands for Asynchronous
JavaScript and XML.

1597
01:15:35,855 --> 01:15:39,800
And XML is basically is going to be
[INAUDIBLE] with a type of our data.

1598
01:15:39,800 --> 01:15:42,100
But we haven't actually used XML.

1599
01:15:42,100 --> 01:15:43,430
Instead, we just use JSON.

1600
01:15:43,430 --> 01:15:48,350
>> So basically, it's some data--
asynchronous, JavaScript, and data,

1601
01:15:48,350 --> 01:15:50,040
in this case, JSON.

1602
01:15:50,040 --> 01:15:52,820
And our goal, as we mentioned
a little bit earlier,

1603
01:15:52,820 --> 01:15:56,880
is to be able to make a
request, have that request do

1604
01:15:56,880 --> 01:16:00,700
its thing in the
background, but continue

1605
01:16:00,700 --> 01:16:02,550
do whatever we were intending to do.

1606
01:16:02,550 --> 01:16:06,650
And then when that information is
ready, then we'll incorporate it.

1607
01:16:06,650 --> 01:16:08,470
>> So let's see what this
actually looks like.

1608
01:16:08,470 --> 01:16:11,210
And this, you should be
a little bit familiar

1609
01:16:11,210 --> 01:16:13,680
from pset8, the one you just turned in.

1610
01:16:13,680 --> 01:16:16,200
So here's a valid jQuery
function that we might

1611
01:16:16,200 --> 01:16:18,250
want to know about-- this dollar sign.

1612
01:16:18,250 --> 01:16:21,500
So it says jQuery function, .getJson.

1613
01:16:21,500 --> 01:16:25,020
>> And what this function does is it
takes a URL and some parameters--

1614
01:16:25,020 --> 01:16:28,000
so I think in the case
of pset8, it was like,

1615
01:16:28,000 --> 01:16:33,520
the URL was articles.php and the
parameters was go= some postal code.

1616
01:16:33,520 --> 01:16:41,580
And it says, OK, make a request to
this URL with the given parameters.

1617
01:16:41,580 --> 01:16:43,480
And that just happens.

1618
01:16:43,480 --> 01:16:47,730
>> When it finishes, it's either
going to successfully complete

1619
01:16:47,730 --> 01:16:49,370
or it's going to fail.

1620
01:16:49,370 --> 01:16:53,480
So this is the equivalent of call
Rob and ask him to do something.

1621
01:16:53,480 --> 01:17:00,260
And then when he calls back, he's either
going to say I'm done or I failed.

1622
01:17:00,260 --> 01:17:04,030
>> So in the case where you're
done, you say, OK, I'm done.

1623
01:17:04,030 --> 01:17:05,980
And then you call this function.

1624
01:17:05,980 --> 01:17:08,915
In this case, it's going to be a
function that takes some information.

1625
01:17:08,915 --> 01:17:12,890
The one we usually care about is data,
the data that we were actually returned

1626
01:17:12,890 --> 01:17:15,900
as a result of calling .getJSON.

1627
01:17:15,900 --> 01:17:17,470
>> And you can do something with it.

1628
01:17:17,470 --> 01:17:23,670
So in the case of pset8,
we displayed it as a list.

1629
01:17:23,670 --> 01:17:29,050
Fail is going to be a function
that is called if the request fails

1630
01:17:29,050 --> 01:17:30,450
for whatever reason.

1631
01:17:30,450 --> 01:17:35,104
And in the case of pset8,
we just console.log it.

1632
01:17:35,104 --> 01:17:36,020
Any questions on that?

1633
01:17:36,020 --> 01:17:36,300
Yeah.

1634
01:17:36,300 --> 01:17:39,633
>> AUDIENCE: Can we just use function theta
instead of function, textStatus, jqHXR.

1635
01:17:39,633 --> 01:17:43,464

1636
01:17:43,464 --> 01:17:44,380
HANNAH BLUMBERG: Sure.

1637
01:17:44,380 --> 01:17:46,713
So yeah, I think in the pset,
we just saw function data.

1638
01:17:46,713 --> 01:17:48,700
So it's just the-- yes, OK.

1639
01:17:48,700 --> 01:17:50,510
That's what we saw in the pset.

1640
01:17:50,510 --> 01:17:51,480
That's totally fine.

1641
01:17:51,480 --> 01:17:54,210
>> These are just if you wanted
to pull out more information,

1642
01:17:54,210 --> 01:17:57,190
these are the things that
you could get from .getJSON.

1643
01:17:57,190 --> 01:17:59,040
Good question.

1644
01:17:59,040 --> 01:17:59,706
Anything else?

1645
01:17:59,706 --> 01:18:00,206
Yeah.

1646
01:18:00,206 --> 01:18:01,787
>> AUDIENCE: So .getJSON is Ajax?

1647
01:18:01,787 --> 01:18:02,620
HANNAH BLUMBERG: OK.

1648
01:18:02,620 --> 01:18:05,700
So this is the kind of tricky part.

1649
01:18:05,700 --> 01:18:12,390
It is a jQuery function that allows
you to do asynchronous calls.

1650
01:18:12,390 --> 01:18:16,080
And those asynchronous calls, that's
what we've been referring to as Ajax.

1651
01:18:16,080 --> 01:18:16,850
Yeah.

1652
01:18:16,850 --> 01:18:20,185
That took me a really long time to
pull apart when I was a student.

1653
01:18:20,185 --> 01:18:21,560
AUDIENCE: Can you say that again?

1654
01:18:21,560 --> 01:18:22,476
HANNAH BLUMBERG: Yeah.

1655
01:18:22,476 --> 01:18:23,630
Can I say that again?

1656
01:18:23,630 --> 01:18:29,010
This .getJSON function,
it is a jQuery function.

1657
01:18:29,010 --> 01:18:31,970
And it's going to make
an asynchronous call.

1658
01:18:31,970 --> 01:18:35,700
And these asynchronous calls, we've
been referring to those as Ajax.

1659
01:18:35,700 --> 01:18:39,610

1660
01:18:39,610 --> 01:18:41,872
>> Any other questions?

1661
01:18:41,872 --> 01:18:43,330
We have just a couple minutes left.

1662
01:18:43,330 --> 01:18:45,080
And Maria's going to
wrap up with security

1663
01:18:45,080 --> 01:18:47,464
and then we're going
to be just about done.

1664
01:18:47,464 --> 01:18:48,630
MARIA ZLATKOVA: Awesome, OK.

1665
01:18:48,630 --> 01:18:54,030
So this is-- just take a couple
of seconds to look over this.

1666
01:18:54,030 --> 01:18:56,750
And this is not something really great.

1667
01:18:56,750 --> 01:18:59,430
And can someone tell me why?

1668
01:18:59,430 --> 01:19:05,650
What is going on in foo and may could
potentially result in something bad,

1669
01:19:05,650 --> 01:19:06,770
and what that's called?

1670
01:19:06,770 --> 01:19:07,270
Yeah.

1671
01:19:07,270 --> 01:19:10,391
AUDIENCE: If the argument that's
passed in is more than 12 characters,

1672
01:19:10,391 --> 01:19:11,454
it could overflow.

1673
01:19:11,454 --> 01:19:12,370
MARIA ZLATKOVA: Right.

1674
01:19:12,370 --> 01:19:14,180
Perfect.

1675
01:19:14,180 --> 01:19:15,384
What is it called?

1676
01:19:15,384 --> 01:19:16,300
You just mentioned it.

1677
01:19:16,300 --> 01:19:16,840
>> AUDIENCE: Buffer overflow.

1678
01:19:16,840 --> 01:19:18,381
>> MARIA ZLATKOVA: Yup, buffer overflow.

1679
01:19:18,381 --> 01:19:21,230
So this is something that we
refer to as buffer overflow.

1680
01:19:21,230 --> 01:19:25,500
And we see that inside of foo,
we've defined our buffer, c,

1681
01:19:25,500 --> 01:19:27,240
with a size of 12.

1682
01:19:27,240 --> 01:19:32,680
However, in main, we don't
check in any way at all

1683
01:19:32,680 --> 01:19:36,480
whether the argv1-- so that
was the second argument.

1684
01:19:36,480 --> 01:19:39,630
We don't check whether the
size of it is appropriate.

1685
01:19:39,630 --> 01:19:43,380
>> So if we had an
especially malicious user

1686
01:19:43,380 --> 01:19:47,170
who put in some argument that was
longer than 12, and then potentially

1687
01:19:47,170 --> 01:19:50,850
beyond the bounds of that
argument, had some executable code

1688
01:19:50,850 --> 01:19:55,570
that he was trying to do something bad
with it; then this, what would happen,

1689
01:19:55,570 --> 01:19:59,310
would override the return
address of the foo function,

1690
01:19:59,310 --> 01:20:04,370
causing the function to when
returning to execute that code.

1691
01:20:04,370 --> 01:20:07,540
And then bad things could happen.

1692
01:20:07,540 --> 01:20:09,850
Does this make sense to everyone?

1693
01:20:09,850 --> 01:20:12,424
>> And how can we protect against this?

1694
01:20:12,424 --> 01:20:13,090
Any suggestions?

1695
01:20:13,090 --> 01:20:16,480

1696
01:20:16,480 --> 01:20:21,890
Basically, inside of
potentially foo, how

1697
01:20:21,890 --> 01:20:28,294
can we check to make sure
that that can't happen?

1698
01:20:28,294 --> 01:20:33,879
>> AUDIENCE: If the size 12 is exceeded,
you would allocate additional memory?

1699
01:20:33,879 --> 01:20:37,170
MARIA ZLATKOVA: Suggestion is, allocate
additional memory of the size exceeded.

1700
01:20:37,170 --> 01:20:39,800
Actually, we can do something a
lot simpler than that as well.

1701
01:20:39,800 --> 01:20:44,870
We can just get the string length
of the argument that is entered,

1702
01:20:44,870 --> 01:20:48,590
check if that is less
than or equal to 12--

1703
01:20:48,590 --> 01:20:50,790
which is what we want it
to be because we don't want

1704
01:20:50,790 --> 01:20:52,373
it to exceed the bounds of our buffer.

1705
01:20:52,373 --> 01:20:55,690
And then if it doesn't, we
can work with the argument.

1706
01:20:55,690 --> 01:21:00,296
And then if it does, we actually want
to yello potentially at the user.

1707
01:21:00,296 --> 01:21:01,670
But this is how we would do that.

1708
01:21:01,670 --> 01:21:02,443
Yes.

1709
01:21:02,443 --> 01:21:04,360
>> AUDIENCE: Could you
explain memcpy real quick?

1710
01:21:04,360 --> 01:21:05,443
MARIA ZLATKOVA: Oh, sorry.

1711
01:21:05,443 --> 01:21:06,040
Yes.

1712
01:21:06,040 --> 01:21:11,290
Memcpy takes whatever is-- sorry, OK.

1713
01:21:11,290 --> 01:21:15,850
Memcpy takes whatever is
in bar, whatever is passed

1714
01:21:15,850 --> 01:21:18,050
onto foo as the command line argument.

1715
01:21:18,050 --> 01:21:19,440
So it's going to take argv1.

1716
01:21:19,440 --> 01:21:21,420
Argv1 is called bar here.

1717
01:21:21,420 --> 01:21:24,453
So it's going to take bar and
it's going to copy it into c.

1718
01:21:24,453 --> 01:21:25,402
>> AUDIENCE: OK.

1719
01:21:25,402 --> 01:21:28,360
MARIA ZLATKOVA: And it's going to
copy-- the third argument just refers

1720
01:21:28,360 --> 01:21:30,601
to how much it's going to copy into c.

1721
01:21:30,601 --> 01:21:31,142
AUDIENCE: Ah.

1722
01:21:31,142 --> 01:21:33,030
So this one's copying all of it then.

1723
01:21:33,030 --> 01:21:34,310
>> MARIA ZLATKOVA: Yeah,
it's copying all of it.

1724
01:21:34,310 --> 01:21:34,810
Yep.

1725
01:21:34,810 --> 01:21:38,400

1726
01:21:38,400 --> 01:21:41,910
First, we make sure the bar is not
equal to null because it's a pointer.

1727
01:21:41,910 --> 01:21:44,680
Then we get the string length of bar.

1728
01:21:44,680 --> 01:21:47,530
We make sure that it's
less than or equal to 12.

1729
01:21:47,530 --> 01:21:50,070
And then because we've
made sure, we can actually

1730
01:21:50,070 --> 01:21:53,122
memcpy and be sure that that's OK.

1731
01:21:53,122 --> 01:21:53,705
Any questions?

1732
01:21:53,705 --> 01:21:56,280

1733
01:21:56,280 --> 01:21:58,690
Great.

1734
01:21:58,690 --> 01:22:00,400
I have two true or false questions.

1735
01:22:00,400 --> 01:22:05,470
Can anyone tell me right away
if these are true or false?

1736
01:22:05,470 --> 01:22:07,460
Yes, it's false.

1737
01:22:07,460 --> 01:22:07,960
Exactly.

1738
01:22:07,960 --> 01:22:09,330
Both of them are false.

1739
01:22:09,330 --> 01:22:12,682
So using a single password
is never really good idea

1740
01:22:12,682 --> 01:22:14,890
because if someone knows
your password, they can just

1741
01:22:14,890 --> 01:22:16,260
access all your other accounts.

1742
01:22:16,260 --> 01:22:19,260
And then icons do nothing
to ensure security.

1743
01:22:19,260 --> 01:22:24,900
We should usually look for HTTPS
instead of HTTP and the URL.

1744
01:22:24,900 --> 01:22:28,560
>> And some other types of
attacks that we've mentioned,

1745
01:22:28,560 --> 01:22:31,390
that David has mentioned in
lecture, SQL injection attacks.

1746
01:22:31,390 --> 01:22:37,310
We already saw that if we don't-- the
CS50 query function makes sure that SQL

1747
01:22:37,310 --> 01:22:39,530
injection attacks cannot occur.

1748
01:22:39,530 --> 01:22:42,640
But if we weren't using CS50,
quote, unquote "in query,"

1749
01:22:42,640 --> 01:22:46,830
we would have to make sure that the
user input isn't actually some SQL

1750
01:22:46,830 --> 01:22:49,670
query that will cause all
our tables to be dropped

1751
01:22:49,670 --> 01:22:54,070
or something bad to
happen with our database.

1752
01:22:54,070 --> 01:22:56,790
>> Session hijacking is
another type of attack

1753
01:22:56,790 --> 01:23:05,940
that happens when some bad
person uses some victim's session

1754
01:23:05,940 --> 01:23:08,740
ID to access the login information.

1755
01:23:08,740 --> 01:23:13,620
So a very trivial example of that is
like if we have a public computer,

1756
01:23:13,620 --> 01:23:21,120
then the bad person logs in and then
they have cookies that are saved.

1757
01:23:21,120 --> 01:23:23,380
And cookies do not change for session.

1758
01:23:23,380 --> 01:23:27,620
>> Then we have the victim go in
and then log into the website.

1759
01:23:27,620 --> 01:23:30,290
The cookies don't change
for a certain session.

1760
01:23:30,290 --> 01:23:33,060
And then the victim logs into
the website and then leaves.

1761
01:23:33,060 --> 01:23:36,190
And then the person who goes back
can then still use their session ID

1762
01:23:36,190 --> 01:23:37,430
to access their information.

1763
01:23:37,430 --> 01:23:40,050
So that's one example of
how that could happen.

1764
01:23:40,050 --> 01:23:45,570
>> And then I wouldn't worry too much
about specific code or anything

1765
01:23:45,570 --> 01:23:49,270
like that that could cause this,
but having some sort of idea what

1766
01:23:49,270 --> 01:23:51,400
the variables involved in this are.

1767
01:23:51,400 --> 01:23:53,897
And then manipulating header
data is another type of attack

1768
01:23:53,897 --> 01:23:55,230
that has David has talked about.

1769
01:23:55,230 --> 01:23:59,730
And it just refers to
what can happen when

1770
01:23:59,730 --> 01:24:04,300
the response, the HTTP
response inside of our header

1771
01:24:04,300 --> 01:24:05,720
is not sanitized properly.

1772
01:24:05,720 --> 01:24:14,340
>> And any of the fields-- for example,
if someone overwrites one of the header

1773
01:24:14,340 --> 01:24:18,860
values to contain anything more than
what they should contain-- and actually

1774
01:24:18,860 --> 01:24:22,720
contain, for example, a 200
OK status code, then they

1775
01:24:22,720 --> 01:24:26,890
could potentially do malicious
things when they're not supposed to.

1776
01:24:26,890 --> 01:24:30,815
But I wouldn't worry too
much about the specific code

1777
01:24:30,815 --> 01:24:34,110
that could cause this,
just sort of understanding

1778
01:24:34,110 --> 01:24:37,290
high-level things like that.

1779
01:24:37,290 --> 01:24:39,570
>> I think this is all
that we have to cover.

1780
01:24:39,570 --> 01:24:40,090
Amazing.

1781
01:24:40,090 --> 01:24:43,310
Anyone have any questions on any
of the things that we covered?

1782
01:24:43,310 --> 01:24:44,213
Yes.

1783
01:24:44,213 --> 01:24:48,077
>> AUDIENCE: So one sort of
more logistical question.

1784
01:24:48,077 --> 01:24:53,400
Is the content mainly focused
on things after quiz 1?

1785
01:24:53,400 --> 01:24:55,730
>> MARIA ZLATKOVA: So
question is, is the content

1786
01:24:55,730 --> 01:24:59,720
focused mainly on things after quiz 1?

1787
01:24:59,720 --> 01:25:06,070
So the focus is on after
quiz 1, with the exception

1788
01:25:06,070 --> 01:25:10,914
that we need to focus on things in
pset5 and a lot of the data structures

1789
01:25:10,914 --> 01:25:11,580
that we covered.

1790
01:25:11,580 --> 01:25:14,300
And we can't say that we
can ignore anything before

1791
01:25:14,300 --> 01:25:17,120
that because it builds upon it as well.

1792
01:25:17,120 --> 01:25:21,845
>> So focus on that, plus pset5 material
like including linked lists, stacks,

1793
01:25:21,845 --> 01:25:23,720
queues, and everything
that Hannah went over.

1794
01:25:23,720 --> 01:25:24,050
>> HANNAH BLUMBERG: Right.

1795
01:25:24,050 --> 01:25:27,450
Yeah, we went over all the C stuff
at the very beginning very quickly.

1796
01:25:27,450 --> 01:25:29,090
But make sure to review that.

1797
01:25:29,090 --> 01:25:32,700
Go back and watch the quiz 0 review.

1798
01:25:32,700 --> 01:25:36,110
>> A couple more logistical notes,
just while we have your attention.

1799
01:25:36,110 --> 01:25:39,100
We are going to have office hours
both on Monday and Tuesday night.

1800
01:25:39,100 --> 01:25:41,540
They're going to be in MD 119.

1801
01:25:41,540 --> 01:25:44,220
This is all on the website, so
if you don't hear it, no worries.

1802
01:25:44,220 --> 01:25:45,266
>> MARIA ZLATKOVA: 8:30 to 11:00.

1803
01:25:45,266 --> 01:25:46,260
>> HANNAH BLUMBERG: Yeah, 8:30 to 11:00.

1804
01:25:46,260 --> 01:25:46,910
We'll be there.

1805
01:25:46,910 --> 01:25:48,368
We'll be there to answer questions.

1806
01:25:48,368 --> 01:25:49,480
It's pretty chill and fun.

1807
01:25:49,480 --> 01:25:53,240
You guys can ask any questions
that you have on quiz 1.

1808
01:25:53,240 --> 01:25:55,740
And quiz 1 is on
Wednesday, so good luck.

1809
01:25:55,740 --> 01:25:59,770
If you have any questions, maybe
come talk to us up here one-on-one.

1810
01:25:59,770 --> 01:26:00,880
Cool.

1811
01:26:00,880 --> 01:26:01,630
Thanks so much.

1812
01:26:01,630 --> 01:26:02,880
>> MARIA ZLATKOVA: Thanks so much, guys.

1813
01:26:02,880 --> 01:26:03,480
>> AUDIENCE: Yay.

1814
01:26:03,480 --> 01:26:05,930
>> [APPLAUSE]

1815
01:26:05,930 --> 01:26:07,530