0
点赞
收藏
分享

微信扫一扫

JavaScript基础（3）逻辑运算符，一元运算符，分支语句，if语句，switch语句，断电调试，while循环

在觉 2022-04-05 阅读 44
前端csscss3html5html

在这里插入图片描述

<!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)
        // console.log(false && true)
        // 逻辑或  一真则真
        // console.log(false || true)
        // console.log(false || false)
        // 逻辑非  取反
        // console.log(!true)
        // console.log(!false)

        // 有5个值是当 false 来看的   其余是真的
        //  false   数字0   ''  undefined   null   


        // function fun(x, y) {
        //     x = x || 0
        //     y = y || 0

        //     x + y
        // }
        // fun()


    </script>
</body>

</html>

console.log(true&&false)
!true
取反

<!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
        // i = i + 5
        // console.log(i)




        let num = prompt('请输入一个数')
        // console.log(num)  控制台是空子字符串 '' 当假看
        num = num || 0
        // console.log(num)
        console.log(num % 4 === 0 && num % 100 !== 0)


        num++


        num + 1
    </script>
</body>

</html>

num%4===0&& num%100!==0
在这里插入图片描述
5<3 || 20
undefined || 20
null || 20

  1. 逻辑运算符有那三个？
     与(&&) 或(||) 非(!)

  2. 逻辑运算符短路运算符怎么执行的？
     只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
    判断一个数是4的倍数，且不是100的倍数
    需求：用户输入一个，判断这个数能被4整除，但是不能被100整除
    分析：
    ①：用户输入
    ②：控制台： 是否能被4整除并且100整除
    一元运算符里面逻辑非优先级很高
    一元运算符里面逻辑非的优先级很高
    逻辑与比逻辑或优先级高
    在这里插入图片描述
    一元运算符里面逻辑非优先级很高
    一元运算符里面逻辑非优先级很高
    逻辑与比逻辑或优先级高
    逻辑与比逻辑或优先级高
    先&&后||
    一元运算符里面逻辑非优先级很高
    逻辑与比逻辑或优先级很高
    逻辑与比逻辑或优先级高
    先&&后||
    先*/%后±
    一元运算符里面逻辑非优先级蘅皋
    先&&后||
    在这里插入图片描述
    表达式：
    表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果
     语句：
    js 整句或命令，js 语句是以分号结束（可以省略）
    比如： if语句 for 循环语句
    JS整句或者命令，js语句是以分号结束的，可以省略
     区别：
    表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)  表达式 3 + 4
     语句 alert() 弹出对话框
    其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事
    表达式可以计算出一个值，但是语句用来自行使某件事情发生的，做什么事情

  3. 表达式和语句的区别
     表达式计算出一个值 比如 3+5 x = 7
     语句用来自行以使某件事发生(做什么事)  alert()
     console.log()
     还比如我们接下来学的分支语句…
    2.2 分支语句
    目标：掌握流程控制，写出能“思考”的程序
    学习路径：

  4. 程序三大流程控制语句

  5. 分支语句

  6. 程序三大流程控制语句
     以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
     有的时候要根据条件选择执行代码，这种就叫分支结构
     某段代码被重复执行，就叫循环结构

顺序结构，从上往下，分支结构
有的时候要根据条件选择执行代码，分支结构
某段代码被重复执行，就叫循环结构
在这里插入图片描述

2. 分支语句

分支语句可以让我们有选择性的执行想要的代码
分支语句包含：
 If分支语句
 三元运算符
 switch 语句

  1. if语句
     if语句有三种使用：单分支、双分支、多分支
     单分支使用语法：在这里插入图片描述

 括号内的条件为true时，进入大括号里执行代码
 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
目标：能使用if语句执行满足条件的代码
 单分支课堂案例1：用户输入高考成绩，如果分数大于700，则提示恭喜考入黑马程序员
双分支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) {
        //     alert(11)
        // }
        // if 里面的小括号都会给我们转换为 布尔型   
        // false  0  ''  undefined  null  NaN
        // if (NaN) {
        //     console.log('真的')
        // } 
        else
    </script>
</body>

</html>

if(false){alert(11)}
false 0 ’ 'undefined null NaN
if(NaN){console.log(‘帧的’)}
if(false){alert(11)}
false 0 ‘’ undefined null NaN
false 0 ‘’ undefined null NaN

<!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 age = +prompt('请输入工龄')
        // let money = 10000
        // 2. 执行分支语句
        // if (age >= 1) {
        //     alert(`您实发工资:${money + 2000}`)
        // } else {
        //     alert(`您实发工资:${money}`)
        // }
        // 2. 计算闰年
        // 2.1 用户输入年份
        let year = +prompt('请输入年份：')
        // 2.2 执行分支语句
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
            alert(`${year}年是闰年`)
        } else {
            alert(`${year}年是平年`)
        }
    </script>
</body>

</html>

let year=+prompt(‘请输入年轻’)
if(year%4==-0&& year%100!0||uear%4000){alert(‘${year}年使闰年’)

<!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. 用户输入时间 等我们学api 自动获取时间
        let time = prompt('请输入小时：')
        // 2. 多分支判断
        if (time < 12) {
            document.write(`上午好，好好工作`)
        } else if (time < 18) {
            document.write(`下午好，好好工作`)
        } else if (time < 20) {
            document.write(`晚上好，好好加班`)
        } else {
            document.write(`夜深了，头发还有吗？`)

        }


        12 - 18   下午
        // 我们输入的时间 要大于12 并且小于 18 算下午
        // time >12 && time < 18
    </script>
</body>

</html>

<!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 ? 1 : 2)
        // console.log(false ? 1 : 2)

        // if (3 > 5) {
        //     alert('第一个')

        // } else {
        //      alert('第二个')
        // }

        // 3 > 5 ? alert('第一个') : alert('第二个')
        let num1 = 40
        let num2 = 30
        // num1 > num2 ? console.log(num1) : console.log(num2)

        // let re = num1 > num2 ? num1 : num2
        let re = num1 > num2 ? num1 : num2

        console.log(re)
        // let re = 3 + 5
    </script>
</body>

</html>

let num1=40
let num2=30
let re=num1>num2?num1:num2
console.log(re)

<!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 num = prompt('请您输入一个数字')
        // 2. 判断条件是 小于 10  则数字前面 + '0'   01 否则 不补
        // let t = num >= 10 ? num : '0' + num
        let t = num < 10 ? '0' + num : num
        document.write(t)
    </script>
</body>

</html>

let t=num<10?‘0’+num:um
document.write(t)
document.write(t)
let t=num<10?

<!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>
        div {
            color: #000;
            font-size: 12px;

        }
    </style>
</head>

<body>
    <script>
        let num1 = +prompt('请输入第一个数')
        let num2 = +prompt('请输入第二个数')
        let re = num1 > num2 ? num1 : num2
        document.write(`两个数最大的那个是${re}`)

        // if (3 > 5) {
        //     console.log(11)
        // }
    </script>
</body>

</html>

2.2.1 if语句
目标：能使用if语句执行满足条件的代码
 双分支课堂案例1：用户输入，如果工龄大于1年，年底奖金+2000， 否则年底没奖金
 双分支课堂案例2：让用户输入年份，判断这一年是闰年还是平年并输出
 能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
 需要逻辑运算符
释义：
 先判断条件1，若满足条件1就执行代码1，其他不执行
 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
 若依然不满足继续往下判断，依次类推
 若以上条件都不满足，执行else里的代码n  注：可以写N个条件，但这里演示只写2个
在这里插入图片描述
2. 分支语句
 分支语句可以让我们有选择性的执行想要的代码
 分支语句包含：
 If分支语句
 三元运算符
 switch 语句
分支语句包含:1if分支语句，三元运算符，switch语句
目标：能利用三元运算符执行满足条件的语句
 其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式
 符号：? 与 : 配合使用
 语法：
条件?满足条件执行代码:不满足条件执行的代码
一般用来取值
判断2个数的最大值
需求：用户输入2个数，控制台输出最大的值
分析： ①：用户输入2个数
②：利用三元运算符输出最大值

数字补0案例
需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09 03 等
分析： ①：为后期页面显示时间做铺垫
②：利用三元运算符 补 0 计算

目标：能利用switch执行满足条件的语句

switch(数据){
case 值1：
代码1
break
case 值2：
代码2
break
default:
代码n
break}
释义：
 找到跟小括号里数据全等的case值，并执行里面对应的代码
 若没有全等 === 的则执行default里的代码
 例：数据若跟值2全等，则执行代码2
找打小括号里的数据全等的case值，并执行里面对应的代码
如果没有全等的 ===则执行deafult里的代码，

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

switch case语句一般用于等职判断，不适合于区间判断
在这里插入图片描述
简单计算器
需求：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果
分析：
①：用户输入数字
②：用户输入不同算术运算符，可以去执行不同的运算 (switch)

  1. 程序三大流程控制
     顺序
     分支
     循环
  2. if语句
     三种形式
  3. switch语句
     全等判断
     break：结束switch语句，防止穿透
  4. 三元运算符
     也是双分支
     一般用来取值
    三元运算符：双分支，一般用来取值

2.3.1 断点调试

 作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
 浏览器打开调试界面

  1. 按F12打开开发者工具
  2. 点到sources一栏
  3. 选择代码文件
     断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来
    按F12打开开发者工具，点到sources一栏，选择代码文件
    断点：在某局代码上加的标记在某句代码上加的标记就叫做断点，当程序执行到这句有标记的代码会暂停下来。
    在这里插入图片描述

2.3.2 while 循环

目标：掌握while循环语法，能重复执行某段代码
循环：重复执行某段代码， 而 while : 在…. 期间

  1. while 循环语法
    while在。。。期间
    在这里插入图片描述
    while(玄幻条件）{
    要重复执行的代码（循环体）}
    释义：
     跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
     while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到
    小括号判断条件，直到括号内条件不满足，即跳出’
    循环：重复执行某段代码， 而 while : 在…. 期间
  2. while 循环注意事项：
    循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
    所以，循环需要具备三要素：
    在这里插入图片描述
    变量起始值
    终止条件，没有终止条件，循环会一直执行，造成死循环
    在这里插入图片描述
    终止条件，没有终止条件，循环会一直执行，造成死循环
    变量变化量，用自增或者自建
    在页面中打印输出10句“月薪过万”
    需求：使用while循环，页面中打印，可以添加换行效果
    能不能改进，让用户输入打印输出的个数呢？
    While 练习
    需求：使用while循环，页面中打印，可以添加换行效果
  3. 页面输出1-100
     核心思路： 利用 i ,因为正好和 数字对应
  4. 计算从1加到100的总和并输出
     核心思路：
     声明累加和的变量 sum
     每次把 i 加到 sum 里面
  5. 计算1-100之间的所有偶数和  核心思路：
     声明累加和的变量 sum
     首先利用if语句把 i 里面是偶数筛选出来
     把 筛选的 i 加到 sum 里面
    声明累加和的变量sum,首先利用if语句把i里面是偶数帅选出来，把帅选的i加到sum里面当中
     循环结束：
     continue：结束本次循环，继续下次循环
    循环结束:
    continue:结束本此循环，继续下次循环，结束本此循环，继续下次循环
    continue结束本此循环，继续下次循环
    break跳出所在的循环
    页面弹框
    需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框
    分析：
    ①：循环条件永远为真，一直弹出对话框
    ②：循环的时候，重新让用户输入
    ③：如果用户输入的是： 爱，则退出循环 （break）
    简易ATM取款机案例
    需求：用户可以选择存钱、取钱、查看余额和退出功能
    在这里插入图片描述
    简易ATM取款机案例
    需求：用户可以选择存钱、取钱、查看余额和退出功能
    分析：
    ①：循环的时候，需要反复提示输入框，所以提示框写到循环里面
    ②：退出的条件是用户输入了 4，如果是4，则结束循环，不在弹窗
    ③：提前准备一个金额预先存储一个数额
    ④：取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额
    ⑤：输入不同的值，可以使用switch来执行不同的操作
    n u m 1 + n u m 2 l e t n u m 1 = + p r o m p t ( ′ 请 您 输 入 第 一 个 数 ′ ) l e t n u m 2 = + p r o m p t ( ′ 请 您 输 入 第 二 个 数 : ′ ) c a s e ′ ∗ ′ : a l e r t ( ′ 您 选 择 的 是 惩 罚 , 结 果 式 {num1+num2} let num1=+prompt('请您输入第一个数') let num2=+prompt('请您输入第二个数:') case '*':alert('您选择的是惩罚,结果式 num1+num2letnum1=+prompt(′请您输入第一个数′)letnum2=+prompt(′请您输入第二个数:′)case′∗′:alert(′您选择的是惩罚,结果式{num1*num2}')
<!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>
        // 循环必须有3要素
        // 变量的起始值
        let i = 1
        // 终止条件
        while (i <= 3) {
            document.write(`月薪过万 <br>`)
            // 变量变化
            i++
        }
    </script>
</body>

</html>

let i=1
while(i<=3){
document.write(‘月薪过万
’)
i++}

<!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个数字
        // 起始值
        // let i = 1
        // // 终止条件
        // while (i <= 100) {
        //     document.write(` <p>是:${i} </p>`)
        //     // 变量变化
        //     i++
        // }

        // 2. 计算1~100 的累加和  1+2+3+.. + 100
        // let j = 1
        // let sum = 0
        // while (j <= 100) {
        //     // sum = sum + j
        //     sum += j
        //     j++
        // }
        // console.log(sum)  // 5050

        // 3. 求 1~100 之间的偶数累加和
        let i = 1
        let sum = 0
        while (i <= 100) {
            if (i % 2 === 0) {
                // 此时 i 一定是偶数
                sum = sum + i
            }
            // 不管你是偶数还是奇数我都要++
            i++
        }
        console.log(sum)



    </script>
</body>

</html>

let i=1
let sum=0
while(i<=100){
if(i%2==0){
sum=sum+i
}i++;}

<!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 <= 6) {
            if (i === 3) {
                i++
                // continue 结束本次循环 继续下一次循环
                // continue
                // 退出循环
                break
            }
            document.write(`我要吃第${i}个包子 <br>`)
            i++
        }
    </script>
</body>

</html>

continue结束本此循环，继续下一次循环
while(i<6){
if(i===3){
i++
break}document.write(‘我要吃第${i}个包子
’)
i++

<!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('如果是我DJ，你还爱我吗?')
            if (str === '爱') {
                alert('我也爱你啊~~')
                break
            }
        }
    </script>
</body>

</html>

while(true){
let str=prompt('如果是我DJ,你还爱我吗?)

<!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 str = prompt(`请您选择操作:
                1. 存钱
                2. 取钱
                3. 查看余额
                4. 退出
            `)

            // 2. 除非输入的是4 则退出循环  break
            if (str === '4') {
                break
            }

            // 4. switch 加减操作
            switch (str) {
                case '1':
                    let cun = +prompt('请您输入存钱的金额:')
                    // money = money + cun 
                    money += cun
                    break
                case '2':
                    let qu = +prompt('请您输入取钱的金额:')
                    money -= qu
                    break
                case '3':
                    alert(`您卡上的余额是${money}元`)
                    break
            }

        }

    </script>
</body>

</html>

case ‘3’:alert(‘您卡上月是${moeny}员’)
break

举报

相关推荐

【C语言】分支语句（逻辑运算符与关系运算符）

网络安全

前端(JavaScript)------运算符及分支语句、循环语句

javascripthtml5前端运算符while循环HarmonyOS后端开发

JavaScript：比较运算符和逻辑运算符

javascript前端vue.js运算符数据类型云平台云计算

C++PrimerPlus 第六章 分支语句和逻辑运算符 - 6.5 switch语句

开发语言c++

shell 运算符（逻辑运算符）

linuxshellbashubuntuvim

【第六章】分支语句和逻辑运算符

golang开发语言后端

运算符、控制语句

p2pjava

C++PrimerPlus 第六章 分支语句和逻辑运算符 - 6.4 ?:运算符

c++开发语言

PHP算术运算符+比较运算符+逻辑运算符

运算符PHP逻辑运算符网络安全

Java逻辑运算符、关系运算符

数据结构java逻辑运算符System数字字符代码人生
0 条评论