Lesson 6.4 – Conditional Statements

🧠 Making Decisions in JavaScript Using if, else, and else if

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Conditional Statements

✅ Use if Statement

✅ Use else Statement

✅ Use else if Statement

✅ Create Decision-Making Programs

✅ Build Smart Applications

✅ Create Real-World Projects

📖 Introduction

In real life, we make decisions every day.

Examples:

If it is raining
Take an umbrella

If marks are above 40
Student passes

If age is 18 or above
Eligible for voting

Computers also make decisions.

JavaScript uses:

🔀 Conditional Statements

to make decisions.

🤔 What is a Conditional Statement?

A Conditional Statement allows JavaScript to execute different code depending on whether a condition is true or false.

Simple Definition

Condition True  → Execute Code

Condition False → Skip Code

Example

let age = 20;

if(age >= 18)
{
alert("Eligible for Voting");
}

Output:

Eligible for Voting

Because:

20 >= 18

is true.

🌟 Types of Conditional Statements

JavaScript provides:

✅ if

✅ if…else

✅ if…else if…else

✅ Nested if

🎯 The if Statement

Used when we want to execute code only if a condition is true.

Syntax

if(condition)
{

   Code Here

}

Example 1

let age = 20;

if(age >= 18)
{
alert("You Can Vote");
}

Output:

You Can Vote

Example 2

let marks = 80;

if(marks >= 40)
{
alert("Pass");
}

Output:

Pass

Example 3

let temperature = 35;

if(temperature > 30)
{
alert("Hot Weather");
}

Output:

Hot Weather

🎯 The else Statement

Sometimes we want another action when the condition is false.

Use:

else

Syntax

if(condition)
{

   Code

}
else
{

   Code

}

Example

let age = 15;

if(age >= 18)
{
   alert("Eligible for Voting");
}
else
{
   alert("Not Eligible");
}

Output:

Not Eligible

Because:

15 >= 18

is false.

🌟 Pass or Fail Program

let marks = 35;

if(marks >= 40)
{
   alert("Pass");
}
else
{
   alert("Fail");
}

Output:

Fail

🎯 Flow Diagram

          Condition

             |

        True | False

             |

      Execute Code

             |

       Else Code

🌟 The else if Statement

Used when there are multiple conditions.

Syntax

if(condition1)
{

}

else if(condition2)
{

}

else
{

}

Example

Student Grade System

let marks = 85;

if(marks >= 90)
{
alert("Grade A+");
}
else if(marks >= 75)
{
alert("Grade A");
}
else
{
alert("Grade B");
}

Output:

Grade A

🎯 Grading System Example

let marks = 95;

if(marks >= 90)
{
alert("Excellent");
}
else if(marks >= 75)
{
alert("Very Good");
}
else if(marks >= 50)
{
alert("Good");
}
else
{
alert("Needs Improvement");
}

Output:

Excellent

🌟 Voting Eligibility Program

let age = 22;

if(age >= 18)
{
alert("Eligible for Voting");
}
else
{
alert("Not Eligible");
}

Output:

Eligible for Voting

🎯 Even or Odd Number Program

let number = 10;

if(number % 2 == 0)
{
alert("Even Number");
}
else
{
alert("Odd Number");
}

Output:

Even Number

🌟 Positive or Negative Number

let number = -5;

if(number > 0)
{
alert("Positive Number");
}
else
{
alert("Negative Number");
}

Output:

Negative Number

🎯 Login System Example

let password = "1234";

if(password == "1234")
{
alert("Login Successful");
}
else
{
alert("Wrong Password");
}

Output:

Login Successful

🌟 Traffic Signal Example

let signal = "Red";

if(signal == "Red")
{
   alert("Stop");
}
else if(signal == "Yellow")
{
   alert("Ready");
}
else if(signal == "Green")
{
   alert("Go");
}
else
{
   alert("Invalid Signal");
}

Output:

Stop

🎯 Multiple Conditions Example

let age = 20;

let citizen = true;

if(age >= 18 && citizen == true)
{
alert("Can Vote");
}
else
{
alert("Cannot Vote");
}

Output:

Can Vote

🌟 Nested if Statement

An if statement inside another if statement.

Example

let age = 20;

if(age >= 18)
{

if(age >= 21)
{
alert("Adult");
}

}

Output:

Adult

🎯 Student Result System

let marks = 78;

if(marks >= 90)
{
   alert("A+ Grade");
}
else if(marks >= 80)
{
   alert("A Grade");
}
else if(marks >= 60)
{
   alert("B Grade");
}
else if(marks >= 40)
{
   alert("C Grade");
}
else
{
   alert("Fail");
}

Output:

B Grade

💻 Complete Practical Program

index.html

<!DOCTYPE html>

<html>

<head>

<title>Conditional Statements</title>

</head>

<body>

<script>

let marks = 82;

if(marks >= 90)
{
alert("Grade A+");
}
else if(marks >= 75)
{
alert("Grade A");
}
else if(marks >= 50)
{
alert("Grade B");
}
else
{
alert("Fail");
}

</script>

</body>

</html>

🎯 Expected Output

Grade A

Popup appears.

🏫 Real World Applications

Conditional Statements are used in:

✅ ATM Machines

✅ Login Systems

✅ Student Result Systems

✅ Quiz Applications

✅ Voting Systems

✅ Attendance Systems

✅ Online Shopping Websites

⚠️ Common Beginner Mistakes

Mistake 1

Using = Instead of ==

Wrong:

if(age = 18)

Correct:

if(age == 18)

Mistake 2

Missing Braces

Wrong:

if(age >= 18)

alert("Eligible");

Better:

if(age >= 18)
{
alert("Eligible");
}

Mistake 3

Wrong Condition Order

Wrong:

if(marks >= 40)
{
alert("Pass");
}
else if(marks >= 90)
{
alert("A+");
}

Correct:

if(marks >= 90)
{
alert("A+");
}
else if(marks >= 40)
{
alert("Pass");
}

🌟 Best Practices

✅ Use meaningful variable names.

✅ Keep conditions simple.

✅ Test all possible cases.

✅ Use else for default actions.

✅ Use else if for multiple choices.

🏆 Mini Project – Age Verification System

Create:

let age = 17;

Check:

If age ≥ 18

Show:
Eligible for Voting

Otherwise:
Not Eligible

📝 Practical Activity

Create a Student Grade Calculator.

Rules:

90+ = A+

75+ = A

60+ = B

40+ = C

Below 40 = Fail

Display grade using alert().

📋 Assignment

Assignment 6.4

1. What is a Conditional Statement?
2. What is the purpose of an if statement?
3. What is the difference between if and else?
4. When should we use else if?
5. Create a voting eligibility program.
6. Create a grading system.
7. Create an even or odd number checker.

🧠 Quiz

Q1. Which statement is used for decision making?

A. loop

B. function

C. if

D. variable

✅ Answer: C

Q2. Which block executes when the condition is false?

A. if

B. else

C. let

D. alert

✅ Answer: B

Q3. Which statement is used for multiple conditions?

A. else if

B. loop

C. alert

D. var

✅ Answer: A

Q4. What will 10 > 5 return?

A. false

B. true

C. error

D. null

✅ Answer: B

Q5. Conditional statements help JavaScript?

A. Store data

B. Design websites

C. Make decisions

D. Create databases

✅ Answer: C

📌 Lesson Summary

✅ Conditional Statements help JavaScript make decisions.

✅ if executes code when a condition is true.

✅ else executes code when a condition is false.

✅ else if handles multiple conditions.

✅ Conditional Statements are used in login systems, grading systems, voting systems, and many real-world applications.