JavaScript 基础二part2.语句
- 2.1 表达式和语句
- 表达式和语句的区别
- 程序三大流程控制语句
- 2.2 分支语句
- 1. if语句
- 2、三元运算符
- 3、switch 语句
- 2.3 循环结构
- 2.3.1 断点调试
- 2.3.2 while 循环
- 循环退出
- 简易ATM取款机案例
- 2.3.3 for 循环
- 退出循环
- 案例
2.1 表达式和语句
表达式：
表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。
x = 7
3 + 4
num++
语句：
语句是一段可以执行的代码。
比如： prompt() 可以弹出一个输入框，还有 if语句 for 循环语句等等
表达式和语句的区别
表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
表达式 num = 3 + 4
语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
语句 alert() 弹出对话框 console.log() 控制台打印输出
某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如continue语句)
程序三大流程控制语句
① 顺序结构
② 分支结构
③ 循环结构
2.2 分支语句
分支语句可以让我们有选择性的执行想要的代码
1. if语句
if 语句有三种使用：单分支(if)、双分支(if, else)、多分支(if, else if, else)
需求：用户输入，用户名：pink，密码：123456， 则提示登录成功，否则提示登录失败
<script>let uname = prompt("请输入用户名");let upassw = prompt("请输入密码");if (uname === "pink" && upassw === "123456") {alert("登录成功");} else {alert("登录失败");}
</script>
这里写单引号也可以，JS中的字符串可以用单引号也可以用双引号
需求：让用户输入年份，判断这一年是闰年还是平年并弹出对应的警示框。
① 能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
② 闰年 leap year
需求：根据输入不同的成绩，反馈不同的评价
<script>// 1. 用户输入let score = +prompt('请输入成绩：')// 2. 判断输出if (score >= 90) {alert('成绩优秀，宝贝，你是我的骄傲')} else if (score >= 70) {alert('成绩良好，宝贝，你要加油哦~~')} else if (score >= 60) {alert('成绩及格，宝贝，你很危险~')} else {alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')}</script>
这里的分支，先判断90，后面70-90不用再写小于90.
2、三元运算符
使用场景： 其实是比 if 双分支 更简单的写法，可以使用 三元表达式
符号：? 与 : 配合使用
语法：条件？满足条件执行的代码：不满足条件执行的代码
一般用来取值
需求：用户输入2个数，控制台输出最大的值
<script>let num1 = +prompt("请输入第一个数");let num2 = +prompt("请输入第二个数");let ans = num1 > num2 ? num1 : num2;alert(ans);
</script>
要学会使用模板字符串
num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`);
数字补0案例
需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09 03 等
为后期页面显示时间做铺垫
<script>let num = +prompt("请输入一个数字");let ans = num < 10 ? ('0'+num) : num;alert(ans);
</script>
还有一种方法：
<script>let num = prompt("请输入一个数字");let ans = num < 10 ? 0+num : num;alert(ans);
</script>
3、switch 语句
语法：
switch(数据) {case 值1:代码1;break;case 值2:代码2;break;default:代码n;break;
}
<script>let a = +prompt();let b = +prompt();let operator = prompt("运算符");let res = 0;switch(operator) {case '+' :res = a+b;break;case '-' :res = a-b;break;case '*' :res = a*b;break;case '/' :res = a/b;break;default :alert("请输入正确的运算符");}alert(`运算结果为${res}`);
</script>
可以这么写：
case '+':alert(`两个数的加法操作是${num1 + num2}`)break
2.3 循环结构
2.3.1 断点调试
选中，然后刷新网页。
2.3.2 while 循环
循环：重复执行一些操作， while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。
页面输出1-100
let i = 1
while (i <= 100) {document.write(`这是第${i}个数<br>`)i++
}
计算从1加到100的总和并输出
let i = 1 // 变量的起始值
let sum = 0 // 累加和变量
while (i <= 100) {// 把i 累加到 sum 里面sum += ii++
}
console.log(sum) // 5050
计算1-100之间的所有偶数和
let i = 1
let sum = 0
while (i <= 100) {// 筛选偶数 只有偶数才累加if (i % 2 === 0) {sum = sum + i}// 每次循环都要自加i++
}
console.log(sum)
循环退出
循环结束：
break：退出循环
continue：结束本次循环，继续下次循环
区别：
continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
简易ATM取款机案例
需求：用户可以选择存钱、取钱、查看余额和退出功能
<script>// 1. 开始循环 输入框写到 循环里面// 3. 准备一个总的金额let money = 100while (true) {let re = +prompt(`请您选择操作：1.存钱2.取钱3.查看余额4.退出`)// 2. 如果用户输入的 4 则退出循环， break 写到if 里面，没有写到switch里面， 因为4需要break退出循环if (re === 4) {break}// 4. 根据输入做操作switch (re) {case 1:// 存钱let cun = +prompt('请输入存款金额')money = money + cunbreakcase 2:// 存钱let qu = +prompt('请输入取款金额')money = money - qubreakcase 3:// 存钱alert(`您的银行卡余额是${money}`)break}}</script>
2.3.3 for 循环
语法：
for (变量起始值; 终止条件; 变量变化量) {
}
for循环的最大价值： 循环数组
退出循环
continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break 退出整个for循环，一般用于结果已经得到，后续的循环不需要的时候可以使用
了解：
while(true)来构造“无限”循环，需要使用break退出循环。for(;;)也可以来构造“无限”循环，同样需要使用break退出循环。
区别：
- 当如果明确了循环的次数的时候推荐使用for循环
- 当不明确循环的次数的时候推荐使用while循环
举例
let arr = ['刘德华', '刘晓强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']for (let i = 0; i < arr.length; i++) {console.log(arr[i])}
案例
乘法表
注意事项
① for(int i = 0; i<=10; i++)是错的，JS中只有 let var const
② 换行 document.write('<br>')
<script>for(let i = 1; i <= 9; i++) {for(let j = 1; j <= i; j++) {document.write(`${i}×${j}=${i*j}`);}// 换行document.write('<br>') }
</script>
加上样式
<!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><style>span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;}</style>
</head><body><script>// 1. 外层循环控制行数for (let i = 1; i <= 9; i++) {// 2. 里层循环控制列数for (let j = 1; j <= i; j++) {document.write(`<span>${j} X ${i} = ${i * j}</span>`)}// 换行document.write('<br>')}</script>
</body></html>
