流程控制

流程：就是代码执行顺序

顺序结构

代码从上到下来运行

选择结构

根据给定的条件有选择的来执行

if分支

单路分支

if(条件表达式){
    // 条件成立执行
}

双路分支

if(条件表达式){
    // 条件成立执行
} else {
    // 条件不成立执行
}

多路分支

if(条件1){
    // 条件1成立执行
} else if(条件2){
    // 条件2成立执行
} else if(条件3){
    // 条件3成立执行
} else {
    // 条件1、2、3都不成立执行
}

嵌套分支

if(条件1){
    // 条件1成立执行
    if(条件2){
        // 条件1、2都成立执行
        if(){
            ......
        }
    } else if(条件3){
        // 条件1、3都成立执行
    } else {
        // 条件1成立、条件2、3都不成立执行
    }
} else {
    // 条件1不成立执行
}

switch分支

switch(需要判断的数据){
    case 值1:
        // 数据=值1的时候执行
        break;
    case 值2:
        // 数据=值2的时候执行
        break;
    case 值3:
        // 数据=值3的时候执行
        break;
    default:
        // 数据默认执行
}

总结

if与switch应该如何选择：

如果需要判断条件的时候需要使用if
如果需要判断单个值的时候使用switch

循环结构

根据给定的条件反复执行

for循环

for循环三要素：初始值、终止条件、步进值

语法：

for(初始值;终止条件;步进值){
    循环体
}

说明：

初始值只有第一次才会执行
先执行循环体在自增/自减....
只要满足终止条件就会执行循环体，直到不满足跳出循环

while循环

语法：

while(终止条件){
    循环体
}

do...while循环

语法：

初始值
do{
    // 循环体
    // 步进制
}while(终止条件)

总结

for循环、while循环、do...while循环如何选择？

已知循环次数通常使用for
终止条件不明确使用while
如果需要优先执行一次循环体的时候使用do...while

break和continue区别

break: 语句可以立即退出循环，阻止再次反复执行任何代码。
continue: 语句退出当前循环，根据控制表达式还允许继续进行下一次循环。

循环结构的练习题

1.在页面中显示一排个星星

    for (var i = 1; i < 50; i++) {
            document.write("⭐")
        }

2.在页面中显示一个宽高100的盒子

document.write("<div style='width:100px;height:100px;background:red'> </div>")

3.返回 1~100的和

var sum=0;
for (var i = 1; i <= 100; i++) {
            sum += i;
        }
document.write("1~100的和："+sum+'<br>');

4.返回 1~100奇数和

var sum=0;
for (var i = 1; i <= 100; i++) {
            if (i % 2 == 1) {
                sum += i;
            }
        }
document.write("1~100的奇数和："+sum+'<br>')

5.返回 1~100偶数和

var sum=0;
for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                sum += i;
            }
        }
document.write("1~100的偶数和："+sum+'<br>')

6.求6的阶乘

var fav=1;
for (var i = 1; i <= 6; i++) {
            fav *= i
        }
document.write("6的阶乘"+fav+'<br>')

8.请输出1-100之间所有能够被7整除的数字

for (var i = 1; i <= 100; i++) {
      if (i % 7 == 0) {
           document.write(i+'\t')
            }
        }

//换行
document.write('<br>');

9.输出100-200之间所有能被3或者7整除的数

for (var i = 100; i <=200; i++) {
     if (i % 7 == 0 || i % 3 == 0) {
          document.write(i+'\t')
            }
        }

10.输入分数，返回成绩等级（优良中差）

var grade = prompt("请输入分数：")
        if (grade<60) {
            document.write("差")
        } else if(grade >= 60 && grade < 80){
            document.write("中")
        } else if(grade >= 80 && grade < 90){
            document.write("良")
        } else if(grade >= 90 && grade < 100){
            document.write("优")
        }else{
            document.write("请输入正确的分数")
        }

        //换行
        document.write('<br>');

11.while: 操场上跑步，预计跑10圈，当跑到6圈 —> 女朋友打电话 -> 停止

var i=0;
while (i<10) {
       i++;
       document.write( "第"+i+"圈"+'<br>');
       if(i == 6){
          break;
        }
    }

12.do...while: 弹出一个提示框，你开心吗？如果输入开心，就提示结束，否则，一直询问。 /*

//第一种方法
var title = prompt("你开心吗？")
        do {
            if (title != "开心") {
                prompt("你开心吗？")
            }
        } while (title =="开心");
        
//第二种方法
do {
     var i = prompt("你开心吗？")
        } while (i != "开心");

13.do...while: 输入密码操作，如果密码不是123一直提示输入密码，如果密码输入错误3次提示冻结账户。

var n=0; 
do {
     n++;
     var i = prompt("请输入密码：")
     if(n>=3){
              alert("冻结账户");
                break;
            }
         } while (i != 123);

14.在页面中写入十行十列星星

for (var i = 1; i <= 10; i++) {
      for (var j = 1; j <= 10; j++) {
            document.write("⭐")
        }
        document.write('<br>');
        }

15.写入十行十列的表格

for (var i = 1; i <= 10; i++) {
      for (var j = 1; j <= i; j++) {
      document.write("<div style='width:10px;height:10px;border:1px solid red;float:left'> </div>")
    }
      document.write("<div style='clear:both'></div>");
  }

16.99乘法表

//第一种方法
for (var i = 1; i < 10; i++) {
     for (var j = 1; j <= 10; j++) {
          var fav=j*i
          document.write(j + "x" + i + "=" + fav +"&nbsp&nbsp")
        }
        document.write('<br>');
        }
        
//第二种方法
for (var i = 1; i <= 10; i++) {
      for (var j = 1; j <= i; j++) {
            document.write("<div style='width:100px;height:40px;border:1px solid red;float:left'>"+j+"x"+i+"="+j*i+" </div>")
        }
        document.write("<div style='clear:both'></div>");
        }

17.用*输出5行的直角三角形

for (var i = 1; i < 6; i++) {
     for (var j = 1; j <= i; j++) {
          document.write("⭐")
        }
        document.write('<br>');
        }

18.以下代码输出结果为多少？？？

for(a=0,b=0;a<10,b<7;++a,++b){
     g=a+b
        }
document.write(g)
        /*
        执行过程：
        a=0,b=0;  0<10,0<7; g=0+0=0  ++a=1,++b=1；
        a=1,b=1;  1<10,1<7; g=1+1=2  ++a=2,++b=2；
        a=2,b=2;  2<10,2<7; g=2+2=4  ++a=3,++b=3；
        a=3,b=3;  3<10,3<7; g=3+3=6  ++a=4,++b=4；
        a=4,b=4;  4<10,4<7; g=4+4=8  ++a=5,++b=5；
        a=5,b=5;  5<10,5<7; g=5+5=10  ++a=6,++b=6；
        a=6,b=6;  6<10,6<7; g=6+6=12  ++a=7,++b=7；
        a=7,b=7;  7<10,7<7; 跳出循环
        
        */