The String variable
In the last few lectures we created a few variables but we didn't really discuss why they are so powerful and useful (but maybe you're starting to see their power?). In this lecture we will see why variables are so powerful add Strings as our second data type.
Video Transcript
00:00In the last few lectures, we created a few variables, but we didn't really understand why were they so powerful and useful, or maybe you're already starting to see their power.
00:10In this lecture, we're going to take a deeper look into why variables are so effective and so important in programming.
00:17Beyond that, we're going to meet our first string variable. So, so far, we only work with numbers, but now we're going to add into our tool set OtoStrings.
00:24So, let's jump right in and see how we do that.
00:27Create another variable, and I'm going to call this variable n again for number, and I'm going to call it opacity.
00:36Opacity. And again, you want to give a very descriptive name.
00:41So, we had n for number and opacity for the property that it actually is. In this case, it's going to be the variable of opacity.
00:48I'll set the value to one. And again, I'm just going to go ahead and just change the variable value here in opacity to be opacity and to be the value opacity instead of the value of one.
01:03Now, even before we animate things, I want to talk about one more thing in JavaScript as we're doing this.
01:09The value enter doesn't really mean anything.
01:14So, in our case, because our copy here is getting really long, and if I had my font a little bit bigger as it was, you'll see how the copy automatically slides down.
01:24That's completely fine. Another thing that is completely fine is if I go ahead and just type your enter, I could position it wherever I want to, and that is fine.
01:33There is no, the value of enter when it's out here inside of in the spaces doesn't mean anything. It's just there to help you visualize things.
01:41So, you could put an enter anywhere you want. If you want to make things more aesthetic, make it easier for you to see things.
01:47In general, it's always a good idea to have a, if you have an opening bracket and a closing bracket to try to keep your content within that bounds.
01:56That way, when I'm looking at this, I could very easily see where it begins and where it ends. Beautiful.
02:04Before we continue, I want to create another variable, and I'm going to call it var again for variable, and this I'm going to, I'm going to type your S for string.
02:13And then I'll just type here the name of the item. So, for example, this might be slide head headline.
02:22So, end slide headline, its value is this time around is going to be a string. So, I'm going to double quote it and then put the value of my slide right in there.
02:32And if I set that value there, I could go ahead and just change this first property to be the value of that property. Now, I know that you're probably looking at this and this looks to you less easy to read.
02:58It's probably true. But then again, if you read this literally linearly, you'll see that tween max to slide headline, animating time, enemy time of opacity to an opacity.
03:12So, although it looks weird, once you get used to this weirdness, it becomes really, really easy. Now, you might think, but why would I want to turn everything into variables?
03:23The answer is you wouldn't. Some things you'll want to turn into variables, while other things you're just fine with them being static constants or actual values.
03:33Such as in this case, this is a static, it's a constant. There's no way for us to change it programmatically.
03:39Now, on the other hand, once we get into your interactivity, we might and we will have a lot of scenarios where we don't want to define in advance what we want to animate.
03:48Maybe we want to animate only things that are being clicked on. And for that, we're going to have to use variables.
03:54So, what we've done so far is we've created number variables. We saw how they work where we don't double quote them.
04:02We've seen how we could create strings and we saw how we have to always double quote them and then we just use them, put them wherever a string was supposed to be.
04:10Now, notice how we're not putting here any double quotations around our variable name. Now, the reason why we wouldn't do that is because if we would, we'd be actually sending the actual string S slide headline.
04:23But in our case, we want to use a variable, basically saying, hey, paste whatever this value is into here and then run it, basically.
04:31So, if I run this again and I just go right into my browser and click on refresh, we're going to see that everything is still working the way it was.
04:39So, what I'm going to do to test out and see that it's really working is I'll make my animation time a lot faster.
04:45And how about this time, we'll change our opacity to 0.5. And notice how I could write .5 or 0.5. They're both the same in JavaScript.
04:55So, if I said they're just .5 and go back into my browser and click on refresh, we'll see a one second animation that will go to 50% opaque.
05:04So, that's it. We've learned about variables a little bit. We've learned about the number variable. We learned about the string variable.
05:14In the next lecture, I want to take us a little bit deeper into understanding how variables work.
05:20And we're going to look at that immediately in the next lecture. We will see, just as the name implies, a variable means that it's something that could change.
05:28And we're going to look at how do you change the value of variables after you set them up in the following lecture.
05:35So, we'll see you in the next lecture when we do that.