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 Plain for loop
- 12 The break Statement
- 13 The continue Statement
- 14 Use for in loop to go through an array
- 15 Use for loop to fill an array
- 16 Use of the for Statement
- 17 Using a for..in Loop in JavaScript
- 18 Using the continue and break Statements
- 19 Using the label Statement
A Demonstration of a Nested Loop
<html>
<head>
<title>A Demonstration of a Nested Loop</title>
</head><body>
<script type="text/javascript">
<!--
document.write("All x,y coordinates between (0,0) and (9,9):<br>")
for (var x = 0; x < 10; ++x) {
for (var y = 0; y < 10; ++y) {
document.write("(" + x + "," + y + "),");
}
document.write("<br>");
}
document.write("<br>After completing the loop, x equals : " + x);
document.write("<br>After completing the loop, y equals : " + y);
// -->
</script>
</body>
</html>
A for Loop Used to Count from 0 to 99
<html>
<head>
<title>A for Loop Used to Count from 0 to 99</title>
<body>
<script type="text/javascript">
<!--
document.write("Numbers 0 through 99:");
document.write("<hr size="0" width="50%" align="left">");
for (var i = 0; i < 100; ++i) {
if(i%10 == 0) {
document.write("<br>");
}
document.write(i + ",");
}
document.write("<br><br>After completing the loop, i equals : " + i);
// -->
</script>
</body>
</html>
Check the loop counter
<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>
Control the loop step
<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>
Declare for loop counter
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
for (count=1;count<16;count+=1)
{
document.write(count+"<BR>");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Drawing a Christmas Tree Using Nested For Loops
<HTML>
<BODY>
<CENTER>
<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("<BR>");
width=width+1;
}
width=width-2;
}
</SCRIPT>
</CENTER>
</BODY>
</HTML>
For loop
<html>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++){
document.write("The number is " + i)
document.write("<br>")
}
</script>
</body>
</html>
For loop for lines
<html>
<head>
<script language="JavaScript">
<!--
function testLoop() {
var String1 = "<hr align="center" width=";
document.open();
for (var size = 5; size <= 100; size+=5)
document.writeln(String1 + size + "%">");
document.close();
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Test the loop" onClick="testLoop()">
</form>
</body>
</html>
For loop with alert dialog
<html>
<head>
<script language="JavaScript">
<!--
function seeElem(f) {
var elementList = "";
for (var num=0; num < f.elements.length; num++) {
elementList += num + ". " + f.elements[num] + "\n";
}
alert(elementList);
}
//-->
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Name:</td>
<td><input name="persname"
type="text">
</tr>
<tr>
<td>E-mail:</td>
<td><input name="email" type="text"></td>
</tr>
</table>
<input type="button" value="See elements" onClick="seeElem(this.form)">
</form>
</body>
</html>
Labeled Statements
/*
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>
<H1>Breaking Out of Nested Labeled Loops</H1>
<HR>
<P>Look in the Results field for traces of these button scripts:</P>
<FORM>
<P><INPUT TYPE="button" VALUE="Execute WITHOUT Label" onClick="run1()"></P>
<P><INPUT TYPE="button" VALUE="Execute WITH Label" onClick="run2()"></P>
<P>Results:</P>
<TEXTAREA NAME="output" ROWS=43 COLS=60> </TEXTAREA>
</FORM>
</BODY>
</HTML>
Plain for loop
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
for (count=1;count<16;count+=1){
document.write(count+". This is getting way too repetitive.<BR>");
}
//-->
</SCRIPT>
</HEAD>
</HTML>
The break Statement
<HTML>
<HEAD>
<TITLE>Using the Break Statement</TITLE>
</HEAD>
<BODY>
<SCRIPT><!--
for(i=100;i>0;--i){
document.write(i+"<BR>")
if(i%17==0)
break;
}
// --></SCRIPT>
</BODY>
</HTML>
The continue Statement
<HTML>
<HEAD>
<TITLE>Using the Continue Statement</TITLE>
</HEAD>
<BODY>
<SCRIPT><!--
for(i=1;i<10;++i){
if(i%2!=0) continue
document.write(i+"<BR>")
}
// --></SCRIPT>
</BODY>
</HTML>
Use for in loop to go through an array
<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>
Use for loop to fill an array
<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>
Use of the for Statement
<HTML>
<HEAD>
<TITLE>Using the For Statement</TITLE>
</HEAD>
<BODY>
<SCRIPT><!--
for(i=1;i<7;++i)
document.write("<H"+i+">This is a level "+i+" heading." +"</H"+i+">")
// --></SCRIPT>
</BODY>
</HTML>
Using a for..in Loop in JavaScript
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
<script language="JavaScript1.1" type="text/javascript">
<!--
var anObject = document;
var propertyInfo = "";
for (var propertyName in anObject) {
propertyInfo = propertyName + " = " + anObject[propertyName];
document.write(propertyInfo + "<br>");
}
// -->
</script>
</body>
</html>
Using the continue and break Statements
<html>
<head>
<title>Using the continue and break Statements</title>
</head>
<body>
<script type="text/javascript">
<!--
var highestNum = 0;
var n = 201;
for(var i = 0; i < n; ++i){
document.write(i + "<br>");
if(n < 0){
document.write("n cannot be negative.");
break;
}
if (i * i <= n) {
highestNum = i;
continue;
}
document.write("<br>Finished!");
break;
}
document.write("<br>The integer less than or equal to the Square Root");
document.write(" of " + n + " = " + highestNum);
// -->
</script>
</body>
</html>
Using the label Statement
<html>
<head>
<title>Using the label Statement</title>
</head>
<body>
<script language="JavaScript1.2" type="text/javascript"> <!--
var stopX = 3;
var stopY = 8;
document.write("All x,y pairs between (0,0) and (");
document.write(stopX + "," + stopY + "):<br>");
loopX:
for(var x = 0; x < 5; ++x){
for(var y = 0; y < 10; ++y){
document.write("("+x + "," + y +") ");
if((x == stopX) && (y == stopY)){
break loopX;
}
}
document.write("<br>");
}
document.write("<br>x equals : " + x);
document.writeln("<br>y equals : " + y);
// -->
</script>
</body>
</html>