重学Javascript基础（四）JavaScript的分支语句

文章	分类	评论
158	3	33

01.程序的执行顺序

<!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.顺序执行
        var num1 = 10
        var num2 = 20

        var result = num1 + num2
        var result2 = num1 + num2

        // 2.分支语句
        var isLogin = true
        if(isLogin){
            console.log("访问购物车")
            console.log("访问个人中心")
        }else{
            console.log("跳转到登录页面")
        }

        // 3.循环语句
        var i = 0;
        while(i<10){
            console.log("执行循环语句")
            i++
        }
    </script>
</body>
</html>

02.程序的代码块

<!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>
        // 一个代码块
        {
            var num1 = 10
            var num2 = 20
            var result = num1 + num2
        }
        // 一个对象
        var info = {
            name:"why",
            age:18
        }
    </script>
</body>
</html>

03.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>
        // 案例一：如果小明考试超过90分，就可以去游乐场
        // 1.定义一个变量来保存小明的分数
        var score = 99
        // 2.如果分数超过90分，去游乐场
        if(score > 90){
            console.log("去游乐场玩~")
        }

        // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
        // 1.定义一些变量保存数据
        var price = 5
        var weight = 7
        var totalPrice = price * weight

        // 2.根据购买的重量，决定是否 -8
        if(weight > 5){
            totalPrice -= 8
        }
        console.log("总价格：",totalPrice)

        // 案例三: 播放列表中 currentIndex
        // ["鼓楼", "理想", "阿刁"]
        var currentIndex = 2;
        // 对currentIndex++完操作之后
        currentIndex++
        if(currentIndex === 3){
            currentIndex = 0;
        }
    </script>
</body>
</html>

04.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>
        // 补充一: 如果if语句对应的代码块, 只有一行代码, 那么{}可以省略
        // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
        // 定义一些变量保存数据
        var price = 5
        var weight = 7
        var totalPrice = price * weight

        // 2.根据购买的重量，决定是否 -8
        if(weight > 5) totalPrice -= 8

        console.log("总价格：",totalPrice);
        // 补充二：if（条件判断）
        var num = 123
        if(num) {
            console.log("num判断的代码执行")
        }
    </script>
</body>
</html>

05.if-else语句的使用

<!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>
        var score = 80
        // 条件成立, 专属的代码块
        // 条件不成立, 专属的代码块
        // if (score > 90) {
        //   console.log("去游乐场玩~")
        // } else {
        //   console.log("哈哈哈哈")
        // }

        // 案例一：小明超过90分去游乐场，否则去上补习班
        if(score > 90){
            console.log("去游乐场玩~")
        }else{
            console.log("去上补习班~")
        }

        // 案例二：有两个数字，进行比较，获取较大数字
        var num1 = 12*6 + 7*8 + 7**4
        var num2 = 67*5 + 24*2
        console.log(num1,num2)

        var result = 0
        if(num1 > num2){
            result = num1
        }else{
            result = num2
        }

        console.log(result);
    </script>
</body>
</html>

06.if-elseif-else语句的使用

<!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>
        // 案例：score评级
        // 1.获取用户输入的分数
        var score = prompt("请输入您的分数：")
        score = Number(score)

        // 2.判断等级
        // 使用if else的方式来实现
        // if(score > 90){
        //     alert("您的评级是优秀！")
        // }else{
        //     if(score > 80){
        //         alert("您的评级是良好！")
        //     }else{

        //     }
        // }
        
        // edge case
        // if(score > 100 ||  score < 0){
        //     alert("您输入的分数超过了正常范围")
        // }

        if(score > 90){
            alert("您的评级是优秀！")
        }else if(score > 80){
            alert("您的评级是良好！")
        }else if(score >= 60){
            alert("您的评级是合格！")
        }else{
            alert("不及格！！！")
        }
    </script>
</body>
</html>

07.三元运算符的使用

<!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>
        // 案例一：比较两个数字
        var num1 = 12*6 + 7*8 + 7**4
        var num2 = 67*5 + 24**2

        // 三元运算符
        var result = num1 > num2 ? num1 : num2
        console.log(result)

        // 案例二：给变量赋值一个默认值（了解）
        var info = {
            name:"why"
        }
        var obj = info ? info : {}
        console.log(obj)

        // 案例三：让用户输入一个年龄，判断是否是成年人
        var age = prompt("请输入您的年龄：")
        age = Number(age)
        // if(age >= 18){
        //     alert("成年人")
        // } else {
        //     alert("未成年人")
        // }
        var message = age >= 18 ? "成年人" : "未成年人"
        alert(massage);
        
    </script>
</body>
</html>

08.逻辑运算符的使用

<!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>
        var chineseScore = 98
        var matchScore = 99

        // 1.逻辑与：&&，并且
        // 条件1 && 条件2 && 条件3.....
        // 所有的条件都为true的时候, 最终结果才为true
        // 案例: 小明语文考试90分以上, 并且数学考试90分以上, 才能去游乐场
        if(chineseScore > 90 && matchScore > 90){
            console.log("去游乐场玩~")
        }

        // 2.逻辑或: ||, 或者
        // 条件1 || 条件2 || 条件3....
        // 只要有一个条件为true, 最终结果就为true
        // 案例: 如果有一门成绩大于90, 那么可以吃打1小时游戏
        if(chineseScore > 90 || matchScore > 90){
            console.log("打一个小时游戏~")
        }

        // 3.逻辑非： ！，取反
        var isLogin = true
        if(!isLogin){
            console.log("跳转到登录页面")
            console.log("进行登录~")
        }

        console.log("正常的访问页面")
    </script>
</body>
</html>

09.逻辑运算符-逻辑或本质(了解)

<!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.先将运算元转成Boolean类型
        2.对转成的boolean类型进行判断
            * 如果为true, 直接将结果(原始值)返回
            * 如果为false, 进行第二个运算元的判断
            * 以此类推
        3.如果找到最后, 也没有找到, 那么返回最后一个运算元
        */
        // var name = "why"
        // name || 运算元2 || 运算元3


        // 本质推导一: 之前的多条件是如何进行判断的
        var chineseSocre = 95
        var mathScore = 99
        // chineseScore > 90为true，那么后续的条件都不会进行判断
        if(chineseSocre > 90 || mathScore > 90){}

        // 本质推导二：获取第一个有值的结果
        var info = "abc"
        var obj = {name:"why"}
        var message = info || obj || "我是默认值"
        console.log(message.length)
        
    </script>
</body>
</html>

10.逻辑运算符-逻辑与本质(了解)

<!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 && 运算元2 && 运算元3
        /*
        也可以脱离条件判断来使用
        逻辑与的本质
        1.拿到第一个运算元, 将运算元转成Boolean类型
        2.对运算元的Boolean类型进行判断
            * 如果false, 返回运算元(原始值)
            * 如果true, 查找下一个继续来运算
            * 以此类推
        3.如果查找了所有的都为true, 那么返回最后一个运算元(原始值)
        */

        // 本质推导一: 逻辑与, 称之为短路与
        var chineseScore = 80
        var mathScore = 99
        if(chineseScore > 90 && mathScore > 90){

        }

        // 本质推导二：对一些对象中的方法进行有值判断
        var obj = {
            name:"why",
            friend:{
                name:"kobe",
                eating:function(){
                    console.log("eat something")
                }
            }
        }

        // 调用eating函数
        // obj.friend.eating()
        obj && obj.friend && obj.friend.eating && obj.friend.eating();
    </script>
</body>
</html>

11.逻辑运算符-逻辑非的补充

<!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>
        var message = "Hello World"
        console.log(Boolean(message))
        console.log(!!message)

        var obj = null
        console.log(Boolean(obj))
        console.logI(!!obj)
    </script>
</body>
</html>

12.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>
        // 语法
        // switch(表达式/变量){
        //     case 常量1：
        //         语句
        // }

        // 案例:
        // 上一首的按钮: 0
        // 播放/暂停的按钮: 1
        // 下一首的按钮: 2
        // var btnIndex = 100
        // if (btnIndex === 0) {
        //   console.log("点击了上一首")
        // } else if (btnIndex === 1) {
        //   console.log("点击了播放/暂停")
        // } else if (btnIndex === 2) {
        //   console.log("点击了下一首")
        // } else {
        //   console.log("当前按钮的索引有问题~")
        // }

        var btnIndex = 0
        switch(btnIndex){
            case 0:
                console.log("点击了上一首")
                break
            case 1:
                console.log("点击了播放/暂停")
                break
            case 2:
                console.log("点击了下一首停")
                break
            default:
                console.log("当前按钮的索引有问题~")
                break
        }
    </script>
</body>
</html>

感谢大家观看，我们下次见

abzzp

@秋风于渭水确实 [[微笑]]

通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]

BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]

什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]

秋风于渭水

这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。

defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]

async属性是什么？它有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]

城市教堂

我热爱旅游专栏。令人惊艳了解路线。

湖山風光

欣赏你的照片, 我明白, 世界很美。感谢旅行灵感。

古競技場

读起来像小说。继续保持带来的灵感。

日	一	二	三	四	五	六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

程序员鸡皮

站点介绍