06、JavaScript语句

语句"/>

06、JavaScript语句

1、表达式和语句

【表达式】： 表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

【语句】： js 整句或命令，js 语句是以分号结束（可以省略）

两者区别：

• 表达式计算出一个值，但语句用来自行以使某件事发生
• 表达式 3 + 4
• 语句 alert() 弹出对话框

2、分支语句

if分支语句

1. 单分支

【语法】

if (条件是一个布尔值或布尔表达式){满足条件的代码
}

【解释】

• 括号内的条件为true时，进入大括号里执行代码
• 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

【案例】

    <script>let score = prompt('请输入分数？');if (score > 60) {alert("你及格了！")}</script>

3. 双分支

【语法】

if (条件是一个布尔值或布尔表达式){满足条件的代码
}else{不满足条件的代码
}

【案例】

 <script>// 用户输入，如果工龄大于1年，年底奖金+2000， 否则年底没奖金// 1. 用户输入工龄// let age = +prompt('请输入工龄')// let money = 10000// 2. 执行分支语句// if (age >= 1) {//     alert(`您实发工资:${money + 2000}`)// } else {//     alert(`您实发工资:${money}`)// }// 2. 让用户输入年份，判断这一年是闰年还是平年并输出// 2.1 用户输入年份let year = +prompt('请输入年份：')// 2.2 执行分支语句if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {alert(`${year}年是闰年`)} else {alert(`${year}年是平年`)}</script>

5. 多分支

【语法】

if (条件0) {代码0
} else if (条件1) {代码1
}else if (条件2) {代码2
}else if (条件3) {代码3
} else{代码n
}

【解释】

• 先判断条件1，若满足条件1就执行代码1，其他不执行
• 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
• 若依然不满足继续往下判断，依次类推
• 若以上条件都不满足，执行else里的代码n
• 可以写N个条件

【代码示例】

    <script>//根据输入不同时间，输出不同的问候语let time = prompt('请输入小时：')if (time < 12) {document.write(`上午好，好好工作`)} else if (time < 18) {document.write(`下午好，好好工作`)} else if (time < 20) {document.write(`晚上好，好好加班`)} else {document.write(`夜深了，头发还有吗？`)}</script>

三元运算符

【解释】 是比 if 双分支 更简单的写法，有时候也叫做三元表达式。

【语法】

条件 ? 满足条件的代码执行 : 不满足条件的代码执行

【代码示例】

    <script>let num1 = 40let num2 = 30let re = num1 > num2 ? num1 : num2console.log(re)</script>//数字补0案例<script>// 1. 用户输入数字let num = prompt('请您输入一个数字')// 2. 判断条件是 小于 10  则数字前面 + '0'   01 否则 不补// let t = num >= 10 ? num : '0' + numlet time = num < 10 ? '0' + num : numdocument.write(time)</script>

switch分支语句

【语法】

switch (数据){case 数值1:代码1breakcase 数值2:代码2breakcase 数值3:代码3breakcase 数值4:代码4breakdefault:代码nbreak
}

【解释】

• 找到跟小括号里数据全等的case值，并执行里面对应的代码
• 若没有全等 === 的则执行default里的代码

注意事项：

• switch case语句一般用于等值判断,不适合于区间判断
• switch case一般需要配合break关键字使用 没有break会造成case穿透

案例代码

 <script>// 1. 用户输入数字   还有一次 运算符let num1 = +prompt('请您输入第一个数:')let num2 = +prompt('请您输入第二个数:')let sp = prompt('请您输入+ - * / 运算')// 2. 根据不同的运算符计算不同的结果 switchswitch (sp) {case '+':alert(`您选择的是加法，结果是: ${num1 + num2}`)breakcase '-':alert(`您选择的是减法，结果是: ${num1 - num2}`)breakcase '*':alert(`您选择的是乘法，结果是: ${num1 * num2}`)breakcase '/':alert(`您选择的是除法，结果是: ${num1 / num2}`)breakdefault:alert(`请输入+ - * / `)}</script>

3、循环语句

while循环

【语法】

while (循环条件) {循环体
}

【解释】

• 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码。
• while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到
  小括号判断条件，直到括号内条件不满足，即跳出

【注意事项】

• 循环需要具备三要素：
• 变量起始值
• 终止条件（没有终止条件，循环会一直执行，造成死循环）
• 变量变化量（用自增或者自减）

【代码案例】

    <script>// 循环必须有3要素// 变量的起始值let i = 1// 终止条件while (i <= 3) {document.write(`月薪过万，哈哈哈<br>`)// 变量变化i++}</script>

【综合案例】

 <script>// 1. 不断的弹出对话框// 3. 金额的变量let money = 100while (true) {let str = prompt(`请您选择操作:1. 存钱2. 取钱3. 查看余额4. 退出`)// 2. 除非输入的是4 则退出循环  breakif (str === '4') {break}// 4. switch 加减操作switch (str) {case '1':let cun = +prompt('请您输入存钱的金额:')// money = money + cun money += cunbreakcase '2':let qu = +prompt('请您输入取钱的金额:')money -= qubreakcase '3':alert(`您卡上的余额是${money}元`)break}}</script>

do…while循环

【语法】

do
{需要执行的代码
}
while (条件);

【解释】

• do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

【代码示例】

do
{x = x + i + "<br>";i++;
}
while (i<5);

4、for循环

【语法】

for (声明记录循环的次数变量; 循环条件; 变化值) {循环体
}

【代码练习】

 <script>// 1. 利用for循环输出多少岁了for (let i = 1; i <= 100; i++) {document.write(`我今年${i}岁了 <br>`)}// 2. 求 1~100 偶数的累加和let sum = 0   // 值for (let i = 1; i <= 100; i++) {// 筛选偶数if (i % 2 === 0) {// sum = sum + isum += i}}document.write(sum)// 3. 页面打印5个小星星for (let i = 1; i <= 5; i++) {document.write('◇')}// 1. 循环的最大价值就是遍历数组let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']// 利用循环的方式// document.write(arr.length)// 2. arr.length  数组的长度  通过他可以告诉我们数组里面有几个元素for (let i = 0; i < arr.length; i++) {document.write(`名字是: ${arr[i]} <br>`)}</script> 

for循环嵌套

【语法】

for (外部声明记录循环的次数变量; 循环条件; 变化值) {for (内部声明记录循环的次数变量; 循环条件; 变化值) {循环体}
}

案例代码

• 案例1

 <script>//   假如每天记住5个单词，3天后一共能记住多少单词？// 分析// 1. 外面的循环 记录第n天 for (let i = 1; i < 4; i++) {document.write(`第${i}天</br>`)for (let j = 1; j <= 5; j++) {document.write(`记住了${j}个单词！</br>`)}}</script>

• 案例2

 <script>//需求： 页面中打印出5行5列的星星let num1 = prompt('请输入行数')let num2 = prompt('请输入列数')// 外层行  里层每个的几个星星for (let i = 0; i < num1; i++) {for (let j = 0; j < num2; j++) {document.write('★')}// 五个星星打完了，再换行document.write('</br>')}</script>

• 案例3

 <script>// 打印倒三角形星星// 外层打印几行for (let i = 1; i < 6; i++) {for (let j = 1; j <= i; j++) {document.write('@')}document.write('</br>')}</script>

• 案例4

<!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>div {display: inline-block;height: 25px;line-height: 25px;margin: 5px;background-color: pink;padding: 0 10px;border: 1px solid hotpink;color: deeppink;border-radius: 5px;box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);text-align: center;}</style>
</head><body><script>// 外层打印几行for (let i = 1; i <= 9; i++) {// 里层打印几个星星for (let j = 1; j <= i; j++) {// 只需要吧 ★ 换成  1 x 1 = 1   document.write(`<div> ${j} x ${i} = ${j * i} </div>`)}document.write('<br>')}</script>
</body></html>