二、语句
(一)表达式&语句
- 表达式:在程序中能够计算出一个具体的结果,eg:
num = 3 + 4;
和num++
- 语句:是一段可以执行的代码,其中的代码用来执行的,不是用来求得具体值的,eg:if语句,循环语句等
(二)三大分支语句和循环语句
1、单条件判断分支语句
程序在执行的时候,如果条件成立就执行某行代码,如果条件不成立啧执行其他代码
if语句
的语法:if (条件) {条件成立的代码}
if...else...语句
的语法:if (条件) {条件成立的代码} else {条件不成立的代码}
(1)用法
- 常见的应用场景:登陆界面——登录成功则跳转页面,反之则提示登陆失败
- 语法:
if(条件){ // 程序先判断if中的条件是否成立(true) 条件成立执行的代码 //如果条件成立,则执行if后面对应的代码,else中的代码不会执行 }else{ // 程序先判断if中的条件不成立(false) 条件不成立执行的代码 // 程序只执行else中的代码,if中的代码不会执行 }
- 注意:如果if语句中只有一行代码时可以省略花括号
{}
,即 只有if(条件)
代码
(2)举例
例1:根据用户输入的性别,输出不同的称呼
let sex = prompt('请输入您的性别:男或女')
if(sex == '男' || sex == '男生' || sex == '先生'){
document.write('先生');
}else{
document.write('女士');
}
例2:根据用户输入高考成绩,如果分数大于700,则提示恭喜考入XX大学
// 定义变量的同时加入隐式类型转换,也可以添加强制类型转换Number(prompt('请输入您的高考成绩'))
let sorce = +prompt('请输入您的高考成绩');
// 如果不提前加入数据类型转换,直接运行也可以,因为比较运算符也会发生隐形类型转换
if(sorce >= 700){
alert('恭喜考入XX大学');
}else{
alert('很遗憾未能考入XX大学');
}
(3)三元表达式
单条件分支语句的另一种写法
- 语法:
条件 ? 代码1 : 代码2
- 语法解释:
- 判断条件是真还是假,若条件成立则执行
代码1
,后面代码不执行;若条件不成立则执行代码2
,前面代码不执行 ?
相当于单条件分支语句的if
;:
相当于单条件分支语句的else
- 判断条件是真还是假,若条件成立则执行
例1:用户输入两个数,控制台输出最大值
let num1 = Number(prompt('请输入第一个数'));
let num2 = Number(prompt('请输入第二个数'));
num1 > num2 ? document.write('最大值是' + num1) : document.write('最大值是' + num2);
例2:用户输入一个数,如果数字小于10,则前面进行补0,比如09,03等
let num = String(prompt('请输入一个两位数'));
num.length < 2 ? document.write('0' + num) : num.length < 3 ? document.write(num) : alert('请输入一个两位数');
num < 10 ? document.write('0' + num) : num < 100 ? document.write(num) : alert('请输入一个两位数'); */
2、多条件判断分支语句
elseif
语句语法:if (条件1) {代码1} else if (条件2) {代码2} ... else {都不成立的代码}
- 多条件分支语句中的条件个数不确定,根据实际情况而定;
- 先判断
条件1
,如果条件1
成立则执行代码1
,如果条件2
成立则执行代码2
,……,如果以上条件都不成立则执行代码5
(1)语法:
if(条件1){
条件1成立执行的代码1
}else if(条件2){
条件2成立执行的代码2
}else if(条件3){
条件3成立执行的代码3
}else if(条件4){
条件4成立执行的代码4
}else{
以上条件都不成立执行的代码5
// else中如果没有代码则else可省略
}
(2)案例:
例1:成绩案例
根据用户输入的不同成绩,反馈不同评价:成绩90以上是优秀,7590是良好,6075是及格,60以下不及格
let sorce = prompt('请输入您的成绩');
if(sorce >= 90 && sorce <= 100){
alert('优秀');
}else if(sorce >= 75 && sorce < 90){
alert('良好');
}else if(sorce >= 60 && sorce < 75){
alert('及格');
}else if(sorce < 60){
alert('不及格');
}else{
alert('请输入正确的成绩');
}
3、switch分支语句:
switch...case语句
的语法:switch (变量) { case (条件1): 代码1; break; ...}
- 多条件分支语句的另一种写法,在任何情况下都可以使用或者多条件分支语句;
- 在变量的值为某些固定值时推荐使用,如一年有四季:春夏秋冬;
- 如果变量值为范围时推荐使用多条件分支语句;
- switch语句中的case后面值与变量值必须全等(值与数据类型);
- break关键字不可省略,若default后无代码则default值可以省略
(1)语法:
switch(变量){ // 获取变量的值
case 值1: // 第一步先和值1比较是否完全相等
代码1; // 如果相等则执行代码1
break; // 跳出switch分支语句,其余的代码不执行
case 值2: // 第二步先和值2比较是否完全相等
代码2; // 如果相等则执行代码2
break; // 跳出switch分支语句,其余的代码不执行
case 值3: // 第三步先和值3比较是否完全相等
代码3; // 如果相等则执行代码3
break; // 跳出switch分支语句,其余的代码不执行
case 值4: // 第四步先和值4比较是否完全相等
代码4; // 如果相等则执行代码4
break; // 跳出switch分支语句,其余的代码不执行
default: // 变量值的不符合上面的条件
代码5; // 执行代码5
break; // 跳出switch分支语句,其余的代码不执行
}
(2)案例:
例1:简易计算器
获取两个数,通过用户手动输入计算符号获取结果
let num1 = Number(prompt('请输入第一个数'));
let num2 = Number(prompt('请输入第二个数'));
let way = prompt('请输入 + - * / 中的任意一种方式');
switch(way){
case '+':
document.write(num1 + "+" + num2 + "=" + num1 + num2);
break;
case '-':
document.write(num1 + "-" + num2 + "=" + num1 - num2);
break;
case '*':
document.write(num1 + "*" + num2 + "=" + num1 * num2);
break;
case '/':
if(num2 == 0){
alert('被除数不能为0');
}else{
document.write(num1 + "/" + num2 + "=" + num1 / num2);
}
break;
default:
alert('请输入 + - * / 中的任意一种方式');
break;
}
(3)穿透现象
本质上是break关键字的作用
原因:条件的执行代码中最后没有设置break
现象:若条件的执行代码中最后没有设置break,则会顺序向下一个条件执行,直至遇见break
举例:结果运行时会发现'111','222','333','444'都被执行了,没有break导致代码依次执行
let num = 1;
switch(num){
case 1:
alert('111');
case 2:
alert('222');
case 3:
alert('333');
default:
alert('444');
break;
}
4、break关键字和continue关键字
用途:一般都在循环语句中使用
(1)break关键字
break关键字在循环中和switch语句中都表示立即结束,并跳出当前语
例1:
let i = 1;
while(i <= 10){
if(i == 6){
break;
}
console.log(`当前数字是:${i}`); // i = 1 ~ 5
i++;
}
console.log(`此时i的数字是:${i}`); // i = 6
例2:页面弹框
弹出对话框,‘你爱我吗’,如果输入‘爱’,则结束,否则一直弹出 对话框
while(true){
let ai = prompt("你爱我吗?");
if(ai === "爱"){
break;
}
}
例3:简易ATM机:用户可以选择存钱、取钱、查看余额和退出功能
法一:使用if语句
let account = 0,way = 0,money = 0;
while (true) {
if (way === 0) {
way = Number(prompt("请选择您的操作:1、存款;2、取款;3、查看余额;4、退出"));
} else if (way === 1) {
money = Number(prompt("请输入存款金额"));
account += money;
way = Number(prompt("存款成功,请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
} else if (way === 2) {
money = Number(prompt("请输入取款金额"));
if(account - money <= 0){
way = Number(prompt("余额不足,请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
}else{
account -= money;
alert("取款成功");
way = Number(prompt("请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
}
} else if (way === 3) {
alert(`您当前的余额为:${account}`);
way = Number(prompt("请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
} else if (way === 4) {
alert("感谢您的使用,再见!");
break;
}else{
alert("请输入正确的操作序号!!!");
way = 0;
}
}
法二:使用switch语句
let account = 0,way = 0,money = 0;
while(true){
if(way === 4){
alert("感谢您的使用,再见!");
break;
}
switch(way){
case 0:
way = Number(prompt("请选择您的操作:1、存款;2、取款;3、查看余额;4、退出"));
break;
case 1:
money = Number(prompt("请输入存款金额"));
account += money;
way = Number(prompt("存款成功,请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
break;
case 2:
money = Number(prompt("请输入取款金额"));
if(account - money <= 0){
way = Number(prompt("余额不足,请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
}else{
account -= money;
alert("取款成功");
way = Number(prompt("请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
}
break;
case 3:
alert(`您当前的余额为:${account}`);
way = Number(prompt("请选择您的操作:0、返回上一级;4、退出"));
if(way !== 0 && way !== 4){
alert("请输入正确的操作序号!!!");
alert("自动返回上一级");
way = 0;
}
break;
default:
alert("请输入正确的操作序号!!!");
way = 0;
break;
}
}
(2)continue关键字
continue关键字
在循环语句中表示继续,跳过本次循环,直接进入到下一次循环中
举例:
let i = 1;
while(i <= 10){
if(i == 6){
console.log('跳出本次循环');
continue;
}
console.log(`当前数字是:${i}`);
i++;
}
console.log(`此时i的数字是:${i}`);
5、while循环语句
一般用于不确定循环次数的循环
(1)基本语法:
初始化一个变量
while(条件){
要循环执行的代码(循环体代码)
修改变量的值
}
(2)语法解释:
- 初始化的变量(定义变量并赋值)不能随便定义,一定是while循环中用到的变量
- 程序会自动将变量的值带入while循环的条件中,判断条件是否成立,如果成立,则立即执行循环体中的代码
- 执行完循环体中的代码后,在修改变量的值,然后将修改后的值再带入到条件中,判断条件是否成立,如果成立,则继续执行循环体中的代码
- 只要条件不成立,那么循环体中的代码不会执行
(3)举例:
例1:要求输出十次"月薪过万"
let i = 1;
while(i <= 10){
console.log("月薪过万");
i++;
}
例2:输出1~100
let i = 1;
while(i <= 100){
console.log(`当前数字是:${i}`);
i++;
}
例3:计算1~100的所有数字的和
let i = 1,sum = 0;
while(i <= 100){
sum += i;
i++;
}
console.log(`1~100的所有数字和:${sum}`);
例4:计算1~100的所有偶数的和
let i = 1,sum = 0;
while(i <= 100){
if(i % 2 ==0){
sum += i;
}
i++;
}
console.log(`1~100的所有偶数和:${sum}`);
(4)注意事项:
注意死循环!!!:如果循环中没有修改变量的值,条件永远成立,循环体代码就会一直执行(浏览器卡死)
6、for循环语句
一般用于循环次数确定的循环
(1)基本语法:
for(初始化变量;条件;变量自增/减){
循环体代码
}
(2) 语法解释:
- 初始化变量,变量也必须要和后面的条件有关系,条件中所用的的变量就是需要初始化的变量
- 初始化变量后,程序会将变量带入条件中,判断条件是否成立(true),如果成立,则立即执行循环体中代码
- 执行完循环体代码,则执行变量自增或自减,将修改后的值重新带入条件中,条件成立则继续执行循环体中的代码
- 只有条件不成立(false),那么循环体中的代码不会执行
(3)案例
例1:要求输出十次"月薪过万"
for(let i = 1;i <= 10;i++){
console.log("月薪过万");
}
例2:输出1~100
for(let i = 1;i <= 100;i++){
console.log(`当前数字是:${i}`);
}
例3:计算1~100的所有数字的和
let sum = 0;
for(let i = 1;i <= 100;i++){
sum += i;
}
console.log(`1~100的所有数字和:${sum}`);
例4:计算1~100的所有偶数的和
let sum = 0;
for(let i = 1;i <= 100;i++){
if(i % 2 ==0){
sum += i;
}
}
console.log(`1~100的所有偶数和:${sum}`);
例5:在页面中打印五个五角星
for(let i = 1;i <= 5;i++){
document.write('★');
}
例6:遍历数组['马超','赵云','张飞','关羽','黄忠']
let arry = ['马超','赵云','张飞','关羽','黄忠'];
for(let i = 0;i < arry.length;i++){
document.write(arry[i] + "</br>");
}
例7:打印5*5的五角星
for(let i = 0;i < 5;i++){
for(let j = 0;j < 5;j++){
document.write('★');
}
document.write("</br>");
}
例8:打印指定行数的三角形排列的五角星
代码一:倒三角◤
let h = Number(prompt("请输入三的高"));
for(let i = 0;i < h;i++){
for(let j = i;j < h;j++){
document.write('★');
}
document.write("</br>");
}
代码二:正三角◣
let h = Number(prompt("请输入三的高"));
for(let i = 0;i < h;i++){
for(let j = 0;j < i;j++){
document.write('★');
}
document.write("</br>");
}
例9:通过用户输入的值打印五角星构成的金字塔,高度为用户输入的值
let h = Number(prompt("请输入金字塔的高"));
for(let i = 1;i <= h;i++){
for(let k = h - i;k > 0;k--){
document.write('\t');
if(k == 0){
break;
}
}
for(let j = 1;j <= i * 2 - 1;j++){
document.write('★');
}
document.write("</br>");
}
例10:打印九九乘法表
JS代码
for(let i = 1;i <= 9;i++){
for(let j = 1;j <= i;j++){
document.write(`<span>${j} * ${i} = ${j * i}</span>`);
}
document.write("</br>");
}
CSS代码
span {
display: inline-block;
width: 90px;
padding: 5px 10px;
margin: 2px;
border: 1px solid;
text-align: center;
}
html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS基础——九九乘法表</title>
<link rel="stylesheet" type="text/css" href="./JS基础.css">
</head>
<body>
<script src="./JS基础.js"></script>
</body>
</html>
(4)注意事项:
初始化变量时,let关键字不可省且不可以使用const
Comments | NOTHING