|
Loops have nothing to do with aeroplanes or commuting in Chicago, it's a very useful tool when we need to repeat some code over and over again.
Here is an example snippet.
for(i=0;i<10;i++)
What is going on here?
The first thing that happens is that a variable ("i") is created and the value is set to "0".
We also instruct the loop to continue "looping" as long as the variable "i" is less than 10 ("<" means "less than")
The last thing we need to do is to add 1 to the variable "i" (or else the loop will continue for ever). "++" is very useful and can be used any time you want to add 1 to the existing value of a variable (the opposite is of course --). We could also write it like this i=i+1, but the "++" is easier (and much cooler!)
It's very important that you place the semi-colons between the different tasks in the loop declaration!
Now let's take a look at a loop in a script (we will not use a function so this code will execute when page loads):
<script type="text/javascript">
<!--
for (i=0;i<10;i++){
alert("The value stored in the variable i right now is: "+i)
}
// -->
</script>
Paste the code in the head section of a page and run the page in a browser.
We will now combine the things we have learned about arrays with what we know about the loop! Here is a more advanced script:
<script type="text/javascript">
<!--
var myArray=new Array("Nate","Dave","Michael")
myArray[3]="Scoobie"
for (i=0;i<4;i++){
alert(myArray[i])
}
// -->
</script>
Let's take this line-by-line...
Line 3: We create an array and assign the first three "slots" in the array values (in this case text strings). This is exactly what you learned in the array tutorial.
Line 4: We add another value in the forth "slot" of the array, the string "Scoobie"
Line 5: We start the loop with the initial value "0" and we tell it to continue working as long as the variable "i" is less than 4. Then we add 1 to the variable "i"
Line 6: Displays an alert box telling us the value stored in the current array "slot ". What "slot" is regarded as the current "slot" depends on the value stored in the variable "i".
Line 7: The ending curly bracket of the loop, the loop will now run again if the variable "i" is less than 4, if the value is 4 the script will continues with the next task (but there is no next task in this script)
Line 3 (the second time): 1 is again added to the variable "i", the value is now 2...
Etc, etc...
The script will display each of the names in a separate alert box. If you want to test the script just paste it in ...correct!...the head section of your page. :-)
If we have 2.000 phone numbers stored in the array it would only take the loop a fraction of a second to find out if a specific number exists in the array or not. This is a very powerful stuff!
The letter "i" is always used as the variable name in loops, it's an old tradition and I have no idea how it started. If you have two loops (maybe nested loops) you use the letter "j" in the next loop and etc, etc
If you want to test your wings you can use what you have learned in these tutorials up to now and do this:
- Make a form with a text field and a link that will trigger your script.
- Create an array that contains 5-6 names.
- Make a loop that will use the user input in the text field and check if that name is stored in the array.
- If the name exists in the array an alert message should tell the user the good news.
This is a pretty difficult task, so don't be upset if you find it too hard. I just thought it would be interesting to combine a lot of the stuff you learned into one single script. You will get more chances further on! :-) Arrays and loops will pop up again and again...
The important thing is that you now know:
- That loops are used to repeat parts of our scripts.
- A variable ("i") is used to keep count of the number of loops that has been executed.
- "++" is used to add 1 to the existing value in a variable.
- "<" means "less than".
Back to tutorial index <<
|
