From f5aec47e4cf2bc90f2cc260e7e6bfcbfc80e8e52 Mon Sep 17 00:00:00 2001 From: Clarence Bakosi Date: Fri, 31 Oct 2025 10:13:04 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to What Is a While Loop, and How Does It Differ from the Do...while Loop (#63341) --- .../6732c06654ea3442724284fe.md | 46 ++++++++----------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-loops/6732c06654ea3442724284fe.md b/curriculum/challenges/english/blocks/lecture-working-with-loops/6732c06654ea3442724284fe.md index d0c4819c255..8af7d5a8c50 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-loops/6732c06654ea3442724284fe.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-loops/6732c06654ea3442724284fe.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-is-a-while-loop-and-how-does-it-differ-from-the-do-while-loop --- -# --description-- +# --interactive-- In previous lessons, you learned how to work with `for` loops, `for...in` loops and `for...of` loops. In this lesson, you will learn about the `while` loop and the `do...while` loop. @@ -19,27 +19,21 @@ while (condition) { The condition is checked before the block of code is executed. If the condition is false, the block of code will not be executed. -`while` loops are useful when you do not know how many times you need to run the block of code. Here is an example of using a `while` loop to validate user input: +`while` loops are useful when you do not know how many times you need to run the block of code. Here is an example of using a `while` loop: + +:::interactive_editor ```js -let userInput = prompt("Please enter a number between 1 and 10"); - -while (isNaN(userInput) || Number(userInput) < 1 || Number(userInput) > 10) { - userInput = prompt("Invalid input. Please enter a number between 1 and 10."); +let counter = 0; +while(counter < 5) { + console.log(counter); + counter++; } - -alert("You entered a valid number!"); ``` -In this example, we are using the `prompt` method to ask for user input. Then, the `while` loop first checks if the `userInput` is `NaN`. Remember that `NaN` is "Not a Number". `isNaN` checks whether the value is `NaN` and that `NaN` is the result of an invalid number conversion because it's not a number. +::: -So if the user types in random characters or nothing at all, then they will be prompted with the message again. The `while` loop is also checking if the `userInput`, when converted to a number, is between `1` and `10`. - -We are using the `Number` constructor here because a prompt will return a string and we want only want to be explicitly checking numbers here. - -If the user input is not between `1` and `10`, the `while` loop will continue to prompt the user to enter a number between `1` and `10`. - -Once the user enters a valid number, the `while` loop will exit and an alert will be displayed to the user. +In this example, we have a variable called `counter` that is initialized to `0`. The `while` loop will continue to run as long as the value of `counter` is less than `5`. Inside the loop, we log the value of `counter` to the console and then increment `counter` by `1`. Another loop similar to the `while` loop would be the `do...while` loop. Here is the basic syntax: @@ -53,23 +47,21 @@ One key difference between a `do...while` loop and a `while` loop is that the `d If the condition is true, the block of code will continue to execute. If the condition is false, the block of code will stop executing. -Here is an example of using a `do...while` loop to validate user input: +Here is an example of using a `do...while` loop: + +:::interactive_editor ```js -let userInput; - +let counter = 0; do { - userInput = prompt("Please enter a number between 1 and 10"); -} while (Number(userInput) < 1 || Number(userInput) > 10); - -alert("You entered a valid number!"); + console.log(counter); + counter++; +} while (counter < 5); ``` -In this example, we have a variable called `userInput` and have not assigned a value to it. Then we have a `do...while` loop that will prompt the user to enter a number between `1` and `10`. +::: -Then the `while` loop will check if the user input is less `than` 1 or greater than `10`. If the input is not between `1` and `10`, the `do...while` loop will continue to prompt the user to enter a number between `1` and `10`. - -Once the user complies and enters a valid number, the `do...while` loop will exit and an alert will be displayed to the user. +In this example, we have a variable called `counter` that is initialized to `0`. The `do...while` loop will log the value of `counter` to the console and then increment `counter` by `1`. After executing the block of code, it checks if the value of `counter` is less than `5`. If it is, the loop will continue to run. If not, the loop will stop. In most cases, you will probably use the `while` loop more often than the `do...while` loop. However, it is good to know both types of loops and when to use them.