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.jsandconditional.htmlfiles. - Open
conditional.htmlin 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
ageis 18 or older to determine if the user is eligible to vote. - Grade Calculation: Uses
else ifto check thescoreand assign a grade. - Greeting: Displays a greeting based on the current
hourof the day.
Step 7: Experimenting
- Change Values: Modify the values of
age,score, andhourto 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.
