0
1
00:00:00,420 --> 00:00:01,080
All right guys.
1

2
00:00:01,110 --> 00:00:05,940
So we've been hanging out for a little while now but let me formally introduce myself.
2

3
00:00:05,940 --> 00:00:09,260
My name is Angela and I live in London.
3

4
00:00:09,270 --> 00:00:13,680
My greatest ambition in life is to eat my own body weight in sushi.
4

5
00:00:13,710 --> 00:00:16,310
Now I want you to commit this to your memory.
5

6
00:00:16,320 --> 00:00:22,380
This truly is the first step towards our wonderful blossoming friendship because instead of politely
6

7
00:00:22,380 --> 00:00:26,600
asking you ‘Do you know anyone else called Angela who lives in London?’,
7

8
00:00:26,700 --> 00:00:32,050
I can now ask you ‘Do you know anyone else with my name who lives in my city?’,
8

9
00:00:32,200 --> 00:00:35,400
or ‘Do you know anyone else who has the same ambitions as me?’.
9

10
00:00:35,400 --> 00:00:40,590
This means that whenever I want to talk to you about my name, location or ambitions, I don't have to repeat
10

11
00:00:40,590 --> 00:00:44,510
myself and tell you the information that you've already committed to memory.
11

12
00:00:44,580 --> 00:00:50,610
So this is the same reason why we have something called variables in programming. In the same way that
12

13
00:00:50,610 --> 00:00:52,840
you've committed my name to your memory,
13

14
00:00:52,860 --> 00:00:59,430
we can commit pieces of data to the memory of the computer, but first we need to enable the user to enter
14

15
00:00:59,430 --> 00:01:00,650
a piece of information.
15

16
00:01:00,690 --> 00:01:03,060
So let's learn about the prompt keyword.
16

17
00:01:03,060 --> 00:01:10,230
Now if you open up Chrome and go to our Developer Tools, we're going to head into our Sources to work
17

18
00:01:10,290 --> 00:01:11,970
inside Chrome Snippets.
18

19
00:01:11,970 --> 00:01:17,820
Now inside the same index.js, it's just a blank file at the moment, and I want you to write a
19

20
00:01:17,820 --> 00:01:23,150
prompt that asks the user ‘What is your name?’.
20

21
00:01:23,280 --> 00:01:30,390
And now if I hit command enter or control enter on Windows, or simply just click over here, then it will run
21

22
00:01:30,390 --> 00:01:33,250
my code and it will show me a prompt.
22

23
00:01:33,300 --> 00:01:37,340
Now a prompt is pretty much identical to an alert or a pop up,
23

24
00:01:37,470 --> 00:01:43,820
but in this case it actually allows the user to input something, namely a piece of text.
24

25
00:01:43,980 --> 00:01:47,930
So I'm going to tell it that my name is Angela.
25

26
00:01:47,970 --> 00:01:50,780
So what happened to that piece of data?
26

27
00:01:50,790 --> 00:01:52,700
How can I retrieve it back?
27

28
00:01:52,710 --> 00:01:54,330
What exactly just happened?
28

29
00:01:54,510 --> 00:01:55,890
Well, nothing.
29

30
00:01:55,890 --> 00:01:57,840
It's not committed to memory,
30

31
00:01:57,840 --> 00:02:03,030
so that piece of information is just out there in the air and it's lost.
31

32
00:02:03,120 --> 00:02:05,740
So how can we remember it?
32

33
00:02:05,910 --> 00:02:08,920
Well we can use something called a variable.
33

34
00:02:08,940 --> 00:02:12,650
So for example I can write something like var
34

35
00:02:12,900 --> 00:02:16,080
myName is equal to the string
35

36
00:02:16,140 --> 00:02:17,590
that’s ‘Angela’.
36

37
00:02:17,700 --> 00:02:27,490
So now if I hit run and I go into the console and type myName and hit enter, then it will know that
37

38
00:02:27,490 --> 00:02:29,610
myName is equal to the string
38

39
00:02:29,650 --> 00:02:34,870
‘Angela’, because I've saved this piece of data inside a variable.
39

40
00:02:34,870 --> 00:02:38,450
Now let's take a look at variables in more detail.
40

41
00:02:38,710 --> 00:02:40,880
This is what the syntax looks like.
41

42
00:02:40,930 --> 00:02:49,040
The first word var is a keyword, and just as alert is a keyword or prompt is a keyword,
42

43
00:02:49,060 --> 00:02:55,690
This tells us that we are creating a new variable, creating a new data container, and that container has
43

44
00:02:55,690 --> 00:02:59,100
the name of whatever it is that we give it here.
44

45
00:02:59,380 --> 00:03:07,030
In this case we called it myName. And then we set that variable to be equal to the value which is the
45

46
00:03:07,030 --> 00:03:08,490
string ‘Angela’.
46

47
00:03:08,500 --> 00:03:15,630
Now every time we refer to myName, the computer knows that we're talking about the string ‘Angela’.
47

48
00:03:15,700 --> 00:03:20,630
So let's dissect the syntax a little bit more and see what's happening behind the scenes.
48

49
00:03:20,680 --> 00:03:26,380
So whenever the computer encounters the keyword var it essentially knows that it has to construct a
49

50
00:03:26,380 --> 00:03:31,340
new container or a new box, and this box gets given a name,
50

51
00:03:31,480 --> 00:03:36,730
whatever it is that we put after the word var, and in this case we call it myName.
51

52
00:03:37,000 --> 00:03:43,600
Now after the equal sign is what we're going to place inside the box and in this case it's the string
52

53
00:03:43,930 --> 00:03:45,230
that's ‘Angela’.
53

54
00:03:45,310 --> 00:03:46,530
And now we get to the end.
54

55
00:03:46,540 --> 00:03:47,910
There's a semi-colon.
55

56
00:03:47,950 --> 00:03:53,140
We finished our line of code and that box has a lid placed on it.
56

57
00:03:53,140 --> 00:04:00,280
Now the special feature of a var, and why it's called a var, is because it stands for the word variable.
57

58
00:04:00,280 --> 00:04:04,500
So that means you can vary the data that you keep inside it.
58

59
00:04:04,750 --> 00:04:11,290
So, in the next instance, if I decide that I didn't really like my name, and I wanted to change it, then
59

60
00:04:11,290 --> 00:04:14,560
I can tap into that same container, by writing its name,
60

61
00:04:14,590 --> 00:04:21,370
in this case myName, and I can set it equal a new value. And what that means is that the computer will
61

62
00:04:21,370 --> 00:04:24,930
find the box that has the name of myName.
62

63
00:04:25,020 --> 00:04:32,080
It’ll take out the content that's currently contained and delete it, and then it will reassign it a new
63

64
00:04:32,080 --> 00:04:36,190
value depending on what I wrote on the right hand side of the equal sign.
64

65
00:04:36,340 --> 00:04:41,020
And with that line of code I varied what's contained inside my box.
65

66
00:04:41,020 --> 00:04:45,550
Notice that in this case I don't have to repeat the keyword var again.
66

67
00:04:45,670 --> 00:04:52,900
The word var is only used when you're constructing a new box to contain your data or when you’re constructing
67

68
00:04:52,960 --> 00:04:53,980
a new variable.
68

69
00:04:54,160 --> 00:04:59,890
When you decide to use the variable or when you decide to change the variable you don't need to use
69

70
00:04:59,890 --> 00:05:01,280
that keyword var anymore.
70

71
00:05:01,300 --> 00:05:05,770
It only needs to occur once in the lifetime of your variables.
71

72
00:05:05,770 --> 00:05:11,860
Now we know that we've saved this piece of data into the variable that's called myName. As a challenge,
72

73
00:05:11,890 --> 00:05:20,320
I want you to create an alert that shows the content of this variable but you're not allowed to type
73

74
00:05:20,380 --> 00:05:21,370
any strings.
74

75
00:05:21,490 --> 00:05:23,800
Pause the video and see if you can figure it out.
75

76
00:05:26,440 --> 00:05:26,760
All right.
76

77
00:05:26,770 --> 00:05:28,200
So this shouldn't be too hard.
77

78
00:05:28,210 --> 00:05:30,470
We already know how to write alerts.
78

79
00:05:30,550 --> 00:05:32,760
We just simply write the alert keyword,
79

80
00:05:32,800 --> 00:05:38,950
we open some parentheses, and inside we place whatever it is that we want to be displayed inside the
80

81
00:05:38,950 --> 00:05:39,720
alert.
81

82
00:05:39,910 --> 00:05:45,540
And in this case we want to show the data that's contained inside the variable myName.
82

83
00:05:45,640 --> 00:05:50,880
So all we have to do is to refer to the name that we gave that variable,
83

84
00:05:51,010 --> 00:05:58,060
in this case it's myName, and we can now hit run. And you can see that ‘Angela’ gets printed because that is
84

85
00:05:58,060 --> 00:06:02,740
the value that’s contained inside this variable or inside this box.
85

86
00:06:02,950 --> 00:06:07,810
So it's like going to a shelf where you've got lots of storage boxes and pulling out the box that's
86

87
00:06:07,810 --> 00:06:12,420
labeled myName to discover what's contained inside, which is the string
87

88
00:06:12,520 --> 00:06:18,760
‘Angela’. Now, in the same way, we can save the information that the user inputs to our web site.
88

89
00:06:18,760 --> 00:06:26,760
So, for example, we know that myName is equal to ‘Angela’. But what if we used a prompt to ask the user
89

90
00:06:27,160 --> 00:06:29,180
‘What is your name?’.
90

91
00:06:29,240 --> 00:06:35,470
Now, unlike the last time, we're not going to lose this piece of information. We’re going to keep it inside
91

92
00:06:35,470 --> 00:06:40,530
a variable. And that variable, we're going to give it a name, and we can call it anything we want.
92

93
00:06:40,690 --> 00:06:42,480
But let's think of something that makes sense.
93

94
00:06:42,550 --> 00:06:44,320
How about yourName?
94

95
00:06:44,320 --> 00:06:51,430
And so now you're creating a new variable that's called yourName, and the value of this variable is
95

96
00:06:51,460 --> 00:06:55,340
equal to whatever the user types into the prompt.
96

97
00:06:55,340 --> 00:07:00,040
So now let's hit run and here's my prompt, ‘What is your name?’.
97

98
00:07:00,190 --> 00:07:04,420
So let's say that my name is now Jack Bauer,
98

99
00:07:04,420 --> 00:07:06,190
my favorite person in the world.
99

100
00:07:06,660 --> 00:07:07,320
And hit
100

101
00:07:07,360 --> 00:07:08,060
OK.
101

102
00:07:08,290 --> 00:07:15,130
Now, if I go into the console and I type yourName, and hit enter, the computer knows the value that's
102

103
00:07:15,130 --> 00:07:16,890
associated with that variable
103

104
00:07:17,020 --> 00:07:18,550
is ‘Jack Bauer’.
104

105
00:07:18,670 --> 00:07:26,320
So now we can create an alert that combines the values of both of those variables. So we can write, alert
105

106
00:07:26,320 --> 00:07:33,310
"My name is " + myName, as the variable, + 
106

107
00:07:33,310 --> 00:07:37,020
", welcome to my course " +,
107

108
00:07:37,030 --> 00:07:40,920
the second variable, which is yourName, +, finally,
108

109
00:07:40,960 --> 00:07:42,880
maybe an exclamation mark.
109

110
00:07:42,910 --> 00:07:48,850
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

111
00:07:48,880 --> 00:07:54,730
because that data has already been committed to the memory of the computer, so I can delete that.
111

112
00:07:54,770 --> 00:07:58,490
And now if I hit run, then you can see that it's created this message,
112

113
00:07:58,550 --> 00:08:01,300
'My nanme is Angela,
113

114
00:08:01,510 --> 00:08:08,770
welcome to my course Jack Bauer!'. So you can see that it's substituted these two places
114

115
00:08:08,830 --> 00:08:15,760
for the value that's been stored inside myName and yourName, and it's able to create this message without
115

116
00:08:15,760 --> 00:08:20,610
me having to explicitly say what these two things are.
116

117
00:08:20,680 --> 00:08:27,910
So, in this lesson, I wanted to introduce you to the power of variables, and how we can use it to store pieces
117

118
00:08:27,910 --> 00:08:28,730
of data,
118

119
00:08:28,840 --> 00:08:34,710
so we don't have to repeat ourselves and we can refer back to it later in the rest of our code.
119

120
00:08:34,840 --> 00:08:41,620
And, on a more practical level, you might have a case where you create a variable that's called gameLevel,
120

121
00:08:41,860 --> 00:08:44,440
and you set it equal to 1 to begin with,
121

122
00:08:44,560 --> 00:08:51,310
and then, as the user goes through the levels, then you can change the value of gameLevel each time.
122

123
00:08:51,310 --> 00:08:58,030
So say they complete the first level, then you can change this thing, gameLevel, to 2, and then you can
123

124
00:08:58,030 --> 00:09:00,150
keep changing this as they progress.
124

125
00:09:00,220 --> 00:09:06,160
And whenever you or the user wants to find out which level, then you can simply use an alert and say
125

126
00:09:06,280 --> 00:09:07,700
show the gameLevel.
126

127
00:09:07,810 --> 00:09:15,130
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

128
00:09:15,400 --> 00:09:21,770
is currently: " + gameLevel.
128

129
00:09:21,820 --> 00:09:25,010
So you see that your level is currently: 3.
129

130
00:09:25,090 --> 00:09:27,880
Now I hope you enjoyed this lesson. In the next lesson,
130

131
00:09:27,880 --> 00:09:32,110
we're going to look at some of the rules around how you should name your variables.
131

132
00:09:32,200 --> 00:09:35,100
So for all of that and more, I'll see you on the next lesson.