Home > Web Front-end > JS Tutorial > Keyword examples of three js loops (for and while)_Basic knowledge

Keyword examples of three js loops (for and while)_Basic knowledge

WBOY
Release: 2016-05-16 15:15:21
Original
1864 people have browsed it

Three ways to write loops:

<!doctype html>
<title>js循环 by 脚本之家</title>
<meta charset="utf-8"/>
<meta name="keywords" content="js循环 by 脚本之家" />
<meta name="description" content="js循环 by 脚本之家" />
</head>
<body>
//while循环
 <script type="text/javascript">
i = 1;
while (i <= 6)
{
document.write("<h" + i+">脚本之家,这是标题"+i);
document.write("</h"+i+">");
i++;
}
</script>
//do_whilel循环
<script type="text/javascript">
i = 1;
do
{
document.write("<h" + i+">jb51.net ,这是标题"+i);
document.write("</h"+i+">");
i++;
}
while(i<=6);
</script>
//for循环 
 <script type="text/javascript">
for(i=1;i<=6;i++)
{
 document.write("<h"+i+">脚本之家,这是标题"+i);
 document.write("</h"+i+">");
}
</script>
</body>
</html>
Copy after login


Different types of loops

JavaScript supports different types of loops:
•for - loop through a block of code a certain number of times
•for/in - Loop through the properties of an object
•while - Loop through the specified block of code when the specified condition is true
•do/while - also loops through the specified code block when the specified condition is true


For loop

The for loop is a tool you will often use when you want to create a loop.

The following is the syntax of the for loop:

for (statement 1; statement 2; statement 3)
{
The executed code block
}


Statement 1 is executed before the loop (code block) starts
Statement 2 defines the condition for running the loop (block of code)
Statement 3 is executed after the loop (block of code) has been executed

Example

Copy code The code is as follows:

for (var i=0; i<5; i++)
{
x=x + "The number is " + i + "
";
}

Try it for yourself

From the example above, you can see:

Statement 1 sets the variable (var i=0) before the loop starts.
Statement 2 defines the conditions for the loop to run (i must be less than 5).
Statement 3 increments a value (i++) each time the block of code has been executed.


Statement 1

Usually we use statement 1 to initialize the variables used in the loop (var i=0).

Statement 1 is optional, which means you can do it without using statement 1.

You can initialize any (or multiple) values ​​in statement 1:

Example:

Copy code The code is as follows:

for (var i=0,len=cars.length; i {
document.write(cars[i] + "
");
}

You can also omit statement 1 (for example, when the value has been set before the loop starts):

Example:

Copy code The code is as follows:

var i=2,len=cars.length;
for (; i {
document.write(cars[i] + "
");
}

Statement 2

Usually statement 2 is used to evaluate the condition of the initial variable.

Statement 2 is also optional.
If statement 2 returns true, the loop starts again, if it returns false, the loop ends.
Tip: If you omit statement 2, you must provide a break inside the loop. Otherwise the cycle cannot be stopped. This may crash the browser. Please read about break later in this tutorial.

Statement 3

Normally statement 3 will increase the value of the initial variable.

Statement 3 is also optional.
Statement 3 can be used in several ways. The increment can be negative (i--), or larger (i=i+15).
Statement 3 can also be omitted (for example, when there is corresponding code inside the loop):

Example:

Copy code The code is as follows:

var i=0,len=cars.length;
for (; i {
document.write(cars[i] + "
");
i++;
}

For/In loop

JavaScript for/in statement loops through the properties of an object:

Example

Copy code The code is as follows:

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}

You'll learn more about for / in loops in the chapter on JavaScript objects.

For details, please refer to this article: http://www.jb51.net/w3school/js/js_loop_for.htm

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template