请输入关键字进行搜索...

程序员鸡皮

文章 分类 评论
60 3 9
联系我
the theme is by @冷文学习者

站点介绍

一名PHP全栈程序员的日常......

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

abzzp 2024-10-01 174 0条评论 前端 JavaScript

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

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
本文链接: https://xvzhu.cn/archives/49.html
协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》
下一篇 上一篇

评论(0)

最新评论

  • abzzp

    十天看一部剧，还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行，谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升，每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会，献血还给学分~

  • 夜

    @ab 我想去学网安，比如网警，但分也贼高😕

  • ab

    @夜 加油，你一样也可以成为程序员的，需要学习资料可以V我

  • 夜

    佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞 我也想去献血，过两年就成年了可以去献血了

日历

2024年11月

日一二三四五六
     12
3456789
10111213141516
17181920212223
24252627282930

标签云

vue JavaScript React Golang 观后感 ES6 读后感

友情链接

云烟博客 boys博客 时光日志 白雾茫茫丶

文章目录

推荐关键字： vue JavaScript React Golang 观后感 ES6 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案
高贵黑
默认配色
墨蓝色
优雅白