Posted By
Bajarangi soft ,
Posted On 25-09-2020
Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative blocks of code to be executed.
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
Example(1)
Make a "Good day" greeting if the hour is less than 18:00:
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo1").innerHTML = "Good day!";
}
</script>
The else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
Syntax
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Example(2)
If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":
<script>
function function1() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo2").innerHTML = greeting;
}
</script>
The else if Statement
Use the else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Example(3)
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
<script>
function function2() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo3").innerHTML = greeting;
}
</script>
Complete code of Conditions Statements In Java Script
<!DOCTYPE html>
<html>
<head>
<title> Conditions Statements In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1> Conditions Statements In JavaScript</h1>
</div>
<br>
<div class="well">
<h3>The if Statement</h3>
<h4 id="demo1"></h4>
<h3>The else Statement</h3>
<button class="btn btn-primary" onclick="function1()">Try it</button>
<h4 id="demo2"></h4>
<h3>The else if Statement</h3>
<button class="btn btn-primary" onclick="function2()">Try it</button>
<h4 id="demo3"></h4>
</div>
<br>
</div>
</body>
</html>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo1").innerHTML = "Good day!";
}
function function1() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo2").innerHTML = greeting;
}
function function2() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo3").innerHTML = greeting;
}
</script>