foreword
In the continuous learning summary output, what I share today is the Web front-end, JS-based expressions, branches, and loop statements
expressions and statements
Expression:
It is a collection of codes, and the JavaScript interpreter will calculate a result
Statement:
js whole sentence or command, js statement ends with a semicolon (can be omitted) For example: if statement for loop statement
Difference:
Expressions compute a value, but statements are used to make something happen (do something) on their own
Expression 3 + 4
statement alert()
In fact, in some cases, the pop-up dialog box can also be understood as a statement, because it is calculating the result and doing things
branch statement
The three major flow control statements of the program
In the code we wrote before, we executed a few sentences from top to bottom after writing a few sentences. This is called a sequential structure.
Sometimes it is necessary to choose to execute code according to conditions, which is called branch structure
A section of code is executed repeatedly, which is called a loop structure
Branch statement
Branch statement allows us to selectively execute the desired code
If branch statement
There are three uses of the if statement: single branch, double branch, multi branch
Single branch:
<script>
//if(条件){
//满足条件要执行的代码
//}
//it里面的小括号都会给我们转换为 布尔型
// false 0 '' undefined null NaN
if(0){
console.log('真的')
}
</script>
When the condition in the brackets is true, enter the curly brackets to execute the code.
If the result in the parentheses is not a Boolean type, an implicit conversion will occur to the Boolean type
Dual branch:
<script>
//if(条件){
//满足条件要执行的代码
//}else{
//不满足条件执行的代码
//}
// 例如：计算闰年. 能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
// 1 用户输入年份
let year = +prompt('请输入年份：')
// 2 执行分支语句
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert(`${
year}年是闰年`)
} else {
alert(`${
year}年是平年`)
}
</script>
Multi-branch:
<script>
//if (条件1){
//代码1
//}else if (条件2){
//代码2
//}else if (条件3){
//代码3
//}else{
//代码n
//}
// 例如：根据输入不同时间，输出不同的问候语 12点以前， 输出上午好 18点以前， 输出下午好 20点以前， 输出晚上好
// 1. 用户输入时间 等我们学api 自动获取时间
let time = prompt('请输入小时：')
// 2. 多分支判断
if (time < 12) {
document.write(`上午好`)
} else if (time < 18) {
document.write(`下午好`)
} else if (time < 20) {
document.write(`晚上好`)
} else {
document.write(`夜深了？`)
}
//上面的代码后期直接读取时间，做区间判断
</script>
First judge condition 1, if condition 1 is met, execute code 1, otherwise not execute, if not,
then judge condition 2, if condition 2 is met, execute code 2, otherwise not execute
If still not satisfied, continue to judge, and so on if
the above If none of the conditions are met, execute the code n in else
ternary operator
In fact, it is simpler to write than if double branch, sometimes called ternary expression
Symbol:
? Used with:
<script>
//条件 ? 满足条件执行的代码 : 不满足条件执行的代码
// console.log(true ? 1 : 2)
// console.log(false ? 1 : 2)
// if (3 > 5) {
// alert('第一个')
// } else {
// alert('第二个')
// }
// 简写 简单的算法，复杂的就不适合了
3 > 5 ? alert('第一个') : alert('第二个')
</script>
Generally used to get the value
For example:
<script>
// 3 > 5 ? alert('第一个') : alert('第二个')
let num1 = 40
let num2 = 30
// num1 > num2 ? console.log(num1) : console.log(num2)
// num1 > num2 ? num1 : num2
let re = num1 > num2 ? num1 : num2
console.log(re)
// 结果：40
</script>
switch statement
<script>
switch (2) {
case 1:
alert(1)
break
case 2:
alert(2)
break
case 3:
alert(3)
break
default:
alert('没有数据')
}
</script>
Find the case value that is congruent with the data in parentheses, and execute the corresponding code inside.
If there is no congruence ===, execute the code in default.
Example: If the data is congruent with value 2, then execute code 2
Precautions
- The switch case statement is generally used for equivalence judgment, not suitable for interval judgment
- Switch case generally needs to be used in conjunction with the break keyword. Without break, case penetration will occur.
loop statement
1. Breakpoint debugging
The browser opens the debugging interface
- Press F12 to open developer tools
- Click to the sources column
- Select code file
Breakpoint: A mark added to a certain code is called a breakpoint. When the program executes to this marked code, it will pause
2. while loop
It is very similar to the if statement. Only when the condition in the parentheses is true will it enter the execution code
while the code in the parentheses will not jump out after execution, but will continue to return to the parentheses to determine whether the conditions are met. If it is satisfied, execute again The code in the curly brackets, and then return to the parentheses to judge the conditions until the conditions in the brackets are not satisfied, that is, jump out
Notes on while loops:
<script>
while (循环条件) {
要重复执行的代码(循环条件)
}
</script>
The essence of a loop is the process of starting with a certain variable, and then continuously generating changes, slowly approaching the termination condition. Therefore, the cycle needs to have three elements:
- Variable start value
- Termination condition (without a termination condition, the loop will continue to execute, resulting in an infinite loop)
- Variable change amount (using auto-increment or auto-decrement)
<script>
let i = 1
while (i <= 3) {
document.write('我会循环三次<br>')
i++
}
</script>
end of loop:
continue: end this cycle and continue to the next cycle
break: jump out of the current cycle
Finish
Finally share a sentence:
Being a good person may think they are good at making others happy, but in fact, their real specialty is making themselves feel miserable, miserable, and powerless.
Pleasing Disorder: A Good Old Man Who Doesn’t Understand Rejection
That's all for this sharing! ! !
Welcome to leave a message to discuss in the comment area! !