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.
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
}
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>
<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
}
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>
<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
}
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>
<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.
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.