1. If branch statement
1. Single branch if statement
if
(
condition
) {
The logic code executed after the condition is met
;
}
for example:
The user enters the annual grade, if the age is greater than
18
, it will prompt congratulations that you are an adult
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt("请输入年龄")
if (age >= 18) {
alert("恭喜你成年了")
}
</script>
</body>
</html>
2. Double branch if statement
if
(
condition
) {
The logic code executed after the condition is met
;
}
else{
}
Example:
user input, if the working experience is more than
1
year, the bonus at the end of the year
+ 2000
, otherwise there will be no bonus at the end of the year
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 需求一 */
let number1 = +prompt("输入工龄")
if (number1 > 1) {
alert("年底奖金+2000")
} else {
alert("没奖金")
}
</script>
</body>
</html>
3. Multi-branch if statement
if
(
condition
) {
The logic code executed after the condition is met
;
}
else if(
condition
){
The logic code executed after the condition is met
;
}
else if(
condition
){
The logic code executed after the condition is met
;
}
Example:
Requirements: Output different greetings according to different input times
Before 12:00
, output good morning
Before 18
o'clock, output good afternoon
Before 20
o'clock, output good evening
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let time = +prompt("请输入时间")
if (time < 12) {
alert("上午好")
}
else if (12 <= time < 16) {
alert("上午好")
}
else if (16 <= time < 20) {
alert("晚上好")
}
</script>
</body>
</html>
Two, swich branch
( 1 ) Grammatical structure
The switch
statement is also a multi-branch statement, which is used to execute different codes based on different conditions. A switch is used when you want to set a series of options for specific values on a variable
.
switch(
expression
){
case value1:
//
The code to be executed when
the expression is equal to
value1
break;
case value2:
//
The code to be executed when
the expression is equal to
value2
break;
default:
//
The code to be executed when
the expression is not equal to any
value
}
For example: the user enters a fruit in the pop-up box, if there is, the price of the fruit will pop up, if there is no such fruit, "
there is no such fruit
"
will pop up
.
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = prompt("输入水果")
switch (str) {
case "西瓜":
alert(1)
break;
case "香蕉":
alert(2)
break;
case "苹果":
alert(3)
break;
case "橙子":
alert(4)
break;
default:
alert("无水果")
}
</script>
</body>
</html>
3. The difference between the if branch statement and the switch branch statement
1. In general, the two statements can replace each other
2. The switch...case
statement usually deals with the case where
the case
is a relatively definite value, while
the if...else...
statement is more flexible and is often used for range judgment (greater than, equal to a certain range
)
3. After the switch
statement performs conditional judgment, it directly executes the conditional statement of the program, which is more efficient. And
if...else
statement has several kinds of events, how many times have to be judged.
4. When there are fewer branches, the execution efficiency of
the if...else
statement is higher than that of
the switch
statement.
5. When there are many branches, the execution efficiency of
the switch
statement is relatively high, and the structure is clearer.