Original subtitles

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