13.2 While and Do-While Loops (15 mins)

  1. Introduction to While Loops:

    • A while loop repeatedly executes a block of code as long as a specified condition is true.

    • The loop checks the condition before each iteration, meaning it might not run at all if the condition is false initially.

    • Syntax:

      while (condition) {
  // code to run while the condition is true
}

    • Example:

      let i = 1;
while (i <= 5) {
  console.log(i);  // Outputs: 1, 2, 3, 4, 5
  i++;
}

  2. Introduction to Do-While Loops:

    • A do-while loop is similar to a while loop, but it always executes the code block at least once because the condition is checked after the code block runs.

    • Syntax:

      do {
  // code to run at least once
} while (condition);

    • Example:

      let i = 1;
do {
  console.log(i);  // Outputs: 1, 2, 3, 4, 5
  i++;
} while (i <= 5);

  3. Key Differences Between While and Do-While Loops:

    • While Loop: The condition is checked before each iteration, so if the condition is false at the start, the code block will not run.

    • Do-While Loop: The code block runs at least once, even if the condition is false initially.

    Example of Difference:

    • While loop where the condition is initially false:

      let x = 10;
while (x < 5) {
  console.log(x);  // This will not run because the condition is false
}

    • Do-while loop where the condition is initially false:

      let x = 10;
do {
  console.log(x);  // Outputs: 10 (runs once, even though the condition is false)
} while (x < 5);

  4. When to Use Each Loop:

    • While Loop: Use this when you want to repeat a block of code only if a condition is true and want to check the condition before each iteration.

    • Do-While Loop: Use this when the code block should run at least once, regardless of whether the condition is true.

Student Activity (15 mins):

Objective: Students will practice writing while and do-while loops to understand how they function differently and how to apply them in various situations.

Instructions:

  1. Create an HTML file (e.g., while_dowhile_loops.html) and write JavaScript code demonstrating both while and do-while loops.

    Example Code:

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

  <script>
    // While loop example: Print numbers from 1 to 5
    console.log("While Loop:");
    let i = 1;
    while (i <= 5) {
      console.log(i);  // Outputs: 1, 2, 3, 4, 5
      i++;
    }

    // Do-while loop example: Print numbers from 1 to 5
    console.log("Do-While Loop:");
    let j = 1;
    do {
      console.log(j);  // Outputs: 1, 2, 3, 4, 5
      j++;
    } while (j <= 5);

    // Difference between while and do-while loops
    console.log("While loop with false condition:");
    let x = 10;
    while (x < 5) {
      console.log(x);  // This will not run
    }

    console.log("Do-While loop with false condition:");
    let y = 10;
    do {
      console.log(y);  // Outputs: 10 (runs once)
    } while (y < 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 the while loop runs based on the condition and how the do-while loop runs at least once even if the condition is false.

    • Step 2: Modify the loop conditions and see how the output changes. For example:

      • Change the initial value of i or j to see how the loops behave with different starting points.

      • Change the loop condition (e.g., i <= 3 or j >= 1).

    Challenge:

    • Write a script that uses a do-while loop to repeatedly ask the user to input a password until they enter the correct one. After three incorrect attempts, break out of the loop and log a message.

    Example Code for Challenge:

    let attempts = 0;
let password;
do {
  password = prompt("Enter the password:");
  attempts++;
  if (attempts === 3) {
    console.log("Too many incorrect attempts.");
    break;
  }
} while (password !== "letmein");

if (password === "letmein") {
  console.log("Access granted.");
}

Follow-up Questions:

  1. What are the key differences between a while loop and a do-while loop?

  2. In what situation would you prefer to use a do-while loop instead of a while loop?

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

Expected Outcome:

Students will understand how while and do-while loops function, recognize the differences between them, and learn when to use each type. They will gain practical experience writing loops that repeat tasks and can handle different conditions effectively.

Previous13.1 Introduction to Loops (10 mins)Next13.3 For Loops and Nested Loops (15 mins)

Last updated