Coding 10: Loops

Loops

Coding 10

Using loops is one way to possibly improve your app and earn points in the the Demo Video section of the rubric.

In this lesson, you will…

  • Learn about loops
  • Create an app that you can bring to birthday parties

Key Terms

  • Loops - a way to tell a computer to do something (a block of code) many times in a row
  • For Loop -  repeats a block of code a set number of times
  • For Each Loop - repeats once for each item in a list
  • While Loop - repeats a block of code until a condition is no longer true

Loops

In this lesson, you’ll learn about loops. Loops are a way to tell a computer to do something many times in a row. Computers are really good at doing things over and over again, and doing them fast.

Imagine you were asked to write your name down 100 times in a row. This might take you a long time, and you might make a few mistakes along the way. This is a perfect task for a computer, which would be able to do it really fast and without any mistakes. You can take advantage of this by using loops. A loop is a block of code that will repeat over and over again.

There are two types of loops, “while loops” and “for loops”. While loops will repeat while a condition is true, and for loops will repeat a certain number of times. You’ll also learn about for each loops which are a type of for loop that repeats once for each item in a list. Let’s go through each of them in more detail.

For loops

For loops will repeat a block of code a set number of times. The reason they are called for loops is that you can tell your app how many times you want it to repeat to the code for. You can think about for loops as telling your app, “repeat this, for 17 times” or “repeat this, for 5 times”.

For loops use a variable to count how many times the code has been repeated, called a counter. You control how many times the loop repeats by setting where the counter starts and ends. You also set how much the counter goes up by each time the code repeats. In most scenarios, you’ll want the counter to increase by 1 each time the loop repeats.

In App Inventor and Thunkable, for loops look like this:

App Inventor

for loop block

Thunkable

The part that says number is the counter. For now, the counter is named number, but you can change that. Number will start at 1 and will stop when it is equal to 5. Each time the code inside the loop repeats, number increases by 1. So this loop will repeat the code inside of it 5 times. Right now, this loop doesn’t do anything, since the do part is empty. Let’s walk through an example.

App Inventor

Thunkable

Thunkable also has a repeat loop, which works the same way, but without the counter. It can be used in place of the count with number block when you don’t need to keep track of number, as in the example above.

We haven’t changed anything about the number variable, but we have added some code to the do part of the loop. Each time this loop runs, the app will alert its user “hello”, so the user will get alerted 5 times. Here is how the app will run through this loop:

This loop would be useful if you wanted to alerts the user “hello” 5 times. This may not seem that useful since it isn’t that hard to put 5 notifier blocks in a row saying “hello”. But, what if you wanted to alert the user “hello” 100 times? This would be much easier to do with a loop than by putting 100 blocks in a row.

Another way that for loops can be useful is by using the counter variable in your code. Each time the loop runs the counter variable will have a different value and this can be really useful. Here’s an example.

App Inventor

Thunkable

In this for loop we are using the variable number in the code by joining it to the word “hello”. Number increases by 1 each time, so the app will display different phrases each time it runs. Here is how the app will run through this loop now:

For Each Loops

Another useful type of for loop that you can use in App Inventor and Thunkable is this one:

App Inventor

Thunkable

Here, the counter variable is called item and this loop is already set to repeat for the number of items in a list. These loops are very useful whenever you need to do something with a list. Let’s say you had a list of numbers and you wanted to add up every number inside the list and store it in a variable called sum.  Here’s how you would do this with a for each loop.

App Inventor

Thunkable

While Loops

While loops are loops that will continue to run while a condition is true. The reason they are called while loops because the code will repeat while a condition is still true. You can think of while loops as telling your app “while this happens, repeat this” or “while this hasn’t changed, repeat this”.

Here are two examples to think about:

You’re having a party and you want the music to keep playing until all your guests leave. You could describe your party as this loop:

  • While (guests at party > 0)
  • do:  keep playing music

What if you also want your music to stop playing when it gets later than midnight? You can program while loops to end the loop based on multiple conditions using logic. Now you can describe your party as this loop.

  • While (guests at party > 0) and (time < midnight)
  • do: keep playing music

In this case, the music would stop as soon as everyone left the party or if it is past midnight.

To use a while loop you need to set up a condition that starts out as true. If your condition starts out as false, then your loop will never run. The loop will check the condition each time before it repeats to make sure the condition is still true.

While Loop Diagram

Here’s what while loops look like in App Inventor and Thunkable:

App Inventor

while loop block

Thunkable

With while loops it is possible to run into errors! If you choose a condition that will never be false, then your loop will never end. This is called an infinite loop. Here’s an example:

App Inventor

Thunkable

Since 1 will always be equal to 1, this condition can never be false. When we ran this code in App Inventor, our phone froze and we couldn’t do anything. You may also get a message saying that the App Inventor Companion App has stopped working. When you’re coding you’ll break things all the time. That’s part of the learning process! Restart your companion app and try again.

Mobile apps are event-driven - that is, the code runs based on events, like button clicks and finger swipes. That means that loops are not very commonly used. The most likely loop block you will use will be the for each block, and that will be only if you are using lists in your app.

Activity: Multiplication tables

Remember doing your multiplication tables in school? Wouldn’t it be nice to have an app that does it for you? In this app, the user will enter a number, and the app will display that number multiplied by the numbers 1-12. For example:

You’ll need to use a for loop:

App Inventor

Thunkable

The code is started for you, but you need to fill in the missing blocks. This for loop counts from 1 to 12 for the multiplication table. 

Result is the label that will display the multiplication table. So you’ll use a join block to join what already is in Result.Text with the next line of the table. The “\n”  is called a line feed and it will drop the text to the next line. For example, the code blocks:

Joins what is in Result.Text, “1 x 4 = 4” with a line feed and “2 x 4 = 8” so Result.Text will now look like this:

1 X 4 = 4

2 X 4 = 8

Using the join block in the loop will continue to add more to Result.Text each time it iterates through the loop, which means each time it executes the code within the loop. Eventually, Result.Text will contain the entire multiplication table for that number! You may not need all the extra slots in the join block. You can just remove any extras by clicking on the blue gear icon and dragging them out.

Reflection

In this lesson, you learned about for loops, while loops, and for each loops. You also created an app that used a for loop in it!

  • How do you think you might use loops in your final app?
  • Does this give you any ideas for how you might build some of your features?

Additional Resources: Hangman Tutorial

App Inventor: Hangman Tutorial (Advanced)

Do you want some more practice using loops? You can try this tutorial by Technovation alumni Jennifer John.

App Inventor - Snow Globe Tutorial (Advanced)

Snow Globe Tutorial

This tutorial uses loops and the Any Component feature of App Inventor to generalize behavior for a group of components. It’s a handy feature to use if you have many of the same type of component. In this case, there are several Ball components that fall in the sky when the phone is shaken. Rather than write code for every single Ball, you put the Ball components in a list and use a loop for one set of code.