JavaScript DHTML/Language Basics/For
Содержание
- 1 A Demonstration of a Nested Loop
- 2 A for Loop Used to Count from 0 to 99
- 3 Check the loop counter
- 4 Control the loop step
- 5 Declare for loop counter
- 6 Drawing a Christmas Tree Using Nested For Loops
- 7 For loop
- 8 For loop for lines
- 9 For loop with alert dialog
- 10 Labeled Statements
- 11 Breaking Out of Nested Labeled Loops
A Demonstration of a Nested Loop
<source lang="html4strict">
<html> <head>
<title>A Demonstration of a Nested Loop</title>
</head><body>
<script type="text/javascript"> </script>
</body> </html>
</source>
A for Loop Used to Count from 0 to 99
<source lang="html4strict">
<html> <head> <title>A for Loop Used to Count from 0 to 99</title> <body>
<script type="text/javascript"> </script>
</body> </html>
</source>
Check the loop counter
<source lang="html4strict">
<html> <head> <title></title> </head> <body> <script type="text/javascript"> for (var i = 1; i < 101; i++) {
if (i == 99) {
alert("The number is " + i);
}
} </script> </body> </html>
</source>
Control the loop step
<source lang="html4strict">
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> for (x = 10; x >= 0; x = x - 2) {
alert(x);
} </script> </head> <body> </body> </html>
</source>
Declare for loop counter
<source lang="html4strict">
<HTML> <HEAD> <SCRIPT language="JavaScript"> for (count=1;count<16;count+=1) {
document.write(count+"
");
} </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
</source>
Drawing a Christmas Tree Using Nested For Loops
<source lang="html4strict">
<HTML> <BODY>
<SCRIPT>
var width=1;
for (i=0; i <= 5 ; i++) {
for (x=0; x<=4; x++) {
for (y=1; y<=width; y++) {
var Number=Math.random()*10;
var Ornament=Math.round(Number);
if (Ornament<=1) {
document.write("O");
}
if (Ornament>=2) {
document.write(" X");
}
}
document.write("
");
width=width+1;
}
width=width-2;
}
</SCRIPT>
</BODY> </HTML>
</source>
For loop
<source lang="html4strict">
<html> <body> <script type="text/javascript"> for (i = 0; i <= 5; i++){
document.write("The number is " + i)
document.write("
")
} </script> </body> </html>
</source>
For loop for lines
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> </head> <body> <form> <input type="button" value="Test the loop" onClick="testLoop()"> </form> </body> </html>
</source>
For loop with alert dialog
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> </head> <body> <form>
| Name: | <input name="persname"
type="text"> |
| E-mail: | <input name="email" type="text"> |
<input type="button" value="See elements" onClick="seeElem(this.form)"> </form> </body> </html>
</source>
Labeled Statements
<source lang="html4strict">
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
- /
<HTML> <HEAD> <TITLE>Breaking Out of Nested Labeled Loops</TITLE> <SCRIPT LANGUAGE="JavaScript"> var targetA = 2 var targetB = 2 var range = 5 function run1() {
var out = document.forms[0].output
out.value = "Running WITHOUT labeled break\n"
for (var i = 0; i <= range; i++) {
out.value += "Outer loop #" + i + "\n"
for (var j = 0; j <= range; j++) {
out.value += " Inner loop #" + j + "\n"
if (i == targetA && j == targetB) {
out.value += "**BREAKING OUT OF INNER LOOP**\n"
break
}
}
} out.value += "After looping, i = " + i + ", j = " + j + "\n"
} function run2() {
var out = document.forms[0].output
out.value = "Running WITH labeled break\n"
outerLoop:
for (var i = 0; i <= range; i++) {
out.value += "Outer loop #" + i + "\n"
innerLoop:
for (var j = 0; j <= range; j++) {
out.value += " Inner loop #" + j + "\n"
if (i == targetA && j == targetB) {
out.value += "**BREAKING OUT OF OUTER LOOP**\n"
break outerLoop
}
}
}
out.value += "After looping, i = " + i + ", j = " + j + "\n"
} </SCRIPT> </HEAD> <BODY>
Breaking Out of Nested Labeled Loops
Look in the Results field for traces of these button scripts:
<FORM>
<INPUT TYPE="button" VALUE="Execute WITHOUT Label" onClick="run1()">
<INPUT TYPE="button" VALUE="Execute WITH Label" onClick="run2()">
Results:
<TEXTAREA NAME="output" ROWS=43 COLS=60> </TEXTAREA> </FORM> </BODY> </HTML>
</source>
Plain for loop
<source lang="html4strict">
<HTML> <HEAD> <SCRIPT language="JavaScript">
</SCRIPT> </HEAD> </HTML>
</source>
The break Statement
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Using the Break Statement</TITLE> </HEAD> <BODY> <SCRIPT></SCRIPT> </BODY> </HTML>
</source>
The continue Statement
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Using the Continue Statement</TITLE> </HEAD> <BODY> <SCRIPT></SCRIPT> </BODY> </HTML>
</source>
Use for in loop to go through an array
<source lang="html4strict">
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> var myarray = new Array(5); myarray[0] = 5 myarray[1] = 8 myarray[2] = 10 myarray[3] = 18 myarray[4] = 180 for (x in myarray) {
myarray[x] = ++myarray[x];
} alert(myarray); alert(x); </script> </head> <body> </body> </html>
</source>
Use for loop to fill an array
<source lang="html4strict">
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> var myarray = new Array(); for (i = 0; i < 10; i++) {
myarray[i] = i;
} alert(myarray); </script> </head> <body> </body> </html>
</source>
Use of the for Statement
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Using the For Statement</TITLE> </HEAD> <BODY> <SCRIPT></SCRIPT> </BODY> </HTML>
</source>
Using a for..in Loop in JavaScript
<source lang="html4strict">
<html> <head> <title>JavaScript Unleashed</title> </head> <body>
<script language="JavaScript1.1" type="text/javascript"> </script>
</body> </html>
</source>
Using the continue and break Statements
<source lang="html4strict">
<html> <head>
<title>Using the continue and break Statements</title>
</head> <body>
<script type="text/javascript"> </script>
</body> </html>
</source>
Using the label Statement
<source lang="html4strict">
<html> <head> <title>Using the label Statement</title> </head> <body>
<script language="JavaScript1.2" type="text/javascript"> </script>
</body> </html>
</source>
