JavaScript控制语句和函数的使用

喵果森森2024-09-13 11:47

文章目录

前言

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

一、控制语句

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

1.if条件语句

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

javascript 复制代码 
<script>
    if(expression){
        statement 1
    }else{
        statement 2
    }
</script>

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

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

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

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

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

实操：

javascript 复制代码 
<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 语句允许找不到一个匹配条件的情况下执行默认的一组语句。语句的语法格式如下：

javascript 复制代码 
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 语句。

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

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

javascript 复制代码 
<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 中应用比较广泛。语法格式如下：

javascript 复制代码 
for(initialize;test;increment){
    statement
}

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

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

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

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

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

实操：

javascript 复制代码 
<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循环语句也被称为前测试循环语句（先判断后执行），该语句通过一个条件来控制是否要继续重复执行这个语句。该语句的语法格式如下：

javascript 复制代码 
while(expression){
    statement
}

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

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

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

实操：

javascript 复制代码 
<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 语句一样判断是否继续循环执行语句。该语句的语法格式如下：

javascript 复制代码 
do{
    statement;
}while(expression);

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

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

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

实操：

javascript 复制代码 
<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 关键字

javascript 复制代码 
break;

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

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

javascript 复制代码 
<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 关键字

javascript 复制代码 
continue;

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

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

javascript 复制代码 
<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、函数名加上一组参数以及放置于大括号中需要执行的代码组成。函数的基本语法如下：

javascript 复制代码 
function functionName(parameter1,parameter2,...){
    statements;
    return expression;
}

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

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

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

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

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

javascript 复制代码 
function account(price,number){
    var sun=price*number;
    return sum;
}

2.函数的调用

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

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

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

实操：

javascript 复制代码 
<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 代码同学简单看一眼，有补充或者指正的内容，欢迎在评论区中留言。

相关推荐
我码玄黄1 分钟前
JS 的行为设计模式：策略、观察者与命令模式
javascript·设计模式·命令模式
史努比的大头7 分钟前
前端开发深入了解性能优化
前端
码农研究僧8 分钟前
Java或者前端 实现中文排序（调API的Demo）
java·前端·localecompare·中文排序·collator
营赢盈英15 分钟前
OpenAI API key not working in my React App
javascript·ai·openai·reactjs·chatbot
吕永强1 小时前
HTML表单标签
前端·html·表单标签
范特西是只猫1 小时前
echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】
前端·javascript·echarts
麒麟而非淇淋1 小时前
AJAX 进阶 day4
前端·javascript·ajax
图灵苹果1 小时前
【个人博客hexo版】hexo安装时会出现的一些问题
前端·前端框架·npm·node.js
IT-陈2 小时前
app抓包 chrome://inspect/#devices
前端·chrome
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CCF-CSP认证考试 202406-3 文本分词 100分题解05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文102024 高教社杯 数学建模国赛 （A题）深度剖析|“板凳龙” 闹元宵|数学建模完整代码+建模过程全解全析