JS基础教程：2023.3.2第四天-JavaScript流程控制使用

前言

记录时间：2023.3.2

坚持的第四天

JavaScript从入门到精通

学习javascript时间历程记录打卡

晚上8：00到23：00

JS基础总结

完成代码练习

1.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>
    // 单分支语句
    if (false) {
      console.log('执行语句')
    }
    if (3 > 5) {
      console.log('执行语句')
    }
    if (2 === '2') {
      console.log('执行语句')
    }
    //  1. 除了0 所有的数字都为真
      if (0) {
        console.log('执行语句')
      }
    // 2.除了 '' 所有的字符串都为真 true
    if ('try') {
      console.log('执行语句')
    }
    if ('') {
      console.log('执行语句')
    }
    // if ('') console.log('执行语句')

    // 1. 用户输入
    let score = +prompt('请输入成绩')
    // 2. 进行判断输出
    if (score >= 700) {
      alert('成绩通过')
    }
    console.log('-----------------')

  </script>
</body>

</html>

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

</html>

3.闰年案例

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

4.判断成绩案例

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

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>
    // 三元运算符
    // 条件 ? 代码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>

6.求最大值案例

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

文章版权归作者所有，未经允许请勿转载。

THE END