Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句

简介: Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句

一、if条件语句


在JavaScript中,if-else语句的格式如下:

if(表达式)
{语句1}
else
{语句2}

若要进行多个判断条件,可以通过if-else if-else语句,else-if可以为多个,当if里面的表达式1不成立时,执行表达式2,若表达式2不成立则执行语句3,格式如下:

if(表达式1)
{语句1}
else if(表达式2)
{语句2}
...
else
{语句3}


例如下列HTML代码,判断a的值然后通过alert()警告框输出a的值的判断情况,由于只有一条语句所以可以省略花括号,如下:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = -2;
    if (a == 0)
    alert("a的值等于0!")
    else if (a < 0)
    alert("a的值小于0!")
    else
    alert("a的值大于0!")
  </script>
  </body>
</html>

运行结果如下:

1667130415639.jpg


二、while循环语句


(一)while()语句


while循环语句是while()条件表达式为正确时,则重复执行代码块中的内容,直到表达式为错误时退出程序,不再执行循环中的代码。

例如下列代码,通过while循环计算1+2+3+…+100的值,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = 1;
    var sum = 0;
    while (a <= 1000) {
    sum = a + sum;
    a+=1;
    }
    console.log("1+2+3+...+1000=",sum);
  </script>
  </body>
</html>


运行结果如下:

1667130449502.jpg


(二)do……while语句


另外还有do……while语句,该循环在每次检查表达式是否成立之前都会执行一次代码块(即do……while语句至少执行一次),若表达式为成立则重复循环,直到表达式不成立时退出循环,格式如下:

例如下列代码,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var i = 0;
    do {
    i++;
    console.log(i);
    }
    while (i < 10)
  </script>
  </body>
</html>

运行结果如下:

1667130473844.jpg


三、for循环语句


例如下列代码,利用for循环输出1!+2!+3!+……+10!的结果,直接让for循环执行10次,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>条件语句</title>
  </head>
  <body>
  <script type="text/javascript">
    var i, j, sum;
    j = 1;
    sum = 0;
    for (i = 1; i <= 10; i++) {
    j *= i;
    sum += j;
    }
    console.log("1!+2!+3!+...+10!=",sum);
  </script>
  </body>
</html>

运行结果如下:

1667130498939.jpg

另外,for循环语句中还有一个for…in循环语句,它用于枚举对象的属性,即循环遍历对象,例如下列代码,循环遍历number[]数组,并在控制台中输出:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>条件语句</title>
  </head>
  <body>
  <script type="text/javascript">
    var number = [0, 1, 2, 3, 4, 5];
    for (var i in number)
    console.log(number[i]);
  </script>
  </body>
</html>


运行结果如下:

1667130517676.jpg


四、switch语句


例如下列代码,学生成绩为80分,判断该学生的成绩等级并在控制台中输出(60分以下不及格,60-70分为及格,70-80分为良好,80-100分为优秀),其中switch(true)表示与case中表达式与其成立时匹配:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>条件语句</title>
  </head>
  <body>
  <script type="text/javascript">
    var score = 80;
    switch (true){
    case score < 60:
      console.log("不及格!");
      break;
    case score >= 60 && score < 70:
      console.log("及格!");
      break;
    case score >= 70 && score < 80:
      console.log("良好!");
      break;
    default:
      console.log("优秀!");
    }
  </script>
  </body>
</html>


运行结果如下:

1667130543964.jpg


五、break语句和continue语句


与其他语言中的break语句和continue语句一样,break语句用于退出整个循环,continue语句用于退出本次循环。


相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
52 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
77 1
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
55 4
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
170 1
|
2月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
50 2
|
2月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
46 0
|
2月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
57 1
|
2月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
47 1