WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:03.310 --> 00:00:06.430 CARTER ZENKE: Well, hello one and all and welcome to CS50s week eight 00:00:06.430 --> 00:00:07.140 section. 00:00:07.140 --> 00:00:08.140 My name is Carter Zenke. 00:00:08.140 --> 00:00:10.180 I'm the courses preceptor here on campus. 00:00:10.180 --> 00:00:14.290 And the goal of these sections is to help you bridge the gap between lecture 00:00:14.290 --> 00:00:16.040 and this week's problem set. 00:00:16.040 --> 00:00:20.170 So together, we'll be diving into some HTML, some CSS, some JavaScript, 00:00:20.170 --> 00:00:21.550 even HTTP. 00:00:21.550 --> 00:00:23.300 We'll learn more about all of those things 00:00:23.300 --> 00:00:25.467 and you'll get a chance to ask your questions for us 00:00:25.467 --> 00:00:27.220 to work on the exercises together and hope 00:00:27.220 --> 00:00:30.310 by the end you have all the more comfort and familiarity with these topics 00:00:30.310 --> 00:00:31.580 from this week. 00:00:31.580 --> 00:00:34.540 So if you'd like to, feel free to say a brief hello in the chat. 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 00:00:38.290 --> 00:00:41.170 and we'll all say hello together from all different places 00:00:41.170 --> 00:00:42.920 we are around the world. 00:00:42.920 --> 00:00:46.945 So on the count of three we'll unmute and we'll do one two three-- 00:00:46.945 --> 00:00:48.070 AUDIENCE: (EVERYONE) Hello! 00:00:56.830 --> 00:01:00.700 CARTER ZENKE: All right, it's so good to see your faces and hear your voices. 00:01:00.700 --> 00:01:03.680 And this week we'll dive into a few different topics together. 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. 00:01:08.170 --> 00:01:11.860 What does it mean to build websites and actually create your very own web 00:01:11.860 --> 00:01:12.400 pages? 00:01:12.400 --> 00:01:16.000 So this week have four different topics we could discuss. 00:01:16.000 --> 00:01:22.163 We have this idea of HTTP, this idea of HTML, CSS, and JavaScript. 00:01:22.163 --> 00:01:24.580 There's a lot of acronyms here, so we'll try to break down 00:01:24.580 --> 00:01:26.305 what each of these acronyms means. 00:01:26.305 --> 00:01:28.930 But our goal will be to walk through each of these kind of step 00:01:28.930 --> 00:01:32.290 by step, and by the end, have modified and created 00:01:32.290 --> 00:01:36.320 our very own scoreboard website all the way from scratch. 00:01:36.320 --> 00:01:39.040 So let's start off actually with HTTP. 00:01:39.040 --> 00:01:44.650 And could I get maybe in the chat, what do you think HTTP stands for? 00:01:44.650 --> 00:01:46.750 Do you remember from lecture at all? 00:01:46.750 --> 00:01:49.600 What do you think HTTP stands for? 00:01:49.600 --> 00:01:52.090 What does acronym even mean? 00:01:52.090 --> 00:01:54.760 Feel free to say hello and type in the chat. 00:01:58.713 --> 00:02:00.880 So I'm seeing different answers here and one of them 00:02:00.880 --> 00:02:05.290 is Hypertext Transfer Protocol, and that is going to be the correct answer here. 00:02:05.290 --> 00:02:08.680 Hypertext transfer protocol, it's kind of a mouthful. 00:02:08.680 --> 00:02:11.680 So let's try to break it down and talk first about that hypertext piece. 00:02:11.680 --> 00:02:16.420 So what do you think hypertext means in this context? 00:02:16.420 --> 00:02:18.640 This is a hypertext transfer protocol. 00:02:18.640 --> 00:02:22.780 What does hypertext mean in this case? 00:02:22.780 --> 00:02:25.620 Any ideas? 00:02:25.620 --> 00:02:28.480 Feel free to chime in in the chat. 00:02:28.480 --> 00:02:32.230 So I'm seeing you say it's more than text, it involves links, 00:02:32.230 --> 00:02:33.830 maybe it's interactive text. 00:02:33.830 --> 00:02:35.410 These are all really good ideas. 00:02:35.410 --> 00:02:39.070 And hypertext is somewhat of maybe a dated term now. 00:02:39.070 --> 00:02:42.550 Hypertext referred to text that had links inside of it that would link 00:02:42.550 --> 00:02:45.110 to other text or other pages and so on. 00:02:45.110 --> 00:02:46.750 And so what does that remind you of? 00:02:46.750 --> 00:02:49.690 Perhaps a website or websites that have these links, 00:02:49.690 --> 00:02:52.750 this text has links to other pages on that site. 00:02:52.750 --> 00:02:56.470 So the hypertext part in this hypertext transfer protocol 00:02:56.470 --> 00:02:59.350 has to do with the language we use or the files we 00:02:59.350 --> 00:03:04.550 get to actually view websites with their links to other text on their pages. 00:03:04.550 --> 00:03:08.660 So the transfer protocol part, though, what do you think that means? 00:03:08.660 --> 00:03:10.900 What is a transfer protocol? 00:03:10.900 --> 00:03:16.600 If hypertext involves interactive text, links with text and so on, 00:03:16.600 --> 00:03:20.760 what does the transfer protocol perhaps mean? 00:03:20.760 --> 00:03:23.370 So I'm seeing sending and receiving data. 00:03:23.370 --> 00:03:26.610 Maybe some more linking. 00:03:26.610 --> 00:03:27.750 Other ideas? 00:03:27.750 --> 00:03:28.850 Transfer protocol. 00:03:31.510 --> 00:03:33.880 Requesting, I'm seeing. 00:03:33.880 --> 00:03:36.140 Managing data from one place to another. 00:03:36.140 --> 00:03:37.600 These are all really good ideas. 00:03:37.600 --> 00:03:40.240 And the transfer protocol here, the key word, 00:03:40.240 --> 00:03:43.000 transfers, as you all are saying, transferring 00:03:43.000 --> 00:03:46.600 data between different users or different computers, that is sending 00:03:46.600 --> 00:03:47.710 and receiving data. 00:03:47.710 --> 00:03:50.080 Maybe we're sending and receiving this hypertext-- 00:03:50.080 --> 00:03:52.660 these files we use for our web pages. 00:03:52.660 --> 00:03:55.480 And the protocol involves some common set 00:03:55.480 --> 00:03:58.570 of rules we use to communicate between computers, 00:03:58.570 --> 00:04:02.740 so similar to how humans have languages, computers themselves also 00:04:02.740 --> 00:04:06.370 need some rules to follow when they ask each other for information 00:04:06.370 --> 00:04:08.200 or, in this case some hypertext. 00:04:08.200 --> 00:04:10.990 So all you need to know for now is that you end up 00:04:10.990 --> 00:04:14.260 using HTTP, hypertext transfer protocol, when 00:04:14.260 --> 00:04:17.890 you go to request a website from a computer or some server 00:04:17.890 --> 00:04:19.010 out there on the internet. 00:04:19.010 --> 00:04:22.780 And for example, let's say you go to our very own web page here using 00:04:22.780 --> 00:04:28.610 this URL, cs50.harvard.edu, and in front of that you prefix it with prefix it 00:04:28.610 --> 00:04:33.400 with http colon slash slash, meaning you want to use the hypertext transfer 00:04:33.400 --> 00:04:36.700 protocol to access whatever files are at cs50harvard.edu. 00:04:36.700 --> 00:04:41.890 This is specifying how you want to ask our servers for some information 00:04:41.890 --> 00:04:45.230 that we have on maybe the course website, for example. 00:04:45.230 --> 00:04:49.960 So this is the thing we'll dive into briefly here-- hypertext transfer 00:04:49.960 --> 00:04:51.280 protocol or HTTP. 00:04:51.280 --> 00:04:55.300 And the key thing to know right now is that for HTTP, you 00:04:55.300 --> 00:04:57.172 have maybe two computers a bit like this, 00:04:57.172 --> 00:04:59.380 where your computer's on the right and maybe a server 00:04:59.380 --> 00:05:00.580 is on the left hand side. 00:05:00.580 --> 00:05:03.190 And you want to request some web page. 00:05:03.190 --> 00:05:04.510 So you go to some URL. 00:05:04.510 --> 00:05:07.330 And as we saw in lecture, you might make a request 00:05:07.330 --> 00:05:12.430 by sending some data to a server, and that request is formatted in a way 00:05:12.430 --> 00:05:15.490 that the server knows what to expect because of HTTP. 00:05:15.490 --> 00:05:18.760 HTTP has specified how I should make this request. 00:05:18.760 --> 00:05:21.880 And then by convention, this server responds 00:05:21.880 --> 00:05:25.750 with some code that says, OK, maybe everything went OK. 00:05:25.750 --> 00:05:29.680 And by convention, again, 200 tends to mean that everything went OK 00:05:29.680 --> 00:05:30.710 with this request. 00:05:30.710 --> 00:05:32.650 So it will give us back some data. 00:05:32.650 --> 00:05:35.380 And in this case, it will give us that page you wanted to see. 00:05:35.380 --> 00:05:38.830 So perhaps the course's website over here that we now have access to. 00:05:38.830 --> 00:05:42.610 It gave us that web page because we asked for it using HTTP, 00:05:42.610 --> 00:05:45.130 and it knows how to respond, again, because of the rules 00:05:45.130 --> 00:05:47.570 we defined with HTTP. 00:05:47.570 --> 00:05:50.290 So this is what happens when everything goes right, 00:05:50.290 --> 00:05:52.900 but there are maybe some things that could go wrong, right? 00:05:52.900 --> 00:05:56.230 And so let's think about one maybe error code 00:05:56.230 --> 00:05:59.020 you've seen if something is not found. 00:05:59.020 --> 00:06:02.870 Have you ever asked for some web page and found it is not found? 00:06:02.870 --> 00:06:04.120 So I'm seeing 404. 00:06:04.120 --> 00:06:08.150 And this is some-- again, a convention in HTTP is to so say, 00:06:08.150 --> 00:06:10.600 OK, well, here is some code we can give you to let 00:06:10.600 --> 00:06:12.500 you know that something is not found. 00:06:12.500 --> 00:06:13.640 So let's try this again. 00:06:13.640 --> 00:06:17.290 And maybe we try to get access to some page that actually isn't there. 00:06:17.290 --> 00:06:18.880 Maybe we have a wrong URL. 00:06:18.880 --> 00:06:21.370 So maybe that convention make this HTTP request. 00:06:21.370 --> 00:06:23.930 And the server then responds by saying, oh, I don't have it. 00:06:23.930 --> 00:06:25.030 That's a 404. 00:06:25.030 --> 00:06:29.270 I'll instead give you back some page noting that this is not found 00:06:29.270 --> 00:06:31.690 so you know what's going on. 00:06:31.690 --> 00:06:34.450 Now there are still other errors that could happen, 00:06:34.450 --> 00:06:37.840 and maybe you'll see this not this week or maybe not even next week, 00:06:37.840 --> 00:06:41.090 but later on as you build your own websites with Python 00:06:41.090 --> 00:06:45.725 and so on, maybe this 500 error code, which means an internal server error. 00:06:45.725 --> 00:06:48.850 So it might have something like this, where I ask for a different web page. 00:06:48.850 --> 00:06:51.250 And maybe at this point, the server itself 00:06:51.250 --> 00:06:55.360 runs into a problem, which means that somewhere in the computer's programming 00:06:55.360 --> 00:06:57.640 language on that server, an error has happened 00:06:57.640 --> 00:07:00.795 and it can't complete the request I asked for, in which case, 00:07:00.795 --> 00:07:02.920 it will give me back convention this 500 error code 00:07:02.920 --> 00:07:06.380 and give me back a page saying that look, something went wrong in here. 00:07:06.380 --> 00:07:08.510 I can't give you what you want. 00:07:08.510 --> 00:07:11.950 So all you need to know for now is that, again, HTTP 00:07:11.950 --> 00:07:15.670 is this way of requesting hypertext, some pages on a website 00:07:15.670 --> 00:07:18.020 that you can then view on your computer. 00:07:18.020 --> 00:07:20.650 And there are some conventions we have for the kinds of status 00:07:20.650 --> 00:07:23.030 codes we give to back to you as a computer that 00:07:23.030 --> 00:07:26.920 are making the request so you know what is going on in the end. 00:07:26.920 --> 00:07:29.860 Now let's actually build our own server here. 00:07:29.860 --> 00:07:33.850 We can do that in VS coding code spaces using this command right here. 00:07:33.850 --> 00:07:35.810 Http dash server. 00:07:35.810 --> 00:07:37.070 And we saw this in lecture. 00:07:37.070 --> 00:07:39.850 So what I'll do is go to my own code space over here. 00:07:39.850 --> 00:07:44.980 And I have at my fingertips some HTML file called scoreboard.html. 00:07:44.980 --> 00:07:46.970 And this is on my code space. 00:07:46.970 --> 00:07:50.860 But if I wanted to turn my code space into a server 00:07:50.860 --> 00:07:54.070 I could make this request to, well, I could simply 00:07:54.070 --> 00:08:00.190 zoom in a bit here and type http dash server, and I'll hit Enter. 00:08:00.190 --> 00:08:02.530 And now as again we saw in lecture, I will 00:08:02.530 --> 00:08:07.060 see that I have this URL that I can click on, I'll open this URL. 00:08:07.060 --> 00:08:11.530 And now I'm using my VS code, my code space, as its very own server. 00:08:11.530 --> 00:08:14.560 I can now make a request to it to ask for some files 00:08:14.560 --> 00:08:16.270 that it has inside of it. 00:08:16.270 --> 00:08:19.292 And here I can see I have my scoreboard.html file, 00:08:19.292 --> 00:08:21.250 so I could click on that and request that file. 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 00:08:27.450 --> 00:08:27.950 here. 00:08:27.950 --> 00:08:30.970 So I've made this HTTP request to my own code space now 00:08:30.970 --> 00:08:34.820 and it's giving me back some file that I've requested here. 00:08:34.820 --> 00:08:37.120 So what questions do you have so far? 00:08:37.120 --> 00:08:40.760 We'll dive into the HTML, we'll dive into CSS and so on later on. 00:08:40.760 --> 00:08:45.280 But for HTTP, what questions do you have so far? 00:08:45.280 --> 00:08:47.790 What wonderings did you have from lecture this week? 00:08:57.280 --> 00:08:57.780 Right. 00:08:57.780 --> 00:09:01.050 So not seeing too many questions right now. 00:09:01.050 --> 00:09:03.360 I'm seeing what does the plus one do actually. 00:09:03.360 --> 00:09:05.040 So we'll get into this in a little bit. 00:09:05.040 --> 00:09:08.790 But I hit plus one, notice how I can keep track of maybe two teams 00:09:08.790 --> 00:09:10.383 scores here. 00:09:10.383 --> 00:09:11.300 So this is of 80 here. 00:09:11.300 --> 00:09:16.440 So we have a scoreboard, we're keeping track of two teams together. 00:09:16.440 --> 00:09:17.650 All right. 00:09:17.650 --> 00:09:20.440 So what we'll do is just refresh this page, reset it to zero. 00:09:20.440 --> 00:09:22.742 And we'll go back to our HTML over here. 00:09:22.742 --> 00:09:25.450 I can see the request I'm making on my server at my terminal now. 00:09:25.450 --> 00:09:28.820 But let's actually dive into the HTML that we're going to see. 00:09:28.820 --> 00:09:32.200 So I'll maybe stop my server with Control C. And I'll go ahead 00:09:32.200 --> 00:09:34.810 and code scoreboard.html. 00:09:34.810 --> 00:09:38.620 So here I see a lot of different tags, these tags being something 00:09:38.620 --> 00:09:45.010 like this and this, and this right here, called HTML tags. 00:09:45.010 --> 00:09:48.040 And it's worth actually taking a moment to take a break 00:09:48.040 --> 00:09:50.493 and think about what are each of these tags doing for us, 00:09:50.493 --> 00:09:52.910 and what is the structure of this page going to look like? 00:09:52.910 --> 00:09:55.960 So let's dive into HTML now and think about how 00:09:55.960 --> 00:09:58.300 it gives some structure to our website. 00:09:58.300 --> 00:10:01.280 So go back to our slides over here. 00:10:01.280 --> 00:10:05.680 And let's talk about HTML which stands for what? 00:10:05.680 --> 00:10:08.525 What does HTML stand for? 00:10:13.990 --> 00:10:16.930 So I'm seeing hypertext, which is a familiar term now. 00:10:16.930 --> 00:10:18.130 Markup language. 00:10:18.130 --> 00:10:21.340 So hypertext you're familiar with, but markup language 00:10:21.340 --> 00:10:25.240 is a way of specifying how we're going to build our pages. 00:10:25.240 --> 00:10:28.790 What is the language we use to actually give structure to our pages here? 00:10:28.790 --> 00:10:33.430 So when I think of HTML, you might often think of something like this. 00:10:33.430 --> 00:10:36.910 Some code on the left hand side is composed of these tags. 00:10:36.910 --> 00:10:41.660 We're going to tag is something like that HTML in braces up above 00:10:41.660 --> 00:10:44.230 and that HTML in braces down below. 00:10:44.230 --> 00:10:47.780 So notice here, I have an opening tag on that second line, 00:10:47.780 --> 00:10:51.520 that HTML, and a closing tag on that very last line. 00:10:51.520 --> 00:10:55.740 And how would I know it's a closing tag down below. 00:10:55.740 --> 00:10:56.475 Any ideas? 00:10:59.090 --> 00:11:00.350 So I'm seeing the slash. 00:11:00.350 --> 00:11:05.030 So in HTML, by convention, we tend to have our closing 00:11:05.030 --> 00:11:08.780 tags denoted by this slash over here. 00:11:08.780 --> 00:11:10.322 But what are these tags representing? 00:11:10.322 --> 00:11:12.822 We have all these tags, what are they actually representing? 00:11:12.822 --> 00:11:15.780 Well, for HTML, we're trying to build up the structure of our website. 00:11:15.780 --> 00:11:19.460 And this very basic HTML page with no other elements 00:11:19.460 --> 00:11:21.810 might look a bit like this on the right hand side. 00:11:21.810 --> 00:11:26.250 So we have some document element that is encasing everything else. 00:11:26.250 --> 00:11:28.940 This is like the highest element, the very first element, 00:11:28.940 --> 00:11:31.370 the very basic one on our page. 00:11:31.370 --> 00:11:35.180 And then inside of that, we have this HTML element 00:11:35.180 --> 00:11:39.710 that is denoted by this HTML tag, opening and closing. 00:11:39.710 --> 00:11:42.530 So this open tag and this closing tag together 00:11:42.530 --> 00:11:45.140 constitute this HTML element that is going 00:11:45.140 --> 00:11:49.170 to hold all of our different elements will build into our site. 00:11:49.170 --> 00:11:52.070 So let's say we added more tags to our code. 00:11:52.070 --> 00:11:56.210 Let's say I added two of them like head, opening and closing, 00:11:56.210 --> 00:11:58.670 and body, opening and closing. 00:11:58.670 --> 00:12:01.560 So this would look like on our page something like this. 00:12:01.560 --> 00:12:05.120 I would see, as children of my HTML element, 00:12:05.120 --> 00:12:09.980 I now have this head element right over here. 00:12:09.980 --> 00:12:12.070 And now this body element. 00:12:12.070 --> 00:12:14.470 And notice how I'm giving some structure to my page. 00:12:14.470 --> 00:12:16.910 Previously, it was just a single element, 00:12:16.910 --> 00:12:19.750 but now I have two different elements that kind of 00:12:19.750 --> 00:12:25.180 correspond or are underneath or children to this HTML element here. 00:12:25.180 --> 00:12:27.400 And now what if I wanted to add some more tags? 00:12:27.400 --> 00:12:29.170 Well, I could maybe add this one-- 00:12:29.170 --> 00:12:31.060 title, opening and closing. 00:12:31.060 --> 00:12:33.580 And then some text down below, like hello body. 00:12:33.580 --> 00:12:36.940 And just be clear, that text, hello body, is not so much a tag 00:12:36.940 --> 00:12:40.750 as it is just some text, whereas the title and the slash title 00:12:40.750 --> 00:12:44.380 inside of those braces there, the greater than, less than sign, 00:12:44.380 --> 00:12:46.270 those there are tags. 00:12:46.270 --> 00:12:48.040 So what do you think is going to happen-- 00:12:48.040 --> 00:12:52.210 or how is our picture going to change on the right hand side now? 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 00:12:57.220 --> 00:12:59.682 on the right hand side? 00:12:59.682 --> 00:13:01.390 Maybe in the chat, feel free to chime in. 00:13:05.070 --> 00:13:06.660 We have these new tags. 00:13:06.660 --> 00:13:08.480 Title. 00:13:08.480 --> 00:13:09.905 I have some text, hello body. 00:13:12.610 --> 00:13:14.740 So I'm seeing, we're going to add a child title 00:13:14.740 --> 00:13:16.970 to head, which is a good instinct here. 00:13:16.970 --> 00:13:21.280 So what we'll see is if I go back to this visual, underneath head, 00:13:21.280 --> 00:13:25.183 we'll now have this child called the title element, right? 00:13:25.183 --> 00:13:27.100 Because again, it's inside of the head element 00:13:27.100 --> 00:13:31.750 because notice how the title tags are all encased inside of the head tags. 00:13:31.750 --> 00:13:34.510 That means title is a child of head. 00:13:34.510 --> 00:13:37.720 And now underneath body, we'll see that the hello body 00:13:37.720 --> 00:13:41.455 text shows up inside of our tree. 00:13:41.455 --> 00:13:43.830 And to go even further, we could add some more text here. 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, 00:13:47.700 --> 00:13:48.810 hello title. 00:13:48.810 --> 00:13:51.188 So now we see down below hello title. 00:13:51.188 --> 00:13:53.230 And this is an example of what we saw in lecture, 00:13:53.230 --> 00:13:56.230 but now just visualize for us on the right hand side. 00:13:56.230 --> 00:13:58.620 So when you think of HTML, you should often think of it 00:13:58.620 --> 00:14:00.600 as designing this tree structure. 00:14:00.600 --> 00:14:04.050 And this structure has a name called the document object 00:14:04.050 --> 00:14:06.940 model or the D-O-M, the DOM for short. 00:14:06.940 --> 00:14:10.212 And this will help you see the structure of your web page here. 00:14:10.212 --> 00:14:11.670 So what if we made this change now. 00:14:11.670 --> 00:14:13.170 What if we said something like this. 00:14:13.170 --> 00:14:19.470 We said, OK, I want to put hello body in a paragraph tag, opening and closing. 00:14:19.470 --> 00:14:23.833 What would change now underneath body, do you think? 00:14:23.833 --> 00:14:24.750 What would we see now? 00:14:31.170 --> 00:14:35.280 Adding another node or adding another element. 00:14:35.280 --> 00:14:38.680 The paragraph tag will be a child of bodies is what I'm seeing, 00:14:38.680 --> 00:14:39.420 which is correct. 00:14:39.420 --> 00:14:41.580 Here we're going to make a new paragraph element-- 00:14:41.580 --> 00:14:44.942 keep in mind, the tags are just the opening and closing 00:14:44.942 --> 00:14:47.400 tags on the left hand side, where we actually type in code. 00:14:47.400 --> 00:14:51.640 The element is actually what we see in the DOM, dominant object model 00:14:51.640 --> 00:14:52.140 here now. 00:14:52.140 --> 00:14:53.490 So p will be there. 00:14:53.490 --> 00:14:57.330 As a child will then have, of course, hello body underneath. 00:14:57.330 --> 00:15:02.170 So now we've kind of made more children on our page here. 00:15:02.170 --> 00:15:06.390 So this is some structure of a basic, basic web page. 00:15:06.390 --> 00:15:09.430 But we have a more complicated one actually in our code. 00:15:09.430 --> 00:15:13.360 So let's now, with this in mind, dive into our scoreboard.html file. 00:15:13.360 --> 00:15:15.450 So if I'll go back to my code space here. 00:15:15.450 --> 00:15:18.870 I can see, well, I have a few different elements here. 00:15:18.870 --> 00:15:21.660 I have some familiar ones like the HTML tag 00:15:21.660 --> 00:15:25.530 up top and the closing HTML tag down below. 00:15:25.530 --> 00:15:29.730 I also have what appears to be a head tag, which we've seen before, 00:15:29.730 --> 00:15:32.530 and a closing head tag. 00:15:32.530 --> 00:15:36.750 And inside of my head element, opening and closing tag here, 00:15:36.750 --> 00:15:42.130 I have maybe a title and some styles defined. 00:15:42.130 --> 00:15:44.760 So if we have this here, we could say, OK, this 00:15:44.760 --> 00:15:46.600 is some metadata about our site. 00:15:46.600 --> 00:15:48.360 This is some information that isn't really 00:15:48.360 --> 00:15:51.660 wanting to be displayed so much on the actual web page itself, 00:15:51.660 --> 00:15:54.750 but is more going to define some information about the site, 00:15:54.750 --> 00:15:59.600 like what is its title, and what are the styles we're applying to it here. 00:15:59.600 --> 00:16:04.420 And then down below, not as a child of head but just below the head, 00:16:04.420 --> 00:16:09.580 we have the body tag, opening and closing. 00:16:09.580 --> 00:16:12.673 And then we have inside of here a table, it seems. 00:16:12.673 --> 00:16:15.340 So we'll break this down in just a minute and we'll see a visual 00:16:15.340 --> 00:16:18.048 for all of this, because it's getting to be a lot right now here. 00:16:18.048 --> 00:16:20.260 But notice how we have many different children now 00:16:20.260 --> 00:16:21.760 and many different tags in our page. 00:16:21.760 --> 00:16:23.427 So let's actually try to visualize this. 00:16:23.427 --> 00:16:25.030 We'll go back to our slides here. 00:16:25.030 --> 00:16:27.640 And we will think about this. 00:16:27.640 --> 00:16:31.468 We'll think about this tree now for our current page. 00:16:31.468 --> 00:16:33.760 So notice how we're seeing this very same elements now. 00:16:33.760 --> 00:16:37.330 We have that document and HTML elements, we have the head and body. 00:16:37.330 --> 00:16:40.510 And in the head, we had our title element, our style element. 00:16:40.510 --> 00:16:44.690 In body we had a table and some script down at the bottom there. 00:16:44.690 --> 00:16:47.500 So let's dive deeper into the table tag, because that 00:16:47.500 --> 00:16:50.750 seems to be what's going to be more interesting for us here. 00:16:50.750 --> 00:16:53.830 So in the table, we have the table element, 00:16:53.830 --> 00:16:55.960 kind of like this overarching element here. 00:16:55.960 --> 00:16:59.710 And inside of it, we have some tr elements. 00:16:59.710 --> 00:17:02.810 And so does anyone know what the tr is doing for us here? 00:17:02.810 --> 00:17:05.335 Why do we have these tr elements? 00:17:08.619 --> 00:17:09.960 So yeah, you get table rows. 00:17:09.960 --> 00:17:12.690 So how many rows do you think this table will have? 00:17:12.690 --> 00:17:15.161 And we've seen it before, but based on HTML, 00:17:15.161 --> 00:17:16.619 how many rows you think it'll have? 00:17:16.619 --> 00:17:22.329 Three rows, right, because there are three child tr elements for this table. 00:17:22.329 --> 00:17:24.540 So we'll have a table with three rows. 00:17:24.540 --> 00:17:29.130 And then each of those table rows has two td elements 00:17:29.130 --> 00:17:30.970 as children to that one. 00:17:30.970 --> 00:17:35.070 So how many columns do you think we'll have in this case, 00:17:35.070 --> 00:17:39.240 if td stands for table data, and kind of divides 00:17:39.240 --> 00:17:43.050 our row into individual columns, how many columns will we have overall? 00:17:46.320 --> 00:17:51.060 I'm seeing six, which is maybe slightly correct. 00:17:51.060 --> 00:17:53.965 What we're going to have is six cells. 00:17:53.965 --> 00:17:54.840 But how many columns? 00:17:54.840 --> 00:17:55.770 Two columns, right. 00:17:55.770 --> 00:17:59.220 Notice how every row has two columns-- 00:17:59.220 --> 00:18:01.113 really, every row has two cells. 00:18:01.113 --> 00:18:03.030 And if every row has two cells, we effectively 00:18:03.030 --> 00:18:05.702 have two columns in the end. 00:18:05.702 --> 00:18:08.910 And inside of each of these cells down below, we see some text like team one, 00:18:08.910 --> 00:18:10.440 team two, 00. 00:18:10.440 --> 00:18:13.890 And over here we have plus one and plus one inside 00:18:13.890 --> 00:18:15.820 of a button that we can see on our page. 00:18:15.820 --> 00:18:18.810 So let's visualize this in terms of the tree structure we saw earlier. 00:18:18.810 --> 00:18:22.570 What if we change this and we said, let's visualize this top to bottom. 00:18:22.570 --> 00:18:26.100 Well, we have some table and we had our three rows. 00:18:26.100 --> 00:18:28.870 This would look a bit like this, if we just highlighted these, 00:18:28.870 --> 00:18:32.490 and visualize those three rows to our table now. 00:18:32.490 --> 00:18:36.970 And now every row will have two cells inside of it, 00:18:36.970 --> 00:18:39.750 which means that our table will look a bit like this. 00:18:39.750 --> 00:18:41.040 Two cells inside of it. 00:18:41.040 --> 00:18:45.150 On the right hand side, we see two columns, overall. 00:18:45.150 --> 00:18:48.300 And then inside of each of these cells, let's say 00:18:48.300 --> 00:18:50.190 we wanted to add some text or some buttons. 00:18:50.190 --> 00:18:53.250 Well, we could do that with these elements down below. 00:18:53.250 --> 00:18:55.800 And these will be inserted into our new cells 00:18:55.800 --> 00:18:57.680 because they are children of those cells. 00:18:57.680 --> 00:18:59.430 So we could say something like this, where 00:18:59.430 --> 00:19:03.698 you now have team one, square of zero, to the square of zero, 00:19:03.698 --> 00:19:05.490 and I have those buttons that say plus one. 00:19:05.490 --> 00:19:09.310 We're going to add a score to either team in this case. 00:19:09.310 --> 00:19:13.860 So what questions are there on this structure so far? 00:19:16.540 --> 00:19:19.000 All we're doing is defining a basic table layout, 00:19:19.000 --> 00:19:20.365 but it's not very pretty yet. 00:19:23.600 --> 00:19:24.560 Any questions so far? 00:19:31.060 --> 00:19:33.780 So we'll keep going here with HTML. 00:19:33.780 --> 00:19:38.340 And our next task will be to try to add some more elements to our scoreboard. 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 00:19:43.560 --> 00:19:45.900 and a header element, a ul and an li. 00:19:45.900 --> 00:19:49.350 So what we could do is we can go maybe back to our code space 00:19:49.350 --> 00:19:52.360 now and try to add in some of these elements. 00:19:52.360 --> 00:19:56.580 So notice how in my head tag, my head element up above, 00:19:56.580 --> 00:19:58.440 I have some metadata about the site. 00:19:58.440 --> 00:20:01.060 I have a title, the styles and so on. 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 00:20:05.490 --> 00:20:06.330 to my header. 00:20:06.330 --> 00:20:11.980 Maybe I say this is a Duke versus UNC basketball game here. 00:20:11.980 --> 00:20:15.470 If you're familiar with the two collegiate rivals. 00:20:15.470 --> 00:20:17.510 Duke versus UNC basketball game. 00:20:17.510 --> 00:20:20.870 This would really not be a good place to put this header here 00:20:20.870 --> 00:20:23.810 because it's some content that I want the user to see. 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, 00:20:28.220 --> 00:20:34.200 I should more aptly put this inside my body tag here, maybe above my table. 00:20:34.200 --> 00:20:38.270 Structurally, I want this to show up first before I show my table. 00:20:38.270 --> 00:20:42.410 And then underneath, I can maybe add this p tag for a paragraph, 00:20:42.410 --> 00:20:48.680 to say that I want to tell the user to click the buttons to add 00:20:48.680 --> 00:20:51.110 a point to each team-- 00:20:51.110 --> 00:20:53.520 to each team, in this case. 00:20:53.520 --> 00:20:55.250 And now what I can do with these elements 00:20:55.250 --> 00:20:59.400 added, well, I can go to my terminal and I could run my server again. 00:20:59.400 --> 00:21:02.570 I could say HTTP dash server. 00:21:02.570 --> 00:21:04.050 Hit Enter. 00:21:04.050 --> 00:21:05.700 Wait for it to load. 00:21:05.700 --> 00:21:07.830 And now I'll click on this URL. 00:21:07.830 --> 00:21:13.080 And I should see, hopefully, that I do have this text on my page. 00:21:13.080 --> 00:21:15.660 Notice how H1 showed up first. 00:21:15.660 --> 00:21:19.320 It's the very first thing in my body, followed by the p tag-- 00:21:19.320 --> 00:21:22.270 click the buttons to add a point to each team. 00:21:22.270 --> 00:21:25.870 And finally underneath, I have my table here. 00:21:25.870 --> 00:21:28.855 So with this in mind, we're kind of building a structure for our site. 00:21:28.855 --> 00:21:31.230 Well, let's go ahead and try to add some other tags, too. 00:21:31.230 --> 00:21:33.840 What if we try to add this main tag? 00:21:33.840 --> 00:21:35.280 So I'll try this one. 00:21:35.280 --> 00:21:37.290 I'll say main. 00:21:37.290 --> 00:21:40.800 And what if I added some text like-- 00:21:40.800 --> 00:21:42.210 well, maybe not add text. 00:21:42.210 --> 00:21:44.550 I'll just put this kind of here. 00:21:44.550 --> 00:21:45.827 Main. 00:21:45.827 --> 00:21:47.910 And just see what if I can see anything happening. 00:21:47.910 --> 00:21:49.570 I'll save my file. 00:21:49.570 --> 00:21:52.080 I'll go back over here and I'll refresh my page. 00:21:52.080 --> 00:21:57.020 And I don't seem to see anything different here. 00:21:57.020 --> 00:22:00.330 But why would that happen, do you think? 00:22:00.330 --> 00:22:05.600 I do have this new tag called main, opening and closing. 00:22:05.600 --> 00:22:09.430 But why would I not see it on my page? 00:22:09.430 --> 00:22:11.680 It's empty, which is fair. 00:22:11.680 --> 00:22:13.810 So let me go ahead and try changing that. 00:22:13.810 --> 00:22:16.900 Instead of this, I'll make this maybe the main part on page. 00:22:16.900 --> 00:22:19.412 Let's say I want this tech to be the main part of the page. 00:22:19.412 --> 00:22:22.120 I want to tell the user that they should click the buttons to add 00:22:22.120 --> 00:22:23.635 a point to each team. 00:22:23.635 --> 00:22:26.820 OK, I'll refresh the page now. 00:22:26.820 --> 00:22:29.610 And it looks slightly different, like the table moved up, 00:22:29.610 --> 00:22:32.940 but it's not really changing how the text looks. 00:22:32.940 --> 00:22:35.470 So what's the point of main? 00:22:35.470 --> 00:22:38.170 Does anyone want to hazard a guess in the chat? 00:22:45.410 --> 00:22:49.870 Yes, so I'm seeing some folks talk about semanticness or sectioning. 00:22:49.870 --> 00:22:51.500 And it's actually a good idea. 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, 00:22:58.540 --> 00:23:00.430 these show up pretty differently. 00:23:00.430 --> 00:23:05.650 I see h1 in huge text and I see p in much smaller text. 00:23:05.650 --> 00:23:09.310 Now main, though, didn't seem to have much of an effect, here. 00:23:09.310 --> 00:23:11.800 And that's because what main is doing is not 00:23:11.800 --> 00:23:15.010 so much visual as it is more semantic. 00:23:15.010 --> 00:23:18.410 And by semantic, we mean it's changing the structure-- or really not 00:23:18.410 --> 00:23:18.910 structure. 00:23:18.910 --> 00:23:23.090 It's changing the importance of certain sections of our pages. 00:23:23.090 --> 00:23:25.810 So if you look at a search engine like Google, 00:23:25.810 --> 00:23:30.040 Google will look at all of your HTML files, figure out how to index 00:23:30.040 --> 00:23:31.790 or show your site to others. 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, 00:23:36.585 --> 00:23:38.380 well, I could use this main tag. 00:23:38.380 --> 00:23:41.320 I could simply, maybe, encase this part. 00:23:41.320 --> 00:23:46.180 Like let's say not the title, but really the paragraph here and the table 00:23:46.180 --> 00:23:46.960 itself. 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. 00:23:50.973 --> 00:23:51.890 Well, I could do this. 00:23:51.890 --> 00:23:57.310 I could make sure that table and p are children of main, 00:23:57.310 --> 00:24:00.670 thereby making sure that Google knows, look, 00:24:00.670 --> 00:24:04.710 what comes after or is a child to main is pretty important for my site. 00:24:04.710 --> 00:24:06.650 It is the main content that I have. 00:24:06.650 --> 00:24:10.060 If I refresh the page here, nothing happens. 00:24:10.060 --> 00:24:11.040 It's all the same. 00:24:11.040 --> 00:24:14.260 But now if somebody were to read my site, look at my HTML like Google, 00:24:14.260 --> 00:24:17.340 for example, they would be able to see that this stuff down below is 00:24:17.340 --> 00:24:22.840 a little more important, helping to section off this content here. 00:24:22.840 --> 00:24:24.920 I'm seeing a few questions here. 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? 00:24:29.918 --> 00:24:30.460 So certainly. 00:24:30.460 --> 00:24:32.730 If you're looking at other tags you might want to use 00:24:32.730 --> 00:24:35.230 or other elements you could use, I'd encourage you to simply 00:24:35.230 --> 00:24:36.850 maybe Google for some of those. 00:24:36.850 --> 00:24:39.850 You could-- I know a good resource is W3. 00:24:39.850 --> 00:24:45.860 You can say W3Schools HTML tags reference, for example. 00:24:45.860 --> 00:24:47.540 And you could-- let me zoom in a bit. 00:24:47.540 --> 00:24:50.260 Click on this one right here. 00:24:50.260 --> 00:24:54.040 And here we have all the HTML tags ordered, alphabetically. 00:24:54.040 --> 00:24:59.790 So these are all HTML tags you can use to create elements of your site. 00:24:59.790 --> 00:25:04.160 So feel free to look up that on Google if you'd like to figure out 00:25:04.160 --> 00:25:06.305 a reference for all of your tables. 00:25:09.160 --> 00:25:10.270 All right. 00:25:10.270 --> 00:25:14.470 So again, there's a difference between these more visual tags 00:25:14.470 --> 00:25:19.390 like this h1, and these more semantic tags, like main, for example. 00:25:19.390 --> 00:25:24.040 Other questions here, too, on these tags, these elements? 00:25:24.040 --> 00:25:28.150 A question on whether main helps for accessibility like screen readers. 00:25:28.150 --> 00:25:28.752 It can. 00:25:28.752 --> 00:25:30.460 So if you have a screen reader, something 00:25:30.460 --> 00:25:34.690 is trying to read your site for somebody who's using a computer, often having 00:25:34.690 --> 00:25:37.607 these more semantic tags is helpful because you can tell somebody what 00:25:37.607 --> 00:25:40.607 is the main content of your page, what should the screen reader actually 00:25:40.607 --> 00:25:41.440 focus on reading? 00:25:41.440 --> 00:25:45.250 Maybe I don't want it to read everything, like not the title so much. 00:25:45.250 --> 00:25:47.420 Maybe I just want it to read this text down here. 00:25:47.420 --> 00:25:49.587 So by delineating this, I can tell the screen reader 00:25:49.587 --> 00:25:53.037 what I want it to focus on as somebody else looks at my site. 00:25:53.037 --> 00:25:53.620 Good question. 00:25:58.243 --> 00:26:00.642 I see a question also on interactive buttons, 00:26:00.642 --> 00:26:02.100 how do we make interactive buttons. 00:26:02.100 --> 00:26:04.475 We'll get to that in just a minute using some JavaScript. 00:26:04.475 --> 00:26:06.450 But as a sneak peek down below, we'll see 00:26:06.450 --> 00:26:10.747 we have our buttons defined down here and we have some JavaScript 00:26:10.747 --> 00:26:12.330 down below to help those buttons work. 00:26:12.330 --> 00:26:14.850 We'll get to that in just a little bit. 00:26:14.850 --> 00:26:19.970 So what questions are there now on HTML tags or elements? 00:26:24.118 --> 00:26:26.720 OK, not seeing too many. 00:26:26.720 --> 00:26:29.780 What our website looks like right now is not super pretty. 00:26:29.780 --> 00:26:32.900 Like, it just has this big h1, this paragraph text right in it. 00:26:32.900 --> 00:26:35.300 And that's OK, but we could probably do a little better. 00:26:35.300 --> 00:26:37.850 You can really make the site look a little more clean, a little more 00:26:37.850 --> 00:26:38.700 aesthetic and so on. 00:26:38.700 --> 00:26:40.710 That's where CSS comes in. 00:26:40.710 --> 00:26:43.220 So let's dive into CSS now. 00:26:43.220 --> 00:26:46.460 And let's try thinking about how we could use this. 00:26:46.460 --> 00:26:50.930 But first, what does CSS stand for? 00:26:50.930 --> 00:26:54.095 What are we going to do with CSS and what does it stand for? 00:26:57.290 --> 00:26:59.420 So a cascading stylesheet, right. 00:26:59.420 --> 00:27:02.300 So CSS stands for Cascading Style Sheet. 00:27:02.300 --> 00:27:04.850 And now the style sheet probably is kind of self-explanatory, 00:27:04.850 --> 00:27:07.880 meaning that we're going to apply some styles to our site. 00:27:07.880 --> 00:27:09.870 It's a sheet of styles to apply. 00:27:09.870 --> 00:27:12.350 But what does the cascading part mean? 00:27:12.350 --> 00:27:16.160 Does anyone know? 00:27:16.160 --> 00:27:18.110 What is the C in CSS? 00:27:21.160 --> 00:27:23.080 So I'm seeing inheritance, nice. 00:27:23.080 --> 00:27:27.680 So if we looked at our visual, for example, of our table, 00:27:27.680 --> 00:27:30.310 notice how it kind of looks a bit like a tree, 00:27:30.310 --> 00:27:35.630 and we had this vocabulary of children of certain elements here. 00:27:35.630 --> 00:27:37.690 So button is a child of td. 00:27:37.690 --> 00:27:41.440 Well, if I applied some style to td, well, 00:27:41.440 --> 00:27:44.870 that style might also apply to some of the children of that node. 00:27:44.870 --> 00:27:49.660 So it helps to show that this style, it kind of follows the inheritance 00:27:49.660 --> 00:27:52.780 principle would mean that children the same styles or similar styles 00:27:52.780 --> 00:27:56.790 as their parents at least sometimes. 00:27:56.790 --> 00:27:58.060 OK. 00:27:58.060 --> 00:27:59.860 So let's explore CSS now. 00:27:59.860 --> 00:28:03.520 And when we're talking about CSS, we often talk about this kind of syntax 00:28:03.520 --> 00:28:04.670 on the left hand side. 00:28:04.670 --> 00:28:07.450 We have our structure already for us, but now I 00:28:07.450 --> 00:28:09.670 want to apply some style to it. 00:28:09.670 --> 00:28:12.940 So we can often do this using the syntax on the left hand side here. 00:28:12.940 --> 00:28:16.870 We have a selector to determine what element in our DOM 00:28:16.870 --> 00:28:21.700 or in our website you want to select, and then what property 00:28:21.700 --> 00:28:22.630 do you want to change? 00:28:22.630 --> 00:28:25.480 Meaning what kind of style you want to add, and then 00:28:25.480 --> 00:28:27.130 what value should that property have? 00:28:27.130 --> 00:28:29.450 So for example, let's take a look at this. 00:28:29.450 --> 00:28:32.620 Let's say I want to select all the buttons on my page. 00:28:32.620 --> 00:28:34.160 I could do it like this. 00:28:34.160 --> 00:28:37.390 I could say, select me all the buttons using just 00:28:37.390 --> 00:28:39.220 that plain old button syntax up top. 00:28:39.220 --> 00:28:42.940 And change their background color using this property defined for us 00:28:42.940 --> 00:28:45.070 called background dash color to be red. 00:28:45.070 --> 00:28:48.350 And now I would see behind me that my buttons are red. 00:28:48.350 --> 00:28:51.910 I could also add some more style to that very same selector. 00:28:51.910 --> 00:28:55.450 I could, again, select all my buttons, make the background color red, 00:28:55.450 --> 00:28:56.920 but also add some border. 00:28:56.920 --> 00:29:00.130 So a border is some property in CSS you can use. 00:29:00.130 --> 00:29:03.460 And again, by convention, we define the border 00:29:03.460 --> 00:29:09.230 using this syntax here-- maybe a 4pt or a 4px, whatever system you're using. 00:29:09.230 --> 00:29:12.310 And then dash, to denote that I want the border to be dash. 00:29:12.310 --> 00:29:14.442 We can also do solid if we'd like, too. 00:29:14.442 --> 00:29:16.150 So notice how my buttons have changed now 00:29:16.150 --> 00:29:20.500 to be red, and also have this kind of dash border around them. 00:29:20.500 --> 00:29:23.500 And if you're curious about all of the different properties you can use, 00:29:23.500 --> 00:29:25.083 you could look up a similar reference. 00:29:25.083 --> 00:29:27.770 So I can go maybe to W3Schools again. 00:29:27.770 --> 00:29:31.570 I could search for not a HTML tag reference, but also 00:29:31.570 --> 00:29:37.790 search for a CSS properties reference. 00:29:37.790 --> 00:29:40.780 Now I'll go down here, I see CSS reference from W3 schools. 00:29:40.780 --> 00:29:41.720 I'll click on this. 00:29:41.720 --> 00:29:43.900 And now I see all of the CSS properties I could 00:29:43.900 --> 00:29:46.450 use to add some styles to my code. 00:29:46.450 --> 00:29:51.700 For example, there is accent color, animation, backdrop filter. 00:29:51.700 --> 00:29:54.590 There's so many CSS properties you can use. 00:29:54.590 --> 00:29:57.390 And if you click on any one of these, like background for example, 00:29:57.390 --> 00:29:59.140 you'll be able to see some examples of how 00:29:59.140 --> 00:30:04.387 you might use that CSS property for certain elements in your web page. 00:30:04.387 --> 00:30:06.970 So let's keep going with this and look at a few different ways 00:30:06.970 --> 00:30:10.000 to change some of the colors on our page. 00:30:10.000 --> 00:30:14.380 And maybe one thing we'll run into is that we really want 00:30:14.380 --> 00:30:15.970 these buttons to be different colors. 00:30:15.970 --> 00:30:17.710 They're different teams, right? 00:30:17.710 --> 00:30:21.940 So how could I change the color for these buttons, do you think? 00:30:21.940 --> 00:30:24.560 Feel free to type in the chat. 00:30:24.560 --> 00:30:26.435 How can I make the buttons a different color? 00:30:33.700 --> 00:30:36.340 So I'm seeing different kinds of selectors or classes or IDs. 00:30:36.340 --> 00:30:38.890 So it's good that we have some vocabulary here already. 00:30:38.890 --> 00:30:42.010 And let's focus first on this vocabulary of an ID. 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 00:30:47.380 --> 00:30:50.530 and I've given some element in my HTML page 00:30:50.530 --> 00:30:54.070 a particular ID, some unique ID I can refer to it with. 00:30:54.070 --> 00:30:59.020 So here, let's say I wanted to make the colors different-- one red, one blue. 00:30:59.020 --> 00:31:02.560 Well, I can select different buttons by their ID. 00:31:02.560 --> 00:31:05.350 And if I'm going to select by ID, I need to use 00:31:05.350 --> 00:31:09.020 this hashtag before that selector to say, I am selecting by ID. 00:31:09.020 --> 00:31:11.710 So I can do hashtag, team one dash button, 00:31:11.710 --> 00:31:14.980 give me the selection for a team one button there. 00:31:14.980 --> 00:31:17.005 And hashtag team two dash button team to give me 00:31:17.005 --> 00:31:19.180 a selection for team two button. 00:31:19.180 --> 00:31:23.320 And this supposes-- it presupposes that in our HTML page 00:31:23.320 --> 00:31:25.240 that do have some text like this. 00:31:25.240 --> 00:31:30.130 That the buttons do have an ID attribute specified in the HTML. 00:31:30.130 --> 00:31:32.530 So on the left hand side, we have our CSS. 00:31:32.530 --> 00:31:35.950 On this side, we have our IDs and our HTML. 00:31:35.950 --> 00:31:39.580 And notice how every button does have this ID defined for us 00:31:39.580 --> 00:31:41.980 where one is team one button and the other 00:31:41.980 --> 00:31:47.230 is team two button, using the ID equals and some certain text. 00:31:47.230 --> 00:31:49.210 So we can select by ID. 00:31:49.210 --> 00:31:52.870 We could also do what's called a class selector so maybe 00:31:52.870 --> 00:31:54.520 the ID is good for this. 00:31:54.520 --> 00:31:57.160 But I wanted to change just the header gray, 00:31:57.160 --> 00:32:01.720 I could select all the td's using just that td selector and change 00:32:01.720 --> 00:32:04.030 the background color to be gray, like this. 00:32:04.030 --> 00:32:05.530 But that's not quite what I want. 00:32:05.530 --> 00:32:11.200 I only wanted the top td's to be actually a background color of gray. 00:32:11.200 --> 00:32:13.150 So I could apply a class. 00:32:13.150 --> 00:32:16.270 A class lets me apply some element or some style 00:32:16.270 --> 00:32:19.813 to any elements that have that same class. 00:32:19.813 --> 00:32:22.480 Notice how I'm not using the hashtag anymore-- that was for IDs. 00:32:22.480 --> 00:32:26.680 I'm using the dot for classes, saying that every element with the class title 00:32:26.680 --> 00:32:29.450 should get this style of defined in here. 00:32:29.450 --> 00:32:33.160 So for example, if I look at my HTML, I must have this defined now. 00:32:33.160 --> 00:32:37.450 I should make sure that every element that I want to apply this style to 00:32:37.450 --> 00:32:41.850 has that same class on the right hand side. 00:32:41.850 --> 00:32:49.182 So what questions are there on these selectors or classes? 00:32:49.182 --> 00:32:50.390 I'm seeing one question here. 00:32:50.390 --> 00:32:54.800 So what would the perks be of using classes over IDs and vise versa? 00:32:54.800 --> 00:32:58.030 So classes are good when you want to define 00:32:58.030 --> 00:33:00.950 some style across multiple elements. 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. 00:33:05.110 --> 00:33:07.160 A class would be great. 00:33:07.160 --> 00:33:10.960 But if I wanted to apply a style to a particular element, only 00:33:10.960 --> 00:33:13.880 a single element, an ID would be useful there. 00:33:13.880 --> 00:33:20.170 So classes can apply to multiple elements, IDs apply to one element. 00:33:20.170 --> 00:33:24.070 And a question here, too, can we use RGB codes in the CSS 00:33:24.070 --> 00:33:28.250 instead of using text like red or blue or gray as I've shown here? 00:33:28.250 --> 00:33:29.350 So you absolutely can. 00:33:29.350 --> 00:33:32.857 In CSS, you're allowed to define colors in a variety of ways. 00:33:32.857 --> 00:33:35.440 And let me actually try to do the same thing in my code space. 00:33:35.440 --> 00:33:36.860 I'll go back over here. 00:33:36.860 --> 00:33:39.670 And let's say I wanted, well, this button here 00:33:39.670 --> 00:33:44.930 to be a dark blue background, and this one to be like a light blue background. 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. 00:33:49.450 --> 00:33:51.880 I have to add this to my style element. 00:33:51.880 --> 00:33:56.680 I'll say, let me select the add one button using its ID. 00:33:56.680 --> 00:33:59.080 Hashtag add one. 00:33:59.080 --> 00:34:00.940 And then I'll go in and I'll say this. 00:34:00.940 --> 00:34:06.070 I'll say that I want the background color to be, maybe in this case-- 00:34:06.070 --> 00:34:08.630 I'll look up a different actual hex code here. 00:34:08.630 --> 00:34:13.460 So I'll maybe look up Duke University blue. 00:34:13.460 --> 00:34:15.949 And I'll go to the colors brand guide here. 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, 00:34:21.409 --> 00:34:24.980 is this hex code-- hashtag 012169. 00:34:24.980 --> 00:34:26.360 I'll copy and paste it. 00:34:26.360 --> 00:34:30.139 I'll go back to my scoreboard, add this element here. 00:34:30.139 --> 00:34:34.739 And now if I refresh the page, I should see-- 00:34:34.739 --> 00:34:39.570 if it loads, a Navy blue background in that same color. 00:34:39.570 --> 00:34:42.765 But maybe it's going to give me a minute to load here. 00:34:45.929 --> 00:34:47.820 OK, we'll wait for that to load. 00:34:47.820 --> 00:34:51.820 But in general, you can use this kind of syntax here with hex codes, 00:34:51.820 --> 00:34:53.320 or you could do something like this. 00:34:53.320 --> 00:34:57.840 I could say RGB, and you could also do some combination of RGB colors. 00:34:57.840 --> 00:35:03.510 I could say 128, 255, maybe 0 here to create some color. 00:35:03.510 --> 00:35:09.590 I don't need to just say blue or light blue or so on. 00:35:09.590 --> 00:35:14.100 Let me go ahead and see some other ones. 00:35:14.100 --> 00:35:14.940 Question about IDs. 00:35:14.940 --> 00:35:16.420 Can they only be used once? 00:35:16.420 --> 00:35:17.160 So yes. 00:35:17.160 --> 00:35:20.580 The definition of an ID is it can only be used once. 00:35:20.580 --> 00:35:26.640 If I go down below here, notice how this button is labeled add one, right? 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. 00:35:31.410 --> 00:35:32.550 I can't do this. 00:35:32.550 --> 00:35:37.422 Each one has to have its own unique ID. 00:35:37.422 --> 00:35:39.130 Let me look at some other questions here. 00:35:43.860 --> 00:35:48.520 Wouldn't it be better to use a class like blue button or red button? 00:35:48.520 --> 00:35:52.950 A class is great if you know you want to have multiple red or blue buttons. 00:35:52.950 --> 00:35:57.300 If I wanted this to be not the only button I have, but maybe 00:35:57.300 --> 00:35:59.670 multiple buttons that are blue, a class would be great, 00:35:59.670 --> 00:36:01.378 because again, an ID is a bit of a show-- 00:36:01.378 --> 00:36:02.700 one element here. 00:36:05.250 --> 00:36:08.470 Another question here, does CSS only work in HTML? 00:36:08.470 --> 00:36:13.590 So here we're defining our CSS inside of our HTML page using the style element, 00:36:13.590 --> 00:36:14.650 but we don't have to. 00:36:14.650 --> 00:36:24.000 We could define, if we wanted to, our very own CSS file here. 00:36:24.000 --> 00:36:29.330 I could code maybe styles, styles.css. 00:36:29.330 --> 00:36:30.440 And I could add-- 00:36:30.440 --> 00:36:33.140 I could simply just take all of my styles 00:36:33.140 --> 00:36:38.950 here, copy and paste them over to styles.css. 00:36:38.950 --> 00:36:41.710 And now I've separated those styles away. 00:36:41.710 --> 00:36:46.420 I do have to be sure though that in my HTML, 00:36:46.420 --> 00:36:51.250 I have a link element that links in my styles.css. 00:36:51.250 --> 00:36:54.010 And you can look up how to link in your stylesheet if you'd like, 00:36:54.010 --> 00:36:59.080 but here we'll focus for now just on creating our styles inside 00:36:59.080 --> 00:37:00.625 of our HTML page itself. 00:37:03.990 --> 00:37:06.060 OK, let's see if this might have loaded. 00:37:06.060 --> 00:37:08.655 I'll go back to what I had before. 00:37:13.120 --> 00:37:14.680 OK, I'll save that. 00:37:14.680 --> 00:37:18.140 I'll go over here, hit refresh. 00:37:18.140 --> 00:37:21.470 And now I see that is a dark blue button. 00:37:21.470 --> 00:37:24.500 And maybe I could, just for consistency, look up UNC blue. 00:37:24.500 --> 00:37:29.040 I'll go ahead and over here look up, UNC blue hex code. 00:37:29.040 --> 00:37:33.540 And it seems that it's hashtag 7BAFD4, by chance. 00:37:33.540 --> 00:37:36.030 And I'll go ahead and say for the add two button, 00:37:36.030 --> 00:37:39.260 let's make that background color this. 00:37:39.260 --> 00:37:42.560 I'll refresh the page again. 00:37:42.560 --> 00:37:46.930 And now I see that that has that now, UNC blue color here. 00:37:46.930 --> 00:37:48.930 So other questions on this CSS? 00:37:59.640 --> 00:38:03.080 So one final thing I'd like to do is maybe try to make sure 00:38:03.080 --> 00:38:04.242 that my text is centered. 00:38:04.242 --> 00:38:06.950 This is a good use case for a class, as you all have been saying. 00:38:06.950 --> 00:38:11.220 So maybe I want to say multiple elements in my page, I want to be centered. 00:38:11.220 --> 00:38:15.240 So what I could do is I could make a new class called centered. 00:38:15.240 --> 00:38:17.590 And I could say that a property of this class 00:38:17.590 --> 00:38:21.470 is that the text alignment, text align is centered. 00:38:21.470 --> 00:38:23.350 And if I looked up CSS properties, I would 00:38:23.350 --> 00:38:26.980 know that text align line is a way of aligning some text on the page. 00:38:26.980 --> 00:38:28.840 And center, if I give it that value, will 00:38:28.840 --> 00:38:30.800 mean that my text will be centered. 00:38:30.800 --> 00:38:34.540 So now I can go to my h1 over here and apply that class. 00:38:34.540 --> 00:38:37.930 I could say that the class for this is centered, 00:38:37.930 --> 00:38:39.820 the same thing I have defined up here. 00:38:39.820 --> 00:38:42.580 Notice how I'm not using the dot-- the dot is just for CSS. 00:38:42.580 --> 00:38:45.580 Select any element with this class. 00:38:45.580 --> 00:38:50.830 And in my p tag, my p element, also say, this is centered, too. 00:38:50.830 --> 00:38:53.140 And now I can refresh the page, and hopefully I'll 00:38:53.140 --> 00:38:55.585 see my text now centered on that page. 00:38:58.710 --> 00:38:59.635 OK. 00:38:59.635 --> 00:39:01.260 Other questions here before we move on? 00:39:08.088 --> 00:39:08.880 Ah, great question. 00:39:08.880 --> 00:39:10.500 Why not just make body centered? 00:39:10.500 --> 00:39:11.970 Oh, nice. 00:39:11.970 --> 00:39:13.822 So some design questions coming up here. 00:39:13.822 --> 00:39:15.780 If I want everything to be centered in my body, 00:39:15.780 --> 00:39:17.350 why don't I just apply it higher up? 00:39:17.350 --> 00:39:21.220 I could say body as this class centered. 00:39:21.220 --> 00:39:25.360 And I could perhaps take it off of h1 and take it off of p. 00:39:25.360 --> 00:39:28.090 I'll save my file, refresh it, and see if that works. 00:39:28.090 --> 00:39:28.780 It does. 00:39:28.780 --> 00:39:31.760 And now I've used fewer pieces of text on my page. 00:39:31.760 --> 00:39:34.660 I've also made it clear that I want my entire body 00:39:34.660 --> 00:39:37.163 to have text that is centered. 00:39:37.163 --> 00:39:37.830 A great comment. 00:39:43.570 --> 00:39:45.310 OK. 00:39:45.310 --> 00:39:49.310 So just to preempt some questions. 00:39:49.310 --> 00:39:52.240 One thing we wondered about before was, how does this button work? 00:39:52.240 --> 00:39:55.090 I can click plus one here and plus one here. 00:39:55.090 --> 00:39:59.830 And I see that I'm getting a different number on the page for each team. 00:39:59.830 --> 00:40:03.430 But how could I try to get a feel for how this works? 00:40:03.430 --> 00:40:06.490 Well, if I look at my page, I'll go down below 00:40:06.490 --> 00:40:09.880 and I'll see that I have this script tag here. 00:40:09.880 --> 00:40:13.300 Opening tag for script and closing tag for script. 00:40:13.300 --> 00:40:15.250 And inside of this-- 00:40:15.250 --> 00:40:20.920 inside of this, I have some variables and a lot of text over here 00:40:20.920 --> 00:40:22.990 that might not make much sense to us at first. 00:40:22.990 --> 00:40:24.820 And this is an example of JavaScript. 00:40:24.820 --> 00:40:27.490 So JavaScript is now embedded in our page. 00:40:27.490 --> 00:40:31.690 And this text will run, top to bottom, whenever our web page is loaded. 00:40:31.690 --> 00:40:37.150 So at the time that I refresh this page, this script runs from top to bottom 00:40:37.150 --> 00:40:38.990 and it finishes, likely. 00:40:38.990 --> 00:40:41.485 So what I'll do is I'll try to break this down for you 00:40:41.485 --> 00:40:44.110 and see if we can understand a bit of what JavaScript is doing. 00:40:44.110 --> 00:40:46.540 It's a little bit different than you might expect from a C code or Python 00:40:46.540 --> 00:40:48.400 code that you're used to so far. 00:40:48.400 --> 00:40:50.450 So we'll go back to our slides over here. 00:40:50.450 --> 00:40:54.290 And we'll try to think about the way that JavaScript is working for us. 00:40:54.290 --> 00:40:57.220 So on our page, we notice the script tag. 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. 00:41:01.190 --> 00:41:04.630 So the very first thing we'll do is create two new variables, 00:41:04.630 --> 00:41:08.440 one called team one and one called team two, and set them equal to zero. 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 00:41:13.217 --> 00:41:14.050 is going to be zero. 00:41:14.050 --> 00:41:16.270 So pretty basic stuff. 00:41:16.270 --> 00:41:18.880 But next, we actually have something a little bit different. 00:41:18.880 --> 00:41:20.510 Maybe we haven't seen this before. 00:41:20.510 --> 00:41:23.650 We have some text like document, dot, dot, dot some 00:41:23.650 --> 00:41:26.890 other things that happen after it, equals some function, 00:41:26.890 --> 00:41:28.820 and that function is defined for us. 00:41:28.820 --> 00:41:34.930 So we're saying that some entity, some attribute, equals some function. 00:41:34.930 --> 00:41:36.850 It gets the value of some function. 00:41:36.850 --> 00:41:41.800 In JavaScript, the goal is often to define some events 00:41:41.800 --> 00:41:45.520 that the user can do on the page and then define 00:41:45.520 --> 00:41:48.440 what should happen when the user takes that event. 00:41:48.440 --> 00:41:53.590 So a script, in this sense, is mostly trying to set up something to happen, 00:41:53.590 --> 00:41:55.930 something to be triggered later on, and define 00:41:55.930 --> 00:41:58.613 the code we want to have running when that event happens. 00:41:58.613 --> 00:42:00.280 So this is what that code is doing here. 00:42:00.280 --> 00:42:02.740 It's kind of metaphorically doing this for us. 00:42:02.740 --> 00:42:04.540 We're trying to set up some kind of button 00:42:04.540 --> 00:42:07.670 over here, that when that button is pressed, 00:42:07.670 --> 00:42:11.500 I want to run some kind of code-- the function we've defined. 00:42:11.500 --> 00:42:16.150 And by setting this kind of entity equal to this function here, 00:42:16.150 --> 00:42:20.420 I'm wiring this button to that piece of code. 00:42:20.420 --> 00:42:23.930 Now whenever I trigger this, maybe when the user clicks on a button, 00:42:23.930 --> 00:42:26.980 for example, I will then run this piece of code. 00:42:26.980 --> 00:42:30.730 So this script has set up this trigger for me, for the user, 00:42:30.730 --> 00:42:34.482 to actually run this code later on when I press that button there. 00:42:34.482 --> 00:42:36.440 And the same thing for what happens afterwards. 00:42:36.440 --> 00:42:40.360 So I see document, blah, blah, equals some function that we define. 00:42:40.360 --> 00:42:44.080 And again, what this is doing is saying that when I press a particular button 00:42:44.080 --> 00:42:50.600 or take action, I want to run some function in response to the user here. 00:42:50.600 --> 00:42:53.050 So I'm going to break this down a little bit more 00:42:53.050 --> 00:42:56.200 and actually dive deeper into what these dot, dot, dots are doing. 00:42:56.200 --> 00:43:01.180 So on the code itself we'll see document.querySelector, 00:43:01.180 --> 00:43:02.890 hashtag add one. 00:43:02.890 --> 00:43:05.320 This is like our first step in that code. 00:43:05.320 --> 00:43:09.250 And what looks familiar here? 00:43:09.250 --> 00:43:11.210 Already. 00:43:11.210 --> 00:43:12.920 What have we maybe seen before? 00:43:12.920 --> 00:43:14.510 The hashtag and the ID. 00:43:14.510 --> 00:43:17.420 OK, so what do you think this is doing? 00:43:17.420 --> 00:43:22.430 Just based on the semantics of it, with the text that we're reading. 00:43:22.430 --> 00:43:24.215 Document.querySelector. 00:43:27.640 --> 00:43:32.290 It's selecting some element and it's selecting the element that has this ID. 00:43:32.290 --> 00:43:37.060 So document.querySelector is a way of saying go through my document object 00:43:37.060 --> 00:43:42.040 model, go through your HTML elements and find me that one that has the ID, 00:43:42.040 --> 00:43:43.073 add one. 00:43:43.073 --> 00:43:44.240 OK, so let's visualize this. 00:43:44.240 --> 00:43:48.790 So when I run this piece of code, I will go through my document object model 00:43:48.790 --> 00:43:52.270 and I will try to find that element that has the ID add one. 00:43:52.270 --> 00:43:55.780 I'll start here, keep searching, keep searching, keep searching, 00:43:55.780 --> 00:43:57.460 going down through my tree. 00:43:57.460 --> 00:44:01.390 Searching, searching, searching, until I get to that button that does 00:44:01.390 --> 00:44:03.640 have that ID add one. 00:44:03.640 --> 00:44:05.680 And now I have selected that button. 00:44:05.680 --> 00:44:09.130 I now have it kind of inside of, quote unquote, my JavaScript code, 00:44:09.130 --> 00:44:12.800 and I can add an attribute to it or change how it works. 00:44:12.800 --> 00:44:15.610 And in particular, I'd like to find some attribute called 00:44:15.610 --> 00:44:17.350 the on-click attribute. 00:44:17.350 --> 00:44:20.020 So document.querySelector, hashtag add one. 00:44:20.020 --> 00:44:22.900 That gives me that button with the ID, add one. 00:44:22.900 --> 00:44:27.670 And then dot on click is saying that I want the attribute called 00:44:27.670 --> 00:44:30.400 on click of this button to be equal to this function, 00:44:30.400 --> 00:44:34.660 meaning that when the user clicks this button, I want to run this function, 00:44:34.660 --> 00:44:35.930 in this case. 00:44:35.930 --> 00:44:38.170 So let's get a visual for this here. 00:44:38.170 --> 00:44:41.660 We'll go back to our code. 00:44:41.660 --> 00:44:44.960 And we'll see what's going on inside. 00:44:44.960 --> 00:44:46.810 So we're kind of familiar with this now. 00:44:46.810 --> 00:44:50.380 We're selecting our element with the ID add one, 00:44:50.380 --> 00:44:54.413 saying that when it is clicked, I want to run this function here. 00:44:54.413 --> 00:44:55.330 But what are we doing? 00:44:55.330 --> 00:44:56.663 What is this line of code doing? 00:44:56.663 --> 00:44:59.560 Team one equals team one plus one. 00:44:59.560 --> 00:45:00.880 What is that doing for us? 00:45:08.480 --> 00:45:09.730 Incrementing the score, right. 00:45:09.730 --> 00:45:14.090 So we'll say team one is currently zero, but we'll add one to it. 00:45:14.090 --> 00:45:16.210 So the first time I click that button, zero 00:45:16.210 --> 00:45:21.120 will become one, then two, then three, as I click this button. 00:45:21.120 --> 00:45:23.520 And then what am I doing here? 00:45:23.520 --> 00:45:25.475 We've seen this before. 00:45:25.475 --> 00:45:26.475 What am I selecting now? 00:45:33.350 --> 00:45:35.030 Some data. 00:45:35.030 --> 00:45:38.980 More particularly though, what am I selecting? 00:45:38.980 --> 00:45:40.900 I see hashtag score one. 00:45:40.900 --> 00:45:43.580 So I'm selecting the element with the ID score one. 00:45:43.580 --> 00:45:44.580 Well, what is that? 00:45:44.580 --> 00:45:49.690 That is this text up here, this table data that has an zero inside of it, 00:45:49.690 --> 00:45:50.590 initially. 00:45:50.590 --> 00:45:54.220 But what I could do is change its inner HTML. 00:45:54.220 --> 00:45:57.940 The inner HTML attribute I will change to be what team one is. 00:45:57.940 --> 00:46:00.760 So on my page, I'm literally kind of going in here. 00:46:00.760 --> 00:46:05.790 I'm selecting this element here, getting its inner HTML, this part, and saying, 00:46:05.790 --> 00:46:09.990 that becomes whatever team one is, which can be as one, or two, or three. 00:46:09.990 --> 00:46:14.130 So it changed my HTML for me more dynamically. 00:46:14.130 --> 00:46:18.000 And just to prove the point to you, what I can do is comment this out. 00:46:18.000 --> 00:46:22.200 I could remove this and remove this down here. 00:46:22.200 --> 00:46:24.630 And now notice how if I refresh the page-- 00:46:24.630 --> 00:46:27.360 go back over here, refresh the page. 00:46:27.360 --> 00:46:31.510 I hit plus one, but I don't see the change. 00:46:31.510 --> 00:46:34.030 The variable itself is updating in JavaScript, 00:46:34.030 --> 00:46:36.280 but it's not actually updating on my page, right? 00:46:36.280 --> 00:46:37.790 So let me try this. 00:46:37.790 --> 00:46:41.260 Let me go ahead and uncomment this. 00:46:41.260 --> 00:46:43.040 And now I'll show you the page source. 00:46:43.040 --> 00:46:44.830 I'll go ahead and do this. 00:46:44.830 --> 00:46:50.750 Show you my page source over here, go into the main part, table, table body. 00:46:50.750 --> 00:46:52.030 This second row of tr's. 00:46:52.030 --> 00:46:55.050 And now I see that ID score one, and score two. 00:46:55.050 --> 00:46:57.300 Well, I'll click plus one now. 00:46:57.300 --> 00:46:59.680 Let me refresh the page again. 00:46:59.680 --> 00:47:02.450 Plus one, and I see it changing as I go. 00:47:02.450 --> 00:47:06.400 So notice how if I zoom in maybe just a little bit more 00:47:06.400 --> 00:47:11.750 on this right hand side, I see that number updating 00:47:11.750 --> 00:47:14.545 as I go through on both sides. 00:47:18.940 --> 00:47:21.180 Now some handy tips as you're working in JavaScript-- 00:47:21.180 --> 00:47:24.250 this often won't work as you intend it to from the very beginning. 00:47:24.250 --> 00:47:27.130 So let's say in my code, I had some syntax error. 00:47:27.130 --> 00:47:31.650 I typed plus one and then made a missing keystroke, like this. 00:47:31.650 --> 00:47:33.600 Some random text in my code. 00:47:33.600 --> 00:47:36.310 This is maybe kind of obvious to me, but if I'm running on a page 00:47:36.310 --> 00:47:41.442 now, I refresh the page, well, I don't see things not working. 00:47:41.442 --> 00:47:43.650 I mean, I see them not working, but I don't know why. 00:47:43.650 --> 00:47:45.790 I hit plus one here, plus one over here. 00:47:45.790 --> 00:47:46.710 But what is wrong? 00:47:46.710 --> 00:47:47.760 I don't know. 00:47:47.760 --> 00:47:50.533 What I can do is actually go over to my console. 00:47:50.533 --> 00:47:53.200 And this might be named different things in a different browser. 00:47:53.200 --> 00:47:55.600 But in Chrome, it's called console. 00:47:55.600 --> 00:47:58.270 And I see my JavaScript console. 00:47:58.270 --> 00:47:59.770 And I can see some errors here. 00:47:59.770 --> 00:48:04.390 Uncaught Syntax error, unexpected identifier, awejf. 00:48:04.390 --> 00:48:08.403 So that is a clarification or a hint to me saying that look, 00:48:08.403 --> 00:48:10.570 I need to go ahead and go look at my JavaScript code 00:48:10.570 --> 00:48:13.850 again and think of my syntax, which will allow me to get rid of this 00:48:13.850 --> 00:48:16.010 so I can fix that error there. 00:48:16.010 --> 00:48:19.227 So not to worry if your code doesn't work as intended at the very beginning. 00:48:19.227 --> 00:48:21.310 It's always helpful to have some console over here 00:48:21.310 --> 00:48:27.010 to help you figure out what is actually going wrong. 00:48:27.010 --> 00:48:30.060 So questions on this JavaScript so far? 00:48:30.060 --> 00:48:31.415 Are we feeling OK? 00:48:34.010 --> 00:48:35.990 So I'm seeing a good question here. 00:48:35.990 --> 00:48:39.560 This question is, what is the difference between dot 00:48:39.560 --> 00:48:42.740 on click, or this on click attribute, and saying 00:48:42.740 --> 00:48:44.850 add event listener for a click. 00:48:44.850 --> 00:48:47.460 So there are maybe two ways I could approach this. 00:48:47.460 --> 00:48:49.730 One way is this way as I've done below here. 00:48:49.730 --> 00:48:52.850 I'm saying that I want to get the add one button 00:48:52.850 --> 00:48:56.810 and set its on-click attribute to be this function. 00:48:56.810 --> 00:48:58.080 I could also do this. 00:48:58.080 --> 00:49:03.230 I could say, let me get my button that has the ID, 00:49:03.230 --> 00:49:08.780 add one, and then make sure that it has some event listener. 00:49:08.780 --> 00:49:14.420 And event listener, where an event is some action the user takes. 00:49:14.420 --> 00:49:17.380 Maybe they make a click, right? 00:49:17.380 --> 00:49:19.480 And then what I could do is specify the function 00:49:19.480 --> 00:49:21.580 I want to run when the user clicks. 00:49:21.580 --> 00:49:23.800 And I think the syntax will be a bit like this. 00:49:23.800 --> 00:49:26.710 Function, dah, dah, dah. 00:49:26.710 --> 00:49:32.410 And now I can define the function I want to run when this button is clicked. 00:49:32.410 --> 00:49:34.760 And I'll just put dot, dot, dots here for now. 00:49:34.760 --> 00:49:36.940 These are the very same thing. 00:49:36.940 --> 00:49:40.720 All this is doing is simply setting up some function 00:49:40.720 --> 00:49:44.200 to run when this button is clicked. 00:49:44.200 --> 00:49:46.930 And it just so happens that a button-- because it's 00:49:46.930 --> 00:49:49.870 so common to click buttons, buttons already 00:49:49.870 --> 00:49:52.180 have an attribute, a built-in attribute called 00:49:52.180 --> 00:49:55.450 on click, that allows me to define a function that they 00:49:55.450 --> 00:49:57.940 should run when the button is clicked. 00:49:57.940 --> 00:50:01.300 But I could add this event listener to not just a button 00:50:01.300 --> 00:50:02.842 but some table or some text. 00:50:02.842 --> 00:50:05.050 If I want something to happen when I click some text, 00:50:05.050 --> 00:50:09.700 I could add this event listener called click or add this event listener, 00:50:09.700 --> 00:50:12.950 listen for a click and then run some function in the end. 00:50:12.950 --> 00:50:15.700 So I hope that helps clarify the difference-- really, 00:50:15.700 --> 00:50:18.460 the lack of a difference between these two approaches here. 00:50:21.100 --> 00:50:23.420 Other questions here? 00:50:23.420 --> 00:50:24.460 How do the page update? 00:50:24.460 --> 00:50:25.960 Is it from the server or the client? 00:50:25.960 --> 00:50:27.200 This is a good question. 00:50:27.200 --> 00:50:31.390 So the page always updates when I request it to update. 00:50:31.390 --> 00:50:34.300 So notice how I can hit Refresh up on my top left hand sidebar, 00:50:34.300 --> 00:50:35.650 and you probably can, too. 00:50:35.650 --> 00:50:39.440 When I hit Refresh, I then make another request to the server to say, 00:50:39.440 --> 00:50:41.740 give me the latest page that you see there. 00:50:41.740 --> 00:50:44.210 And the server then gives me that back, that page. 00:50:44.210 --> 00:50:47.710 So the update process is both from the client and the server, 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, 00:50:52.330 --> 00:50:55.810 and the server then has to give it back to me through my HTTP protocol. 00:51:00.900 --> 00:51:02.210 OK. 00:51:02.210 --> 00:51:06.140 So one final touch that we'll make here is 00:51:06.140 --> 00:51:09.770 trying to figure out how we could determine a team that wins this game. 00:51:09.770 --> 00:51:12.710 And ideally, we'd love for a team to win the game, 00:51:12.710 --> 00:51:15.110 maybe when they have a certain number of points. 00:51:15.110 --> 00:51:18.350 And we can maybe alert the user to say that this team has won. 00:51:18.350 --> 00:51:21.350 So let's say we want a team to win when they get to eight points. 00:51:21.350 --> 00:51:23.940 Well, we could do this in a few different ways. 00:51:23.940 --> 00:51:27.380 And in JavaScript, we have this way of asking a question using that same if 00:51:27.380 --> 00:51:28.590 statement from before. 00:51:28.590 --> 00:51:30.240 So very familiar to us. 00:51:30.240 --> 00:51:31.585 We can go back to our code here. 00:51:31.585 --> 00:51:33.710 And maybe we could ask the question at the very end 00:51:33.710 --> 00:51:40.130 and say, if team one is greater than 10, well, let's go ahead and-- 00:51:40.130 --> 00:51:47.460 not print, but alert the user that team one has won, like this. 00:51:47.460 --> 00:51:49.890 And we could also ask the other question saying, OK, 00:51:49.890 --> 00:51:55.380 if team two is greater than 10, what's wrong here? 00:51:55.380 --> 00:51:56.890 That's right. 00:51:56.890 --> 00:51:57.390 Sorry. 00:51:57.390 --> 00:52:00.030 Team two has won. 00:52:00.030 --> 00:52:02.850 Like that. 00:52:02.850 --> 00:52:05.790 But if I were to run this and I go to my scoreboard over here, 00:52:05.790 --> 00:52:14.250 hit Refresh and go to team one, I can go way past 10 without getting notified 00:52:14.250 --> 00:52:15.600 or alerted. 00:52:15.600 --> 00:52:16.785 So what's the problem? 00:52:20.370 --> 00:52:21.705 Take a look at my code here. 00:52:24.910 --> 00:52:28.682 I do have this conditional. 00:52:28.682 --> 00:52:29.890 But why didn't I get alerted? 00:52:38.150 --> 00:52:39.695 There is no else, that's true. 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 00:52:48.390 --> 00:52:50.010 refresh that page, or I ask for it. 00:52:50.010 --> 00:52:50.800 I load the page. 00:52:50.800 --> 00:52:52.420 So here I will refresh the page. 00:52:52.420 --> 00:52:55.460 And now that script is done running. 00:52:55.460 --> 00:52:58.190 I've run from top to bottom. 00:52:58.190 --> 00:53:00.680 So what would happen there? 00:53:00.680 --> 00:53:05.950 Well, I would see that team one is zero, team two is zero. 00:53:05.950 --> 00:53:09.970 I will set up my event listeners here, define the functions 00:53:09.970 --> 00:53:12.430 I want to run when the user clicks the button, 00:53:12.430 --> 00:53:15.790 and then I'll ask that question, is team one greater than 10, 00:53:15.790 --> 00:53:17.350 is team two greater than 10? 00:53:17.350 --> 00:53:19.270 Well, I haven't put this in a loop. 00:53:19.270 --> 00:53:22.730 I'm just going to ask that question at the beginning and only once. 00:53:22.730 --> 00:53:26.830 So where would it be more appropriate for me to ask this question? 00:53:26.830 --> 00:53:31.170 I could do a while loop but I really only need 00:53:31.170 --> 00:53:34.620 to ask the question when I click on a button. 00:53:34.620 --> 00:53:37.440 And I can maybe do this if I said OK, well, let me go ahead 00:53:37.440 --> 00:53:42.430 and update the score and then ask that question. 00:53:42.430 --> 00:53:49.860 I'll say if team one is greater than 10, let's alert the user. 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. 00:53:56.095 --> 00:53:57.720 And I'll do the same thing in team two. 00:54:00.260 --> 00:54:02.090 Over here. 00:54:02.090 --> 00:54:04.820 I'll do this. 00:54:04.820 --> 00:54:07.600 So now I'm asking this question every time 00:54:07.600 --> 00:54:10.780 I click the button, because all this is doing is setting up, 00:54:10.780 --> 00:54:14.960 whenever this button is clicked, run this function, every time. 00:54:14.960 --> 00:54:17.450 So I'll go refresh the page here. 00:54:17.450 --> 00:54:20.680 I'll hit plus one on team one, , plus, plus, plus, again, and again, 00:54:20.680 --> 00:54:21.550 and again. 00:54:21.550 --> 00:54:22.660 Now we're at 10 points. 00:54:22.660 --> 00:54:25.720 But if I get to 11, well, team one has won. 00:54:25.720 --> 00:54:29.980 So I've pressed the button, updated the score, asked the question, 00:54:29.980 --> 00:54:33.385 and now it is true that team one is greater than 10 points. 00:54:35.920 --> 00:54:37.570 And we're saying, what if it's a draw? 00:54:37.570 --> 00:54:38.450 Well, we could do this. 00:54:38.450 --> 00:54:40.283 We could-- actually, that's a good question. 00:54:40.283 --> 00:54:41.790 Let's hit Refresh here. 00:54:41.790 --> 00:54:46.200 Get team one to 10 points, get team two to 10 points. 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 00:54:50.700 --> 00:54:53.760 to team two and now team two has won. 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. 00:54:58.360 --> 00:55:00.420 So there's probably some more logic to add here, 00:55:00.420 --> 00:55:02.550 but I could leave that part up to you for now. 00:55:02.550 --> 00:55:04.110 Here we're just trying to figure out if the team has 00:55:04.110 --> 00:55:05.790 a certain number of points in the end. 00:55:10.460 --> 00:55:17.000 So what questions do you have on this implementation of JavaScript here? 00:55:28.530 --> 00:55:33.140 Which jobs can we do with the document tag? 00:55:33.140 --> 00:55:37.010 Feel free to ask more specifically, too, if you'd like. 00:55:37.010 --> 00:55:38.580 I can answer your question here. 00:55:38.580 --> 00:55:41.960 But if we look at this document tag, I believe 00:55:41.960 --> 00:55:43.850 maybe you're referring to this one? 00:55:43.850 --> 00:55:47.240 The goal of this one is simply to say the name of our file, 00:55:47.240 --> 00:55:48.560 like the HTML file. 00:55:48.560 --> 00:55:50.300 This is going to be an HTML file. 00:55:50.300 --> 00:55:53.210 The dock type of this will be HTML. 00:55:53.210 --> 00:55:56.990 And just to show our visual again with a document element above, 00:55:56.990 --> 00:56:00.500 go back to my slides over here. 00:56:00.500 --> 00:56:01.810 Let me find this, actually. 00:56:04.720 --> 00:56:09.360 I think it was up here. 00:56:09.360 --> 00:56:11.580 The document we have at the very top. 00:56:11.580 --> 00:56:15.180 This is simply, by convention, all HTML files 00:56:15.180 --> 00:56:17.580 do have this kind of document element at the very top. 00:56:17.580 --> 00:56:20.470 And it's a way of starting at the top of our file and moving down. 00:56:20.470 --> 00:56:23.250 So notice how in our JavaScript code-- 00:56:23.250 --> 00:56:30.640 in our JavaScript code over here, we started with document.querySelector. 00:56:30.640 --> 00:56:35.440 So that's saying start at the document element, that very top level element, 00:56:35.440 --> 00:56:39.730 and go ahead and find me that element that has the ID, add one. 00:56:43.300 --> 00:56:44.510 A question here. 00:56:44.510 --> 00:56:47.320 How do you decide the size of your buttons? 00:56:47.320 --> 00:56:48.940 Well, that's a good job for CSS. 00:56:48.940 --> 00:56:51.610 So CSS has these properties like width or height 00:56:51.610 --> 00:56:53.920 you could use to determine the size of your button, 00:56:53.920 --> 00:56:56.440 as long as you apply those styles to your button. 00:56:59.900 --> 00:57:02.690 Question here, would a CSS file have a dock type tag, too? 00:57:02.690 --> 00:57:03.950 In fact, it actually wouldn't. 00:57:03.950 --> 00:57:07.280 And I think this is, again, just something that was decided long ago, 00:57:07.280 --> 00:57:09.810 there's not so much a reason for it. 00:57:09.810 --> 00:57:12.320 If I go to my code space here and show you 00:57:12.320 --> 00:57:16.460 the CSS file we really didn't use here codestyles.css, 00:57:16.460 --> 00:57:20.690 I don't need to have a dock type tag up here. 00:57:24.410 --> 00:57:26.333 All right. 00:57:26.333 --> 00:57:28.000 So I'm seeing some other questions here. 00:57:28.000 --> 00:57:29.650 And I'm happy to stick around and answer those. 00:57:29.650 --> 00:57:31.530 But for now, let's actually wrap officially. 00:57:31.530 --> 00:57:32.820 This is our entire section. 00:57:32.820 --> 00:57:37.058 We've gotten through adding some HTML elements, styling them with CSS, 00:57:37.058 --> 00:57:39.600 and then adding some JavaScript to make our code interactive. 00:57:39.600 --> 00:57:42.032 So we'll probably end officially here, but thank you 00:57:42.032 --> 00:57:43.240 all so much for coming today. 00:57:43.240 --> 00:57:47.210 It was wonderful to see you and we'll see you next time.