JavaScript流程控制-分支
1、流程控制
2、顺序流程控制
3、分支流程控制if语句
3.1、分支结构
3.2、if语句
3.2.1、语法结构
3.2.2、执行流程
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1、if的语法结构 如果if
// if(条件表达式){
// //执行语句
// }
//2、执行思路 如果if里面的条件表达式为真，true 则执行大括号里面的 执行语句
//如果if 条件表达式结果为假，则不执行大括号里面的语句 则执行if 语句后面的代码
//3、代码体验
if(3 < 5){
alert('沙漠骆驼');
}
</script>
</head>
<body>
</body>
</html>
3.2.3、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var age = prompt('请输入您的年龄');
if(age >= 18){
alert('欢迎，请进入网吧')
}
alert('未成年人不能进入网吧')
</script>
</head>
<body>
</body>
</html>
3.3、if-else语句（双分支语句）
3.2.1、语法格式
3.2.2、执行流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1、语法结构 if 如果 else 否则
// if(条件表达式){
// //执行语句1
// }else{
// //执行语句2
// }
// 2、之心思路 如果表达式结果为真 那么执行语句1 否则 执行语句2
//3、代码验证
var age= prompt('请输入您的年龄')
if(age >= 18){
alert('我想带你去网吧偷耳机')
}else{
alert('滚，回家做作业去')
}
// 5、if里面的语句1 和else里面的语句2 最终只能有一个语句执行 2选1
// 6、else后面直接跟大括号
</script>
</head>
<body>
</body>
</html>
3.2.3、案例-判断闰年
案例：
解析案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var year = prompt('请输入年份');
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
alert(year+'年是闰年');
}else{
alert(year+'年不是闰年');
}
</script>
</head>
<body>
</body>
</html>
3.4、if-else-if语句
3.4.1、语法结构
3.4.2、执行流程
3.4.3、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var score = prompt('请输入您的分数');
if(score >= 90){
alert('您的成绩等级为A');
}else if( score >= 80){
alert('您的成绩等级为N');
}else if( score >= 70){
alert('您的成绩等级为C');
}else if( score >= 60){
alert('您的成绩等级为D');
}else {
alert('您的成绩等级为E');
}
</script>
</head>
<body>
</body>
</html>
4、三元表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1、有三元运算符的式子我们成为三元表达式
// 2、++num 3 + 5 ? :
// 3、语法结构
// 条件表达式 ? 表达式1 : 表达式2
// 4、执行思路
// 如果表达式结果为真 则 返回 表达式1 的值 如果表达式结果为假，则返回 表达式2 的值
// 代码体验
var num = 10;
var result= 5> num ? '是的' : '不是'//我们知道表达式是有返回值的
console.log(result);
</script>
</head>
<body>
</body>
</html>
5、分支流程控制switch语句
5.1、语法结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1、switch语句也是多分支语句 也可以实现多选1
// 2、语法结构 switch 转换、开关 case 小例子或者选项的意思
// switch(表达式){
// case value1:
// 执行语句1;
// break;
// case value2:
// 执行语句2;
// break;
// ...
// default:
// 执行最后的语句;
// }
// 3、执行思路 利用我们表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case里面的语句
// 如果没有匹配上，那么执行default里面的语句
// 4、代码验证
switch(2){
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配上')
}
</script>
</head>
<body>
</body>
</html>
5.2、switch注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//switch注意事项
var num = 1;
switch (num){
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
case 3:
console.log(3);
break;
default:
console.log('没有匹配上');
}
// 1、我们开发里面 表达式我们经常携程变量
// 2、我们num的值 和 case 里面的值相匹配的时候 全等 必须是值和数据类型一直才可以 num === 1
// 3、break 如果当前的case里面没有break 则不会推出switch 会继续执行下一个switch
</script>
</head>
<body>
</body>
</html>
5.3、查询水果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var fruit = prompt('请输入水果：');
switch(fruit){
case '苹果':
alert('3.5元/斤');
break;
case '香蕉':
alert('2.5元/斤');
break;
case '草莓':
alert('10元/斤');
break;
default:
alert('没有此水果');
}
</script>
</head>
<body>
</body>
</html>
6、switch语句和if-else-if语句的区别
7、作业
