轻松学习JavaScript七：JavaScript的流程控制语句

最新推荐文章于 2023-05-25 23:00:28 发布
最新推荐文章于 2023-05-25 23:00:28 发布
阅读量3.3k 收藏 3
点赞数 4
分类专栏： JavaScript Web前端HTML+CSS+JS初级入门 文章标签： JavaScript with for语句 流程控制语句 Web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/erlian1992/article/details/50098575
版权

        JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看

一下这些语句。顺序结构我们在这里就不再提到，直接说条件和循环以及其他语句。

       一条件选择结构

       条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的

动作，可以在代码中使用条件语句来完成该任务。

       在JavaScript中，我们可使用以下条件语句：

       if 语句：只有当指定条件为true时，使用该语句来执行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
     var x="";
     if (time<20)
     {
         x="Good day";
     }
     document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

       运行的结果为：


       if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。如果时间晚于 20:00，会获得问候 "Good evening"。</p>

<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
var x="";
if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

       运行的结果为：


       if...else if....else 语句：使用该语句来选择多个代码块之一来执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>

<body>

<p>如果时间早于 10:00，会获得问候 "Good morning"。</p>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<p>如果时间晚于 20:00，会获得问候 "Good evening"。</p>

<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
var x="";
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

       运行的结果为：


       switch语句： 使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句2</title>
</head>

<body>
<p>点击下面的按钮来显示今天是周几：</p>

<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var d=new Date().getDay();
document.write("今天的星期代表数字："+d);
function myFunction()
{	var x;
	switch (d)
	  {
	  case 0:
		x="Today it's Sunday";
		break;
	  case 1:
		x="Today it's Monday";
		break;
	  case 2:
		x="Today it's Tuesday";
		break;
	  case 3:
		x="Today it's Wednesday";
		break;
	  case 4:
		x="Today it's Thursday";
		break;
	  case 5:
		x="Today it's Friday";
		break;
	  case 6:
		x="Today it's Saturday";
		break;
	  }
	document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

       运行的结果：


       default关键字的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句2</title>
</head>

<body>
<p>点击下面的按钮来显示今天是周几：</p>

<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var d=new Date().getDay();
document.write("今天的星期代表数字："+d);
function myFunction()
{	var x;
	switch (d)
   {
   case 6:
     x="Today it's Saturday";
     break;
   case 0:
     x="Today it's Sunday";
     break;
   default:
     x="Looking forward to the Weekend";
   }
	document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

      运行的结果为：

      二循环结构

      循环可以将代码块执行指定的次数。

      JavaScript支持不同类型的循环：

      (1)for语句：循环代码块一定的次数

for(var box=1;box<=10;box++)
{
    document.write("box="+box+"<br/>");
}

      运行的结果为：


      (2)for...in语句： 循环遍历对象的属性

    var box={
       name:"张三",
       age:24,
       sex:"男"
     };
    for(x in box)
    {
       document.write(box[x]+"<br/>");
    }

      运行的结果为：


      (3)while语句：当指定的条件为 true 时循环指定的代码块。先判断，再执行语句，这种比较实用。

     var box=1;
     while(box<=5)
     {
       document.write("box="+box+"<br/>");
       box++;
     }

      运行的结果为：


      (4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次，再判断

     var box=1;
     do{
       document.write("box="+box+"<br/>");
       box++;
     }while(box<=10)

      运行的结果为：


      三其他语句

      (1)break语句：用于跳出循环。

    for(var box=1;box<=10;box++)
     {
        if(box==5)
       {
          break;//强制退出整个循环
        }
       document.write("box="+box+"<br/>");
     }

      运行的结果为：


      执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。

      (2)continue语句：用于跳过循环中的一个迭代。

     for(var box=1;box<=10;box++)
     {
       if(box==5)
       {
          continue;//退出当前循环，还会继续执行后面的循环
        }
       document.write("box="+box+"<br/>");
     }

      运行的结果为：


      执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了box=5。

      (3)with语句：将代码的作用域设置到一个特定的对象中

      先来看一般我们是怎么样输出对象的属性的值的：

      var box={
       name:"张三",
       age:24,
       sex:"男"
      };
      var n=box.name;
      var a=box.age;
      var s=box.sex;
      document.write(n+"<br/>");
	  document.write(a+"<br/>");
	  document.write(s);

      运行的结果为：


      改用with语句来写：

     var box={
       name:"张三",
       age:24,
       sex:"男"
      };
      with(box){
        var n=name;
        var a=age;
        var s=sex;
      };
	  document.write(n+"<br/>");
	  document.write(a+"<br/>");
	  document.write(s);

      运行的结果为：



life is wonderful
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Educoder JS学习手册七：JS循环语句
Junds0的博客
05-24 4031
第1关：while类型 (1)利用循环结构求质数的和. 求出小于等于整数a的所有质数；计算并返回所有这些质数的和； function mainJs(a) { a = parseInt(a); //请在此处编写代码 /********** Begin **********/ var sum=0; var i=2; while(i<=a){ var j=2; while(j<i){ if(i%j0){ break; } j++; } if(ji){ sum+=i; } i++; } return s
JavaScript中的循环语句
weixin_42560424的博客
03-09 2336
for 循环语句是最常用的循环语句之一。for 循环通过设置循环计数器，重复执行一段代码块，直到计数器达到某个指定的值。
JS流程控制语句
weixin_47655145的博客
05-25 192
质数条件： 仅能被自身和1整除。如 2, 3, 5, 7, 11,13、17、19、23、29等都是质数。可见，如果程序中没有循环语句，会造成大量的重复代码，且后期难以维护。但是do..while的特点：先执行一次循环体，再进行判断。需求： 围着操场跑步，跑3圈，每跑一圈喝2口水。案例：求1+2+3+...+100的和。所谓的流程控制就是控制代码的执行顺序。而循环语句就是用来解决此类问题的。作用：一般多用来做些重复的事情。案例：打印100以内所有偶数的和。案例:打印1~100以内的奇数。
（七）JavaScript 流程控制语句
weixin_46227563的博客
03-23 1695
文章目录一、流程控制语句1. if 语句(1) if 语句的基本使用(2) if else if 多条件分支二、数组 一、流程控制语句 1. if 语句 (1) if 语句的基本使用 if 语句是最简单的条件语句，也称选择语句，通常和 else 一起使用，表示 如果…就…否则… 单行 if 语句：如果 if 语句体中只有一行语句，可以省略大括号和换行 (2) if else if 多条件分支 else if() 条件分支“暗含”不符合之前所有条件，要理解什么叫“否则如果” 二、数组 ...
JS流程控制
cqqorcq的博客
07-07 2297
第4章 流程控制程序的三种基本结构顺序结构： 从上到下，从左到右执行的顺序，就叫做顺序结构，程序默认就是由上到下顺序执行的分支结构：根据不同的情况，执行对应代码循环结构：重复做一件事情4.1 分支结构if语句 if (/* 条件表达式 */) {  // 执行语句 }if --- else 语句if (/* 条件表达式 */) { // 成立执行语句 } else {  // 否则执行语句 }...
整理Javascript流程控制语句学习笔记
10-23
整理Javascript流程控制语句学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript流程控制语句，希望大家继续关注
详解JavaScript的流程控制语句
10-23
主要介绍了JavaScript的流程控制语句，感兴趣的小伙伴们可以参考一下
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句
01-20
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句。源码txt格式。
JavaScript 动态网页实例 - 流程控制语句.rar
最新发布
04-21
在 JavaScript 中，流程控制语句主要有： if语句、switch语句、while语句、do-while 语句、for 语句，以及专门用于对象的 with 语句等。本文介绍常用语句及其变种的用法。 本文内容是JavaScript程序结构的框架，也是...
JavaScript流程控制语句（ppt）
05-31
JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句...
js流程控制语句(三)
diegui9561的博客
07-10 183
如果在语句中需要声明变量时：最好给他们赋予初始类型值【js中变量声明使用var属于弱类型声明，若只声明则均表示为undefined，在后面语句计算中可能会产生错误计算】;相应的类型变量需要如下方式进行定义：eg： number类型：var num = 0; string类型：var str = ''; object类型：var obj = null; 1、条件判断语句...
Educoder JavaScript：HTML DOM——文档元素的操作
Junds0的博客
06-01 2942
第1关：通过id获取文档元素 获取本文档中id为a1的文档元素，要求用id获取文档元素；将获取的元素赋值给变量myElement <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get element by id</title> </head> <body> <a id="a1" src="h
Educoder jQuery 入门
Junds0的博客
06-08 2356
第1关：jQuery入门 用 jQuery 获取到 id="content"的div；div里面的内容为 这是我的第一个jquery程序。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://code.jquery.com/jquery-3.
JavaScript_流程控制(if、switch、while、do while) ——恋天小结
xiao_yi_8421的博客
08-17 164
流程控制介绍 程序的三种基本结构: 顺序结构 从上到下执行的代码就是顺序结构(程序默认就是由上到下顺序执行的) 分支结构 根据不同的情况，执行对应代码 循环结构 循环结构：重复做一件事情 分支结构 ###if语句 if (/* 条件表达式 */) { // 执行语句 } ​ if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } ​ if (/* 条件1 */){ // 成立执行语句 } else if (/* 条件2 */){ // 成立执行语句 } e
JavaScript流程控制语句
u012562727的博客
07-25 145
JavaScript分支语句 if if语句 语法： if（condition）{statement1；} if（condition）{ statement1；}else{ statement2；}else{ statement3;} if（condition）{ statement1；}else if(condit...
JavaScript 流程控制语句
Gaokaifeng的博客
05-05 578
if 语句: 格式： if (表达式){ // 条件为真时执行的语句; }else{ //条件为false时的表达式; } let age=20; if (age>=18){ console.log("你已经成年了"); }else{ console.log("你还未成年"); } //你已经成年了 多层判断条件的用法： let score=85; if (score>90){ console.log("优秀"); }else if(score&
一，零基础学习JavaScript-JavaScript简介（0）
热门推荐
weshmily前端
07-02 1万+
**一、简单好学，富有表现力 —— JavaScript简介**1.1 JavaScript的用途JavaScript用来制作web页面交互效果，提升用户体验。简单列出几个JavaScript能够制作的页面效果，它能干什么： 轮播图 Tab栏（选项卡） 地图 表单验证 web前端三层来说： 层次 角度 作用 结构层 HTML 从语义的角度，
javascript学习手册七：js循环语句
03-16
JavaScript 中有三种主要的循环语句：for循环、while循环和do-while循环。 1. for循环语句：适用于已知循环次数的情况。 ``` for (初始化语句; 循环条件; 更新语句) { 循环体语句; } ``` 2. while循环语句：适用于不知道循环次数的情况。 ``` while (循环条件) { 循环体语句; } ``` 3. do-while循环语句：与 while 循环类似，但是它总是先执行一次循环体语句，再判断循环条件。 ``` do { 循环体语句; } while (循环条件); ``` JavaScript 中还有其他循环语句，如 for-in 和 for-of，它们用于遍历对象和数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值