JavaScript课程——Day03（流程控制、顺序结构、分支语句、循环）

1、流程控制

所谓流程控制就是指程序怎么执行或者说程序执行的顺序。

• 顺序结构
• 条件选择结构（分支语句）：包括if-else以及switch
• 循环结构：包括 for 循环，while，do-while，for-in等
• 其他语句：break和continue

2、顺序结构

顺序结构的程序设计是最简单的，只要按照解决问题的顺序写出相应的语句即可，它的执行顺序是自上而下，依次执行的

3、分支语句

　　3.1、if

if (条件1) {
     条件1为真执行
}

if (条件) {
    如果条件为真，执行
} else {
    如果条件为假，执行
}

if (条件1) {
    条件1为真执行
} else if (条件2) {
    条件2为真执行
} else if (条件3) {
    条件3为真执行
} else {
    以上条件都不为真执行
}

console.log(new Date().getDay()); // 0--6，代表周日--周六

var week = new Date().getDay();
if (week === 0) {
    console.log('今天周日');
} else if (week === 1) {
    console.log('今天周一');
} else if (week === 2) {
    console.log('今天周二');
} else if (week === 3) {
    console.log('今天周三');
} else if (week === 4) {
    console.log('今天周四');
} else if (week === 5) {
    console.log('今天周五');
} else if (week === 6) {
    console.log('今天周六');
}

 var txt = document.getElementsByTagName('input')[0];
 var btn = document.getElementsByTagName('button')[0];

        btn.onclick = function () {
            var val = txt.value; // 取得分数

            if (val < 0 || val > 100) {
                // 排除不合法的
                alert('哥们，请输入正确的分数')
            } else {
                // 合法，等级划分
                if (val < 60) {
                    alert('哥们，不太行啊');
                } else if (val >= 60 && val < 70) {
                    alert('小老弟，及格了');
                } else if (val >= 70 && val < 80) {
                    alert('一般');
                } else if (val >= 80 && val < 90) {
                    alert('良好');
                } else if (val >= 90 && val < 100) {
                    alert('优秀');
                } else {
                    alert('满分');
                }
            }
        }

　　3.2、switch

　　switch一般用于假设的个数有限，并且是同等级的关系，相对于if来说，结构更清晰。

switch (变量) {
    case 表达式1:
        变量 全等于 表达式1 执行这里;
        break;
    case 表达式2:
        变量 全等于 表达式2 执行这里;
        break;
    case 表达式3:
        变量 全等于 表达式3 执行这里;
        break;
    ......
    default:
        以上都不成立，执行这里;
}

var week = new Date().getDay(); // 0--6
        switch (week) {
            case 0:
                console.log('星期日');
                break;
            case 1:
                console.log('星期一');
                break;
            case 2:
                console.log('星期二');
                break;
            case 3:
                console.log('星期三');
                break;
            case 4:
                console.log('星期四');
                break;
            case 5:
                console.log('星期五');
                break;
            case 6:
                console.log('星期六');
                break;
            default:
                console.log('日期错误');
        }

　　3.3、if和switch的区别

• 一般情况下，这两个语句是可以相互替换的
• switch语句通常处理case为比较确定值的情况，而if…else…if语句更加灵活，常用于范围判断（大于、等于某个范围）
• switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。因此当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

4、循环

作用：让一段特定的代码执行指定的次数

　　4.1、for

for (1初始循环变量; 2判断条件(如果条件为真循环，否则停止循环); 4更新循环变量) {
    3执行代码
}

// 打印1--3
// console.log(1);
// console.log(2);
// console.log(3);
for (var i = 1; i <= 3; i++) {
     console.log(i);
}
// 第一轮  1234：  1、var i = 1;   2、1<=3;  3、console.log(1);  4、i++
// 第二轮  234：   2、2<=3;   3、console.log(2);   4、i++
// 第三轮  234：   2、3<=3;   3、console.log(3);   4、i++
// 第四轮  2：     2、4<=3;

// 打印1--100
// for (var i = 1; i <= 100; i++) {
//     console.log(i);
// }

// 打印100--1
// for (var i = 100; i >= 1; i--) {
//     console.log(i);
// }

// --------------------------
// 求1--100所有数的和
// 1+2+3+4+...+100=5050
// var num = 0; // 仓库
// for (var i = 1; i <= 100; i++) {
//     num += i;
// }
// console.log(num);

// --------------------
// 求1--100所有奇数的和
// var num = 0;
// for (var i = 1; i <= 100; i++) {
//     if (i % 2 === 1) {
//         num += i;
//     }
// }
// console.log(num);

var num = 0;
for (var i = 1; i <= 100; i += 2) {
    num += i;
}
console.log(num);

　　　　4.1.1、循环操作标签案例

<ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
        <li>张新昊</li>
        <li>老王</li>
</ul>

<script>
        // 给每个li添加点击事件
        var li = document.getElementsByTagName('li');

        console.log(li);
        // li[0].onclick = function () {
        //     console.log(1);
        // }
        // li[1].onclick = function () {
        //     console.log(1);
        // }
        // li[2].onclick = function () {
        //     console.log(1);
        // }

        for (var i = 0; i < li.length; i++) {
            // 添加背景
            li[i].style.backgroundColor = 'pink';

            // 添加事件
            li[i].onclick = function () {
                console.log('点了我');
            }
        }
</script>

　　　　

　　　　4.1.2、循环创建标签

// 循环创建100个p
// 并隔行变色
        window.onload = function () {
            var body = document.getElementsByTagName('body')[0];

            for (var i = 1; i <= 100; i++) {
                if (i % 2 === 1) {
                    // 奇数行
                    body.innerHTML += '<p style="background: red;">我是第' + i + '个p标签</p>';
                } else {
                    // 偶数行
                    body.innerHTML += '<p style="background: yellow;">我是第' + i + '个p标签</p>';
                }
            }
        }

　　　　

　　　　4.1.3、循环套循环——乘法口诀表

// 外层循环管轮数，里面的循环管每一轮的打印
// for (var i = 1; i <= 3; i++) {
//     for (var j = 1; j <= 5; j++) {
//         console.log(j);
//     }
// }


// 乘法口决表
window.onload = function () {
     var body = document.body;

      for (var i = 1; i <= 9; i++) {
          for (var j = 1; j <= i; j++) {
             body.innerHTML += j + '*' + i + '=' + i * j + '&nbsp;&nbsp;';
         }
          body.innerHTML += '<br>';
      }
}

　　4.2、while

1初始循环变量
while (2条件) {
    3执行代码
    4更新循环变量
}

// 打印1--10
var i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

　　for和while的区别：

　　两者在功能上是可以互换的。for适合能明确循环次数的循环，while适合只有条件判断的循环。

// 小王有100块钱，每天用一半，当用到1块钱时停止，可以用几天

var money = 100; // 多少钱
var count = 0; // 天数
while (money > 1) {
    money = money / 2;
    count++;
    console.log('今天第' + count + '天，还有' + money + '钱');
}

　　4.3、do-while

　　特点：不论条件是否满足，至少都能执行一次

1初始循环变量
do {
    2执行代码
    3更新循环变量
} while (4条件)

// ----------------------------
// 1--10
// var i = 1;
// do {
//     console.log(i);
//     i++;
// } while (i <= 10);


var i = 100;
do {
       console.log(i);
        i++;
} while (i <= 10);

　　4.4、break和continue

• break与continue都是在循环中，终止循环的操作
• break是结束循环，后面的循环都不再执行
• continue是结束本次循环，即本次循环中continue以后代码都不再执行，直接执行下一次循环

for (var i = 1; i <= 10; i++) {
       if (i === 5) {
           // break; // 结束循环，后面的循环都不再执行。
           continue; // 是结束本次循环，即本次循环中 continue 以后代码都不再执行，直接执行下一次循环。
       }
       console.log(i);
}

// 打印1--100之间除了35 45 55之外所有5的倍数的和
var num = 0;
for (var i = 5; i <= 100; i += 5) {
      if (i === 35 || i === 45 || i === 55) {
          continue;
      }
       num += i;
}
console.log(num);