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语句用于退出本次循环。


相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
3月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
98 4
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2
|
3月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
62 4
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
84 0
|
4月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
59 1
JavaScript控制台:提升Web开发技能的秘密武器
|
4月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
63 1
|
4月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
4月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    49
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    92
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    139
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    82
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    118
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75