1
00:00:01,560 --> 00:00:02,950
Welcome back, ladies and gentlemen, today.

2
00:00:02,970 --> 00:00:08,340
What are we going to do is we're going to continue working here, but before working here, I just want

3
00:00:08,340 --> 00:00:16,850
to introduce a new concept, how we can create HTML tags and put a sign in here in the card.

4
00:00:17,370 --> 00:00:18,300
I mean, in this body.

5
00:00:18,300 --> 00:00:26,940
So we can learn that one before, because according to the ECMAScript 2015, we use so far variables.

6
00:00:26,940 --> 00:00:29,400
But there are also constants in Lepp.

7
00:00:29,820 --> 00:00:34,310
I'm going to talk about maybe later, but I'm just going to say the constants.

8
00:00:34,320 --> 00:00:40,200
You should know that constants behave like aulet variables, but they cannot be reassigned.

9
00:00:40,950 --> 00:00:48,560
So for example, I'm going to say constants constant pi and that will be three point one four one five,

10
00:00:48,570 --> 00:00:49,200
for example.

11
00:00:49,200 --> 00:00:52,260
I'm just saying no, because a lot

12
00:00:55,380 --> 00:00:58,740
and you will see the difference between constants and variables.

13
00:00:58,980 --> 00:01:06,480
Now I'm just going to do it like this and it will give me now one more thing is that if we try if we

14
00:01:06,480 --> 00:01:12,900
try to, for example, to really clear it, the variable here on top, for example, like we have done

15
00:01:12,900 --> 00:01:21,840
with the variables like three point one four six to rounded up, now we find an error assignment in

16
00:01:21,840 --> 00:01:22,700
constant variable.

17
00:01:23,070 --> 00:01:25,280
So that is what is happening.

18
00:01:25,710 --> 00:01:28,400
So I'm just going to give you another example.

19
00:01:28,680 --> 00:01:35,630
So declaring a variable with constants, it is very important because it's a block scope.

20
00:01:36,150 --> 00:01:38,550
So I'm just going to give you an example.

21
00:01:38,550 --> 00:01:45,360
For example, here, I'm just going to create a variable X in that very well.

22
00:01:45,360 --> 00:01:46,680
X will hold number 10.

23
00:01:46,770 --> 00:01:47,110
Right.

24
00:01:47,120 --> 00:01:49,890
I'm just going to remove this pie here.

25
00:01:51,000 --> 00:01:53,250
Let's put it here, pie.

26
00:01:54,240 --> 00:01:59,680
No, I'm just going to remove this one X and I'm going to I'm going to log this X here.

27
00:02:00,840 --> 00:02:06,570
Now, imagine that there is a block here, some block of code in here.

28
00:02:06,570 --> 00:02:10,240
I define a constants in input X to be five.

29
00:02:10,950 --> 00:02:14,830
Now, what do you think that when I print now, what will you think will happen?

30
00:02:15,240 --> 00:02:19,860
So it will print out ten because this has a global scope and it will go here.

31
00:02:20,190 --> 00:02:25,170
But if I want to print out this one comes a lot, these constants.

32
00:02:25,170 --> 00:02:28,560
I need to print it here and it will go five, then ten.

33
00:02:28,860 --> 00:02:30,820
You understand this is coming from the constants.

34
00:02:31,110 --> 00:02:32,360
This is coming from the other one.

35
00:02:32,810 --> 00:02:38,310
Now, also, we cannot so I'm just giving you example.

36
00:02:38,310 --> 00:02:43,590
We cannot, for example, constants tie again and we cannot leave it like this.

37
00:02:44,460 --> 00:02:50,540
We cannot put JavaScript constants variable date without value.

38
00:02:50,670 --> 00:02:52,170
So we need to assign a value.

39
00:02:52,530 --> 00:02:59,480
So because a lot pi and if I refresh now again, we're going to have a problem.

40
00:02:59,700 --> 00:03:03,260
So it's missing initialize are in constant declaration.

41
00:03:03,690 --> 00:03:11,280
This is how we get do so the keyword constants is a little bit misleading and it does not define a constant

42
00:03:11,370 --> 00:03:12,190
value.

43
00:03:12,210 --> 00:03:17,720
Right now we also have we can talk about primitive values.

44
00:03:18,180 --> 00:03:26,490
Now, as I told you, you can't, for example, if you define it, if you define here, this will be

45
00:03:26,490 --> 00:03:26,760
OK.

46
00:03:26,760 --> 00:03:27,690
Three point fourteen.

47
00:03:28,020 --> 00:03:28,470
Right.

48
00:03:28,770 --> 00:03:39,780
And now if you want to assign a different value to PI here and give it to by plus 10, that should be

49
00:03:39,780 --> 00:03:43,380
thirteen point fourteen right now.

50
00:03:43,380 --> 00:03:45,930
If I see that, that should give me an error.

51
00:03:46,080 --> 00:03:49,120
Oncotype error, assigning the constant variable.

52
00:03:49,140 --> 00:03:53,850
So if we assign a primitive value to council, we cannot change that.

53
00:03:53,850 --> 00:03:54,480
Primitivo.

54
00:03:54,510 --> 00:03:55,890
This is called primitive value.

55
00:03:56,160 --> 00:03:57,870
This is what we can do now.

56
00:03:59,130 --> 00:04:05,710
When we talk about objects here, you can change the properties of a constant object.

57
00:04:05,730 --> 00:04:09,180
Right now I'm just going to create a constant object.

58
00:04:09,180 --> 00:04:15,810
Constant car is that the object, remember, is a curly braces.

59
00:04:16,000 --> 00:04:18,210
I'm going to say type here.

60
00:04:18,850 --> 00:04:22,230
I don't know for and model.

61
00:04:23,820 --> 00:04:33,420
I don't know what model will be 500 t just made up that model color and I just color blue.

62
00:04:34,140 --> 00:04:42,180
Right now the thing is that we can change the property of the Konstanz car, the color for example.

63
00:04:42,330 --> 00:04:43,750
I'm going to change it to red.

64
00:04:44,280 --> 00:04:50,160
Now if I did cancel lot of car, I expect to see something.

65
00:04:52,410 --> 00:05:00,150
To change a color to red before let's do it like this, so we have four model blue that we have for

66
00:05:00,150 --> 00:05:05,750
model, so when we're dealing with the objects, we can change the properties of that object.

67
00:05:06,960 --> 00:05:09,900
But you cannot reassign a constant object.

68
00:05:10,080 --> 00:05:18,670
For example, if you have a car here and you want to reassign something else here.

69
00:05:19,500 --> 00:05:28,160
Now I'm going to say type let's say, I don't know, Fiat and the model will be 500.

70
00:05:28,170 --> 00:05:31,980
See, I think there is a five energy and the color should be here.

71
00:05:32,130 --> 00:05:39,510
And right now if it becomes a lot of the car because remember, we really clear in the car object.

72
00:05:39,540 --> 00:05:42,330
Here is the first declaration and we are really clear now.

73
00:05:42,330 --> 00:05:48,260
We we are going to have this going to run, too, because we only change a property of the car.

74
00:05:48,810 --> 00:05:51,570
But this will amount to an error because we really clear that one.

75
00:05:51,840 --> 00:05:52,200
Right.

76
00:05:52,500 --> 00:05:58,260
So I hope you understand things and you're not going to have any problems.

77
00:05:58,260 --> 00:05:58,560
Right.

78
00:05:59,880 --> 00:06:06,510
The same goes for Neri's just going to remove this and I'm just going to make cars here and I'm going

79
00:06:06,510 --> 00:06:09,150
to get here, I don't know, Volvo

80
00:06:12,210 --> 00:06:17,410
for, I don't know, Lincoln and that's pretty much it.

81
00:06:17,760 --> 00:06:19,740
Now, these are cars, Eric, right.

82
00:06:20,090 --> 00:06:22,590
With this type of brackets, it's not the other brickies.

83
00:06:22,920 --> 00:06:27,840
Now I can change the Elliman, for example, car over the course of the position.

84
00:06:27,840 --> 00:06:28,410
Zero.

85
00:06:28,560 --> 00:06:35,320
He's holding this Volvo and I can change it to, I don't know, Toyota, if I can spell it right.

86
00:06:35,820 --> 00:06:37,860
Japanese will not get angry at me.

87
00:06:38,310 --> 00:06:39,420
These two to the Japanese.

88
00:06:39,780 --> 00:06:41,000
If it's not, let me know.

89
00:06:41,580 --> 00:06:46,480
Also, it's kind of long before I forgot.

90
00:06:47,040 --> 00:06:49,140
So I'm just going to of our cars.

91
00:06:49,920 --> 00:06:54,330
See, what's happening here is Toyota, Ford and Lincoln.

92
00:06:54,330 --> 00:06:55,530
We change the first one.

93
00:06:55,530 --> 00:07:00,150
So if I did comes alive the first one, it will hold Volvo, Ford and Lincoln.

94
00:07:00,150 --> 00:07:02,310
And after that I will change it to this.

95
00:07:02,430 --> 00:07:03,180
How cool is this?

96
00:07:03,720 --> 00:07:04,350
It's very nice.

97
00:07:04,350 --> 00:07:11,040
Also, what we can do, we can do we can also push another two.

98
00:07:11,040 --> 00:07:13,410
You know, we can add additional value here.

99
00:07:13,410 --> 00:07:14,070
We can push it.

100
00:07:14,070 --> 00:07:21,750
We remember we have done some things, cars that push me up and push things here.

101
00:07:21,750 --> 00:07:25,350
I'm going to push I don't know what's next.

102
00:07:26,490 --> 00:07:28,940
Tesla, how cool is this?

103
00:07:29,550 --> 00:07:35,070
So we push Tesla here and why it's not working.

104
00:07:36,080 --> 00:07:39,180
Oh, yeah, because it's this in this brackets and we shouldn't do it with this bracket.

105
00:07:39,190 --> 00:07:40,710
Sorry, guys, so sorry.

106
00:07:41,100 --> 00:07:42,990
So we should push it like this.

107
00:07:42,990 --> 00:07:45,330
Right now we have four length four.

108
00:07:45,660 --> 00:07:50,820
So that is pretty much the difference between constants and variables.

109
00:07:52,260 --> 00:07:57,480
Now, again, variable declarations of global in scope or function scope.

110
00:07:57,700 --> 00:08:05,340
What the other hand, land and constants, they're blocked constant are block scope so they're variables

111
00:08:05,340 --> 00:08:06,810
can be redeclared, updated.

112
00:08:07,440 --> 00:08:14,580
On the other hand, let variables we we will talk about led but constant variables must cannot be updated.

113
00:08:14,580 --> 00:08:15,440
Already cleared.

114
00:08:15,450 --> 00:08:16,170
That's the problem.

115
00:08:16,380 --> 00:08:24,060
On the other hand, let variables are something in between between variables and constants.

116
00:08:24,090 --> 00:08:27,170
So I hope you understand this is how the heart is.

117
00:08:27,190 --> 00:08:36,780
We need to do now is I need to tell you how we can do a couple of things now before we are grabbing.

118
00:08:36,780 --> 00:08:41,550
We document that query selector based on the idea and based on the class.

119
00:08:41,550 --> 00:08:45,540
But I can tell you, I can just grab based on the tags.

120
00:08:45,660 --> 00:08:50,810
So I'm just going to refresh here and this will be super important for you, but you need to be careful.

121
00:08:50,820 --> 00:08:59,010
It's a constant form and I cannot really clear this, by the way, document that query selector and

122
00:08:59,010 --> 00:09:00,210
I'm going to say form here.

123
00:09:00,450 --> 00:09:10,980
Now, if I did along the form, I will give the form this form.

124
00:09:11,130 --> 00:09:11,520
Right.

125
00:09:12,000 --> 00:09:13,830
But I do have another form for here.

126
00:09:14,700 --> 00:09:17,280
So if you inspect it, I do have another form here.

127
00:09:17,280 --> 00:09:24,060
So because we are just targeting the form, it's going to grab the first form it can find in the document.

128
00:09:24,060 --> 00:09:31,530
And that is, by the way, where is it, this one in form action here, other items.

129
00:09:31,530 --> 00:09:31,950
Right?

130
00:09:32,370 --> 00:09:35,160
That's what I want to say to to to explain.

131
00:09:35,340 --> 00:09:36,600
You can do it by this.

132
00:09:36,600 --> 00:09:41,280
Now, I'm just going to stay constant, you know, and I'm just going to grab a couple of things and

133
00:09:41,500 --> 00:09:45,030
get them ready for the next lecture.

134
00:09:45,240 --> 00:09:47,310
So query selector in here.

135
00:09:47,310 --> 00:09:50,850
I'm just going to grab the you see, I have only one URL here.

136
00:09:51,410 --> 00:10:02,240
I'm just going to copy it some creating constants, so button in input now button it input here.

137
00:10:02,240 --> 00:10:09,520
I do have one input and I'm just going to put an item here, put it the item on the input.

138
00:10:09,530 --> 00:10:12,360
If you don't have it right, just put item on the input.

139
00:10:12,650 --> 00:10:16,040
How cool is this now for the button.

140
00:10:16,070 --> 00:10:23,260
I'm just going to use this button here and I'm going to use this bit and reset.

141
00:10:23,270 --> 00:10:27,860
I'm not going to going like this because he's going to hold this button here and I don't want that button.

142
00:10:28,130 --> 00:10:32,730
So that beat and reset.

143
00:10:32,750 --> 00:10:44,180
Now, if you do cause a lot in the form, you will button in input.

144
00:10:45,290 --> 00:10:47,330
I should see some kind of result.

145
00:10:47,840 --> 00:10:48,230
Right.

146
00:10:48,380 --> 00:10:49,170
Let's refresh.

147
00:10:49,550 --> 00:10:50,540
So go to console.

148
00:10:50,750 --> 00:10:51,920
I do have the form.

149
00:10:52,070 --> 00:10:52,940
How cool is this?

150
00:10:53,450 --> 00:10:57,650
I do have this you well, which I selected, but it's empty.

151
00:10:57,770 --> 00:11:01,160
I do have this eight track which is from the four.

152
00:11:01,190 --> 00:11:01,540
Right.

153
00:11:03,200 --> 00:11:04,990
And yeah.

154
00:11:05,180 --> 00:11:07,330
Just wait input item.

155
00:11:08,150 --> 00:11:09,580
So I do have the input item.

156
00:11:11,360 --> 00:11:12,700
It's in this format by the way.

157
00:11:12,950 --> 00:11:19,250
So, so we are just here, we are done now how we can create an element.

158
00:11:19,640 --> 00:11:21,140
So I'm just going to comment.

159
00:11:21,140 --> 00:11:28,970
This is just going to come on this and so how are you gonna create an element html element.

160
00:11:29,360 --> 00:11:31,400
No, we can create any criminal element.

161
00:11:31,400 --> 00:11:34,970
For example, I'm just going to say constants heading in.

162
00:11:35,090 --> 00:11:45,880
Let's put document that create element and we need in quotes to put with that element.

163
00:11:45,980 --> 00:11:48,310
So these by the way, we to going to be heading to.

164
00:11:48,320 --> 00:11:48,630
Right.

165
00:11:49,070 --> 00:11:54,940
So just want to or heading one doesn't matter which we're going to put in one now.

166
00:11:55,280 --> 00:11:58,970
So this is how we create an element now in this element.

167
00:11:58,970 --> 00:12:08,360
If I comes along the heading, just going to say that here, I'm just going to have simple head start

168
00:12:08,360 --> 00:12:08,840
there.

169
00:12:08,840 --> 00:12:09,680
It's here.

170
00:12:09,830 --> 00:12:11,510
It's not inside.

171
00:12:11,510 --> 00:12:12,370
It's not there yet.

172
00:12:12,590 --> 00:12:12,980
No.

173
00:12:14,090 --> 00:12:17,660
We can add a heading class name.

174
00:12:17,930 --> 00:12:18,320
Right.

175
00:12:18,650 --> 00:12:25,520
So make sure that you put notes at class to Heavy Element.

176
00:12:26,540 --> 00:12:31,610
Now, the class name will be heading one.

177
00:12:33,020 --> 00:12:37,310
And now if I refresh, I'm going to have each one class heading one.

178
00:12:37,610 --> 00:12:41,090
How cool we could even pu I'm just going to copy it.

179
00:12:41,090 --> 00:12:49,790
We can even put ideas here and I need to apply and I'm just getting here.

180
00:12:52,610 --> 00:12:53,240
Very good.

181
00:12:53,240 --> 00:12:57,980
So I do have the heading, I do have that idea so we can do whatever we want.

182
00:12:58,400 --> 00:13:05,090
Now if you want to put another element inside, remember this was for example, you can put nested another

183
00:13:05,090 --> 00:13:06,080
element spane.

184
00:13:06,260 --> 00:13:07,640
So I'm just going to show it to you.

185
00:13:07,940 --> 00:13:16,010
You can also add elements inside an element in how we can do this.

186
00:13:16,160 --> 00:13:18,050
So I'm just going to create heading.

187
00:13:18,200 --> 00:13:24,720
This is not a good example, but we do not do this in real life text, not text content.

188
00:13:25,580 --> 00:13:26,930
And we already know this.

189
00:13:27,380 --> 00:13:43,670
And I'm going to say, OK, spane, here is the span inside the hearing one and I'm going to close it

190
00:13:43,910 --> 00:13:44,330
now.

191
00:13:44,540 --> 00:13:45,710
This will not work.

192
00:13:46,820 --> 00:13:51,050
Actually, it will work because we just spend it together, just going to work like this.

193
00:13:51,410 --> 00:13:54,020
And you need to click on this and you're going to see this.

194
00:13:54,290 --> 00:13:55,970
But we're not doing this like this.

195
00:13:56,120 --> 00:13:58,670
You should be like a PAETEC or whatever it is.

196
00:13:59,190 --> 00:14:03,070
You don't put spane inside this, usually inside Ahadi.

197
00:14:03,080 --> 00:14:03,380
Right.

198
00:14:03,620 --> 00:14:05,690
So I'm just gonna come and let you know how to add this one.

199
00:14:06,200 --> 00:14:08,250
And it's a bad example, but you know how to.

200
00:14:08,250 --> 00:14:08,420
Yeah.

201
00:14:08,430 --> 00:14:13,010
So if you're creating a def you can use this one right now.

202
00:14:13,940 --> 00:14:20,690
Let's it I'm just going to refresh now let's add something content here in the in the a heading so how

203
00:14:20,690 --> 00:14:21,310
we can do that.

204
00:14:21,470 --> 00:14:31,550
So many text content and we can set this, this is the new heading from Janus.

205
00:14:32,510 --> 00:14:34,910
OK, I'm just going to refresh.

206
00:14:35,120 --> 00:14:37,040
Save it first refresh.

207
00:14:37,190 --> 00:14:41,870
This is the new heading from there and that's pretty much it.

208
00:14:41,870 --> 00:14:43,400
So I just want to make it visible here.

209
00:14:43,760 --> 00:14:50,950
Now, if I go back to our code here, each HTML has its best.

210
00:14:51,020 --> 00:14:55,110
Idea, to put it somewhere in the body, for example, is a car body.

211
00:14:55,180 --> 00:14:56,090
Here it is.

212
00:14:56,450 --> 00:14:57,720
I just want to put it here.

213
00:14:57,950 --> 00:15:00,190
The heading we have to do this here.

214
00:15:00,410 --> 00:15:03,050
It is going to be somewhere there, right in the car.

215
00:15:03,530 --> 00:15:04,970
So I just want to spend it here.

216
00:15:05,090 --> 00:15:07,720
So how we can do this now?

217
00:15:07,910 --> 00:15:16,820
There is a one class called Penn Child, but first I'm going to create Constance here called CAR and

218
00:15:16,820 --> 00:15:19,790
this will be documented where we selecter.

219
00:15:20,030 --> 00:15:24,400
Just want to get this car body right.

220
00:15:25,310 --> 00:15:27,910
And this concept will hold the composite here.

221
00:15:28,130 --> 00:15:34,220
I initially I just declare a value here, initialize and declare in the same line.

222
00:15:34,220 --> 00:15:34,480
Right.

223
00:15:34,610 --> 00:15:35,930
Otherwise will give me an error.

224
00:15:36,140 --> 00:15:40,610
So caught up in having a bad child.

225
00:15:40,700 --> 00:15:42,410
This is interesting because you haven't done this.

226
00:15:42,710 --> 00:15:47,060
Now I'm just going to on the card, I'm going to end up in the heading everything that we have done

227
00:15:47,060 --> 00:15:48,360
here before.

228
00:15:50,300 --> 00:16:00,620
So now we're going to pin this will place the penny into the card body.

229
00:16:00,950 --> 00:16:03,000
Right, because we are pending the child.

230
00:16:03,260 --> 00:16:04,540
Now, look at this.

231
00:16:05,360 --> 00:16:06,500
Yeah, it's coming here.

232
00:16:08,300 --> 00:16:09,500
Yeah, it's coming here.

233
00:16:09,500 --> 00:16:14,170
Doesn't matter what it's come, but it's in the body of the house of the car.

234
00:16:14,270 --> 00:16:14,660
Right.

235
00:16:15,020 --> 00:16:19,100
So if you inspect it, it's here heading one ideating.

236
00:16:19,100 --> 00:16:21,320
This is a heading from Gere's, stuff like that.

237
00:16:21,800 --> 00:16:23,920
Whatever you want to do it, it's there.

238
00:16:24,140 --> 00:16:28,780
So now you know how to do this, right?

239
00:16:28,910 --> 00:16:30,290
How to create an element.

240
00:16:30,410 --> 00:16:38,900
You can get different type of element, how to get another inside element, another element in how to

241
00:16:38,900 --> 00:16:45,260
get a comment to that element and also how to append to some somewhere here we're going to use it to

242
00:16:45,260 --> 00:16:46,760
expand to apply here.

243
00:16:46,770 --> 00:16:53,150
And I'm going to show you how we can create that, because l I look at it here, our allies a little

244
00:16:53,150 --> 00:16:53,810
bit complex.

245
00:16:53,810 --> 00:16:55,370
We have allied with the class.

246
00:16:55,520 --> 00:16:57,400
We have span inside.

247
00:16:57,680 --> 00:17:01,700
So that will be enraged and we have another atrip document.

248
00:17:02,000 --> 00:17:04,620
And on top of that, we need to appended to this.

249
00:17:04,620 --> 00:17:05,560
You will, right.

250
00:17:05,780 --> 00:17:07,670
So we're going to pen to this child.

251
00:17:07,670 --> 00:17:11,210
So this ally is a child of the to do list.

252
00:17:11,360 --> 00:17:16,330
In this, you will lose this child of the list wrapper that how it goes.

253
00:17:16,760 --> 00:17:17,720
So thank you very much.

254
00:17:17,870 --> 00:17:20,040
I hope you understand what we had done here.

255
00:17:20,270 --> 00:17:26,210
Now, remember, you can read a little bit of the Constance if you don't.

256
00:17:26,220 --> 00:17:27,140
But their scope.

257
00:17:27,590 --> 00:17:29,320
Block, yes.

258
00:17:29,330 --> 00:17:29,690
Scope.

259
00:17:29,700 --> 00:17:31,670
But you can't use it.

260
00:17:31,670 --> 00:17:32,370
You can't redeclared.

261
00:17:32,420 --> 00:17:36,490
They're a little bit more harder to understand variables.

262
00:17:36,500 --> 00:17:37,310
You can read it clearly.

263
00:17:37,310 --> 00:17:39,650
You can put a new value, no problem.

264
00:17:39,650 --> 00:17:44,410
But you need to be careful and you need to read your warnings here.

265
00:17:44,450 --> 00:17:45,410
If something is wrong.

266
00:17:45,950 --> 00:17:46,310
Yeah.

267
00:17:46,310 --> 00:17:50,660
Then then you messed up with the with something with the declaration.

268
00:17:50,870 --> 00:17:52,400
Were you trying to look really clear.

269
00:17:52,520 --> 00:17:58,940
But you can really clear an element in an object, even though it's defined as a constant front.

270
00:17:58,950 --> 00:17:59,900
We try that.

271
00:18:00,200 --> 00:18:00,920
Thank you very much.

272
00:18:01,340 --> 00:18:07,190
And if you can't understand, just go back to the lecture right down there, comment that one and you

273
00:18:07,190 --> 00:18:08,770
can have it with you.

274
00:18:09,160 --> 00:18:09,820
Thank you very much.

275
00:18:09,830 --> 00:18:10,550
See you in the next one.