13.1 Introduction to Loops (10 mins)

  • What Are Loops?

    • Loops are used in programming to execute a block of code repeatedly based on a condition. This is especially useful when you want to perform the same task multiple times without rewriting the same code.

    • Loops allow for more efficient code and help reduce repetition.

  • Why Are Loops Used?

    • Loops automate repetitive tasks, such as iterating through a list of items or performing calculations multiple times.

    • They make code scalable, allowing you to handle large amounts of data or perform actions until a specific condition is met.

    Example:

    • Instead of printing numbers from 1 to 5 manually like this:

      console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

    • You can use a loop to simplify the task:

      for (let i = 1; i <= 5; i++) {
  console.log(i);
}

  • Common Loop Structures:

    • for loop: Used when you know how many times you want to iterate.

      • Syntax:

        for (initialization; condition; increment) {
  // Code to execute
}

      • Example: Loop from 1 to 5.

        for (let i = 1; i <= 5; i++) {
  console.log(i);
}

    • while loop: Used when you want to repeat a block of code while a condition is true.

      • Syntax:

        while (condition) {
  // Code to execute
}

      • Example: Print numbers from 1 to 5 using a while loop.

        let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

    • do-while loop: Similar to the while loop, but the code is executed at least once, regardless of the condition.

      • Syntax:

        do {
  // Code to execute
} while (condition);

      • Example: Print numbers from 1 to 5 using a do-while loop.

        let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);

  • Choosing the Right Loop:

    • Use a for loop when you know the exact number of iterations.

    • Use a while loop when you want to repeat a block of code until a condition is no longer true.

    • Use a do-while loop when you need to ensure the code runs at least once, even if the condition is initially false.

Student Activity (10 mins):

Objective: Students will practice using different types of loops to perform repetitive tasks in JavaScript.

Instructions:

  1. Create an HTML file (e.g., loops.html) that demonstrates how to use for, while, and do-while loops to iterate through a set of numbers.

    Example Code:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loops Example</title>
</head>
<body>
  <h1>Check the Console for Loop Output</h1>

  <script>
    // For loop: Print numbers 1 to 5
    console.log("For loop:");
    for (let i = 1; i <= 5; i++) {
      console.log(i);
    }

    // While loop: Print numbers 1 to 5
    console.log("While loop:");
    let j = 1;
    while (j <= 5) {
      console.log(j);
      j++;
    }

    // Do-While loop: Print numbers 1 to 5
    console.log("Do-While loop:");
    let k = 1;
    do {
      console.log(k);
      k++;
    } while (k <= 5);
  </script>
</body>
</html>

  2. Run the file in a browser:

    • Open the HTML file in a browser and use Developer Tools (F12 or right-click and select Inspect > Console) to view the output of the loops.

  3. Activity:

    • Step 1: Run the code and observe how each loop prints the numbers 1 to 5.

    • Step 2: Modify each loop to print the numbers from 1 to 10.

    • Step 3: Experiment by changing the starting point and condition of the loops (e.g., start from 5 and count down to 1).

    Challenge:

    • Challenge Task: Write a for loop that prints only even numbers from 1 to 10.

      for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);  // Outputs: 2, 4, 6, 8, 10
  }
}

Follow-up Questions:

  1. How do the three different loop types (for, while, do-while) behave in terms of condition checking and iteration?

  2. In what situations would you choose a while loop over a for loop?

  3. Can you think of a real-world example where a do-while loop would be useful?

Expected Outcome:

Students will understand the purpose and usage of different loop structures (for, while, do-while) and how to choose the appropriate loop for a given task. They will be able to write loops that perform repetitive tasks and handle various conditions.

PreviousLecture_13_Loops and IterationsNext13.2 While and Do-While Loops (15 mins)

Last updated