Working with Strings Exercise

[00:00:00]
>> 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:00:26]
So back on our JavaScript Tic Tac Toe page, and you can refresh it if you want, or if you haven't, that's fine. You're going to go through and if you have refreshed like I did, you might have lost some of the stuff. For example, previously, your name was in the player one listing, now you wanna add your last name.

[00:00:49]
And to do that, you're gonna have to use one of the string things that we just saw. We also want to pick out, not the page title itself, but the first T in that title. Figure out whether or not the page title as originally indicated, which might be different now, so we might all have different answers to this, contains the word JavaScript.

[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?

[00:02:57]
>> 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?

[00:03:12]
>> 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-
>> p1- name, great-
>> .Append-
>> .Append-
>> .Space-
>> Space, important, the space, yea-
>> Last name.

[00:03:38]
>> 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.

[00:04:00]
>> Great, walk me through it.
>> Okay, so it's the document.querySelector, and then I use in quotes pound p1# name.
>> Great.
>> And then the .text content-
>> Text content, uh-huh-
>> Equals-
>> Equals-
>> First name, mine is Paul-
>> Okay, so Paul-
>> And then a plus-

[00:04:24]
>> 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?
>> Document.title-
>> Document.title, exactly, okay, so this is the title right now. Maybe yours is different, that's okay. JavaScript Tac Toe, I wanna find the first T. Did anyone figure out what they can type in to retrieve the first T in JavaScriptTacToe?

[00:05:46]
>> Document.title.indexOf("T").
>> Okay, so document.title.indexOfT gives me, what kind of thing is this? That 9 kind of value, whta type of value is it? And as far as JavaScript is concerned, all integers are two numbers. Exactly, so this is a number that corresponds to the index of the first T.

[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.

[00:07:48]
Okay, how about we wanna answer the question, does the page title contain the string JavaScript? How could we ask JavaScript whether or not the page title contains the string, JavaScript. Just gonna clear to make some room.
>> Document.title.Includes, and then in quotes JavaScript. Beautiful, okay, document,title includes, and notice as I'm typing, my browser console is giving me the value that I would get if I hit Enter.

[00:08:22]
So as we type this out, so Java, yes, so far, it's true. Script, false, why? Why does this say that JavaScript Tac Toe does not include JavaScript? Can anybody tell me why this is false?
>> T.
>> Yeah, the T, so I heard something about the T.
>> Case sensitive.

[00:08:47]
>> Case sensitive, exactly. So if I were to ask it, does the title include this string JavaScript? [LAUGH] We would get a different answer if I was really emphasizing the T. Okay, how about how we can capitalize? Now, this is a sneaky one, because we didn't actually see how to capitalize a string.

[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.

[00:09:39]
>> Header h1 like that?
>> h1, yeah.
>> A dot style, .textTransform.
>> Okay, so we're using the CSS properties here, okay? Text-
>> Transform = uppercase.
>> Like that? Wow, nice, excellent work. All right, this is something we didn't talk about. But basically, the same way that JavaScript can allow us to manipulate the contents of the HTML document, you can also manipulate the CSS that's being applied to those contents.

[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:10:41]
So this shows that JavaScript can manipulate the CSS of a page just as well as it can manipulate the HTML of a page, really great discovery. There is another way that we can do this without manipulating the style or sort of adding CSS. This is a totally valid way to do this, and it actually gets out like a really cool superpower of JavaScript.

[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.
>> Yes.
>> 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:12:50]
So these are two totally different and totally valid. Both totally valid ways to change the capitalization of this particular element. Now, what we've done is we've just actually done something. We've gotten at something kinda cool about JavaScript and we're gonna dig into later. The fact that we needed to kind of repeat this a couple of times, it would be nice if we didn't have to keep repeating ourselves so much, right?

[00:13:18]
So we're gonna look later at how we can do that. But for now, I wanna say, good job everybody [APPLAUSE]. We did this with some teamwork, with some exploration, with some styling with some JavaScript, with some indices, with some equal signs. We managed to do all kinds of different things to this page.

[00:13:39]
We're starting to really be able to do whatever we want to the pages, which I don't know about you, but I think it's pretty cool. I'm feeling pretty powerful, hope you all are as well. And we are going to learn as our JavaScript journey continues, there is a ton of more stuff that we can do with strings.

[00:14:00]
There are a ton more spells we can cast on a string to ask JavaScript questions about it or change it in certain ways. And there's a lot, there's too much to cover in a day or a three-day course even. You could probably just have an entire Frontend Masters course all about JavaScript strings.

[00:14:18]
[LAUGH] But we're not gonna do that today. So instead, we're going to remember our friend MDN, has all of the info that we could possibly want about how to work with strings and all of the many, many magical things we can do with them. So if you're navigating through the MDN pages, you can find it kinda by clicking through JavaScript, Built-in objects, and then blah, blah, blah string.

[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.