Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   




JAVASCRIPT - IF-ELSE


If...Else is somewhat similar to Decision Making.


Everyone has to make some kind of Decision in everyday life. Be it choosing a shirt or going to office by Bus or Cab.


Even in case of JavaScript, it has to make Decision.


And to make a Decision, If...Else is used by JavaScript.


There are three Decision Making statements used by JavaScript :

  1. if

  2. else

  3. else if

Let us see them in detail.


The if statement for Decision Making


Let us understand if statement with the below example:


Say, you have a friend, who cannot remember anything. Now, you ask him to JavaScript to the market and get 1 kg Apple. You also tell him, if the price of Apple is less than 150 bucks, only then he should buy the Apple.


And since your friend has a weak memory. He takes out his notebook and writes :

"If the price of Apple is less than 150 then buy the apples"

Now, if your friend has to write the same thing in JavaScript. How would he write it?


Let us see with the below example.


Example :



<html>
<body>  
<script language = "javascript" type = "text/javascript">
	
	var price = 120
	
    if (price < 150) {
		document.write("Buy the apples")
    }

</script>      

</body>
</html> 


Output :



  Buy the apples

So, your friend writes the same thing in JavaScript for the same statement, "If the price of Apple is less than 150 then buy the apples".


if (price < 150) {
	document.write("Buy the apples")
}

Quite Simple! Right?


It works in two steps :

  1. He goes to the market and asks the shopkeeper, "What is the price of Apples?".

    Say the shopkeeper says, "The price is 120".

    He notes the same in a price variable.

    var price = 120

    ruby

  2. Then he checks the if statement.

    if (price < 150) {
    	document.write("Buy the apples")
    }


    And finds that he can buy the apples as price is 120 which is less than 150.

Now, that we have seen the if statement. Let us look at the syntax of if statement in detail.


if (price < 150) {
	document.write("Buy the apples")
}

The above if statement begins with a if, followed by the actual condition (i.e. price < 150) enclosed by brackets ().


if (price < 150)

And the lines to be executed inside the blocks of if statement should be inside braces {}.


if (price < 150) {
	document.write("Buy the apples")
}

Now, if the above condition (i.e. price < 150) is true. The document.write(...) statement is executed.


document.write("Buy the apples")

There can be lot of statements inside the if statements. What I meant is, there can be a lot of document.write statements. And they must be inside braces {}.


if (price < 150) {
	document.write("Buy the apples")
	document.write("The apples should be of good quality")
	document.write("Take the apples in a carry bag")
}

So, in the above example we have seen your friend is happy because the price of apple is less than 150.


But what if the price of apple is more than 150. Say, the price of apple is 180. And he doesn't know what to do.


Example :



<html>
<body>  
<script language = "javascript" type = "text/javascript">  
	
	var price = 180
	
    if (price < 150) {
		document.write("Buy the apples")
    }

</script>      

</body>
</html> 


Output :




And there is no output. Because the price of apple is 180 which is more than 150.

java_Collections

So, your friend comes back to you and you tell him to use else statement with if.


The else statement for Decision Making


So, you tell your friend,

"If the price of Apple is less than 150 then buy the apples else do not buy the apples"

So, he writes the same thing in JavaScript using else statement.


Example :



<html>
<body>  
<script language = "javascript" type = "text/javascript">  
	
	var price = 180
	
    if (price < 150) {
		document.write("Buy the apples")
    } 
    else {
    	document.write("Do not buy apples")
    }

</script>      

</body>
</html>


Output :



  Do not buy apples

So, to implement the line,

"If the price of Apple is less than 150 then buy the apples else do not buy the apples".

We have used the else statement along with if.


if (price < 150) {
	document.write("Buy the apples")
}
else {
	document.write("Do not buy apples")
}

The syntax of else statement is almost same as if. Else statement uses the else keyword and its block begins with { and ends with }.


else

And its block begins with { and ends with }.


else {
	document.write("Do not buy apples")
}

Now, your friend is happy. But you figured out that the shopkeeper is selling two types of apples for a fixed price.


1st kind of apple is 100 Bucks


2nd kind of apple is 200 Bucks.


And you give the new instruction to your friend.


The else if statement for Decision Making


So, this time you tell your friend,

"If the price of Apple is 100 then is first kind of apple. Buy them else check if the price of apple is 200. Then it's second kind of apple. Buy them. It neither one is present then don't buy any apple".

And he writes the same in JavaScript.


Example :



<html>
<body>  
<script language = "javascript" type = "text/javascript">
	
	var price = 200
	if (price == 100) {
		document.write("Buy 1st kind of apple")
    }
	else if (price == 200) {
		document.write("Buy 2nd kind of apple")
    }
	else {
		document.write("Do not buy apples")
    }    

</script>      

</body>
</html>


Output :



  Buy 2nd kind of apple

So, in the else part, if we need to provide a condition (i.e. price == 200).

java_Collections

We need to use else if.


else if (price == 200) {
	document.write("Buy 2nd kind of apple")
}

And the syntax of else if is just like if and else statement.


Program to find the greatest of two numbers


Say, you need to write a program to find the greatest of two numbers. And the input needs to be taken from the user.


Example :



<html>
<body>  
<script language = "javascript" type = "text/javascript">
	
	var firstNum = prompt("Enter the first number : ")
	var secondNum = prompt("Enter the second number : ")
	
    if (firstNum > secondNum) {
		document.write("The first number is greater than the second number.")
    }
	else if (firstNum < secondNum) {
		document.write("The second number is greater than the first number")
    }    
	else {
		document.write("The first number and the second number are equal")
    }    

</script>      
</body>
</html>



So, the output will be based on the numbers entered by the user.

  1. In the first line, we have taken the input from the user using the prompt(...) method.

    firstNum = prompt("Enter the first number : ")


    Let us say the user had entered 5. So, firstNum contains 5.
    ruby

  2. Then in the second line, we follow the same process to take the input from the user for the second number.

    secondNum = prompt("Enter the second number : ")


    Say, the user entered 8. And, secondNum contains 8.
    ruby

  3. In the third line we check, if the firstNum is greater than the secondNum.

    if (firstNum > secondNum) {
    	document.write("The first number is greater than the second number.")
    }


    In this case the firstNum is 5, which is less than the secondNum 8.

    So, we come to the else if part.

  4. In the else if we check, if the firstNum is less than the secondNum.

    else if (firstNum < secondNum) {
    	document.write("The second number is greater than the first number")
    }


    And the else if condition (i.e. firstNum < secondNum) matches as the firstNum is 5, which is less than the secondNum 8.

    So, the document.write statement inside the else if block is executed. And

    The second number is greater than the first number


    Is printed on the screen.

Just note that if both the conditions of if and else if is not satisfied, then we come to the else part.


else {
	document.write("The first number and the second number are equal")
}

Which means both the values are equal.