Web Programming Primer

Looping is quite important and is used for repetitive tasks. Loops do something over and over until you tell it to stop or until a certain task is completed. There are a couple different types of loops that we will discuss. Each type of loop is good for its own unique purposes.

The "for loop" is most useful when you know when you want to stop the loop. To set up a for loop, type "for" followed by a set of parenthesis and then a set of curly brackets. Inside the parenthesis we need to declare a variable, set how many times we want the loop to run, and then increment the variable (to keep the loop rolling).

It looks something like this:


This is a good time for us to discuss incrementing too. In the image above, notice that we declare a new variable by typing "i = 0". This is the first part of the loop. It knows that you are declaring a variable first, so you don't have to write "var i = 0;". After each part, you must insert a semi-colon, as done in the image above. This allows the loop to know you are moving on to the next part. The second part, as mentioned before, tells the loop how many times it will run. We set it to "i < 10;" so, as long as the variable i is less than 10, the loop will keep repeating. The last part in the parenthesis is the increment. Each time the loop completes, i will be increased by one, this is what the "++" does in JavaScript, it adds one to the variable you insert before it. So, each time the loop the loop runs its code, it will increase i by 1, and then when i reaches 10, the loop will stop because i will no longer be less than 10. I declared a variable outside the loop named count and then inside the loop incremented it by 1. Since the loop will repeat 10 times, count will have 1 added to it 10 times, so count will have a value of 10 when the loop stops. Try this out for yourself and mess with it to get a better understanding.

A while loop is most beneficial when the number of times you need the loop to repeat is undetermined. Unlike the for loop, to use a while loop, you need to depend on an outside variable. This will make more sense in a second. To set up a while loop, type "while," followed by a set of parenthesis and a set of curly brackets. Inside the parenthesis, you will type a statement with a condition. This will involve your outside variable as mentioned before. So, let's assume we already have a variable that has been declared before the loop, named x. In the parenthesis, you may give a condition such as, "x > 10." So, as long as x is less than 10, the loop will continue to repeat. Inside of the curly brackets, type your code that you wish to loop. Also, you must include a change of the variable in the curly brackets, or else the loop will continue forever (which will crash your browser). Something like: x ++; would be perfect.

Here is an example of a while loop:





You may be confused from the example above, but I will explain. First of all, I declared two variables before the loop. Count was made to count the number of times the loop was repeated. X was created to be a part of the while conditioning. It was initially set to 0 and the loop will repeat as long as x does not equal 10. That is what "!=" means, does NOT equal. It can be pretty useful. And then, in the curly brackets, count and x were both incremented by 1. So, the loop repeats 10 times and outputs a count of "10" on the page.