一、循环语句

1.断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试界面

按F12打开开发者工具
点到sources一栏
选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

2.while循环语法

（1）while 循环语法

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

（2）while 循环注意事项：循环需要具备三要素

变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或者自减）

While 练习

1.页面输出1-100

<script>
        let i=1;
        while(i<=100){
            document.write(`${i}<br>`);
            i++;
        }
    </script>

2.计算从1加到100的总和并输出

 <script>
        let i = 1;
        let sum = 0;
        while(i<=100){
            sum += i;
            i++;
        }
        document.write(`1加到100的和为：${sum}`);
    </script>

熟练后可做以下优化

  <script>		
		let i = 1;
        let sum = 0;
        while(i<=100){
            sum += i++;
        }
        document.write(`1加到100的和为：${sum}`);
     </script>

3.计算1-100之间的所有偶数和

 <script>
        let i = 1;
        let sum = 0;
        while (i<=100){
            if(i % 2===0){
                sum+=i;
            }
            i++;
        }
        document.write(`1到100的偶数和为：${sum}`);
    </script>

优化

 <script>
        let i = 1;
        let sum = 0;
        while (i<=100){
            (i % 2===0)&&(sum+=i)
            i++;
        }
        document.write(`1到100的偶数和为：${sum}`);
    </script>

4.需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框

 <script>
        let s=prompt('你爱我吗？');        
        while(s!=='爱'){
            s=prompt('你爱我吗？');
        }
    </script>

5.简易ATM机，实现存款，取款，查看余额，退出的功能

分析：

①：循环的时候，需要反复提示输入框，所以提示框写到循环里面

②：退出的条件是用户输入了 4

③：提前准备一个金额预先存储一个数额

④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

<script>
        let money = 100;
        let input;
        while(input !== 4){
            input = +prompt(`请选择你的操作
            1存款
            2取款
            3查看余额
            4退出
            `)
            if(input === 1){
                let num1 = +prompt('输入存款金额');
                money +=num1;
            }else if(input === 2){
                let num2 = +prompt('输入取款金额');
                if(num2>money){
                    alert('余额不足');
                }else{
                    money -= num2; 
                }
            }else if(input === 3){
                alert(`当前余额：${money}`);
            }else if(input === 4){
                console.log('开始退出');
            }
            }
    </script>

3.for循环语法

（1）for循环基本使用

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

练习：求1-100之间所有的偶数和

 <script>
        let sum = 0;
        for(let i = 1; i <=100; i++){
            (i % 2 ===0)&&(sum += i);
        }
        console.log(sum);       
    </script>

（2）退出循环

continue：结束本次循环，继续下次循环 break：跳出所在的循环

   <script>
      // 只显示 奇数 单数
      for (let index = 1; index <= 10; index++) {
        // 判断当前的index是不是奇数
        if (index % 2 !== 0) {
          continue; //跳过循环（不想执行某段代码）
        }
        console.log(index);
      }
    </script>

  <script>
        for (let index = 1; index <= 10; index++)     {
        // 如果当前的index = 5 ，就不再往下 循环了，就终止循环
        if (index === 5) {
          break;
        }
        // //  index===5&&break // 不能简写 报错！！
        console.log(index);

        // if (index < 5) {
        //   console.log(index);
        // }
        console.log("代码调用的次数",index);
      }
    </script>

（3）for循环嵌套

结构：

练习1：页面中打印出5行5列的星星

①：利用双重for循环来做

②：外层循环控制打印行，内层循环控制每行打印几个（列）

<script>
        for(i = 1; i <= 5; i++){ 
            // 一行打印五个星星   
            for(j = 1; j <= 5; j++){
                document.write(`⭐`);
            } 
            document.write(`<br>`) //换行
        }
    </script>

练习2：打印倒三角形星星

①：利用双重for循环来做

②：外层循环控制打印行，内层循环控制每行打印几个（列）

③：内层循环的个数跟第几行是一一对应的

 <script>
        for(i = 1; i <= 5; i++){
            for(j = 1; j <= i; j++){
                document.write(`⭐`);
            }
           document.write(`<br>`) 
        }
    </script>

练习3：打印九九乘法表

①：只需要把刚才倒三角形星星做改动

②： ★ 换成 1 x 1 = 2 格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        span{
            display: inline-block;
            width: 100px;
            height: 35px;
            border: 1px solid #000;
            text-align: center;
            line-height: 35px;
        }
    </style>
</head>
<body>  
    <script>
        for(i = 1; i <= 9; i++){
            for(j = 1; j <= i; j++){
                document.write(`<span>${j}x${i}=${i*j}</span>`);
            }
           document.write(`<br>`) 
        }
    </script>
</body>
</html>

while循环和for循环