Teaching guide: Intro to JS - Looping

What the student will learn

• How to use loops to repeat code, changing a value in the code sequentially each time (like to draw a row or column of shapes).
• The syntax for a while loop and a for loop.
• How to nest loops inside each other, a useful technique for changing two dimensions of values (like to draw a grid of shapes).

The student will be able to write code like:

Where students struggle

• Students sometimes forget that they actually have to use the loop counter variable in their shape commands - otherwise their program will just draw a bunch of shapes on top of each other.
• Students may wonder when they should use a while loop versus a for loop. A while loop is the most general kind of loop, a for loop is a more specific syntax that’s great for iterating through a sequence of numbers. For most drawings and animations, students will want to use a for loop.
• Students often forget all the parts of the for loop header. They can remember it by checking out the documentation example. Remind them that they don’t have to memorize programming syntax at first, as they will often have documentation - the important thing is to practice using the syntax and to understand it.
• Students may write loops with the classic "off by one" error. That’s when their condition isn’t quite right, because they’re stopping one iteration too early or too late. Encourage them to think carefully about their condition, and what the values will be in the final iteration of code that will be executed.

Additional materials: Unplugged activities

Additional materials: Discussion questions

• Look back at previous programs your students have made. Find ones with rows/columns of shapes, and ask students to point out where they could use loops. Perhaps if they have time, they can upgrade them.
• Look around the room. If you were drawing the room, where would you use loops?

Additional materials: Trivia questions