Loops are what allow us to do things multiple times without having to duplicate code. We use relational and logical operators here too to determine if the loop should continue or not. Loops are essential because, without them, we would have to write A LOT of code. Trust me; you don’t want that in your life.
Let’s check out what kinds of loops we have.
For loops are pretty standard in most programming languages. They have a beginning, evaluation, and then an increment (or decrement - we won’t worry about that right now).
They work something like this:
<html>
<head>
<script>
// I am defining my method here
function theForLoop()
{
for(var i = 0; i < 5; i++)
{
document.write("I love JavaScript!<br>");
}
}
</script>
</head>
<body>
<script>
theForLoop(); // remember I am calling my method here
</script>
</body>
</html>
Did you try it out? How many times did it print? There’s a couple of things to notice. One, I declared my variable i in the for loop. Its scope is in the for loop. You cannot access i outside the block. That is called control level scope. Also, notice how it initializes to zero? You do not have to do that, but it is conventional. Next, look at the i < 5 part. That is our evaluation section. So, it always to checks to see if i is less than 5. If it is, then it performs the code inside the block and then increments the variable i by one, which is the i++ part. So, the order is always:
So, the for loop is pretty straightforward and is useful when you know many times you need to repeat. The while loop is a little different.
The while loop is different from the for loop in that all that is present is the evaluation part. There is no initialization or increment or decrement. While loops are handy when you need to keep executing until something is false.
The example might look like this:
<html>
<head>
<script>
// I am defining my method here
function theWhileLoop(letsKeepLooping)
{
while(letsKeepLooping)
{
document.write("I love JavaScript!<br>");
letsKeepLooping = false;
}
}
</script>
</head>
<body>
<script>
theWhileLoop(true); // remember I am calling my method here
</script>
</body>
</html>
What happens? So, with while loops, the key is knowing that they can continue forever (try that for fun by the way), or you have to set it to be false at some point. We could do this too:
<html>
<head>
<script>
// I am defining my method here
function theWhileLoop(letsKeepLooping)
{
var count = 0;
while(letsKeepLooping)
{
document.write("I love JavaScript!<br>");
count++;
if(count > 5)
{
letsKeepLooping = false;
}
}
}
</script>
</head>
<body>
<script>
theWhileLoop(true); // remember I am calling my method here
</script>
</body>
</html>
By the way, how many times did it print out this time? Was it what you were expecting? Why? What would you have to do to make it work like the first example?
The last looping structure we will examine is the do-while.
This do-while is a special looping structure that always executes the block at least one time. Now, I hope you are asking yourself, why would I want it to do that? Well, I will give you a simple example. Think about playing a game or when you open a piece of software. What is the first thing you see? Usually, the menu of options A do-while loop often displays menu systems. You don’t want it to a while loop for a menu because you would need to ask the user if they want to open the menu before it opens the menu. You want it to open the menu at least once and then let the user decide what to do. Here is an example:
<html>
<head>
<script>
// I am defining my method here
function theDoWhileLoop()
{
shouldWeContinue = false;
do
{
document.write("<ol>");
document.write("<li>New Game</li>");
document.write("<li>Load Game</li>");
document.write("<li>Settings</li>");
document.write("<li>Quit</li>");
document.write("</ol>");
}while(shouldWeContinue);
}
</script>
</head>
<body>
<script>
theDoWhileLoop(); // remember I am calling my method here
</script>
</body>
</html>
Notice how the variable shouldWeContinue false, the block inside of the do still executes at least once. If you were to set it to true, you should have a lot text. Try it :) Just kidding.. don’t.
Now that you have seen the loops let’s take a look at some of the built-in math functions. These will help you perform actions and not have to re-invent the wheel.
While you work on this chapter, you should use the following interactive JS console to test.