JavaScript控制流程

JavaScript中提供了if条件判断句、for循环语句、while循环语句、do...while循环语句、break语句、continue语句和switch多路分支语句7种控制流程语句.

• 赋值语句
• 条件判断语句
• 循环控制语句
• 跳转语句

赋值语句:在程序中,往往需要大量的变量来存储程序中用到的数据,所以用来对变量进行赋值的语句也会在程序中大量出现

变量名=表达式;

当使用关键字var声明变量时,可以同时使用赋值语句对声明的变量进行赋值:

var varible = 50;
var varible = "欢迎来到我的博客https://www.cnblogs.com/cmd5/";
var bue = true;

建议在使用变量前就对其进行声明,因为声明变量的最大好处就是能及时发现代码中的错误,这一点我深有体会.原因在于JavaScript是采用动态编译的,动态编译是不宜于发现代码中的错误的

条件判断句:

条件判断句会对语句中的不同的条件的值进行判断,今儿根据不同的条件执行不同的语句

条件判断语句主要分为两类:

　　　　　　　　　　　　if语句

　　　　　　　　　　　　switch多分支语句

简单的if语句:

简单if语句的语法格式如下:

if(expression){
     statement1  
}

参数说明:

expression:必选项,用于指定条件表达式,可使用逻辑运算符

statement1:用于指定要执行的语句序列.当expression的值为true时,执行该语句序列

用法:

var a=200;                 //定义变量a,值为200
var b =100;　　　　　　　　　　//定义变量b,值为100
if(a>b){                    //判断变量a的值,是否大于变量b的值
       alert('a大于b');      //输出弹出a大于b
}
if(a<b){                    //判断变量a的值是否小于变量b               
　　　　alert('a小于b');      输出弹出a小于b
}                    
     

运行结果

a大于b

if ...else语句:

当expression的值是false时,执行else从句的内容,语法格式如下:

if(expression){
         statement1  
}else{
         statement2
}       

　　上述if语句是典型的二路分支结构,其中else部分可以省略,而且statement 1为单一语句时,

其两边的大括号也可以省略

根据变量值的不同,输出不同,输出不同的内容.

var form=0;
if(form==1){
          alert('form==1');   
}else{
         alert('form!=1');
}        

运行结果

　　　　

form!=1

if...else if语句:

if语句是一种很灵活的语句,除了可以使用if...else语句的形式.还可以使用if...else if语句的形式

if ...else  if语句的语法格式:

if(expression){
         statement 1  
}else if{
         statement 2      
}
...
else if(expression){
         statement n
}else{
        statement n+1
}       

else if语句对多条件进行判断

程序清单:判断用户是否输入用户名与密码

(1)在页面中添加用户登录表单和表单元素,代码如下:

<form name="form1" method="post" action="">
        <table width="221" border="1" cellspacing="0" 
                       cellpadding="0" bordercolor="#fff" 
                       bordercolordark="#CCC" bordercolorlight="#fff">
            <tr><td height="30" colspan="2" bgcolor="#eee"> 
                                用户登录</td></tr>
            <tr>
                <td width="59" height="30">用户名</td>
                <td width="162"><input type="text" 
                            name="user"></td>
            </tr>
            <tr>
                <td height="30">密码</td>
                <td><input type="password" name="pwd"> 
                        </td>
            </tr>
            <tr>
                <td height="30" colspan="2" align="center"><input type="button" name="Button" class="btn_grey" value="登录" onclick="check()">
                    &nbsp;
                    <input type="reset" name="Submit2" class="btn_grey" value="重置">
                </td>
            </tr>
        </table>
</form>

(2)编写自定义的JavaScript函数check(),通过用于if语句验证登录信息是否为空.check()函数的具体代码如下:

<script type="text/javascript">
        function check(){
            var name = form1.user.value;
            var pwd = form1.pwd.value;
            if ((name=='')||name==null) {
                alert('请输入用户名');
                form1.user.focus();
                return;
            }else if((pwd=="")||(pwd==null)){
                alert('请输入密码');
                form1.pwd.value;
                form1.pwd.focus();
                return;
            }else{
                form1.Submit();
                
            }

        }
    </script>

应用else if语句输出问候语

首先定义一个变量获取当前时间,然后应用getHours()方法获取当前时间的小时值,最后应用else if语句判断在不同的时间段输出不同的问候语:

程序清单:

<script type="text/javascript">
        var date = new Date();
        var hours = date.getHours();
        if (hours>5&&hours<=7) {
            alert('早上好');
        }else if (hours>7&&hours<=11) {
            alert('上午好!祝您好心情');
        }else if (hours>11&&hours<=13) {
            alert('中午好!');
        }else if (hours>13&&hours<=17) {
            alert('下午好!');
        }else if (hours>17&&hours<=21) {
            alert('晚上好!');
        }else if (hours>21&&hours<=23) {
            alert('夜深了,注意身体哦')
        }else{
            alert('凌晨啦,您该休息了');
        }
    </script>

if嵌套语句:以后有时间再补充这个例子,简单的说就是,if语句里面,再嵌套一个完整的if语句

switch语句:

switch语句是典型的多分支语句,其作用与嵌套使用if语句基本相同,但是switch语句比if语句更具有可读性,而且switch语句允许在找不到一个匹配条件的情况下执行默认的一组语句,switch语句的语法格式如下:

switch(expression){ 
             case judgement 1:
                      statement 1;
                      break;
             case judgement2:
                    statement2;
                    break;
             case judgement 3:
                    statement 3;
                   break;
            ....
            case judgement n:
                    statement n;
                    break;
            default:
                    statement n+1;
                    break;               
}                                        
    

    

expression:任意的表达式或变量

judgement:任意的常数表达式.当expression的值与某个judgement的值相等时,就执行此case后面的statement语句;如果不等,就执行default后面等statement语句.

break:用于结束switch语句,从而使JavaScript只执行匹配的分支.  如果没有了break语句,则该switch语句的所有分支都将被执行,switch语句也就是失去了使用的意义

应用我switch语句判断当前是星期几

程序清单:

• <script type="text/javascript"> var now = new Date(); var day = now.getDay(); var week; switch(day){ case 1: week = "星期一"; break; case 2: week = "星期二"; break; case 3: week = "星期三"; break; case 4: week = "星期四"; break; case 5: week = "星期五"; break; case 6: week = "星期六"; break; case 7: week = "星期天"; break; } document.write('今天是'+week); </script>

循环控制语句:

所谓循环语句就是在满足条件的情况下反复执行某一个操作.  循环控制语句主要包括while、do...while和for

• while语句
• do...while语句
• for循环

while语句可以实现循环操作. while循环语句也称为前测试循环语句,是利用一个条件来控制是否要继续重复执行这个语句.  while循环语句与for循环语句相比,无论是语法还是执行的流程,都为简明易懂. while循环语句的语法格式如下:

while(expression){
      statement
}

参数说明:

expression:一个包含比较运算符的条件表达式

statement:用来指定循环体,在循环条件的结果为true时,重复执行

你知道吗?

while循环语句之所以命名为前测试循环,是因为它先要判断此循环的条件是否成立,然后进行重复执行的操作,也就是说,while循环语句执行的过程是先判断条件表达式,如果条件表达式成立的值为true,则执行循环体,并且在循环体结束执行完毕后,进入下一次循环,否则退出循环

说明:

在使用while循环语句时,也一定要保证循环可以正常结束,即必须保证表达式的值存在fasle的情况,否则将形成我循环.  例如,下面的循环语句就会造成死循环,原因是i永远都小于100

程序清单:

var i = 1;
while(i<100){
　　alert(i);        //输出i的值
}

while循环经常用于循环次数不确定的情况下.

通过while循环语句实现在页面中列举出累加和不大于10的所有自然数.

程序清单:

<script type="text/javascript">
    var i = 1;
    var sum = i;
    var result = '';
    document.write('累加和不大于10的所有自然数为:<br>');
    while(sum<10){
        sum = sum + i;
        document.write(i+'<br>');
        i++;

    }
</script>

do...while语句:

do...while循环语句也称为后测试循环语句,它也是利用一个条件来控制是否要继续重复执行这个语句. 与while循环所不同的是,do..while先执行一次循环语句,然后哦安段是否继续执行.

语法格式如下:

do{
         statement
}while(expression);
    

do...while循环,无论如何先被执行一次,然后在循环条件结果为true时,重复执行

for循环:

for循环也被称为计次循环语句,一般用于循环次数已知的情况

语法格式如下:

for(initialize;test;increment){
              statement
}    

参数说明:

initialize:初始化语句,用来对变量循环进行初始化赋值

text:循环条件,一个包含比较运算符的表达式,用来限定循环变量的边限.  如果循环变量超过了该边限,则停止该循环语句的执行

increment:用来指定循环变量的步幅

statement:用来指定循环体,在循环条件的结果为true时,重复执行

你知道吗?

for循环语句执行的过程是:先执行初始化语句,然后判断循环条件,如果循环条件的结果为true,则执行一次循环,否则直接退出循环,最后执行迭代语句,改变循环变量的值,至此完成一次循环;接下来将进行下一次循环,知道循环条件的结果为false,才结束循环

计算100以内各奇数的和

程序清单:

<script type="text/javascript">
    var sum = 0;
    for (var i = 1; i < 100; i+=2) {
        sum+=i
    }
    document.write('100以内所有奇数的和为'+sum);
</script>

允许结果:

100以内所有奇数的和为2500

跳转语句:

• continue语句
• break语句

continue语句:

continue语句和break语句类似,不同在于break语句退出循环,而continue语句用于中止本次循环,并开始下一次循环

注意:continue语句只能应用于在while、for、do...while语句中

在for循环中通过continue语句计算金额大于等于1000的数据的和代码如下:

<script type="text/javascript">
    var total = 0;
    var sum = new Array(1000,1200,100,600,736,1107,1205);
    for (var i = 0; i < sum.length; i++) {
            if (sum[i]<1000) continue;
            total+=sum[i];
        }    
        document.write('累加和为'+total);
</script>

运行结果:

累加和为4512

当使用continue语句中止本次循环后,如果循环条件的结果为false,则退出循环,否则继续下一次循环

break语句:

break语句用于包含最内层的循环或者退出一个switch语句. 

break语句通常用在for、while、do...while或switch语句中

for语句中通过break语句来中断循环的代码如下:

<script type="text/javascript">
    var sum = 0;
    for (var i = 0; i < 100; i++) {
            sum += i;
            if (sum > 10) break;     //如果sum大于10就会立刻跳出循环
    }
    document.write('0至'+i+'(包括'+i+')之间的自然数的累加和为:'+sum);
</script>

<script type="text/javascript">
    var sum = 0;
    for (var i = 0; i < 100; i++) {
            sum += i;
            if (sum > 10) break;     //如果sum大于10就会立刻跳出循环
    }
    document.write('0至'+i+'(包括'+i+')之间的自然数的累加和为:'+sum);
</script>

运行结果:

0至5(包括5)之间的自然数的累加和为:15

---------------------------------------------------------------------------

到这里JavaScript控制流程就到这里啦,现在是2020年8月7日 晚23:46分了,前两天又没有更新,我家里这边下大雨了,是我出生以来最大的雨,也是持续时间最长的. 接下来如果没有其他琐碎的事情的话,希望我能连更,睡觉去了

====还有一点,最后break有一个实例--------页面中显示距离某年元旦的天数,明天早上再起来更新吧,是在是太困啦

下一个大章节《JavaScript函数》记得来看