语句"/>
06、JavaScript语句
1、表达式和语句
【表达式】: 表达式是一组代码的集合,JavaScript解释器会将其计算出一个结果
【语句】: js 整句或命令,js 语句是以分号结束(可以省略)
两者区别:
- 表达式计算出一个值,但语句用来自行以使某件事发生
- 表达式 3 + 4
- 语句 alert() 弹出对话框
2、分支语句
if分支语句
- 单分支
【语法】
if (条件是一个布尔值或布尔表达式){满足条件的代码
}
【解释】
- 括号内的条件为true时,进入大括号里执行代码
- 小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
【案例】
<script>let score = prompt('请输入分数?');if (score > 60) {alert("你及格了!")}</script>
- 双分支
【语法】
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>
- 多分支
【语法】
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>
更多推荐
06、JavaScript语句
发布评论