We now have a youtube channel. Subscribe!

JavaScript if...else Statement


Hello guys! evening and welcome to this tutorial post on JavaScript. In my last tutorial post i talked about JavaScript operators, now in this new tutorial we are going to be looking into JavaScriot if else statement, let's get started.

While writing a program, there may be a situation when you need to adopt one out of a given set of instructions. In such cases, you need to use conditional statements that allow your program to make correct decisions and perform right actions.

JavaScript supports conditional statements which are used to perform different actions based on different conditions. In this tutorial am going to explain the if..else statement.

Note: JavaScript is not the only programming language that implements if...else statement, other programming languages like Java, C++, C# also implements the if...else statement in their programs.

Flow Chart of if..else

The following flow chart shows how the if-else statement works on JavaScript programming.


JavaScript supports the following forms of if...else statement below:

  • If statement
  • If...else statement 
  • If...else if...statement 
You can check out our tutorial post on How to create Html Forms

if statement

The if statement is the fundamental control statement that allow JavaScript to make decisions and execute statements conditionally.

Syntax

The syntax for a basic if statement is as follows:

If  (expression)   {
     Statement(s) to be executed if expression is true
}

Here a JavaScript expression is evaluated. If the resulting value is true, the given statement(s) are executed. If the expression is false, then no statement would be executed. Most at the times, you will use comparison operators while making decisions.

Example

Below is an example of how the if statement works:

<html>
     <body>
          <script  type="text/javascript">
               <!--
                    var  age = 25;

                    If  ( age > 19 )  {
                         document.write("<b>Qualifies for drinking alcohol</b>");
                    }
               //-->
          </script>
     </body>
</html>

Below is the output of the above example:

Qualifies for drinking alcohol

You can check out our tutorial post on: How to enable JavaScript

if...else statement

The if...else is another form of control statement that allow JavaScript to execute statements in a more controlled way.

Syntax

If    (expression)  {
       Statement(s) to be executed if expression is true 
}    else  {
       Statement(s) to be executed if expression is false 
}

Example

Below is a brief example of how to implement if else statement in JavaScript:

<html>
     <body>
          <script  type="text/javascript">
               <!--
                    var  age = 10;

                    If ( age > 19 )  {
                        document.write("<b>Qualifies for drinking alcohol </b>");
                    } else {
                        document.write("<b>Does not qualify for drinking alcohol </b>");
                    }
               //-->
          </script>
     </body>
</html>

Below is the output of the above example:

Does not qualify for drinking alcohol

You can also read our tutorial post on: Css Positioning 

You can try the above example for better understanding and feel free to use any value of your choice while practicing.

if... else if... statement

The if...else if... statement is an advanced form of if...else that allows JavaScript to make a correct decision out of several conditions.

Syntax

Below is the syntax of an if-else-if statement:

If    (expression 1)  {
       Statement(s) to be executed if expression 1 is true
}   else if (expression 2)  {
       Statement(s) to be executed if expression 2 is true
}   else if (expression 3)  {
       Statement(s) to be executed if expression 3 is true 
}   else { 
       Statement(s) to be executed if no expression is true 

There is nothing special about this code. It's just a series of if statements, where each if is a part of the else clause of the previous statement. Statement(s) are executed based on the true condition, if none of the conditions is true, then the else block is executed.
Example 
Try the following code to learn how to implement an if-else-if statement in JavaScript:

<html>
     <body>
          <script  type="text/javascript>
               <!--
                    var  car = "benz";
                    if ( car == "toyota" ) {
                         document.write("<b>Toyota Product</b>");
                    } else if ( car == "ford" ) {
                         document.write("<b>Ford Product</b>");
                    } else if ( car == "benz" ) {
                         document.write("<b>Benz Product</b>");
                    } else {
                         document.write("<b>Unknown Product</b>");
                    }
               //-->
          </script>
     </body>
</html>

Below is the output of the above example:

Benz Product

Alright guys we have come to the end of this tutorial on JavaScript if-else statement. In our next tutorial we will be talking about JavaScript switch case.

Follow us on our social media pages and always feel free to ask your questions in areas you don't understand, your questions will be attended to as soon as possible.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain