Post
Ask Question

Conditional Statements in JavaScript

Conditional Statements

 
These Statements are used when a User wants to check many conditions.
 
We have 3 types of Conditional Statements:
 
1. If Else If
2. Switch Case
3. Ternary Operator
 
If else Statement is used when we want the compiler to check each and every condition and execute the answer accordingly.
 
Syntax:
 
if (condition)
{
     statements;
}
else if (condition)
{
     statements;
}
else
{
     statements;
}
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function conditionalConstruct() {  
  6.             var UserInput = Number(document.getElementById("txtUserInput").value);  
  7.             if (UserInput == 1) {  
  8.                 alert("You have Entered " + UserInput);  
  9.             }  
  10.             else if (UserInput == 2) {  
  11.                 alert("You have Entered " + UserInput);  
  12.             }  
  13.             else if (UserInput == 3) {  
  14.                 alert("You have Entered " + UserInput);  
  15.             }  
  16.             else {  
  17.                 alert("Unknown Value");  
  18.             }  
  19.         }  
  20.     </script>  
  21. </head>  
  22. <body>  
  23.     <form id="form1">  
  24.         <div>  
  25.             <h3 style="text-align: center">Using Conditional Statements</h3>  
  26.             <table style="border: 1px solid blue; font-family: Verdana">  
  27.                 <tr>  
  28.                     <td>Enter a number between 1 and 3:  
  29.                     </td>  
  30.                     <td>  
  31.                         <input id="txtUserInput" type="text" /></td>  
  32.                     <td>  
  33.                         <input id="btnSubmit" type="button" value="Submit"  onclick="conditionalConstruct();"/></td>  
  34.                 </tr>  
  35.             </table>  
  36.         </div>  
  37.     </form>  
  38. </body>  
  39. </html>  
Switch Case statement is used when we don't want the compiler to check each and every condition, rather we want it to directly jump to the condition which meets the requirement.
 
Syntax:
 
switch (condition)
{
case value_to_be_checked:
      statements;
      break;
case value_to_be_checked:
      statements;
      break;
default: statements;
     break;
}
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function conditionalConstruct() {  
  6.             var UserInput = Number(document.getElementById("txtUserInput").value);  
  7.             switch (UserInput)  
  8.             {  
  9.                 case 1: alert("You have Entered " + UserInput);  
  10.                     break;  
  11.                 case 2: alert("You have Entered " + UserInput);  
  12.                     break;  
  13.                 case 3: alert("You have Entered " + UserInput);  
  14.                     break;  
  15.                 default: alert("Unknown Value");  
  16.                     break;  
  17.             }  
  18.         }  
  19.     </script>  
  20.    </head>  
  21. <body>  
  22.     <form id="form1">  
  23.         <div>  
  24.             <h3 style="text-align: center">Using Conditional Statements</h3>  
  25.             <table style="border: 1px solid blue; font-family: Verdana">  
  26.                 <tr>  
  27.                     <td>Enter a number between 1 and 3:  
  28.                     </td>  
  29.                     <td>  
  30.                         <input id="txtUserInput" type="text" /></td>  
  31.                     <td>  
  32.                         <input id="btnSubmit" type="button" value="Submit"  onclick="conditionalConstruct();"/></td>  
  33.                 </tr>  
  34.             </table>  
  35.         </div>  
  36.     </form>  
  37. </body>  
  38. </html>  
Break statement is used when we want the statement to be terminated when the condition is met. If we do not use break after each case statement, then the compiler will execute the next case statement also and this process continues till it finds the break statement or the end of the scope.
 
Ternary Operator - It is an alternative to the if-else statement.
 
Syntax:
 
Condition ? statement(if true) : statement(if false)
 
Syntax for multiple conditions:
 
Condition ? statement : condition ? statement : condition ? statement : statement
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function ternaryOperator() {  
  6.             var UserInput = document.getElementById("txtUserInput").value;  
  7.             UserInput == 1 ? alert("You have Entered " + UserInput)  
  8.           : UserInput == 2 ? alert("You have Entered " + UserInput)  
  9.           : UserInput == 3 ? alert("You have Entered " + UserInput)  
  10.           : alert("Unknown Value");  
  11.         }  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <form id="form1">  
  16.         <div>  
  17.             <h3 style="text-align: center">Using Conditional Statements</h3>  
  18.             <table style="border: 1px solid blue; font-family: Verdana">  
  19.                 <tr>  
  20.                     <td>Enter a number between 1 and 3:  
  21.                     </td>  
  22.                     <td>  
  23.                         <input id="txtUserInput" type="text" /></td>  
  24.                     <td>  
  25.                         <input id="btnSubmit" type="button" value="Submit"  onclick="conditionalConstruct();"/></td>  
  26.                 </tr>  
  27.             </table>  
  28.         </div>  
  29.     </form>  
  30. </body>  
  31. </html>