Java Script基础与提升——流程控制分支

Java Script系列文章目录

【Java Script基础与提升】——数据类型模块_张小鱼༒的博客-CSDN博客

【Java Script基础与提升】——运算符_张小鱼༒的博客-CSDN博客


随着人工智能的不断发展,Java Script这门技术也越来越重要,很多人都开启了Java Script学习,本文就介绍了Java Script当中流程控制部分的基础内容。


提示:以下是本篇文章正文内容,下面案例可供参考

一、Java Script流程控制概述

流程控制是控制我们的代码按照什么结构顺序来执行的,它有三种主要结构:顺序结构、分支结构和循环结构。

二、三种流程控制

1.顺序结构

程序按照代码的先后顺序,依次执行

2.分支结构

A、if语句

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>
    <script>
        //流程控制分支
        //if 语句判断年龄
        var age=prompt('请输入你的年龄:');
        if(age>=18){
            alert('我想带你去网吧');
        }
    </script>
</head>
<body>
    
</body>
</html>

B、if-else语句

注意这个里面只执行if或者else里面的语句

案例代码如下:

<!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>
    <script>
        //流程控制分支
        //if 语句判断年龄
        var age=prompt('请输入你的年龄:');
        if(age>=18){
            alert('我想带你去网吧');
        }
        else{
            alert('我不能带你去网吧');
        }
    </script>
</head>
<body>
    
</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>
    <script>
        //流程控制分支
        //if 语句判断年龄
        //判断闰年与否
        var year=prompt('请输入年份:');
        if(year%4==0&&year%100!=0 || year %400==0){
            alert('你输入的年份为闰年');
        }
        else{
            alert('你输入的为平年');
        }
    </script>
</head>
<body>
    
</body>
</html>

C、if-else if多分支语句:

注意:

多分支还是多选一,最后只有一个执行。

else 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>
    <script>
        //流程控制分支
        //判断成绩等级的案例
        var grade=prompt('请输入你的成绩:');
        if(grade>=90){
            alert('你的成绩等级为:A');
        }
        else if(grade>=80){
            alert('你的成绩等级为:B');
        }
        else if(grade>=70){
            alert('你的成绩等级为:C');
        }
        else if(grade>=60){
            alert('你的成绩等级为:D');
        }
        else{
            alert('你的成绩等级为:E');
        }
    </script>
</head>
<body>
    
</body>
</html>

D、三元表达式:

能做一些简单的条件选择,有三元运算符组成的式子为三元表达式。

条件表达式?表达式1:表达式2

如果条件表达式为真,则输出表达式1,否则输出表达式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>
    <script>
        //流程控制分支
        //三元表达式
        var num=10;
        var result=num>5?'是的':'不是的';
        console.log(result);
    </script>
</head>
<body>
    
</body>
</html>

数字补0案例:

代码如下(示例):

<!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>
    <script>
        //流程控制分支
        //数字补0案例
        var time=prompt('请输入一个0~59之间的数字:');
        var result=time<10 ? '0'+time : time;
        alert(result);
    </script>
</head>
<body>
    
</body>
</html>

E、分支流程控制switch语句

针对于变量设置一系列的特定值的选项

语法结构:

switch(表达式){

case value1:执行语句1;break;

case value1:执行语句2;break;

case value1:执行语句3;break;

......

default:执行最后的语句;

}

执行原理:

利用表达式的值与case里面的value值做匹配,能匹配到执行里面的语句,未匹配的时候,执行最后default的语句。

开发时,里面常为变量;匹配时里面的数据类型必须相等;case里面如果没有break,会继续执行下一个case语句。

代码如下(示例):

<!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>
    <script>
        //流程控制分支
        //switch语句
        var num=3;
        switch(num){
            case 1:
                console.log(1);
                break;
            case 3:
                console.log(3);
                break;
        }
    </script>
</head>
<body>
    
</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>
    <script>
        //流程控制分支
        //查询水果案例
        var fruit=prompt('请输入你要查询的水果');
        switch(fruit){
            case '苹果':
                alert('苹果的价格为3.5/斤');
                break;
            case '香蕉':
                alert('香蕉的价格为2.5/斤');
                break;
            case '榴莲':
                alert('榴莲的价格为35/斤');
                break;
            default:
                alert('没有此水果');
        }
    </script>
</head>
<body>
    
</body>
</html>

总结

以上就是今天要讲的内容,本文仅仅简单介绍了javascripts当中循环结构与分支结构的使用与案例。

最后欢迎大家点赞👍,收藏⭐,转发🚀,
如有问题、建议,请您在评论区留言💬哦。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张小鱼༒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值