Complete Web Designing Course for Beginners

Lesson 6.5 – Loops

🚀 Repeating Tasks Automatically Using JavaScript Loops

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Loops

✅ Use for Loop

✅ Use while Loop

✅ Use do…while Loop

✅ Repeat Tasks Automatically

✅ Generate Number Patterns

✅ Build Real-World Applications

📖 Introduction

Imagine you want to display:

Welcome Student

Welcome Student

Welcome Student

Welcome Student

Welcome Student

Without loops:

alert("Welcome Student");

alert("Welcome Student");

alert("Welcome Student");

alert("Welcome Student");

alert("Welcome Student");

Very long code.

What if you need:

Times

Times

Times

Impossible to write manually.

To solve this problem, JavaScript provides:

🔄 Loops

🤔 What is a Loop?

A Loop is used to execute the same block of code multiple times automatically.

Simple Definition

Loop = Repeat Code Automatically

Real Life Example

Imagine a fan.

Rotate

Rotate

Rotate

Rotate

Rotate

Repeated continuously.

Similarly:

JavaScript loops repeat instructions.

🌟 Why Use Loops?

Loops help:

✅ Reduce Code

✅ Save Time

✅ Increase Efficiency

✅ Process Large Data

✅ Create Patterns

✅ Build Games

🎯 Types of Loops

JavaScript mainly provides:

✅ for Loop

✅ while Loop

✅ do…while Loop

🔄 The for Loop

Most commonly used loop.

Syntax

for(initialization; condition; increment)
{

Code

}

Understanding the Parts

for(let i = 1; i <= 5; i++)

Initialization

let i = 1;

Starting value.

Condition

i <= 5

Loop runs while condition is true.

Increment

i++

Increase value by 1.

🌟 First for Loop Program

for(let i = 1; i <= 5; i++)
{

   alert("Welcome Student");

}

Output

Welcome Student

Welcome Student

Welcome Student

Welcome Student

Welcome Student

Repeated 5 times.

🎯 Printing Numbers

for(let i = 1; i <= 10; i++)
{

console.log(i);

}

Output

🌟 What is console.log()?

Displays output inside browser console.

Example

console.log("Hello");

Output:

Hello

🎯 Printing Even Numbers

for(let i = 2; i <= 10; i = i + 2)
{

console.log(i);

}

Output

🎯 Printing Odd Numbers

for(let i = 1; i <= 10; i = i + 2)
{

console.log(i);

}

Output

🌟 Multiplication Table

Print table of 5.

for(let i = 1; i <= 10; i++)
{

   console.log("5 x " + i + " = " + (5*i));

}

Output

x 1 = 5

x 2 = 10

x 3 = 15

...

x 10 = 50

🔄 The while Loop

Used when we don’t know how many times the loop should run.

Syntax

while(condition)
{

Code

}

Example

let i = 1;

while(i <= 5)
{

console.log(i);

i++;

}

Output

How It Works

Step 1

i = 1

Condition:

1 <= 5

True

Print:

Then:

i++

becomes:

Continues until:

i = 6

Condition becomes false.

Loop stops.

🔄 The do…while Loop

Special loop.

Runs at least one time.

Syntax

do
{

   Code

}
while(condition);

Example

let i = 1;

do
{

   console.log(i);

   i++;

}
while(i <= 5);

Output

🌟 Difference Between while and do…while

while

Checks condition first.

while(condition)

do…while

Executes code first.

do
{

}
while(condition);

Example

let i = 10;

while(i < 5)
{

console.log(i);

}

Output:

Nothing

Example

let i = 10;

do
{

console.log(i);

}
while(i < 5);

Output:

Because do…while executes once before checking.

🎯 Nested Loop

Loop inside another loop.

Example

for(let i = 1; i <= 3; i++)
{

for(let j = 1; j <= 3; j++)
{

console.log(i,j);

}

}

Output

🌟 Star Pattern Program

for(let i = 1; i <= 5; i++)
{

console.log("*");

}

Output

*

*

*

*

*

🎯 Sum of Numbers

Calculate:

1 + 2 + 3 + 4 + 5

Program

let sum = 0;

for(let i = 1; i <= 5; i++)
{

   sum = sum + i;

}

console.log(sum);

Output

🌟 Countdown Program

for(let i = 10; i >= 1; i--)
{

console.log(i);

}

Output

💻 Complete Practical Program

index.html

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Loops</title>

</head>

<body>

<script>

for(let i = 1; i <= 10; i++)
{

   document.write(i + "<br>");

}

</script>

</body>

</html>

🎯 Expected Output

Displayed on webpage.

🌟 document.write()

Writes output directly to webpage.

Example

document.write("Hello Student");

Output:

Hello Student

🏫 Real World Applications

Loops are used in:

✅ Attendance Systems

✅ Student Records

✅ Quiz Applications

✅ E-Commerce Websites

✅ Banking Systems

✅ Games

✅ Data Processing

✅ Robotics Dashboards

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Increment

Wrong:

let i = 1;

while(i <= 5)
{

console.log(i);

}

Result:

Infinite Loop

Browser may hang.

Correct:

i++;

Mistake 2

Wrong Condition

Wrong:

for(let i = 1; i >= 5; i++)

Loop never runs.

Correct:

for(let i = 1; i <= 5; i++)

Mistake 3

Missing Semicolon

Wrong:

for(let i = 1 i <= 5 i++)

Correct:

for(let i = 1; i <= 5; i++)

🌟 Best Practices

✅ Use for loops when repetitions are known.

✅ Use while loops when repetitions are unknown.

✅ Avoid infinite loops.

✅ Keep loop conditions simple.

✅ Test loop outputs carefully.

🏆 Mini Project – Multiplication Table Generator

Create:

let number = 7;

Display:

x 1 = 7

x 2 = 14

x 3 = 21

...

x 10 = 70

using a for loop.

📝 Practical Activity

Create programs for:

1. Print Numbers

1 to 20

2. Print Even Numbers

2 to 20

3. Print Odd Numbers

1 to 19

4. Countdown

10 to 1

📋 Assignment

Assignment 6.5

What is a Loop?
Why are Loops important?
Explain the for Loop.
Explain the while Loop.
Explain the do…while Loop.
Create a multiplication table using loops.
Create a countdown program.

🧠 Quiz

Q1. Which loop is most commonly used?

A. while

B. do…while

C. for

D. repeat

✅ Answer: C

Q2. Which loop checks condition first?

A. do…while

B. while

C. repeat

D. forever

✅ Answer: B

Q3. Which loop executes at least once?

A. for

B. while

C. do…while

D. none

✅ Answer: C

Q4. Which statement increases value by 1?

A. i–

B. i++

C. i==

D. i+=0

✅ Answer: B

Q5. Loops are used for?

A. Repeating Tasks

B. Styling

C. Images

D. Tables

✅ Answer: A

📌 Lesson Summary

✅ Loops repeat code automatically.

✅ for loops are used when the number of repetitions is known.

✅ while loops are used when repetitions are condition-based.

✅ do…while loops execute at least once.

✅ Loops are essential for real-world applications and programming automation.