1
00:00:02,090 --> 00:00:04,270
Now I mentioned that variables

2
00:00:04,270 --> 00:00:07,370
would be labeled data containers,

3
00:00:07,370 --> 00:00:10,030
which allow us to save values

4
00:00:10,030 --> 00:00:12,410
so that we can use them later

5
00:00:12,410 --> 00:00:14,620
in a different line of code basically,

6
00:00:14,620 --> 00:00:17,850
or possibly also multiple times.

7
00:00:17,850 --> 00:00:21,100
And to show you the idea behind variables,

8
00:00:21,100 --> 00:00:23,160
let's say we want to output

9
00:00:23,160 --> 00:00:26,330
the same alert with the same text again.

10
00:00:26,330 --> 00:00:28,260
This all doesn't make too much sense,

11
00:00:28,260 --> 00:00:30,083
but we're just getting started here.

12
00:00:31,010 --> 00:00:33,640
Now, of course, we can copy and paste this code line

13
00:00:33,640 --> 00:00:35,580
as I'm doing it here.

14
00:00:35,580 --> 00:00:38,170
If we do that and I reload this page,

15
00:00:38,170 --> 00:00:41,680
I get "Hi, I'm Max!" and then I get this again.

16
00:00:41,680 --> 00:00:44,070
And then I got the alert with the number

17
00:00:44,070 --> 00:00:47,773
because that's the order of alerts we're defining here.

18
00:00:48,950 --> 00:00:51,810
But this approach, besides the fact

19
00:00:51,810 --> 00:00:54,530
that it's not doing too many useful things,

20
00:00:54,530 --> 00:00:56,670
has one major downside.

21
00:00:56,670 --> 00:01:00,920
I'm basically copy and pasting this text here.

22
00:01:00,920 --> 00:01:03,920
And that means that if I want to output something else,

23
00:01:03,920 --> 00:01:05,560
let's say, I want to say "Hi, I'm Max!"

24
00:01:05,560 --> 00:01:07,490
with multiple exclamation marks,

25
00:01:07,490 --> 00:01:10,600
I have to update it in two places.

26
00:01:10,600 --> 00:01:12,830
And for this simple example here,

27
00:01:12,830 --> 00:01:16,171
that's of course not too difficult or too bad to do,

28
00:01:16,171 --> 00:01:18,570
but it's also a bit redundant.

29
00:01:18,570 --> 00:01:21,360
That's where a variable could help us.

30
00:01:21,360 --> 00:01:24,080
What if we could save this text in a variable

31
00:01:24,080 --> 00:01:28,450
and then just reuse that variable for both alerts?

32
00:01:28,450 --> 00:01:30,480
Then if we want to change that value,

33
00:01:30,480 --> 00:01:32,490
we just have to do it in one place,

34
00:01:32,490 --> 00:01:36,370
in that variable, instead of in multiple places.

35
00:01:36,370 --> 00:01:38,840
And therefore, we can now add a new feature,

36
00:01:38,840 --> 00:01:41,910
a new line of code to our script here.

37
00:01:41,910 --> 00:01:44,280
We can add a variable.

38
00:01:44,280 --> 00:01:48,920
And we do this with a special keyword in JavaScript.

39
00:01:48,920 --> 00:01:52,150
JavaScript is all about special keywords

40
00:01:52,150 --> 00:01:55,320
that give certain instructions to the browser.

41
00:01:55,320 --> 00:01:58,507
We saw one keyword, one instruction here,

42
00:01:58,507 --> 00:02:00,170
the alert instruction,

43
00:02:00,170 --> 00:02:02,730
which told the browser to show an alert.

44
00:02:02,730 --> 00:02:05,130
Now that actually was an instruction

45
00:02:05,130 --> 00:02:08,110
that caused something that we can see.

46
00:02:08,110 --> 00:02:09,610
There also are instructions

47
00:02:09,610 --> 00:02:11,530
which we can't directly see

48
00:02:11,530 --> 00:02:13,060
as a visitor of the page.

49
00:02:13,060 --> 00:02:16,440
And one instruction that we can't see as a visitor

50
00:02:16,440 --> 00:02:20,050
would be that we tell the browser to create a variable.

51
00:02:20,050 --> 00:02:22,553
And we do this with the let keyword.

52
00:02:23,660 --> 00:02:27,700
Now, unlike alert, let is not used

53
00:02:27,700 --> 00:02:29,340
like this, with brackets,

54
00:02:29,340 --> 00:02:32,840
but instead you type let, and then a blank,

55
00:02:32,840 --> 00:02:34,860
and then you choose the label,

56
00:02:34,860 --> 00:02:37,000
the name of your variable,

57
00:02:37,000 --> 00:02:39,480
because let is actually a keyword

58
00:02:39,480 --> 00:02:42,410
that tells the browser to create a variable,

59
00:02:42,410 --> 00:02:44,913
and every variable needs a name.

60
00:02:45,920 --> 00:02:47,860
So here this name is up to you,

61
00:02:47,860 --> 00:02:50,520
and we could use greetingText

62
00:02:50,520 --> 00:02:52,133
as a variable name here.

63
00:02:53,090 --> 00:02:54,920
One word about the name though.

64
00:02:54,920 --> 00:02:56,150
It is up to you,

65
00:02:56,150 --> 00:02:58,690
but it has to follow certain rules.

66
00:02:58,690 --> 00:03:01,810
Most importantly, it has to be one word,

67
00:03:01,810 --> 00:03:06,290
which basically does not use any special characters.

68
00:03:06,290 --> 00:03:09,450
There are some allowed characters like a dollar sign,

69
00:03:09,450 --> 00:03:11,890
but most characters are not allowed,

70
00:03:11,890 --> 00:03:15,920
especially dashes or forward slashes

71
00:03:15,920 --> 00:03:18,240
or colons and so on.

72
00:03:18,240 --> 00:03:20,090
That's all not allowed.

73
00:03:20,090 --> 00:03:23,590
So this must not be greetingText with a dash

74
00:03:23,590 --> 00:03:24,880
or anything like that.

75
00:03:24,880 --> 00:03:26,710
A underscore would be fine,

76
00:03:26,710 --> 00:03:30,300
but the convention for naming variables

77
00:03:30,300 --> 00:03:35,160
in JavaScript is actually to use this notation

78
00:03:35,160 --> 00:03:40,110
where your word starts with a lowercase character.

79
00:03:40,110 --> 00:03:42,660
And if it includes other words,

80
00:03:42,660 --> 00:03:44,700
where you normally would have a blank

81
00:03:44,700 --> 00:03:47,210
or anything like this, which is not allowed,

82
00:03:47,210 --> 00:03:50,683
those sub-words start with an uppercase character.

83
00:03:51,680 --> 00:03:54,613
This notation is called camel case.

84
00:03:55,630 --> 00:03:58,510
That's just a name developers gave it.

85
00:03:58,510 --> 00:04:02,080
And that's the naming convention you should follow

86
00:04:02,080 --> 00:04:06,760
when naming your variables in JavaScript.

87
00:04:06,760 --> 00:04:09,550
Now the actual content of that name is up to you.

88
00:04:09,550 --> 00:04:11,960
It should describe the kind of value

89
00:04:11,960 --> 00:04:13,640
you will be storing.

90
00:04:13,640 --> 00:04:16,839
And in this case, I plan on storing this text,

91
00:04:16,839 --> 00:04:19,550
which we could say is a greeting text.

92
00:04:19,550 --> 00:04:21,170
And hence I chose this name

93
00:04:21,170 --> 00:04:23,313
following this camel case convention.

94
00:04:24,180 --> 00:04:27,680
Now that creates a variable and gives it a name.

95
00:04:27,680 --> 00:04:29,690
One important thing is missing though.

96
00:04:29,690 --> 00:04:32,030
We're not assigning a value.

97
00:04:32,030 --> 00:04:34,610
And we can, but don't have to do this

98
00:04:34,610 --> 00:04:37,220
in the same line with an equal sign.

99
00:04:37,220 --> 00:04:38,900
As I said, you don't have to do this.

100
00:04:38,900 --> 00:04:41,790
Alternatively you can also do it in a new line

101
00:04:41,790 --> 00:04:43,600
by repeating that variable name

102
00:04:43,600 --> 00:04:46,070
now without the let though.

103
00:04:46,070 --> 00:04:50,310
You only use this when you first introduce a variable.

104
00:04:50,310 --> 00:04:51,930
Once you did introduce it,

105
00:04:51,930 --> 00:04:54,040
you can always assign a value

106
00:04:54,040 --> 00:04:55,940
in any other line of code

107
00:04:55,940 --> 00:04:57,800
by repeating that variable name

108
00:04:57,800 --> 00:04:59,263
and adding an equal sign.

109
00:05:00,280 --> 00:05:02,830
But you can also do this in one step like this,

110
00:05:02,830 --> 00:05:06,323
and now just copy your value and add this here.

111
00:05:07,890 --> 00:05:10,710
And now we created our first variable,

112
00:05:10,710 --> 00:05:12,440
which we gave a name of our choice

113
00:05:12,440 --> 00:05:14,473
and into which we stored a value.

114
00:05:15,680 --> 00:05:18,770
And now that this variable is created,

115
00:05:18,770 --> 00:05:22,030
we can use it in other parts of our code.

116
00:05:22,030 --> 00:05:25,640
For example, we can use it here for these two alerts.

117
00:05:25,640 --> 00:05:28,304
And for that, we just use that variable name,

118
00:05:28,304 --> 00:05:31,510
and we replace our strings here

119
00:05:31,510 --> 00:05:33,950
with that variable name.

120
00:05:33,950 --> 00:05:36,310
And with that, we're telling the browser

121
00:05:36,310 --> 00:05:39,610
to send an alert or to show an alert,

122
00:05:39,610 --> 00:05:42,290
and to show an alert with the value

123
00:05:42,290 --> 00:05:45,090
that is stored in that variable.

124
00:05:45,090 --> 00:05:47,450
So we won't show greetingText

125
00:05:47,450 --> 00:05:49,010
as our text in the alert,

126
00:05:49,010 --> 00:05:51,530
but instead the text stored

127
00:05:51,530 --> 00:05:54,320
in that greetingText variable.

128
00:05:54,320 --> 00:05:56,340
That's the idea behind variables.

129
00:05:56,340 --> 00:06:00,233
We can now reuse that stored value in different places.

130
00:06:01,360 --> 00:06:05,300
We can also assign a new value if we want to,

131
00:06:05,300 --> 00:06:08,930
because it's called variable, because it's flexible.

132
00:06:08,930 --> 00:06:11,533
We can overwrite the value stored in there.

133
00:06:12,410 --> 00:06:13,663
We could say "Hi,

134
00:06:14,547 --> 00:06:18,217
"I am really Max!"

135
00:06:19,180 --> 00:06:22,860
And now I'm overwriting the value stored in greetingText

136
00:06:22,860 --> 00:06:24,633
with a brand new value.

137
00:06:25,520 --> 00:06:27,820
Again, without the let keyword here,

138
00:06:27,820 --> 00:06:29,240
so we don't have that,

139
00:06:29,240 --> 00:06:31,950
because I'm not creating a new variable.

140
00:06:31,950 --> 00:06:34,240
Instead I'm assigning a new value

141
00:06:34,240 --> 00:06:37,060
to an existing variable.

142
00:06:37,060 --> 00:06:39,730
And now if I would, again, alert this

143
00:06:39,730 --> 00:06:41,890
and show the greeting text here

144
00:06:41,890 --> 00:06:44,390
after assigning a new value,

145
00:06:44,390 --> 00:06:47,710
we should see the initial value twice,

146
00:06:47,710 --> 00:06:49,970
and then that new value once

147
00:06:49,970 --> 00:06:53,700
before we then see that alert with 32 again.

148
00:06:53,700 --> 00:06:56,100
And the reason for that simply is

149
00:06:56,100 --> 00:06:58,830
that all your JavaScript code

150
00:06:58,830 --> 00:07:03,000
is executed top to bottom, left to right.

151
00:07:03,000 --> 00:07:05,440
That's how it always works.

152
00:07:05,440 --> 00:07:08,830
It's executed line after line, step by step,

153
00:07:08,830 --> 00:07:12,930
and if you alert a variable with a value,

154
00:07:12,930 --> 00:07:16,740
and then you change that value in a line thereafter,

155
00:07:16,740 --> 00:07:20,650
the first alert still uses the initial value

156
00:07:20,650 --> 00:07:22,380
because at this point of time,

157
00:07:22,380 --> 00:07:25,260
when code execution reaches this line,

158
00:07:25,260 --> 00:07:27,780
the value has not been changed yet.

159
00:07:27,780 --> 00:07:30,080
But in subsequent alerts,

160
00:07:30,080 --> 00:07:33,530
after we change the value stored in the variable,

161
00:07:33,530 --> 00:07:36,570
we will of course output that new value

162
00:07:36,570 --> 00:07:39,870
because again, it's executed top to bottom

163
00:07:39,870 --> 00:07:43,120
so that change in the variable value

164
00:07:43,120 --> 00:07:45,920
will have an impact on that alert,

165
00:07:45,920 --> 00:07:48,090
which we execute thereafter,

166
00:07:48,090 --> 00:07:50,510
not on the alerts before.

167
00:07:50,510 --> 00:07:53,600
That should hopefully make a lot of sense.

168
00:07:53,600 --> 00:07:55,740
And hence, if I save that and reload,

169
00:07:55,740 --> 00:07:58,740
I get "Hi, I'm Max!" twice.

170
00:07:58,740 --> 00:08:01,230
Then I get this new text,

171
00:08:01,230 --> 00:08:02,493
and then I get 32.

172
00:08:03,750 --> 00:08:07,370
And again, this is still a very made-up example

173
00:08:07,370 --> 00:08:09,110
to introduce those basics,

174
00:08:09,110 --> 00:08:11,640
but that is how you work with values

175
00:08:11,640 --> 00:08:13,223
and variables.