What's up? As we always do at the beginning of each video of the JavaScript course, I wanted to know if you can answer four very simple questions. The first is: do you know what the percentage symbol operator in JavaScript is for?
Is it to calculate percentage? Another very important thing . .
. See this equation: 6 + 4/2 equals 5 or 8? Can you figure it out quickly and answer?
Another thing, if a variable n is worth 10 inside it and we execute n + = 5 in JavaScript, What will your new value be? can you tell me what happens to n when this command is executed? And lastly, do you know what happens when I put ++ or - - on the side of a variable?
And for each of the questions that we just asked, if you do not know the answer, do not forget, click here above, go to the first playlist that we put, let it separate, because it means you skipped a class and did not watch part 1 of that video, that starts right now Hello, little grasshopper! Welcome to one more class! This is lesson eighth of your Video Course of JavaScript one hundred percent sponsored by Google.
My name is Gustavo Guanabara, I am your teacher. And as I said at the beginning of the video, in the previous video, in lesson 7, we saw part 1 about operators Now begins class 8, where we are still going to talk about operators. But this is part 2 of the concept And I did not even have to say that if you did not watch part 1, it's very important that you watch it before you start part 2 And if you really remember, in the previous lesson we said that JavaScript has a number of operators, arithmetic, assignment, relational, logical operators and the ternary operator In the previous class, we covered the first two, the arithmetic and the attribution.
So, I will not talk about them anymore. And as you might be wondering, in this class we will see the relational operators, logical and the ternary ones. But also, in this class, I will use the operators from the previous class.
So, pay attention, watch the video and, more important than just watching, is to practice! JavaScript relational operators are the relational operators of the vast majority of programming languages. They are the operators of greater, lesser, greater or equal, lesser or equal, equal and different.
And, I have a trick to show you. There are a lot of people in the classroom, at the time I show it, that struggle to know the difference between the greater sign and the lesser sign. Which sign is greater?
Which sign is lesser? This is more common than you can imagine. And I always use a trick.
Look down here. I'm going to draw two operators. I do not know which is the greater, I do not know which one is the lesser, but both are down here.
I'll do the following: In the first one, there is the top line and the bottom line. You have the operators and here is the top line and the bottom line. Take the bottom line and divide in half And I'll do it to first one.
So I divided the first one in half. I'll do the same in the other one, I'll split it in half as well. And now that you have them divided in half, turn your head a little bit to the right and look down here.
One of them turned into number 4 and the other turned into number 7. And between 4 and 7, which one is the smallest? Which one is the biggest?
Obviously, 4 is smaller than 7. Thus, the symbol that turned into 4 is the lesser sign, the symbol that turned into 7 is the greater sign. So, whenever you have a sign, make a scratch on the bottom.
If it turn into 4, that's the lesser sign. If it turn into 7, this is the greater sign. That's the tip for you!
And what I'm going to do here on the left side of the screen is, exactly, what we did in the previous class. I'll put values, any value. I will use only integer values, but also real values, which are those values that have commas and my task now is to find out the result of all these expressions that we have just generated.
It is important to say the following: for any expression that has a relational operator connected to it, the result of that expression will always be a Boolean value, it will be a value of the true or false type. Let's look at the first one 5 if you look at that sign and make that little mark crossing the bottom line you will see that it will become a 7. Is 5 greater than 2?
Is the value 5 greater than the value 2? Yes. So if the value 5 is greater than the value 2, the result of this expression is "true," which is the true value.
The second one, 7 is lesser than 4? No. 7 is not lesser than 4.
So the result is "false", which is false. In the next one, 8 is greater than or equal to 8? Note that I say "greater or equal.
" I do not say "greater and equal". One thing can not be greater and equal to another. Either it's greater or it's the same.
8 is not greater than 8, but it is the same. So this is true The next one is: Is 9 lesser than or equal to 7? No.
9 is greater than 7. He is neither minor nor equal. So the next one is false.
Below you have the equal sign and notice the following: equality in JavaScript is not 1 equal sign. We have seen it several times, during several classes that an equal symbol in JavaScript is the same thing as many other programming languages, we read as "receive". He is an assignment operator.
He is not an equality operator. The JavaScript equality operator is this one here. Therefore, 5 is equal to 5?
Yes. Then, true. And lastly, 4 .
. . That "!
=" Means "not equal. " And one thing that is not the same, it's different So, 4 is different from 4? No.
4 is equal 4. Then it's false. And for you to train, to test your knowledge we can open Node.
Let's go directly to our computer. So, I'm already here on Windows and I'm going to open Node. js, I'll just type "Node", we've already installed it at the beginning of the course.
You can also open it through Visual Studio, but I'm inside the Node and I can do the following: 5 is greater than 2? 5 is greater than 2. Then, true 08 is less than 4?
8 is not less than 4. False. And I can do this also with variables The variable "a" gets 8 and the variable "b" gets 15.
And I'm going to test the following: "a" is greater than "b"? Being "a" equal to 8 and "b" equal to 15, "a" is smaller. See?
Is "a" smaller than "b"? Yes. Now, if I do so, for example: I can gather some expressions.
a <= b-10. b-10 is equal to 5 "a", which is 8, is lesser than or equal to "b-10"? Do you realize that when I have relational operators and operators arithmetic in the same line, in the same expression, first I do the arithmetic after I do the relational.
So, b-10 will give 5. And, 8 is lesser than or equal to 5? 8 is not lesser than or equal, is greater.
Right? Then it would give false. Is that clear?
So, start training here and play around with all these things. For example, a == b? "a" is not equal to "b".
a ! = b? True, "a" is different than "b".
And for you to practice further than that, take a look at the examples we used. I will put several examples of comparison and you will have an idea how it works by using better names for variables. The first one down here is: is the price greater than or equal to 200.
50? What I'm testing is, the price is greater than or equal to 200 reais and 50 cents, for example? Another one: is the age lesser than 18?
What he is asking is: Is the person under 18? 18 years old does not enter into this comparison. It has to be 17 or less.
The next one is, is the course the same as JavaScript? So, I can also test string variables. Is the string "curso" the same as the JavaScript string?
Is the course JavaScript? And finally, n1! = n2?
Is the first number different than the second one? We have several examples that we can put. And we also have to talk about the relational operators that we call identity operators.
Take a look here and you will understand easily. For example, here on the left side, 5 == 5? Yes.
Then, true. Now if I have 5 == '5'? It's the same sentence, it was exactly the same.
Maybe, if you're on another tab, you're going to say, "Five equals five, okay. " But, take a look here, come back to the Youtube window if you are in another screen. Is this five like the other five?
Think it over before doing. What do you think? And the answer is quite simple.
For JavaScript, yes, 5 is equal to '5'. Because the equal sign does not test the type. I have 5 integer value there at the beginning And I have value 5 in string here near me.
What JavaScript does is analyze whether this five has the same value as the other one, and are two values of different types. But, they have the same greatness. So JavaScript says yes.
So you say, "Guanabara, this is crazy, it cannot work very well. "And I even agree with you, but for this issue there is another operator, which is the identity operator also known as a constrained equality operator, which instead of two equal signs, are three equal signs. In that case, I am testing whether the two five that are on the third line are identical and the same is to be of the same value and of the same type.
In this case, they have the same value. But, they do not have the same type. So, 5 identical to 5 (that the third line will read like this) is false.
And a doubt may arise: "Guanabara, and if that appears? 5 === 5". Yes, these are identical here.
Do not believe it? Are you in doubt? Do not trust me?
I'll show you again. Open your Node and let's practice! Look, I came back on Node.
I'll do the following: first, I'll clean the screen: Ctrl + L I cleaned the screen and we will do the following: 5 == 5? Let's see! Five equals five, even though being different types.
Take a look! For example, I have a variable x, which worth 5 And I have a variable y, which worth 5. Right?
If I test "typeof x" is number and "typeof y" is string. So they are different types x == y? Yes, they are the same.
Now, x === y? False. He is not identical.
They have the same value, which is 5, but they are different types. I hope it is clear now. And the same thing happens to the different signal.
x! = y? No, it's not.
Now, if I push, x! == y (we call this unequal restricted), and it "true. " So in the unequal restricted they are different types, but the internal value is the same.
Did you understand? And with that, we come to the end of the first operators of this class, which are the relational operators. Relax, we are going to do a lot of tests and get ready because there are plenty of things we will be learning still I just need to make sure you got everything right so far.
And now, we'll see the logical operators, which in JavaScript are three: the exclamation mark, the two commercial "&" and the two pipes, which are two traits in foot. Just look at your keyboard. Generally, it is the same backslash key, and generally, it is near Shift on the right side of the keyboard.
First of all, let us talk about the exclamation mark: whenever an exclamation mark appears, and it has already appeared in this class, it means denial, it means "no". Whenever two commercial "&" appear, this is a conjunction. Or we can call them "and", it's our logical and.
And lastly, which are the two pipes, are disjunctions or our logical "or". It's very simple to understand an "and" and an "or". The "no" is the easiest one above all.
I ask you like this: "Look, I want a pen, but it cannot be blue. " You just need to give a pen of any color but blue. If I say to you: "Look, I want a blue pen and a red pen.
"I will only be satisfied if you deliver both because I want a blue and a red one. Now, if I use "or", the disjunction, is a little different: "Look, I want a blue pen or a red pen. If I turn in both, that's fine.
I wanted one or the other, I won both, If I give you blue, okay. If I give you red, okay too. If I do not hand you over none or a color you do not want, then I'm not satisfied.
Do you got it? . One thing AND other?
And what is the relation between one thing OR other? I sincerely hope so. But we'll do some testing soon.
Let's start with the negation operator, the "no. " It is treated as a unary operator, it only has an operand. After the exclamation mark or I press "true" or I press "false".
Or I put an expression that will give "true" or "false". In the first one, something that is not true, what is it? it is something false.
One thing that is not false is true. This operator is the easiest of all. Let's now go to the conjunction operator Conjunct operator are the two commercial "&".
This operator, as well as the disjunction operator, is a binary operator. I have two logical values, one on each side So, I'll have the logical result of the result of that expression. Take a look!
"true && true", that is true and true. "I want a blue pen and a red pen. " I got both, I'm satisfied.
Then, true. For any other combination . .
. If I get the red one, but I cannot get the blue one. If I get the blue one, but I cannot get the red one.
Or if I do not get any of them or another color, for all these other cases my answer is false. I got the first one, true and the other one not, false. I got the second one, only the second one is true, the first one is not false as well.
Both were false, false as well. The point is, I will be satisfied only if both are true. And finally, the disjunction that are the two pipes, are the 2 vertical bars.
It is also a binary operator, as I have just said, which has two logical values, one on each side. Depending on their position and the logical result, I also have the logical result value. And in disjunction it is enough that one of them is true for the result to be true.
For example, in the first one, Both are true, okay. True too. The first is true, but the second is false.
But, only one is true to give me the true result. The third also, the second is true, but the first is false. Even so, true as a result.
And in the latter, there is no truth. And in that case, my result is false. Let's do some practical examples in Node.
js so you can see what I'm talking about. So, I have the terminal cleaned and I will create the following: I will create a variable "a", getting 5. And a variable "b", receiving 8.
I can do the following, I can do it in a simple way. I can set true && false, false. It is a true thing for the "and" only if the two are true.
If both are true, then, it's true. For "or" is the opposite. If they are two false, will give false.
Any other combination, will give true. Try it! Play around and see it!
But, the most important is, for example, a> b && b% 2 == 0 Let's understand the following, when I have arithmetic, relational and logical operators in the same expression, look at the order that is made. First I will do all the arithmetic operators then I'll do the relational operators and then I'll make the logical operators. Write it down.
So, come on, first the arithmetic operator b% 2 (the "b" being 8), 8 divided by 2 of 4, rest 0 Good, we got a truth. And you say, "Oh, if it's true, so it's true. " Hold on!
This whole side, this all came true. Now I have an "and" here, but I have a relational, between the "and" and the relational, I'm going to do the relational first. a> b?
5 is not greater than 8. Then this side is false, if this side is false and this side is true, is the same thing that I test false and true. False and true, we have already seen that is false.
So I'm going to give Enter, false. Now I'm going to test, for example a <= b || b / 2 == 2 Look, let's analyze, first I do using arithmetic operators. Then do the "b / 2" b / 2 equals 4.
4 equals 2? No. So this one is false.
Here I have another relational, a <= b? "a" is smaller than "b". So that side is true.
Here being true and here being false, having a "or" as a comparison in the middle, it is enough that one is true for the result to be true. So here it is proved that I have a true value. Did you understand?
And if by chance in the same expression I have an "and", an "or" and a "no," the execution order is always like this, jot it down: first the "no", then the "and", then the "or". Maybe later on you need to do this. And as we have done before, a few examples are emerging right now I will put some expressions and I will read them in Portuguese fluent, in Portuguese current Take a look, the first is: age> = 15 && age <= 17?
This kind of expression, I use when I want to say this: "Is the age between 15 and 17? " Including 15 and including 17, you can see the sing is greater than or equal to and lesser than or equal to. So is the age between 15 and 17, including these two values?
The second, state == 'RJ' || state == 'SP' I want to know, do you live in Rio de Janeiro or São Paulo? Look how the expression in JavaScript is written. And lastly, salary> 1500 && sex!
= 'M' I want to know, "Look, is this a woman who earns more than 1500? " Do you understand how it works? And you're talking, "It's not a woman, it's a man.
" No, the sex is different than masculine I hope that you grasped everything above And if by chance you did not, my advice is: Practice! The only thing you need is some practice and you will learn. And once again to be clear and to leave cute in print Take a look at the order of precedence now that we have seen a greater number of operators.
See, always from top to bottom. In an expression we, in the first place, will do arithmetic operators, parentheses, asterisks, exponentiation, division, multiplication, modulus in that order you have already noted. After you do all the arithmetic operators, you go to the relational operators.
Relational operators have no order of precedence, who first appears will be done first reading from left to right And finally, we are going to make the logical operators, which do have an order of precedence, which is how I just said, first the "no," then the "and," and finally the "or" Dude, take a print screen, coupled with the print from the previous class, where we talked about the order of precedence of arithmetic, because when you have a complete expression, you do not get confused when it comes to solving. This is very important to you, trust me! And to finish this class, there are people talking about the operator, who is the ternary operator.
In fact, the ternary operator is composed of two symbols that appear in the same expression, the question mark (? ) and the colon (:). I'm going to take this screen away and bring another one then we can see, because the command ends up getting too big.
So, as I said, the ternary operator is the interrogation and the colon within the same expression. Take a look, it's ternary because it has three parts. Take a look at the blocks below.
These three blocks are the test blocks, the true block and the false block. That is why this operator is called ternary, because it joins three operands. The first one down here is a logical test.
It is a result that gives true or false, a test like any other we've done here during this entire lesson. What is in the middle is what will happen when this logic test is true and here at the end, what will happen when this logical test is false Let me give you a practical example. Take a look: average <= 7.
0? "approved" : "disapproved" What happens? If I type this, it will appear either approved or disapproved It depends on the logical test here.
Let's open Node. js and let's do a test. So I'm going to create a average variable.
I will do exactly that example. I'm going to average five and a half. Let's check, average > 7?
"APPROVED DISAPPROVED" This is how it will work, if the average is 5. 5, it is not greater than 7. Then the logical test result is false.
Then it will show DISAPROVED. I'll give Enter and we'll see. Disapproved.
If I change the average, I'll average + 3 If I average + = 3, it jumped to 8. 5. Right?
We saw this here in the assignment operators, in the previous video. If you did not see it, press it up here, in my head. You have the first playlist, which is the complete course.
Go straight to class 7, do not miss it. So, now if you average here, it's 8. 5.
If I put the same command, in Node. js it uses right up and down to repeat the commands. So I pushed up arrow a few times until I got in charge average > 7?
Now it is bigger than 7. So it shows me "OK". And I can do it here .
. . I'll do a cleaning and I'll put it like this: var x = 8.
And I can do the following: var res = x% 2 == 0? 5: 9 What does this line mean? It may seem a bit confusing.
It's simple, my variable res will receive or five or nine. It depends on what? If ox% 2 == 0.
And what am I going to do first? I make arithmetic operators first. The ternary operator is always the last to be done.
Then,% 2 is 8 divided by 2, which is equal to 4 and subtracts 0 0, which is what I just scored, is equal to 0? Yes it's true. If it's true, I'm going to perform this part here.
So 5 that will be assigned to res I press Enter, it shows me"undefined". But, I want to know how much x is. x equals 8.
And I want to know how much "res" is. "res" will be equal to 5. Right?
Why res equals 5? Because it will get five or nine. It depends on whether this is true or false.
Did you understand? Let's go for another example My r variable will get . .
. First, I'll do the following, my variable age will get 19. The person is 19 years old.
And I'm going to make my variable r be the following age <= 18? "BIGGER" : "SMALLER" What happens here? my r variable will get either higher or lower.
This will depend on whether my age is greater than or equal to 18. Did you understand? My age is 19.
Is it greater than or equal to 18? Truth. Then he will get bigger word and will play inside the variable r.
Let's hit Enter, he gave "undefined". I'll put the "r" and it will show "BIGGER". And that was exactly what I just did.
Practice this as many times as you can, at home, by yourself. Surely you will understand. But, you cannot tell you did not understand without any practice, because sooner or later you will see that you did not learn, you only found out which I explained right away.
It will only come into your head when you practice. So that's it, my dears. I say goodbye here and in the next class we will go back there to the browser and we will learn how we create the site and this site integrates with JavaScript.
In the next class, we'll talk about DOM. The acronym DOM. You will understand what it is and will start to make your JavaScript integrations with HTML and CSS.
In addition, I will guide you to the installation of some simple programs, extras in your Visual Studio Code and in your Google Chrome and we are going to take the first steps in DOM within the JavaScript language. But, never forget, practice all the knowledge that you saw during this lesson and all previous classes because everything is getting you to know a little more JavaScript. Take care yourself, good practice and see you next time!
