Programming with Loops

Learning Goals

• Sequential Execution
• Loops
• Termination Conditons
• Decisions

Slide navigation: Forward with space bar, →, or PgDn. Backwards with ← or PgUp.

Step 1: Two Owls

Continue with https://hourofcode.com/vidcard. Erase any work you may have and instead start with this code:

var owl = graphic("crazyowl.png")
owl.scale = 0.5
owl.x = 100
owl.y = 0

Now put a second owl to the right.

1. Call it owl2
2. Set owl2.x to 200.

Step 2: Four Owls

Now make four owls.

Step 3: Owls with Loop

• Ok, das was tedious. Here is a much better way. Erase everything and copy this code:

  var n = 100
  while (n <= 300)
  {
    var owl = graphic("crazyowl.png")
    owl.scale = 0.5
    owl.x = n
    owl.y = 0
    n = n + 100
  }
  

• How many owls do you get?
• How can you get four owls?
• Five owls?
• Six owls? (Tip: Start earlier.)
• Why is it called while?
• Why is it a “loop”?

Step 4: Many More Owls

• It doesn't seem there is room for more than six owls. Except...if they move closer.
• 
• How can you do that?
• Can they move even closer?
• Caution: Make sure you don't change n = n + 100 to n = n + 0 or n = n, even when editing.
  • Then n never reaches 300
  • And the loop keeps looping and never exits.
  • If a loop never exits, it is called an “infinite loop”
  • An infinite loop can freeze the Vidcode environment.
  • If that happens, highlight and copy your code (Ctrl+C), reload the page (↻ button or Ctrl+R), and paste your code (Ctrl+V). Or reload and copy from the preceding slide.

Step 5: Owls and a Bug

• Owls, owls, owls. That's getting boring. How about a bug instead of an owl at the beginning?



You need a different structure for that:

var n = 100
while (n <= 600)
{
  if (type == 1)
  {
    var bug = graphic("ladybug.png")
    bug.scale = 0.5
    bug.x = n
    bug.y = 0
  }
  else
  {
    var owl = graphic("crazyowl.png")
    owl.scale = 0.5
    owl.x = n
    owl.y = 0
  }
  n = n + 100
}

• Now you get a bug when the variable type is 1. Otherwise an owl.

• It's not going to work. We haven't declared the variable type.

  Add this line to the top:

  var type = 1

• What happens?
• How do you get owls again? Set type to 2, after a bug was painted.

Step 6: Alternate Owls and Bugs

It's getting tricky. Can you place

type = 2

and

type = 1

into the right spots so that the type changes each time: 1 2 1 2 1 2 ...

Step 7: Vertical Owls

Back to just owls. Erase everything. Copy the code from Step 4, but now arrange the owls vertically:

Step 8: Diagonal Owls

Und schräg?

Step 9: Two Rows of Owls

Tip: Copy the code from Step 4 again. Copy it one more time so you get two rows. Unfortunately on top of each other. Fix the y in the second loop.

Step 10: Many Rows of Owls

For four rows, you could copy again and once again. But why copy when you have loops? Here is a loop that makes many rows. Each row is another loop. A loop in a loop!

var m = 0
var n = 0
while (m <= 400)
{
  while (n <= 600)
  {
    var owl = graphic("crazyowl.png")
    owl.scale = 0.5
    owl.x = n
    owl.y = m
    n = n + 100
  }
  n = 0
  m = m + 100
}

Just try it out. And then try bringing the owls closer to each other.

Step 11: Owls and Bugs Checkerboard

This brain teaser is here because I wasn't sure if any of you are programming geniuses. Don't worry if you have no idea.

Can you alternate owls and bugs, like on a checkerboard?

Step 12: Breathe Deeply and Relax

This was a rapid fire introduction into programming with loops. It is nice that one can explore loops so nicely with JavaScript.

What did we learn?

• A loop repeats the steps inside.
• You can control how often a loop executes.
• Programming loops is hard
• You must be able to predict many steps that are executed rapidly
• Think first
• Then write code
• Then run the code
• Did it work? If not, think and try again
• When everything works, does it feel great to be the master of your own world?