JavaScript基础（二）

最新推荐文章于 2025-11-23 16:56:34 发布

原创最新推荐文章于 2025-11-23 16:56:34 发布 · 379 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #笔记

一，运算符

1,1 赋值运算符

1,2 一元运算符

1.3 比较运算符

1.4 逻辑运算符

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

1.5 运算符优先级

二，语句

2.1 表达式和语句

2.2 分支语句

2. 分支语句

1.if 语句

<!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 grades = +prompt('请输入高考成绩')
      if (grades >= 700) {
        alert('恭喜考入黑马程序员！')
      }
    </script>
  </body>
</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 grades = +prompt('请输入高考成绩')
      //   if (grades >= 700) {
      //     alert('恭喜考入黑马程序员！')
      //   }
      // ------------------------------------------------------
      // 用户登录案例
      //   let name = prompt('请输入用户名')
      //   let password = prompt('请输入密码')
      //   if (name === 'pink' && password === '123456') {
      //     alert('登录成功')
      //   } else {
      //     alert('登录失败')
      //   }
      // --------------------------------------------------------------
      // 判断闰年案例
      let year = prompt('请输入年份')
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        alert(`${year}是闰年`)
      } else {
        alert(`${year}是平年`)
      }
    </script>
  </body>
</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 grades = +prompt('请输入成绩')
      if (grades >= 90) {
        alert('优秀')
      } else if (grades >= 70) {
        alert('良好')
      } else if (grades >= 60) {
        alert('及格')
      } else {
        alert('不及格')
      }
    </script>
  </body>
</html>

2. 三元运算符

<!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 num1 = +prompt('请输入第一个数字')
      let num2 = +prompt('请输入第二个数字')
      num1 > num2
        ? alert(`最大的那个数是${num1}`)
        : alert(`最大的那个数是${num2}`)
    </script>
  </body>
</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 = prompt('请输入一个数字')
      num < 10 ? alert(`已经为您补零${0 + num}`) : alert(num)
      //   ------------------------------------------------------------
      // 课程方法：
      //   num = num < 10 ? 0 + num : num
      //   alert(num)
    </script>
  </body>
</html>

3. switch语句

<!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 num1 = +prompt('请输入第一个数字')
      let num2 = +prompt('请输入第二个数字')
      let sym = +prompt('请输入四则运算中任意一个符号')
      switch (sym) {
        case '+':
          alert(`结果是：${num1 + num2}`)
          break
        case '-':
          alert(`结果是：${num1 - num2}`)
          break
        case '*':
          alert(`结果是：${num1 * num2}`)
          break

        default:
          alert(`结果是：${num1 / num2}`)
          break
      }
    </script>
  </body>
</html>

2.3 循环语句

1. 断点调试

2. while 循环

1. while 循环基本语法;

2. while 循环三要素

<!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 <= 10) {
        document.write('月薪过万<br>')
        i++
      }
    </script>
  </body>
</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++
      //   }
      // 2. 页面输出1~100 累加和
      // let i = 1
      // let sum = 0
      // while (i <= 100) {
      //   // sum = sum + i
      //   sum += i
      //   i++
      // }
      // console.log(sum)
      //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>

2.3 循环退出

<!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>
      while (true) {
        let love = prompt('你爱我吗？')
        // 退出条件 爱
        if (love === '爱') {
          break
        }
      }
    </script>
  </body>
</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 mo = 1000
      while (true) {
        let choose = +prompt(`
        请输入您的操作：
        1.存钱
        2.取钱
        3.查看余额
        4.退出
        `)
        if (choose === 4) {
          break
        }
        switch (choose) {
          case 1:
            // 存钱
            let cun = +prompt('请输入存款金额：')
            mo = mo + cun
            break
          case 2:
            // 取钱
            let qu = +prompt('请输入取款金额：')
            mo = mo - qu
            break
          case 3:
            // 余额
            alert(`您的银行卡余额是${mo}`)
            break
        }
      }
    </script>
  </body>
</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~20并输出
      //   let i = 1
      //   while (i <= 20) {
      //     console.log(`${i}`)
      //     i++
      //   }
      //   ---------------------------------------
      // 2. 计算1~1000之间的累加和
      //   let i = 1
      //   let sum = 0
      //   while (i <= 1000) {
      //     sum = sum + i
      //     i++
      //   }
      //   console.log(sum)
      // -----------------------------------------------
      //   3.页面打印100~200之间可以被6整除的数
      //   let i = 100 //如果是区间的话 初始值为最小值
      //   while (i <= 200) {
      //     if (i % 6 === 0) {
      //       i++
      //       continue //结束本次循环 继续下一轮循环
      //     }
      //     console.log(`100~200之间可以被6整除的数是：${i}`)
      //     i++
      //   }
      //   --------------------------------------------------------
      // 4.弹窗输入两个数，页面输出最大的两个数（三元运算符）
      //   let num1 = +prompt('请输入第一个数字：')
      //   let num2 = +prompt('请输入第二个数字：')
      //   if (num1 > num2) {
      //     alert(`最大的那个数是${num1}`)
      //   } else {
      //     alert(`最大的那个数是${num2}`)
      //   }
    </script>
  </body>
</html>