We arrived here the 12th lesson of your JavaScript course and to not lose the custom we go to our questions because without them you can not continue. First and foremost do you know how to use the Node Exec extension inside the Visual Studio Code? Because I taught this in the previous video Click here over my head and go to the first playlist you find.
It's the complete JavaScript course. Watch Lesson 11. Actually watch all classes.
In second place and also a lot important, do you know how to create a condition in JavaScript? If you are already a programmer or programmer a little more experienced, if it's an if it's simple to create. You know the are there any JavaScript relational operators?
For example, equality, restricted equality? It is also very important to know all this. And finally this is very simple, you know how to differentiate simple conditions and compound conditions when looking inside your code?
And as always, if you happen to have answered some of these questions "There I do not know how to do" is a sign that you have not seen previous class. Now if you have been able to answer everything right, welcome to the next video. Hi, little grasshopper, welcome to 12th lesson of your JavaScript Video Course.
Fully sponsored by Google. My name is Gustavo Guanabara. and I am your teacher.
And now we will continue, as I just mentioned at the beginning of the video to the studies of the conditions. We have arrived here at class 12 and this is part 2 which deals with conditions in JavaScript. It is very important that you have seen and practiced the exercises of the previous video.
Very important practice, I'll never get tired of saying it. I do this with my students in the classroom, I fill the bag their. And it would not be different here on YouTube, because you are also my student, you are also my student.
So practice! Taking a quick step, we have two types of condition, it's like I said at the beginning. The simple condition and the compound condition.
Simple conditions are ifs, I have ifs without the else clause. I have a condition and if it is satisfied will execute a block. Now if I need double blocks, if a certain condition is true and does something and if not, it does another thing, I have the compound conditions exactly as represented here below.
We saw all this well detailed in the previous video. Do not watch part 2 of this class, which is class 12, without attending part 1, which is class 11. Only there everything is not flowers.
We saw in the previous video, at the end of the video, that not everything is doing one thing or doing something else. There are situations where there are several possibilities! Either you do this, or you do that, there are several ways you can treat given data.
And there the simple condition and the compound condition that are represented here on the side, do not serve much. Only if you go smart, you can put one thing together. I will put a condition here composed on the side, as we saw in the previous class, it only gives us two options: either yes or no.
But there is a possibility of creating what I wrote here: conditions aligned. What would that be? Pretty simple, I'm going to get a compound condition and I'm going to put other conditions inside it.
For example, in my condition that I just represented, give a look here. Remembering what we saw in the previous video, in that condition, if it is true, that block is being represented on the side, otherwise, I do not do another block. I put another condition and this greatly expands my possibilities.
This condition will have two possibilities. I can execute a block and make another condition in, and go aligning, comes from nest, one inside the other. In my case here, I will not be putting one inside the other, I will only put two levels.
But remembering it can do several levels. Here, if it's true I'll do one and if it's a lie I'll do another one. So now I have three possibilities, it is only you to look at the amount of blocks that have here on the side.
So when I have a condition aligned, I have exactly what is here on the side, one condition within the other. In fact what you are seeing there, is pulling the condition from above, it is pulling on both sides. I could pull sideways and create two conditions, one inside each.
There is no alignment rule. But it's very common for you to do it this way. So common that JavaScript has a structure, a good command special that is else if.
We'll see how it works. But we will stop here, to represent this structure that is here on the side. Where do we have a if within the other.
Take a look, keep this graphic in your mind from here and let's make your relationship written in JavaScript. So I have here, my condition main, my condition 1, I have an if here, I will do the indentation line. Remember, there are many people who speak wrong is not indentation, it is indentation that comes from the indent that is retreat in English.
So I write one thing inside another, I write something aligned with the other, just as it is appearing here on the side. If by chance condition 1 is true, it does a block 1. Now if not, that is the bottom, it will not do block 2, which would be a condition composed.
He will make another condition. And will do another if. So I'll put it there, if condition 2 is satisfied, I do block 2.
It is important that you realize the following: to execute block 2 condition 1 has to be false because if it is true already executes block 1, combined? It is a question of logical reasoning. If condition 1 is false and condition 2 is true it does block 2.
Now if condition 1 is false and condition 2 is false, it does block 3. And nothing prevents me from placing another condition in place of block 3. I would be raising one level in my alignment.
But as we are beginning to study here, we will not add many levels. But yes, they are possible within the schedule. But these are only the first steps within JavaScript.
Let's not push things too hard in this basic course. So clearly here on the side, I have one condition within the other. I just poked around the condition exactly as he had done there in the previous chart.
And as I've said several times, to this structure we call the condition aligned. Nest-shaped, one thing inside the other. Like those Russian dolls, which is a doll inside a doll, that's exactly how it works.
And not to be alone in theory, we will open our Visual Studio Code and we will execute some code in JavaScript. So I'm already inside my windows, I'm going to open Visual Studio Code. So here we go, create a new folder that will be my 12th class and inside class 12, I'll create a new file.
What will be the exercise "011. js". We're just going to make JavaScript right now.
Exactly as we did in class last. We are going to use our Node Exec extension and it is already installed in Extensions. If you have not seen, watch the previous video that we saw how to use this extension.
I'll hide it here and then I'll do the following: let's think as follows, we will declare here an age variable. And I'm going to put the age one person, 22 years. And then I can do the following, for example, if age was below 18, I'll write on the screen, here in the case of JavaScript, we will use the "console.
log". We can not use "documents. write" because we are not inside the browser, we will use NODDS.
Then it would be "console. log". You have to understand the difference between using NODDS and using within the browser.
So for each one it has a different functionality. Actually I can even use this here inside normal HTML too, except that it will fall there on the console and have to give a browser console. But anyway, come on.
If it is the age got below 18, I'll put here minor. I did not even need to use crase, I can use single quotation marks ('') because I do not have any interpolation, but whatever. If not, of age.
In case here would be a compound condition, right? Very basic. Let's run, I'll press f8 here.
If you are pressing f8 and it is not working on your computer It's a sign that you did not install the extension correctly then Go back to school so you can make it all cute. So, okay, because I'm 22, if it's 12 (I'll run again, I click on f8) is underage, quiet. Only then I I imagine the following, I want instead of saying that he is of age or minor, I will put it like this: do not vote and vote.
I'll run again, there: do not vote. At age 12, you really do not vote. But at age 16, a person votes and that program is wrong.
And here comes a subject that I always like to play. You see here: I did not receive any mistake and there inside the room of class has a lot of students come to me and says: "Ô Guanabara, my program did not make a mistake. " not giving screen error does not mean that your program is right.
My program totally written correctly, had no error. But my logic is wrong. A person in Brazil at the age of 16 can vote.
So be careful with this business of be right or wrong. My code has no syntactic error but it has logic error because at 16 today in Brazil is the optional vote. So let's do the following, how does the voting system work in Brazil?
Who's under 16 really does not vote, beauty? Otherwise, I have the option of optional voting and mandatory voting. I'll put it here: if the age was greater than or equal to 16 and (we saw this in logical operators and relational operators, you have only one lesson) if the age is greater than or equal to 16 and the age is less than 18, then I have a block here which will be console.
log ('optional vote'), let's test here: [f8]. Ali: At age 16, voting is optional. Let's put it here now: 12 years, do not vote.
It's working. But if I'm 22, my program did not show anything. And then I'll say it again.
It means that my program . . .
"Ah, but my program did not make a mistake" he did not make a mistake syntactic, he gave logic error. Because below 16 "ok", above 16 and under 18 "ok" too, but is greater than 18? I took this possibility of my program.
And another important thing, if the age is not less than 16, obviously it is greater than or equal to 16. So this is kind of unnecessary. So I can take this part here and my program it would work without any problem.
Do your tests in your house, do not believe me do not. Enter and see if it is working properly. It's just a line of reasoning.
This is already implicit, if the age is not less than 16, obviously it is greater or equal, so I did not need to test this. My code is inflating, I'm writing things unnecessarily. But if you feel at the beginning but comfortable writing this, no problem at all.
Another thing to simplify, inside JavaScript, as else and if are very common, I can do this here: I can get this if and play here. It's the else if, use the else if normal. And I I save the writing of a block.
I can delete a block. Then I will always use it like this: if the age is less than 16, do not vote. If not, if the age is less than 18 knowing that you are less than 18 and greater than 16, so voting is optional.
If not, if the age is greater than or equal to 18, then my console. log will be ('required vote'). And then we'll think again.
If the age is not less than 18, it obviously is greater than or equal to 18. So I do not even need this if here, I can just do it else. So under 16 do not vote.
Between 16 and 18 the vote is optional and over 18 is already implied here, Voting is mandatory. I will perform here, voting is mandatory. What happened here was that I selected this Node Exec.
And if I select here and give f8 it will run only that is selected. So if you do not select it it runs its entire command. So at age 22 voting is mandatory.
But there's another little problem there. In Brazil, who is over 65 years old, for example, 67, the vote is again optional. And in my case he said that voting is mandatory.
And again it does not mean that you have not received the error that your logic is right. That's because in Brazil who is over 16 and is less than 18 or age above 65, the vote is optional. See how it works?
I will perform at age 67, voting is optional. I'll even put it here: console. log, "You have [age] years.
" then it will show there whether the vote is optional or mandatory. Ali: "You're 67, "So I'm going to put 12 years here. " You're 12, do not vote.
"I'll put it here. 22. Performing: "You are 22 years old, voting is mandatory.
" Do your tests in your home, this is not the only option here. There is no programming in there is only one option to be able to do things. So study this part here and learn how to use it.
these structures conditional aligned. And if you happen to have difficulty, it's a sign that you have not practiced this much the simple and compound conditional structures. So see if you agree with me, if you did not study the basics, did not practice the basics, you will experience difficulty when you advance a little bit more.
And remember one thing: giving up is not in your plans. You need to learn JavaScript. You want to learn JavaScript.
So it's not the first difficulty you're going to give up. It's just you train. Training you can.
If it is necessary watch this lesson more than once. Train more than once. He does exercises more than once.
There is a lot of material here in the Video Course we have several exercises, we have (here you can access, there exists in our playlists a course of python language where also teaches from here), so this structure that we just saw is the basic programming structure. Then there are several programming languages. Several tests.
The Python course here in the video course is a good option for you to learn how to program the basic structure and is very simple and also. But do not get one thing with the other not. Learn first the logic of programming, the structure of programming logic that we are training here using JavaScript and then you go away for more things advanced.
A gal that tries to run away, learn a lot of things and ends up stumbling along the way. But once again the advice: do not give up, persist. Want to see a business?
Let's take another example here, do exercise 12. I'll save this one from here (by giving ctrl + s). I'll create Exercise 12 in here.
Lesson 12 and Exercise 12. So it's a new exercise, it's "x012. js".
In Exercise 12, I want to say good morning; good afternoon; good night. For me to give good morning, good afternoon and good night, I'll have to create variable "hour". Know what time it is.
At first I'm going to set a fixed time, right? I do not know, I'm going to say, "It's 8:00 AM. " In the case here, in practice it's not eight o'clock in the morning, but then we'll see how it gets at the actual time.
Let's write in screen: "Now it's exactly [placeholder] (hour) hours. ", right? Let's run to see.
Now it's exactly 8, right? Because I put 8 here. Fine, I'll check it out then.
whether it's day, afternoon or night. There are three possibilities. I'll put it if the time is less than 12 o'clock: I'm going to say good morning, then console.
log ('good morning'). If not, I can not say good afternoon, good evening. I have to put it: if not, if it is already greater than or equal to 12 (as we have seen previously).
If it is 12 hours to 18 hours (if the time is less than or equal to 18, which is 6 pm) console. log ('good afternoon'). If not, it's the third option: I'm going to give console.
log ('good night'). If you want you can even create . .
. I'll put it in here good night. If you want as I was talking, you can create a good dawn, I do not know, it's past midnight, it's already dawn.
Try to do. You will create an else if, you can create as many else if you want within the same structure. Take the test in your house.
I will execute, [f8], "Now it's exactly 8 am, good morning. " If it was 13 a. m.
(one o'clock). [f8] again, "It's now exactly 1 pm, good afternoon. " If it was 9:00 PM, he's going to say good night.
[f8] Look, "Good evening. " Has a small problem that for example, 1h if you want to consider dawn, right? You'd have to put it in "Good morning.
" being exactly 1h It would be a good day, would not it? Because it is below 12. It would be good day then 1 is below 12.
You could put here "A good I'm going to teach you a really cool deal. "How do you get the current time of the system? Let's take a look here.
I'll look at my watch if you look is 13:01. Exactly 13:01 that I'm recording this class. How do I get this time out of my system?
How do I get this 13? I can not put 13 here, because each clock has an hour at the time of execution. How do I get the current time?
To do this you have to create another variable called here now. Now it's a "new Date ()" is always Date. You're going to say, "Oh no, but I want to pick up the time.
Would not it be" hour "? " No, it's always Date. So now receives "new Date ()".
The current time (and it will not be 13) will be the "now. getHours ()". To catch up on hours.
You can pick up the year, the day, minute, month and second. That's the tip. So, I'll put here getHours.
So now it will show by the time the system is running. [f8]. Ali: It's exactly 13 hours now, see?
It's 1pm here. "Good afternoon", beauty? So here's the tip for you to get too Pick up the current system time that is running your script.
If your script is running on the client, it is client time. If you are using NODDS to run on the server, it is server time. Stay connected.
And besides the aligned conditional structure, there is another very important is the condition multiple that serves for fixed values. It is very useful in the programming world, especially when I want to work with values fixed, just like I said. It does not serve much for a range of values as we exemplified there: the good day; good afternoon; good night.
This multiple condition (this one I represented), it has the possibility not only of "yes" and "no", it has the possibility of other values, of fixed values. So for example, if it is a certain value makes one block, if it is another value makes another. So I can represent this kind of structure here thus.
So I have one condition, actually one expression. And from this expression I test several values and then I go back to the normal flow of my program. This kind of conditional structure here is my condition multiple.
It is not applicable for all types of situation. The if with else if thing we just saw is applicable to all sorts of situations, but this one is very useful in situations. To represent this structure here, I recommend that you write in your notebook the drawing of each one of them; put your notebook organized, when you write you learn a lot; so boot this drawing, if you did not copy the previous one returns and places the if with else if also drawn in your notebook; ride to structure; puts the annotated code, because later when you paint the doubt is just you consult the notebook.
It looks like the classroom, right? You're thinking about it. But it does not make much difference you study through youtube and study in the classroom.
With the difference that can study at any time you want It may be until you're watching this video of dawn and there is nothing wrong with that. Unless you are very tired or very tired, then take a break to rest. So this structure that is here on the side .
. . I keep going back here I do not quite understand what I'm talking about.
We represent it in the following way: we have a command inside JavaScript, which is the switch command. So I'm going to switch, note that it's not a condition, it's an expression and this switch has a block related. Remembering, we saw in previous classes a block is all the open-and-close of keys within the JavaScript language.
Every language has its rules. The key ({}) is very common but has language that is not key. For example, Python that I have quoted a few times here.
But how this class is JavaScript and is not from Python, we will see in JavaScript. So I'll put the switch that is here on the side and I will put the values inside it. So I have several possibilities of value.
For every 1 I'll put a case. That is, if this expression is the 1st value does that block there, if it is 2nd value does the second, if it is the 3rd does another. It has a clause here below which is the default, which is like the else of the switch.
If none of the values above are satisfied, He'll do it from down here. And for each case I have a notepad. So basically the structure is this way.
I'm going to put a case for each value and finally, optionally, I can set a default that is the default. So if none of the above are satisfied. We will do this in practice to be able to understand.
Only I have important information to give you before you go on. Within the switch structure, this came from the C language. There is a little detail that needs to be followed.
Inside each block you see here on the side, I I need to put a break command. So for each one I have a break. At last is optional but we will always put.
This break is required. Write it down in your notebook, do not bother. There are a lot of people who miss the use of switch because Forget break.
Exactly each of these breaks here are required. And how does the business work? He's going to test that expression that's up here.
Then he will do a test of expression. Let's suppose that this expression results in the value 2 that is here. So it will divert automatically, follow the yellow arrow.
Will divert to command 2, will execute the commands that you had in that (it can actually be can be multiple commands) and in the end it will hit the break. When it hits the break, look at what will happen to the stream: it will be diverted down there. If by chance this break does not exist, it will give a problem because it will continue executing all the commands until finding a break.
So do not forget, write it down. Write down! Please.
I need this break. Then you will not say I did not warn you. Without these breaks we will have problems.
But once again I tell you: you do not have to trust me. You need practice. So let's go back there to our Visual Studio Code.
So I'm here in class 12. I'll create another file. I'll create a file here and I'll call it "ex013.
js". I'll put it back on the Node. Since we've learned how to work with dates, I'll do the following: Now it's going to be a "new Date ()".
Do not forget that this D is uppercase, write it down. I'm going to do the following: I'm going to create a variable day of the week, I called it day. I can do it from here.
Remembering which I have capitalized, I have chosen that this was a capital letter. The day of the week I use "now. getDay ()".
GetDay is the day of the week. I will post a comment of several lines here so you can understand. JavaScript, the days of the week are exactly these here: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday and Saturday.
In our calendar The first day is Sunday, it's not Monday. For JavaScript this getDay will pick up exactly this day of the week. If I have to write on the screen, (outside the comment) I will send a console.
log, I'll have the day of the week shown here. Then you'll say, "Oh, he's going to show you Sunday, Monday, Tuesday, Wednesday . .
. "Here for me, if you look down here it's a Friday. If you can not read, put it in full screen.
If you still can not read it, you believe me that today is a Friday that I'm recording here. So, day of the week here it is Friday. I will run (press the f8) and it will not show me Friday.
He showed: 5. Then I'll say: "Puts, 5? Friday is 6.
". No it's not, just look here for JavaScript Sunday is zero; second is one; Tuesday is 2; fourth is 3; fifth is 4; sixth is 5. Exactly like I just showed.
And Saturday is 6. Take the test in your home, with sure you can be doing it the other weekday. If you're doing it on Friday we agreed, right?
But anyway, it showed 5 here on the screen, the 5 of here means Friday. Only he showing 5 is not easy to understand, right? So I would have to do a structure that I could do like this: if the day of the week is equal (remember that equals ==) to 0 he writes on Sunday.
If not, if the day of the week is 1: Monday. If not . .
. only I write a lot. The switch in this case would make my life a lot easier.
I'll do it like this: "switch (diaSem)" is an expression. Day of the week. If my day of the week: "switch (diaSem) ( If it's zero, it's Sunday.
So I'll put it here to write Sunday. Do not forget to put the break. Case 1 which is my Monday, I'll put here: Monday and break.
Case 2: Tuesday. And I will do the same thing for every day. I'll close the terminal here for you to see the whole code.
According to my day of the week, if it is zero it is Sunday (break to play out). If not: second, break and leave. If it is 2 is Tuesday and so on until Saturday.
If you want you can put it like this: "default:" (our case here is not as mandatory but if it is not from 0 to 6) I'll put here "console. log ('Day invalid')". I'll even put "Error" here in front, you can write "Invalid day error.
" and I'll put the break. Remember that this last break is optional because there are no commands below. But come on, this here is case of some problem.
We are trying to deal with mistakes later. In this case here: the day of the week was 5. It's the day I'm setting today.
I will run and it put there: 5, Friday. So that's exactly what we had planned. I can even take this line here, that it will show Friday, right?
If I happen to come here and put the day of the week Forced to 0 it will lose the previous value and the day of the week is now 0. The day of the week was Sunday. If I put 6, the day of the week is Saturday.
There: "Saturday". If I throw 7, errei does not have day of week 7. There: "Error day invalid.
". Saw how makes our life easier? I'm going to take it out here because I want the system's full day of the week.
If you write in the form of if, you will write much more. So my program is working cute today, it's friday And look, I'll show you if you happen to forget the break. I'll forget the break, I'll force it.
delete all break. I took all the breaks, I made a mistake here. Basically what is happening is the day of the week for me here is 5, we've seen it.
It will divert here from five. Will write Friday, as he has no break he will write Friday, Saturday and error. Want to see?
I will execute, there: Friday, Saturday and error. Did you understand how it works? So the break is mega pushbutton inside the switch.
Do not forget that. I'm coming back with all of them. It is very important that it exists.
And an important observation: there is no way for me to say this: "Ah, if one day of the week is between 0 and 8. "In this case if you need to test intervals it is much more valuable to use if. The switch is a very important for you to test punctual data, punctual values.
0, 1, 2, 3. Not breaks, it only works with integers and with characters (with strings). They are in quotes.
So the switch is a more limited structure than the if but it is very useful in point situations. They help you a lot. And once again I beg you to: practice!
If you do not practicing you will not be able to learn the programming. And then there's no use saying that programming is difficult, you did not practice enough. It goes without saying that riding a bicycle is difficult if you have never ridden a bicycle.
Programming is very much like this. And since I talk so much that practice is very important, I've booked the next video, video 13 so we can do several exercises. It is kind of a point of establishing our knowledge that we have made so far.
So I'll book exactly Class 13 for this. And if right now you're thinking "Oh, so if it's just exercise I'm going to jump 13 and I'm going to start at 14. "you started very wrong thinking like that.
Remember that practice is very important. So set aside a specific time to train what is happening in class 12, actually practice everything class 11, class 12, everything cute and in class 13 boot in practice. Do the exercises I'm going to propose to you.
And that's just how you'll learn right from programmed. I say goodbye here already letting you know the next class is exercise and she is very, very much importantly, we are going to make these structures and all the commands that we have done previously. I will try to do several exercises for this and using the browser.
We will create examples of small functionalities within sites using the JavaScript language. I say goodbye here and as always, do not forget to sign up for the channel, enable the bell to receive notifications. Upstairs there are playlists that I deem important.
Always the first playlist is JavaScript, the second playlist is the HTML and whenever you have any other playlist or a specific video that we judge important that you watch, always access the top part here of interactivity because it is very important for you. Do the exercises in this class. watch class 13, if necessary give a break to take a rest, a nap.
So you can get back strong and strong there in JavaScript studies. A big hug, good practices and until next time.
