>>
Site Map
>>
Forums
>>
JavaScript_HTML
Forum module - topics in forum:
JavaScript_HTML - tìm hiểu và trao đỏi các mã java để làm trang web bạn sinh động hơn, các thủ thuật code html css
Javascript While Loop - For loop = vòng lặp
avascript While Loop
The while loop is an advanced programming technique that allows you to do something over and over while a conditional statement is true. Although the general uses of the while loop are usually a bit complex, this lesson will teach you the basics of how to create a while loop in Javascript.
Javascript While Loop Explained
There are two key parts to a Javascript while loop:
1. The conditional statement which must be True for the while loop's code to be executed.
2. The while loop's code that is contained in curly braces "{ and }" will be executed if the condition is True.
When a while loop begins the Javascript interpreter checks the condition statement is true. If it is the code between the curly braces is executed. At the end of the code segment "}" the while loop loops back to the condition statement and begins again.
If the condition statement is always True then you will never exit the while loop, so be very careful when using while loops!
Creating a Simple While Loop
This example shows how to create a basic while loop that will execute a document.write 10 times and then exit the loop statement.
Javascript Code:
| Code: : |
<script type="text/javascript">
<!--
var myCounter = 0;
var linebreak = "<br />";
document.write("While loop is beginning");
document.write(linebreak);
while(myCounter < 10){
document.write("myCounter = " + myCounter);
document.write(linebreak);
myCounter++;
}
document.write("While loop is finished!");
</script> |
Display:
| Quote: : |
While loop is beginning
myCounter = 0
myCounter = 1
myCounter = 2
myCounter = 3
myCounter = 4
myCounter = 5
myCounter = 6
myCounter = 7
myCounter = 8
myCounter = 9
While loop is finished! |
Our variable myCounter started off at 0, which is less than 10, so our while loop executed its code. The value 0 was printed to the browser and then myCounter was incremented by 1 and the while loop started over again.
1 was less than 10 so the while loop's code was executed...and the process repeats itself a few more times until...
myCounter was 10 which was not less than 10 so the while loop's code did not execute. You can see this in the Display: because the last value to be printed out was 9.
Note: Advanced programmers may recognize that a for loop would be a better solution for this example, but we hope you can ignore this for our needs to create an easy example!
=======================
Javascript For Loop
The Javascript For Loop resembles the for loop you might have seen in many other programming languages. It is used when you need to do a set of operations many times, with an increment of some kind after each run through the block of code.
If you have read the previous lesson Javascript While Lesson then this should be a cinch.
Javascript For Loop Explained
There are four important aspects of a Javascript for loop:
1. The counter variable is something that is created and usually used only in the for loop to count how many times the for loop has looped.
2. The conditional statement that decides whether the for loop continues executing or not. This check usually includes the counter variable in some way.
3. The counter variable is incremented after every loop in the increment section of the for loop.
4. The code that is executed for each loop through the for loop.
This may seem strange, but 1-3 all occur on the same line of code. This is because the for loop is such a standardized programming practice that the designers felt they might as well save some space and clutter when creating the for loop.
Javascript For Loop Example
This example will show you how to create a simple for loop that prints out the value of our counter until the counter reaches 5. Pay special close attention to the three different items that are on the first line of the for loop code. These are the important for loop parts 1-3 that we talked about earlier.
Javascript Code:
| Code: : |
<script type="text/javascript">
<!--
var linebreak = "<br />";
document.write("For loop code is beginning");
document.write(linebreak);
for(i = 0; i < 5; i++){
document.write("Counter i = " + i);
document.write(linebreak);
}
document.write("For loop code is finished!");
</script> |
Display:
| Quote: : |
For loop code is beginning
Counter i = 0
Counter i = 1
Counter i = 2
Counter i = 3
Counter i = 4
For loop code is finished! |
The counter variable name i may seem a little strange, but it has been used for years now that you might as well get used to it as the default for loop counter. Other common variable names are j, k, x and y
So in this example our counter was initially set to 0 with "i = 0;" and then the conditional statement "i < 5;" was executed. Our counter was indeed smaller than 5 and so the for loop's code was executed.
After the loop's code had been executed then the increment "i++" happens, making the counter i equal to 1. The for loop then checked that i was less than 5, which it was, resulting in the loop's code being executed again.
This looping happened a couple more times until i was equal to 5, which is not less than 5 and the for loop stopped executing.
For loops may seem very confusing at first, but let me assure you, they are quite useful and should be studied thoroughly by anyone who wishes to become a intermediate programmer.
