1
00:00:00,000 --> 00:00:03,310


2
00:00:03,310 --> 00:00:06,430
CARTER ZENKE: Well, hello one and
all and welcome to CS50s week eight

3
00:00:06,430 --> 00:00:07,140
section.

4
00:00:07,140 --> 00:00:08,140
My name is Carter Zenke.

5
00:00:08,140 --> 00:00:10,180
I'm the courses
preceptor here on campus.

6
00:00:10,180 --> 00:00:14,290
And the goal of these sections is to
help you bridge the gap between lecture

7
00:00:14,290 --> 00:00:16,040
and this week's problem set.

8
00:00:16,040 --> 00:00:20,170
So together, we'll be diving into
some HTML, some CSS, some JavaScript,

9
00:00:20,170 --> 00:00:21,550
even HTTP.

10
00:00:21,550 --> 00:00:23,300
We'll learn more about
all of those things

11
00:00:23,300 --> 00:00:25,467
and you'll get a chance to
ask your questions for us

12
00:00:25,467 --> 00:00:27,220
to work on the exercises
together and hope

13
00:00:27,220 --> 00:00:30,310
by the end you have all the more comfort
and familiarity with these topics

14
00:00:30,310 --> 00:00:31,580
from this week.

15
00:00:31,580 --> 00:00:34,540
So if you'd like to, feel free
to say a brief hello in the chat.

16
00:00:34,540 --> 00:00:38,290
And what we'll do on the count of
three, so I'll ask you all to unmute

17
00:00:38,290 --> 00:00:41,170
and we'll all say hello together
from all different places

18
00:00:41,170 --> 00:00:42,920
we are around the world.

19
00:00:42,920 --> 00:00:46,945
So on the count of three we'll
unmute and we'll do one two three--

20
00:00:46,945 --> 00:00:48,070
AUDIENCE: (EVERYONE) Hello!

21
00:00:48,070 --> 00:00:56,830


22
00:00:56,830 --> 00:01:00,700
CARTER ZENKE: All right, it's so good
to see your faces and hear your voices.

23
00:01:00,700 --> 00:01:03,680
And this week we'll dive into a
few different topics together.

24
00:01:03,680 --> 00:01:08,170
So again, this is week 8, and in week
8, we touch a lot on web programming.

25
00:01:08,170 --> 00:01:11,860
What does it mean to build websites
and actually create your very own web

26
00:01:11,860 --> 00:01:12,400
pages?

27
00:01:12,400 --> 00:01:16,000
So this week have four different
topics we could discuss.

28
00:01:16,000 --> 00:01:22,163
We have this idea of HTTP, this
idea of HTML, CSS, and JavaScript.

29
00:01:22,163 --> 00:01:24,580
There's a lot of acronyms here,
so we'll try to break down

30
00:01:24,580 --> 00:01:26,305
what each of these acronyms means.

31
00:01:26,305 --> 00:01:28,930
But our goal will be to walk
through each of these kind of step

32
00:01:28,930 --> 00:01:32,290
by step, and by the end,
have modified and created

33
00:01:32,290 --> 00:01:36,320
our very own scoreboard website
all the way from scratch.

34
00:01:36,320 --> 00:01:39,040
So let's start off actually with HTTP.

35
00:01:39,040 --> 00:01:44,650
And could I get maybe in the chat,
what do you think HTTP stands for?

36
00:01:44,650 --> 00:01:46,750
Do you remember from lecture at all?

37
00:01:46,750 --> 00:01:49,600
What do you think HTTP stands for?

38
00:01:49,600 --> 00:01:52,090
What does acronym even mean?

39
00:01:52,090 --> 00:01:54,760
Feel free to say hello
and type in the chat.

40
00:01:54,760 --> 00:01:58,713


41
00:01:58,713 --> 00:02:00,880
So I'm seeing different
answers here and one of them

42
00:02:00,880 --> 00:02:05,290
is Hypertext Transfer Protocol, and that
is going to be the correct answer here.

43
00:02:05,290 --> 00:02:08,680
Hypertext transfer protocol,
it's kind of a mouthful.

44
00:02:08,680 --> 00:02:11,680
So let's try to break it down and
talk first about that hypertext piece.

45
00:02:11,680 --> 00:02:16,420
So what do you think hypertext
means in this context?

46
00:02:16,420 --> 00:02:18,640
This is a hypertext transfer protocol.

47
00:02:18,640 --> 00:02:22,780
What does hypertext mean in this case?

48
00:02:22,780 --> 00:02:25,620
Any ideas?

49
00:02:25,620 --> 00:02:28,480
Feel free to chime in in the chat.

50
00:02:28,480 --> 00:02:32,230
So I'm seeing you say it's more
than text, it involves links,

51
00:02:32,230 --> 00:02:33,830
maybe it's interactive text.

52
00:02:33,830 --> 00:02:35,410
These are all really good ideas.

53
00:02:35,410 --> 00:02:39,070
And hypertext is somewhat
of maybe a dated term now.

54
00:02:39,070 --> 00:02:42,550
Hypertext referred to text that had
links inside of it that would link

55
00:02:42,550 --> 00:02:45,110
to other text or other pages and so on.

56
00:02:45,110 --> 00:02:46,750
And so what does that remind you of?

57
00:02:46,750 --> 00:02:49,690
Perhaps a website or websites
that have these links,

58
00:02:49,690 --> 00:02:52,750
this text has links to
other pages on that site.

59
00:02:52,750 --> 00:02:56,470
So the hypertext part in this
hypertext transfer protocol

60
00:02:56,470 --> 00:02:59,350
has to do with the language
we use or the files we

61
00:02:59,350 --> 00:03:04,550
get to actually view websites with their
links to other text on their pages.

62
00:03:04,550 --> 00:03:08,660
So the transfer protocol part,
though, what do you think that means?

63
00:03:08,660 --> 00:03:10,900
What is a transfer protocol?

64
00:03:10,900 --> 00:03:16,600
If hypertext involves interactive
text, links with text and so on,

65
00:03:16,600 --> 00:03:20,760
what does the transfer
protocol perhaps mean?

66
00:03:20,760 --> 00:03:23,370
So I'm seeing sending
and receiving data.

67
00:03:23,370 --> 00:03:26,610
Maybe some more linking.

68
00:03:26,610 --> 00:03:27,750
Other ideas?

69
00:03:27,750 --> 00:03:28,850
Transfer protocol.

70
00:03:28,850 --> 00:03:31,510


71
00:03:31,510 --> 00:03:33,880
Requesting, I'm seeing.

72
00:03:33,880 --> 00:03:36,140
Managing data from one place to another.

73
00:03:36,140 --> 00:03:37,600
These are all really good ideas.

74
00:03:37,600 --> 00:03:40,240
And the transfer protocol
here, the key word,

75
00:03:40,240 --> 00:03:43,000
transfers, as you all
are saying, transferring

76
00:03:43,000 --> 00:03:46,600
data between different users or
different computers, that is sending

77
00:03:46,600 --> 00:03:47,710
and receiving data.

78
00:03:47,710 --> 00:03:50,080
Maybe we're sending and
receiving this hypertext--

79
00:03:50,080 --> 00:03:52,660
these files we use for our web pages.

80
00:03:52,660 --> 00:03:55,480
And the protocol
involves some common set

81
00:03:55,480 --> 00:03:58,570
of rules we use to
communicate between computers,

82
00:03:58,570 --> 00:04:02,740
so similar to how humans have
languages, computers themselves also

83
00:04:02,740 --> 00:04:06,370
need some rules to follow when
they ask each other for information

84
00:04:06,370 --> 00:04:08,200
or, in this case some hypertext.

85
00:04:08,200 --> 00:04:10,990
So all you need to know
for now is that you end up

86
00:04:10,990 --> 00:04:14,260
using HTTP, hypertext
transfer protocol, when

87
00:04:14,260 --> 00:04:17,890
you go to request a website
from a computer or some server

88
00:04:17,890 --> 00:04:19,010
out there on the internet.

89
00:04:19,010 --> 00:04:22,780
And for example, let's say you go
to our very own web page here using

90
00:04:22,780 --> 00:04:28,610
this URL, cs50.harvard.edu, and in front
of that you prefix it with prefix it

91
00:04:28,610 --> 00:04:33,400
with http colon slash slash, meaning
you want to use the hypertext transfer

92
00:04:33,400 --> 00:04:36,700
protocol to access whatever
files are at cs50harvard.edu.

93
00:04:36,700 --> 00:04:41,890
This is specifying how you want to
ask our servers for some information

94
00:04:41,890 --> 00:04:45,230
that we have on maybe the
course website, for example.

95
00:04:45,230 --> 00:04:49,960
So this is the thing we'll dive into
briefly here-- hypertext transfer

96
00:04:49,960 --> 00:04:51,280
protocol or HTTP.

97
00:04:51,280 --> 00:04:55,300
And the key thing to know
right now is that for HTTP, you

98
00:04:55,300 --> 00:04:57,172
have maybe two computers
a bit like this,

99
00:04:57,172 --> 00:04:59,380
where your computer's on
the right and maybe a server

100
00:04:59,380 --> 00:05:00,580
is on the left hand side.

101
00:05:00,580 --> 00:05:03,190
And you want to request some web page.

102
00:05:03,190 --> 00:05:04,510
So you go to some URL.

103
00:05:04,510 --> 00:05:07,330
And as we saw in lecture,
you might make a request

104
00:05:07,330 --> 00:05:12,430
by sending some data to a server, and
that request is formatted in a way

105
00:05:12,430 --> 00:05:15,490
that the server knows what
to expect because of HTTP.

106
00:05:15,490 --> 00:05:18,760
HTTP has specified how I
should make this request.

107
00:05:18,760 --> 00:05:21,880
And then by convention,
this server responds

108
00:05:21,880 --> 00:05:25,750
with some code that says,
OK, maybe everything went OK.

109
00:05:25,750 --> 00:05:29,680
And by convention, again, 200 tends
to mean that everything went OK

110
00:05:29,680 --> 00:05:30,710
with this request.

111
00:05:30,710 --> 00:05:32,650
So it will give us back some data.

112
00:05:32,650 --> 00:05:35,380
And in this case, it will give
us that page you wanted to see.

113
00:05:35,380 --> 00:05:38,830
So perhaps the course's website over
here that we now have access to.

114
00:05:38,830 --> 00:05:42,610
It gave us that web page because
we asked for it using HTTP,

115
00:05:42,610 --> 00:05:45,130
and it knows how to respond,
again, because of the rules

116
00:05:45,130 --> 00:05:47,570
we defined with HTTP.

117
00:05:47,570 --> 00:05:50,290
So this is what happens
when everything goes right,

118
00:05:50,290 --> 00:05:52,900
but there are maybe some things
that could go wrong, right?

119
00:05:52,900 --> 00:05:56,230
And so let's think about
one maybe error code

120
00:05:56,230 --> 00:05:59,020
you've seen if something is not found.

121
00:05:59,020 --> 00:06:02,870
Have you ever asked for some web
page and found it is not found?

122
00:06:02,870 --> 00:06:04,120
So I'm seeing 404.

123
00:06:04,120 --> 00:06:08,150
And this is some-- again, a
convention in HTTP is to so say,

124
00:06:08,150 --> 00:06:10,600
OK, well, here is some
code we can give you to let

125
00:06:10,600 --> 00:06:12,500
you know that something is not found.

126
00:06:12,500 --> 00:06:13,640
So let's try this again.

127
00:06:13,640 --> 00:06:17,290
And maybe we try to get access to
some page that actually isn't there.

128
00:06:17,290 --> 00:06:18,880
Maybe we have a wrong URL.

129
00:06:18,880 --> 00:06:21,370
So maybe that convention
make this HTTP request.

130
00:06:21,370 --> 00:06:23,930
And the server then responds
by saying, oh, I don't have it.

131
00:06:23,930 --> 00:06:25,030
That's a 404.

132
00:06:25,030 --> 00:06:29,270
I'll instead give you back some
page noting that this is not found

133
00:06:29,270 --> 00:06:31,690
so you know what's going on.

134
00:06:31,690 --> 00:06:34,450
Now there are still other
errors that could happen,

135
00:06:34,450 --> 00:06:37,840
and maybe you'll see this not this
week or maybe not even next week,

136
00:06:37,840 --> 00:06:41,090
but later on as you build
your own websites with Python

137
00:06:41,090 --> 00:06:45,725
and so on, maybe this 500 error code,
which means an internal server error.

138
00:06:45,725 --> 00:06:48,850
So it might have something like this,
where I ask for a different web page.

139
00:06:48,850 --> 00:06:51,250
And maybe at this
point, the server itself

140
00:06:51,250 --> 00:06:55,360
runs into a problem, which means that
somewhere in the computer's programming

141
00:06:55,360 --> 00:06:57,640
language on that server,
an error has happened

142
00:06:57,640 --> 00:07:00,795
and it can't complete the request
I asked for, in which case,

143
00:07:00,795 --> 00:07:02,920
it will give me back
convention this 500 error code

144
00:07:02,920 --> 00:07:06,380
and give me back a page saying that
look, something went wrong in here.

145
00:07:06,380 --> 00:07:08,510
I can't give you what you want.

146
00:07:08,510 --> 00:07:11,950
So all you need to know for
now is that, again, HTTP

147
00:07:11,950 --> 00:07:15,670
is this way of requesting
hypertext, some pages on a website

148
00:07:15,670 --> 00:07:18,020
that you can then view on your computer.

149
00:07:18,020 --> 00:07:20,650
And there are some conventions
we have for the kinds of status

150
00:07:20,650 --> 00:07:23,030
codes we give to back to
you as a computer that

151
00:07:23,030 --> 00:07:26,920
are making the request so you
know what is going on in the end.

152
00:07:26,920 --> 00:07:29,860
Now let's actually build
our own server here.

153
00:07:29,860 --> 00:07:33,850
We can do that in VS coding code
spaces using this command right here.

154
00:07:33,850 --> 00:07:35,810
Http dash server.

155
00:07:35,810 --> 00:07:37,070
And we saw this in lecture.

156
00:07:37,070 --> 00:07:39,850
So what I'll do is go to my
own code space over here.

157
00:07:39,850 --> 00:07:44,980
And I have at my fingertips some
HTML file called scoreboard.html.

158
00:07:44,980 --> 00:07:46,970
And this is on my code space.

159
00:07:46,970 --> 00:07:50,860
But if I wanted to turn my
code space into a server

160
00:07:50,860 --> 00:07:54,070
I could make this request
to, well, I could simply

161
00:07:54,070 --> 00:08:00,190
zoom in a bit here and type http
dash server, and I'll hit Enter.

162
00:08:00,190 --> 00:08:02,530
And now as again we
saw in lecture, I will

163
00:08:02,530 --> 00:08:07,060
see that I have this URL that I
can click on, I'll open this URL.

164
00:08:07,060 --> 00:08:11,530
And now I'm using my VS code, my
code space, as its very own server.

165
00:08:11,530 --> 00:08:14,560
I can now make a request
to it to ask for some files

166
00:08:14,560 --> 00:08:16,270
that it has inside of it.

167
00:08:16,270 --> 00:08:19,292
And here I can see I have
my scoreboard.html file,

168
00:08:19,292 --> 00:08:21,250
so I could click on that
and request that file.

169
00:08:21,250 --> 00:08:27,450
And I do see this text rendered for
me from the HTML now on this web page

170
00:08:27,450 --> 00:08:27,950
here.

171
00:08:27,950 --> 00:08:30,970
So I've made this HTTP request
to my own code space now

172
00:08:30,970 --> 00:08:34,820
and it's giving me back some
file that I've requested here.

173
00:08:34,820 --> 00:08:37,120
So what questions do you have so far?

174
00:08:37,120 --> 00:08:40,760
We'll dive into the HTML, we'll
dive into CSS and so on later on.

175
00:08:40,760 --> 00:08:45,280
But for HTTP, what questions
do you have so far?

176
00:08:45,280 --> 00:08:47,790
What wonderings did you
have from lecture this week?

177
00:08:47,790 --> 00:08:57,280


178
00:08:57,280 --> 00:08:57,780
Right.

179
00:08:57,780 --> 00:09:01,050
So not seeing too many
questions right now.

180
00:09:01,050 --> 00:09:03,360
I'm seeing what does the
plus one do actually.

181
00:09:03,360 --> 00:09:05,040
So we'll get into this in a little bit.

182
00:09:05,040 --> 00:09:08,790
But I hit plus one, notice how I
can keep track of maybe two teams

183
00:09:08,790 --> 00:09:10,383
scores here.

184
00:09:10,383 --> 00:09:11,300
So this is of 80 here.

185
00:09:11,300 --> 00:09:16,440
So we have a scoreboard, we're
keeping track of two teams together.

186
00:09:16,440 --> 00:09:17,650
All right.

187
00:09:17,650 --> 00:09:20,440
So what we'll do is just refresh
this page, reset it to zero.

188
00:09:20,440 --> 00:09:22,742
And we'll go back to our HTML over here.

189
00:09:22,742 --> 00:09:25,450
I can see the request I'm making
on my server at my terminal now.

190
00:09:25,450 --> 00:09:28,820
But let's actually dive into the
HTML that we're going to see.

191
00:09:28,820 --> 00:09:32,200
So I'll maybe stop my server
with Control C. And I'll go ahead

192
00:09:32,200 --> 00:09:34,810
and code scoreboard.html.

193
00:09:34,810 --> 00:09:38,620
So here I see a lot of different
tags, these tags being something

194
00:09:38,620 --> 00:09:45,010
like this and this, and this
right here, called HTML tags.

195
00:09:45,010 --> 00:09:48,040
And it's worth actually taking
a moment to take a break

196
00:09:48,040 --> 00:09:50,493
and think about what are each
of these tags doing for us,

197
00:09:50,493 --> 00:09:52,910
and what is the structure of
this page going to look like?

198
00:09:52,910 --> 00:09:55,960
So let's dive into HTML
now and think about how

199
00:09:55,960 --> 00:09:58,300
it gives some structure to our website.

200
00:09:58,300 --> 00:10:01,280
So go back to our slides over here.

201
00:10:01,280 --> 00:10:05,680
And let's talk about HTML
which stands for what?

202
00:10:05,680 --> 00:10:08,525
What does HTML stand for?

203
00:10:08,525 --> 00:10:13,990


204
00:10:13,990 --> 00:10:16,930
So I'm seeing hypertext,
which is a familiar term now.

205
00:10:16,930 --> 00:10:18,130
Markup language.

206
00:10:18,130 --> 00:10:21,340
So hypertext you're familiar
with, but markup language

207
00:10:21,340 --> 00:10:25,240
is a way of specifying how
we're going to build our pages.

208
00:10:25,240 --> 00:10:28,790
What is the language we use to actually
give structure to our pages here?

209
00:10:28,790 --> 00:10:33,430
So when I think of HTML, you might
often think of something like this.

210
00:10:33,430 --> 00:10:36,910
Some code on the left hand
side is composed of these tags.

211
00:10:36,910 --> 00:10:41,660
We're going to tag is something
like that HTML in braces up above

212
00:10:41,660 --> 00:10:44,230
and that HTML in braces down below.

213
00:10:44,230 --> 00:10:47,780
So notice here, I have an
opening tag on that second line,

214
00:10:47,780 --> 00:10:51,520
that HTML, and a closing
tag on that very last line.

215
00:10:51,520 --> 00:10:55,740
And how would I know it's
a closing tag down below.

216
00:10:55,740 --> 00:10:56,475
Any ideas?

217
00:10:56,475 --> 00:10:59,090


218
00:10:59,090 --> 00:11:00,350
So I'm seeing the slash.

219
00:11:00,350 --> 00:11:05,030
So in HTML, by convention,
we tend to have our closing

220
00:11:05,030 --> 00:11:08,780
tags denoted by this slash over here.

221
00:11:08,780 --> 00:11:10,322
But what are these tags representing?

222
00:11:10,322 --> 00:11:12,822
We have all these tags, what
are they actually representing?

223
00:11:12,822 --> 00:11:15,780
Well, for HTML, we're trying to build
up the structure of our website.

224
00:11:15,780 --> 00:11:19,460
And this very basic HTML
page with no other elements

225
00:11:19,460 --> 00:11:21,810
might look a bit like this
on the right hand side.

226
00:11:21,810 --> 00:11:26,250
So we have some document element
that is encasing everything else.

227
00:11:26,250 --> 00:11:28,940
This is like the highest
element, the very first element,

228
00:11:28,940 --> 00:11:31,370
the very basic one on our page.

229
00:11:31,370 --> 00:11:35,180
And then inside of that,
we have this HTML element

230
00:11:35,180 --> 00:11:39,710
that is denoted by this HTML
tag, opening and closing.

231
00:11:39,710 --> 00:11:42,530
So this open tag and
this closing tag together

232
00:11:42,530 --> 00:11:45,140
constitute this HTML
element that is going

233
00:11:45,140 --> 00:11:49,170
to hold all of our different
elements will build into our site.

234
00:11:49,170 --> 00:11:52,070
So let's say we added
more tags to our code.

235
00:11:52,070 --> 00:11:56,210
Let's say I added two of them
like head, opening and closing,

236
00:11:56,210 --> 00:11:58,670
and body, opening and closing.

237
00:11:58,670 --> 00:12:01,560
So this would look like on
our page something like this.

238
00:12:01,560 --> 00:12:05,120
I would see, as children
of my HTML element,

239
00:12:05,120 --> 00:12:09,980
I now have this head
element right over here.

240
00:12:09,980 --> 00:12:12,070
And now this body element.

241
00:12:12,070 --> 00:12:14,470
And notice how I'm giving
some structure to my page.

242
00:12:14,470 --> 00:12:16,910
Previously, it was
just a single element,

243
00:12:16,910 --> 00:12:19,750
but now I have two different
elements that kind of

244
00:12:19,750 --> 00:12:25,180
correspond or are underneath or
children to this HTML element here.

245
00:12:25,180 --> 00:12:27,400
And now what if I wanted
to add some more tags?

246
00:12:27,400 --> 00:12:29,170
Well, I could maybe add this one--

247
00:12:29,170 --> 00:12:31,060
title, opening and closing.

248
00:12:31,060 --> 00:12:33,580
And then some text down
below, like hello body.

249
00:12:33,580 --> 00:12:36,940
And just be clear, that text,
hello body, is not so much a tag

250
00:12:36,940 --> 00:12:40,750
as it is just some text, whereas
the title and the slash title

251
00:12:40,750 --> 00:12:44,380
inside of those braces there,
the greater than, less than sign,

252
00:12:44,380 --> 00:12:46,270
those there are tags.

253
00:12:46,270 --> 00:12:48,040
So what do you think
is going to happen--

254
00:12:48,040 --> 00:12:52,210
or how is our picture going to
change on the right hand side now?

255
00:12:52,210 --> 00:12:57,220
What do you think we'll see if we try to
render this in our tree-like structure

256
00:12:57,220 --> 00:12:59,682
on the right hand side?

257
00:12:59,682 --> 00:13:01,390
Maybe in the chat,
feel free to chime in.

258
00:13:01,390 --> 00:13:05,070


259
00:13:05,070 --> 00:13:06,660
We have these new tags.

260
00:13:06,660 --> 00:13:08,480
Title.

261
00:13:08,480 --> 00:13:09,905
I have some text, hello body.

262
00:13:09,905 --> 00:13:12,610


263
00:13:12,610 --> 00:13:14,740
So I'm seeing, we're
going to add a child title

264
00:13:14,740 --> 00:13:16,970
to head, which is a good instinct here.

265
00:13:16,970 --> 00:13:21,280
So what we'll see is if I go back
to this visual, underneath head,

266
00:13:21,280 --> 00:13:25,183
we'll now have this child
called the title element, right?

267
00:13:25,183 --> 00:13:27,100
Because again, it's
inside of the head element

268
00:13:27,100 --> 00:13:31,750
because notice how the title tags are
all encased inside of the head tags.

269
00:13:31,750 --> 00:13:34,510
That means title is a child of head.

270
00:13:34,510 --> 00:13:37,720
And now underneath body,
we'll see that the hello body

271
00:13:37,720 --> 00:13:41,455
text shows up inside of our tree.

272
00:13:41,455 --> 00:13:43,830
And to go even further, we
could add some more text here.

273
00:13:43,830 --> 00:13:47,700
We could say maybe as a child of title,
let's go ahead and have this text,

274
00:13:47,700 --> 00:13:48,810
hello title.

275
00:13:48,810 --> 00:13:51,188
So now we see down below hello title.

276
00:13:51,188 --> 00:13:53,230
And this is an example of
what we saw in lecture,

277
00:13:53,230 --> 00:13:56,230
but now just visualize for
us on the right hand side.

278
00:13:56,230 --> 00:13:58,620
So when you think of HTML,
you should often think of it

279
00:13:58,620 --> 00:14:00,600
as designing this tree structure.

280
00:14:00,600 --> 00:14:04,050
And this structure has a name
called the document object

281
00:14:04,050 --> 00:14:06,940
model or the D-O-M, the DOM for short.

282
00:14:06,940 --> 00:14:10,212
And this will help you see the
structure of your web page here.

283
00:14:10,212 --> 00:14:11,670
So what if we made this change now.

284
00:14:11,670 --> 00:14:13,170
What if we said something like this.

285
00:14:13,170 --> 00:14:19,470
We said, OK, I want to put hello body
in a paragraph tag, opening and closing.

286
00:14:19,470 --> 00:14:23,833
What would change now
underneath body, do you think?

287
00:14:23,833 --> 00:14:24,750
What would we see now?

288
00:14:24,750 --> 00:14:31,170


289
00:14:31,170 --> 00:14:35,280
Adding another node or
adding another element.

290
00:14:35,280 --> 00:14:38,680
The paragraph tag will be a child
of bodies is what I'm seeing,

291
00:14:38,680 --> 00:14:39,420
which is correct.

292
00:14:39,420 --> 00:14:41,580
Here we're going to make
a new paragraph element--

293
00:14:41,580 --> 00:14:44,942
keep in mind, the tags are
just the opening and closing

294
00:14:44,942 --> 00:14:47,400
tags on the left hand side,
where we actually type in code.

295
00:14:47,400 --> 00:14:51,640
The element is actually what we see
in the DOM, dominant object model

296
00:14:51,640 --> 00:14:52,140
here now.

297
00:14:52,140 --> 00:14:53,490
So p will be there.

298
00:14:53,490 --> 00:14:57,330
As a child will then have, of
course, hello body underneath.

299
00:14:57,330 --> 00:15:02,170
So now we've kind of made more
children on our page here.

300
00:15:02,170 --> 00:15:06,390
So this is some structure
of a basic, basic web page.

301
00:15:06,390 --> 00:15:09,430
But we have a more complicated
one actually in our code.

302
00:15:09,430 --> 00:15:13,360
So let's now, with this in mind,
dive into our scoreboard.html file.

303
00:15:13,360 --> 00:15:15,450
So if I'll go back to
my code space here.

304
00:15:15,450 --> 00:15:18,870
I can see, well, I have a
few different elements here.

305
00:15:18,870 --> 00:15:21,660
I have some familiar
ones like the HTML tag

306
00:15:21,660 --> 00:15:25,530
up top and the closing
HTML tag down below.

307
00:15:25,530 --> 00:15:29,730
I also have what appears to be a
head tag, which we've seen before,

308
00:15:29,730 --> 00:15:32,530
and a closing head tag.

309
00:15:32,530 --> 00:15:36,750
And inside of my head element,
opening and closing tag here,

310
00:15:36,750 --> 00:15:42,130
I have maybe a title
and some styles defined.

311
00:15:42,130 --> 00:15:44,760
So if we have this here,
we could say, OK, this

312
00:15:44,760 --> 00:15:46,600
is some metadata about our site.

313
00:15:46,600 --> 00:15:48,360
This is some information
that isn't really

314
00:15:48,360 --> 00:15:51,660
wanting to be displayed so much
on the actual web page itself,

315
00:15:51,660 --> 00:15:54,750
but is more going to define
some information about the site,

316
00:15:54,750 --> 00:15:59,600
like what is its title, and what are
the styles we're applying to it here.

317
00:15:59,600 --> 00:16:04,420
And then down below, not as a child
of head but just below the head,

318
00:16:04,420 --> 00:16:09,580
we have the body tag,
opening and closing.

319
00:16:09,580 --> 00:16:12,673
And then we have inside
of here a table, it seems.

320
00:16:12,673 --> 00:16:15,340
So we'll break this down in just
a minute and we'll see a visual

321
00:16:15,340 --> 00:16:18,048
for all of this, because it's
getting to be a lot right now here.

322
00:16:18,048 --> 00:16:20,260
But notice how we have
many different children now

323
00:16:20,260 --> 00:16:21,760
and many different tags in our page.

324
00:16:21,760 --> 00:16:23,427
So let's actually try to visualize this.

325
00:16:23,427 --> 00:16:25,030
We'll go back to our slides here.

326
00:16:25,030 --> 00:16:27,640
And we will think about this.

327
00:16:27,640 --> 00:16:31,468
We'll think about this tree
now for our current page.

328
00:16:31,468 --> 00:16:33,760
So notice how we're seeing
this very same elements now.

329
00:16:33,760 --> 00:16:37,330
We have that document and HTML
elements, we have the head and body.

330
00:16:37,330 --> 00:16:40,510
And in the head, we had our
title element, our style element.

331
00:16:40,510 --> 00:16:44,690
In body we had a table and some
script down at the bottom there.

332
00:16:44,690 --> 00:16:47,500
So let's dive deeper into
the table tag, because that

333
00:16:47,500 --> 00:16:50,750
seems to be what's going to be
more interesting for us here.

334
00:16:50,750 --> 00:16:53,830
So in the table, we
have the table element,

335
00:16:53,830 --> 00:16:55,960
kind of like this
overarching element here.

336
00:16:55,960 --> 00:16:59,710
And inside of it, we
have some tr elements.

337
00:16:59,710 --> 00:17:02,810
And so does anyone know what
the tr is doing for us here?

338
00:17:02,810 --> 00:17:05,335
Why do we have these tr elements?

339
00:17:05,335 --> 00:17:08,619


340
00:17:08,619 --> 00:17:09,960
So yeah, you get table rows.

341
00:17:09,960 --> 00:17:12,690
So how many rows do you
think this table will have?

342
00:17:12,690 --> 00:17:15,161
And we've seen it before,
but based on HTML,

343
00:17:15,161 --> 00:17:16,619
how many rows you think it'll have?

344
00:17:16,619 --> 00:17:22,329
Three rows, right, because there are
three child tr elements for this table.

345
00:17:22,329 --> 00:17:24,540
So we'll have a table with three rows.

346
00:17:24,540 --> 00:17:29,130
And then each of those table
rows has two td elements

347
00:17:29,130 --> 00:17:30,970
as children to that one.

348
00:17:30,970 --> 00:17:35,070
So how many columns do you
think we'll have in this case,

349
00:17:35,070 --> 00:17:39,240
if td stands for table
data, and kind of divides

350
00:17:39,240 --> 00:17:43,050
our row into individual columns, how
many columns will we have overall?

351
00:17:43,050 --> 00:17:46,320


352
00:17:46,320 --> 00:17:51,060
I'm seeing six, which is
maybe slightly correct.

353
00:17:51,060 --> 00:17:53,965
What we're going to have is six cells.

354
00:17:53,965 --> 00:17:54,840
But how many columns?

355
00:17:54,840 --> 00:17:55,770
Two columns, right.

356
00:17:55,770 --> 00:17:59,220
Notice how every row has two columns--

357
00:17:59,220 --> 00:18:01,113
really, every row has two cells.

358
00:18:01,113 --> 00:18:03,030
And if every row has two
cells, we effectively

359
00:18:03,030 --> 00:18:05,702
have two columns in the end.

360
00:18:05,702 --> 00:18:08,910
And inside of each of these cells down
below, we see some text like team one,

361
00:18:08,910 --> 00:18:10,440
team two, 00.

362
00:18:10,440 --> 00:18:13,890
And over here we have plus
one and plus one inside

363
00:18:13,890 --> 00:18:15,820
of a button that we can see on our page.

364
00:18:15,820 --> 00:18:18,810
So let's visualize this in terms of
the tree structure we saw earlier.

365
00:18:18,810 --> 00:18:22,570
What if we change this and we said,
let's visualize this top to bottom.

366
00:18:22,570 --> 00:18:26,100
Well, we have some table
and we had our three rows.

367
00:18:26,100 --> 00:18:28,870
This would look a bit like this,
if we just highlighted these,

368
00:18:28,870 --> 00:18:32,490
and visualize those three
rows to our table now.

369
00:18:32,490 --> 00:18:36,970
And now every row will have
two cells inside of it,

370
00:18:36,970 --> 00:18:39,750
which means that our table
will look a bit like this.

371
00:18:39,750 --> 00:18:41,040
Two cells inside of it.

372
00:18:41,040 --> 00:18:45,150
On the right hand side, we
see two columns, overall.

373
00:18:45,150 --> 00:18:48,300
And then inside of each
of these cells, let's say

374
00:18:48,300 --> 00:18:50,190
we wanted to add some
text or some buttons.

375
00:18:50,190 --> 00:18:53,250
Well, we could do that with
these elements down below.

376
00:18:53,250 --> 00:18:55,800
And these will be inserted
into our new cells

377
00:18:55,800 --> 00:18:57,680
because they are
children of those cells.

378
00:18:57,680 --> 00:18:59,430
So we could say something
like this, where

379
00:18:59,430 --> 00:19:03,698
you now have team one, square
of zero, to the square of zero,

380
00:19:03,698 --> 00:19:05,490
and I have those buttons
that say plus one.

381
00:19:05,490 --> 00:19:09,310
We're going to add a score
to either team in this case.

382
00:19:09,310 --> 00:19:13,860
So what questions are there
on this structure so far?

383
00:19:13,860 --> 00:19:16,540


384
00:19:16,540 --> 00:19:19,000
All we're doing is defining
a basic table layout,

385
00:19:19,000 --> 00:19:20,365
but it's not very pretty yet.

386
00:19:20,365 --> 00:19:23,600


387
00:19:23,600 --> 00:19:24,560
Any questions so far?

388
00:19:24,560 --> 00:19:31,060


389
00:19:31,060 --> 00:19:33,780
So we'll keep going here with HTML.

390
00:19:33,780 --> 00:19:38,340
And our next task will be to try to add
some more elements to our scoreboard.

391
00:19:38,340 --> 00:19:43,560
So the goal here is to add maybe an
h1 element, a p element, maybe a main

392
00:19:43,560 --> 00:19:45,900
and a header element, a ul and an li.

393
00:19:45,900 --> 00:19:49,350
So what we could do is we can
go maybe back to our code space

394
00:19:49,350 --> 00:19:52,360
now and try to add in
some of these elements.

395
00:19:52,360 --> 00:19:56,580
So notice how in my head tag,
my head element up above,

396
00:19:56,580 --> 00:19:58,440
I have some metadata about the site.

397
00:19:58,440 --> 00:20:01,060
I have a title, the styles and so on.

398
00:20:01,060 --> 00:20:05,490
It would really not be good for me to
go ahead and try to add this kind of tag

399
00:20:05,490 --> 00:20:06,330
to my header.

400
00:20:06,330 --> 00:20:11,980
Maybe I say this is a Duke
versus UNC basketball game here.

401
00:20:11,980 --> 00:20:15,470
If you're familiar with
the two collegiate rivals.

402
00:20:15,470 --> 00:20:17,510
Duke versus UNC basketball game.

403
00:20:17,510 --> 00:20:20,870
This would really not be a good
place to put this header here

404
00:20:20,870 --> 00:20:23,810
because it's some content
that I want the user to see.

405
00:20:23,810 --> 00:20:28,220
They would see this content, but because
it's a content I want the user to see,

406
00:20:28,220 --> 00:20:34,200
I should more aptly put this inside my
body tag here, maybe above my table.

407
00:20:34,200 --> 00:20:38,270
Structurally, I want this to show
up first before I show my table.

408
00:20:38,270 --> 00:20:42,410
And then underneath, I can maybe
add this p tag for a paragraph,

409
00:20:42,410 --> 00:20:48,680
to say that I want to tell the
user to click the buttons to add

410
00:20:48,680 --> 00:20:51,110
a point to each team--

411
00:20:51,110 --> 00:20:53,520
to each team, in this case.

412
00:20:53,520 --> 00:20:55,250
And now what I can do
with these elements

413
00:20:55,250 --> 00:20:59,400
added, well, I can go to my terminal
and I could run my server again.

414
00:20:59,400 --> 00:21:02,570
I could say HTTP dash server.

415
00:21:02,570 --> 00:21:04,050
Hit Enter.

416
00:21:04,050 --> 00:21:05,700
Wait for it to load.

417
00:21:05,700 --> 00:21:07,830
And now I'll click on this URL.

418
00:21:07,830 --> 00:21:13,080
And I should see, hopefully, that
I do have this text on my page.

419
00:21:13,080 --> 00:21:15,660
Notice how H1 showed up first.

420
00:21:15,660 --> 00:21:19,320
It's the very first thing in my
body, followed by the p tag--

421
00:21:19,320 --> 00:21:22,270
click the buttons to add
a point to each team.

422
00:21:22,270 --> 00:21:25,870
And finally underneath,
I have my table here.

423
00:21:25,870 --> 00:21:28,855
So with this in mind, we're kind of
building a structure for our site.

424
00:21:28,855 --> 00:21:31,230
Well, let's go ahead and try
to add some other tags, too.

425
00:21:31,230 --> 00:21:33,840
What if we try to add this main tag?

426
00:21:33,840 --> 00:21:35,280
So I'll try this one.

427
00:21:35,280 --> 00:21:37,290
I'll say main.

428
00:21:37,290 --> 00:21:40,800
And what if I added some text like--

429
00:21:40,800 --> 00:21:42,210
well, maybe not add text.

430
00:21:42,210 --> 00:21:44,550
I'll just put this kind of here.

431
00:21:44,550 --> 00:21:45,827
Main.

432
00:21:45,827 --> 00:21:47,910
And just see what if I can
see anything happening.

433
00:21:47,910 --> 00:21:49,570
I'll save my file.

434
00:21:49,570 --> 00:21:52,080
I'll go back over here
and I'll refresh my page.

435
00:21:52,080 --> 00:21:57,020
And I don't seem to see
anything different here.

436
00:21:57,020 --> 00:22:00,330
But why would that happen, do you think?

437
00:22:00,330 --> 00:22:05,600
I do have this new tag called
main, opening and closing.

438
00:22:05,600 --> 00:22:09,430
But why would I not see it on my page?

439
00:22:09,430 --> 00:22:11,680
It's empty, which is fair.

440
00:22:11,680 --> 00:22:13,810
So let me go ahead
and try changing that.

441
00:22:13,810 --> 00:22:16,900
Instead of this, I'll make this
maybe the main part on page.

442
00:22:16,900 --> 00:22:19,412
Let's say I want this tech to
be the main part of the page.

443
00:22:19,412 --> 00:22:22,120
I want to tell the user that they
should click the buttons to add

444
00:22:22,120 --> 00:22:23,635
a point to each team.

445
00:22:23,635 --> 00:22:26,820
OK, I'll refresh the page now.

446
00:22:26,820 --> 00:22:29,610
And it looks slightly different,
like the table moved up,

447
00:22:29,610 --> 00:22:32,940
but it's not really
changing how the text looks.

448
00:22:32,940 --> 00:22:35,470
So what's the point of main?

449
00:22:35,470 --> 00:22:38,170
Does anyone want to hazard
a guess in the chat?

450
00:22:38,170 --> 00:22:45,410


451
00:22:45,410 --> 00:22:49,870
Yes, so I'm seeing some folks talk
about semanticness or sectioning.

452
00:22:49,870 --> 00:22:51,500
And it's actually a good idea.

453
00:22:51,500 --> 00:22:58,540
So here, notice how if I have the p
tag and the h1, I refresh the page,

454
00:22:58,540 --> 00:23:00,430
these show up pretty differently.

455
00:23:00,430 --> 00:23:05,650
I see h1 in huge text and I
see p in much smaller text.

456
00:23:05,650 --> 00:23:09,310
Now main, though, didn't seem
to have much of an effect, here.

457
00:23:09,310 --> 00:23:11,800
And that's because what
main is doing is not

458
00:23:11,800 --> 00:23:15,010
so much visual as it is more semantic.

459
00:23:15,010 --> 00:23:18,410
And by semantic, we mean it's
changing the structure-- or really not

460
00:23:18,410 --> 00:23:18,910
structure.

461
00:23:18,910 --> 00:23:23,090
It's changing the importance of
certain sections of our pages.

462
00:23:23,090 --> 00:23:25,810
So if you look at a
search engine like Google,

463
00:23:25,810 --> 00:23:30,040
Google will look at all of your
HTML files, figure out how to index

464
00:23:30,040 --> 00:23:31,790
or show your site to others.

465
00:23:31,790 --> 00:23:36,585
And if I wanted to help Google figure
out what is the main part of my page,

466
00:23:36,585 --> 00:23:38,380
well, I could use this main tag.

467
00:23:38,380 --> 00:23:41,320
I could simply, maybe, encase this part.

468
00:23:41,320 --> 00:23:46,180
Like let's say not the title, but
really the paragraph here and the table

469
00:23:46,180 --> 00:23:46,960
itself.

470
00:23:46,960 --> 00:23:50,973
That's the main part of my page that I
want Google to really pay attention to.

471
00:23:50,973 --> 00:23:51,890
Well, I could do this.

472
00:23:51,890 --> 00:23:57,310
I could make sure that table
and p are children of main,

473
00:23:57,310 --> 00:24:00,670
thereby making sure
that Google knows, look,

474
00:24:00,670 --> 00:24:04,710
what comes after or is a child to
main is pretty important for my site.

475
00:24:04,710 --> 00:24:06,650
It is the main content that I have.

476
00:24:06,650 --> 00:24:10,060
If I refresh the page
here, nothing happens.

477
00:24:10,060 --> 00:24:11,040
It's all the same.

478
00:24:11,040 --> 00:24:14,260
But now if somebody were to read my
site, look at my HTML like Google,

479
00:24:14,260 --> 00:24:17,340
for example, they would be able to
see that this stuff down below is

480
00:24:17,340 --> 00:24:22,840
a little more important, helping
to section off this content here.

481
00:24:22,840 --> 00:24:24,920
I'm seeing a few questions here.

482
00:24:24,920 --> 00:24:29,918
So do you have any links or websites or
HTML tags or elements that we can use?

483
00:24:29,918 --> 00:24:30,460
So certainly.

484
00:24:30,460 --> 00:24:32,730
If you're looking at other
tags you might want to use

485
00:24:32,730 --> 00:24:35,230
or other elements you could
use, I'd encourage you to simply

486
00:24:35,230 --> 00:24:36,850
maybe Google for some of those.

487
00:24:36,850 --> 00:24:39,850
You could-- I know a
good resource is W3.

488
00:24:39,850 --> 00:24:45,860
You can say W3Schools HTML
tags reference, for example.

489
00:24:45,860 --> 00:24:47,540
And you could-- let me zoom in a bit.

490
00:24:47,540 --> 00:24:50,260
Click on this one right here.

491
00:24:50,260 --> 00:24:54,040
And here we have all the HTML
tags ordered, alphabetically.

492
00:24:54,040 --> 00:24:59,790
So these are all HTML tags you can
use to create elements of your site.

493
00:24:59,790 --> 00:25:04,160
So feel free to look up that on
Google if you'd like to figure out

494
00:25:04,160 --> 00:25:06,305
a reference for all of your tables.

495
00:25:06,305 --> 00:25:09,160


496
00:25:09,160 --> 00:25:10,270
All right.

497
00:25:10,270 --> 00:25:14,470
So again, there's a difference
between these more visual tags

498
00:25:14,470 --> 00:25:19,390
like this h1, and these more semantic
tags, like main, for example.

499
00:25:19,390 --> 00:25:24,040
Other questions here, too, on
these tags, these elements?

500
00:25:24,040 --> 00:25:28,150
A question on whether main helps for
accessibility like screen readers.

501
00:25:28,150 --> 00:25:28,752
It can.

502
00:25:28,752 --> 00:25:30,460
So if you have a screen
reader, something

503
00:25:30,460 --> 00:25:34,690
is trying to read your site for somebody
who's using a computer, often having

504
00:25:34,690 --> 00:25:37,607
these more semantic tags is helpful
because you can tell somebody what

505
00:25:37,607 --> 00:25:40,607
is the main content of your page,
what should the screen reader actually

506
00:25:40,607 --> 00:25:41,440
focus on reading?

507
00:25:41,440 --> 00:25:45,250
Maybe I don't want it to read
everything, like not the title so much.

508
00:25:45,250 --> 00:25:47,420
Maybe I just want it to
read this text down here.

509
00:25:47,420 --> 00:25:49,587
So by delineating this, I
can tell the screen reader

510
00:25:49,587 --> 00:25:53,037
what I want it to focus on as
somebody else looks at my site.

511
00:25:53,037 --> 00:25:53,620
Good question.

512
00:25:53,620 --> 00:25:58,243


513
00:25:58,243 --> 00:26:00,642
I see a question also
on interactive buttons,

514
00:26:00,642 --> 00:26:02,100
how do we make interactive buttons.

515
00:26:02,100 --> 00:26:04,475
We'll get to that in just a
minute using some JavaScript.

516
00:26:04,475 --> 00:26:06,450
But as a sneak peek
down below, we'll see

517
00:26:06,450 --> 00:26:10,747
we have our buttons defined down
here and we have some JavaScript

518
00:26:10,747 --> 00:26:12,330
down below to help those buttons work.

519
00:26:12,330 --> 00:26:14,850
We'll get to that in just a little bit.

520
00:26:14,850 --> 00:26:19,970
So what questions are there
now on HTML tags or elements?

521
00:26:19,970 --> 00:26:24,118


522
00:26:24,118 --> 00:26:26,720
OK, not seeing too many.

523
00:26:26,720 --> 00:26:29,780
What our website looks like
right now is not super pretty.

524
00:26:29,780 --> 00:26:32,900
Like, it just has this big h1,
this paragraph text right in it.

525
00:26:32,900 --> 00:26:35,300
And that's OK, but we could
probably do a little better.

526
00:26:35,300 --> 00:26:37,850
You can really make the site look
a little more clean, a little more

527
00:26:37,850 --> 00:26:38,700
aesthetic and so on.

528
00:26:38,700 --> 00:26:40,710
That's where CSS comes in.

529
00:26:40,710 --> 00:26:43,220
So let's dive into CSS now.

530
00:26:43,220 --> 00:26:46,460
And let's try thinking
about how we could use this.

531
00:26:46,460 --> 00:26:50,930
But first, what does CSS stand for?

532
00:26:50,930 --> 00:26:54,095
What are we going to do with
CSS and what does it stand for?

533
00:26:54,095 --> 00:26:57,290


534
00:26:57,290 --> 00:26:59,420
So a cascading stylesheet, right.

535
00:26:59,420 --> 00:27:02,300
So CSS stands for Cascading Style Sheet.

536
00:27:02,300 --> 00:27:04,850
And now the style sheet probably
is kind of self-explanatory,

537
00:27:04,850 --> 00:27:07,880
meaning that we're going to
apply some styles to our site.

538
00:27:07,880 --> 00:27:09,870
It's a sheet of styles to apply.

539
00:27:09,870 --> 00:27:12,350
But what does the cascading part mean?

540
00:27:12,350 --> 00:27:16,160
Does anyone know?

541
00:27:16,160 --> 00:27:18,110
What is the C in CSS?

542
00:27:18,110 --> 00:27:21,160


543
00:27:21,160 --> 00:27:23,080
So I'm seeing inheritance, nice.

544
00:27:23,080 --> 00:27:27,680
So if we looked at our visual,
for example, of our table,

545
00:27:27,680 --> 00:27:30,310
notice how it kind of
looks a bit like a tree,

546
00:27:30,310 --> 00:27:35,630
and we had this vocabulary of
children of certain elements here.

547
00:27:35,630 --> 00:27:37,690
So button is a child of td.

548
00:27:37,690 --> 00:27:41,440
Well, if I applied
some style to td, well,

549
00:27:41,440 --> 00:27:44,870
that style might also apply to
some of the children of that node.

550
00:27:44,870 --> 00:27:49,660
So it helps to show that this style,
it kind of follows the inheritance

551
00:27:49,660 --> 00:27:52,780
principle would mean that children
the same styles or similar styles

552
00:27:52,780 --> 00:27:56,790
as their parents at least sometimes.

553
00:27:56,790 --> 00:27:58,060
OK.

554
00:27:58,060 --> 00:27:59,860
So let's explore CSS now.

555
00:27:59,860 --> 00:28:03,520
And when we're talking about CSS, we
often talk about this kind of syntax

556
00:28:03,520 --> 00:28:04,670
on the left hand side.

557
00:28:04,670 --> 00:28:07,450
We have our structure
already for us, but now I

558
00:28:07,450 --> 00:28:09,670
want to apply some style to it.

559
00:28:09,670 --> 00:28:12,940
So we can often do this using the
syntax on the left hand side here.

560
00:28:12,940 --> 00:28:16,870
We have a selector to determine
what element in our DOM

561
00:28:16,870 --> 00:28:21,700
or in our website you want to
select, and then what property

562
00:28:21,700 --> 00:28:22,630
do you want to change?

563
00:28:22,630 --> 00:28:25,480
Meaning what kind of style
you want to add, and then

564
00:28:25,480 --> 00:28:27,130
what value should that property have?

565
00:28:27,130 --> 00:28:29,450
So for example, let's
take a look at this.

566
00:28:29,450 --> 00:28:32,620
Let's say I want to select
all the buttons on my page.

567
00:28:32,620 --> 00:28:34,160
I could do it like this.

568
00:28:34,160 --> 00:28:37,390
I could say, select me
all the buttons using just

569
00:28:37,390 --> 00:28:39,220
that plain old button syntax up top.

570
00:28:39,220 --> 00:28:42,940
And change their background color
using this property defined for us

571
00:28:42,940 --> 00:28:45,070
called background dash color to be red.

572
00:28:45,070 --> 00:28:48,350
And now I would see behind
me that my buttons are red.

573
00:28:48,350 --> 00:28:51,910
I could also add some more style
to that very same selector.

574
00:28:51,910 --> 00:28:55,450
I could, again, select all my buttons,
make the background color red,

575
00:28:55,450 --> 00:28:56,920
but also add some border.

576
00:28:56,920 --> 00:29:00,130
So a border is some
property in CSS you can use.

577
00:29:00,130 --> 00:29:03,460
And again, by convention,
we define the border

578
00:29:03,460 --> 00:29:09,230
using this syntax here-- maybe a 4pt
or a 4px, whatever system you're using.

579
00:29:09,230 --> 00:29:12,310
And then dash, to denote that
I want the border to be dash.

580
00:29:12,310 --> 00:29:14,442
We can also do solid if we'd like, too.

581
00:29:14,442 --> 00:29:16,150
So notice how my
buttons have changed now

582
00:29:16,150 --> 00:29:20,500
to be red, and also have this
kind of dash border around them.

583
00:29:20,500 --> 00:29:23,500
And if you're curious about all of
the different properties you can use,

584
00:29:23,500 --> 00:29:25,083
you could look up a similar reference.

585
00:29:25,083 --> 00:29:27,770
So I can go maybe to W3Schools again.

586
00:29:27,770 --> 00:29:31,570
I could search for not a
HTML tag reference, but also

587
00:29:31,570 --> 00:29:37,790
search for a CSS properties reference.

588
00:29:37,790 --> 00:29:40,780
Now I'll go down here, I see
CSS reference from W3 schools.

589
00:29:40,780 --> 00:29:41,720
I'll click on this.

590
00:29:41,720 --> 00:29:43,900
And now I see all of the
CSS properties I could

591
00:29:43,900 --> 00:29:46,450
use to add some styles to my code.

592
00:29:46,450 --> 00:29:51,700
For example, there is accent
color, animation, backdrop filter.

593
00:29:51,700 --> 00:29:54,590
There's so many CSS
properties you can use.

594
00:29:54,590 --> 00:29:57,390
And if you click on any one of
these, like background for example,

595
00:29:57,390 --> 00:29:59,140
you'll be able to see
some examples of how

596
00:29:59,140 --> 00:30:04,387
you might use that CSS property for
certain elements in your web page.

597
00:30:04,387 --> 00:30:06,970
So let's keep going with this
and look at a few different ways

598
00:30:06,970 --> 00:30:10,000
to change some of the
colors on our page.

599
00:30:10,000 --> 00:30:14,380
And maybe one thing we'll run
into is that we really want

600
00:30:14,380 --> 00:30:15,970
these buttons to be different colors.

601
00:30:15,970 --> 00:30:17,710
They're different teams, right?

602
00:30:17,710 --> 00:30:21,940
So how could I change the color
for these buttons, do you think?

603
00:30:21,940 --> 00:30:24,560
Feel free to type in the chat.

604
00:30:24,560 --> 00:30:26,435
How can I make the
buttons a different color?

605
00:30:26,435 --> 00:30:33,700


606
00:30:33,700 --> 00:30:36,340
So I'm seeing different kinds
of selectors or classes or IDs.

607
00:30:36,340 --> 00:30:38,890
So it's good that we have
some vocabulary here already.

608
00:30:38,890 --> 00:30:42,010
And let's focus first on
this vocabulary of an ID.

609
00:30:42,010 --> 00:30:47,380
So an ID in CSS is this idea that I'm
trying to select a particular element

610
00:30:47,380 --> 00:30:50,530
and I've given some
element in my HTML page

611
00:30:50,530 --> 00:30:54,070
a particular ID, some unique
ID I can refer to it with.

612
00:30:54,070 --> 00:30:59,020
So here, let's say I wanted to make the
colors different-- one red, one blue.

613
00:30:59,020 --> 00:31:02,560
Well, I can select different
buttons by their ID.

614
00:31:02,560 --> 00:31:05,350
And if I'm going to select
by ID, I need to use

615
00:31:05,350 --> 00:31:09,020
this hashtag before that selector
to say, I am selecting by ID.

616
00:31:09,020 --> 00:31:11,710
So I can do hashtag,
team one dash button,

617
00:31:11,710 --> 00:31:14,980
give me the selection for
a team one button there.

618
00:31:14,980 --> 00:31:17,005
And hashtag team two dash
button team to give me

619
00:31:17,005 --> 00:31:19,180
a selection for team two button.

620
00:31:19,180 --> 00:31:23,320
And this supposes-- it
presupposes that in our HTML page

621
00:31:23,320 --> 00:31:25,240
that do have some text like this.

622
00:31:25,240 --> 00:31:30,130
That the buttons do have an ID
attribute specified in the HTML.

623
00:31:30,130 --> 00:31:32,530
So on the left hand
side, we have our CSS.

624
00:31:32,530 --> 00:31:35,950
On this side, we have
our IDs and our HTML.

625
00:31:35,950 --> 00:31:39,580
And notice how every button
does have this ID defined for us

626
00:31:39,580 --> 00:31:41,980
where one is team one
button and the other

627
00:31:41,980 --> 00:31:47,230
is team two button, using the
ID equals and some certain text.

628
00:31:47,230 --> 00:31:49,210
So we can select by ID.

629
00:31:49,210 --> 00:31:52,870
We could also do what's called
a class selector so maybe

630
00:31:52,870 --> 00:31:54,520
the ID is good for this.

631
00:31:54,520 --> 00:31:57,160
But I wanted to change
just the header gray,

632
00:31:57,160 --> 00:32:01,720
I could select all the td's using
just that td selector and change

633
00:32:01,720 --> 00:32:04,030
the background color
to be gray, like this.

634
00:32:04,030 --> 00:32:05,530
But that's not quite what I want.

635
00:32:05,530 --> 00:32:11,200
I only wanted the top td's to be
actually a background color of gray.

636
00:32:11,200 --> 00:32:13,150
So I could apply a class.

637
00:32:13,150 --> 00:32:16,270
A class lets me apply
some element or some style

638
00:32:16,270 --> 00:32:19,813
to any elements that
have that same class.

639
00:32:19,813 --> 00:32:22,480
Notice how I'm not using the
hashtag anymore-- that was for IDs.

640
00:32:22,480 --> 00:32:26,680
I'm using the dot for classes, saying
that every element with the class title

641
00:32:26,680 --> 00:32:29,450
should get this style
of defined in here.

642
00:32:29,450 --> 00:32:33,160
So for example, if I look at my
HTML, I must have this defined now.

643
00:32:33,160 --> 00:32:37,450
I should make sure that every element
that I want to apply this style to

644
00:32:37,450 --> 00:32:41,850
has that same class on
the right hand side.

645
00:32:41,850 --> 00:32:49,182
So what questions are there
on these selectors or classes?

646
00:32:49,182 --> 00:32:50,390
I'm seeing one question here.

647
00:32:50,390 --> 00:32:54,800
So what would the perks be of using
classes over IDs and vise versa?

648
00:32:54,800 --> 00:32:58,030
So classes are good
when you want to define

649
00:32:58,030 --> 00:33:00,950
some style across multiple elements.

650
00:33:00,950 --> 00:33:05,110
So let's say I wanted to apply this
to two td's, but not the rest of them.

651
00:33:05,110 --> 00:33:07,160
A class would be great.

652
00:33:07,160 --> 00:33:10,960
But if I wanted to apply a style
to a particular element, only

653
00:33:10,960 --> 00:33:13,880
a single element, an ID
would be useful there.

654
00:33:13,880 --> 00:33:20,170
So classes can apply to multiple
elements, IDs apply to one element.

655
00:33:20,170 --> 00:33:24,070
And a question here, too, can
we use RGB codes in the CSS

656
00:33:24,070 --> 00:33:28,250
instead of using text like red or
blue or gray as I've shown here?

657
00:33:28,250 --> 00:33:29,350
So you absolutely can.

658
00:33:29,350 --> 00:33:32,857
In CSS, you're allowed to define
colors in a variety of ways.

659
00:33:32,857 --> 00:33:35,440
And let me actually try to do
the same thing in my code space.

660
00:33:35,440 --> 00:33:36,860
I'll go back over here.

661
00:33:36,860 --> 00:33:39,670
And let's say I wanted,
well, this button here

662
00:33:39,670 --> 00:33:44,930
to be a dark blue background, and this
one to be like a light blue background.

663
00:33:44,930 --> 00:33:49,450
So I can go up top here and I could
add some CSS in my style page up here.

664
00:33:49,450 --> 00:33:51,880
I have to add this to my style element.

665
00:33:51,880 --> 00:33:56,680
I'll say, let me select the
add one button using its ID.

666
00:33:56,680 --> 00:33:59,080
Hashtag add one.

667
00:33:59,080 --> 00:34:00,940
And then I'll go in and I'll say this.

668
00:34:00,940 --> 00:34:06,070
I'll say that I want the background
color to be, maybe in this case--

669
00:34:06,070 --> 00:34:08,630
I'll look up a different
actual hex code here.

670
00:34:08,630 --> 00:34:13,460
So I'll maybe look up
Duke University blue.

671
00:34:13,460 --> 00:34:15,949
And I'll go to the
colors brand guide here.

672
00:34:15,949 --> 00:34:21,409
I should go down below and I do see Duke
Navy blue, if you all can see it, too,

673
00:34:21,409 --> 00:34:24,980
is this hex code-- hashtag 012169.

674
00:34:24,980 --> 00:34:26,360
I'll copy and paste it.

675
00:34:26,360 --> 00:34:30,139
I'll go back to my scoreboard,
add this element here.

676
00:34:30,139 --> 00:34:34,739
And now if I refresh
the page, I should see--

677
00:34:34,739 --> 00:34:39,570
if it loads, a Navy blue
background in that same color.

678
00:34:39,570 --> 00:34:42,765
But maybe it's going to give
me a minute to load here.

679
00:34:42,765 --> 00:34:45,929


680
00:34:45,929 --> 00:34:47,820
OK, we'll wait for that to load.

681
00:34:47,820 --> 00:34:51,820
But in general, you can use this
kind of syntax here with hex codes,

682
00:34:51,820 --> 00:34:53,320
or you could do something like this.

683
00:34:53,320 --> 00:34:57,840
I could say RGB, and you could also
do some combination of RGB colors.

684
00:34:57,840 --> 00:35:03,510
I could say 128, 255, maybe
0 here to create some color.

685
00:35:03,510 --> 00:35:09,590
I don't need to just say
blue or light blue or so on.

686
00:35:09,590 --> 00:35:14,100
Let me go ahead and see some other ones.

687
00:35:14,100 --> 00:35:14,940
Question about IDs.

688
00:35:14,940 --> 00:35:16,420
Can they only be used once?

689
00:35:16,420 --> 00:35:17,160
So yes.

690
00:35:17,160 --> 00:35:20,580
The definition of an ID is
it can only be used once.

691
00:35:20,580 --> 00:35:26,640
If I go down below here, notice how
this button is labeled add one, right?

692
00:35:26,640 --> 00:35:31,410
I can't then apply this same ID to
this button down here, I'll add to.

693
00:35:31,410 --> 00:35:32,550
I can't do this.

694
00:35:32,550 --> 00:35:37,422
Each one has to have its own unique ID.

695
00:35:37,422 --> 00:35:39,130
Let me look at some
other questions here.

696
00:35:39,130 --> 00:35:43,860


697
00:35:43,860 --> 00:35:48,520
Wouldn't it be better to use a class
like blue button or red button?

698
00:35:48,520 --> 00:35:52,950
A class is great if you know you want
to have multiple red or blue buttons.

699
00:35:52,950 --> 00:35:57,300
If I wanted this to be not the
only button I have, but maybe

700
00:35:57,300 --> 00:35:59,670
multiple buttons that are
blue, a class would be great,

701
00:35:59,670 --> 00:36:01,378
because again, an ID
is a bit of a show--

702
00:36:01,378 --> 00:36:02,700
one element here.

703
00:36:02,700 --> 00:36:05,250


704
00:36:05,250 --> 00:36:08,470
Another question here,
does CSS only work in HTML?

705
00:36:08,470 --> 00:36:13,590
So here we're defining our CSS inside of
our HTML page using the style element,

706
00:36:13,590 --> 00:36:14,650
but we don't have to.

707
00:36:14,650 --> 00:36:24,000
We could define, if we wanted
to, our very own CSS file here.

708
00:36:24,000 --> 00:36:29,330
I could code maybe styles, styles.css.

709
00:36:29,330 --> 00:36:30,440
And I could add--

710
00:36:30,440 --> 00:36:33,140
I could simply just
take all of my styles

711
00:36:33,140 --> 00:36:38,950
here, copy and paste
them over to styles.css.

712
00:36:38,950 --> 00:36:41,710
And now I've separated
those styles away.

713
00:36:41,710 --> 00:36:46,420
I do have to be sure
though that in my HTML,

714
00:36:46,420 --> 00:36:51,250
I have a link element that
links in my styles.css.

715
00:36:51,250 --> 00:36:54,010
And you can look up how to link
in your stylesheet if you'd like,

716
00:36:54,010 --> 00:36:59,080
but here we'll focus for now just
on creating our styles inside

717
00:36:59,080 --> 00:37:00,625
of our HTML page itself.

718
00:37:00,625 --> 00:37:03,990


719
00:37:03,990 --> 00:37:06,060
OK, let's see if this might have loaded.

720
00:37:06,060 --> 00:37:08,655
I'll go back to what I had before.

721
00:37:08,655 --> 00:37:13,120


722
00:37:13,120 --> 00:37:14,680
OK, I'll save that.

723
00:37:14,680 --> 00:37:18,140
I'll go over here, hit refresh.

724
00:37:18,140 --> 00:37:21,470
And now I see that is
a dark blue button.

725
00:37:21,470 --> 00:37:24,500
And maybe I could, just for
consistency, look up UNC blue.

726
00:37:24,500 --> 00:37:29,040
I'll go ahead and over here
look up, UNC blue hex code.

727
00:37:29,040 --> 00:37:33,540
And it seems that it's
hashtag 7BAFD4, by chance.

728
00:37:33,540 --> 00:37:36,030
And I'll go ahead and say
for the add two button,

729
00:37:36,030 --> 00:37:39,260
let's make that background color this.

730
00:37:39,260 --> 00:37:42,560
I'll refresh the page again.

731
00:37:42,560 --> 00:37:46,930
And now I see that that has
that now, UNC blue color here.

732
00:37:46,930 --> 00:37:48,930
So other questions on this CSS?

733
00:37:48,930 --> 00:37:59,640


734
00:37:59,640 --> 00:38:03,080
So one final thing I'd like to
do is maybe try to make sure

735
00:38:03,080 --> 00:38:04,242
that my text is centered.

736
00:38:04,242 --> 00:38:06,950
This is a good use case for a
class, as you all have been saying.

737
00:38:06,950 --> 00:38:11,220
So maybe I want to say multiple elements
in my page, I want to be centered.

738
00:38:11,220 --> 00:38:15,240
So what I could do is I could
make a new class called centered.

739
00:38:15,240 --> 00:38:17,590
And I could say that a
property of this class

740
00:38:17,590 --> 00:38:21,470
is that the text alignment,
text align is centered.

741
00:38:21,470 --> 00:38:23,350
And if I looked up CSS
properties, I would

742
00:38:23,350 --> 00:38:26,980
know that text align line is a way
of aligning some text on the page.

743
00:38:26,980 --> 00:38:28,840
And center, if I give
it that value, will

744
00:38:28,840 --> 00:38:30,800
mean that my text will be centered.

745
00:38:30,800 --> 00:38:34,540
So now I can go to my h1 over
here and apply that class.

746
00:38:34,540 --> 00:38:37,930
I could say that the class
for this is centered,

747
00:38:37,930 --> 00:38:39,820
the same thing I have defined up here.

748
00:38:39,820 --> 00:38:42,580
Notice how I'm not using the
dot-- the dot is just for CSS.

749
00:38:42,580 --> 00:38:45,580
Select any element with this class.

750
00:38:45,580 --> 00:38:50,830
And in my p tag, my p element,
also say, this is centered, too.

751
00:38:50,830 --> 00:38:53,140
And now I can refresh the
page, and hopefully I'll

752
00:38:53,140 --> 00:38:55,585
see my text now centered on that page.

753
00:38:55,585 --> 00:38:58,710


754
00:38:58,710 --> 00:38:59,635
OK.

755
00:38:59,635 --> 00:39:01,260
Other questions here before we move on?

756
00:39:01,260 --> 00:39:08,088


757
00:39:08,088 --> 00:39:08,880
Ah, great question.

758
00:39:08,880 --> 00:39:10,500
Why not just make body centered?

759
00:39:10,500 --> 00:39:11,970
Oh, nice.

760
00:39:11,970 --> 00:39:13,822
So some design questions coming up here.

761
00:39:13,822 --> 00:39:15,780
If I want everything to
be centered in my body,

762
00:39:15,780 --> 00:39:17,350
why don't I just apply it higher up?

763
00:39:17,350 --> 00:39:21,220
I could say body as this class centered.

764
00:39:21,220 --> 00:39:25,360
And I could perhaps take it
off of h1 and take it off of p.

765
00:39:25,360 --> 00:39:28,090
I'll save my file, refresh
it, and see if that works.

766
00:39:28,090 --> 00:39:28,780
It does.

767
00:39:28,780 --> 00:39:31,760
And now I've used fewer
pieces of text on my page.

768
00:39:31,760 --> 00:39:34,660
I've also made it clear
that I want my entire body

769
00:39:34,660 --> 00:39:37,163
to have text that is centered.

770
00:39:37,163 --> 00:39:37,830
A great comment.

771
00:39:37,830 --> 00:39:43,570


772
00:39:43,570 --> 00:39:45,310
OK.

773
00:39:45,310 --> 00:39:49,310
So just to preempt some questions.

774
00:39:49,310 --> 00:39:52,240
One thing we wondered about before
was, how does this button work?

775
00:39:52,240 --> 00:39:55,090
I can click plus one
here and plus one here.

776
00:39:55,090 --> 00:39:59,830
And I see that I'm getting a different
number on the page for each team.

777
00:39:59,830 --> 00:40:03,430
But how could I try to get
a feel for how this works?

778
00:40:03,430 --> 00:40:06,490
Well, if I look at my
page, I'll go down below

779
00:40:06,490 --> 00:40:09,880
and I'll see that I have
this script tag here.

780
00:40:09,880 --> 00:40:13,300
Opening tag for script and
closing tag for script.

781
00:40:13,300 --> 00:40:15,250
And inside of this--

782
00:40:15,250 --> 00:40:20,920
inside of this, I have some
variables and a lot of text over here

783
00:40:20,920 --> 00:40:22,990
that might not make much
sense to us at first.

784
00:40:22,990 --> 00:40:24,820
And this is an example of JavaScript.

785
00:40:24,820 --> 00:40:27,490
So JavaScript is now
embedded in our page.

786
00:40:27,490 --> 00:40:31,690
And this text will run, top to bottom,
whenever our web page is loaded.

787
00:40:31,690 --> 00:40:37,150
So at the time that I refresh this page,
this script runs from top to bottom

788
00:40:37,150 --> 00:40:38,990
and it finishes, likely.

789
00:40:38,990 --> 00:40:41,485
So what I'll do is I'll try
to break this down for you

790
00:40:41,485 --> 00:40:44,110
and see if we can understand a
bit of what JavaScript is doing.

791
00:40:44,110 --> 00:40:46,540
It's a little bit different than you
might expect from a C code or Python

792
00:40:46,540 --> 00:40:48,400
code that you're used to so far.

793
00:40:48,400 --> 00:40:50,450
So we'll go back to
our slides over here.

794
00:40:50,450 --> 00:40:54,290
And we'll try to think about the way
that JavaScript is working for us.

795
00:40:54,290 --> 00:40:57,220
So on our page, we
notice the script tag.

796
00:40:57,220 --> 00:41:01,190
And up top when our page loads, we're
going to run this code top to bottom.

797
00:41:01,190 --> 00:41:04,630
So the very first thing we'll
do is create two new variables,

798
00:41:04,630 --> 00:41:08,440
one called team one and one called
team two, and set them equal to zero.

799
00:41:08,440 --> 00:41:13,217
So I'll say team one over here is going
to be zero, and team two over here

800
00:41:13,217 --> 00:41:14,050
is going to be zero.

801
00:41:14,050 --> 00:41:16,270
So pretty basic stuff.

802
00:41:16,270 --> 00:41:18,880
But next, we actually have
something a little bit different.

803
00:41:18,880 --> 00:41:20,510
Maybe we haven't seen this before.

804
00:41:20,510 --> 00:41:23,650
We have some text like
document, dot, dot, dot some

805
00:41:23,650 --> 00:41:26,890
other things that happen after
it, equals some function,

806
00:41:26,890 --> 00:41:28,820
and that function is defined for us.

807
00:41:28,820 --> 00:41:34,930
So we're saying that some entity,
some attribute, equals some function.

808
00:41:34,930 --> 00:41:36,850
It gets the value of some function.

809
00:41:36,850 --> 00:41:41,800
In JavaScript, the goal is
often to define some events

810
00:41:41,800 --> 00:41:45,520
that the user can do on
the page and then define

811
00:41:45,520 --> 00:41:48,440
what should happen when
the user takes that event.

812
00:41:48,440 --> 00:41:53,590
So a script, in this sense, is mostly
trying to set up something to happen,

813
00:41:53,590 --> 00:41:55,930
something to be triggered
later on, and define

814
00:41:55,930 --> 00:41:58,613
the code we want to have
running when that event happens.

815
00:41:58,613 --> 00:42:00,280
So this is what that code is doing here.

816
00:42:00,280 --> 00:42:02,740
It's kind of metaphorically
doing this for us.

817
00:42:02,740 --> 00:42:04,540
We're trying to set
up some kind of button

818
00:42:04,540 --> 00:42:07,670
over here, that when
that button is pressed,

819
00:42:07,670 --> 00:42:11,500
I want to run some kind of code--
the function we've defined.

820
00:42:11,500 --> 00:42:16,150
And by setting this kind of entity
equal to this function here,

821
00:42:16,150 --> 00:42:20,420
I'm wiring this button
to that piece of code.

822
00:42:20,420 --> 00:42:23,930
Now whenever I trigger this, maybe
when the user clicks on a button,

823
00:42:23,930 --> 00:42:26,980
for example, I will then
run this piece of code.

824
00:42:26,980 --> 00:42:30,730
So this script has set up this
trigger for me, for the user,

825
00:42:30,730 --> 00:42:34,482
to actually run this code later
on when I press that button there.

826
00:42:34,482 --> 00:42:36,440
And the same thing for
what happens afterwards.

827
00:42:36,440 --> 00:42:40,360
So I see document, blah, blah,
equals some function that we define.

828
00:42:40,360 --> 00:42:44,080
And again, what this is doing is saying
that when I press a particular button

829
00:42:44,080 --> 00:42:50,600
or take action, I want to run some
function in response to the user here.

830
00:42:50,600 --> 00:42:53,050
So I'm going to break this
down a little bit more

831
00:42:53,050 --> 00:42:56,200
and actually dive deeper into what
these dot, dot, dots are doing.

832
00:42:56,200 --> 00:43:01,180
So on the code itself we'll
see document.querySelector,

833
00:43:01,180 --> 00:43:02,890
hashtag add one.

834
00:43:02,890 --> 00:43:05,320
This is like our first
step in that code.

835
00:43:05,320 --> 00:43:09,250
And what looks familiar here?

836
00:43:09,250 --> 00:43:11,210
Already.

837
00:43:11,210 --> 00:43:12,920
What have we maybe seen before?

838
00:43:12,920 --> 00:43:14,510
The hashtag and the ID.

839
00:43:14,510 --> 00:43:17,420
OK, so what do you think this is doing?

840
00:43:17,420 --> 00:43:22,430
Just based on the semantics of it,
with the text that we're reading.

841
00:43:22,430 --> 00:43:24,215
Document.querySelector.

842
00:43:24,215 --> 00:43:27,640


843
00:43:27,640 --> 00:43:32,290
It's selecting some element and it's
selecting the element that has this ID.

844
00:43:32,290 --> 00:43:37,060
So document.querySelector is a way of
saying go through my document object

845
00:43:37,060 --> 00:43:42,040
model, go through your HTML elements
and find me that one that has the ID,

846
00:43:42,040 --> 00:43:43,073
add one.

847
00:43:43,073 --> 00:43:44,240
OK, so let's visualize this.

848
00:43:44,240 --> 00:43:48,790
So when I run this piece of code, I
will go through my document object model

849
00:43:48,790 --> 00:43:52,270
and I will try to find that
element that has the ID add one.

850
00:43:52,270 --> 00:43:55,780
I'll start here, keep searching,
keep searching, keep searching,

851
00:43:55,780 --> 00:43:57,460
going down through my tree.

852
00:43:57,460 --> 00:44:01,390
Searching, searching, searching,
until I get to that button that does

853
00:44:01,390 --> 00:44:03,640
have that ID add one.

854
00:44:03,640 --> 00:44:05,680
And now I have selected that button.

855
00:44:05,680 --> 00:44:09,130
I now have it kind of inside of,
quote unquote, my JavaScript code,

856
00:44:09,130 --> 00:44:12,800
and I can add an attribute
to it or change how it works.

857
00:44:12,800 --> 00:44:15,610
And in particular, I'd like
to find some attribute called

858
00:44:15,610 --> 00:44:17,350
the on-click attribute.

859
00:44:17,350 --> 00:44:20,020
So document.querySelector,
hashtag add one.

860
00:44:20,020 --> 00:44:22,900
That gives me that button
with the ID, add one.

861
00:44:22,900 --> 00:44:27,670
And then dot on click is saying
that I want the attribute called

862
00:44:27,670 --> 00:44:30,400
on click of this button to
be equal to this function,

863
00:44:30,400 --> 00:44:34,660
meaning that when the user clicks this
button, I want to run this function,

864
00:44:34,660 --> 00:44:35,930
in this case.

865
00:44:35,930 --> 00:44:38,170
So let's get a visual for this here.

866
00:44:38,170 --> 00:44:41,660
We'll go back to our code.

867
00:44:41,660 --> 00:44:44,960
And we'll see what's going on inside.

868
00:44:44,960 --> 00:44:46,810
So we're kind of familiar with this now.

869
00:44:46,810 --> 00:44:50,380
We're selecting our element
with the ID add one,

870
00:44:50,380 --> 00:44:54,413
saying that when it is clicked,
I want to run this function here.

871
00:44:54,413 --> 00:44:55,330
But what are we doing?

872
00:44:55,330 --> 00:44:56,663
What is this line of code doing?

873
00:44:56,663 --> 00:44:59,560
Team one equals team one plus one.

874
00:44:59,560 --> 00:45:00,880
What is that doing for us?

875
00:45:00,880 --> 00:45:08,480


876
00:45:08,480 --> 00:45:09,730
Incrementing the score, right.

877
00:45:09,730 --> 00:45:14,090
So we'll say team one is currently
zero, but we'll add one to it.

878
00:45:14,090 --> 00:45:16,210
So the first time I
click that button, zero

879
00:45:16,210 --> 00:45:21,120
will become one, then two, then
three, as I click this button.

880
00:45:21,120 --> 00:45:23,520
And then what am I doing here?

881
00:45:23,520 --> 00:45:25,475
We've seen this before.

882
00:45:25,475 --> 00:45:26,475
What am I selecting now?

883
00:45:26,475 --> 00:45:33,350


884
00:45:33,350 --> 00:45:35,030
Some data.

885
00:45:35,030 --> 00:45:38,980
More particularly though,
what am I selecting?

886
00:45:38,980 --> 00:45:40,900
I see hashtag score one.

887
00:45:40,900 --> 00:45:43,580
So I'm selecting the element
with the ID score one.

888
00:45:43,580 --> 00:45:44,580
Well, what is that?

889
00:45:44,580 --> 00:45:49,690
That is this text up here, this table
data that has an zero inside of it,

890
00:45:49,690 --> 00:45:50,590
initially.

891
00:45:50,590 --> 00:45:54,220
But what I could do is
change its inner HTML.

892
00:45:54,220 --> 00:45:57,940
The inner HTML attribute I will
change to be what team one is.

893
00:45:57,940 --> 00:46:00,760
So on my page, I'm literally
kind of going in here.

894
00:46:00,760 --> 00:46:05,790
I'm selecting this element here, getting
its inner HTML, this part, and saying,

895
00:46:05,790 --> 00:46:09,990
that becomes whatever team one is,
which can be as one, or two, or three.

896
00:46:09,990 --> 00:46:14,130
So it changed my HTML
for me more dynamically.

897
00:46:14,130 --> 00:46:18,000
And just to prove the point to you,
what I can do is comment this out.

898
00:46:18,000 --> 00:46:22,200
I could remove this and
remove this down here.

899
00:46:22,200 --> 00:46:24,630
And now notice how if
I refresh the page--

900
00:46:24,630 --> 00:46:27,360
go back over here, refresh the page.

901
00:46:27,360 --> 00:46:31,510
I hit plus one, but I
don't see the change.

902
00:46:31,510 --> 00:46:34,030
The variable itself is
updating in JavaScript,

903
00:46:34,030 --> 00:46:36,280
but it's not actually
updating on my page, right?

904
00:46:36,280 --> 00:46:37,790
So let me try this.

905
00:46:37,790 --> 00:46:41,260
Let me go ahead and uncomment this.

906
00:46:41,260 --> 00:46:43,040
And now I'll show you the page source.

907
00:46:43,040 --> 00:46:44,830
I'll go ahead and do this.

908
00:46:44,830 --> 00:46:50,750
Show you my page source over here, go
into the main part, table, table body.

909
00:46:50,750 --> 00:46:52,030
This second row of tr's.

910
00:46:52,030 --> 00:46:55,050
And now I see that ID
score one, and score two.

911
00:46:55,050 --> 00:46:57,300
Well, I'll click plus one now.

912
00:46:57,300 --> 00:46:59,680
Let me refresh the page again.

913
00:46:59,680 --> 00:47:02,450
Plus one, and I see it changing as I go.

914
00:47:02,450 --> 00:47:06,400
So notice how if I zoom in
maybe just a little bit more

915
00:47:06,400 --> 00:47:11,750
on this right hand side,
I see that number updating

916
00:47:11,750 --> 00:47:14,545
as I go through on both sides.

917
00:47:14,545 --> 00:47:18,940


918
00:47:18,940 --> 00:47:21,180
Now some handy tips as you're
working in JavaScript--

919
00:47:21,180 --> 00:47:24,250
this often won't work as you intend
it to from the very beginning.

920
00:47:24,250 --> 00:47:27,130
So let's say in my code,
I had some syntax error.

921
00:47:27,130 --> 00:47:31,650
I typed plus one and then made
a missing keystroke, like this.

922
00:47:31,650 --> 00:47:33,600
Some random text in my code.

923
00:47:33,600 --> 00:47:36,310
This is maybe kind of obvious to
me, but if I'm running on a page

924
00:47:36,310 --> 00:47:41,442
now, I refresh the page, well,
I don't see things not working.

925
00:47:41,442 --> 00:47:43,650
I mean, I see them not
working, but I don't know why.

926
00:47:43,650 --> 00:47:45,790
I hit plus one here, plus one over here.

927
00:47:45,790 --> 00:47:46,710
But what is wrong?

928
00:47:46,710 --> 00:47:47,760
I don't know.

929
00:47:47,760 --> 00:47:50,533
What I can do is actually
go over to my console.

930
00:47:50,533 --> 00:47:53,200
And this might be named different
things in a different browser.

931
00:47:53,200 --> 00:47:55,600
But in Chrome, it's called console.

932
00:47:55,600 --> 00:47:58,270
And I see my JavaScript console.

933
00:47:58,270 --> 00:47:59,770
And I can see some errors here.

934
00:47:59,770 --> 00:48:04,390
Uncaught Syntax error,
unexpected identifier, awejf.

935
00:48:04,390 --> 00:48:08,403
So that is a clarification or
a hint to me saying that look,

936
00:48:08,403 --> 00:48:10,570
I need to go ahead and go
look at my JavaScript code

937
00:48:10,570 --> 00:48:13,850
again and think of my syntax, which
will allow me to get rid of this

938
00:48:13,850 --> 00:48:16,010
so I can fix that error there.

939
00:48:16,010 --> 00:48:19,227
So not to worry if your code doesn't
work as intended at the very beginning.

940
00:48:19,227 --> 00:48:21,310
It's always helpful to
have some console over here

941
00:48:21,310 --> 00:48:27,010
to help you figure out what
is actually going wrong.

942
00:48:27,010 --> 00:48:30,060
So questions on this JavaScript so far?

943
00:48:30,060 --> 00:48:31,415
Are we feeling OK?

944
00:48:31,415 --> 00:48:34,010


945
00:48:34,010 --> 00:48:35,990
So I'm seeing a good question here.

946
00:48:35,990 --> 00:48:39,560
This question is, what is
the difference between dot

947
00:48:39,560 --> 00:48:42,740
on click, or this on click
attribute, and saying

948
00:48:42,740 --> 00:48:44,850
add event listener for a click.

949
00:48:44,850 --> 00:48:47,460
So there are maybe two
ways I could approach this.

950
00:48:47,460 --> 00:48:49,730
One way is this way as
I've done below here.

951
00:48:49,730 --> 00:48:52,850
I'm saying that I want
to get the add one button

952
00:48:52,850 --> 00:48:56,810
and set its on-click
attribute to be this function.

953
00:48:56,810 --> 00:48:58,080
I could also do this.

954
00:48:58,080 --> 00:49:03,230
I could say, let me get
my button that has the ID,

955
00:49:03,230 --> 00:49:08,780
add one, and then make sure
that it has some event listener.

956
00:49:08,780 --> 00:49:14,420
And event listener, where an event
is some action the user takes.

957
00:49:14,420 --> 00:49:17,380
Maybe they make a click, right?

958
00:49:17,380 --> 00:49:19,480
And then what I could do
is specify the function

959
00:49:19,480 --> 00:49:21,580
I want to run when the user clicks.

960
00:49:21,580 --> 00:49:23,800
And I think the syntax
will be a bit like this.

961
00:49:23,800 --> 00:49:26,710
Function, dah, dah, dah.

962
00:49:26,710 --> 00:49:32,410
And now I can define the function I
want to run when this button is clicked.

963
00:49:32,410 --> 00:49:34,760
And I'll just put dot,
dot, dots here for now.

964
00:49:34,760 --> 00:49:36,940
These are the very same thing.

965
00:49:36,940 --> 00:49:40,720
All this is doing is simply
setting up some function

966
00:49:40,720 --> 00:49:44,200
to run when this button is clicked.

967
00:49:44,200 --> 00:49:46,930
And it just so happens that
a button-- because it's

968
00:49:46,930 --> 00:49:49,870
so common to click
buttons, buttons already

969
00:49:49,870 --> 00:49:52,180
have an attribute, a
built-in attribute called

970
00:49:52,180 --> 00:49:55,450
on click, that allows me to
define a function that they

971
00:49:55,450 --> 00:49:57,940
should run when the button is clicked.

972
00:49:57,940 --> 00:50:01,300
But I could add this event
listener to not just a button

973
00:50:01,300 --> 00:50:02,842
but some table or some text.

974
00:50:02,842 --> 00:50:05,050
If I want something to happen
when I click some text,

975
00:50:05,050 --> 00:50:09,700
I could add this event listener called
click or add this event listener,

976
00:50:09,700 --> 00:50:12,950
listen for a click and then
run some function in the end.

977
00:50:12,950 --> 00:50:15,700
So I hope that helps clarify
the difference-- really,

978
00:50:15,700 --> 00:50:18,460
the lack of a difference between
these two approaches here.

979
00:50:18,460 --> 00:50:21,100


980
00:50:21,100 --> 00:50:23,420
Other questions here?

981
00:50:23,420 --> 00:50:24,460
How do the page update?

982
00:50:24,460 --> 00:50:25,960
Is it from the server or the client?

983
00:50:25,960 --> 00:50:27,200
This is a good question.

984
00:50:27,200 --> 00:50:31,390
So the page always updates
when I request it to update.

985
00:50:31,390 --> 00:50:34,300
So notice how I can hit Refresh
up on my top left hand sidebar,

986
00:50:34,300 --> 00:50:35,650
and you probably can, too.

987
00:50:35,650 --> 00:50:39,440
When I hit Refresh, I then make
another request to the server to say,

988
00:50:39,440 --> 00:50:41,740
give me the latest page
that you see there.

989
00:50:41,740 --> 00:50:44,210
And the server then gives
me that back, that page.

990
00:50:44,210 --> 00:50:47,710
So the update process is both
from the client and the server,

991
00:50:47,710 --> 00:50:52,330
in the sense that myself, the client,
the user, I have to ask for a new page,

992
00:50:52,330 --> 00:50:55,810
and the server then has to give it
back to me through my HTTP protocol.

993
00:50:55,810 --> 00:51:00,900


994
00:51:00,900 --> 00:51:02,210
OK.

995
00:51:02,210 --> 00:51:06,140
So one final touch
that we'll make here is

996
00:51:06,140 --> 00:51:09,770
trying to figure out how we could
determine a team that wins this game.

997
00:51:09,770 --> 00:51:12,710
And ideally, we'd love for
a team to win the game,

998
00:51:12,710 --> 00:51:15,110
maybe when they have a
certain number of points.

999
00:51:15,110 --> 00:51:18,350
And we can maybe alert the user
to say that this team has won.

1000
00:51:18,350 --> 00:51:21,350
So let's say we want a team to
win when they get to eight points.

1001
00:51:21,350 --> 00:51:23,940
Well, we could do this
in a few different ways.

1002
00:51:23,940 --> 00:51:27,380
And in JavaScript, we have this way of
asking a question using that same if

1003
00:51:27,380 --> 00:51:28,590
statement from before.

1004
00:51:28,590 --> 00:51:30,240
So very familiar to us.

1005
00:51:30,240 --> 00:51:31,585
We can go back to our code here.

1006
00:51:31,585 --> 00:51:33,710
And maybe we could ask the
question at the very end

1007
00:51:33,710 --> 00:51:40,130
and say, if team one is greater
than 10, well, let's go ahead and--

1008
00:51:40,130 --> 00:51:47,460
not print, but alert the user
that team one has won, like this.

1009
00:51:47,460 --> 00:51:49,890
And we could also ask the
other question saying, OK,

1010
00:51:49,890 --> 00:51:55,380
if team two is greater
than 10, what's wrong here?

1011
00:51:55,380 --> 00:51:56,890
That's right.

1012
00:51:56,890 --> 00:51:57,390
Sorry.

1013
00:51:57,390 --> 00:52:00,030
Team two has won.

1014
00:52:00,030 --> 00:52:02,850
Like that.

1015
00:52:02,850 --> 00:52:05,790
But if I were to run this and I
go to my scoreboard over here,

1016
00:52:05,790 --> 00:52:14,250
hit Refresh and go to team one, I can
go way past 10 without getting notified

1017
00:52:14,250 --> 00:52:15,600
or alerted.

1018
00:52:15,600 --> 00:52:16,785
So what's the problem?

1019
00:52:16,785 --> 00:52:20,370


1020
00:52:20,370 --> 00:52:21,705
Take a look at my code here.

1021
00:52:21,705 --> 00:52:24,910


1022
00:52:24,910 --> 00:52:28,682
I do have this conditional.

1023
00:52:28,682 --> 00:52:29,890
But why didn't I get alerted?

1024
00:52:29,890 --> 00:52:38,150


1025
00:52:38,150 --> 00:52:39,695
There is no else, that's true.

1026
00:52:39,695 --> 00:52:43,120


1027
00:52:43,120 --> 00:52:48,390
So we have to keep in mind that this
script runs top to bottom as soon as I

1028
00:52:48,390 --> 00:52:50,010
refresh that page, or I ask for it.

1029
00:52:50,010 --> 00:52:50,800
I load the page.

1030
00:52:50,800 --> 00:52:52,420
So here I will refresh the page.

1031
00:52:52,420 --> 00:52:55,460
And now that script is done running.

1032
00:52:55,460 --> 00:52:58,190
I've run from top to bottom.

1033
00:52:58,190 --> 00:53:00,680
So what would happen there?

1034
00:53:00,680 --> 00:53:05,950
Well, I would see that team
one is zero, team two is zero.

1035
00:53:05,950 --> 00:53:09,970
I will set up my event listeners
here, define the functions

1036
00:53:09,970 --> 00:53:12,430
I want to run when the
user clicks the button,

1037
00:53:12,430 --> 00:53:15,790
and then I'll ask that question,
is team one greater than 10,

1038
00:53:15,790 --> 00:53:17,350
is team two greater than 10?

1039
00:53:17,350 --> 00:53:19,270
Well, I haven't put this in a loop.

1040
00:53:19,270 --> 00:53:22,730
I'm just going to ask that question
at the beginning and only once.

1041
00:53:22,730 --> 00:53:26,830
So where would it be more appropriate
for me to ask this question?

1042
00:53:26,830 --> 00:53:31,170
I could do a while loop
but I really only need

1043
00:53:31,170 --> 00:53:34,620
to ask the question when
I click on a button.

1044
00:53:34,620 --> 00:53:37,440
And I can maybe do this if I
said OK, well, let me go ahead

1045
00:53:37,440 --> 00:53:42,430
and update the score and
then ask that question.

1046
00:53:42,430 --> 00:53:49,860
I'll say if team one is greater
than 10, let's alert the user.

1047
00:53:49,860 --> 00:53:56,095
And for consistency, I'll keep my braces
on the same line, like we have up here.

1048
00:53:56,095 --> 00:53:57,720
And I'll do the same thing in team two.

1049
00:53:57,720 --> 00:54:00,260


1050
00:54:00,260 --> 00:54:02,090
Over here.

1051
00:54:02,090 --> 00:54:04,820
I'll do this.

1052
00:54:04,820 --> 00:54:07,600
So now I'm asking this
question every time

1053
00:54:07,600 --> 00:54:10,780
I click the button, because all
this is doing is setting up,

1054
00:54:10,780 --> 00:54:14,960
whenever this button is clicked,
run this function, every time.

1055
00:54:14,960 --> 00:54:17,450
So I'll go refresh the page here.

1056
00:54:17,450 --> 00:54:20,680
I'll hit plus one on team one, ,
plus, plus, plus, again, and again,

1057
00:54:20,680 --> 00:54:21,550
and again.

1058
00:54:21,550 --> 00:54:22,660
Now we're at 10 points.

1059
00:54:22,660 --> 00:54:25,720
But if I get to 11,
well, team one has won.

1060
00:54:25,720 --> 00:54:29,980
So I've pressed the button, updated
the score, asked the question,

1061
00:54:29,980 --> 00:54:33,385
and now it is true that team
one is greater than 10 points.

1062
00:54:33,385 --> 00:54:35,920


1063
00:54:35,920 --> 00:54:37,570
And we're saying, what if it's a draw?

1064
00:54:37,570 --> 00:54:38,450
Well, we could do this.

1065
00:54:38,450 --> 00:54:40,283
We could-- actually,
that's a good question.

1066
00:54:40,283 --> 00:54:41,790
Let's hit Refresh here.

1067
00:54:41,790 --> 00:54:46,200
Get team one to 10 points,
get team two to 10 points.

1068
00:54:46,200 --> 00:54:50,700
And in the end one team does have to
score the point here, so maybe give it

1069
00:54:50,700 --> 00:54:53,760
to team two and now team two has won.

1070
00:54:53,760 --> 00:54:58,360
But I could also maybe say, oh, team one
gets one more point, now they've won.

1071
00:54:58,360 --> 00:55:00,420
So there's probably some
more logic to add here,

1072
00:55:00,420 --> 00:55:02,550
but I could leave that
part up to you for now.

1073
00:55:02,550 --> 00:55:04,110
Here we're just trying to
figure out if the team has

1074
00:55:04,110 --> 00:55:05,790
a certain number of points in the end.

1075
00:55:05,790 --> 00:55:10,460


1076
00:55:10,460 --> 00:55:17,000
So what questions do you have on this
implementation of JavaScript here?

1077
00:55:17,000 --> 00:55:28,530


1078
00:55:28,530 --> 00:55:33,140
Which jobs can we do
with the document tag?

1079
00:55:33,140 --> 00:55:37,010
Feel free to ask more
specifically, too, if you'd like.

1080
00:55:37,010 --> 00:55:38,580
I can answer your question here.

1081
00:55:38,580 --> 00:55:41,960
But if we look at this
document tag, I believe

1082
00:55:41,960 --> 00:55:43,850
maybe you're referring to this one?

1083
00:55:43,850 --> 00:55:47,240
The goal of this one is simply
to say the name of our file,

1084
00:55:47,240 --> 00:55:48,560
like the HTML file.

1085
00:55:48,560 --> 00:55:50,300
This is going to be an HTML file.

1086
00:55:50,300 --> 00:55:53,210
The dock type of this will be HTML.

1087
00:55:53,210 --> 00:55:56,990
And just to show our visual again
with a document element above,

1088
00:55:56,990 --> 00:56:00,500
go back to my slides over here.

1089
00:56:00,500 --> 00:56:01,810
Let me find this, actually.

1090
00:56:01,810 --> 00:56:04,720


1091
00:56:04,720 --> 00:56:09,360
I think it was up here.

1092
00:56:09,360 --> 00:56:11,580
The document we have at the very top.

1093
00:56:11,580 --> 00:56:15,180
This is simply, by
convention, all HTML files

1094
00:56:15,180 --> 00:56:17,580
do have this kind of document
element at the very top.

1095
00:56:17,580 --> 00:56:20,470
And it's a way of starting at the
top of our file and moving down.

1096
00:56:20,470 --> 00:56:23,250
So notice how in our JavaScript code--

1097
00:56:23,250 --> 00:56:30,640
in our JavaScript code over here, we
started with document.querySelector.

1098
00:56:30,640 --> 00:56:35,440
So that's saying start at the document
element, that very top level element,

1099
00:56:35,440 --> 00:56:39,730
and go ahead and find me that
element that has the ID, add one.

1100
00:56:39,730 --> 00:56:43,300


1101
00:56:43,300 --> 00:56:44,510
A question here.

1102
00:56:44,510 --> 00:56:47,320
How do you decide the
size of your buttons?

1103
00:56:47,320 --> 00:56:48,940
Well, that's a good job for CSS.

1104
00:56:48,940 --> 00:56:51,610
So CSS has these properties
like width or height

1105
00:56:51,610 --> 00:56:53,920
you could use to determine
the size of your button,

1106
00:56:53,920 --> 00:56:56,440
as long as you apply those
styles to your button.

1107
00:56:56,440 --> 00:56:59,900


1108
00:56:59,900 --> 00:57:02,690
Question here, would a CSS
file have a dock type tag, too?

1109
00:57:02,690 --> 00:57:03,950
In fact, it actually wouldn't.

1110
00:57:03,950 --> 00:57:07,280
And I think this is, again, just
something that was decided long ago,

1111
00:57:07,280 --> 00:57:09,810
there's not so much a reason for it.

1112
00:57:09,810 --> 00:57:12,320
If I go to my code
space here and show you

1113
00:57:12,320 --> 00:57:16,460
the CSS file we really didn't
use here codestyles.css,

1114
00:57:16,460 --> 00:57:20,690
I don't need to have a
dock type tag up here.

1115
00:57:20,690 --> 00:57:24,410


1116
00:57:24,410 --> 00:57:26,333
All right.

1117
00:57:26,333 --> 00:57:28,000
So I'm seeing some other questions here.

1118
00:57:28,000 --> 00:57:29,650
And I'm happy to stick
around and answer those.

1119
00:57:29,650 --> 00:57:31,530
But for now, let's
actually wrap officially.

1120
00:57:31,530 --> 00:57:32,820
This is our entire section.

1121
00:57:32,820 --> 00:57:37,058
We've gotten through adding some
HTML elements, styling them with CSS,

1122
00:57:37,058 --> 00:57:39,600
and then adding some JavaScript
to make our code interactive.

1123
00:57:39,600 --> 00:57:42,032
So we'll probably end
officially here, but thank you

1124
00:57:42,032 --> 00:57:43,240
all so much for coming today.

1125
00:57:43,240 --> 00:57:47,210
It was wonderful to see you
and we'll see you next time.

1126
00:57:47,210 --> 00:57:50,000