All language subtitles for 4. Javascript Variables

All right guys.
1

So we've been hanging out for a little while now but let me formally introduce myself.
2

My name is Angela and I live in London.
3

My greatest ambition in life is to eat my own body weight in sushi.
4

Now I want you to commit this to your memory.
5

This truly is the first step towards our wonderful blossoming friendship because instead of politely
6

asking you ‘Do you know anyone else called Angela who lives in London?’,
7

I can now ask you ‘Do you know anyone else with my name who lives in my city?’,
8

or ‘Do you know anyone else who has the same ambitions as me?’.
9

This means that whenever I want to talk to you about my name, location or ambitions, I don't have to repeat
10

myself and tell you the information that you've already committed to memory.
11

So this is the same reason why we have something called variables in programming. In the same way that
12

you've committed my name to your memory,
13

we can commit pieces of data to the memory of the computer, but first we need to enable the user to enter
14

a piece of information.
15

So let's learn about the prompt keyword.
16

Now if you open up Chrome and go to our Developer Tools, we're going to head into our Sources to work
17

inside Chrome Snippets.
18

Now inside the same index.js, it's just a blank file at the moment, and I want you to write a
19

prompt that asks the user ‘What is your name?’.
20

And now if I hit command enter or control enter on Windows, or simply just click over here, then it will run
21

my code and it will show me a prompt.
22

Now a prompt is pretty much identical to an alert or a pop up,
23

but in this case it actually allows the user to input something, namely a piece of text.
24

So I'm going to tell it that my name is Angela.
25

So what happened to that piece of data?
26

How can I retrieve it back?
27

What exactly just happened?
28

Well, nothing.
29

It's not committed to memory,
30

so that piece of information is just out there in the air and it's lost.
31

So how can we remember it?
32

Well we can use something called a variable.
33

So for example I can write something like var
34

myName is equal to the string
35

that’s ‘Angela’.
36

So now if I hit run and I go into the console and type myName and hit enter, then it will know that
37

myName is equal to the string
38

‘Angela’, because I've saved this piece of data inside a variable.
39

Now let's take a look at variables in more detail.
40

This is what the syntax looks like.
41

The first word var is a keyword, and just as alert is a keyword or prompt is a keyword,
42

This tells us that we are creating a new variable, creating a new data container, and that container has
43

the name of whatever it is that we give it here.
44

In this case we called it myName. And then we set that variable to be equal to the value which is the
45

string ‘Angela’.
46

Now every time we refer to myName, the computer knows that we're talking about the string ‘Angela’.
47

So let's dissect the syntax a little bit more and see what's happening behind the scenes.
48

So whenever the computer encounters the keyword var it essentially knows that it has to construct a
49

new container or a new box, and this box gets given a name,
50

whatever it is that we put after the word var, and in this case we call it myName.
51

Now after the equal sign is what we're going to place inside the box and in this case it's the string
52

that's ‘Angela’.
53

And now we get to the end.
54

There's a semi-colon.
55

We finished our line of code and that box has a lid placed on it.
56

Now the special feature of a var, and why it's called a var, is because it stands for the word variable.
57

So that means you can vary the data that you keep inside it.
58

So, in the next instance, if I decide that I didn't really like my name, and I wanted to change it, then
59

I can tap into that same container, by writing its name,
60

in this case myName, and I can set it equal a new value. And what that means is that the computer will
61

find the box that has the name of myName.
62

It’ll take out the content that's currently contained and delete it, and then it will reassign it a new
63

value depending on what I wrote on the right hand side of the equal sign.
64

And with that line of code I varied what's contained inside my box.
65

Notice that in this case I don't have to repeat the keyword var again.
66

The word var is only used when you're constructing a new box to contain your data or when you’re constructing
67

a new variable.
68

When you decide to use the variable or when you decide to change the variable you don't need to use
69

that keyword var anymore.
70

It only needs to occur once in the lifetime of your variables.
71

Now we know that we've saved this piece of data into the variable that's called myName. As a challenge,
72

I want you to create an alert that shows the content of this variable but you're not allowed to type
73

any strings.
74

Pause the video and see if you can figure it out.
75

All right.
76

So this shouldn't be too hard.
77

We already know how to write alerts.
78

We just simply write the alert keyword,
79

we open some parentheses, and inside we place whatever it is that we want to be displayed inside the
80

alert.
81

And in this case we want to show the data that's contained inside the variable myName.
82

So all we have to do is to refer to the name that we gave that variable,
83

in this case it's myName, and we can now hit run. And you can see that ‘Angela’ gets printed because that is
84

the value that’s contained inside this variable or inside this box.
85

So it's like going to a shelf where you've got lots of storage boxes and pulling out the box that's
86

labeled myName to discover what's contained inside, which is the string
87

‘Angela’. Now, in the same way, we can save the information that the user inputs to our web site.
88

So, for example, we know that myName is equal to ‘Angela’. But what if we used a prompt to ask the user
89

‘What is your name?’.
90

Now, unlike the last time, we're not going to lose this piece of information. We’re going to keep it inside
91

a variable. And that variable, we're going to give it a name, and we can call it anything we want.
92

But let's think of something that makes sense.
93

How about yourName?
94

And so now you're creating a new variable that's called yourName, and the value of this variable is
95

equal to whatever the user types into the prompt.
96

So now let's hit run and here's my prompt, ‘What is your name?’.
97

So let's say that my name is now Jack Bauer,
98

my favorite person in the world.
99

And hit
100

OK.
101

Now, if I go into the console and I type yourName, and hit enter, the computer knows the value that's
102

associated with that variable
103

is ‘Jack Bauer’.
104

So now we can create an alert that combines the values of both of those variables. So we can write, alert
105

"My name is " + myName, as the variable, +
106

", welcome to my course " +,
107

the second variable, which is yourName, +, finally,
108

maybe an exclamation mark.
109

And now we close off that line of code with a semi-colon and I don't need these two lines of code anymore
110

because that data has already been committed to the memory of the computer, so I can delete that.
111

And now if I hit run, then you can see that it's created this message,
112

'My nanme is Angela,
113

welcome to my course Jack Bauer!'. So you can see that it's substituted these two places
114

for the value that's been stored inside myName and yourName, and it's able to create this message without
115

me having to explicitly say what these two things are.
116

So, in this lesson, I wanted to introduce you to the power of variables, and how we can use it to store pieces
117

of data,
118

so we don't have to repeat ourselves and we can refer back to it later in the rest of our code.
119

And, on a more practical level, you might have a case where you create a variable that's called gameLevel,
120

and you set it equal to 1 to begin with,
121

and then, as the user goes through the levels, then you can change the value of gameLevel each time.
122

So say they complete the first level, then you can change this thing, gameLevel, to 2, and then you can
123

keep changing this as they progress.
124

And whenever you or the user wants to find out which level, then you can simply use an alert and say
125

show the gameLevel.
126

Now you'll see 3, or, if you want to make it more fancy, then you can add a string that says "Your level
127

is currently: " + gameLevel.
128

So you see that your level is currently: 3.
129

Now I hope you enjoyed this lesson. In the next lesson,
130

we're going to look at some of the rules around how you should name your variables.
131

So for all of that and more, I'll see you on the next lesson.