Welcome back, ladies and gentlemen, today.
What are we going to do is we're going to continue working here, but before working here, I just want
to introduce a new concept, how we can create HTML tags and put a sign in here in the card.
I mean, in this body.
So we can learn that one before, because according to the ECMAScript 2015, we use so far variables.
But there are also constants in Lepp.
I'm going to talk about maybe later, but I'm just going to say the constants.
You should know that constants behave like aulet variables, but they cannot be reassigned.
So for example, I'm going to say constants constant pi and that will be three point one four one five,
for example.
I'm just saying no, because a lot
and you will see the difference between constants and variables.
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
try to, for example, to really clear it, the variable here on top, for example, like we have done
with the variables like three point one four six to rounded up, now we find an error assignment in
constant variable.
So that is what is happening.
So I'm just going to give you another example.
So declaring a variable with constants, it is very important because it's a block scope.
So I'm just going to give you an example.
For example, here, I'm just going to create a variable X in that very well.
X will hold number 10.
Right.
I'm just going to remove this pie here.
Let's put it here, pie.
No, I'm just going to remove this one X and I'm going to I'm going to log this X here.
Now, imagine that there is a block here, some block of code in here.
I define a constants in input X to be five.
Now, what do you think that when I print now, what will you think will happen?
So it will print out ten because this has a global scope and it will go here.
But if I want to print out this one comes a lot, these constants.
I need to print it here and it will go five, then ten.
You understand this is coming from the constants.
This is coming from the other one.
Now, also, we cannot so I'm just giving you example.
We cannot, for example, constants tie again and we cannot leave it like this.
We cannot put JavaScript constants variable date without value.
So we need to assign a value.
So because a lot pi and if I refresh now again, we're going to have a problem.
So it's missing initialize are in constant declaration.
This is how we get do so the keyword constants is a little bit misleading and it does not define a constant
value.
Right now we also have we can talk about primitive values.
Now, as I told you, you can't, for example, if you define it, if you define here, this will be
OK.
Three point fourteen.
Right.
And now if you want to assign a different value to PI here and give it to by plus 10, that should be
thirteen point fourteen right now.
If I see that, that should give me an error.
Oncotype error, assigning the constant variable.
So if we assign a primitive value to council, we cannot change that.
Primitivo.
This is called primitive value.
This is what we can do now.
When we talk about objects here, you can change the properties of a constant object.
Right now I'm just going to create a constant object.
Constant car is that the object, remember, is a curly braces.
I'm going to say type here.
I don't know for and model.
I don't know what model will be 500 t just made up that model color and I just color blue.
Right now the thing is that we can change the property of the Konstanz car, the color for example.
I'm going to change it to red.
Now if I did cancel lot of car, I expect to see something.
To change a color to red before let's do it like this, so we have four model blue that we have for
model, so when we're dealing with the objects, we can change the properties of that object.
But you cannot reassign a constant object.
For example, if you have a car here and you want to reassign something else here.
Now I'm going to say type let's say, I don't know, Fiat and the model will be 500.
See, I think there is a five energy and the color should be here.
And right now if it becomes a lot of the car because remember, we really clear in the car object.
Here is the first declaration and we are really clear now.
We we are going to have this going to run, too, because we only change a property of the car.
But this will amount to an error because we really clear that one.
Right.
So I hope you understand things and you're not going to have any problems.
Right.
The same goes for Neri's just going to remove this and I'm just going to make cars here and I'm going
to get here, I don't know, Volvo
for, I don't know, Lincoln and that's pretty much it.
Now, these are cars, Eric, right.
With this type of brackets, it's not the other brickies.
Now I can change the Elliman, for example, car over the course of the position.
Zero.
He's holding this Volvo and I can change it to, I don't know, Toyota, if I can spell it right.
Japanese will not get angry at me.
These two to the Japanese.
If it's not, let me know.
Also, it's kind of long before I forgot.
So I'm just going to of our cars.
See, what's happening here is Toyota, Ford and Lincoln.
We change the first one.
So if I did comes alive the first one, it will hold Volvo, Ford and Lincoln.
And after that I will change it to this.
How cool is this?
It's very nice.
Also, what we can do, we can do we can also push another two.
You know, we can add additional value here.
We can push it.
We remember we have done some things, cars that push me up and push things here.
I'm going to push I don't know what's next.
Tesla, how cool is this?
So we push Tesla here and why it's not working.
Oh, yeah, because it's this in this brackets and we shouldn't do it with this bracket.
Sorry, guys, so sorry.
So we should push it like this.
Right now we have four length four.
So that is pretty much the difference between constants and variables.
Now, again, variable declarations of global in scope or function scope.
What the other hand, land and constants, they're blocked constant are block scope so they're variables
can be redeclared, updated.
On the other hand, let variables we we will talk about led but constant variables must cannot be updated.
Already cleared.
That's the problem.
On the other hand, let variables are something in between between variables and constants.
So I hope you understand this is how the heart is.
We need to do now is I need to tell you how we can do a couple of things now before we are grabbing.
We document that query selector based on the idea and based on the class.
But I can tell you, I can just grab based on the tags.
So I'm just going to refresh here and this will be super important for you, but you need to be careful.
It's a constant form and I cannot really clear this, by the way, document that query selector and
I'm going to say form here.
Now, if I did along the form, I will give the form this form.
Right.
But I do have another form for here.
So if you inspect it, I do have another form here.
So because we are just targeting the form, it's going to grab the first form it can find in the document.
And that is, by the way, where is it, this one in form action here, other items.
Right?
That's what I want to say to to to explain.
You can do it by this.
Now, I'm just going to stay constant, you know, and I'm just going to grab a couple of things and
get them ready for the next lecture.
So query selector in here.
I'm just going to grab the you see, I have only one URL here.
I'm just going to copy it some creating constants, so button in input now button it input here.
I do have one input and I'm just going to put an item here, put it the item on the input.
If you don't have it right, just put item on the input.
How cool is this now for the button.
I'm just going to use this button here and I'm going to use this bit and reset.
I'm not going to going like this because he's going to hold this button here and I don't want that button.
So that beat and reset.
Now, if you do cause a lot in the form, you will button in input.
I should see some kind of result.
Right.
Let's refresh.
So go to console.
I do have the form.
How cool is this?
I do have this you well, which I selected, but it's empty.
I do have this eight track which is from the four.
Right.
And yeah.
Just wait input item.
So I do have the input item.
It's in this format by the way.
So, so we are just here, we are done now how we can create an element.
So I'm just going to comment.
This is just going to come on this and so how are you gonna create an element html element.
No, we can create any criminal element.
For example, I'm just going to say constants heading in.
Let's put document that create element and we need in quotes to put with that element.
So these by the way, we to going to be heading to.
Right.
So just want to or heading one doesn't matter which we're going to put in one now.
So this is how we create an element now in this element.
If I comes along the heading, just going to say that here, I'm just going to have simple head start
there.
It's here.
It's not inside.
It's not there yet.
No.
We can add a heading class name.
Right.
So make sure that you put notes at class to Heavy Element.
Now, the class name will be heading one.
And now if I refresh, I'm going to have each one class heading one.
How cool we could even pu I'm just going to copy it.
We can even put ideas here and I need to apply and I'm just getting here.
Very good.
So I do have the heading, I do have that idea so we can do whatever we want.
Now if you want to put another element inside, remember this was for example, you can put nested another
element spane.
So I'm just going to show it to you.
You can also add elements inside an element in how we can do this.
So I'm just going to create heading.
This is not a good example, but we do not do this in real life text, not text content.
And we already know this.
And I'm going to say, OK, spane, here is the span inside the hearing one and I'm going to close it
now.
This will not work.
Actually, it will work because we just spend it together, just going to work like this.
And you need to click on this and you're going to see this.
But we're not doing this like this.
You should be like a PAETEC or whatever it is.
You don't put spane inside this, usually inside Ahadi.
Right.
So I'm just gonna come and let you know how to add this one.
And it's a bad example, but you know how to.
Yeah.
So if you're creating a def you can use this one right now.
Let's it I'm just going to refresh now let's add something content here in the in the a heading so how
we can do that.
So many text content and we can set this, this is the new heading from Janus.
OK, I'm just going to refresh.
Save it first refresh.
This is the new heading from there and that's pretty much it.
So I just want to make it visible here.
Now, if I go back to our code here, each HTML has its best.
Idea, to put it somewhere in the body, for example, is a car body.
Here it is.
I just want to put it here.
The heading we have to do this here.
It is going to be somewhere there, right in the car.
So I just want to spend it here.
So how we can do this now?
There is a one class called Penn Child, but first I'm going to create Constance here called CAR and
this will be documented where we selecter.
Just want to get this car body right.
And this concept will hold the composite here.
I initially I just declare a value here, initialize and declare in the same line.
Right.
Otherwise will give me an error.
So caught up in having a bad child.
This is interesting because you haven't done this.
Now I'm just going to on the card, I'm going to end up in the heading everything that we have done
here before.
So now we're going to pin this will place the penny into the card body.
Right, because we are pending the child.
Now, look at this.
Yeah, it's coming here.
Doesn't matter what it's come, but it's in the body of the house of the car.
Right.
So if you inspect it, it's here heading one ideating.
This is a heading from Gere's, stuff like that.
Whatever you want to do it, it's there.
So now you know how to do this, right?
How to create an element.
You can get different type of element, how to get another inside element, another element in how to
get a comment to that element and also how to append to some somewhere here we're going to use it to
expand to apply here.
And I'm going to show you how we can create that, because l I look at it here, our allies a little
bit complex.
We have allied with the class.
We have span inside.
So that will be enraged and we have another atrip document.
And on top of that, we need to appended to this.
You will, right.
So we're going to pen to this child.
So this ally is a child of the to do list.
In this, you will lose this child of the list wrapper that how it goes.
So thank you very much.
I hope you understand what we had done here.
Now, remember, you can read a little bit of the Constance if you don't.
But their scope.
Block, yes.
Scope.
But you can't use it.
You can't redeclared.
They're a little bit more harder to understand variables.
You can read it clearly.
You can put a new value, no problem.
But you need to be careful and you need to read your warnings here.
If something is wrong.
Yeah.
Then then you messed up with the with something with the declaration.
Were you trying to look really clear.
But you can really clear an element in an object, even though it's defined as a constant front.
We try that.
Thank you very much.
And if you can't understand, just go back to the lecture right down there, comment that one and you
can have it with you.
Thank you very much.
See you in the next one.