Conditional Statements in JavaScript
Objective
In this tutorial, you’ll learn about conditional statements in JavaScript, specifically if
, else if
, and else
. These statements allow you to execute different blocks of code based on certain conditions.
Step 1: What are Conditional Statements?
Conditional statements are used to perform different actions based on different conditions. In JavaScript, the most common conditional statements are:
if
: Executes a block of code if a specified condition is true.else if
: Specifies a new condition to test if the first condition is false.else
: Executes a block of code if all the conditions are false.
Step 2: Using the if
Statement
The if
statement is used to execute a block of code only if the specified condition is true.
Syntax:
if (condition) {
// Block of code to be executed if the condition is true
}
Example:
let age = 18;
if (age >= 18) {
console.log("You are eligible to vote.");
}
In this example, if the age
is 18 or older, the message “You are eligible to vote.” will be displayed in the console.
Step 3: Using the else if
Statement
The else if
statement is used 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 condition1 is false and condition2 is true
}
Example:
let score = 75;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
}
In this example, the code checks multiple conditions to determine the grade based on the score
.
Step 4: Using the else
Statement
The else
statement is used to execute a block of code if all the conditions are false.
Syntax:
if (condition1) {
// Block of code to be executed if condition1 is true
} else if (condition2) {
// Block of code to be executed if condition1 is false and condition2 is true
} else {
// Block of code to be executed if all conditions are false
}
Example:
let hour = 19;
if (hour < 12) {
console.log("Good morning!");
} else if (hour < 18) {
console.log("Good afternoon!");
} else {
console.log("Good evening!");
}
In this example, the code checks the hour
and displays the appropriate greeting.
Step 5: Writing and Executing Code
JavaScript Code:
Create a file named conditional.js
and paste the following JavaScript code:
let age = 18;
let score = 75;
let hour = 19;
// Checking if the age is eligible for voting
if (age >= 18) {
console.log("You are eligible to vote.");
}
// Checking the score to determine the grade
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}
// Checking the hour to display the appropriate greeting
if (hour < 12) {
console.log("Good morning!");
} else if (hour < 18) {
console.log("Good afternoon!");
} else {
console.log("Good evening!");
}
// Displaying the results on the page
document.getElementById("voting").textContent = (age >= 18) ? "You are eligible to vote." : "You are not eligible to vote.";
document.getElementById("grade").textContent = "Your grade is " + (score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F");
document.getElementById("greeting").textContent = (hour < 12) ? "Good morning!" : (hour < 18) ? "Good afternoon!" : "Good evening!";
HTML Code:
Create a file named conditional.html
and paste the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Conditional Statements</title>
</head>
<body>
<h1>Conditional Statements in JavaScript</h1>
<p id="voting"></p>
<p id="grade"></p>
<p id="greeting"></p>
<script src="conditional.js"></script>
</body>
</html>
Step 6: Save and Open in Browser
- Save both
conditional.js
andconditional.html
files. - Open
conditional.html
in your browser. - You should see the results of the conditional statements displayed directly on the webpage.
- Open the browser console (Right-click on the page, choose “Inspect”, then go to the “Console” tab) to see the output of
console.log()
.
Explanation of the Code:
- Voting Eligibility: Checks if
age
is 18 or older to determine if the user is eligible to vote. - Grade Calculation: Uses
else if
to check thescore
and assign a grade. - Greeting: Displays a greeting based on the current
hour
of the day.
Step 7: Experimenting
- Change Values: Modify the values of
age
,score
, andhour
to see how the output changes. - Add More Conditions: Try adding more conditions to the code, such as checking for different age groups or scores.
Step 8: Summary
- You learned how to use conditional statements (
if
,else if
,else
) in JavaScript. - You practiced using these statements to make decisions in your code based on different conditions.
- You displayed the results of these conditions on a webpage and in the console.