当前位置： 首页 > article >正文

JavaScript控制语句和函数的使用

article 2024/11/16 1:46:52

文章目录

  • 前言
  • 一、控制语句
    • 1.if条件语句
    • 2.switch多分支语句
    • 3.for循环语句
    • 4.while循环语句
    • 5.do...while循环语句
    • 6.break 与 continue 关键字
  • 二、函数
    • 1.函数的定义
    • 2.函数的调用
  • 总结

前言

        JavaScript 的控制语句和函数的使用，基本上同理于 Java。该篇文章主要展示如何将这些内容以实操的形式展示出来，JavaScript 和 Java 之间的应用场景还是有所不同的。

一、控制语句

        流程控制语句对于任何一门编程语言都是十分重要的。

1.if条件语句

        if 条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值来执行相应的处理。语法格式如下：

<script>
    if(expression){
        statement 1
    }else{
        statement 2
    }
</script>

        express ：必填项，用于指定表达式，可以使用逻辑运算符。

        statement 1 ：用于指定要执行的语句序列，当 express 的值为 true 时，执行该语句。

        statement 2 ：用于指定要执行的语句序列，当 express 的值为 false 时，执行该语句。

        这里就不多介绍了，Java的各种 if 语句格式，在这里完全适用。

        需求：在界面中输入用户的账号和密码时，验证用户的登陆信息。

        实操：

<form name="form1" method="post" action="">
    用户名：<input name="user" type="text" id="user">
    密码：<input name="pwd" type="text" id="pwd">
    <input name="Button" type="button" class="btn_grey" value="登录" onclick="check()">
    <input name="Submit2" type="reset" class="btn_grey" value="重置">
</form>
      
<script>
    function check(){
        if(form1.user.value==""){
            //判断用户名是否为空
            alert("请输入用户名！");
            form1.user.focus();
            return;  
        }else if(form1.pwd.value==""&&form1.user.value!=""){
            //判断密码是否为空
            alert("请输入密码！");
            form1.pwd.focus();
        }else{
            from1.submit();
        }
    }
</script>

        构造了一个 check() 函数使用了 if 语句。 

        运行结果：

 

        同Java语言一样，JavaScript 的 if 语句也可以嵌套使用。

2.switch多分支语句

        switch 是典型的多分支语句，其用法和嵌套使用 if 语句基本相同，但 switch 语句比 if 语句更加具有可读性，而且 switch 语句允许找不到一个匹配条件的情况下执行默认的一组语句。语句的语法格式如下：

switch(expression){
    case judgement1:
            statement1;
            break;
    case judgement2:
            statement2;
            break;
    ...
    case judgementn:
            statementn;
            break;
    default:
            statement;
            break;
}

        expression：任意的表达式或变量。

        judgement：任意的常数表达式。当 expression 的值与某个 judgement 的值相等时，就执行此 case 后的 statement 语句；如果与所有的 judgement 都不相等，则执行 default 后面的 statement 语句。

        break：用于结束 switch 语句。

        需求：如同下方壁纸，在不同的时间点，提示用户不同的消息。例如，时间为早上，输出早上好等消息，可自定义。

         实操：在模拟的工作网站上方添加一个小机器人根据时间来给打工人解闷。

<script>
    var robot = "小浩机器人：";
    var date = new Date();
    document.write("当前时间是：" + date + "<br><br>");
    var value = date.getHours();
    
    switch (true) {
        case (value >= 6 && value < 10):
            document.write(robot + "早上好！");
            break;
        case (value >= 10 && value < 12):
            document.write(robot + "在认真上班吗？");
            break;
        case (value >= 12 && value < 14):
            document.write(robot + "你吃了吗？");
            break;
        case (value >= 14 && value < 18):
            document.write(robot + "忙起来就快下班了，加油！");
            break;
        default:
            document.write(robot + "看看是哪个大怨种还在加班 :p");
            break;
    }
</script>

        运行结果：

         在程序开发的过程中，使用 if 语句还是使用 switch 语句可以根据实际情况而定，尽量做到因地适宜。不要因为 switch 语句的效率高，或者 if 语句最常用而对某个语句厚此薄彼。

3.for循环语句

        for 循环语句也称为计次循环语句，一般用于循环次数已知的情况，在 JavaScript 中应用比较广泛。语法格式如下：

for(initialize;test;increment){
    statement
}

        initialize：初始化语句，用于对循环变量进行初始化赋值。

        test：循环条件，一个包含比较运算符的表达式，用于限定循环变量的边界。超过边界，则停止循环。

        increment：用来指定循环变量的步幅。

        statement：用于指定循环体，test的条件判断为 true ，则重复执行该 statement语句。

        需求：某小区有五百个停车位，为了避讳，除去车位中所有含 4 的车位号（删除后多出空余车位无号不用管）。

        实操：

<html>
    <head>
        <title>网站</title>
    </head>
    <body>
        <script>
            var x = 0;
            var y = 0;
            var z = 0;
            var h = 0;
            document.write("删掉含“ 4 ”的车位号如下：<br>");
            for (x = 0; x <= 5; x++) {
                for (y = 0; y <= 9; y++) {
                    for (z = 1; z <= 9; z++) {
                        h = 100 * x + 10 * y + z;
                        if (y != 4 && z != 4 && h < 100) {
                            document.writeln("0" + y + z);
                        } else if (x != 4 && y != 4 && z != 4 && h <= 500) {
                            document.writeln(h);
                        }
                    }
                }
            }
            document.write("\n 500");
        </script>
    </body>
</html>

        在使用 for 语句时，一定要保证循环可以正常结束，即保证循环条件的结果有中止的情况，否则循环体将无休止地执行下去，从而形成死循环。

        for(int i=1;i>=1;i++){

                alert(i);        

        }

        //i本身大于1，一直自增，只会不断循环。

        运行结果：

4.while循环语句

        while循环语句也被称为前测试循环语句（先判断后执行），该语句通过一个条件来控制是否要继续重复执行这个语句。该语句的语法格式如下：

while(expression){
    statement
}

        expression：一个包含比较运算符的条件表达式，用于指定循环条件。

        statement：用来指定循环体，在循环条件的结果为true时，重复执行。

        需求：列举10以内的质数。

        实操：

<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    while(i<10){
        i++;
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
    }
</script>

         使用 while 语句时，也要保证循环可以正常结束，即必须保证条件表达式的值存在中止的情况，否则将出现死循环。

        var i=1;

        while(i<=100){

                alert(i);

        }

        //i值一直是小于100的定值，该循环会不断循环。        

        运行结果：

5.do...while循环语句

        do...while 循环语句也被称为后测试循环语句（先执行后判断）。和 while 循环语句不同的是，该语句会先执行一次循环语句，然后再去像 while 语句一样判断是否继续循环执行语句。该语句的语法格式如下：

do{
    statement;
}while(expression);

        statement：用来指定循环体，循环体首先被执行一次，之后循环条件为 true 时，重复执行。

        expression：一个包含比较运算符的条件表达式，用来指定循环条件。

        需求：列举10以内的质数。

        实操：

<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    do{
        i++;
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
    }while(i<10);
</script>

         do...while 循环语句中的循环体至少被执行一次。

        运行结果：

6.break 与 continue 关键字

        break 与 continue 关键字都可以用于跳出循环。不同的是，在非嵌套语句的情况下，break 是终止当前所在的循环，并且程序会继续执行循环之后的代码；continue 是中止此次循环，该循环语句开始下一轮循环。

        （1）break 关键字

break;

         break 语句通常用在 for、while、do...while 或 switch 语句中。

         实操：使用 break 关键字中断循环。

<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    do{
        i++;
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
        if(i==5){
            break;
        }
    }while(i<10);
</script>

        i 值为 5 时中止了循环。 

        运行结果：

        （2）continue 关键字

continue;

        continue 语句只能应用在 while、for、do...while 和 switch 语句中。

          实操：使用 continue 关键字中断循环。

<script>
    var i = 0;
    document.write("10以内的质数：<br>");
    do{
        i++;
        if(i==5){
            continue;
        }
        if(i%2!=0 && i%3!=0 && i%5!=0 && i!=1 || i==2 || i==3 || i==5){
            document.writeln(i);
        }
        
    }while(i<10);
</script>

        当 i 值等于 5 时，continue中断了此次循环，开启了下一次循环。 但如果循环条件的结果是 false，则退出循环。

         运行结果：

二、函数

        函数的实质，就相当于 Java 的方法。通过调用函数（方法）可以使代码更加简洁，提高代码的重用性。

1.函数的定义

        JavaScript 的函数由关键字 function、函数名加上一组参数以及放置于大括号中需要执行的代码组成。函数的基本语法如下：   

function functionName(parameter1,parameter2,...){
    statements;
    return expression;
}

        functionName：函数名。在同一页面中，函数名必须是唯一的，并且区分大小写。

        parameter：参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可有255个参数。

        statement：函数体。用于实现函数功能的语句。

        expression：返回函数值。expression 为任意表达式、变量或常量（该 return 语句可不写）。

        举例：定义一个计算某个商品的总价的函数，两个参数，指定单价和商品个数，返回值为总价。

function account(price,number){
    var sun=price*number;
    return sum;
}

2.函数的调用

        不带参数的函数，使用函数名加上括号即可；如果要调用的函数带参数，则在括号中加上需要传递的参数；如果包含多个参数，各个参数用逗号分隔。

        如果函数有返回值，可以使用赋值语句将函数值赋给一个变量。

        需求：创建一个自定义函数 check() ，让用户在输入账号和密码的时候，若没有填写进行提示。

        实操：

<form name="form1" method="post" action="">
    用户名：<input name="user" type="text" id="user">
    密码：<input name="pwd" type="text" id="pwd">
    <input name="Button" type="button" class="btn_grey" value="登录" onclick="check()">
    <input name="Submit2" type="reset" class="btn_grey" value="重置">
    <!--onclick属性调用了 check() 函数-->
</form>
    
      
<script>
    function check(){
        if(form1.user.value==""){
            //判断用户名是否为空
            alert("请输入用户名！");
            form1.user.focus();
            return;  
        }else if(form1.pwd.value==""&&form1.user.value!=""){
            //判断密码是否为空
            alert("请输入密码！");
            form1.pwd.focus();
        }else{
            from1.submit();
        }
    }
</script>

        该实例中，input 标签中的 onclick 属性调用了 check() 函数。JavaScript 中，由于函数名区分大小写，在调用函数时也要注意区分函数名的大小写。

        运行结果：

        没有输入密码， onclick 属性调用了 check() 函数，做出了相应的反馈。

总结

        以上就是 JavaScript 的控制语句和函数的介绍，本文供要回顾使用 JavaScript 代码同学简单看一眼，有补充或者指正的内容，欢迎在评论区中留言。


http://www.kler.cn/a/306135.html

相关文章：

  • 探索 HTML 和 CSS 实现的蜡烛火焰
  • Tomcat 和 Netty 的区别及应用场景分析
  • 使用 Keras 训练一个卷积神经网络（CNN）（入门篇）
  • 响应式网页设计--html
  • 解决Anaconda出现CondaHTTPError: HTTP 000 CONNECTION FAILED for url
  • NAT网络工作原理和NAT类型
  • Python Numpy布尔数组在数据分析中的应用
  • 思维商业篇(3)—三大竞争战略
  • 【安全系列--处理挖矿】
  • Centos 执行yum安装 出现Failed connect to mirrors.163.com:80； 拒绝连接
  • Golang | Leetcode Golang题解之第409题最长回文串
  • Java中的服务端点响应缓存：Spring Cache抽象
  • ★ C++基础篇 ★ string类的实现
  • Python实现pdf转图片、转文字、去水印
  • 房产销售系统开发：SpringBoot技术要点
  • 避免 PyCharm 将该 Python 脚本作为测试运行
  • 串口数据波形显示工具对比
  • k8s service如何实现流量转发
  • Python 课程10-单元测试
  • 基于 TDMQ for Apache Pulsar 的跨地域复制实践
  • 2024.9.14 Python与图像处理新国大EE5731课程大作业，马尔可夫随机场和二值图割，校正立体图像的深度
  • 攻击者如何在日常网络资源中隐藏恶意软件
  • rust + bevy 实现小游戏 打包成wasm放在浏览器环境运行
  • Vue3使用Websocket进行跨页面通信
  • 2024年金九银十最新版Java面试题及答案整理（持续更新）
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变