CARTER ZENKE: Well, hello one and all and welcome to CS50s week eight section. My name is Carter Zenke. I'm the courses preceptor here on campus. And the goal of these sections is to help you bridge the gap between lecture and this week's problem set. So together, we'll be diving into some HTML, some CSS, some JavaScript, even HTTP. We'll learn more about all of those things and you'll get a chance to ask your questions for us to work on the exercises together and hope by the end you have all the more comfort and familiarity with these topics from this week. 

So if you'd like to, feel free to say a brief hello in the chat. And what we'll do on the count of three, so I'll ask you all to unmute and we'll all say hello together from all different places we are around the world. So on the count of three we'll unmute and we'll do one two three-- 

AUDIENCE: (EVERYONE) Hello! 

CARTER ZENKE: All right, it's so good to see your faces and hear your voices. And this week we'll dive into a few different topics together. So again, this is week 8, and in week 8, we touch a lot on web programming. What does it mean to build websites and actually create your very own web pages? So this week have four different topics we could discuss. We have this idea of HTTP, this idea of HTML, CSS, and JavaScript. There's a lot of acronyms here, so we'll try to break down what each of these acronyms means. 

But our goal will be to walk through each of these kind of step by step, and by the end, have modified and created our very own scoreboard website all the way from scratch. So let's start off actually with HTTP. And could I get maybe in the chat, what do you think HTTP stands for? Do you remember from lecture at all? What do you think HTTP stands for? What does acronym even mean? Feel free to say hello and type in the chat. 

So I'm seeing different answers here and one of them is Hypertext Transfer Protocol, and that is going to be the correct answer here. Hypertext transfer protocol, it's kind of a mouthful. So let's try to break it down and talk first about that hypertext piece. So what do you think hypertext means in this context? This is a hypertext transfer protocol. What does hypertext mean in this case? Any ideas? Feel free to chime in in the chat. 

So I'm seeing you say it's more than text, it involves links, maybe it's interactive text. These are all really good ideas. And hypertext is somewhat of maybe a dated term now. Hypertext referred to text that had links inside of it that would link to other text or other pages and so on. And so what does that remind you of? Perhaps a website or websites that have these links, this text has links to other pages on that site. So the hypertext part in this hypertext transfer protocol has to do with the language we use or the files we get to actually view websites with their links to other text on their pages. 

So the transfer protocol part, though, what do you think that means? What is a transfer protocol? If hypertext involves interactive text, links with text and so on, what does the transfer protocol perhaps mean? So I'm seeing sending and receiving data. Maybe some more linking. Other ideas? Transfer protocol. Requesting, I'm seeing. Managing data from one place to another. 

These are all really good ideas. And the transfer protocol here, the key word, transfers, as you all are saying, transferring data between different users or different computers, that is sending and receiving data. Maybe we're sending and receiving this hypertext-- these files we use for our web pages. And the protocol involves some common set of rules we use to communicate between computers, so similar to how humans have languages, computers themselves also need some rules to follow when they ask each other for information or, in this case some hypertext. 

So all you need to know for now is that you end up using HTTP, hypertext transfer protocol, when you go to request a website from a computer or some server out there on the internet. And for example, let's say you go to our very own web page here using this URL, cs50.harvard.edu, and in front of that you prefix it with prefix it with http colon slash slash, meaning you want to use the hypertext transfer protocol to access whatever files are at cs50harvard.edu. This is specifying how you want to ask our servers for some information that we have on maybe the course website, for example. 

So this is the thing we'll dive into briefly here-- hypertext transfer protocol or HTTP. And the key thing to know right now is that for HTTP, you have maybe two computers a bit like this, where your computer's on the right and maybe a server is on the left hand side. And you want to request some web page. So you go to some URL. 

And as we saw in lecture, you might make a request by sending some data to a server, and that request is formatted in a way that the server knows what to expect because of HTTP. HTTP has specified how I should make this request. And then by convention, this server responds with some code that says, OK, maybe everything went OK. And by convention, again, 200 tends to mean that everything went OK with this request. So it will give us back some data. 

And in this case, it will give us that page you wanted to see. So perhaps the course's website over here that we now have access to. It gave us that web page because we asked for it using HTTP, and it knows how to respond, again, because of the rules we defined with HTTP. 

So this is what happens when everything goes right, but there are maybe some things that could go wrong, right? And so let's think about one maybe error code you've seen if something is not found. Have you ever asked for some web page and found it is not found? So I'm seeing 404. And this is some-- again, a convention in HTTP is to so say, OK, well, here is some code we can give you to let you know that something is not found. 

So let's try this again. And maybe we try to get access to some page that actually isn't there. Maybe we have a wrong URL. So maybe that convention make this HTTP request. And the server then responds by saying, oh, I don't have it. That's a 404. I'll instead give you back some page noting that this is not found so you know what's going on. 

Now there are still other errors that could happen, and maybe you'll see this not this week or maybe not even next week, but later on as you build your own websites with Python and so on, maybe this 500 error code, which means an internal server error. So it might have something like this, where I ask for a different web page. And maybe at this point, the server itself runs into a problem, which means that somewhere in the computer's programming language on that server, an error has happened and it can't complete the request I asked for, in which case, it will give me back convention this 500 error code and give me back a page saying that look, something went wrong in here. I can't give you what you want. 

So all you need to know for now is that, again, HTTP is this way of requesting hypertext, some pages on a website that you can then view on your computer. And there are some conventions we have for the kinds of status codes we give to back to you as a computer that are making the request so you know what is going on in the end. 

Now let's actually build our own server here. We can do that in VS coding code spaces using this command right here. Http dash server. And we saw this in lecture. So what I'll do is go to my own code space over here. And I have at my fingertips some HTML file called scoreboard.html. And this is on my code space. 

But if I wanted to turn my code space into a server I could make this request to, well, I could simply zoom in a bit here and type http dash server, and I'll hit Enter. And now as again we saw in lecture, I will see that I have this URL that I can click on, I'll open this URL. And now I'm using my VS code, my code space, as its very own server. I can now make a request to it to ask for some files that it has inside of it. 

And here I can see I have my scoreboard.html file, so I could click on that and request that file. And I do see this text rendered for me from the HTML now on this web page here. So I've made this HTTP request to my own code space now and it's giving me back some file that I've requested here. So what questions do you have so far? We'll dive into the HTML, we'll dive into CSS and so on later on. But for HTTP, what questions do you have so far? What wonderings did you have from lecture this week? 

Right. So not seeing too many questions right now. I'm seeing what does the plus one do actually. So we'll get into this in a little bit. But I hit plus one, notice how I can keep track of maybe two teams scores here. So this is of 80 here. So we have a scoreboard, we're keeping track of two teams together. All right. 

So what we'll do is just refresh this page, reset it to zero. And we'll go back to our HTML over here. I can see the request I'm making on my server at my terminal now. But let's actually dive into the HTML that we're going to see. So I'll maybe stop my server with Control C. And I'll go ahead and code scoreboard.html. 

So here I see a lot of different tags, these tags being something like this and this, and this right here, called HTML tags. And it's worth actually taking a moment to take a break and think about what are each of these tags doing for us, and what is the structure of this page going to look like? So let's dive into HTML now and think about how it gives some structure to our website. So go back to our slides over here. And let's talk about HTML which stands for what? What does HTML stand for? 

So I'm seeing hypertext, which is a familiar term now. Markup language. So hypertext you're familiar with, but markup language is a way of specifying how we're going to build our pages. What is the language we use to actually give structure to our pages here? So when I think of HTML, you might often think of something like this. Some code on the left hand side is composed of these tags. We're going to tag is something like that HTML in braces up above and that HTML in braces down below. 

So notice here, I have an opening tag on that second line, that HTML, and a closing tag on that very last line. And how would I know it's a closing tag down below. Any ideas? So I'm seeing the slash. So in HTML, by convention, we tend to have our closing tags denoted by this slash over here. But what are these tags representing? We have all these tags, what are they actually representing? 

Well, for HTML, we're trying to build up the structure of our website. And this very basic HTML page with no other elements might look a bit like this on the right hand side. So we have some document element that is encasing everything else. This is like the highest element, the very first element, the very basic one on our page. And then inside of that, we have this HTML element that is denoted by this HTML tag, opening and closing. 

So this open tag and this closing tag together constitute this HTML element that is going to hold all of our different elements will build into our site. So let's say we added more tags to our code. Let's say I added two of them like head, opening and closing, and body, opening and closing. So this would look like on our page something like this. 

I would see, as children of my HTML element, I now have this head element right over here. And now this body element. And notice how I'm giving some structure to my page. Previously, it was just a single element, but now I have two different elements that kind of correspond or are underneath or children to this HTML element here. 

And now what if I wanted to add some more tags? Well, I could maybe add this one-- title, opening and closing. And then some text down below, like hello body. And just be clear, that text, hello body, is not so much a tag as it is just some text, whereas the title and the slash title inside of those braces there, the greater than, less than sign, those there are tags. So what do you think is going to happen-- or how is our picture going to change on the right hand side now? What do you think we'll see if we try to render this in our tree-like structure on the right hand side? Maybe in the chat, feel free to chime in. 

We have these new tags. Title. I have some text, hello body. So I'm seeing, we're going to add a child title to head, which is a good instinct here. So what we'll see is if I go back to this visual, underneath head, we'll now have this child called the title element, right? Because again, it's inside of the head element because notice how the title tags are all encased inside of the head tags. That means title is a child of head. 

And now underneath body, we'll see that the hello body text shows up inside of our tree. And to go even further, we could add some more text here. We could say maybe as a child of title, let's go ahead and have this text, hello title. So now we see down below hello title. And this is an example of what we saw in lecture, but now just visualize for us on the right hand side. 

So when you think of HTML, you should often think of it as designing this tree structure. And this structure has a name called the document object model or the D-O-M, the DOM for short. And this will help you see the structure of your web page here. So what if we made this change now. What if we said something like this. We said, OK, I want to put hello body in a paragraph tag, opening and closing. What would change now underneath body, do you think? What would we see now? 

Adding another node or adding another element. The paragraph tag will be a child of bodies is what I'm seeing, which is correct. Here we're going to make a new paragraph element-- keep in mind, the tags are just the opening and closing tags on the left hand side, where we actually type in code. The element is actually what we see in the DOM, dominant object model here now. So p will be there. 

As a child will then have, of course, hello body underneath. So now we've kind of made more children on our page here. So this is some structure of a basic, basic web page. But we have a more complicated one actually in our code. So let's now, with this in mind, dive into our scoreboard.html file. So if I'll go back to my code space here. I can see, well, I have a few different elements here. I have some familiar ones like the HTML tag up top and the closing HTML tag down below. 

I also have what appears to be a head tag, which we've seen before, and a closing head tag. And inside of my head element, opening and closing tag here, I have maybe a title and some styles defined. So if we have this here, we could say, OK, this is some metadata about our site. This is some information that isn't really wanting to be displayed so much on the actual web page itself, but is more going to define some information about the site, like what is its title, and what are the styles we're applying to it here. 

And then down below, not as a child of head but just below the head, we have the body tag, opening and closing. And then we have inside of here a table, it seems. So we'll break this down in just a minute and we'll see a visual for all of this, because it's getting to be a lot right now here. But notice how we have many different children now and many different tags in our page. 

So let's actually try to visualize this. We'll go back to our slides here. And we will think about this. We'll think about this tree now for our current page. So notice how we're seeing this very same elements now. We have that document and HTML elements, we have the head and body. And in the head, we had our title element, our style element. In body we had a table and some script down at the bottom there. 

So let's dive deeper into the table tag, because that seems to be what's going to be more interesting for us here. So in the table, we have the table element, kind of like this overarching element here. And inside of it, we have some tr elements. And so does anyone know what the tr is doing for us here? Why do we have these tr elements? So yeah, you get table rows. So how many rows do you think this table will have? And we've seen it before, but based on HTML, how many rows you think it'll have? Three rows, right, because there are three child tr elements for this table. So we'll have a table with three rows. 

And then each of those table rows has two td elements as children to that one. So how many columns do you think we'll have in this case, if td stands for table data, and kind of divides our row into individual columns, how many columns will we have overall? I'm seeing six, which is maybe slightly correct. What we're going to have is six cells. But how many columns? Two columns, right. Notice how every row has two columns-- really, every row has two cells. And if every row has two cells, we effectively have two columns in the end. 

And inside of each of these cells down below, we see some text like team one, team two, 00. And over here we have plus one and plus one inside of a button that we can see on our page. So let's visualize this in terms of the tree structure we saw earlier. What if we change this and we said, let's visualize this top to bottom. Well, we have some table and we had our three rows. This would look a bit like this, if we just highlighted these, and visualize those three rows to our table now. 

And now every row will have two cells inside of it, which means that our table will look a bit like this. Two cells inside of it. On the right hand side, we see two columns, overall. And then inside of each of these cells, let's say we wanted to add some text or some buttons. Well, we could do that with these elements down below. And these will be inserted into our new cells because they are children of those cells. So we could say something like this, where you now have team one, square of zero, to the square of zero, and I have those buttons that say plus one. We're going to add a score to either team in this case. So what questions are there on this structure so far? All we're doing is defining a basic table layout, but it's not very pretty yet. Any questions so far? 

So we'll keep going here with HTML. And our next task will be to try to add some more elements to our scoreboard. So the goal here is to add maybe an h1 element, a p element, maybe a main and a header element, a ul and an li. So what we could do is we can go maybe back to our code space now and try to add in some of these elements. 

So notice how in my head tag, my head element up above, I have some metadata about the site. I have a title, the styles and so on. It would really not be good for me to go ahead and try to add this kind of tag to my header. Maybe I say this is a Duke versus UNC basketball game here. If you're familiar with the two collegiate rivals. Duke versus UNC basketball game. 

This would really not be a good place to put this header here because it's some content that I want the user to see. They would see this content, but because it's a content I want the user to see, I should more aptly put this inside my body tag here, maybe above my table. Structurally, I want this to show up first before I show my table. 

And then underneath, I can maybe add this p tag for a paragraph, to say that I want to tell the user to click the buttons to add a point to each team-- to each team, in this case. And now what I can do with these elements added, well, I can go to my terminal and I could run my server again. I could say HTTP dash server. Hit Enter. Wait for it to load. And now I'll click on this URL. And I should see, hopefully, that I do have this text on my page. 

Notice how H1 showed up first. It's the very first thing in my body, followed by the p tag-- click the buttons to add a point to each team. And finally underneath, I have my table here. So with this in mind, we're kind of building a structure for our site. Well, let's go ahead and try to add some other tags, too. What if we try to add this main tag? So I'll try this one. I'll say main. And what if I added some text like-- well, maybe not add text. I'll just put this kind of here. Main. And just see what if I can see anything happening. 

I'll save my file. I'll go back over here and I'll refresh my page. And I don't seem to see anything different here. But why would that happen, do you think? I do have this new tag called main, opening and closing. But why would I not see it on my page? It's empty, which is fair. So let me go ahead and try changing that. Instead of this, I'll make this maybe the main part on page. Let's say I want this tech to be the main part of the page. I want to tell the user that they should click the buttons to add a point to each team. 

OK, I'll refresh the page now. And it looks slightly different, like the table moved up, but it's not really changing how the text looks. So what's the point of main? Does anyone want to hazard a guess in the chat? Yes, so I'm seeing some folks talk about semanticness or sectioning. And it's actually a good idea. So here, notice how if I have the p tag and the h1, I refresh the page, these show up pretty differently. I see h1 in huge text and I see p in much smaller text. 

Now main, though, didn't seem to have much of an effect, here. And that's because what main is doing is not so much visual as it is more semantic. And by semantic, we mean it's changing the structure-- or really not structure. It's changing the importance of certain sections of our pages. So if you look at a search engine like Google, Google will look at all of your HTML files, figure out how to index or show your site to others. 

And if I wanted to help Google figure out what is the main part of my page, well, I could use this main tag. I could simply, maybe, encase this part. Like let's say not the title, but really the paragraph here and the table itself. That's the main part of my page that I want Google to really pay attention to. Well, I could do this. I could make sure that table and p are children of main, thereby making sure that Google knows, look, what comes after or is a child to main is pretty important for my site. It is the main content that I have. 

If I refresh the page here, nothing happens. It's all the same. But now if somebody were to read my site, look at my HTML like Google, for example, they would be able to see that this stuff down below is a little more important, helping to section off this content here. I'm seeing a few questions here. So do you have any links or websites or HTML tags or elements that we can use? So certainly. If you're looking at other tags you might want to use or other elements you could use, I'd encourage you to simply maybe Google for some of those. You could-- I know a good resource is W3. You can say W3Schools HTML tags reference, for example. 

And you could-- let me zoom in a bit. Click on this one right here. And here we have all the HTML tags ordered, alphabetically. So these are all HTML tags you can use to create elements of your site. So feel free to look up that on Google if you'd like to figure out a reference for all of your tables. All right. 

So again, there's a difference between these more visual tags like this h1, and these more semantic tags, like main, for example. Other questions here, too, on these tags, these elements? A question on whether main helps for accessibility like screen readers. It can. So if you have a screen reader, something is trying to read your site for somebody who's using a computer, often having these more semantic tags is helpful because you can tell somebody what is the main content of your page, what should the screen reader actually focus on reading? 

Maybe I don't want it to read everything, like not the title so much. Maybe I just want it to read this text down here. So by delineating this, I can tell the screen reader what I want it to focus on as somebody else looks at my site. Good question. I see a question also on interactive buttons, how do we make interactive buttons. We'll get to that in just a minute using some JavaScript. 

But as a sneak peek down below, we'll see we have our buttons defined down here and we have some JavaScript down below to help those buttons work. We'll get to that in just a little bit. So what questions are there now on HTML tags or elements? OK, not seeing too many. 

What our website looks like right now is not super pretty. Like, it just has this big h1, this paragraph text right in it. And that's OK, but we could probably do a little better. You can really make the site look a little more clean, a little more aesthetic and so on. That's where CSS comes in. So let's dive into CSS now. And let's try thinking about how we could use this. But first, what does CSS stand for? What are we going to do with CSS and what does it stand for? 

So a cascading stylesheet, right. So CSS stands for Cascading Style Sheet. And now the style sheet probably is kind of self-explanatory, meaning that we're going to apply some styles to our site. It's a sheet of styles to apply. But what does the cascading part mean? Does anyone know? What is the C in CSS? So I'm seeing inheritance, nice. 

So if we looked at our visual, for example, of our table, notice how it kind of looks a bit like a tree, and we had this vocabulary of children of certain elements here. So button is a child of td. Well, if I applied some style to td, well, that style might also apply to some of the children of that node. So it helps to show that this style, it kind of follows the inheritance principle would mean that children the same styles or similar styles as their parents at least sometimes. OK. 

So let's explore CSS now. And when we're talking about CSS, we often talk about this kind of syntax on the left hand side. We have our structure already for us, but now I want to apply some style to it. So we can often do this using the syntax on the left hand side here. We have a selector to determine what element in our DOM or in our website you want to select, and then what property do you want to change? Meaning what kind of style you want to add, and then what value should that property have? 

So for example, let's take a look at this. Let's say I want to select all the buttons on my page. I could do it like this. I could say, select me all the buttons using just that plain old button syntax up top. And change their background color using this property defined for us called background dash color to be red. And now I would see behind me that my buttons are red. I could also add some more style to that very same selector. I could, again, select all my buttons, make the background color red, but also add some border. So a border is some property in CSS you can use. And again, by convention, we define the border using this syntax here-- maybe a 4pt or a 4px, whatever system you're using. And then dash, to denote that I want the border to be dash. We can also do solid if we'd like, too. 

So notice how my buttons have changed now to be red, and also have this kind of dash border around them. And if you're curious about all of the different properties you can use, you could look up a similar reference. So I can go maybe to W3Schools again. I could search for not a HTML tag reference, but also search for a CSS properties reference. 

Now I'll go down here, I see CSS reference from W3 schools. I'll click on this. And now I see all of the CSS properties I could use to add some styles to my code. For example, there is accent color, animation, backdrop filter. There's so many CSS properties you can use. And if you click on any one of these, like background for example, you'll be able to see some examples of how you might use that CSS property for certain elements in your web page. 

So let's keep going with this and look at a few different ways to change some of the colors on our page. And maybe one thing we'll run into is that we really want these buttons to be different colors. They're different teams, right? So how could I change the color for these buttons, do you think? Feel free to type in the chat. How can I make the buttons a different color? 

So I'm seeing different kinds of selectors or classes or IDs. So it's good that we have some vocabulary here already. And let's focus first on this vocabulary of an ID. So an ID in CSS is this idea that I'm trying to select a particular element and I've given some element in my HTML page a particular ID, some unique ID I can refer to it with. So here, let's say I wanted to make the colors different-- one red, one blue. Well, I can select different buttons by their ID. 

And if I'm going to select by ID, I need to use this hashtag before that selector to say, I am selecting by ID. So I can do hashtag, team one dash button, give me the selection for a team one button there. And hashtag team two dash button team to give me a selection for team two button. And this supposes-- it presupposes that in our HTML page that do have some text like this. That the buttons do have an ID attribute specified in the HTML. 

So on the left hand side, we have our CSS. On this side, we have our IDs and our HTML. And notice how every button does have this ID defined for us where one is team one button and the other is team two button, using the ID equals and some certain text. So we can select by ID. 

We could also do what's called a class selector so maybe the ID is good for this. But I wanted to change just the header gray, I could select all the td's using just that td selector and change the background color to be gray, like this. But that's not quite what I want. I only wanted the top td's to be actually a background color of gray. 

So I could apply a class. A class lets me apply some element or some style to any elements that have that same class. Notice how I'm not using the hashtag anymore-- that was for IDs. I'm using the dot for classes, saying that every element with the class title should get this style of defined in here. So for example, if I look at my HTML, I must have this defined now. I should make sure that every element that I want to apply this style to has that same class on the right hand side. 

So what questions are there on these selectors or classes? I'm seeing one question here. So what would the perks be of using classes over IDs and vise versa? So classes are good when you want to define some style across multiple elements. So let's say I wanted to apply this to two td's, but not the rest of them. A class would be great. 

But if I wanted to apply a style to a particular element, only a single element, an ID would be useful there. So classes can apply to multiple elements, IDs apply to one element. And a question here, too, can we use RGB codes in the CSS instead of using text like red or blue or gray as I've shown here? So you absolutely can. 

In CSS, you're allowed to define colors in a variety of ways. And let me actually try to do the same thing in my code space. I'll go back over here. And let's say I wanted, well, this button here to be a dark blue background, and this one to be like a light blue background. So I can go up top here and I could add some CSS in my style page up here. I have to add this to my style element. 

I'll say, let me select the add one button using its ID. Hashtag add one. And then I'll go in and I'll say this. I'll say that I want the background color to be, maybe in this case-- I'll look up a different actual hex code here. So I'll maybe look up Duke University blue. And I'll go to the colors brand guide here. I should go down below and I do see Duke Navy blue, if you all can see it, too, is this hex code-- hashtag 012169. I'll copy and paste it. I'll go back to my scoreboard, add this element here. And now if I refresh the page, I should see-- if it loads, a Navy blue background in that same color. But maybe it's going to give me a minute to load here. 

OK, we'll wait for that to load. But in general, you can use this kind of syntax here with hex codes, or you could do something like this. I could say RGB, and you could also do some combination of RGB colors. I could say 128, 255, maybe 0 here to create some color. I don't need to just say blue or light blue or so on. Let me go ahead and see some other ones. 

Question about IDs. Can they only be used once? So yes. The definition of an ID is it can only be used once. If I go down below here, notice how this button is labeled add one, right? I can't then apply this same ID to this button down here, I'll add to. I can't do this. Each one has to have its own unique ID. Let me look at some other questions here. 

Wouldn't it be better to use a class like blue button or red button? A class is great if you know you want to have multiple red or blue buttons. If I wanted this to be not the only button I have, but maybe multiple buttons that are blue, a class would be great, because again, an ID is a bit of a show-- one element here. Another question here, does CSS only work in HTML? So here we're defining our CSS inside of our HTML page using the style element, but we don't have to. 

We could define, if we wanted to, our very own CSS file here. I could code maybe styles, styles.css. And I could add-- I could simply just take all of my styles here, copy and paste them over to styles.css. And now I've separated those styles away. I do have to be sure though that in my HTML, I have a link element that links in my styles.css. And you can look up how to link in your stylesheet if you'd like, but here we'll focus for now just on creating our styles inside of our HTML page itself. 

OK, let's see if this might have loaded. I'll go back to what I had before. OK, I'll save that. I'll go over here, hit refresh. And now I see that is a dark blue button. And maybe I could, just for consistency, look up UNC blue. I'll go ahead and over here look up, UNC blue hex code. And it seems that it's hashtag 7BAFD4, by chance. And I'll go ahead and say for the add two button, let's make that background color this. I'll refresh the page again. And now I see that that has that now, UNC blue color here. So other questions on this CSS? 

So one final thing I'd like to do is maybe try to make sure that my text is centered. This is a good use case for a class, as you all have been saying. So maybe I want to say multiple elements in my page, I want to be centered. So what I could do is I could make a new class called centered. And I could say that a property of this class is that the text alignment, text align is centered. 

And if I looked up CSS properties, I would know that text align line is a way of aligning some text on the page. And center, if I give it that value, will mean that my text will be centered. So now I can go to my h1 over here and apply that class. I could say that the class for this is centered, the same thing I have defined up here. Notice how I'm not using the dot-- the dot is just for CSS. Select any element with this class. And in my p tag, my p element, also say, this is centered, too. And now I can refresh the page, and hopefully I'll see my text now centered on that page. 

OK. Other questions here before we move on? Ah, great question. Why not just make body centered? Oh, nice. So some design questions coming up here. If I want everything to be centered in my body, why don't I just apply it higher up? I could say body as this class centered. And I could perhaps take it off of h1 and take it off of p. I'll save my file, refresh it, and see if that works. It does. And now I've used fewer pieces of text on my page. I've also made it clear that I want my entire body to have text that is centered. A great comment. 

OK. So just to preempt some questions. One thing we wondered about before was, how does this button work? I can click plus one here and plus one here. And I see that I'm getting a different number on the page for each team. But how could I try to get a feel for how this works? Well, if I look at my page, I'll go down below and I'll see that I have this script tag here. Opening tag for script and closing tag for script. 

And inside of this-- inside of this, I have some variables and a lot of text over here that might not make much sense to us at first. And this is an example of JavaScript. So JavaScript is now embedded in our page. And this text will run, top to bottom, whenever our web page is loaded. So at the time that I refresh this page, this script runs from top to bottom and it finishes, likely. 

So what I'll do is I'll try to break this down for you and see if we can understand a bit of what JavaScript is doing. It's a little bit different than you might expect from a C code or Python code that you're used to so far. So we'll go back to our slides over here. And we'll try to think about the way that JavaScript is working for us. 

So on our page, we notice the script tag. And up top when our page loads, we're going to run this code top to bottom. So the very first thing we'll do is create two new variables, one called team one and one called team two, and set them equal to zero. So I'll say team one over here is going to be zero, and team two over here is going to be zero. So pretty basic stuff. 

But next, we actually have something a little bit different. Maybe we haven't seen this before. We have some text like document, dot, dot, dot some other things that happen after it, equals some function, and that function is defined for us. So we're saying that some entity, some attribute, equals some function. It gets the value of some function. In JavaScript, the goal is often to define some events that the user can do on the page and then define what should happen when the user takes that event. 

So a script, in this sense, is mostly trying to set up something to happen, something to be triggered later on, and define the code we want to have running when that event happens. So this is what that code is doing here. It's kind of metaphorically doing this for us. We're trying to set up some kind of button over here, that when that button is pressed, I want to run some kind of code-- the function we've defined. And by setting this kind of entity equal to this function here, I'm wiring this button to that piece of code. 

Now whenever I trigger this, maybe when the user clicks on a button, for example, I will then run this piece of code. So this script has set up this trigger for me, for the user, to actually run this code later on when I press that button there. And the same thing for what happens afterwards. So I see document, blah, blah, equals some function that we define. And again, what this is doing is saying that when I press a particular button or take action, I want to run some function in response to the user here. 

So I'm going to break this down a little bit more and actually dive deeper into what these dot, dot, dots are doing. So on the code itself we'll see document.querySelector, hashtag add one. This is like our first step in that code. And what looks familiar here? Already. What have we maybe seen before? The hashtag and the ID. 

OK, so what do you think this is doing? Just based on the semantics of it, with the text that we're reading. Document.querySelector. It's selecting some element and it's selecting the element that has this ID. So document.querySelector is a way of saying go through my document object model, go through your HTML elements and find me that one that has the ID, add one. 

OK, so let's visualize this. So when I run this piece of code, I will go through my document object model and I will try to find that element that has the ID add one. I'll start here, keep searching, keep searching, keep searching, going down through my tree. Searching, searching, searching, until I get to that button that does have that ID add one. And now I have selected that button. I now have it kind of inside of, quote unquote, my JavaScript code, and I can add an attribute to it or change how it works. 

And in particular, I'd like to find some attribute called the on-click attribute. So document.querySelector, hashtag add one. That gives me that button with the ID, add one. And then dot on click is saying that I want the attribute called on click of this button to be equal to this function, meaning that when the user clicks this button, I want to run this function, in this case. 

So let's get a visual for this here. We'll go back to our code. And we'll see what's going on inside. So we're kind of familiar with this now. We're selecting our element with the ID add one, saying that when it is clicked, I want to run this function here. But what are we doing? What is this line of code doing? Team one equals team one plus one. What is that doing for us? 

Incrementing the score, right. So we'll say team one is currently zero, but we'll add one to it. So the first time I click that button, zero will become one, then two, then three, as I click this button. And then what am I doing here? We've seen this before. What am I selecting now? 

Some data. More particularly though, what am I selecting? I see hashtag score one. So I'm selecting the element with the ID score one. Well, what is that? That is this text up here, this table data that has an zero inside of it, initially. But what I could do is change its inner HTML. The inner HTML attribute I will change to be what team one is. 

So on my page, I'm literally kind of going in here. I'm selecting this element here, getting its inner HTML, this part, and saying, that becomes whatever team one is, which can be as one, or two, or three. So it changed my HTML for me more dynamically. And just to prove the point to you, what I can do is comment this out. I could remove this and remove this down here. 

And now notice how if I refresh the page-- go back over here, refresh the page. I hit plus one, but I don't see the change. The variable itself is updating in JavaScript, but it's not actually updating on my page, right? So let me try this. Let me go ahead and uncomment this. And now I'll show you the page source. I'll go ahead and do this. Show you my page source over here, go into the main part, table, table body. This second row of tr's. And now I see that ID score one, and score two. Well, I'll click plus one now. Let me refresh the page again. Plus one, and I see it changing as I go. So notice how if I zoom in maybe just a little bit more on this right hand side, I see that number updating as I go through on both sides. 

Now some handy tips as you're working in JavaScript-- this often won't work as you intend it to from the very beginning. So let's say in my code, I had some syntax error. I typed plus one and then made a missing keystroke, like this. Some random text in my code. This is maybe kind of obvious to me, but if I'm running on a page now, I refresh the page, well, I don't see things not working. I mean, I see them not working, but I don't know why. I hit plus one here, plus one over here. But what is wrong? I don't know. 

What I can do is actually go over to my console. And this might be named different things in a different browser. But in Chrome, it's called console. And I see my JavaScript console. And I can see some errors here. Uncaught Syntax error, unexpected identifier, awejf. So that is a clarification or a hint to me saying that look, I need to go ahead and go look at my JavaScript code again and think of my syntax, which will allow me to get rid of this so I can fix that error there. So not to worry if your code doesn't work as intended at the very beginning. It's always helpful to have some console over here to help you figure out what is actually going wrong. So questions on this JavaScript so far? Are we feeling OK? 

So I'm seeing a good question here. This question is, what is the difference between dot on click, or this on click attribute, and saying add event listener for a click. So there are maybe two ways I could approach this. One way is this way as I've done below here. I'm saying that I want to get the add one button and set its on-click attribute to be this function. I could also do this. 

I could say, let me get my button that has the ID, add one, and then make sure that it has some event listener. And event listener, where an event is some action the user takes. Maybe they make a click, right? And then what I could do is specify the function I want to run when the user clicks. And I think the syntax will be a bit like this. Function, dah, dah, dah. And now I can define the function I want to run when this button is clicked. And I'll just put dot, dot, dots here for now. 

These are the very same thing. All this is doing is simply setting up some function to run when this button is clicked. And it just so happens that a button-- because it's so common to click buttons, buttons already have an attribute, a built-in attribute called on click, that allows me to define a function that they should run when the button is clicked. But I could add this event listener to not just a button but some table or some text. 

If I want something to happen when I click some text, I could add this event listener called click or add this event listener, listen for a click and then run some function in the end. So I hope that helps clarify the difference-- really, the lack of a difference between these two approaches here. Other questions here? How do the page update? Is it from the server or the client? This is a good question. 

So the page always updates when I request it to update. So notice how I can hit Refresh up on my top left hand sidebar, and you probably can, too. When I hit Refresh, I then make another request to the server to say, give me the latest page that you see there. And the server then gives me that back, that page. So the update process is both from the client and the server, in the sense that myself, the client, the user, I have to ask for a new page, and the server then has to give it back to me through my HTTP protocol. 

OK. So one final touch that we'll make here is trying to figure out how we could determine a team that wins this game. And ideally, we'd love for a team to win the game, maybe when they have a certain number of points. And we can maybe alert the user to say that this team has won. So let's say we want a team to win when they get to eight points. Well, we could do this in a few different ways. 

And in JavaScript, we have this way of asking a question using that same if statement from before. So very familiar to us. We can go back to our code here. And maybe we could ask the question at the very end and say, if team one is greater than 10, well, let's go ahead and-- not print, but alert the user that team one has won, like this. And we could also ask the other question saying, OK, if team two is greater than 10, what's wrong here? That's right. Sorry. Team two has won. Like that. 

But if I were to run this and I go to my scoreboard over here, hit Refresh and go to team one, I can go way past 10 without getting notified or alerted. So what's the problem? Take a look at my code here. I do have this conditional. But why didn't I get alerted? 

There is no else, that's true. So we have to keep in mind that this script runs top to bottom as soon as I refresh that page, or I ask for it. I load the page. So here I will refresh the page. And now that script is done running. I've run from top to bottom. So what would happen there? 

Well, I would see that team one is zero, team two is zero. I will set up my event listeners here, define the functions I want to run when the user clicks the button, and then I'll ask that question, is team one greater than 10, is team two greater than 10? Well, I haven't put this in a loop. I'm just going to ask that question at the beginning and only once. 

So where would it be more appropriate for me to ask this question? I could do a while loop but I really only need to ask the question when I click on a button. And I can maybe do this if I said OK, well, let me go ahead and update the score and then ask that question. I'll say if team one is greater than 10, let's alert the user. And for consistency, I'll keep my braces on the same line, like we have up here. And I'll do the same thing in team two. Over here. I'll do this. 

So now I'm asking this question every time I click the button, because all this is doing is setting up, whenever this button is clicked, run this function, every time. So I'll go refresh the page here. I'll hit plus one on team one, , plus, plus, plus, again, and again, and again. Now we're at 10 points. But if I get to 11, well, team one has won. So I've pressed the button, updated the score, asked the question, and now it is true that team one is greater than 10 points. 

And we're saying, what if it's a draw? Well, we could do this. We could-- actually, that's a good question. Let's hit Refresh here. Get team one to 10 points, get team two to 10 points. And in the end one team does have to score the point here, so maybe give it to team two and now team two has won. But I could also maybe say, oh, team one gets one more point, now they've won. So there's probably some more logic to add here, but I could leave that part up to you for now. Here we're just trying to figure out if the team has a certain number of points in the end. 

So what questions do you have on this implementation of JavaScript here? Which jobs can we do with the document tag? Feel free to ask more specifically, too, if you'd like. I can answer your question here. But if we look at this document tag, I believe maybe you're referring to this one? The goal of this one is simply to say the name of our file, like the HTML file. This is going to be an HTML file. 

The dock type of this will be HTML. And just to show our visual again with a document element above, go back to my slides over here. Let me find this, actually. I think it was up here. The document we have at the very top. This is simply, by convention, all HTML files do have this kind of document element at the very top. And it's a way of starting at the top of our file and moving down. 

So notice how in our JavaScript code-- in our JavaScript code over here, we started with document.querySelector. So that's saying start at the document element, that very top level element, and go ahead and find me that element that has the ID, add one. A question here. How do you decide the size of your buttons? Well, that's a good job for CSS. So CSS has these properties like width or height you could use to determine the size of your button, as long as you apply those styles to your button. 

Question here, would a CSS file have a dock type tag, too? In fact, it actually wouldn't. And I think this is, again, just something that was decided long ago, there's not so much a reason for it. If I go to my code space here and show you the CSS file we really didn't use here codestyles.css, I don't need to have a dock type tag up here. 

All right. So I'm seeing some other questions here. And I'm happy to stick around and answer those. But for now, let's actually wrap officially. This is our entire section. We've gotten through adding some HTML elements, styling them with CSS, and then adding some JavaScript to make our code interactive. So we'll probably end officially here, but thank you all so much for coming today. It was wonderful to see you and we'll see you next time.