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

相关推荐
并不会41 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子43 分钟前
CSS中的变量应用——:root,Sass变量，JavaScript中使用Sass变量
javascript·css·sass
衣乌安、44 分钟前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜44 分钟前
ppk谈JavaScript，悟透JavaScript，精通CSS高级Web，JavaScript DOM编程艺术，高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张，YOLO道路事故目标检测实战训练教程！
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【TC3xx芯片】TC3xx芯片电源管理系统PMS详解05基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08RAG 实践- Ollama+RagFlow 部署本地知识库09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除