1
00:00:11,030 --> 00:00:16,540
Hey, everyone, in the previous lesson, we just learned how to work with age stem male elements,

2
00:00:16,550 --> 00:00:19,700
how to select elements from the Dom tree.

3
00:00:20,300 --> 00:00:26,720
I know it's really tempting to just go crazy on it, try to change all the HCM al elements, try to

4
00:00:26,720 --> 00:00:28,730
change the CSX and all that.

5
00:00:29,090 --> 00:00:34,100
But trust me, we have some important things that we need to learn first.

6
00:00:34,910 --> 00:00:39,470
So in this lesson, we are going to talk about variables before we get started.

7
00:00:39,530 --> 00:00:41,090
You're seeing this error here.

8
00:00:41,390 --> 00:00:44,840
This is because we are using the inner ASTM, Al.

9
00:00:45,850 --> 00:00:51,430
From the previous example, and that element does not exist in this page.

10
00:00:51,790 --> 00:00:55,460
That element existed in the page of the order lesson.

11
00:00:55,720 --> 00:00:56,230
We were.

12
00:00:57,640 --> 00:01:01,960
Now that this element does not exist, we are going to see this error.

13
00:01:02,200 --> 00:01:08,740
So in order to remove this while we move forward in the course, it's better that we always comment

14
00:01:09,280 --> 00:01:12,070
the previous code from the previous lessons.

15
00:01:12,370 --> 00:01:15,830
So we don't have this kind of error in the console.

16
00:01:16,330 --> 00:01:17,830
If you want to make the lesson.

17
00:01:19,280 --> 00:01:20,870
Names more visible.

18
00:01:21,350 --> 00:01:22,700
You can do it like this.

19
00:01:32,300 --> 00:01:36,190
So now we're just going to start lesson number five.

20
00:01:38,870 --> 00:01:41,150
And we are going to talk about variables.

21
00:01:45,290 --> 00:01:47,600
So by doing this, let's go back there.

22
00:01:48,140 --> 00:01:49,190
Refresh the page.

23
00:01:49,220 --> 00:01:50,770
And now the error is gone.

24
00:01:52,460 --> 00:01:54,680
All right, so let's talk about variables.

25
00:01:55,100 --> 00:01:57,470
Well, first of all, computer programs.

26
00:01:57,770 --> 00:02:00,500
They exist to manipulate data.

27
00:02:00,800 --> 00:02:03,710
So basically they receive some input.

28
00:02:04,190 --> 00:02:08,030
They process it and then they show some output.

29
00:02:08,300 --> 00:02:10,670
This is what a computer program does.

30
00:02:11,610 --> 00:02:18,240
But so far, we haven't seen our Web sites as computer programs because we only had static pages.

31
00:02:18,510 --> 00:02:25,250
If you're coming from my age to email NCSA scores, we just had a static page with HDMI oil and CSX.

32
00:02:25,950 --> 00:02:31,920
But from now on, if we want our Web sites to be dynamic and interactive, we need to think of them

33
00:02:31,920 --> 00:02:34,800
as computer programs running on the Web.

34
00:02:35,700 --> 00:02:41,190
So I'd just place you're a very, very simple example to show you what I'm talking about.

35
00:02:41,850 --> 00:02:43,560
I'm just going to type in my name.

36
00:02:44,770 --> 00:02:50,140
And I'm going to click confirm and as you can see, the Web site is greeting me.

37
00:02:50,920 --> 00:02:53,110
So here we are working with data.

38
00:02:53,140 --> 00:02:55,540
We just provided some piece of data.

39
00:02:55,630 --> 00:02:59,830
Our name and then our program is doing something with it.

40
00:02:59,860 --> 00:03:04,990
So our program is getting the name and generating this message.

41
00:03:05,470 --> 00:03:10,150
And there's also some logic involved because you fight, don't type anything.

42
00:03:10,150 --> 00:03:15,640
And I click confirm instead of just showing an empty space here.

43
00:03:15,920 --> 00:03:19,690
I'm replacing the user name by this guest user.

44
00:03:19,750 --> 00:03:23,380
So I made some logic here to make this happen.

45
00:03:23,770 --> 00:03:27,610
So in order to do this, we are going to need variables.

46
00:03:27,670 --> 00:03:29,860
Variables are used to store data.

47
00:03:29,920 --> 00:03:31,450
So we can use it later.

48
00:03:31,690 --> 00:03:36,460
So when I click confirm, I get the name and I store it in a variable.

49
00:03:36,700 --> 00:03:39,820
So I can use later to form this message.

50
00:03:41,060 --> 00:03:48,260
So here's an example of how do we create a variable so we use the VAR keyword, followed by the name,

51
00:03:48,320 --> 00:03:54,180
which is also called the identifier, the equal sign and then the value.

52
00:03:54,230 --> 00:03:56,900
We want to assign to this variable.

53
00:03:57,320 --> 00:04:01,310
So after doing this, we can then access any time we want.

54
00:04:01,790 --> 00:04:03,140
So let's make a test.

55
00:04:03,260 --> 00:04:05,000
Let's go to Visual Studio Code.

56
00:04:06,870 --> 00:04:09,060
Let's create a new variable, so var.

57
00:04:10,280 --> 00:04:11,540
Let's use the same name.

58
00:04:11,750 --> 00:04:12,920
User name.

59
00:04:14,600 --> 00:04:18,860
Equal sign and now inside quotation marks.

60
00:04:19,160 --> 00:04:25,430
This is going to be clear starting from the next lesson, we are going to talk about data types so you

61
00:04:25,460 --> 00:04:30,680
will understand finally why we are using these quotation marks every time.

62
00:04:31,160 --> 00:04:32,930
So I'm just gonna type my name.

63
00:04:34,070 --> 00:04:34,700
All right.

64
00:04:36,320 --> 00:04:42,440
Now, I've just created this variable, so this is available any time I want to use it.

65
00:04:42,740 --> 00:04:45,830
So now I'm just going to do console that log.

66
00:04:51,080 --> 00:04:54,000
And I'm going to show this variable in the console.

67
00:04:54,330 --> 00:04:55,680
Let's see if this is working.

68
00:04:55,710 --> 00:04:56,670
Let's save this.

69
00:04:57,000 --> 00:04:57,780
Go back there.

70
00:04:57,840 --> 00:04:59,130
Refresh the page.

71
00:04:59,570 --> 00:05:03,000
Now we can see that we were able to use this variable.

72
00:05:03,270 --> 00:05:06,900
So what's the use of sending this value to the console?

73
00:05:07,200 --> 00:05:13,230
Well, actually, this is just a good method of testing because now we know that we were able to create

74
00:05:13,230 --> 00:05:14,040
the variable.

75
00:05:14,190 --> 00:05:17,640
We know that the value has been correctly assigned to it.

76
00:05:18,090 --> 00:05:23,970
So we can now use it to form the greeting message and place it inside that HCM out element.

77
00:05:24,060 --> 00:05:26,130
So let me copy this example here.

78
00:05:29,950 --> 00:05:35,290
So instead of doing console dot log, just let me go back to the h m l just a second.

79
00:05:35,770 --> 00:05:39,040
We can see that this aliment that I've placed the message.

80
00:05:39,070 --> 00:05:40,420
Let me right.

81
00:05:40,420 --> 00:05:42,250
Click here and go to inspect.

82
00:05:44,580 --> 00:05:45,540
So here it is.

83
00:05:45,660 --> 00:05:53,790
We have the input and right after we have this element with the idea of user greeting message.

84
00:05:54,090 --> 00:05:56,700
So this is where I placed the message.

85
00:05:56,940 --> 00:05:58,230
Let me test it out.

86
00:06:03,100 --> 00:06:06,110
We can see that the message is going to this element.

87
00:06:06,340 --> 00:06:10,630
So let's try to get our variable and do the same thing inside here.

88
00:06:12,890 --> 00:06:16,670
So copying this, we have document get element by I.D..

89
00:06:16,700 --> 00:06:19,010
This is the idea of the element we want.

90
00:06:19,580 --> 00:06:22,690
So now we are just going to do hello.

91
00:06:22,910 --> 00:06:24,860
And then we are going to concatenate.

92
00:06:24,950 --> 00:06:26,760
So, again, don't worry too much.

93
00:06:26,900 --> 00:06:32,360
Now, starting from the next lesson, you are going to learn how to concatenate and what we are doing

94
00:06:32,360 --> 00:06:32,690
here.

95
00:06:33,230 --> 00:06:35,390
For now, you can just copy this code.

96
00:06:35,720 --> 00:06:38,090
So we are concatenating this text.

97
00:06:38,120 --> 00:06:38,720
Hello.

98
00:06:39,050 --> 00:06:43,730
Putting the user name and then the exclamation mark.

99
00:06:45,140 --> 00:06:48,020
Let me end this statement with a semicolon.

100
00:06:49,370 --> 00:06:50,160
Save it.

101
00:06:50,890 --> 00:06:58,430
And now if we refresh the page, we can see that we were able to create the variable, get its value

102
00:06:58,670 --> 00:07:01,280
and send this value to this element.

103
00:07:01,430 --> 00:07:03,830
So this is exactly what I'm doing here.

104
00:07:03,860 --> 00:07:08,570
The only difference is that I'm only doing it after pressing the button.

105
00:07:08,600 --> 00:07:10,640
I'm not doing it on page load.

106
00:07:10,880 --> 00:07:14,390
So I'm using an event, a click event here.

107
00:07:14,840 --> 00:07:18,320
And I'm also getting the data not from a variable.

108
00:07:18,470 --> 00:07:21,350
I don't have to type the name in the code.

109
00:07:21,590 --> 00:07:27,230
I'm just getting what's inside this element, which is an age, simple elements like any other.

110
00:07:28,270 --> 00:07:33,730
So this is a little more advanced, but it's really easy to do, we're going to learn how to do this

111
00:07:33,790 --> 00:07:34,480
shortly.

112
00:07:36,110 --> 00:07:40,820
So before moving ahead, there are some important things that we have to talk about.

113
00:07:40,850 --> 00:07:49,370
And the first one is the rules for naming variables so variable names can contain letters, numbers

114
00:07:49,490 --> 00:07:52,250
under Schaus and dollar signs.

115
00:07:52,640 --> 00:07:57,830
Any other symbol is not allowed like a forward slash or a dash.

116
00:07:58,190 --> 00:08:02,690
The only symbols allowed our underscores and dollar signs.

117
00:08:03,320 --> 00:08:09,800
One important thing is that variable names can contain numbers, but they can't start with numbers.

118
00:08:10,460 --> 00:08:13,290
White spaces are also not allowed.

119
00:08:13,660 --> 00:08:19,430
So to see some examples, let's see some valid and some invalid variable names.

120
00:08:19,730 --> 00:08:21,270
So here we only have ladder's.

121
00:08:21,320 --> 00:08:22,170
That's OK.

122
00:08:22,550 --> 00:08:23,480
Ladder's again.

123
00:08:23,690 --> 00:08:25,430
Here we have the dollar sign.

124
00:08:25,700 --> 00:08:28,580
No problem with it on the score.

125
00:08:28,700 --> 00:08:29,300
Fine.

126
00:08:29,720 --> 00:08:31,700
No, everything here is allowed.

127
00:08:32,270 --> 00:08:38,690
This one is invalid because although we can use no, the variable name cannot start with a number.

128
00:08:38,750 --> 00:08:40,400
So this is an invalid name.

129
00:08:40,850 --> 00:08:47,360
This is also an invalid name because we have a dash and we can only use underscore, not dash.

130
00:08:47,750 --> 00:08:52,340
This is also invalid because there's a whitespace here.

131
00:08:52,370 --> 00:08:54,230
We can't use white spaces.

132
00:08:54,530 --> 00:08:59,450
And the last one is invalid because new is a JavaScript.

133
00:08:59,690 --> 00:09:01,250
Reserved words.

134
00:09:01,760 --> 00:09:05,780
I'm going to show you a few more reserved words down here.

135
00:09:06,350 --> 00:09:08,030
Just one important note.

136
00:09:08,090 --> 00:09:14,090
If you speak a foreign language, avoid using characters that don't exist in English.

137
00:09:14,120 --> 00:09:18,070
So, for instance, we have this in Portuguese and Swedish.

138
00:09:18,080 --> 00:09:19,040
We have this.

139
00:09:19,370 --> 00:09:20,690
This is also Portuguese.

140
00:09:20,720 --> 00:09:21,760
This is Russian.

141
00:09:21,770 --> 00:09:27,800
Chinese don't use those characters on variable names, although they are valid.

142
00:09:28,340 --> 00:09:35,390
We should also write universal codes so that can be easily maintained by anyone who understands English.

143
00:09:35,420 --> 00:09:36,800
That's a rule of thumb.

144
00:09:37,490 --> 00:09:43,730
So now talking about key words, these are used for internal functions and comments.

145
00:09:43,970 --> 00:09:47,810
So therefore we can't use them as variable names.

146
00:09:47,870 --> 00:09:49,730
So here we have a few examples.

147
00:09:50,060 --> 00:09:52,220
Since we have the VAR key word.

148
00:09:53,190 --> 00:09:58,020
That we used to create a new variable, we cannot use it as a variable name.

149
00:09:58,320 --> 00:10:03,000
Same thing goes for function, which we are going to use to create functions.

150
00:10:03,480 --> 00:10:05,910
The IF is used for conditionals.

151
00:10:06,360 --> 00:10:11,150
So these are a few examples of reserved words or keywords.

152
00:10:11,550 --> 00:10:14,070
So we can't use them for variable names.

153
00:10:14,460 --> 00:10:18,270
If you want a complete list, you can just click on this link.

154
00:10:19,020 --> 00:10:25,200
Now, next up, I've already mentioned that JavaScript is a case sensitive language.

155
00:10:25,410 --> 00:10:27,010
So always remember this.

156
00:10:27,360 --> 00:10:35,910
If you create a variable like this called user name, you cannot call it like this later with a capital

157
00:10:35,910 --> 00:10:36,110
U.

158
00:10:36,210 --> 00:10:38,910
Because this is going to return an error.

159
00:10:39,330 --> 00:10:43,230
JavaScript is not going to recognize this as a variable.

160
00:10:44,290 --> 00:10:49,120
Another thing that's very important that a lot of people forget is that you should always keep your

161
00:10:49,120 --> 00:10:52,240
names meaningful and self explanatory.

162
00:10:53,140 --> 00:10:58,210
Good code should be easily understood not only by who wrote it, but also by other people.

163
00:10:58,480 --> 00:11:01,000
So think of that when naming variables.

164
00:11:01,880 --> 00:11:03,980
So here I'm showing you three examples.

165
00:11:04,340 --> 00:11:07,760
Let's say we want to get the first and last name of a person.

166
00:11:08,000 --> 00:11:09,800
So this is option number one.

167
00:11:10,100 --> 00:11:13,610
I'm using first name and last name for the names of the.

168
00:11:14,690 --> 00:11:20,210
Option number two, I'm using name one name to an option three.

169
00:11:20,240 --> 00:11:22,010
I'm using A and B.

170
00:11:22,610 --> 00:11:24,590
So those are all valid names.

171
00:11:24,620 --> 00:11:29,290
But it should be pretty obvious that the first option is the best one.

172
00:11:29,870 --> 00:11:31,930
The second one is acceptable.

173
00:11:31,940 --> 00:11:33,800
It's actually name one a name too.

174
00:11:33,830 --> 00:11:36,230
But it's not exactly what it is.

175
00:11:36,260 --> 00:11:38,590
What it is is first name and last name.

176
00:11:38,600 --> 00:11:39,800
So this is perfect.

177
00:11:40,160 --> 00:11:42,890
And the third option is really confusing.

178
00:11:43,370 --> 00:11:48,020
A person reading this code may not know what this is about.

179
00:11:48,350 --> 00:11:55,520
So just to finish this subject, let me just talk quickly about naming convention programming.

180
00:11:55,520 --> 00:12:00,410
Languages normally have naming conventions to make the code more easily readable.

181
00:12:00,860 --> 00:12:08,150
So JavaScript programmers usually choose the lower cammo case style for naming variables for sure.

182
00:12:08,180 --> 00:12:13,850
If you have research about JavaScript, you might have seen a lot of names written like this.

183
00:12:14,270 --> 00:12:16,910
This is called lower cammo case.

184
00:12:17,120 --> 00:12:26,090
So the first ladder is going to be lower case than the first letter of each word is going to start with

185
00:12:26,360 --> 00:12:26,980
uppercase.

186
00:12:27,560 --> 00:12:29,000
So here we have two words.

187
00:12:29,060 --> 00:12:34,540
The first word is all lower case than the second word starts with the upper case.

188
00:12:34,880 --> 00:12:35,870
Same thing here.

189
00:12:36,080 --> 00:12:37,010
Same thing here.

190
00:12:37,160 --> 00:12:38,630
Now we have three words.

191
00:12:38,780 --> 00:12:41,420
We can see the first one starting with lowercase.

192
00:12:41,720 --> 00:12:45,470
Second word uppercase on the first character.

193
00:12:45,770 --> 00:12:46,580
Third one.

194
00:12:46,970 --> 00:12:48,920
And it goes like this.

195
00:12:50,150 --> 00:12:54,380
It's also common to see this kind of pattern for variable names.

196
00:12:54,410 --> 00:13:00,020
So using all the ladders in lower case and using underscores two separate words.

197
00:13:00,470 --> 00:13:03,950
You should pick the style you feel most comfortable we've been.

198
00:13:03,950 --> 00:13:05,210
Just keep consistent.

199
00:13:05,210 --> 00:13:08,130
Don't start using cammo case and then change for this.

200
00:13:08,150 --> 00:13:14,500
Just pick the one that you think it's spatter and just use it throughout your code for this course.

201
00:13:14,570 --> 00:13:19,070
I'm just going to use lower cammo case, which is the one I like the most.

202
00:13:19,580 --> 00:13:24,410
Another important thing is that you try to keep the names as short as possible.

203
00:13:24,860 --> 00:13:32,180
So using the first name as an example, this would be a better option than first name off the user,

204
00:13:32,360 --> 00:13:33,800
which is a bit too long.

205
00:13:34,550 --> 00:13:34,870
All right.

206
00:13:34,880 --> 00:13:36,320
So that was all for now.

207
00:13:36,530 --> 00:13:38,510
We already know what variables are.

208
00:13:38,540 --> 00:13:40,010
We know how to create one.

209
00:13:40,340 --> 00:13:42,380
We know the rules for naming them.

210
00:13:42,710 --> 00:13:47,390
We know some patterns that are commonly used by shava script programmers.

211
00:13:47,660 --> 00:13:50,450
So now we are ready to start working with them.

212
00:13:51,910 --> 00:13:57,520
In the next video, we're going to start learning which data types can be assigned to our variables.

213
00:13:57,640 --> 00:13:58,420
I'll see you then.