JavaScript if/else Statement

JAVA SCRIPT BASICS

Java script if/else Statement

(00:00)

Hello guys, welcome to our series Java script. We covered operators in a series of segment, we have covered almost all the operators used in Java script from like arithmetic, comparison, bitwise, logical, special etc., operators can be difficult to understand and we need to perform it at deep level while doing practical, hence I request you to perform all the practical which we did in our segment.

If you have any doubt or queries in our segment or even while performing practical do tell us on forums.learnvern.com we will revert back with solutions to your questions and queries as soon as possible. Our today’s topic is based on if statement in Java script. In our past segment we have used if in many operation, but why we use if statement? What is the use of if statement? What is the reason of use of if statement? And in which syntax if statement is used? We will cover answers to all these questions in this segment.

Let’s start our today’s if segment, basically if is known as conditional statement, what is the need for conditional statements? For example, if we have a line of code and we want to it execute only when the condition is fulfilled. Sometimes this happens, when we go to school we have seen only those students scoring above passing marks are considered to be pass.

For example, if we consider 35 or 40 as passing marks, so those students who have scored more than 35 marks are considered to be pass, if you have scored less than 35 then you have failed. So here marks equal to 35 is our condition, if one is scoring above 35 then is considered pass and if one is scoring less than 35 then he is considered fail.

So these conditions are used in Java script also, if we have to work on condition based programming that time we use conditional statements, C, python etc in all programming languages conditional statements are use, but in Java script conditional statements which are used are if statement, extended version of if i.e. if else statement, and an extra extended version i.e. if else if statement.

Now we will check all these one by one, first is if statement, what is if statement? we have to check condition, if condition is true and execute so and so piece of block, if it is false, then there is no statement for false, for that there is no piece of block.

Here a flowchart is given, this indicates start and this indicates end, if our if program starts executing then as soon as it starts a condition appears, if condition is true then here a piece of code is written in blue color, execute this, but when to do that? Only if the condition is true, if the condition is not true, then the arrow which is shown here which is joining here, if condition is true then execute so and so piece of code, and if not then come outside, if condition is not fulfilled then come outside.

So here ultimately we are reaching at end of flowchart, so if it is true then after executing true portion go to end and if it is false then without executing the true part go to end, so ultimately we are going to reach the end. But a condition appears in the middle, if condition is true then execute so and so piece of code and if not then skip it, means leave it and move further. Here its syntax is given i.e. if, then after if inside the bracket expression is given, which is similar to the condition in flowchart.

 If this portion is true then the portion which we have commented,’ content to be evaluated’ will be executed. If the condition is not fulfilled then this portion will not execute, and at the curly braces were our if portion closes, our interpreter will stop at the closing point. So if condition is true, execution is not taking place then from here you can continue the rest of execution. So this was our if statement.

(04:55)

Moving further, we will see an example, it is a simple example between true and false, let’s open sublime text, we will set html at sublime text, html, example of if statement, ( 5 seconds gap) save it as if, that’s it. In if we want some conditional outputs, for that first we will open script , now in Java script we will write, let’s say if condition is true then we have to show something, first I will take document.write, h3 slash h3 in that we will write, example of if statement, save and reload.

Here we can see example of if statement, now we will define a variable above this, let’s say variable a equal to true, we are taking this as default true. Here we will take if condition, and you can see here true has appeared, which is default means as soon as I pressed control plus space after if our structure appeared from here to here.

We don’t want true here, here we will keep a, our braces open and close our curly braces, so inside this we will write the piece of code which we want to execute, let’s say document.write learnvern is awesome, okay so here I have a as default true so a here will always be true only, as a equals to true. So as soon as this will be proved true this statement will get printed. Once it is proved true, our executor will enter this piece of code, document.write learnvern is awesome, so save and execute, here we are getting, learnvern is awesome.

Now let’s say I change this a based on some condition, let’s say a equal to equal to 10. If value of a is 10 then, save and reload, we are still getting output. Means value of a is 10, so you can see here we are performing check, we are placing a condition. Earlier value was true so took default a, if we don’t want a then here we can write a equal to equal to true if the condition is true then execute our portion. So here we can see the execution of if portion is dependent on this condition, whatever condition we write.

Let’s say I write here a is less than 20, then what will happen? Reload and it is getting printed. If I re,ove this and write a is greater than 20, save and reload, so you can see our output has not been generated, means our condition is wrong, it is not getting fulfilled that’s why our executor will not come here it will directly go there, and it will print, document.write br, (3 seconds gap), end of code. So you can see due to condition not getting fulfilled the line has shifted down and end of code is getting printed as default.

So as default we have printed our if statement and end of code, we can see that br is also there but learnvern is awesome is not getting printed, because the condition is wrong. Let’s say I write only a and I am not writing true or false, I am writing only a, so save and reload, we can still see learnvern is awesome, because currently in our a we have not given true or false, we have given a as 10, still our a is getting executed, because there is some value in a, so having a value proves our condition true.

If I don’t keep anything in a, save and reload and now you can see the line has disappeared. Means what is a? right now a is null, console, you can see there is no error in console also, means whatever we have written is technically correct. So we took a variable ‘a’ we did not assign it any value as there is no value it is declared undefined.

(10:02)

So a is undefined and that’s why this portion is not getting executed. So here a equal to null after writing null let’s save and see and you can see we are still not able to see our code. Means when we wrote null, as soon as we write null our condition is turning false, means either we keep a equal to nothing i.e. undefined or we enter null as value of a, this makes our condition false.

But apart from that if I assign Boolean value to a i.e. true or false, if I am assigning it a number value still my condition will be true. Means if apart from null and undefined whatever value we assign to a our condition will be true in every case. So let’s say if I write here a equal to true, so this is my Boolean value, save and reload, so it is getting executed.

Next, if I change true to false, save and reload, then it will not be executed, means my condition is false. So this was our if statement which works on basis of condition. Next in our slide after if, is if…else statement. What is if else statement? We saw in our current program that if the condition is true then only so and so condition will be executed. But if our condition is false then what to do?

So, here we didn’t have any piece of code for false condition, if condition is true then so and so block, but if condition is wrong the what? In case of if we come out. Here in case of if..else, we can see this through flowchart, after starting if condition is true, if answer is yes, we get a piece of code to execute, if our condition is false or no then we have another piece of code to execute.

So here from both sides i.e. yes and no we are getting two piece of code, so one is true and another is false. So after execution of these two you will come at same common point and the execution ends or rest of the program continues. So it’s like condition true then execute the statement and then outside the program, if condition false then execute the code and come out of the if block.

So in if…else what facility do we have? Two options are available to us, if condition is true then what and if condition is false then what? Here we can consider our student example, if student scores 35 plus then pass and if student scores less than 35 then fail, so here condition is arks greater than 35. If I write here yes then mark it as pass and if no then mark it as fail.

In case of only if we cannot consider this example, if marks are above 35 then pass, that’s it we can consider that much only or if less than 35 then fail, we cannot execute both at same time in if. So here our if…else statement works in this way, like if (expression)//evaluate for true; else // evaluate for false. If our condition is wrong then without executing the if portion it will directly execute the else part. So this was our if…else statement, now we will see its program.

We will copy this same program here, from that the if portion we will remove, example of if …else statement, if…else. Okay, here also if…else will come (7 seconds gap) okay, so here comes example of if....else statement, this is if statement, this is if…else statement. So here what will we write, in document.write we have given our header if…else, okay so here a will be true and here I will take if condition, or we can do one thing we can take marks, so variable marks equal to 50 and here will come our if marks greater than or equal to 35, means what is our condition? If marks are equal to 35 or more than 35 then student is passed and if marks are less than 35 then student has failed.

(15:10)

If marks , document.write student is passed and here only after if we will write else and after space document.write student has not cleared the examination, we will save this. Now how much marks have we taken? 50, that’s why when I reload in browser, what am I getting? Student is pass or we can write student has cleared the examination, okay now let’s say I change the marks to 34, so student has not cleared the examination.

So here what happens? We have take marks named variable, to which we have assigned a value and we are checking the value of marks as greater or equal to. Means we are applying condition, and if the condition is true this piece of block executes and if condition is false then we are executing another piece of code, we are getting this output on basis of marks. This was our if…else statement, where if condition is true then one line of code and else if condition is wrong then another piece of code is getting executed. So this is our if…else statement.

Let’s go back to slide, if…else…if statement, means let’s say we have many conditions and at every condition we want different output. For example, let’s we take example of week, if it is day 1 then It should be Sunday, if it is day 2 then it should be Monday, if it is day 3 then Tuesday we will go till seventh day which will be Saturday. So in total we have seven conditions, like 1 2 3 4 5 6 7, and we have to check all the seven conditions and then decide which should be our day.

Means when we have more than 1 condition available, then we have if…else...if condition, where we can check and on its basis we can execute a piece of code or line of code. So let’s see an example, for that I will copy everything from here but I will remove this portion, okay. And then if…else…if, save if…else..if and here also we will write if…else…if. Okay, so this is our if...else...if portion.

Here what we are doing? This is if…else portion and this is our if…else….if portion. So here we will take the same example and execute our program with more than one conditions are present. For example, according to day, so let’s say I take variable day equal to 2, now I have condition that based on the number I have to identify the day.

So here I will write first condition day if equal to equal to 1, then what is my case document.write today is Monday, okay then comes if it is not first day then 2^nd day so else after else we will write if immediately, if and our condition i.e. day equal to equal to 2 and after that we will open the curly braces and here we will print the same document.write line, so here condition is if it is day 2, so here it will be today is Tuesday.

(19: 45)

So here you can see the portion from if to else is exactly same we kept in if else, but from here onwards what we are doing? We are repeating if statement exactly same as we have done before, so if this condition and this statement, after else this condition and our statement, so this else to if portion we will copy paste here, we will only change 3 and here it will be Wednesday.

Again we will paste the portion after else, so 4 and here Thursday, (5 seconds gap), Friday and last will be Saturday, but here is a twist, if we see logically then we have 1 to 7 days so if it is 1^st day then Monday and if it is 2^nd day then Tuesday, Friday, Saturday here 6 will come, now at 7^th day , we have Monday to Saturday, so if day equals to 1, 2, 3, 4, 5, 6 so we days available but if we have restriction that input we have to add from 1 to 7 only then our last statement becomes default statement. If nothing is executed from line 1 to 6 then definitely last line will be executed.

If the day is not from Monday to Saturday then it will be which day? It will be definitely Sunday. So in that case for last sentence we will write only else we don’t need to write if. So it’s like, else which is last portion, else document.write today is Sunday. But there is a possibility if I add something from 1 to 6 then it will be Monday or something in between Monday to Saturday. But if I add anything let’s say 0 then it will be Sunday, now if I add 52 then what it is? Still it will be Sunday. My output will be generated only from 1 to 6 else is default condition.

So here what is feasible? Put this condition here and we will write here 7 so we have taken from 1 to 7 and in last else we will write document.write please enter a valid input only, or valid input between 1 to 7. So here through default statement we are giving warning to user when you give input then it should be between 1 to 7 only not apart from that.

So if save it and reload, then what are we getting? Today is Tuesday, because we have taken day equal to 2, if I take day equal to 5 then save and reload and my output changes to Friday. Similarly if I write 61, reload, please enter a valid input between 1 to 7, so here we have conditions also and warning statement also regarding what we have to add.

We have to add input between 1 to 7 we cannot add any input outside that, so this was our if…else…if statement, if I again change this to 1, then output is today is Monday. So this is our if…else..if statement in which we are adding another condition by adding else again another condition by adding else and we are ending it at if. If I don’t write last else and keep it till here only then also my program will work but writing this becomes necessary so that we can pass a default statement.

Our multiple conditions which we passed , if none of them is getting fulfilled then definitely our default condition will anyhow fulfilled, in that case we pass this condition. So this was our if…else…if statement.

So guys in today’s segment we saw conditionals statements, if statement, if…else statement, if…else…if statement. We saw all these three. If you have any questions or queries in our today’s lecture, plus if you practice all the practical and you have any questions while practicing you can tell us on forums.learnvern.com we will revert back with solutions.

Our next segment is based on witch statement in Java script.

Thank you.

(video duration 25 minutes 4 seconds)