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