一、程序结构
（1） 认识程序结构
程序结构，描述了业务处理流程，反映到代码中就是代码的执行顺序/过程；常见的程序结构
- 顺序结构：代码从上到下逐行执行
- 选择结构：根据某个指定的条件，决定运行指定的代码块
- 循环结构：根据某个指定的条件，决定是否重复执行某个代码块
JavaScript中针对选择结构，提供了两种语法：
-
if-else选择结构 -
swtich-case选择结构
JavaScript针对循环结构，提供了多种语法：
-
for循环 -
while循环 -
do-while循环 -
for..in循环
（2） if-else选择结构
① 单分支结构
var age = 16
// 判断年龄是否成年
if(age >= 18) {
console.log("成年")
}
cosole.log("好好学习，天天向上")
image.png
② 双分支结构
// 2、双分支语法
var score = 89
console.log("软考考核即将开始，认真作答..")
if(score >= 60) {
console.log("考核及格")
} else {
console.log("考核不及格")
}
console.log("考核结束")
image.png
③ 多分支结构
// 3、多分支语法
var score2 = 98
if(score2 > 0 && score2 < 60) {
console.log("不及格")
} else if(score2 >= 60 && score2 < 80) {
console.log("及格")
} else if(score2 >= 80 && score2 < 90) {
console.log("良好")
} else if(score2 >= 90 && score2 <= 100) {
console.log("优秀")
} else {
console.log("成绩不合法")
}
image.png
④ 嵌套结构
// 4、关于是否重修
var score = 40
if(score > 0 && score < 60 ){
console.log("不及格")
// 嵌套选择结构：40分以下留级、40分以上继续学习
if(score > 0 && score < 40) {
console.log("留级")
} else {
console.log("继续学习，天天向上")
}
} else {
console.log("及格")
}
image.png
（3）switch-case选择结构
① 基本语法
主要用于等值匹配
<!DOCTYPE html>
<html lang="zh">
<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>
<input type="text" id="answer" placeholder="请输入答案(A/B/C/D)">
<button id="btn">验证答案是否正确</button>
<script>
// 用户进行选择判断
var _btn = document.getElementById("btn")
var _an = document.getElementById("answer")
_btn.onclick = function () {
// 获取了用户输入的答案
var _val = _an.value
// switch-case基本语法
// 将_val变量中的数据，和case后面的值进行相等判断，相等的话就执行对应case中的代码
switch (_val) {
case 'A':
console.log("不好意思，你答错了")
break
case 'B':
console.log("Congratulations，答对了")
break
case 'C':
console.log("错误答案，再检查检查")
break
case 'D':
console.log("这也是错误的结果呀")
break
default: // 所有数据都不匹配的情况下
console.log("没有这个选项")
}
}
</script>
</body>
</html>
② case穿透问题
当某个case语句中，省略了/丢失了break关键字，造成case语句直接向下执行(对下一个case条件不做判断)，造成的问题就是case穿透问题，如：
// 用户答案
var value = "A"
switch(value) {
case 'A':
console.log("用户选择了A，错误答案")
// break
case 'B':
console.log("选择B，恭喜您答对了")
break
case 'C':
console.log("选择了C？你确定，错了")
break
case 'D':
console.log("D这个答案，也是错的")
break
default:
console.log("没有这个选项")
}
// 执行结果
// 用户选择了A，错误答案 case 'A'中丢失了break
// 选择B，恭喜您答对了 case穿透执行....
二、基础班-石头剪刀布案例开发
开发步骤：
- 用户输入：石头 | 剪刀 | 布
- 计算机自动生成 石头 | 剪刀 | 布
- 模拟：随机数 1-石头、2-剪刀、3-布
- 判断 用户的输入 和计算机的输入 谁赢谁输
<!DOCTYPE html>
<html lang="zh">
<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>
<input type="text" id="user" placeholder="请输入您的招数（石头|剪刀|布）">
<button id="btn">判断</button>
<script>
var _btn = document.getElementById("btn")
// 1、记录用户输入
var _user = document.getElementById("user")
var _userChuzhao = ""
// 添加一个输入改变事件 onchange输入框中的数据发生变化就会产生的事件
_user.onchange = function () {
_userChuzhao = _user.value
// alert("用户出招：" + _userChuzhao)
}
_btn.onclick = function () {
// 2、记录 程序自动生成的招数(1-石头 2-剪刀 3-布)
// Math.random() 生成一个0~1之间的随机数
// Math.random()*3 生成一个0~3之间的随机数
// Math.ceil() 向上取整 0.1-> 1 2.2-> 3 1.3-> 2
var _computer = Math.ceil(Math.random() * 3)
var _comChuzhao = ""
if (_computer === 1) {
_comChuzhao = "石头"
} else if (_computer === 2) {
_comChuzhao = "剪刀"
} else if (_computer === 3) {
_comChuzhao = "布"
}
// alert("电脑出招：" + _comChuzhao)
// 3、判断 谁输谁赢
if( (_userChuzhao === "剪刀" && _comChuzhao === "布") ||
(_userChuzhao === "石头" && _comChuzhao === "剪刀") ||
(_userChuzhao === "布" && _comChuzhao === "石头")
) {
alert("用户出招(" + _userChuzhao + "); 电脑出招(" + _comChuzhao +")；玩家胜出")
} else if(_userChuzhao === _comChuzhao) {
alert("用户出招(" + _userChuzhao + "); 电脑出招(" + _comChuzhao +")；平局")
} else {
alert("用户出招(" + _userChuzhao + "); 电脑出招(" + _comChuzhao +")；电脑胜出")
}
}
</script>
</body>
</html>
今天的内容就到这里了，下节内容循环结构！
网友评论