Javascript基础 day02-day03

JS - 流程控制

算术运算符

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）

开发中经常作为某个数字是否被整除

优先级顺序

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级

总结：先乘除后加减，有括号先算括号里面的~~~

案例:

代码:

<script>
        let r = prompt('请您输入半径:')
        let result = 3.14 * r * r
        document.write(`计算之后圆的面积是：${result}`)
    </script>

赋值运算符

其他赋值运算符：

使用这些运算符可以在对变量赋值时进行快速操作

 <script>
        // let num = 18
        // num = num + 1
        // num = num + 3
        // num += 3
        // console.log(num)

        // 两个变量的 把i加到 sum 里面去
        let i = 1
        let sum = 0
        // sum = sum + i
        sum += i
    </script>

一元运算符

我们可以有更简便的写法了~~~

自增：

符号：++ 作用：让变量的值 +1
自减：符号：-- 作用：让变量的值 -1

使用场景：

经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了

自增/减运算符前置或后置的差异

比较运算符

比较运算符的介绍

作用：比较两个数据大小、是否相等

比较运算符的使用

比较运算符：

. >：左边是否大于右边
. <：左边是否小于右边
. >=：左边是否大于或等于右边
. <=：左边是否小于或等于右边
. ==：左右两边是否相等
. ===：左右两边是否类型和值都相等
. !==：左右两边是否不全等
. 比较结果为boolean类型，即只会得到true或false

比较运算符的细节

1.字符串比较，是比较的字符对应的ASCII码

从左往右依次比较

如果第一位一样再比较第二位，以此类推

比较的少，了解即可

NaN不等于任何值，包括它本身
尽量不要比较小数，因为小数有精度问题

4.不同类型之间比较会发生隐式转换

最终把数据隐式转换转成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

<script>
        console.log(3 > 5) // false
        console.log(5 >= 5) //  true
        // console.log(5 = 5)
        console.log(5 == 5)
        // == 只要值一样就是true  不管数据类型
        console.log(5 == '5')
        console.log(5 == 'pink')
        // === 以后判断要用  ===  开发常用   要求值和数据类型都一样
        console.log(5 === 5)
        console.log(5 === '5')
        // 特殊情况
        console.log('pink' > 'red')
        console.log('pink' > 'pin')
        console.log(1 === NaN)
        console.log(NaN === NaN)
        console.log(0.1 + 0.2 === 0.3)
        console.log(0.1 + 0.2)

        console.log(3 > '2')
    </script>

逻辑运算符

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

运算符优先级

语句

表达式和语句分支语句循环语句

表达式：

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

语句：

js 整句或命令，js 语句是以分号结束（可以省略）比如： if语句 for 循环语句

区别：

表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

表达式 3 + 4
语句 alert() 弹出对话框

其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事

分支语句

分支语句可以让我们有选择性的执行想要的代码

分支语句包含：

If分支语句
三元运算符
switch 语句
if语句

<script>
        // if (false) {
        //     alert(11)
        // }
        // if 里面的小括号都会给我们转换为 布尔型   
        // false  0  ''  undefined  null  NaN
        // if (NaN) {
        //     console.log('真的')
        // } 
        else
    </script>

单分支课堂案例1：用户输入高考成绩，如果分数大于700，则提示恭喜考入黑马程序员

双分支if语法：

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

双分支课堂案例1：用户输入，如果工龄大于1年，年底奖金+2000，否则年底没奖金

双分支课堂案例2：让用户输入年份，判断这一年是闰年还是平年并输出

能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年
需要逻辑运算符

多分支if语法：

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

多分支if课堂案例：根据输入不同时间，输出不同的问候语

注：

12点以前，输出上午好
18点以前，输出下午好
20点以前，输出晚上好

三元运算符

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

判断2个数的最大值案例需求：用户输入2个数，控制台输出最大的值分析： ①：用户输入2个数 ②：利用三元运算符输出最大值

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

switch语句

 <script>
        switch (2) {
            case 1:
                alert(1)
                break
            case 2:
                alert(2)
                break
            case 3:
                alert(3)
                break
            default:
                alert('没有数据')

        }

    </script>

需求：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果分析： ①：用户输入数字 ②：用户输入不同算术运算符，可以去执行不同的运算 (switch)

断点调试

while 循环

 <script>
        // 循环必须有3要素
        // 变量的起始值
        let i = 1
        // 终止条件
        while (i <= 3) {
            document.write(`月薪过万 <br>`)
            // 变量变化
            i++
        }
    </script>

案例

在页面中打印输出10句“月薪过万” 需求：使用while循环，页面中打印，可以添加换行效果

循环退出

continue和break的区别

循环结束：

continue：结束本次循环，继续下次循环
break：跳出所在的循环

<script>
        // 我们要打印吃包子
        let i = 1
        while (i <= 6) {
            if (i === 3) {
                i++
                // continue 结束本次循环 继续下一次循环
                // continue
                // 退出循环
                break
            }
            document.write(`我要吃第${i}个包子 <br>`)
            i++
        }
    </script>

综合案例

需求：用户可以选择存钱、取钱、查看余额和退出功能分析： ①：循环的时候，需要反复提示输入框，所以提示框写到循环里面 ②：退出的条件是用户输入了 4，如果是4，则结束循环，不在弹窗 ③：提前准备一个金额预先存储一个数额 ④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额 ⑤：输入不同的值，可以使用switch来执行不同的操作

Javascript基础day02-day03