WEBSTORM前端 —— 第4章：JavaScript —— 第5节：语句

<!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>
</head>

<body>
  <script>
    // 单分支语句
    // if (false) {
    //   console.log('执行语句')
    // }
    // if (3 > 5) {
    //   console.log('执行语句')
    // }
    // if (2 === '2') {
    //   console.log('执行语句')
    // }
    //  1. 除了0 所有的数字都为真
    //   if (0) {
    //     console.log('执行语句')
    //   }
    // 2.除了 '' 所有的字符串都为真 true
    // if ('pink老师') {
    //   console.log('执行语句')
    // }
    // if ('') {
    //   console.log('执行语句')
    // }
    // // if ('') console.log('执行语句')

    // 1. 用户输入
    let score = +prompt('请输入成绩')
    // 2. 进行判断输出
    if (score >= 700) {
      alert('恭喜考入黑马程序员')
    }
    console.log('-----------------')

  </script>
</body>

</html>

③双分支if语法

练习1：判断用户登录案例

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

分析：

①：弹出输入框，分别输入用户名和密码

②：通过if语句判断，如果用户名是pink，并且密码是123456，则执行if里面的语句，否则执行else 里面的语句。

<!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>
</head>

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

</html>

练习2：判断闰年案例

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

分析：

①：能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年

②：需要逻辑运算符

<!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>
</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>

④多分支if语法

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

Ⅱ.释义：

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

Ⅲ.练习：输入成绩案例

需求：根据输入不同的成绩，反馈不同的评价

注：

①：成绩90以上是优秀

②：成绩70~90是良好

③：成绩是60~70之间是及格

④：成绩60分以下是不及格

<!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>
</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>

2）三元运算符

①使用场景

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

②符号

? 与 : 配合使用

③语法

一般用来取值

<!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>
</head>

<body>
  <script>
    // 三元运算符
    // 条件 ? 代码1 : 代码2
    // console.log(3 > 5 ? 3 : 5)
    // if (3 < 5) {
    //   alert('真的')
    // } else {
    //   alert('假的')
    // }
    // 3 < 5 ? alert('真的')  : alert('假的')

    let sum = 3 < 5 ? 3 : 5
    console.log(sum)
  </script>
</body>

</html>

④案例1：判断2个数的最大值

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

分析：

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

<!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>
</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>

⑤案例2：数字补0案例

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

分析：

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

<!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>
</head>

<body>
  <script>
    // let age = 18 
    // age = age + 1
    //  age++

    // 1. 用户输入 
    let num = prompt('请您输入一个数字:')
    // 2. 判断输出- 小于10才补0
    // num = num < 10 ? 0 + num : num
    num = num >= 10 ? num : 0 + num
    alert(num)

  </script>
</body>

</html>

3）switch 语句

①释义

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

②注意事项

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

<!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>
</head>

<body>
  <script>
    switch (2) {
      case 1:
        console.log('您选择的是1')
        break  // 退出switch
      case 2:
        console.log('您选择的是2')
        break  // 退出switch
      case 3:
        console.log('您选择的是3')
        break  // 退出switch
      default:
        console.log('没有符合条件的')
    }
  </script>
</body>

</html>

③案例：简单计算器

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

分析：

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

<!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>
</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>

（3）循环语句

1）断点调试

①作用

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

②浏览器打开调试界面

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

③断点

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

<!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>
</head>

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

</html>

2）while 循环

①while 循环基本语法

②释义

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

③while 循环三要素

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

所以，while循环需要具备三要素：

<!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>
</head>

<body>
  <script>
    // // 1. 变量的起始值
    // let i = 1
    // // 2. 终止条件
    // while (i <= 3) {
    //   document.write('我要循环三次 <br>')
    //   // 3. 变量的变化量
    //   i++
    // }
    // 1. 变量的起始值
    let end = +prompt('请输入次数:')
    let i = 1
    // 2. 终止条件
    while (i <= end) {
      document.write('我要循环三次 <br>')
      // 3. 变量的变化量
      i++
    }

  </script>
</body>

</html>

④案例：While 练习

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

1. 页面输出1-100

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

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

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

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

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

<!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>
</head>

<body>
  <script>
    // let age = 18
    // age = age + 1
    // age += 1
    // 1. 页面输出1~100
    // let i = 1
    // while (i <= 100) {
    //   document.write(`这是第${i}个数<br>`)
    //   i++
    // }
    // 2. 页面输出1~100 累加和
    // let i = 1  // 变量的起始值
    // let sum = 0  // 累加和变量
    // while (i <= 100) {
    //   // 把i 累加到 sum 里面
    //   // sum = sum + i
    //   sum += i
    //   i++
    // }
    // console.log(sum) // 5050
    // 3. 页面输出1~100 偶数和
    let i = 1
    let sum = 0
    while (i <= 100) {
      // 筛选偶数 只有偶数才累加
      if (i % 2 === 0) {
        sum = sum + i
      }
      // 每次循环都要自加
      i++
    }
    console.log(sum)
  </script>
</body>

</html>

3）循环退出

①循环结束

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

②区别

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

<!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>
</head>

<body>
  <script>
    // let i = 1
    // while (i <= 5) {
    //   console.log(i)
    //   if (i === 3) {
    //     break  // 退出循环
    //   }
    //   i++

    // }


    let i = 1
    while (i <= 5) {
      if (i === 3) {
        i++
        continue
      }
      console.log(i)
      i++

    }
  </script>
</body>

</html>

③案例：页面弹框

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

分析：

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

<!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>
</head>

<body>
  <script>
    while (true) {
      let str = prompt('你爱我吗')
      // 退出条件 爱
      if (str === '爱') {
        break
      }
    }
  </script>
</body>

</html>

4）for 循环

①作用

重复执行代码

②好处

把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

<!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>
</head>

<body>
  <script>
    // 利用for循环输出三句话 月薪过万
    for (let i = 1; i <= 3; i++) {
      document.write('月薪过万<br>')
    }
    // 课堂练习： 输出10句月薪过万，并说出for循环的执行过程
  </script>
</body>

</html>

③练习：循环练习

1. 利用for循环输出1~100岁

2. 求1-100之间所有的偶数和

3. 页面中打印5个小星星

4. for循环的最大价值：循环数组

需求：请将数组 [‘马超’，‘赵云’， ‘张飞’, ‘关羽‘，’黄忠’] 依次打印出来

<!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>
</head>

<body>
  <script>
    // 1. 输出1~100岁
    // 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) {
    //     // 把i加到sum里面去
    //     // sum = sum + i
    //     sum += i
    //   }
    // }
    // document.write(`1~100之间的偶数和是: ${sum}`)
    // 3. 页面打印5个小星星
    // for (let i = 1; i <= 5; i++) {
    //   document.write('★')
    // }
    // 4. 打印数组
    let arr = ['刘德华', '刘晓强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']
    // console.log(arr[0])
    // console.log(arr[1])
    // console.log(arr[2])
    // console.log(arr[3])
    // i <= 4    长度 - 1
    // for (let i = 0; i <= arr.length - 1; i++) {
    //   console.log(arr[i])
    // }
    // 必须从0开始，因为数组索引号从0开始  arr.length = 6
    // 遍历数组 ：  从第一个循环到最后一个
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i])
    }

    let arr1 = []
    console.log(arr1)
    console.log(arr1[0]) // undefined
    console.log(arr1[1]) // undefined
  </script>
</body>

</html>

④退出循环

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

<!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>
</head>

<body>
  <script>
    // for (let i = 1; i <= 5; i++) {
    //   if (i === 3) {
    //     continue  // 退出本次循环，本次循环中 continue下面的语句不在执行
    //   }
    //   console.log(i)
    //   document.write(i)
    // }

    // for (let i = 1; i <= 5; i++) {
    //   if (i === 3) {
    //     break  // 退出整个循环 结束循环
    //   }
    //   console.log(i)
    //   document.write(i)
    // }
    // 无限循环
    for (; ;) {
      console.log(11)
    }
  </script>
</body>

</html>

5）for 循环嵌套

一个循环里再套一个循环，一般用在for循环里

①思考

计算：假如每天记住5个单词，3天后一共能记住多少单词？

拆解：

Ø 第一天： 5个单词

Ø 第二天： 5个单词

Ø 第三天： 5个单词

<!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>
</head>

<body>
  <script>
    // 外层循环打印 第 n 天
    for (let i = 1; i <= 3; i++) {
      document.write(`第${i}天<br>`)
      // 里层循环打印 第几个单词
      for (let j = 1; j <= 5; j++) {
        document.write(`记住了第${j}个单词<br>`)
      }
    }
  </script>
</body>

</html>

②练习1：打印5行5列的星星

需求：页面中打印出5行5列的星星

分析：

利用双重for循环来做
外层循环控制打印行，内层循环控制每行打印几个（列）

升级版本：

用户输入行数和列数，打印对应的星星！

<!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>
</head>

<body>
  <script>
    // // 外层循环打印行数
    // for (let i = 1; i <= 5; i++) {
    //   // 里层循环打印几个星星
    //   for (let j = 1; j <= 5; j++) {
    //     document.write('☆')
    //   }
    //   // 进行换行显示
    //   document.write('<br>')
    // }

    let row = +prompt('请输入行数:')
    let col = +prompt('请输入列数:')
    // 外层循环打印行数
    for (let i = 1; i <= row; i++) {
      // 里层循环打印几个星星
      for (let j = 1; j <= col; j++) {
        document.write('☆')
      }
      // 进行换行显示
      document.write('<br>')
    }
  </script>
</body>

</html>

③练习2：打印倒三角形星星

需求：如图所示

分析：

利用双重for循环来做
外层循环控制打印行，内层循环控制每行打印几个（列）
内层循环的个数跟第几行是一一对应的

<!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>
</head>

<body>
  <script>
    // 1. 外层循环控制行数
    for (let i = 1; i <= 5; i++) {
      // 2. 里层循环控制列数（几个星星）
      for (let j = 1; j <= i; j++) {
        document.write('◆')
      }
      // 换行
      document.write('<br>')
    }

  </script>
</body>

</html>

④练习3：九九乘法表

需求：如图所示

分析：

①：只需要把刚才倒三角形星星做改动

②： ★ 换成 1 x 1 = 2 格式

<!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>
    span {
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
      border: 1px solid pink;
      margin: 2px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
      background-color: rgba(255, 192, 203, .1);
      text-align: center;
      color: hotpink;
    }
  </style>
</head>

<body>

  <script>
    // 1. 外层循环控制行数
    for (let i = 1; i <= 9; i++) {
      // 2. 里层循环控制列数
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j} X ${i} = ${i * j}</span>`)
      }
      // 换行
      document.write('<br>')
    }

  </script>
</body>

</html>

3.综合案例：简易ATM取款机案例

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

分析：

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

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

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

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

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

<!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>
</head>

<body>
  <script>
    // 1. 开始循环 输入框写到 循环里面
    // 3. 准备一个总的金额
    let money = 100
    while (true) {
      let re = +prompt(`
        请您选择操作：
        1.存钱
        2.取钱
        3.查看余额
        4.退出
        `)
      // 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环
      if (re === 4) {
        break
      }
      // 4. 根据输入做操作
      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>

亚马逊云科技技术品牌专区

更多推荐

2026年麒麟KYCP云计算认证深度解析：高级信创云人才的能力标尺

麒麟KYCP云计算是信创云平台高级运维认证，由工信部与麒麟软件联合颁发，聚焦KVM虚拟化、Kubernetes编排及信创云安全架构。考试含100题（单选70+多选20+判断10），90分钟需达70分合格，较初级KYCA难度显著提升。持证者可胜任政企信创云架构师等岗位，契合2026年信创规模化落地的人才缺口。备考建议分四阶段：基础巩固（1周）、K8s进阶（2-3周）、安全强化（1周）及模拟冲刺，需重