There are many times when programmers want to repeat an action or a process without having to rewrite it over and over. Loops use counters or conditions for determining how many times to do something, automating what would otherwise be tedious tasks to code.
In this twentieth lab, we'll take a closer look at JavaScript's loops. As you explore, review your answers from the To consider: section above. Have you changed your mind about any of them?
Let's start with writing a for loop that follows the conventions of the WFI or World Famous Interation from the chapter. Here's the skeleton of a WFI we can use to get started:
for (j = 0; j < n; j++) {
}
This tells us that the initial condition is with the counter j set to zero, that this loop will iterate n times, and that the counter j will be incremented by one each time through the loop.
To make a testing ground for our loops, let's reuse a file we have already created that has a good skeleton for adding scripts. Open the lab17start.txt file, and save it as myloops.html. Edit the file to replace the <title> and <h1> tags that mention My Astrologer with a title and heading of your choice.
The first WFI loop we'll create is one that tells the world how much we like unicorns (or whatever else we like a lot). We want to show a message that says something like, "I like unicorns very very very much!" A natural place to use a loop, and the WFI loop will let us repeat the word "very" exactly as many times as we would like. Here's what the code looks like:
var inittext, closetext, msg = "";
var j;
inittext = "I like unicorns ";
closetext = "much!";
for (j = 0; j < 3; j++) {
inittext = inittext + "very ";
}
msg = inittext + closetext;
alert(msg);
Put this code in between the <script> tags in myloops.html, save the file, and open it in your browser. It the result what you expected? Now change the file to send a message about what you like. Which value or values are you editing? What value or values would you change to increase or decrease the number of times the word "very" appears in the message?
Now let's change that loop so that in between each of the "very"s there are five exclamation points, because we're really serious about how much we like unicorns. Our new message should say, "I like unicorns very!!!!! very!!!!! very!!!!! much!" Because we're practicing loops, we'll use a nested loop to add those exlamation points, and adjust the existing code to get the correct white spaces where they need to be. Here's what the code looks like:
var inittext, closetext, msg = "";
var j, i;
inittext = "I like unicorns ";
closetext = "much!";
for (j = 0; j < 3; j++) {
inittext = inittext + "very ";
for (i=0; i < 5; i++){
inittext = inittext + "!";
}
inittext = inittext +" ";
}
msg = inittext + closetext;
alert(msg);
Put this code in between the <script> tags in myloops.html, save the file, and open it in your browser. It the result what you expected? Pay close attention to where the value for inittext is changing. Where is it changing inside a loop? Where is it changing outside a loop?
Now I'd like to list a number of things I like in the same message. For that I'm going to use an array. I want to create an array of four things I like very much: unicorns, robots, peanut butter, and loops. Since this array is so small, I can create it manually using copy and paste:
var likes = new Array(4);
likes[0] = "unicorns";
likes[1] = "robots";
likes[2] = "peanut butter";
likes[3] = "loops";
I also need to make some changes to my loops. I need to add one that's outside of my existing loops that iterates through each element of this array, then iterates through the other loops. Based on what you already know about loops and arrays, what do you think that additional loop will look like? Try something out, add it to your file, save it, and open it in your browser. How does it look?
Now compare what you tried to the code you see here (you can also get this code at lab20script.txt):
var inittext, closetext, msg = "";
var i, j, k;
var likes = new Array(4);
likes[0] = "unicorns";
likes[1] = "robots";
likes[2] = "peanut butter";
likes[3] = "loops";
inittext = "I like ";
closetext = "much!";
for (k=0; k < 4; k++) {
inittext = inittext + likes[k] + " ";
}
for (j=0; j < 3; j++){
inittext = inittext + "very ";
for (i=0; i < 5; i++){
inittext = inittext + "!";
}
inittext = inittext +" ";
}
msg = inittext + closetext;
alert(msg);
How did you do? Does your message look something like this?
Not the most gramatically correct sentence ever, but you get the idea. What do you think you would need to add to the loops, and where, to get the result to say "I like robots, unicorns, peanut butter, and loops very!!!!! very!!!!! very!!!!! much"? Can you think of more than one way to do it?
Time for a quick look at the for loop's sibling, the while loop. We know that for loops iterate through the block of code inside them a specific number of times. While loops, on the other hand, iterate through the code inside them while a specific condition is true. Here's a skeleton of a while loop:
while (i < n) {
i++;
}
When would you use this type of loop instead of the for loop? Can you rewrite the loops in myloops.html to use while loops? It may be a little trickier than you think. Hint: one of the count variables will have to be explicitly reset to zero after you exit its loop. You can check your work against the lab20scriptadvanced.txt file.
Loops and arrays are powerful programming structures. Now that you have tried several types, you have a good foundation for the building a much more complicated program. In Chapter 21, you'll use all the techniques and structures you've learned so far to animate an interactive page. The Smooth Motion program will be a challenge, but you'll learn how to turn a large and complex programming problem like that one into a series of simpler, more manageable steps using the decomposition principle. Ready to get started?