Table of contents
1. for loop
Grammatical structures:
for(initialization variable; condition expression; operation expression) {
// loop body
}
Example:
for (var i = 1; i <= 5; i++) {
console.log('The number is: ' + i + '\n');
}
- Initialize variable Initialize a counter, declare a new variable with var, this variable helps us record the number of times.
- Conditional expression is used to execute the condition of the loop, if it is satisfied, it will continue to execute, and if it is not satisfied, it will exit.
- The operation expression mainly updates the loop variable and is executed after the loop body ends.
breakpoint debugging
Breakpoint debugging: Set a breakpoint on a certain line of the program. When debugging, the program will stop when it runs to this line, and then you can debug step by step. During the debugging process, you can see the current value of each variable. If something goes wrong, When debugging to the wrong line of code, it will display an error and stop. Breakpoint debugging can help observe the running process of the program.
The process of breakpoint debugging:
1. Press F12 in the browser --> sources --> find the file to be debugged --> set a breakpoint in a certain line of the program
2. Watch: Monitoring, adding variables through watch can monitor changes in the value of variables.
3. Press F11 to execute the program step by step, let the program execute line by line, and observe the change of the value of the variable in the watch.
Two, for loop nesting
Definition: In the loop statement, define the grammatical structure of a loop statement.
for (the initial of the outer loop; the condition of the outer loop; the operation expression of the outer loop) {
for (initial of inner loop; condition of inner loop; operation expression of inner loop) {
//code to be executed;
}
}
Example:
var star = '';
for (var j = 1; j <= 5; j++) {
for (var i = 1; i <= 5; i++) {
star += '*'
}
// Every time there are 5 *, add a newline
star += '\n'
}
console.log(star);
Summarize:
- The outer loop executes once, and the inner loop executes all times.
- A for loop is a loop in which the loop condition and the number are directly related.
Three, while loop
Grammatical structures:
while (conditional expression) {
// loop body code
}
Example:
var num = 1;
while (num <= 10) {
console.log(num + '\n');
num++;
}
- If the conditional expression is true, execute the loop body code, otherwise exit the loop.
- After the loop code is executed, the conditional expression will continue to be executed. It must be conditional, otherwise an infinite loop will occur.
do {
// Loop body code - the loop body code is executed repeatedly while the conditional expression is true
} while(condition expression);
Example:
do{
var msg= prompt('Password: 123456'); //The loop body ends after the password is 123456
}while(msg!=”123456”);
alert("password is correct");
- Consistent with the while loop, the difference is that it executes the condition of the loop body first, and then judges the expression.
- The body of the loop will be executed at least once.
四、continue、break
continue: The keyword is used to jump out of this loop immediately and continue to the next loop.
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue; // Jump out of this loop, and jump out of the third loop
}
console.log('Prompt information:' + i + "\n");
}
The break keyword is used to immediately break out of the entire loop (end of loop).
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // Break out of the entire loop.
}
console.log('Prompt information:' + i + "\n");
}
practice questions
1. Print the ninety-nine multiplication table.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var str = "";
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str = str + j + "*" + i + "=" + j * i + "\t";
}
str = str + "\n";
}
console.log(str);
</script>
</body>
</html>
achieve effect
2. Print an inverted triangle case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var src = '';
for (var i = 1; i < 6; i++) {
for (var j = 1; j < 7 - i; j++) {
src = src + '*';
}
src = src + '\n';
}
console.log(src);
</script>
</body>
</html>
achieve effect
3. Make a simple calculator, the browser receives +,-*/, receives two numbers, and then calculates the result.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var first = Number(prompt("请输入第1个数:"));
var symbol = prompt("请输入运算符:");
var end = Number(prompt("请输入第2个数:"));
var sum;
switch (symbol) {
case "+":
sum = first + end;
break;
case "-":
sum = first - end;
break;
case "*":
sum = first * end;
break;
default:
sum = first / end;
}
console.log(sum);
</script>
</body>
</html>achieve effect
