Before I even ask the questions I'm used to asking, every beginning of video, I have a great advice to give you: If by chance you came here right trough and you're watching all JavaScript classes. . .
You're watching one after another, one after the other. It's time to take a break, breathe, rest your head. do some exercises if you are not too tired.
Because the last class was heavy. And when we are learning something, we have to give our brain a rest, take a nap and do not forget. .
. of practicing exercises on your platform. Otherwise you'll be doing what we said there in the first lesson: "You're not learning to program, you're just noticing that I know how to program and you're watching I program.
" Follow my advice, trust me maybe it's time to stop, but if you think it's not time to stop yet Or you stopped for a second and is coming to this class now. Let's ask our questions early on, which I ask you to answer: First, how can I save the value typed in the prompt inside a variable? We saw that the prompt is a little screen and that we could not save was typed there.
Do you already know how to store this value? And the second question, it's about the same subject, and if I instead of a person's name, read a number, can I use this number in an account And if at this point you are thinking, "I can, just read and it serves to an account. " No, it doesn't You need to do data manipulation, that's why the previous class has this name And speaking of data manipulation, if the person types her name can you throw her name all over the capital letter, including following the accents, Using a single command?
Do you know that JavaScript can do this for you? And the best of all: If you are reading a person's salary, or for example, the price of a product do you know how to write this value in monetary format? If you receive the price of a product, you can say: "This product costs .
. . " R$, put a comma in the right place, put the point in the right place, Also using a single command?
And if for any of these four questions, which I just answered is "I do not know how to do it. " It's a sign that you did not watched the previous class. Click above the first playlist, that is always the one that will bring the JavaScript course.
Here is the sequence that we have recommended, because each class has a very large amount of information. Now, if by chance you have been able to answer all the questions without any problem, It is a sign that you're doing very well and following the lessons. So, welcome to one more of them.
Portuguese Subtitles: Rayssa Victoria English translation and subtitles: William Vernaschi Hello, little "grasshopper", welcome to one more lesson from your "video em curso". of JavaScript, fully sponsored by Google. My name is Gustavo Guanabara, I am your teacher, and now we come to class number 7 and in this seventh class we will see JavaScript operators.
In fact, the matter of operators is so big that we split into two parts This is the first one. And as I gave you the advice at the beginning, if by chance you are seeing these classes in a single shot, like marathoning netflix series Take a break, breathe, let your brain work on keeping the information that has come here. And as important as resting is practicing Do not forget to practice at your computer, you have to do things, not me.
But let's talk about the subject of this class that is operators. JavaScript has several operator families, in fact, In this course we will not even see all the families, we will focus on the following: we will talk about the arithmetic operators, the assignment operators, the relational operators, the logical operators, and the ternary operator. In fact, there are other operator families within JavaScript including, the typeoff, that we saw previously, type off.
So he's a kind of operator, but we're going to focus on in these here, that for this course is too good. Further on, you dig deeper into language. And in this class as we have a large number of operators we will focus on the first two arithmetic and assignment operators.
Already leave your computer on, watch the video on your phone or on a secondary screen, so you can do it together with me. And let's start with the first one on the list: The arithmetic operators. These operators that will appear are all arithmetic operators to the JavaScript language.
They are the operators that are used to do calculation, and if at that time you are thinking: "Ah Guanabara, here you come with the calculation, someone really told me that to program you need to be a master of math, you need to know a lot of math. " Trust me, you do not need to know a lot of math, you need to know math from day to day, a calculation of percentage, a calculation of average, add things up, take things multiply one another, that's it, basic things. watch this video until the end and you will see how easy it is to do arithmetic operations in JavaScript.
And to illustrate, each one of them I'll put the operators that are already on the screen, and the operands, which are the ones that will make the operators work. All these operators are operators that we call binaries, are operators that need 2 operands. In our case, I put 5 and 2 for everyone.
And then we will see results of the operation of each one of them and the result on the screen that would be, to be able to show the result. Let's start with the two simplest, the top two from the list 5 + 2 and 5-2 everybody knows how to do addition and subtraction 5 + 2 is 7 anywhere in the world. 5 - 2 is 3 No problem.
The third, if you are already an experienced problem, you already know, but if you are starting now in the programming world know that the vast majority of languages, in fact all that I know, the multiplication is done by an asterisk, not by the x-sign or by the dot signal, as mathematics puts it. Whenever you want to multiply one value by the other, use the asterisk. So this next one reads 5 times 2.
5 times two, 10. The division, is next, is also easy to identify, we use the slash. So, the 5/2, for JavaScript, is real division, that is, that division that takes real numbers, that takes the comma.
Then 5 divided by 2 2. 5, two and a half. And you're thinking, "Gee, but there's only this kind of division, the real division.
" No, there is also the whole division. In fact, the next operator needs you to know how to make an entire division. The entire division is pretty chill to do, it's that division where you do not use a comma when you need to put comma you stop dividing.
Basically like this, 5%2, which is the next operator it's not used to calculate percentage, as many people may think, it is the operator of the rest of a whole division. And how do you make the whole division? I'll do it here, 5 divided by 2, I'll set up the account here.
5 divided by, 2 is 2. I'll put it down here, 2 times 2 and 4 4 to get up to five, there's 1 left. If by chance I continue dividing I will have to put a comma on the side of 2 Isn't it?
We place the comma on the side of 2, 0 on the 1 side and keep dividing until you reach the rest of division 0 In our case when it is time to put the comma, we stop, and stick with the divison we have here. The 1, which is down here, is exactly the rest of the whole division. So, this 1 that's down here comes here the 5% 2 side.
So, 5% 2 is the rest of the division of 5/2, and this, always the whole division. I hope you understood, and if you did not, there is no problem, you just have to rewind back the video and watch that part again, take a piece of paper, write 5 divided by 2 try to divide the two ways, in whole form and in real form, for sure you will understand. The percent is the rest of the whole division.
And the last operator, the one that is appearing down here, it's kind of confusing, it seems multiplied twice. Not really multiplied twice this operator appeared in ECMAScript in the latest versions, if you studied javascript a long time ago this operator didn't even existed but it is very useful. He is the power.
That 5 two asterisks 2 means 5 squared, and 5 squared is 25 Take a look, if you need to, pause this video and record all these operators in your notebook the notebook I said at the beginning, if you keep everything organized and nice, you will learn to write forever, and if there is any doubt, just check the notebook. Do yourself a favor, pause the video now, copy it in your notebook before we proceed. I hope you have taken a print from the screen and I have a very important warning: Be very careful with the use of the operators, because in both programming and math there is something called operator precedence.
Want to see a simple example? Look what appeared here on the side: 5 + 3/2 Do it, take your time. 5 + 3/2 pause the video and already you're back.
I hope you have paused, and if by chance your answer is 4, I'm sorry to inform you you got it wrong, but do not worry, making that mistake at first is very common. I've seen experienced programmers and I'll teach you how it was done here. In fact, when the same expression has sum and division, we first divide.
So, 5 + 3/2, does not give 4 if you have to show it on screen, it will give 6. 5 This is because, as I have just explained, instead of the 5 + 3, if you do 5 + 3 gives 8 8/2 gives 4, only that it actually does the 3/2 first 3/2 gives 1. 5, if I do 5 + 1.
5, which is the result of 3/2, then I have the 6. 5 that is appearing on the screen Want to see how this works? Let's go directly to the computer open your Node terminal and let's do some examples I'm in my environment and I'll start my NodeJs, I'll put NodeJS here.
It will open the terminal here on the screen, you can also do the Visual Studio Code, but let's do it around here, we'll always take a back seat. Example: 5 + 2, only put 5 + 2, gave 7. Let's do it like this: 9% 2.
9% 2 is the remainder of the 9 by 2 division. This is whole division. 9/2 gives 4, 2 times 4, 8 to 9, remains 1 Did you see?
Rest of division If I make 9/2 is the real division and will give me 4. 5. There are languages that doesn't, if you learned Java you know it is a bit different but in JavaScript, 9 divided by 2 gives 4.
5 Now, let's do that 5 + 3/2 5 + 3/2, you will make 5 + 3 equals 8, divided by 2 equals 4 So you may think, "It's going to show 4," but it shows 6. 5. Why is that?
Because it did 3/2 then 1. 5 + 5, equals 6. 5 And there are people that may say "But Guanabara, my program did not show any error, the javascript did not show any error Why did my math was wrong?
" Here's what it is: when you program the language, only shows an error if you have a syntactic error Want to see? Let's try to make a syntactic error. 5 + 3, then the error, the hand slipped and I didn't type 3 5 + / 2 It gives me an error: "My regular expression got an error" 5+ / 2 is a mistake, he even highlited it.
So why did this one didn't showed me an error? Simply because it is not wrong this expression here is correct, syntactically correct, arithmetically wrong, if you wanted to calculate the average between 5 and 3, but in the code, this command has no error, this one has. So be careful when you are going to learn a programming language, whatever it is, and you do not receive errors.
Not receiving error messages does not mean that your program is right. It may mean that it contains syntactic errors, you did not write any wrong commands, but a command may be running a wrong calculation exactly as it appeared here. It's the tip for you.
And you may be asking me: "Ok Guanabara, and if I want to do 5 + 3/2, I want to do 5 + 3 first and then divide by two" In that case, my friend, you only need to insert parenthesis, just as it happens in math. If you use the parentheses you change the order of precedence, that is, you will do first 5 + 3, which gives 8 8/2, and then you'll get the number 4, but you do not have to trust me, we'll open the NodeJS and see if it works like that. Let's clear the screen, Ctrl L, he cleaned the screen, and I'll put 5 + 3/2 We've already seen it's 6.
5. Now, (5 + 3) / 2 We see 4. Did you see the difference?
The two lines are correct, but if your goal is to first make the sum and the divide, you you need, however, to use the parentheis And this brings us to a new subject which is the order of precedence of operators. In the JavaScript language the order is always this, in fact in any programming language, everything, any expression, it, in the first place, is analyzed all the parentheses, after the parentheses we will do the powers, after the powers, we have the multiplication, the division and the rest of the division. Do you realize that the three here are on the same line?
It is because they have the same order of precedence, not necessarily multiplication comes before, any of these three come before and if by chance more than one of them has the same expression, java will do them from left to right, whoever appears first. We'll give you some examples. And finally we will do the sums and subtractions.
That's one more thing for you to write down, take a moment to write down and put it red in your notebook: "Arithmetic Operator Precedence Order" It is written above, precedence. Note that, because it is very important for you to move forward, that's for sure Now let's take a look at our examples We did, 5 + 2, 5 times 2, 5 divided by 2, only that we did not keep the values anywhere, we just had the Node calculate and display on the screen. If I want to save, I'll need to use the operator we kind of have seen, which is the assignment operator.
I've just declared a few variables here on the side I put "var a" until "var f", and I told you there at the beginning, do not become an alphabet programmer that programmer that all his programs have only abcdef variables, I used it here for the sake of practicality and order, we're not doing a program. effectively, I'm just exemplifying, here it fits, but if you are going to save a name, phone, address, do not put abc, put name, phone, and address It's much easier for you to remember later. Here's what i'm doing here:, if I want the variable to receive a value, We've already seen it, we'll use an equal sign.
An equal sign in an expression does not mean equal, it means it receives So, this line that is here, the first one, I will say "The variable a receives the value of 5 + 3" 5 + 3 is equal to 8, I'm going to get this 8 and I'm going to put it inside the variable a, so it will be stored in memory, just like we saw in previous classes, when we talked about memory, about variables. that 8 will be saved in variable a, if I want to use it later, I can The variable b will receive a % 5, and "a" is 8, it can do this operation by replacing a, is 8,% 5 8 divided by 5 gives 1 5 times 1 gives 5, until 8, it remains 3, right? If you have any doubts, come back, do it slowly do it on paper, use paper and pencil, 8 divided by 5, you will see that it will give 3.
Let's go to the variable c, var c receives(=) 5 * b ** 2 5, an asterisk: times, two asterisks: power. In fact, when you have these two operators, you saw in the order of precedence that you will do the power first. Then, b squared, the b equals 3, 3 squared, equals 9.
Then, this highlighted area is worth 9, 5 times 9 gives us 45 Letter "d", look at this, 10 - a / 2. You know, remember the order of precedence, that the division is done first, so it will do first a / 2, with "a" being 8 8 divided by 2 equals 4. 10-4 gives us 6.
The variable "e", I'll do it here, 6 * 2 / d You will look in the order of precedence and will speak thus: "But the times and division have the same order of precedence. Who am I going to do first? " Who appeared first.
Who first appeared here was the 6 * 2, so I'll highlight, 6 * 2 gives 12, 12/6 will give 2. So my variable "e" is worth 2. And lastly I'll do my "f": b% e + 4 / e There are several operators here, I'll do my order of precedence.
First of all, I'll do b% e, which appeared first, and in the same order of precedence I have 4 / e. So, I'm going to do first b% e, then 4 / e. b = 3 and e = 2 3% 2 is the rest of 3 divided by 2, 3 divided by 2 gives 1 and it remains 1 Then the first rectangle is 1.
4 divided by 2, which is the value of "e", gives 2. Then the first frame is with 1 and the second frame is with 2 1 + 2, now I'm doing the addition there in the middle, it will give us 3. Did you see that the even the plus, that was in the middle of the calculation was the last to be done?
This is called an order of precedence. Write it down there, and go to your Node and type the code. That's the only way you will learn.
Let's make an example here. I'll type, the last one, var f = 3% 2 + 4/2 He'll do this first, then that, and finally the sum. During class, the value was 3.
He said it is undefined here, this is why he calculated the value of f but did not show on the screen. If you want to have f. If I want to send show of, just come here, and it's worth 3.
Do this for all the expressions you've seen previously. Another thing we can do with assignments are self-attributions, They are attributions to the variable itself, for example, I created a simple assignment up here, n = 3, then n is 3, variable n is 3. If on the next line I do, n = n + 4 means the following, I will add what is after the receive, I will add n + 4 and the result I'm going to put it inside.
n + 4, n equals 3, it's up here, 3 + 4 = 7. And I'm going to insert the result in n. Then n that was worth 3, it will stop being worth 3 and will be worth 7, exactly what appeared here in the animation.
Remember in the class of variables we said: The variable is like a car parking spot, for me to put a second car I have to take the first car, that's exactly what happened. I had 3, it was worth 3, it became worth 7. This is self-attribution I can do things like: n = n - 5, which is worth 7 now, - 5 gives 2.
The n no longer counts 7 and becomes worth 2. And I can make any kind of assignment. n = 4 * 4 I'm multiplying this 2 by 4, then it's going to turn 8.
It stops being worth 2 and it's now worth 8. Another thing I can do, n = n / 2 I'm going to divde the 8 by 2 I'm following the sequence, I'll get this 8 divide by 2, it's going to equal 4, I'm going to stop counting 8 and going to value 4 in variable n. I can also do an exponentiation, I can get this n and get it squared and it is now worth 4 4 squared equals 16.
It stops being worth 4 and it becomes 16. Lastly, I can do the rest of the division. If I take this 16 and divide by 5, will give 3, 3 times 5 gives 15, to 16, it remains 1.
Then it stops being worth 16 and becomes worth 1. All that has happened here made the variable n go from 3, assign multiple values, and end with 1. These are auto-assignments.
And I can simplify it. Do you see it up here? Simplify all these self-assignments.
The first is not self-attribution, it's simple assignment. If I take a variable, for example, n = n + 4, which is here in the first, is the second in the list. I can rewrite this in a shortened way That is n + = 4.
This + = only serves, pay attention, if the same variable receives it + 4. If it is n = x + 4, you can not use + =, but if n receives itself + 4 I can use + =, no problem at all. We are going to use a lot of this + = syntax.
And if you learn it from here, you learn in any programming language, the vast majority accepts this type of self-referral. And if by chance you understood the + = you will understand all the others. n = n - 5 can be rewritten in a shortened form for n = 5.
Just like that, I have n * = 4, on / = 2, on ** = 2, is the exponentiation and the remainder of the division would be n 5 = 5. Take a look here on the side, copy this, and as I said earlier, if you understand these simplifications you will know how to do this type of operation in C language, Java language, JavaScript, Python language, PHP. In short, the vast majority of current languages accept this type of syntax.
Let's do a practical example. I will create a num variable and this variable will receive 8 If I order it to show, it will show 8. If by chance I do num + = 2, what am I doing?
I'm getting 8 and adding 2. It already said that the num is worth 10, if I order it to show num here, it's already worth 10. The same thing happens, for example, if I take a% = 2.
If I get 10 and divide it by 2, it gives no remainder. So, the num is now 0. Do you understand?
So, you make your examples there, for example, if I do num = 3 and I do, num ** = 2 I'm going to get the num to receive the square of 3, 3 squared, equals 9. These are assignment operators. And to close this lesson I'll show you two more used operators, which are the increment operators.
Look here, I made the variable x be worth 5, then, 5 goes to the variable x. I can do simple operations, for example, x = x + 1, that is a sign that x is going to stop being worth 5 and start being worth 6, okay, we learned that. We also learned that, for example, x = x - 1, it will draw a unit.
So if it's worth 6 right now, it's going to be worth 5 and it will remove the 6, in fact, it will come back to count 5. And we just saw that we can simplify this x = x +1, as x + = 1. And we can also simplify x = x - 1, for x - = 1.
This part you understand, only in programming languages when you go forward you will see that we will do a lot x = x + 1 The variable receives the variable + 1 so there is an even greater simplifier which is the increment operator and I can simplify x + = 1, which was already simplified, for x ++, so does - = 1 I can simplify for x--. Let's go directly to our NodeJs and take the test again. Let's declare a variable n = 10.
The n is worth 10, if you have to show n, it showed 10. Now, if I do n ++ he showed 10. Only that is the following if I have him show n now he's worth 11.
n --, it appears that it is worth 11, but if I ask it show n, it is worth 10. That's because, he showed me the different value at the beginning, because ++ and - came later. In programming languages we could have ++ to come before, It would be a, pre-increment for example, I'll order to show the value of n, 10 If instead of n++, i write ++n, it already calculates the sum before if I put it - - n, he already subtracts before, but it does not mean that n ++ is wrong, it's just a matter of order, there is the pre-increment and post-increment, as well as pre-decrement and post-decrement.
In practice this does not make so much difference in programming for what we will learn but in the advanced programming the ++ and the -- appearing before or after in fact, it makes a difference but do not worry about it right now So that's it little "grasshopper", we come to the end of another class full of information for sure you have already learned to do a lot of math, a lot of calculation. I sincerely hope you are enjoying to learn JavaScript. And if you happen to be missing, that practical examples and everything, we are still well at the beginning, we are still in operators, We'll manipulate HTML and do more interactive stuff in a bit.
but do not skip this moment of initial learning, the first steps, because it will make a difference ahead I would like to ask you to do the same as always subscribe to the channel below, enable the notification bell, interact with us, give a thumbs up. Up here you can access the playlists, the videos that we sorted out for you. The first playlist is always the JavaScript course, and next to it, is always the HTML course.
That's because these courses are closely linked, it is important that you do both, but at the moment the JavaScript course is the one you decided to do, does it until the end and then you go back and do the HTML one, you will see that it will complement a lot of stuff. I say goodbye here, but we already have an appointment scheduled in the next class, where we have the second part of the studies of operators, but before studying the other missing operators do not forget, practice those operators that we did in this class on Node a lot. Best regards, good practices and until next time!
