Javascript Else If : using conditionals statements with your JavaScripts

JavaScript Else IFJavascript is an object oriented programming language, very commonly used in web design to communicate asynchronously with the Browser.

JavaScript Else If is a type of conditional statement that is used to compare different decisions. Conditional statements let you perform different actions based on varying conditions. JavaScript supports two types of conditional statements namely if..else..if and switch. In this tutorial, we will discuss the Else..if statement.

Before we start writing an actual program, let us get an overview of JavaScript variables.Variables in JavaScript are used to store values that can be fetched and used during the course of programming. The “var” keyword defines a variable in JavaScript.

Example for Creating a Variable in JavaScript

var x;
var a;

The above lines creates two variables namely, variable x and y. Now, we will add values to these variables. The following lines of codes adds values to the created variables.

var x=2;
var a=4;

Here, x gets a value of 2 and has a value of 4.

When to Use Else If?

Else if statements are used to handle situations where you want to order one action when a condition is true and another action when that condition is false.

The Else if statement is always used with the if statement and there can be as many else if statements as the program may require. Conditional statements uses various conditional and logical operators in order to compute the results.

Use of Comparison and Logical Operators in Else If Statements

The following types of comparison operators are available in JavaScript:

Comparison Operators

Operator             Description                   Example             Returns

==                             is equal to                           a==4                       false

===                          exactly equal to               a===”6″                 false

!=                               not equal to                       a!=5                        true

>                                greater than                       a>5                         false

<                                less than                              a<7                        true

>=                   greater than or equal to         x>=2                     true

<=                   less than or equal to                x<=10                   true

Logical Operators

Logical operators are used to determine the logic between the values. The following logical operators are used in JavaScript.

Operator         Description

    &&                      and

     ||                          or

     !                         not

The simplest kind of JavaScript Else if statement is described below:

Single If – Else if statements

The following syntax is used for single If – Else If statement:

if (condition1)
 {
 execute if condition1 is true
 }
else if (condition2)
 {
 execute if condition2 is true
 }
else
 {
 execute if neither condition1 nor condition2 is true
 }

Example Program

A renowned club in the town want to create a program to vet the age of the people applying for membership. They want to only allow people older than 18. For senior citizens, of age greater than 50, a 20% discount is offered in the annual membership.

Here is how the program will look like with an If – Else if statement:

<script type="text/javascript">

if (age<18)
 {
 x="You are not eligible for membership";
 }
else if (age<51)
 {
 x="Welcome, you are accepted as a member";
 }
else 
 {
 x="Welcome, you are accepted as a member with a 20% annual membership discount";
 }
</script>

The program above will print different messages for different values of “age”.

If the variable ‘age’ has a value <18, it will display the message “You are not eligible for membership”.

If ‘age’ has a value between 18 to 50, then “Welcome, you are accepted as a member” message will be displayed.

If ‘age’ holds any other value then the message “Welcome, you are accepted as a member with a 20% annual membership discount” will be displayed.

Multiple If – Else if statements

The following syntax is used for multiple If – Else if statements:

if (condition1)
 {
 code is executed if condition1 is true
 }
else if (condition2)
 {
 code is executed if condition2 is true
 }
else if (condition3)
 {
 code is executed if condition3 is true
 }
else if (condition4)
 {
 code is executed if condition4 is true
 }
else if (condition)
 {
 code is executed if condition is true
 }
else
 {
 code is executed if neither condition1 nor condition2 is true
 }

Example Program

Suppose you are planning a celebrity event and want to greet each of them with a customized message. If the celebrity is a sports star a common message is displayed else customized messages are displayed for specific celebrities. In order to create a JavaScript program that is capable of displaying customized messages after identifying the celebrities, you need to use the else if statement.

Have a look at the following program which correctly identifies 5 celebrities and greets them with a customized message:

<script type="text/javascript">
<!--
var celebrity;
 
if(celebrity == "Sports Star"){
document.write("Welcome, You are my true inspiration");
}
else if(celebrity == "Justin Bieber"){
document.write("Welcome, Justin..we love your song!!");
}
else if(celebrity == "Angelina Jolie"){
document.write("Welcome, Angelina..we love your movie!!");
}
else if(celebrity == "Selena Gomez"){
document.write("Welcome, Selena...we love your movie!!");
}
else if(celebrity == "Ben Affleck"){
document.write("Welcome, Ben Affleck...we loved your movie...The Town");
}
else if(celebrity == "Kanye West"){
document.write("welcome, Kanye West...we loved your album...Watch the Throne");
} 
else {
document.write("Welcome to the party!");
}
//-->
</script>

This program checks for each celebrity by name and displays customized messages to them. If the celebrity is other than a sports star or the already defined 5 celebrities, the common message  “Welcome to the party!” gets displayed.

Javascript is used to create simple to advanced functions that are embedded in HTML webpages. JS programs have the ability to run independently in a browser and they can interact with the Document Object Model (DOM) of the web page. Hence they are commonly used to embed forms, or other elements that require user interaction within the web page. This makes it an essential tool in each web developer’s toolkit. As you’ve seen, programming in JavaScript, is pretty similar to other programming languages, and quite easy to learn if already know basic programming. As always, the best way to learn, is to try it out yourself. So go ahead, try embedding a basic JavaScript into your first web page!!