Transcript from the "Working with Strings Exercise" Lesson
>> So we have just learned a bunch of strings superpowers. And again, do I expect you to remember all of them? No, MDN is there should you want to use it. What we're gonna do is use our superpowers that we've just discovered to do a few things. And they're gonna also require us to go back to our manipulation superpowers that we learned of how to manipulate the DOM.
[00:01:12] And we also want to change the heading of the page. So that instead of saying Tic Tac Toe, we're screaming Tic Tac Toe, okay? So this is your mission should you choose to accept it. We will try this out on our own, and then come back and review how we might do all of these things.
[00:01:35] Okey-doke, so how is this going? We're trying to flex many different spells at the same time here. So maybe we can help each other out and figure out, and again, there's multiple ways to change a string. [LAUGH] So let's see what we got. As I said, there's many different ways that we can do each of these.
[00:02:08] So there are multiple correct answers to of these things. Let's go back to our page, I got rid of all of the changes that I made. So mine looks pretty squeaky fresh out of the box. Yours might look a little different if you still had some of the changes you made earlier, that's totally fine.
[00:02:29] All right, how can we add our last name to the player's listing? Did anybody find a solution to this? And again, there's multiple ways, we're sort of drawing from everything we've seen so far. How about over here? Stephen, did you find a way to add a last name to the players?
>> Did you mean creating a third player or adding my last name to a first player?
>> For example, for me, since it says player X Anjana, and at this point depending on where folks were in the manipulation, it might say player O, Stephen, or something like that, how could we make it Anjana of our queue?
>> Okay, append, let me stop there.
>> So we have append, yeah, so can you walk me through it?
>> I use the document.query.getElementById p1-name-
>> So document.getElementById-
>> p1- name, great-
>> Space, important, the space, yea-
>> Last name.
>> The last name, right, so in my case, I would put Vakeel. And that space, again, remember the space is a character too. So great, excellent, did anybody do something else? So this is totally valid? Yea, Paul.
>> So I re-assigned it with my first name plus last name.
>> Great, walk me through it.
>> Okay, so it's the document.querySelector, and then I use in quotes pound p1# name.
>> And then the .text content-
>> Text content, uh-huh-
>> First name, mine is Paul-
>> Okay, so Paul-
>> And then a plus-
>> And then the last name, which would be Quigley, Q-U-I-G-L-E-Y.
>> Like this, G-L-
>> E-Y, yep.
>> Okay, great. Let's do it. So now-
>> I forgot-
>> You have kinda a nice little handle, yeah, what if we wanted to add a space? We can do the same thing, we can actually add another plus here maybe, and use the space as just its own string.
[00:04:56] So we can actually use plus multiple times to kind of keep adding together strings. And when I say adding together, I mean concatenating them together, great. Wonderful, thanks so much, excellent work. Okay, how about the T in the page title? Maybe you'll change the title, but let's say that you had the original page title, how can we access the page title again?
[00:05:26] What's the thing I need to type?
[00:06:18] Great, okay, so now, we know where that T is. Now, what if I wanted you to get me the actual T? What's the T? [LAUGH] So how could we use this information that we found with indexOf to actually pull out the character, capital T from that string? So we know now that the index of the character we want is 9.
[00:06:45] We could use this information to pull out the character at that index. Does anybody remember what we have to type in to get the character at a particular index?
>> Square brackets.
>> I heard square brackets and you're gonna say the same thing, square brackets, exactly. So this could look like document title, square brackets, and then the index that we want, gives me that T.
[00:07:17] Okay, so it's sort of an arbitrary distinction here in terms of the exercise. But the idea is that sometimes, we're gonna need the number of the character or things, substring, whatever that we want. Sometimes, we're going to need to use that number to actually get the thing that we want.
[00:07:31] So in this case, if we want to pull out the T, we can use the square brackets with the index. And if we don't know what index we need, we can use indexOf to find out. So great, great teamwork, everybody. Was there a question? No, okay, sorry, I thought I saw.
>> Yeah, the T, so I heard something about the T.
>> Case sensitive.
[00:09:15] How can we put the heading, Tic Tac Toe in all caps? So there is a spell that I'm asking you to use here that I didn't even talk about, cuz I'm treaksy like that. So did anybody figure it out? Yeah.
>> I did document.querySelector parenthases or codes header, and then header 1.
>> Header h1 like that?
>> h1, yeah.
>> A dot style, .textTransform.
>> Okay, so we're using the CSS properties here, okay? Text-
>> Transform = uppercase.
[00:10:15] So in this case, if we now look at our inspector and we go into our h1, what we've done is we've applied a style attribute with a text transform. And this could really be any CSS that we want. In this case, we used the text transform. So to figure out how to use the text transform property on the style to do this, that is awesome.
[00:11:07] To make this faster, I'm gonna refresh the page. Okay, it's back. All right, so now, what I've done is I've cleared the styling roles that we just applied so that we can try another way. Did anybody find maybe the chat, has some suggestions another way to change the capitalization of a string?
[00:11:26] Yeah, chat.
>> So did a text content.touppercase.
>> Okay, all right, so another way that we can do it is, so it was document, what was it, querySelector, and there's a few different ways that we could do this. But let's say, we had header h1, I think before, textContent.
[00:11:43] And then similarly to how we had tolowerCase that we saw before when I was shouting too much. We also have a method toupperCase that will give me the uppercase version of the string. But we'll notice that although I got the capitalized string out in my console, the page didn't change yet.
[00:12:06] So I could-
>> They just repeat it, so it's just the same thing twice except for that text content equals.
>> And that whole string.
>> Exactly, yes sow what we can do is we can select the element. Document querySelector header h1, oops, that's not, header h1.textContent = whatever the text content was before toupperCase, and now it has changed.
[00:14:47] Or as always, you can in the search bar, type in the thing you're trying to find. And in this case, it's the first result and it's going to give you a whole bunch of information about strings. And remember, we saw, for example, single quotes, backticks, etc. How to access characters with the things, with the brackets etc.
[00:15:08] So all kinds of stuff here, there's a ton that we can do.