SHARE

JavaScript Primers #24

Written By

Jan 4, 2005

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

On To JavaScript Primer #25

JavaScript Primers #24

We’ll now count from one to five

Joe Burns

Recommended for you...

Company

Categories