JavaScript_04 - Conditional Statements

          JavaScript conditional statements are the statements which either evaluates to true or false.

Conditional statements are used to design the flow of execution of the program if the statement is true, false otherwise.

These statements are the decision making statements of the program. For example you might want to decide which books do you want to buy based on the amount of money you have.
Another example may include when you see the traffic signal light on the road and decide if the signal is green then drive,  else if the signal is red then stop.

The basic conditional statement in javascript is 'if' conditions.
syntax of if condition is as follow:

if(condition){
     statement;
}

Here if the 'condition' evaluates to true then the statement executes, otherwise the browser goes to the next line.

Example:

JS_04.html

<html>
<head>
<title>codeMystery</title>
<center><h1>Conditional Statements</h1></center>
<script src="myjs.js" type="text/javascript"></script>
</head>

<body>
</body>

</html>


myjs.js

var balance = prompt("Enter the balance you have");
var costB1 = 300;

if(balance > costB1){
  document.write("You can buy book 1");
}


The above script will output 'You can buy book 1' if the condition becomes true i.e. if the balance amount is greater than cost of B1

Now consider that i want to display the user that he doesn't have enough balance to buy the book;
This can be done with an else statement:

syntax of if ... else condition is as follow:

if(condition){
     statement;
}else{
     statement;
}



myjs.js

var balance = prompt("Enter the balance you have");
var costB1 = 300;
if(balance > costB1){
  document.write("You can buy book 1");
}else {
  document.write("You don't have enough balance to buy any book");
}


This will output the last statement if the user enters balance amount less than cost of B1.

Now, suppose i want to enter another book and its cost, and display the appropriate message according to the balance you enter, whether you can buy first book or the second book;
This can be made possible with an else..if  statement.

syntax of if ... else if..else condition is as follow:

if(condition){
     statement;
}else if(condition){
     statement;
}else{
     statement;
}


myjs.js





var balance = prompt("Enter the balance you have");
var costB1 = 300;

var costB2 = 800;
if(balance > costB1){
  document.write("You can buy book 1");
}else if(balance > costB2){
  document.write("You can buy book 2");
}else {
  document.write("You don't have enough balance to buy any book");
}


Likewise you can append any number of else if statements.
Thus, conditional statements are the number of questions which can be asked and executed accordingly.


The switch statement

Rather than having multiple if..else if statements to evaluate the same condition which creates complexity in the code, we can have an alternative solution i.e. switch  statement

The switch statement evaluates an expression and the matches the corresponding case statements, if the constant in case matches, the corresponding statements gets executed.

The basic syntax for if else is as follows:

switch (expression) {
   case constant1: 
       statement(s)
       break;
   
   case constant2
       statement(s)
       break;
   ...
   
   case constantn
       statement(s)
       break;
   
   default: statement(s)
}

The break statements differences from executing different case statements.

Example:


JS_04_01.html

 <html>
<head>
<title>codeMystery</title>
<center><h1>Conditional Statements</h1></center>
<script src="switchjs.js" type="text/javascript"></script>
</head>

<body>
</body>

</html>

switchjs.js

var grade = prompt("Enter your grade");

switch (grade) {
  case 'A': document.write("Excellent<br />");
  break;

  case 'B': document.write("Good<br />");
  break;

  case 'C': document.write("Passed<br />");
  break;

  case 'D': document.write("Not so good<br />");
  break;

  case 'F': document.write("Failed<br />");
  break;

  default:  document.write("Unknown grade<br />");
  }
 

This was all for the conditional statements in JavaScript.

Comments

Popular Posts