Loops

Notes from April 15, 2005 class

The icky way:

<script language="JavaScript" type="text/javascript">

document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");
document.write("All this typing gets tiring after a while. <br />");

</script>

The for loop

Here's the driving your young child to the ocean loop.

for for
open parentheses (
this variable, which starts with this value countEach=1
semicolon ;
Check to see if the variable meets this condition countEach<11
semicolon ;
Then change the variable like this countEach+=1
close parentheses )
new line and opening curly bracket {
whatever code you want document.write("Are we there yet? <br /> ");
closing curly bracket }
All done! Congratulations!  

<html>
<body>
<script language="JavaScript" type="text/javascript">

for (countEach=1; counteach<11; countEach+=1)
{
  document.write("Are we there yet?<br />")
}

</script>
</body>
</html>

Note: instead of countEach+=1, you could get the same effect from countEach++. The ++ only lets you increment by 1, whereas you can change the numeral in the += should you want to increment by 2, 3, 751, etc.

You can use the counter variable to number the lines, too:

<html>
<body>
<script language="JavaScript" type="text/javascript">

for (countEach=1; countEach<11; countEach+=1)
{
  document.write(countEach + ". Are we there yet?<br />")
}

</script>
</body>
</html>

Block nesting

Just like with if/else blocks, you can nest loops as many levels deep as you can stand.

<html>
<body>
<script language="JavaScript" type="text/javascript">

for (countEach=1; countEach<11; countEach+=1)
{
  document.write("Are we there yet?<br />")

for (nestCount=1; nestCount<3; nestCount+=1)
{
  document.write("I gotta go to the bathroom! <br />")
}

}

</script>
</body>
</html>

We can nest different types of blocks inside one another, too, like sticking an if/else statement block inside a loop.

<html>
<body>
<script language="JavaScript" type="text/javascript">

for (countEach=1; countEach<11; countEach+=1)
{


if (countEach==5)
{
document.write("I'm hungry!<br />");
}

  else

{
document.write("Are we there yet?<br />")

for (nestCount=1; nestCount<3; nestCount+=1)
{
  document.write("I gotta go to the bathroom! <br />")
}

}

}

</script>
</body>
</html>

While

<html>
<body>
<script language="JavaScript" type="text/javascript">

var countEach=1;
while (countEach<11)
{
  document.write("Are we there yet?<br />");
  countEach++;
}

</script>
</body>
</html>