JavaScript02 - JavaScript - 前端 - 计算机科学

# JavaScript 基础第二天

# 今日目标

掌握常见运算符，为程序 “能思考” 做准备
掌握分支语句，让程序具备判断能力
掌握循环语句，让程序具备重复执行能力

# 一、运算符

# 1、赋值运算符

目标：能够使用赋值运算符简化代码

赋值运算符： 对变量进行赋值的运算符

已经学过的赋值运算符： = 将等号右边的值赋予给左边，要求左边必须是一个容器

其他赋值运算符：

使用这些运算符可以在对变量赋值时进行快速操作

我们以 += 赋值运算符来举例：

以前我们让一个变量加 1 如何做的？

1
2
3

let num = 1;
num = num + 1;
console.log(num);  // 2

现在我们有简单的做法：

1
2
3

let num = 1;
num += 1;
console.log(num);  // 2

# 2、一元运算符

目标：能够使用一元运算符做自增运算

众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

二元运算符
- 示例代码
  1
  let num = 10 + 20;
一元运算符
- 示例： 正负号

我们以前让一个变量每次 + 1 ，以前我们做的呢？

现在我们可以有更简便的写法了

自增
- 符号：++
- 作用：让变量的值 +1
自减
- 符号：--
- 作用：让变量的值 -1

使用场景：经常用于计数来使用。比如进行 10 次操作，用它来计算进行了多少次了

自增运算符的用法：

前置自增和后置自增如果参与运算就有区别 (难点，但是了解即可)

注意：

1、前置自增和后置自增独立使用时二者并没有差别！

2、一般开发中我们都是独立使用

3、 后面 i++ 后置自增会使用相对较多，并且都是单独使用

思考面试题：

1 2	let i = 1; console.log(i++ + ++i + i);

# 3、比较运算符

目标：能使用常见的比较运算符进行比较运算

比较运算符的介绍
使用场景：比较两个数据大小、是否相等
实际运用案例：
<img src="./images/ 比较运算符案例.png" style="width:100%">
比较运算符
> ：左边是否大于右边
<：左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边值是否相等 
===：左右两边是否类型和值都相等 
!==：左右两边是否不全等
比较结果为 boolean 类型，即只会得到 true 或 false
对比
= 单等是赋值
== 是判断
=== 是全等
 开发中判断是否相等，强烈推荐使用 ===
字符串比较，是比较的字符对应的 ASCII 码
从左往右依次比较，如果第一位一样再比较第二位，以此类推，字符串比较的少，了解即可
<img src="./images/ASCII.png" style="width:50%">
NaN 不等于任何值，包括它本身
涉及到 "NaN“ 都是 false
尽量不要比较小数，因为小数有精度问题
不同类型之间比较会发生隐式转换
最终把数据隐式转换转成 number 类型再比较
所以开发中，如果进行准确的比较我们更喜欢 === 或者！==

# 4、逻辑运算符

目标：掌握逻辑运算符，为程序 “能思考” 做准备

提问：如果我想判断一个变量 num 是否大于 5 且小于 10，怎么办？、

错误写法： 5 < num < 10

正确写法： num > 5 && num < 10

练习：判断一个数是 4 的倍数，且不是 100 的倍数
需求：用户输入一个，判断这个数能被 4 整除，但是不能被 100 整除，满足条件，页面弹出 true，否则弹出 false

# 5、运算符优先级

目标：掌握运算符优先级，能判断运算符执行的顺序

一元运算符里面的 逻辑非优先级很高
逻辑与比逻辑或优先级高

练习：

let a = 3 > 5 && 2 < 7 && 3 == 4
console.log(a);  

let b = 3 <= 4 || 3 > 1 || 3 != 2 
console.log(b); 

let c = 2 === "2"
console.log(c);  

let d = !c || b && a 
console.log(d);

# 二、语句

# 1、表达式和语句

目标：能说出表达式和语句的区别

# 1.1 表达式

表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。

示例代码：

1
2
3

x = 7;
3 + 4;
num++;

# 1.2 语句

语句是一段可以执行的代码。

比如： prompt () 可以弹出一个输入框，还有 if 语句 for 循环语句等等

# 1.3 表达式与语句的区别

** 表达式：** 因为表达式可被求值，所以它可以写在赋值语句的右侧。

表达式： num = 3 + 4

** 语句：** 而语句不一定有值，所以比如 alert () for 和 break 等语句就不能被用于赋值。

语句： alert () 弹出对话框 console.log () 控制台打印输出

某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如 continue 语句)

# 2、分支语句

** 目标：** 掌握流程控制，写出能 “思考” 的程序

# 2.1 程序三大流程控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构

# 2.2 分支语句

分支语句可以让我们有选择性的执行想要的代码

分支语句包含：

If 分支语句
三元运算符
switch 语句

# 2.3 if 语句

if 语句有三种使用：单分支、双分支、多分支

# + 单分支使用语法

1
2
3

if (条件) {
	满足条件所执行的代码
}

括号内的条件为 true 时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做～

单分支课堂案例 1：用户输入高考成绩，如果分数大于 700，则提示恭喜考入黑马程序员

# + 双分支 if 语法

if (条件) {
    满足条件所执行的代码
} esle {
    不满足条件所执行的代码
}

判断用户登录案例
需求：用户输入，用户名：pink，密码：123456，则提示登录成功，否则提示登录失败
分析：
①：弹出输入框，分别输入用户名和密码
②：通过 if 语句判断，如果用户名是 pink，并且密码是 123456，则执行 if 里面的语句，否则执行 else 里面的语句。
判断闰年案例
需求：让用户输入年份，判断这一年是闰年还是平年并弹出对应的警示框
分析：
①：能被 4 整除但不能被 100 整除，或者被 400 整除的年份是闰年，否则都是平年
②：需要逻辑运算符

# + 多分支 if 语法

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

释义：

1、先判断条件 1，若满足条件 1 就执行代码 1，其他不执行

2、若不满足则向下判断条件 2，满足条件 2 执行代码 2，其他不执行

3、若依然不满足继续往下判断，依次类推

4、若以上条件都不满足，执行 else 里的代码 n

注：可以写 N 个条件，但这里演示只写 2 个

输入成绩案例
需求：根据输入不同的成绩，反馈不同的评价
注：
①：成绩 90 以上是优秀
②：成绩 70~90 是良好
③：成绩是 60~70 之间是及格
④：成绩 60 分以下是不及格

# 2.4 三元运算符

目标：能利用三元运算符执行满足条件的语句

使用场景： 其实是比 if 双分支更简单的写法，可以使用三元表达式

符号：? 与：配合使用

语法：

1	条件 ? 满足条件的代码 : 不满足条件的代码

一般用来取值

案例：判断 2 个数的最大值
需求：用户输入 2 个数，控制台输出最大的值
分析：
①：用户输入 2 个数
②：利用三元运算符输出最大值
案例：数字补 0
需求：用户输入 1 个数，如果数字小于 10，则前面进行补 0，比如 09 03 等
分析：
①：为后期页面显示时间做铺垫
②：利用三元运算符补 0 计算

# 2.5 switch 语句

目标：能利用 switch 执行满足条件的语句

语法：

switch (数据) {
	case 值1:
        代码1
        break;
    case 值2:
        代码2
        break;
    default:
        代码n
        break;
}

释义：

1、找到跟小括号里数据全等的 case 值，并执行里面对应的代码

2、若没有全等 === 的则执行 default 里的代码

3、例：数据若跟值 2 全等，则执行代码 2

注意事项：

1、switch case 语句一般用于等值判断，不适合于区间判断

2、switch case 一般需要配合 break 关键字使用没有 break 会造成 case 穿透

案例：简单计算器
需求：用户输入 2 个数字，然后输入 + - * / 任何一个，可以计算结果
分析：
①：用户输入数字
②：用户输入不同算术运算符，可以去执行不同的运算 (switch)

# 3、循环语句

# 3.1 断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到 bug

操作步骤：

1、浏览器打开调试界面

2、按 F12 打开开发者工具

3、点到 sources 一栏

4、选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

# 3.2 while 循环

目标：掌握 while 循环语法，能重复执行某段代码

** 循环：** 重复执行一些操作， while : 在…. 期间，所以 while 循环 就是在 满足条件期间 ，重复执行某些代码。比如我们运行相同的代码输出 5 次（输出 5 句 “我学的很棒”）

学习路径：

while 循环基本语法
while 循环三要素

# + while 循环基本语法

示例代码：

1
2
3

while (循环条件) {
    要重复执行的代码（循环体）
}

释义：

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

# + while 循环三要素

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。所以，while 循环需要具备三要素 ：

变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或者自减）

示例代码：

let i = 1;
while(i <= 3) {
    document.write("我会循环三次");
    i++;
}

# + 循环案例

在页面中打印输出 10 句 “月薪过万”
需求：使用 while 循环，页面中打印，可以添加换行效果

# + While 练习

需求：使用 while 循环，页面中打印，可以添加换行效果

1、页面输出 1-100

核心思路：利用 i , 因为正好和数字对应

2、计算从 1 加到 100 的总和并输出

核心思路：声明累加和的变量 sum，每次把 i 加到 sum 里面

3、计算 1-100 之间的所有偶数和

核心思路：声明累加和的变量 sum，首先利用 if 语句把 i 里面是偶数筛选出来，把筛选的 i 加到 sum 里面

# 3.3 循环退出

目标：能说出 continue 和 break 的区别

continue：结束本次循环，继续下次循环

break：跳出所在的循环

区别：

1、continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用 continue

2、break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

# + 案例：页面弹框

需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框

分析：

①：循环条件永远为真，一直弹出对话框

②：循环的时候，重新让用户输入

③：如果用户输入的是：爱，则退出循环（break）

# 四、综合案例

简易 ATM 取款机案例

需求：用户可以选择存钱、取钱、查看余额和退出功能

分析：

①：循环的时候，需要反复提示输入框，所以提示框写到循环里面

②：退出的条件是用户输入了 4，如果是 4，则结束循环，不在弹窗

③：提前准备一个金额预先存储一个数额

④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

⑤：输入不同的值，可以使用 switch 来执行不同的操作

# JavaScript 基础第二天

# 今日目标

# 一、运算符

# 1、赋值运算符

# 2、一元运算符

# 3、比较运算符

# 4、逻辑运算符

# 5、运算符优先级

# 二、语句

# 1、表达式和语句

# 1.1 表达式

# 1.2 语句

# 1.3 表达式与语句的区别

# 2、分支语句

# 2.1 程序三大流程控制语句

# 2.2 分支语句

# 2.3 if 语句

# + 单分支使用语法

# + 双分支 if 语法

# + 多分支 if 语法

# 2.4 三元运算符

# 2.5 switch 语句

# 3、循环语句

# 3.1 断点调试

# 3.2 while 循环

# + while 循环基本语法

# + while 循环三要素

# + 循环案例

# + While 练习

# 3.3 循环退出

# + 案例：页面弹框

# 四、综合案例

JavaScript05

JavaScript04