All right guys.
So we've been hanging out for a little while now but let me formally introduce myself.
My name is Angela and I live in London.
My greatest ambition in life is to eat my own body weight in sushi.
Now I want you to commit this to your memory.
This truly is the first step towards our wonderful blossoming friendship because instead of politely
asking you, "Do you know anyone else called Angela who lives in London?"
I can now ask you, "Do you know anyone else with my name who lives in my city?"
Or, "Do you know anyone else who has the same ambitions as me?"
This means that whenever I want to talk to you about my name, location or ambitions, I don't have to repeat
myself and tell you the information that you've already committed to memory.
So this is the same reason why we have something called variables in programming. In the same way that
you've committed my name to your memory,
we can commit pieces of data to the memory of the computer, but first we need to enable the user to enter
a piece of information.
So let's learn about the "prompt()" keyword.
Now if you open up Chrome and go to our Developer Tools, we're going to head into our Sources to work
inside Chrome Snippets.
Now inside the same index.js, it's just a blank file at the moment, and I want you to write a
prompt that asks the user "What is your name?"
And now if I hit Command Enter or Control Enter on Windows, or simply just click over here, then it will run
my code and it will show me a prompt.
Now, a prompt is pretty much identical to an alert() or a pop-up,
but in this case, it actually allows the user to input something, namely a piece of text.
So I'm going to tell it that my name is "Angela".
So what happened to that piece of data?
How can I retrieve it back?
What exactly just happened?
Well, nothing.
It's not committed to memory,
so that piece of information is just out there in the air and it's lost.
So how can we remember it?
Well we can use something called a variable.
So for example I can write something like var
myName is equal to the string
that’s "Angela".
So now if I hit Run and I go into the Console and type myName and hit Enter, then it will know that
myName is equal to the string
"Angela" because I've saved this piece of data inside a variable.
Now let's take a look at variables in more detail.
This is what the syntax looks like.
The first word var is a keyword, and just as alert is a keyword or prompt is a keyword,
This tells us that we are creating a new variable, or creating a new data container, and that container has
the name of whatever it is that we give it here.
In this case, we called it myName. And then we set that variable to be equal to the value which is the
string "Angela".
Now, every time we refer to myName, the computer knows that we're talking about the string "Angela".
So let's dissect the syntax a little bit more and see what's happening behind the scenes.
So whenever the computer encounters the keyword var, it essentially knows that it has to construct a
new container or a new box, and this box gets given a name,
whatever it is that we put after the word var, and in this case, we called it myName.
Now, after the equal sign is what we're going to place inside the box, and in this case it's the string
that's "Angela".
And now we get to the end,
there's a semi-colon,
we finished our line of code and that box has a lid placed on it.
Now, the special feature of a var, and why it's called a var, is because it stands for the word variable.
So that means you can vary the data that you keep inside it.
So, in the next instance, if I decide that I didn't really like my name, and I wanted to change it, then
I can tap into that same container, by writing its name,
in this case myName, and I can set it equal a new value. And what that means is that the computer will
find the box that has the name of myName.
It’ll take out the content that's currently contained and delete it, and then it will reassign it a new
value depending on what I wrote on the right hand side of the equal sign.
And with that line of code I varied what's contained inside my box.
Notice that in this case, I don't have to repeat the keyword var again.
The word var is only used when you're constructing a new box to contain your data or when you’re constructing
a new variable.
When you decide to use the variable or when you decide to change the variable you don't need to use
that keyword var anymore.
It only needs to occur once in the lifetime of your variables.
Now we know that we've saved this piece of data into the variable that's called myName. As a challenge,
I want you to create an alert that shows the content of this variable but you're not allowed to type
any strings.
Pause the video and see if you can figure it out.
All right.
So this shouldn't be too hard.
We already know how to write alert's.
We just simply write the alert keyword,
we open some parentheses, and inside we place whatever it is that we want to be displayed inside the
alert.
And in this case, we want to show the data that's contained inside the variable myName.
So all we have to do is to refer to the name that we gave that variable,
in this case, it's myName, and we can now hit Run. And you can see that "Angela" gets printed because that is
the value that’s contained inside this variable or inside this box.
So it's like going to a shelf where you've got lots of storage boxes and pulling out the box that's
labeled myName to discover what's contained inside, which is the string
"Angela". Now, in the same way, we can save the information that the user inputs to our web site.
So, for example, we know that myName is equal to "Angela", but what if we used a prompt to ask the user,
"What is your name?".
Now, unlike the last time, we're not going to lose this piece of information. We’re going to keep it inside
a variable. And that variable, we're going to give it a name, and we can call it anything we want,
but let's think of something that makes sense.
How about yourName?
And so now you're creating a new variable that's called yourName, and the value of this variable is
equal to whatever the user types into the prompt.
So now let's hit Run and here's my prompt, "What is your name?"
So let's say that my name is now Jack Bauer,
my favorite person in the world,
and hit
OK.
Now, if I go into the Console and I type yourName, and hit Enter, the computer knows the value that's
associated with that variable
is "Jack Bauer".
So now we can create an alert that combines the values of both of those variables. So we can write, alert(
"My name is " + myName ...as the variable... +
", welcome to my course " +,
...the second variable, which is... yourName, + ...finally,
maybe an exclamation mark... !.
And now we close off that line of code with a semi-colon and I don't need these two lines of code anymore
because that data has already been committed to the memory of the computer, so I can delete that.
And now if I hit Run, then you can see that it's created this message,
"My nanme is Angela,
welcome to my course Jack Bauer!". So you can see that it's substituted these two places
for the value that's been stored inside myName and yourName, and it's able to create this message without
me having to explicitly say what these two things are.
So, in this lesson, I wanted to introduce you to the power of variables, and how we can use it to store pieces
of data,
so we don't have to repeat ourselves and we can refer back to it later in the rest of our code.
And, on a more practical level, you might have a case where you create a variable that's called gameLevel,
and you set it equal to 1 to begin with,
and then, as the user goes through the levels, then you can change the value of gameLevel each time.
So say they complete the first level, then you can change this thing, gameLevel, to 2, and then you can
keep changing this as they progress.
And whenever you or the user wants to find out which level, then you can simply use an alert and say
show the gameLevel.
Now you'll see 3, or, if you want to make it more fancy, then you can add a string that says "Your level
is currently: " + gameLevel"
So you see that your level is currently: 3.
Now I hope you enjoyed this lesson. In the next lesson,
we're going to look at some of the rules around how you should name your variables.
So for all of that and more, I'll see you on the next lesson.