Hey, everyone, in the previous lesson, we just learned how to work with age stem male elements,
how to select elements from the Dom tree.
I know it's really tempting to just go crazy on it, try to change all the HCM al elements, try to
change the CSX and all that.
But trust me, we have some important things that we need to learn first.
So in this lesson, we are going to talk about variables before we get started.
You're seeing this error here.
This is because we are using the inner ASTM, Al.
From the previous example, and that element does not exist in this page.
That element existed in the page of the order lesson.
We were.
Now that this element does not exist, we are going to see this error.
So in order to remove this while we move forward in the course, it's better that we always comment
the previous code from the previous lessons.
So we don't have this kind of error in the console.
If you want to make the lesson.
Names more visible.
You can do it like this.
So now we're just going to start lesson number five.
And we are going to talk about variables.
So by doing this, let's go back there.
Refresh the page.
And now the error is gone.
All right, so let's talk about variables.
Well, first of all, computer programs.
They exist to manipulate data.
So basically they receive some input.
They process it and then they show some output.
This is what a computer program does.
But so far, we haven't seen our Web sites as computer programs because we only had static pages.
If you're coming from my age to email NCSA scores, we just had a static page with HDMI oil and CSX.
But from now on, if we want our Web sites to be dynamic and interactive, we need to think of them
as computer programs running on the Web.
So I'd just place you're a very, very simple example to show you what I'm talking about.
I'm just going to type in my name.
And I'm going to click confirm and as you can see, the Web site is greeting me.
So here we are working with data.
We just provided some piece of data.
Our name and then our program is doing something with it.
So our program is getting the name and generating this message.
And there's also some logic involved because you fight, don't type anything.
And I click confirm instead of just showing an empty space here.
I'm replacing the user name by this guest user.
So I made some logic here to make this happen.
So in order to do this, we are going to need variables.
Variables are used to store data.
So we can use it later.
So when I click confirm, I get the name and I store it in a variable.
So I can use later to form this message.
So here's an example of how do we create a variable so we use the VAR keyword, followed by the name,
which is also called the identifier, the equal sign and then the value.
We want to assign to this variable.
So after doing this, we can then access any time we want.
So let's make a test.
Let's go to Visual Studio Code.
Let's create a new variable, so var.
Let's use the same name.
User name.
Equal sign and now inside quotation marks.
This is going to be clear starting from the next lesson, we are going to talk about data types so you
will understand finally why we are using these quotation marks every time.
So I'm just gonna type my name.
All right.
Now, I've just created this variable, so this is available any time I want to use it.
So now I'm just going to do console that log.
And I'm going to show this variable in the console.
Let's see if this is working.
Let's save this.
Go back there.
Refresh the page.
Now we can see that we were able to use this variable.
So what's the use of sending this value to the console?
Well, actually, this is just a good method of testing because now we know that we were able to create
the variable.
We know that the value has been correctly assigned to it.
So we can now use it to form the greeting message and place it inside that HCM out element.
So let me copy this example here.
So instead of doing console dot log, just let me go back to the h m l just a second.
We can see that this aliment that I've placed the message.
Let me right.
Click here and go to inspect.
So here it is.
We have the input and right after we have this element with the idea of user greeting message.
So this is where I placed the message.
Let me test it out.
We can see that the message is going to this element.
So let's try to get our variable and do the same thing inside here.
So copying this, we have document get element by I.D..
This is the idea of the element we want.
So now we are just going to do hello.
And then we are going to concatenate.
So, again, don't worry too much.
Now, starting from the next lesson, you are going to learn how to concatenate and what we are doing
here.
For now, you can just copy this code.
So we are concatenating this text.
Hello.
Putting the user name and then the exclamation mark.
Let me end this statement with a semicolon.
Save it.
And now if we refresh the page, we can see that we were able to create the variable, get its value
and send this value to this element.
So this is exactly what I'm doing here.
The only difference is that I'm only doing it after pressing the button.
I'm not doing it on page load.
So I'm using an event, a click event here.
And I'm also getting the data not from a variable.
I don't have to type the name in the code.
I'm just getting what's inside this element, which is an age, simple elements like any other.
So this is a little more advanced, but it's really easy to do, we're going to learn how to do this
shortly.
So before moving ahead, there are some important things that we have to talk about.
And the first one is the rules for naming variables so variable names can contain letters, numbers
under Schaus and dollar signs.
Any other symbol is not allowed like a forward slash or a dash.
The only symbols allowed our underscores and dollar signs.
One important thing is that variable names can contain numbers, but they can't start with numbers.
White spaces are also not allowed.
So to see some examples, let's see some valid and some invalid variable names.
So here we only have ladder's.
That's OK.
Ladder's again.
Here we have the dollar sign.
No problem with it on the score.
Fine.
No, everything here is allowed.
This one is invalid because although we can use no, the variable name cannot start with a number.
So this is an invalid name.
This is also an invalid name because we have a dash and we can only use underscore, not dash.
This is also invalid because there's a whitespace here.
We can't use white spaces.
And the last one is invalid because new is a JavaScript.
Reserved words.
I'm going to show you a few more reserved words down here.
Just one important note.
If you speak a foreign language, avoid using characters that don't exist in English.
So, for instance, we have this in Portuguese and Swedish.
We have this.
This is also Portuguese.
This is Russian.
Chinese don't use those characters on variable names, although they are valid.
We should also write universal codes so that can be easily maintained by anyone who understands English.
That's a rule of thumb.
So now talking about key words, these are used for internal functions and comments.
So therefore we can't use them as variable names.
So here we have a few examples.
Since we have the VAR key word.
That we used to create a new variable, we cannot use it as a variable name.
Same thing goes for function, which we are going to use to create functions.
The IF is used for conditionals.
So these are a few examples of reserved words or keywords.
So we can't use them for variable names.
If you want a complete list, you can just click on this link.
Now, next up, I've already mentioned that JavaScript is a case sensitive language.
So always remember this.
If you create a variable like this called user name, you cannot call it like this later with a capital
U.
Because this is going to return an error.
JavaScript is not going to recognize this as a variable.
Another thing that's very important that a lot of people forget is that you should always keep your
names meaningful and self explanatory.
Good code should be easily understood not only by who wrote it, but also by other people.
So think of that when naming variables.
So here I'm showing you three examples.
Let's say we want to get the first and last name of a person.
So this is option number one.
I'm using first name and last name for the names of the.
Option number two, I'm using name one name to an option three.
I'm using A and B.
So those are all valid names.
But it should be pretty obvious that the first option is the best one.
The second one is acceptable.
It's actually name one a name too.
But it's not exactly what it is.
What it is is first name and last name.
So this is perfect.
And the third option is really confusing.
A person reading this code may not know what this is about.
So just to finish this subject, let me just talk quickly about naming convention programming.
Languages normally have naming conventions to make the code more easily readable.
So JavaScript programmers usually choose the lower cammo case style for naming variables for sure.
If you have research about JavaScript, you might have seen a lot of names written like this.
This is called lower cammo case.
So the first ladder is going to be lower case than the first letter of each word is going to start with
uppercase.
So here we have two words.
The first word is all lower case than the second word starts with the upper case.
Same thing here.
Now we have three words.
We can see the first one starting with lowercase.
Second word uppercase on the first character.
Third one.
And it goes like this.
It's also common to see this kind of pattern for variable names.
So using all the ladders in lower case and using underscores two separate words.
You should pick the style you feel most comfortable we've been.
Just keep consistent.
Don't start using cammo case and then change for this.
Just pick the one that you think it's spatter and just use it throughout your code for this course.
I'm just going to use lower cammo case, which is the one I like the most.
Another important thing is that you try to keep the names as short as possible.
So using the first name as an example, this would be a better option than first name off the user,
which is a bit too long.
All right.
So that was all for now.
We already know what variables are.
We know how to create one.
We know the rules for naming them.
We know some patterns that are commonly used by shava script programmers.
So now we are ready to start working with them.
In the next video, we're going to start learning which data types can be assigned to our variables.
I'll see you then.