Your second chance to engage
This is our second time we engage with the user. Contrary to last lecture focused on numbers, this lecture is focused on string data types. Modular practice is the key to success in programming. Each time we practice something, we will be integrating something new and mixing the old into it. In this lecture we will see strings in action and see how to integrate user input with strings. So let's get started.
Video Transcript
00:00Right, this is your second chance to engage with the user and get from them information.
00:05This time around, we're going to be focusing on the string which is a lot easier than numbers
00:08because you can't duplicate, divide, or subtract from strings as simplistically as
00:14you could out of numbers.
00:16So in this lecture, in this section, we're going to see how do we actually update things
00:19on our stage.
00:20Now, again, we're going to do a few things that are not necessarily familiar, and that's
00:24fine, because over time, as you practice, as you do it, as you repeat what we're doing,
00:29it's going to get easier and easier, and as we get to those points, they're going to
00:32become really crystal clear by the end of this production in general.
00:38So let's jump right in.
00:39Let's jump right into the deep end, and to do that, I want to go above the prompt we
00:45just created a few moments ago, and I'm going to create a new variable that I'm going to
00:50call it name.
00:51Well, not Ben, that is my name, and I'm going to call it name, and again, we want to give
00:57it that camel casing name, so I'll call it S for string, and capital N for name.
01:03That way, I'm making sure that it's going to be a name that I could recognize.
01:07I could automatically, although name, I would probably assume that it's a string, but in
01:10this case, you know, just to keep with the consistency, I'm going to call it S name for
01:15string name.
01:18Next I'm going to create a new prompt, and I'm going to set its first variable empty
01:24for a second here, and the second variable will be empty as well, just by putting
01:28here a quote or a double quote, and I'll put here a question.
01:34What is your name?
01:37And I'll put here a default value of Ringo, right, so what I'm expecting, just like when
01:43we set the value here to be one second, that it will automatically retrieve whatever
01:47the user puts inside, set it inside of our variable name.
01:52The last thing that's left for me to do is to decide where do I want to put that
01:55name.
01:56So I'm going to go ahead and go to the bottom of our element here, all the way in
02:00the bottom here, and I'm going to use a function called dollar.
02:05We've seen the dollar function earlier in chapter one.
02:09Again, I'm not going to talk about what functions are, but just follow along.
02:13What I want to do is I want to reference basically my H2 title, because I want to
02:18change its content.
02:20So I'm going to go ahead and use that S slide headline, because that is our headline.
02:25So I could just go ahead and copy that and put that right into that function,
02:29sending it into that function.
02:31Or if you wanted to, you could manually set the position by just putting here
02:35directly a string and setting the value of the string, which was dot slide space
02:41H2.
02:43But in our case, we want to leverage the fact that we're working with variables.
02:46So I'm going to send in that variable, basically making sure that I'm going to
02:50retrieve back an object of that element.
02:54So I'm going to get this element back as an object.
02:57Now that I'm getting that element back as an object, one of the functions of
03:01jQuery is a function that is called text.
03:04Now, the text function enables me to set inside text.
03:07I could send here, la, la, la, into the text.
03:11And again, because we're sending strings, we always want to start it with a quote
03:15or a double quotation.
03:16And send me colon, because that's just what we do.
03:19And I'll save this and go into my browser and click on refresh.
03:23And I'm just going to say, okay, for the Ringo name, okay, for the length of time.
03:28You can see now that the copied lala is appearing.
03:32But obviously, we didn't take the username Ringo and we don't want to not use it.
03:38So let's go back into our browser.
03:41I'm going to go ahead and send in the copy.
03:43But instead of sending la, la, la, I'm going to send the actual name Ringo in there.
03:48So I'm going to go ahead and copy the name Ringo and send it as the value
03:52that S name, send it into our text element.
03:56Click on save.
03:57And if I do that and go back into my browser, this time around when I get Ringo here
04:02and I set the value in the two questions, now I'm going to get Ringo into my title.
04:09Last but not least, what I want to do is I want to show you how do you concatenate text.
04:14And it works in the exact same way as we worked with numbers.
04:18Just like we set plus in numbers, we could go ahead and put a plus, oh, sorry, not right here,
04:24plus with our string and connect to it another string.
04:27And it could be a literal string such as learning better is better.
04:34Now, because we have your Ringo, whatever the name might be, so I could put here even a comma,
04:39notice how all this is sitting inside of the string element.
04:42So this is a string constant.
04:45This is a string variable.
04:46And by putting a plus between the two, I'm basically connecting the two together,
04:50creating a mega variable and then sending that into our function,
04:54which we're going to look at functions later on.
04:56But I'm sure you're starting to see what functions do.
05:00Although you might not know where all the functions are, but in this case,
05:03we are approaching that specific object and then we're changing the copy of the object
05:08and setting it to be whatever the name is and then learning better is better.
05:12So if I save this and I go ahead into my browser and click on refresh,
05:17instead of Ringo, how about we change the copy to Ben to see how it works?
05:21And I'll leave my animation time or maybe I'll set my animation time to be two seconds,
05:25that first animation, and we'll see Ben learning better is better
05:29as the other copy continues and animates all the way through.
05:34So that's all we're really going to talk about strings at this stage.
05:37We're definitely going to work with strings and the more you work with them,
05:40the easier it will be.
05:41Same is true with variables of numbers.
05:45Now, I want to leave you with a little bit of homework, but this time around,
05:48we're not going to solve the homework.
05:50So only whoever comments in the comments box below here and shows us their
05:54interpretation, their item that they've created,
05:58then we'll give you feedback on it.
06:00Your homework is or your assignment is to create a different combination by or
06:05creating a few different prompts or the same prompt and finding some sort of
06:09interesting combination where you take the user information and create an output
06:13to the user or if it's in the headline or if it's in the in the actual paragraph
06:19itself, if you want to change the copy in the paragraph,
06:22the same rules apply where you set here.
06:24What do you want to change?
06:26In our case, we said we wanted to change slide two,
06:28but you could change anything else.
06:30So I want to see you trying to go out of the box, try to sell this.
06:33We're going to do this a lot throughout the lessons,
06:35but we're not going to have a separate homework just assignment for that.
06:39So that's your chance.
06:40This is your chance to show us your skills that you've developed so far.
06:44And I'll see you in the comments section.
06:46And in the next lecture, we're going to be moving on to another variable type and
06:50the last variable type that we're going to be talking about in this chapter,
06:55which is going to be Booleans.
06:57So we'll see you in the next lesson where we'll start talking about Booleans
07:00and what Booleans are.