Back

Activity 2.5 Iteration: While Loops

divider

Introduction

Activity 2.5

Iteration: While Loops

Topics

  • Doing Things Repeatedly
  • While Loops
  • Sentinel Values
  • Infinite Loops

Doing Things Repeatedly 🔁

Programs also often need to perform the same action multiple times. Think about counting, processing a list of items, or waiting for a specific event.

This concept of repeating a sequence of instructions is called iteration (or looping). It's essential for automating repetitive tasks.

Unlike selection (if statements), which chooses one path, iteration repeats a path until a condition is no longer met.

Iteration Sample

How can we repeat the "play next song" action for every song in the playlist?

Playlist Screenshot

The while Loop

The while loop is the simplest way to perform iteration in JavaScript. It repeatedly executes a block of code as long as its condition remains true. 

let timer = 10;


while (timer > 0) {
  console.log(timer);
  timer--;
}

Components of a While Loop

let timer = 10;


while (timer > 0) {
  console.log(timer);
  timer--;
}

1. (while) While keyword

2. (timer > 0) Condition

3. ({ }) Loop Body/Code Block: Must contain the repeated action and the updating statement that changes the condition.

Demo 1: Counting Up

let start = 1;
let end = 10;


while (start <= end) {
  console.log(start);
  start++;
}

Demo 2: Counting Powers of 2

let number = 2;


while (number <= 1024) {
  console.log(number);
  number = number * 2;
}

The Sentinel Value

A sentinel value is a specific input or condition that signals the loop to stop.

  • It's used when the number of iterations is unknown beforehand.
  • It acts as a terminating signal (the 'stop sign' for the loop). 
  let score = 0;


  while (score != -1) {
    score = parseInt(prompt("Enter a score (-1 to stop):"));
    // Remaining code omitted
  }

In this example, -1 is the sentinel value that stops the loop.

Demo 3: Menu system

  let choice = "";


  while (choice != "2") {
    console.log("-Menu-");
    console.log("1) Place Order");
    console.log("2) Finish");
    choice = prompt("->");
    // Remaining code omitted...
  }

Infinite Loops

  • A major mistake is creating a loop that never stops. These are called infinite loops.
  • An infinite loop occurs when the loop's condition never becomes false. They cause your program to freeze or crash because they consume all available resources.
  • Prevent them by ensuring the code inside the loop modifies the variable(s) used in the condition.

Infinite Loops

  let number = 1;


  while (number <= 100) {
    console.log(number);
  }

Infinite Loops

  let number = 1;


  while (number <= 100) {
    console.log(number);
    number++;
  }

Key Terms

Iteration / Looping
The process of repeatedly executing a set of instructions.
While Loop
A control structure that executes a block of code as long as a specified condition remains true.
Loop Condition
The boolean expression checked at the start of each iteration to determine if the loop should continue.

Key Terms

Sentinel Value
A special value or input that signals the end of the input or the stopping point for a loop with an unknown number of iterations.
Infinite Loop
A loop whose condition never becomes false, causing it to run indefinitely and crash the program.

'F' → Fullscreen

Objectives

  • icon Writing while loops
  • icon Using while loops to implement menu systems
divider

Activity Tasks

  • icon Create a new project named 2-5-loops.js.
  • icon Complete each task individually.

Task 1: 99 Bottles Song

  • icon Pay attention to the condition. When do you stop singing the song?
2-5-loops.js
console.log("--- Demo 1 - 99 Bottles Song ---\n");
let soda = prompt("Enter your favorite soda:");
let bottles = 99;


// While there are bottles left to pass around...
while (bottles > 0) {
    console.log(`${bottles} bottles of ${soda} on the wall,`);
    console.log(`${bottles} bottles of ${soda}!`);
    console.log("You take one down, pass it around,");
    bottles--;
    console.log(`${bottles} bottles of ${soda} on the wall!`);


    // Uncomment alert() if you want to pause between iterations
    // alert("");
}


alert("Press enter to continue...");
// -----------------------------------------------------------------------------
//

Task 2: Turn-Based Battle

2-5-loops.js
18 collapsed lines
console.log("--- Demo 1 - 99 Bottles Song ---\n");
let soda = prompt("Enter your favorite soda:");
let bottles = 99;


// While there are bottles left to pass around...
while (bottles > 0) {
    console.log(`${bottles} bottles of ${soda} on the wall,`);
    console.log(`${bottles} bottles of ${soda}!`);
    console.log("You take one down, pass it around,");
    bottles--;
    console.log(`${bottles} bottles of ${soda} on the wall!`);


    // Uncomment alert() if you want to pause between iterations
    // alert("");
}


alert("Press enter to continue...");
// -----------------------------------------------------------------------------


console.log("--- Demo 2 - Turn-Based Battle ---\n");


let playerHealth = 10;
let enemyHealth = 6;
let fighting = true;


// Another suitable condition: playerHealth > 0 && enemyHealth == 0
while (fighting) {
    console.log("Health: " + playerHealth);
    console.log("Goblin: " + enemyHealth);
    console.log("\n-Menu-");
    console.log("1) Attack");
    console.log("2) Heal");
    let choice = prompt("->").toLowerCase();


    if (choice == "1" || choice == "attack") {
        console.log("Player attacks!");
        let playerAttack = Math.floor(Math.random() * 6); // 0 to 5


        if (playerAttack > 0) {
            console.log(`You did ${playerAttack} damage.`);
            enemyHealth = enemyHealth - playerAttack;
        }
        else {
            console.log("Missed!");
        }
    }
    else if (choice == "2" || choice == "heal") {
        let potion = Math.floor(Math.random() * 3) + 1; // 1 to 3
        console.log(`Healed ${potion} points.`);
        playerHealth = playerHealth + potion;
    }
    else {
        console.log("Invalid option. You lose your turn!");
    }


    if (enemyHealth > 0) {
        console.log("Goblin attacks!");
        let enemyAttack = Math.floor(Math.random() * 4); // 0 to 3


        if (enemyAttack > 0) {
            console.log(`Goblin did ${enemyAttack} damage.`);
            playerHealth = playerHealth - enemyAttack;
        }
        else {
            console.log("Missed!");
        }
    }
    else {
        console.log("Goblin defeated!");
        fighting = false; // Exit battle
    }


    if (playerHealth <= 0) {
        console.log("You were defeated!");
        fighting = false; // Exit battle
    }
}
//
divider

Sample Output

Your program output should something similar to the sample output below.

Sample Output
--- Demo 1 - 99 Bottles Song ---


Enter your favorite soda: Code Zero
99 bottles of Code Zero on the wall,
99 bottles of Code Zero!
You take one down, pass it around,
98 bottles of Code Zero on the wall!
Press enter to continue... [Enter]
--- Demo 2 - Turn-Based Battle ---


Health: 10
Goblin: 6


-Menu-
1) Attack
2) Heal
-> 1
Player attacks!
You did 3 damage.
Goblin attacks!
Missed!
Health: 10
Goblin: 3


-Menu-
1) Attack
2) Heal
-> 1
Player attacks!
You did 4 damage.
Goblin defeated!
divider

Reflection Questions

You may write your reflection answers as comments at the bottom of your code.

  1. When designing a while loop, you must ensure that the loop will eventually stop. In Task 1 (99 Bottles), the update was simple (bottles--). In Task 2 (Turn-Based Battle), how did the code inside the loop ensure the loop condition (while (fighting)) could eventually change to false?
divider

Submission

Submit your activity and reflection answers to the appropriate dropbox.

Activity Complete