Changing a Web Page Exercise

[00:00:00]
>> Okay, so now armed with these few spells and our good friend MDN always, to this time, it's less of a scavenger hunt and more of a task list, a to-do list. We're gonna go through and we're gonna actually manipulate this page and make it individualized. So far we've been all looking at the same page.

[00:00:20]
Now we're going to customize our page for ourselves. So if you're sitting here in the room, you're going to, first of all change the player names to player one can be yourself and player two, who can be your closest neighbor next to you. And if you don't remember their name, ask them.

[00:00:36]
If you're following along at home, you can make player one yourself and then player two, whoever is closest to you in the room you're in or in your house or a friend you just talked to on the phone or whoever you want. Then as another fun, add-on, swap the symbols.

[00:00:53]
So right now, player one has an x and player two has an o, swap them. So player one gets the o. And then change the subtitle of the page. Right now it says a game you know, change it to a game you know and love. This is your mission should you choose to accept it.

[00:01:09]
So let's take five minutes and try to do that. We're back with a different web page than we had before, perhaps. How did this go? How are we feeling? We starting to feel the immense cosmic powers of our JavaScript spells little bit, at least for this one webpage, okay?

[00:01:34]
So, how did you all decide to do this? For number one, like changing the player names? We saw one example of changing first player name. So in mine now it says Sofia and France, can somebody else change it to their name. How about Jason, you look ready to change something.

[00:01:56]
>> I think I cheated, I went right into the In the document itself and changed all of the values.
>> All right, well, this is a totally legit thing, since our since our dev tools let us edit HTML directly. One way we can change what's on the page is by going into our Inspector tab, drilling into whatever we want, and editing it, as we see fit, right?

[00:02:27]
So, that is perhaps cheating because we're not using JavaScript, but it gets the job done. So, that's great, and now I have deleted all important space. Okay, did anybody manage to use JavaScript to do the same thing?
>> I changed the game name using query selector h2.text content but then when I tried to do the same thing with p1-name, it says do not set properties have no setting

[00:02:59]
>> Errors, errors JavaScript always is gonna complain when we're doing something. So let's find out what happened here.
>> So you typed document.-.
>> QuerySelector.
>> Query selector?
>> Yep, p1-name.
>> P1-name?
>> Yep, and x content. Right now we are noticing that we are missing something, because right now if we stop here and we press Enter, we see null.

[00:03:29]
And so now if I tried out text content, JavaScript is like, no, I don't know what happened but something is wrong. So we're gonna talk about this later. But there is something wrong here because we wanted an HTML element to come back from this, and instead we got something called null, which we're gonna talk about later.

[00:03:48]
About like what is null, is it related to undefined, what are they, do they do things for us, who knows. So there is some small change we need to make. We figured out what it is, OJ.
>> It a hashtag.
>> It's a hashtag.
>> Why does it care?

[00:04:04]
>> What if we put the hash there now, we get back the span element that we were expecting.
>> Does anybody know why do we need that hash, can anybody recap or does anybody have a guess as to why it matters whether that hash is there, yes Paul.

[00:04:23]
>> I think that without the hash it's just looking for an element that named and that's not an element, it's an Id.
>> Right, so in our HTML, we're looking for this span right here with the name inside of it. This has the Id p1-name, and so it is the Id attribute.

[00:04:51]
And this is a kind of a special one, that we're looking for in this element. Now, when we use query selector, we said we're using CSS selectors or the type of selectors we'd use in CSS to pull out elements from the page. And the query selector p1-name like, JavaScript didn't complain, it didn't give an error.

[00:05:11]
This is a valid thing I could pass in.
>> But it's not going to return anything because query selector p1-name is, as Paul pointed out, looking for an element that looks like this, like has some kind of tag name, p1 minus name, which even that minus is like unexpected.

[00:05:31]
That's not really what we're looking for. We could for example try, sorry the type of this element to the tag name itself would be span but we said that query selector singular returned to the first element that matches. So in this case that's going to give us the p1 symbol span because it occurs earlier in the document.

[00:05:55]
And so that's going to pick out that x which is not exactly what we want
>> So instead what we what we can use in this case because there's an Id on the element that we want on this particular span. We can kind of jump straight to that element using the Id selector, which happens to be, in CSS, it happens to be hash, and then the text of the Id or though the content of the Id.

[00:06:22]
So in this case #Id value, and then in CSS, we would be using it kind of like at the beginning of some styling rules. In JavaScript with query selector we can use it to pick out the same element that CSS would pick out in a style sheet. So in this case, that's why these have different values.

[00:06:40]
So now, okay, so once we've got our query selector p1- name, then in order to change the text, Oj you wanna walk me through the rest of your solution there?
>> QuerySelector #p1-name.textcontent equals Jayson.
>> Text content equals, well I mean I guess in this case it would be wherever you want.

[00:07:02]
So we can make it Oj. And now the page has changed, cool, awesome. All right, and we could do the same thing for the other player. Just really quickly, how would I change the player? Yeah, Paul,
>> this is an excellent use of the up arrow.
>> Indeed it is, so I'm going to press up arrow and fun fact even if I clear I can still use my up arrow to go back in history.

[00:07:33]
So in this case, what should I change this to?
>> Just change the p1 to p2.
>> Okay, so we can make this p2-name and then the text content can be, why don't we make it you, like this?
>> Yep.
>> Beautiful, so now we have different players, excellent, okay.

[00:07:58]
Now we all ready maybe got a little bit of a preview about the symbols here. How did we approach number 2, swapping the player symbols, the x and the o. So we know that the o will come first and the x will come second, can anybody walk me through this?

[00:08:14]
So first we have to pick out the element containing each symbol. So let's try to go for the x first, right, which we picked out before. If we remember we saw that it is inside of another span, which has an Id on it. So that's handy. So we can pick this out by using the IDP one symbol.

[00:08:36]
So can anybody just for variety sake, walk me through another option I have other than using querySelector? Anybody remember, yeah.
>> In chat they're using document.getElementById.
>> Excellent, so getElementById, and then the Id for the x, let's say is p1 symbol. And now I can all ready see my browser is being so helpful in the dev tools.

[00:08:59]
It's all ready showing me, highlighting what element it's showing span hash p1 symbol meaning the span with Id p1 symbol. And so how do I now change this to an o? Maybe the, the chat, had all ready solved this in the messages there. So we do document dot get element by Id quotes, p1 symbol, and then?

[00:09:22]
>> Text content.
>> Text content, I'm just tapping to auto complete. And then space, we want to change this, right? So the spell that we used to do that was like the equal sign and then whatever we want the content to be. In this case, we wanna swap it to the other symbol letter O capital.

[00:09:44]
So now we have two player O's. Once I run this we have player o player. That's not helpful. Let's swap the other one, which again, we can use our little shortcut up arrow to do the like find the last command we entered. I'm just gonna go ahead and change this to p2 symbol to pick out the second line.

[00:10:07]
>> And then this one similarly we'll replace the o with an X and now they're in the other order.
>> Is there any like fancy like reverse functions that you could do like dynamically reassign them in an order now.
>> is there a fancy function we could do, the answer is always yes.

[00:10:25]
There's always something we could do. We could write our own function, let's say that has some kind of representation of the two symbols and then reverses them.
>> Sure we can do, once we figure out JavaScript, we can make it do pretty much anything we want. Not always there's an asterisk on that, but pretty much anything we want.

[00:10:41]
But in this case, we're just trying to these spills kind of these these different ways of interacting with the DOM really like under our belts so that we feel confident working with the page and messing with it. So that's why we're just kinda focusing on these get Element by Id and querySelector and text content and things like that.

[00:11:04]
Okay, the last thing we wanted to do was change the subtitle of the page. Right now the subtitle the page says a game you know, and we wanted to say a game you know and love. So there's a couple of different ways I could do this. What options do I have and can anybody think of a way to do this using a spell that we haven't used yet in this exercise?

[00:11:31]
As we saw briefly earlier, where we add on to existing text content, or in other words append. To text content. Did anyone use append in their solution to this exercise? I'm seeing some nodding, sounds like maybe in the chat, there were some uses of append
>> Yeah, there's three, different, ways that people are adding.

[00:11:59]
>> Great, okay, so, let's see, what have we got here? Some examples, some options, and again, there's lots of options.
>> So, one person's using querySelector the header space h2, and then append in quotes, space and space love.
>> Okay, so we can use querySelector as we said to pick out elements using CSS selectors.

[00:12:26]
And so in this case if we want to pick out the h2 element that is inside of the header, we can use header space h2. This basically is sort of like getting more and more specific. It's saying in the header element, something that's an h2 element. And again, I can read all about this in MDN.

[00:12:48]
If I want to read up on different selectors and how that syntax works, but this is a totally valid way to do it, and I like it because we're discovering a new way to derail into it. And then then what do we have Mark sorry
>> Dot append in quotes

[00:13:03]
>> Dot append and then in quotes
>> Space and spaced love.
>> Space and space love.
>> Look at that, we've done it. And now if we drill into our HTML, we'll see if we go into this h2 element we have again and love. So additional text has been appended into the content of this element, question.

[00:13:28]
>> Is this probably beyond the scope of what you want to talk about right now, but I did the append, but I misspelled what I appended, is there any way to immediately roll back the previous command [CROSSTALK]?
>> Interesting, is there a quick way to basically no, I didn't want to say a game you know and love because I actually hate tic tac toe.

[00:13:47]
I want to say a game you know and hate. Is there a quick way to edit that? I'm not familiar with a undo here. Ctrl + Z isn't gonna work unfortunately. But what we can do, we do know how to completely replace the text. So what that's maybe a great question, how do I completely replace this subtitle and change it to again you know and hate.

[00:14:14]
Just to add a little negativity into our classroom why wouldn't we want that, any guesses?
>> Yeah I had to do that, so you just instead of doing .append you use the same old text content equals.
>> Right, so now we can just say I totally messed up I wanna change this entirely or maybe I wanna put it back to what it was before.

[00:14:40]
Or maybe I just wanna temperate a little bit I only like it don't love it. [LAUGH] Yeah this is how we gonna have to do that, there's not a kind of a quick reverse operation kind of thing. These changes that we've made to the page, so now, for example, the title is my page.

[00:15:01]
The player, O, comes first. The subtitle is different, the names are different, all of this stuff. These changes they take place, they're things that I have carried out inside of this browser tab in the JavaScript console. So what do you think is gonna happen when let's say I refresh this page, am I gonna get the new content that we have here or the old content that it had originally if I refresh, guesses, sorry.

[00:15:39]
>> Old content
>> Old content is the guess. Let us check indeed It has all gone away, all of my work lost. It's very sad because all of these changes, these are happening inside of this particular document object that I have here in my page and that changes every time I load the page.

[00:16:03]
So these changes are not what we would call. Persistent because if I reload the page, it's going to be different. If somebody else loads the same page from the same URL, they're going to see something different. If I let's say I change the document title to New title.

[00:16:27]
If I now even go into a separate tab, and load the exact same URL, will notice it has the old title, even in a just a different tab, same browser. That's because each time the browser loads the page, it creates a new model of what Is in this document.

[00:16:49]
And that is going to be generated from whatever the source code of that page is that it finds when it goes to the URL for this page. We're gonna look at editing a file itself so that we can make sure that these changes that we're making and the things that we're doing are not just happening like in this ephemeral state of the one time that we loaded this page in our browser and this one tab.

[00:17:14]
So that we can actually create a page that we can later maybe host on our website. so everybody gets to see our beautiful JavaScript work. Or something that we can reload, in our own browser and see the things that we wanted to be different. So that is a great point that Paul had made earlier in the break and just wanted to raise with you all.