JavaScript Primers #24
http://www.htmlgoodies.com/primers/jsp/article.php/3478371/JavaScript-Primers-24.htm (Back to article)
Use these to jump around or read it all
The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment
The Concept
All programming languages have a branching method. The branching method in JavaScript is IF, which we just looked at. All programming languages also have looping techniques. JavaScript has two: While loops and For loops.
In general, you use For loops when you know how many times you want to perform a loop. Use While loops when you are not sure how many times you want to perform a loop. In this example we will look at a For loop.
The Script
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>We'll now count from one to five:</H3>
<SCRIPT type="text/javascript">
for (i=1; i<=5; i=i+1)
{
document.write(i + "<BR>");
}
</SCRIPT>
<
...and we're done
</BODY>
</HTML>
|
The Script's Effect
We'll now count from one to five...and we're done. |
Deconstructing the Script
- First off, look at how short this script is. It's a nice break, don't you think? Here are the guts of the script, without the text we added for looks, for your enjoyment:
<SCRIPT type="text/javascript"> for (i=1; i<=5; i=i+1) { document.write(i + "<BR>"); } </script> - Let's look at the syntax of a For statement, for(i=1; i<=5; i=i+1). There are three parts. Notice they are all separated by semicolons. We'll take each part in order.
- i=1 sets the starting value of the variable used to control the loop. In this case, i is set to 1, but it could be set to 10 or 100. Think of it as simply a starting point for the
loop.
- i > 5 is the condition controlling the number of times the loop will be repeated. In this example, the loop will be repeated until i is greater than 5. See that? We started with one and we'll count to five.
- i=i+1 defines the increment value. In this case, the program will add 1 to i at the bottom of the loop. The program
might also add 2 or 3. We just want it to add 1.
- Finally, the document.write statement prints the number. Notice the <BR> in the document.write statement. That makes it so the numbers each break to the next line. You could just as easily have had the numbers all in a row, separated by commas, by just altering that section of text that appears after each number.
- This JavaScript will be enacted or looped five times. Thus it will produce the numbers 1 through 5. We could have it count to a million just as easily as five, but that would take up too much Web page space.
What You Have Learned
Your Assignment
Write an HTML document that has "Hold on to Your Hat!" surrounded by <H2> tags right at the top of the page. Start with a white background. Then use JavaScript to count to 10000. (Yes, that is 10000. Do not use commas in For statements!)
At that point the background color should change to yellow and text should pop up that reads, "Here comes another color surprise...".
Count to ten grand again. The background color should then change to pink. Good luck.
HINT: You do not have to put any statements between {brackets}.
Here's a possible answer to this assignment
(this will open a new window)
The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment
