02_运算符 + 分支语句 + 循环语句

01_运算符

01_赋值运算符

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

已经学过的赋值运算符: = 将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值运算符:
+=
-=
*=
/=
%=
使用这些运算符可以在对变量赋值时进行快速操作

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

现在我们有一个简单的写法啦 ~~~

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num = 1

    // 1.采取赋值运算符: num += 1 等价于 num = num + 1
    num += 1
    console.log(num) // 2
  </script>
</body>

</html>

02_总结

= 赋值运算符执行过程?

将等号右边的值赋予给左边, 要求左边必须是一个容器

+= 出现是为了简化代码, 比如让 let num = 10, num 加 5 怎么写呢?

num += 5

02_一元运算符

01_一元运算符

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

二元运算符:

一元运算符:

正负号

问题: 我们以前让一个变量每次 +1, 以前我们做的呢?

02_自增自减

自增:

符号: ++
作用: 让变量的值 +1

自减:

符号: --
作用: 让变量的值 -1

使用场景: 经常用于 计数 来使用; 比如进行 10 次操作, 用它来计算进行了多少次了

03_自增单独使用

前置自增:

每执行 1 次, 当前变量数值加 1
其作用相当于 num += 1

后置自增:

每执行 1 次, 当前变量数值加 1
其作用相当于 num += 1

前置自增和后置自增单独使用没有区别

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.前置自增
    let i = 1
    ++i
    console.log(i)  // 2

    // 2.后置自增
    let y = 1
    y++
    console.log(y)  // 2

    // 3.前置自增和后置自增单独使用没有区别
  </script>
</body>

</html>

04_自增参与运算

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

前置自增:

前置自增: 先自加再使用 (记忆口诀: ++ 在前 先加)

后置自增:

后置自增: 先使用再自加 (记忆口诀: ++ 在后 后加)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.前置自增: i 先自加 1, 变成 2 之后, 在和后面的 1 相加
    let i = 1
    console.log(++i + 1)  // 3

    // 2.后置自增: 先和 1 相加, 先运算输出完毕后, y 再自加是 2
    let y = 1
    console.log(y++ + 1)  // 2
  </script>
</body>

</html>

但是:

前置自增和后置自增独立使用时二者并没有差别!
一般开发中我们都是独立使用
后面 i++ 后置自增会使用相对较多, 并且都是单独使用

05_总结

只需要一个表达式就可以运算的运算符叫一元运算符

自增运算符也是为了简化写法, 每次自加 1, 使用场景是什么?

经常用于计数来使用, 用来计算多少次

实际开发中, 我们一般都是单独使用的, 后置 ++ 更多

06_面试题

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let i = 1
    console.log(i++ + ++i + i)  // 7
  </script>
</body>

</html>

03_比较运算符

01_比较运算符的介绍

使用场景: 比较两个数据大小, 是否相等

实际运用例:

02_比较运算符的使用

比较运算符:

>: 左边是否大于右边
<: 左迈是否小于右边
>=: 左边是否大于或等于右边
<=: 左边是否小于或等于右边
==: 左右两边值是否相等
===: 左右两边是否类型和值都相等
!==: 左右两边是否不全等
比较结果为 boolean 类型, 即只会得到 true 或 false

对比:

= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等, 强烈推荐使用 ===

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    console.log(3 > 5) // false
    console.log(3 >= 3) // true
    console.log(2 == 2) // true

    // 1.比较运算符有隐式转换 把 '2' 转换为 2  双等号 只判断值
    console.log(2 == '2') // true
    console.log(undefined == null) // true

    // 2.=== 全等 判断 值 和 数据类型都一样才行; 以后判断是否相等 请用 ===  
    console.log(2 === '2') // false
    console.log(undefined === null) // false

    // 3.NaN 不等于任何人, 包括他自己
    console.log(NaN === NaN) // false

    console.log(2 !== '2') // true
    console.log(2 != '2') // false 
  </script>
</body>

</html>

03_比较运算符的细节

字符串比较, 是比较的字符对应的 ASCII 码

从左往右依次比较
如果第一位一样再比较第二位, 以此类推
比较的少, 了解即可

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.如果第一位一样再比较第二位, 以此类推
    console.log('a' < 'b') // true
    console.log('aa' < 'ab') // true
    console.log('aa' < 'aac') // true
  </script>
</body>

</html>

NaN 不等于任何值, 包括它本身

涉及到 "NaN" 都是 false

尽量不要比较小数, 因为小数有精度问题

不同类型之间比较会发生隐式转换

最终把数据隐式转换转成 number 类型再比较
所以开发中, 如果进行准确的比较我们 更喜欢 === 或者 !==

04_总结

= 和 == 和 === 怎么区别?

= 是赋值
== 是判断只要求值相等, 不要求数据类型一样即可返回 true
=== 是全等要求值和数据类型都一样返回的才是 true
开发中, 请使用 ===

比较运算符返回的结果是什么?

结果只有 2 个, true 或者 false

04_逻辑运算符 + 运算符优先级

01_逻辑运算符的介绍

提问: 如果我想判断一个变量 num 是否大于 5 且小于 10, 怎么办?

错误写法: 5 < num < 10

使用场景: 逻辑运算符用来解决多重条件判断

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

02_逻辑运算符的使用

逻辑运算符:

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.逻辑与 一假则假
    console.log(true && true) // true
    console.log(false && true) // false
    console.log(3 < 5 && 3 > 2) // true
    console.log(3 < 5 && 3 < 2) // false
    console.log('-----------------------')
    

    // 2.逻辑或 一真则真
    console.log(true || true) // true
    console.log(false || true) // true
    console.log(false || false) // false
    console.log('-----------------------')

    // 3.逻辑非  取反
    console.log(!true) // false
    console.log(!false) // true
  </script>
</body>

</html>

03_总结

逻辑运算符有那三个?

与(&&) 或(||) 非(!)

判断一个变量 num 是否大于 5 且小于 10 怎么写?

num > 5 && num < 10

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num = 6
    console.log(num > 5 && num < 10) // true
  </script>
</body>

</html>

04_判断一个数是 4 的倍数, 且不是 100 的倍数

需求: 用户输入一个, 判断这个数能被 4 整除, 但是不能被 100 整除, 满足条件, 页面弹出 true, 否则弹出 false

分析:

用户输入
判断条件, 看余数是不是 0, 如果是 0 就是能被整除, 余数不是 0, 则不能被整除

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入
    let num = +prompt('请输入一个数字: ')
    
    // 2.弹出结果
    alert(num % 4 === 0 && num % 100 !== 0)
  </script>
</body>

</html>

05_运算符优先级

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let a = 3 > 5 && 2 < 7 && 3 == 4
    console.log(a) // false

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

    let c = 2 === "2"
    console.log(c) // false

    let d = !c || b && a
    console.log(d) // true
  </script>
</body>

</html>

02_分支语句

01_if 单分支语句

01_表达式和语句

表达式:

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

语句:

语句是一段可以执行的代码
比如: prompt() 可以弹出一个输入框, 还有 if 语句 for 循环语句等等

区别:

表达式: 因为表达式可被求值, 所以它可以写在赋值语句的右侧
表达式 num = 3 + 4
语句: 而语句不一定有值, 所以比如 alert() for 和 break 等语句就不能被用于赋值
语句 alert() 弹出对话框 console.log() 控制台打印输出

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

02_总结

表达式和语句的区别

因为表达式可被求值, 所以它可以写在赋值语句的右侧
而语句不一定有值, 所以比如 alert() for 和 break 等语句就不能被用于赋值

03_程序三大流程控制语句

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

04_分支语句

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

分支语句包含:

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

05_if 单分支语句

if 语句有三种使用: 单分支, 双分支, 多分支

单分支使用语法:

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.单分支语句
    if (false) {
      console.log('执行语句')
    }

    // 2.小括号内的结果若不是布尔类型时, 会发生隐式转换转为布尔类型
    if (3 > 5) {
      console.log('执行语句')
    }

    // 3.除了 0 所有的数字都为真
    if (0) {
      console.log('执行语句')
    }

    // 4.除了 '' 所有的字符串都为真 true
    if ('') {
      console.log('执行语句')
    }

    // 5.如果大括号只有一个语句, 大括号可以省略, 但是, 俺们不提倡这么做
    if ('') console.log('执行语句')
  </script>
</body>

</html>

06_判断成绩案例

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入
    let score = +prompt('请输入成绩')

    // 2.进行判断输出
    if (score >= 700) {
      alert('恭喜考入黑马程序员')
    }
  </script>
</body>

</html>

02_if 双分支语句

01_if 双分支语法

02_判断用户登录案例

需求: 用户输入, 用户名: pink, 密码: 123456, 则提示登录成功, 否则提示登录失败

分析:

弹出输入框, 分别输入用户名和密码
通过 if 语句判断, 如果用户名是 pink, 并且 密码是 123456, 则执行 if 里面的语句, 否则执行 else 里面的语句

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1. 用户输入
    let uname = prompt('请输入用户名: ')
    let pwd = prompt('请输入密码: ')

    // 2. 判断输出
    if (uname === 'pink' && pwd === '123456') {
      alert('恭喜你登录成功')
    } else {
      alert('用户名或者密码错误')
    }
  </script>
</body>

</html>

03_判断闰年案例

需求: 让用户输入年份, 判断这一年是闰年还是平年并弹出对应的警示框

分析:

能被 4 整除但不能被 100 整除, 或者被 400 整除的年份是闰年, 否则都是平年
需要逻辑运算符

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入
    let year = +prompt('请输入年份')

    // 2.判断输出
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(`${year} 年是闰年`)
    } else {
      alert(`${year} 年是平年`)
    }
  </script>
</body>

</html>

03_if 多分支语句

01_if 多分支语法

使用场景: 适合于有多个结果的时候, 比如学习成绩可以分为: 优良中差

释义:

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

02_输入成绩案例

需求: 根据输入不同的成绩, 反馈不同的评价

注:

成绩 90 以上是优秀
成绩 70~90 是良好
成绩是 60~70 之间是及格
成绩 60 分以下是不及格

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入
    let score = +prompt('请输入成绩: ')

    // 2.判断输出
    if (score >= 90) {
      alert('成绩优秀, 宝贝, 你是我的骄傲')
    } else if (score >= 70) {
      alert('成绩良好, 宝贝, 你要加油哦~~')
    } else if (score >= 60) {
      alert('成绩及格, 宝贝, 你很危险~')
    } else {
      alert('成绩不及格, 宝贝, 我不想和你说话, 我只想用鞭子和你说话~')
    }
  </script>
</body>

</html>

04_三元运算符

01_三元运算符

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

符号: ? 与 : 配合使用

语法:

一般用来取值

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.三元运算符; 条件 ? 代码 1 : 代码 2
    console.log(3 > 5 ? 3 : 5)  // 5

    if (3 < 5) {
      console.log('真的') // 真的
    } else {
      console.log('假的')
    }
    3 < 5 ? console.log('真的') : console.log('假的') // 真的

    // 2.一般用来取值
    let sum = 3 < 5 ? 3 : 5
    console.log(sum) // 3
  </script>
</body>

</html>

02_判断 2 个数的最大值

需求: 用户输入 2 个数, 控制台输出最大的值

分析:

用户输入 2 个数
利用三元运算符输出最大值

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入
    let num1 = +prompt('请您输入第一个数: ')
    let num2 = +prompt('请您输入第二个数: ')

    // 2.判断输出 ==> 三元运算符
    // if (num1 > num2) {
    //   alert(num1)
    // } else {
    //   alert(num2)
    // }
    num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)
  </script>
</body>

</html>

05_数字补 0 案例

01_数字补 0 案例

需求: 用户输入 1 个数, 如果数字小于 10, 则前面进行补 0, 比如 09 03 等

分析:

后期页面显示时间做铺垫
利用三元运算符补 0 计算

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入 
    let num = prompt('请您输入一个数字: ')

    // 2.判断输出 ==> 小于 10 才补 0
    num = num < 10 ? 0 + num : num
    // num = num >= 10 ? num : 0 + num
    
    alert(num)
  </script>
</body>

</html>

06_switch 分支语句

01_switch 语句

释义:

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

注意事项:

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.小括号里数据 全等 case 的值, 并执行里面对应的代码
    switch (2) {
      case 1:
        console.log('您选择的是 1')
        break // 退出 switch
      case 2:
        console.log('您选择的是 2')
        // break // 3.没有 break 会造成 case 穿透
      case 3:
        console.log('您选择的是 3')
        break // 退出switch
      default:
        // 2.若没有全等 === 的则执行 default 里的代码
        console.log('没有符合条件的')
    }
  </script>
</body>

</html>

02_简单计算器案例

需求: 用户输入 2 个数字, 然后输入 + - * / 任何一个, 可以计算结果

分析:

用户输入数字
用户输入不同算术运算符, 可以去执行不同的运算 (switch)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入 2 个数字, 操作符号  + - *  / 
    let num1 = +prompt('请您输入第一个数字: ')
    let num2 = +prompt('请您输入第二个数字: ')
    let sp = prompt('请您输入 + - * / 其中一个: ')

    // 2.判断输出
    switch (sp) {
      case '+':
        alert(`两个数的加法操作是 ${num1 + num2}`)
        break
      case '-':
        alert(`两个数的减法操作是 ${num1 - num2}`)
        break
      case '*':
        alert(`两个数的乘法操作是 ${num1 * num2}`)
        break
      case '/':
        alert(`两个数的除法操作是 ${num1 / num2}`)
        break
      default:
        alert(`你干啥咧, 请输入 + - * /`)
    } 
  </script>
</body>

</html>

07_if 多分支语句和 switch 的区别

01_if 多分支语句和 switch 的区别

共同点

都能实现多分支选择, 多选一
大部分情况下可以互换

区别:

switch...case 语句通常处理 case 为比较 确定值 的情况, 而 if...else... 语句更加灵活, 通常用于 范围判断 (大于, 等于某个范围)
switch 语句进行判断后直接执行到程序的语句, 效率更高, 而 if...else 语句有几种判断条件, 就得判断多少次
switch 一定要注意必须是 === 全等, 一定注意数据类型, 同时注意 break 否则会有穿透效果

结论:

当分支比较少时, if...else 语句执行效率高
当分支比较多时, switch 语句执行效率高, 而且结构更清晰

03_循环语句

01_断点调试

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

浏览器打开调试界面

按 F12 打开开发者工具
点到 sources 一栏
选择代码文件

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num = 10
    num = num + 1
    console.log(num)
  </script>
</body>

</html>

02_while 循环

01_while 循环

循环: 重复执行一些操作, while: 在...期间, 所以 while 循环 就是在 满足条件 期间, 重复执行某些代码

比如我们运行相同的代码输出 5 次 (输出 5 句 "我学的很棒")

02_while 循环基本语法

释义:

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

03_while 循环三要素

循环的本质就是以某个变量为起始值, 然后不断产生变化量, 慢慢靠近终止条件的过程

所以, while 循环需要具备三要素:

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

03_总结

while 循环的作用是什么?

在满足条件期间, 重复执行某些代码

while 循环三要素是什么?

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.变量的起始值
    let i = 1

    // 2.终止条件
    while (i <= 3) {
      document.write('我要循环三次 <br>')
      
      // 3.变量的变化量
      i++
    }
  </script>
</body>

</html>

思考: 能不能改进, 让用户输入打印输出的个数呢?

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.变量的起始值
    let end = +prompt('请输入次数:')
    let i = 1

    // 2.终止条件
    while (i <= end) {
      document.write('我要循环三次 <br>')
      
      // 3.变量的变化量
      i++
    }
  </script>
</body>

</html>

03_while 循环练习

01_页面输出 1~100

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.页面输出 1~100
    let i = 1
    while (i <= 100) {
      document.write(`这是第 ${i} 个数 <br>`)
      i++
    }
  </script>
</body>

</html>

02_计算从 1 加到 100 的总和并输出

核心思路:

声明累加和的变量 sum
每次把 i 加到 sum 里面

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.页面输出 1~100 累加和
    let i = 1 // 变量的起始值
    let sum = 0 // 声明累加和的变量 sum

    while (i <= 100) {
      // 2.每次把 i 加到 sum 里面: sum = sum + i
      sum += i
      i++
    }
    
    console.log(sum) // 5050
  </script>
</body>

</html>

03_计算 1~100 之间的所有偶数和

核心思路:

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.计算 1~100 之间的所有偶数和
    let i = 1 // 变量的起始值
    let sum = 0 // 声明累加和的变量 sum

    while (i <= 100) {
      // 2.首先利用 if 语句把 i 里面是偶数筛选出来
      if (i % 2 === 0) {
        sum = sum + i // 3.把 筛选的 i 加到 sum 里面
      }

      i++
    }

    console.log(sum) // 2550
  </script>
</body>

</html>

04_退出循环

01_循环结束

break: 退出循环
continue: 结束本次循环, 继续下次循环

区别:

continue 退出本次循环, 一般用于排除或者跳过某一个选项的时候, 可以使用 continue
break 退出整个循环, 一般用于结果已经得到, 后续的循环不需要的时候可以使用

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let i = 1
    while (i <= 5) {
      if (i === 3) {
        break // 1.退出循环
      }
      console.log(`我要吃第 ${i} 个包子`);
      i++
    }

    let j = 1
    while (j <= 5) {
      if (j === 3) {
        j++
        continue // 2.结束本次循环, 继续下次循环
      }
      console.log(`我要吃第 ${j} 个包子`)
      j++
    }
  </script>
</body>

</html>

02_你爱我吗案例

需求: 页面弹出对话框, '你爱我吗', 如果输入 '爱', 则结束, 否则一直弹出对话框

分析:

循环条件永远为真, 一直弹出对话框
循环的时候, 重新让用户输入
如果用户输入的是: 爱, 则退出循环 (break)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.循环条件永远为真, 一直弹出对话框
    while (true) {
      // 2.循环的时候, 重新让用户输入
      let str = prompt('你爱我吗')

      // 3.如果用户输入的是: 爱, 则退出循环 (break)
      if (str === '爱') {
        break
      }
    }
  </script>
</body>

</html>

04_综合案例

01_简易 ATM 取款机

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

分析:

循环的时候, 需要反复提示输入框, 所以提示框写到循环里面
退出的条件是用户输入了 4, 如果是 4, 则结束循环, 不在弹窗
提前准备一个金额预先存储一个数额
取钱则是减法操作, 存钱则是加法操作, 查看余额则是直接显示金额
输入不同的值, 可以使用 switch 来执行不同的操作

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 3.提前准备一个金额预先存储一个数额
    let money = 100

    while (true) {
      // 1.循环的时候, 需要反复提示输入框, 所以提示框写到循环里面
      let re = +prompt(`
        请您选择操作: 
        1.存钱
        2.取钱
        3.查看余额
        4.退出
      `)

      // 2.退出的条件是用户输入了 4, 如果是 4, 则结束循环, 不在弹窗
      if (re === 4) {
        break
      }

      // 4.输入不同的值, 可以使用 switch 来执行不同的操作
      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>
</body>

</html>

02_运算符 + 分支语句 + 循环语句 ​

01_运算符 ​

01_赋值运算符 ​

02_一元运算符 ​

03_比较运算符 ​

04_逻辑运算符 + 运算符优先级 ​

02_分支语句 ​

01_if 单分支语句 ​

02_if 双分支语句 ​

03_if 多分支语句 ​

04_三元运算符 ​

05_数字补 0 案例 ​

06_switch 分支语句 ​

07_if 多分支语句 和 switch 的区别 ​

03_循环语句 ​

01_断点调试 ​

02_while 循环 ​

03_while 循环练习 ​

04_退出循环 ​

04_综合案例 ​

01_简易 ATM 取款机 ​

02_运算符 + 分支语句 + 循环语句

01_运算符

01_赋值运算符

02_一元运算符

03_比较运算符

04_逻辑运算符 + 运算符优先级

02_分支语句

01_if 单分支语句

02_if 双分支语句

03_if 多分支语句

04_三元运算符

05_数字补 0 案例

06_switch 分支语句

07_if 多分支语句和 switch 的区别

03_循环语句

01_断点调试

02_while 循环

03_while 循环练习

04_退出循环

04_综合案例

01_简易 ATM 取款机