一起自学前端开发!

JavaScript流程控制--JavaScript入门笔记

来源:原创    更新时间:2017-07-31 20:25:18    编辑:前端网编辑    浏览:1828

顺序结构

 

顺序结构是 中最基本的结构,说白了就是按照从上到下、从左到右的顺序执行。

图片6.png 

一般而言,在 中,程序总体是按照顺序结构执行的,但是在顺序结构可以包含选择结构和循环结构。

举例:实现内容的替换

代码如下:

<body>

   <h1>My Web Page</h1>

   <p id="demo">A Paragraph.</p>

   <div id="myDIV">A DIV.</div>

   < >

      document.getElementById("demo").innerHTML="Hello World";

      document.getElementById("myDIV").innerHTML="How are you?";

   </ >

</body>

效果:

图片7.png 

上面的例子首先执行的是<h1>标签,显示的是"My Web Page"字样,接着执行的是<p>标签里的语句显示的是"A Paragraph.";第三步是执行<div>标签里的语句显示"myDIV";第四步执行< >标签里的语句,首先把"A Paragraph."替换成"Hello World",然后把"myDIV"替换成"How are you?"。整个流程是一句跟着一句执行的这就是顺序结构。

 

选择结构

1. if语句

只有当指定条件为 true 时,该语句才会执行代码。

语法:

if (condition)

{

    当条件为 true 时执行的代码

}

注意:

请使用小写的 if。使用大写字母(IF)会生成   错误!

举例:实现当时间小于 20:00是,生成问候“Good day”

代码如下:

<body>

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

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

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

< >

function myFunction(){

var x="";

var time=new Date().getHours();

if (time<20){

x="Good day";

    }

document.getElementById("demo").innerHTML=x;

}

</ >

</body>

效果:

图片8.png 

注意:

在这个语法中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

 

2. If...else 语句

使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码

语法:

if (condition)

{

    当条件为 true 时执行的代码

}

else

{

    当条件不为 true 时执行的代码

}

举例: 实现当时间小于 20:00 时,生成问候 "Good day",否则生成问候 "Good evening"。

代码如下:

<body>

<p>点击这个按钮,获得基于时间的问候。</p>

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

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

< >

function myFunction(){

var x="";

var time=new Date().getHours();

if (time<20){

  x="Good day";

     }

else{

   x="Good evening";

  }

document.getElementById("demo").innerHTML=x;

}

</ >

</body>

效果:

图片9.png 

 

3. If...else if...else 语句

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

语法:

if (condition1)

{

    当条件 1 为 true 时执行的代码

}

else if (condition2)

{

    当条件 2 为 true 时执行的代码

}

else

{

  当条件 1 和 条件 2 都不为 true 时执行的代码

}

举例:实现如果时间小于 10:00,则生成问候 "Good morning",如果时间大于 10:00 小于 20:00,则生成问候 "Good day",否则生成问候 "Good evening"

代码如下:

<body>

<  type="text/ ">

var d = new Date();

var time = d.getHours();

if (time<10)

{

document.write("<b>早上好</b>");

}

else if (time>=10 && time<16)

{

document.write("<b>今天好</b>");

}

else

{

document.write("<b>晚上好!</b>");

}

</ >

<p>

这个例子演示了 if..else if...else 语句。

</p>

</body>

效果:

图片10.png 

 

4. 多重选择语句(switch)

switch 语句用于基于不同的条件来执行不同的动作。

语法:

switch(表达式) {

   case值1:   

      执行代码块 1   

   break; 

   case值2:      

      执行代码块 2   

   break; 

   ...

   case值n:

       执行代码块 n

   break;

   default:   

与 case值1 、 case值2...case值n 不同时执行的代码

 } 

说明: 

switch必须赋初始值,值与每个case值匹配。

满足条件则执行该 case 后的所有语句,并用break语句来阻止运行下一个case。

如所有case值都不匹配,执行default后的语句。

举例:通过switch来判断该输出星期几代码如下:

< >

var week=3; //设置一个代表星期的变量

switch(week) {

case 1:

document.write("今天是星期一")

break;

case 2:

document.write("今天是星期二")

break;

case 3:

document.write("今天是星期三")

break;

case 4:

document.write("今天是星期四")

break;

case 5:

document.write("今天是星期五")

break;

case 6:

document.write("今天是星期六")

break;

default:

document.write("今天是星期天")

}

</ >

效果:

图片11.png 

说明:根据week的值来执行不同的代码,例子中的week值为3,所以执行case 3后面的代码。 提示:case中的条件可以是数字也可以是字符串,但必须是确定的值。

总结:switch 语句用于基于不同的条件来执行不同的动作。但条件必须是确定的值。 

循环结构

 

1. for循坏

for循环语句 for循环语句是在创建循环时常用到的语句。for循环的循环结构:

for (初始化变量; 判断条件; 更新迭代){

循环语句

} 

说明:

1). 初始化变量在整个循环的最开始只执行一次。

2). for循环是先执行初始化变量的代码,然后判断条件是否返回true,如果是则执行循环语句,如果判断条件为FALSE则不执行循环。

3). 执行完循环后,执行更新迭代的代码,然后再判断循环条件是否为true,如果是就再次执行循环语句,直到循环条件返回值false。

4). for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用break语句退出循环,否则就是死循环 。

例子1:用for循环来输出0到100的累加值。代码如下:

< >

for (var i = 0,sum=0; i<=100; i++) {

sum+=i;

}

document.write("0到100的累加值是:"sum);

</ >

结果:

图片12.png 

说明:

初始化变量 i=0,sum=0,判断i是否小于等于100,如果是,执行语句sum=sum+i,然后执行迭代更新语句i++,再次根据循环条件判断是否继续执行。

for循环中初始化的变量可以在for循环之外使用。 例子2:通过两个for循环来输出九九乘法表代码如下:

< >

for (var i = 1; i<10; i++) {

for (var j=1; j<=i; j++) {

document.write(i+" * "+j+" = "+i*j+"   ");

}

document.write("<br/>");

}

</ >

结果: 0

 图片13.png

在一个for循环中嵌套一个for循环。 总结:for循环是最常用的循环,循环次数可以为零。 

2. while循环

While 循环会在指定条件为真时循环执行代码块。

只要指定条件为正,循环就可以一直执行代码。

语法:

while (条件)

  {

  需要执行的代码

  }  

举例:输出数字1~5

代码如下:

function myFunction()

{

var x="",i=0;

while (i<5)

  {

  x=x + "The number is " + i + "<br>";

  i++;

  }

document.getElementById("demo").innerHTML=x;

}

</ >

效果:

 图片14.png

 

 

程序的继续与终止

 

1. break语句 

在之前的switch语句中,break语句用于跳出switchu()。 break 语句用于跳出循环。

举例:用break语句来跳出for循环。代码如下:

< >

for (var i = 1; i<8; i++) {

document.write(i+"<br/>");

if(i==3){

break;

}

}

</ >

效果:

图片15.png 

说明:

执行循环,输出i的值,判断i的值是否等于3,当i的值等于3的时候,执行语句break,跳出循环,之后的循环也不执行。

2. continue语句 

continue 用于跳过循环中的一个迭代。continue 语句跳出循环后,会继续执行该循环之后的代码(如果有的话) 举例:通过continue来跳过当前循环,执行下一个循环。代码如下:

< >

for (var i = 1; i<=5; i++) {

if(i==3){

continue;

}

document.write(i+"<br/>");

}

</ >

效果:

 图片16.png

说明:

执行循环,输出i的值,判断i的值是否等于3,当i的值等于3的时候,执行语句continue。

如效果图所示,continue只是跳过了当前循环,之后的循环继续执行。 总结:

根据情况的不同,选择使用break还是continue。

break是跳出整个循环,不管当前循环之后还有没有代码都不再执行。

continue是跳出当前循环,执行下一个循环。 



评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜