JS基础教程：2023.3.1第三天-JavaScript流程控制运用

前言

记录时间：2023.3.1

坚持的第三天

JavaScript从入门到精通

学习javascript时间历程记录打卡

晚上8：00到22：30

JS基础总结

完成代码练习

1.赋值运算符

<!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 = 1
    // num = num + 1
    //采用赋值运算符
    //  num += 1
    num += 3

    console.log(num);
  </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>
    // let num = 10
    // num = num + 1
    // num += 1
    //1.前置自增
    // let i = 1
    // ++i
    // console.log(i) //2

    // let i = 1
    // console.log(++i + 1)  //3

    //1.后置自增
    // let i = 1
    // i++
    // console.log(i) //2
    // let i = 1
    // console.log(i++ + 1) //2
    
    //理解
    let i = 1
    console.log(i++ + ++i + i);

  </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>
    console.log(3 > 5) //false
    console.log(3 >= 3) //true
    console.log(2 == 2) //true

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

    // === 全等判断值和数据类型都一样才行
    //以后判断是否相等 用 ===
    console.log(2 === '2') //false 
    console.log(undefined === null); //false
    console.log(NaN === NaN) //false  NaN不等于任何，包括它自己

    console.log(2 !== '2') //true
    console.log( 2 != '2' ); //false
    console.log('------------------------')
    console.log('a' < 'b') //true
    console.log('aa' < 'aac') //true
    console.log('------------------------')

  </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>
    // 逻辑与 一假则假
    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(true || true) //true
    console.log(false || true) //true
    console.log(false || false) //false

    //逻辑非 取反
    console.log(!true) //false
    console.log(!false) //true

    let num = 2 
    console.log(num > 5 && num <  10) //false
  </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>
    //用户输入
    let num = +prompt('请输入一个数字:')
    //2.弹出结果
    alert(num % 4 === 0 &&  num % 100 !== 0)
  </script>
</body>

</html>

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

THE END