Student Instructions

Unit 5: Lesson 11 - while Loops

Background

if statements create a "branch" within our program logic, only running some code if a condition is true. If statements only run once.

We can make our programs repeatedly run a set of commands as long as a condition is true. This new programming construct is called a while loop and is one way we can write programs that repeatedly run a set of commands.

Vocabulary

while loop: a programming construct used to repeat a set of commands while a boolean condition is true.

Lesson

• Exploration of while loops in flowcharts
• Use while loops in App Lab

Resources

• Activity Guide: Flowcharts with while Loops (PDF | DOCX)

Continue

Student Instructions

while Loops

The while loop uses a boolean condition to repeatedly run a block of code. It checks the expression, and if it is true it runs the block of code contained within it. This process of checking the condition and running the block of code is repeated as long as the boolean condition remains true. Once the boolean expression becomes false it will stop.

We are going to start exploring a while loop by modifying the condition on which a while loop runs and using console.log to ensure it is correctly evaluating its condition.

Do This:

• Starter code is provided which creates a while loop that repeatedly moves the turtle around the screen.
• Add a console.log command inside the loop after num is assigned a random number. This way you can see the value the loop is based on.
• Run the program a couple times and look at the results.
• Change the condition for the while loop to check if the variable num is less than 90. Your output might look like the example below.

Student Instructions

Infinite while Loops

while loops run until their condition becomes false, which raises an interesting question. What happens if the condition never becomes false? In these cases the program enters what is called an infinite loop over the commands in the while loop, and it never reaches the rest of your program. We normally avoid infinite loops in our programs, but let's try it out to see what happens.

Do This:

• Starter code is provided which creates a while loop to move the turtle around the screen.
• Change the while loop condition to something that will always be true. The easiest way to do this is to change 50 to be a number that randomNumber will never generate such as 200.
• Run the program. Notice that it will never stop running. You may even get an error from your browser.
• Hit reset to stop it. Your computer may actually stop running as you expect if you let an infinite loop run for too long. It's possible you may even need to close the browser window and reload the page. If you hit reset early enough you can usually avoid this problem.
• Find a condition using < or > that will also cause an infinite loop.

Student Instructions

Changing if to while

How many times would we have to roll a die before it comes up as a 6? In the program you're about to see, we simulate rolling a die (generating a random number between 1 and 6) in order to answer this question.

Do This:

Starter code is provided which re-rolls a die once if the first roll is not a 6. Change the if statement to a while loop so the program will keep rolling the die while the current roll is not a 6. * Hint: The easiest way to do this is to change the text from if to while. Run the program to test out the change.

Student Instructions

Debug Console: Variable Values

Up until now, if we wanted to find out the value of a variable at some point in the execution of a program, we've used console.log. That is still going to be a great strategy but the Debug Console can do even more for us!

Check this out: We can check the value of a variable in real time (as our program executes) by typing its name into the prompt within the Debug Console and hitting "enter". This is another powerful tool for debugging your programs.

Do This:

• Run the program.

• Use the Debug Console to check the ending value of num. You can do this by typing num in the Debug Console and hitting enter!

Student Instructions

Debug Commands

Check out the new Debug Commands toolbox that has appeared next to the Debug Console! These powerful tools allow us to pause a program at a certain point while it’s running and then execute lines one at a time.

Using these tools we can investigate the state of variables and other elements of the program at any point, mid-execution. This makes it much easier to see what’s happening while the programming is actually running!

In order to use the debug commands, you first have to indicate which line you want the program to pause at. This is called adding a “breakpoint” (see animation below).

Do This:

• Add a breakpoint on the line where the while loop starts. (Just click the line number.)
• Use the button to execute each line one at a time.
• Each time you hit the breakpoint, use the console to check value of num.
• NOTE: If you hit it will "continue" executing the program normally, unless of course it hits another breakpoint.

Student Instructions

Update Condition

In order for a while loop to stop at some point, the code inside the loop must change something about the state of the program - usually the value of a variable - so that eventually the boolean expression becomes false. Otherwise you'd have an infinite loop!

Do This:

Starter Code: The starter code runs an infinite loop. Run the code to see the problem in action. Remember to hit the reset button to stop the infinite loop. Add code inside the while loop which will update the variable num so that the condition will eventually become false. * TIP: you can use the debugging tools if you think they would be helpful.

Student Instructions

Printing Before the Loop Starts

Sometimes our code will be doing the right thing but we won't be able to tell because of the way we are printing values. We need to make sure we print all the values we are interested in.

This program should write all the values of num to the screen as it runs; however it misses one - the first one generated.

Do This:

• Run the program a few times and notice that sometimes it just prints "Done." and nothing else, even though a number was generated. The first value of num never gets displayed.
• Add a write statement before the loop to print the first number.
• Hint: Look at the two times num is assigned a value. Which one isn't being displayed?

Student Instructions

Starting Condition

We have seen that loops can run infinitely. On the last level we saw that there is also the chance that the loop never runs at all! If the condition of the while loop starts out false then the loop will never run.

We fixed this problem in the last exercise by displaying the value of num in two places: before the loop and in the loop. Duplicating code is generally a bad strategy, so the question is: can we be a little clever and get into the loop without missing any values? The answer is yes.

The solution is to initialize the values used in our boolean expression so that we are certain it will evaluate to true the first time the loop checks it. For example, if your loop condition is: while (num != 6) you could initialize num to anything other than 6 and you'd know that you get into the loop.

If you use this technique though... 1. You need to make sure you set the value of num right away inside the loop. 2. You probably want to use a nonsense value like -1, so that if you ever see that displayed it will be obvious something is wrong and be easier to debug.

Do This:

• Starter code is provided which creates a while loop that never runs.
• Run the program once to see that the loop is never entered.
• Fix the problem by changing the initial value of num to a nonsense value such as -1.

Student Instructions

Printing After Setting Value

We started trying to remove the duplicate code we had on the last level by initializing a variable to a nonsense, or "dummy," value that would still ensure we entered the loop.

In the code provided, not every number is going to display. However, this time we want to try not to add code to fix the problem, since duplicate code is inefficient.

Do This:

• Starter Code: The code is completely functional except that it does not print one of the numbers it's supposed to. In addition we don't want it to print the dummy variable of -1. Hint: What should be the last number that prints every time this program runs?

• Run the program to see the behavior.

• Fix the code so that it prints all the values of num. Hint: You don't need to add any code. Just switch the order of the code you have now!

Student Instructions

Boolean Operators in while Loops

We can create compound boolean expressions to control our while loops just like our if statements. Let's try using boolean operators in our while loop condition.

Do This:

• Right now this code rolls two dice as long as either one of them is less than 3. Modify the condition so that it keeps rolling as long as both are less than 3.

• HINT: To say that both dice are less than 3 the boolean expression must say: if die1 less-than 3 AND die2 less-than 3...

Student Instructions

Expressing Stopping Conditions: "Until Loops"

It is often more natural to think about looping in terms of when the loop should end rather than when it should continue. For example you might say "keep going down the road until you see the gas station" or "keep calling until you get through to someone." You might think of these as "until loops" rather than "while loops," since we want the loop to continue until a condition is true rather than while a condition is true.

There is no "until loop" in JavaScript but it is actually quite easy to translate "until loops" into while loops so that you can use them in programs. An "until loop" runs until a condition is true, as opposed to a while loop which runs as long as a condition is true. That means an until loop is the logical inverse of a while loop - it runs as long as the condition is false. The table below shows how you can use the NOT ( ! ) operator to translate stopping conditions into while loop conditions.

Note how we can use the NOT operation to find the logical inverse (or opposite) of the condition from our "until loop" to create a while loop. Let's do a little practice of that now.

Do This:

Starter code is provided that repeatedly rolls two dice and writes their values to the screen. Careful: before you edit this code it creates an infinite loop.

• Use the technique above to modify this code so that the loop stops when both dice are 5 or greater.
• Try it out and experiment. You should exit the loop the first time both dice have values greater than or equal to 5 displayed.

Student Instructions

Writing a Loop From English

Alright it’s your turn. Can you translate the English into code? This problem also involves an "until loop" problem.

Do This:

Take this statement in English and translate it into code:

“Write a program that simulates the rolling of two dice. Keep rolling the dice UNTIL the sum of the dice is either a 7 OR an 11." Your program should display the results of each roll.

NOTE: this one is a little tricky. Hint: In English we sometimes say "or" when in cold hard logic we mean "and".

Here is a sample output:

Student Instructions

Debugging: Complex Logic

In this challenge you need to find and fix a bug in a program that simulates rolling one die.

The given code accidentally loops infinitely, so something must be wrong with the condition. Can you figure out how to fix it?

Do This:

• Fix the condition so that it keeps rolling the die as long as the value is not a 2 or a 3.

• Hint: Think about other ways you can express this idea in English.

Student Instructions

Repeat Specific Number of Times

Instead of writing code that makes the loop run a random number of times, we can control the while loop by changing the variable used in the boolean expression differently. Let’s try just printing a string 5 times.

Do This:

• Starter Code: Right now the code prints a string "Hi" twice.
• Change the code so that it prints the string "Hi" 5 times.
• Notice how count is being re-assigned each time through the loop.

Student Instructions

++ Operator

As programmers we are always looking for more concise ways to write code. It is so common to add 1 to a variable such as in count = count + 1 that there is actually a shorthand for it.

Introducing the ++ Operator

You can write count++ to add 1 to count. count++ does the exact same thing as count = count + 1!

In fact the computer turns count++ into count = count + 1 behind the scenes - it really is just a convenient shorthand.

Note: This is more of a programmer style choice so if you want to write your code using count = count + 1 instead there is nothing wrong with that!

Do This:

• Change the code to use count++ instead of count = count + 1. (You'll need to be in text mode to do this.)

Misconception Alert: You don't need to write count = count++ - the computer is doing the assignment for you.

Student Instructions

++ Has a Friend! Introducing --

As you may have guessed, just as we can write count = count + 1 as count++ we can also write count = count - 1 as count--.

Let’s write a program that counts down from 10 down to 1.

Do This:

• Starter Code: The current program counts up from 1 to 10.

• Change the code to use count-- to count down from 10 to 1. You will need to:

  • Change the looping condition.
  • Change count++ to count--.
  • Change the initial value assigned to count.

Student Instructions

Introducing += and -= Operators

Sometimes you want to add or subtract something other than 1 from the current value of a variable. If you wanted to add or subtract 3 for example, such as: count = count + 3 or count = count - 3, ++ and -- wouldn’t help.

It turns out this is pretty common as well so there is actually a shorthand version of count = count + 3.

Introducing += and -=!

We can use the += or -= operator to add or subtract any value we want to the current value of a variable.

So, the shorthand versions of count = count + 3 and count = count - 3 would be: * count += 3 * count -= 3

Notice that these 3 statements: count = count + 1, count++, and count += 1 all do exactly the same thing!

Which one you use as a programmer is your choice, and in the future you can use either version, but try out the new operator here.

Do This:

• Change the code to use count += 3 instead of count = count + 3 so the program will still count up by 3. (You'll need to be in text mode to do this.)

(You'll get to try out -= on the next level.)

Student Instructions

Try Out the -= Operator

The -= operator works almost identically to +=, but instead it subtracts the value provided from the variable. Let's use this operator to create a loop that counts down from 30 by 3's.

Do This:

• Change the code to use -= to count from down from 30 to 0 by 3's.

Student Instructions

Defensive Loop Conditions

Take a look at the starting code. Instead of counting by 3's we had decided to count by 4's.

But this will run us into a problem. Can you see why?

We wanted to stop counting at 30, but when you count by 4 you will actually never hit 30. It would go... 24, 28, 32, 36... What we really want to do is stop when the number is greater than 30. This is an important defensive programming strategy. Make the condition catch more cases than you think you need so that if for some reason something does not go exactly as you planned it will hit the stop condition and not go infinitely.

Do This:

• Change the loop condition to prevent the infinite loop and stop counting once the count is past 30.

Student Instructions

Using an if Statement In a Loop

A common thing to do is to use variables to keep track of some sort of count. When used in a loop we count things very quickly.

Scenario: If you roll a pair of dice, rolling a 12 (two sixes) is rare. How rare? If you were to roll a pair of dice 1,000 times, on average, how many times would it come up as 12?

To figure this out, we could write code to run an experiment. It would go something like this: Make a loop that simulates rolling a pair of dice 1,000 times. Inside the loop, add an if statement: if die1 + die2 == 12, then add 1 to a counter. * After the loop, display the result.

Do This:

The starter code sets up the whole experiment for you, except it doesn't count the number of 12's rolled - that's your job.

• Run the code to see what the experiment does.

• Add an if statement inside the loop to check if the sum of the dice is equal to 12, and add 1 to twelveCount.

• Once the loop has completed, display the number of times the sum was 12.

Note: If you remove (or comment out) the console.log statement that displays every roll of the dice, the experiment will speed up A LOT! You could do tens of thousands of dice rolls in a matter of seconds.

Student Instructions