JavaScript

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 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>  
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs