Course E - Loops 1 - Loops and Animations

This lesson introduces a basic example of looping and iteration.

  • Computer science
  • looping
Print lesson
  • Edades 9+
  • 65+ minutos
  • JavaScript Blocks

Introduction

This lesson introduces a basic example of looping and iteration. It shows a for loop. Loops allow us to repeat but are different from functions. Loops repeat code over and over in one specific place but functions are used to spread repeating code throughout applications.

Consider using the real life example of brushing your teeth to illustrate the difference between loops and functions. Most people brush after meals so around 3 times daily. When we go to brush after each meal, this would be a function. There are activities that are in between. We might brush in the morning, go bike riding, play tennis, later brush after lunch, and so on... The function is spread out.

The act of brushing, moving the brush in our mouth back and forth would be a loop. We do it for 4-8 minutes continuously and then exit the loop.

This first lesson in loops aims to get students understanding how the loop moves and how we monitor the movement. Also, we experiment with different things we might put inside loops.

Our micro:bit course lessons are tailored to apply knowledge obtained from the Code.org CS Fundamentals. Before students begin these Course Lessons, we encourage students to first complete all CS Fundamentals as a prerequisite. Students should be familiar with loops from Code.org CS Fundamentals.

Background

Students are highly encouraged to first complete the following:

The teacher is highly encouraged to first complete the following:

Teacher Guide

Open

Activity

What you'll need

  • 1 - micro:bit
  • 1 - USB cable
  • 1 - AAA battery pack (optional)
  • 2 - AAA batteries (optional)

Documentation

basic.forever(() => {})

forever

Keep running part of a program in the background.


for(let i = 0; i < 5; ++i) {
  basic.showNumber(i)
}
            

for

Run part of the program the number of times you say.


basic.showLeds(`
    . . . . .
    . . . . .
    . . # . .
    . . . . .
    . . . . .
    `)
            

showLeds

Shows a picture on the LED screen.


basic.showString("Hello!")
            

showString

Show a string on the LED screen


basic.showNumber(0)
            

showNumber

Show a number on the LED screen


let item = 0
item = 0
            

setItem

Use an equals sign to make a variable store the number or string you say.

3 steps

Guided Practice

We will make instructions or code online for the micro:bit. Next, go to: makecode.microbit.org


let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
PassThroughLoop = 0
Number_of_Times_Through_Loop = 4
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
        

This code shows 0, 1, 2, 3, 4. It loops like this forever.

We have two variables or numbers we save.

Number_of_Times_Through_Loop is set to 4. We will go through our loop 5 times, though, because we start at 0. This is confusing but many things in programming work with a starting point of zero so it is important to learn this.

Our second important number is PassThroughLoop. PassThroughLoop tells us the current time through the loop. PassThroughLoop starts at 0 and each time through the for loop, it increases by 1.

Follow the link to the starter code. There are extra blocks at the bottom to help you get started.

The starter code is available here.

NOTE: The unused blocks at the bottom of the code are meant to be used in the challenges.

Challenges

Starter code is available here.

Challenge 1

How could we count up to number seven instead?

View code

let Number_of_Times_Through_Loop = 0
Number_of_Times_Through_Loop = 7
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
          

The finished code is available here

Challenge 2

What about counting up to number nine?

View code

let Number_of_Times_Through_Loop = 0
Number_of_Times_Through_Loop = 9
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
          

The finished code is available here

Challenge 3

Can you count from 0 to 3 and then show a heart for 3 seconds? For this you will need to add your own for loop. Then use one of the code blocks shown at the bottom of our example.

View code

let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
Number_of_Times_Through_Loop = 3
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showIcon(IconNames.Heart)
    }
})
          

The finished code is available here

Challenge 4

Now, let's count from 0 to 2, show a heart for 4 seconds but this time it blinks, and finally show the word "Go" 3 times.(Hint: To blink you need to clear the screen. Also, all blocks will be used for this challenge.)

View code

let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
Number_of_Times_Through_Loop = 2
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= 4; PassThroughLoop++) {
        basic.showIcon(IconNames.Heart)
        basic.showLeds(`
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            `)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= 2; PassThroughLoop++) {
        basic.showString("Go")
    }
})
          

The finished code is available here

Independent Practice

Create your own micro:bit animation using at least three loops to display something interesting. Be prepared to tell a story about the three things you display.

Starting code can be found here.

Quiz

Question 1

What is a "for loop"?

Show answer

In general, a for loop refers to code that repeats for a fixed number of times.

Question 2

Describe what is happening in the code below.


let index = 0
index = 0
basic.forever(() => {
    for (let index = 0; index <= 4; index++) {
        basic.showNumber(index)
    }
})
        
Show answer

We create a for loop where 0 is the loop's starting value, i is the index variable, and 4 is the ending value. The index variable i starts at 0 and increases by 1 each time through the loop. The loop ends when i = 4.

Question 3

Describe the code below.


let index = 0
index = 0
basic.forever(() => {
    for (let index = 0; index <= 6; index++) {
        basic.showNumber(index)
    }
})
        
Show answer

We create a for loop where 0 is the loop's starting value, i is the index variable, and 6 is the ending value. The index variable i starts at 0 and increases by 1 each time through the loop. The loop ends when i = 6.

Selecting this opens external content from our support system, which adheres to their privacy policy.