JavaScript 基础二part2.语句
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 += i
i++
}
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 = 100
while (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 + cun
break
case 2:
// 存钱
let qu = +prompt('请输入取款金额')
money = money - qu
break
case 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>
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
