js(循环结构）

■ 教学目标

能够说出循环概念&好处

能够独立写出三种循环语法&说出三种循环运行流程（重中之重）

能够说出断点调式作用

能够说出break和continue作用&区别

能够说出三种循环如何选择

一、循环概念

明确需求

在生活中（循环概念）：重复做一件事的表现，举个栗子

拿起遥控器 - 放下
...
拿起遥控器 - 放下

这种操作就是循环

在生活中（循环目的）：

- 拿起遥控器是辅助上课
- 换个例子工厂流水线重复不断做一件事  提高工作效率

在计算机中（循环）

需求：输出10个1    console.log(1)  ..... 
需求：输出1亿个1

发现：挨个写，得写哭
解决：因为上述动作是重复的  所以通过循环解决

是什么

什么是循环：就是重复做一个件事的表现

循环的好处：提高工作效率

二、循环结构

• 循环结构：就是根据条件，确定是否需要重复执行同一段代码（注：只要条件为真就会一直执行
• 循环必须要有某些固定的内容组成

开始的代码  -> 循环的变量
		  ->  基于变量判断
		   -> 更新变量

三、while循环

语法

while (条件) {
  // 只要条件为真，就会执行这个大括号里面的代码
}

// 1. 循环变量初始化
while (//2.条件) {
  // 只要条件为真，就会执行这个大括号里面的代码
  // 3. 变量更新  切记切记切记  死循环
}

脚下留心：因为while循环只要条件为真，就会执行大括号中的代码

因此如果不更新就会出现死循环（后果浏览器崩溃、或者电脑变卡

输出1-10之间的所有数

<script>
/*
// 1. 循环变量初始化
while (// 2. 条件) {
    // 执行代码
    // 3. 更新
}
*/

// 输出1-10之间的所有数

var num = 1
while(num <11) {
    console.log(num)
    // 切记切记切记 更新
    num++
}
// 起初 num = 1
// num 1 < 11  进循环体  打印 1  更新 num=2
// num 2 < 11  进循环体  打印 2  更新 num=3
// num 3 < 11  进循环体  打印 3  更新 num=4
// num 4 < 11  进循环体  打印 4  更新 num=5
// num 5 < 11  进循环体  打印 5  更新 num=6
// num 6 < 11  进循环体  打印 6  更新 num=7
// num 7 < 11  进循环体  打印 7  更新 num=8
// num 8 < 11  进循环体  打印 8  更新 num=9
// num 9 < 11  进循环体  打印 9  更新 num=10
// num 10 < 11 进循环体  打印 10 更新 num=11
// num 11 < 11 不成立 退出循环   结束
</script>

输出1-100之间的和

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SI1ApKdH-1623721503859)(images/1591755735893.png)]

结果：5050

<script>
// 需求1：输出1-4的和
// 需求2：输出1-100的和

// 公式：<最后一个数+1
// 公式：<=最后一个数

// 需求1：输出1-4的和
// var sum = 0  // 留心：后期我要把输出的数字丢进sum盒子里面累计
// var num = 1
// while (num<5) {
//     console.log(num)
//     // sum = sum + num
//     sum += num
//     num++
//     // 1<5 输出1 更新2
//     // 2<5 输出2 更新3
//     // 3<5 输出3 更新4
//     // 4<5 输出4 更新5
//     // 5<5 不成立 退出循环
// }
// // 最终的结果：在外面输出
// console.log(sum)

// 需求2：输出1-100的和
// var num = 1
// while (num < 101) {
//     console.log(num) // 1-100
//     num++
// }

var sum = 0 // 1.搞盒子
var num = 1
while (num < 101) {
    console.log(num) // 1-100
    // 2.将数据丢进盒子里面累计
    // sum=值  // 这是丢进盒子
    // sum+num //累计 原有值+当前的数据
    // sum = sum+num // 复杂写
    sum += num       // 简写
    num++
}
console.log(sum)
</script>

输出1-100之间的偶数和

结果：2550

<script>
// 输出1-100之间的偶数和 
// 1. 先能输出1-100
// 2. 判断输出所有偶数
// 3. 求和

// var num = 1
// // while (num<=100) {
// while (num<101) 
// {
//     // 判断只要偶数  num%2 == 0
//     if (num%2 == 0) {
//         console.log(num)
//     }
//     num++
// }


var sum = 0
var num = 1
// while (num<=100) {
while (num<101) 
{
    // 判断只要偶数  num%2 == 0
    if (num%2 == 0) {
        console.log(num)
        // 累计 sum + num
        // 进盒子 sum = 结果
        // sum = sum+num
        sum += num
    }
    num++
}

console.log(sum)
</script>

四、do…while循环

说明

明确：dowhile和while大同小异

区别：就是dowhile先无条件执行一次再判断、while是先判断再执行

语法

1. 循环变量初始化
do {
    //...
    3 更新
    //...
}while(2 条件)

• **验证：**dowhile会先无条件执行一次，然后再判断

<script>
// 区别：dowhile会先无条件执行一次


// 验证：while肯定现判断
var num = 0
while (num>1) { // 先判断 不成立 
    console.log('while', num)
}

// 验证：dowhile不管三七二十一先执行一次

var num = 0
do {// 先无条件执行，然后再判断
    console.log('dowhile', num)
}while(num>1)
</script>

练习

输出1-4之间的所有数

<script>
// 输出1-4

var num = 1
do {
    console.log(num)
    num++
// } while (num<5)
} while (num<=4)
</script>

五、for循环

语法

for(循环变量初始化; 条件; 更新) {
    // 代码
}

脚下留心：

1 小括号中的数据通过分号“;"隔开

2 for循环运行流程：a初始化-判断是否成立，b更新-判断是否成立 后续都是这个步骤

练习

输出1-4之间的所有数

<script>
// 输出1-4之间的所有数

// num number    数字
// i   init/int  整数

// 2 for循环运行流程：a初始化-判断是否成立，b更新-判断是否成立  后续都是这个步骤

for (var i=1; i<=4; i++) {
    console.log(i)
}

// a第一次 循环变量初始化  判断  不成立-退出，成立-进大括号  1 
// b第二次 更新           判断  不成立-退出，成立-进大括号  2
//  第三次 更新           判断  不成立-退出，成立-进大括号  3
//  第四次 更新           判断  不成立-退出，成立-进大括号  4
//  第五次 更新           判断  5<4 5==4 不成立  退出
</script>

六、for、while、do…while的区别

• 语法

// 1. 循环变量初始化
while (// 2. 条件) {
	// ...
    // 3. 条件更新
	// ...
}

// 1. 循环变量初始化
do {
	// ...
    // 3. 条件更新
	// ...
}while(// 2. 条件)

for (循环变量初始化; 条件; 更新) {
    // ...
}

• 选择

明确：同一个功能不管用这三个哪一个语句都可以实现
然后：
1 已知循环次数 for
2 未知循环次数 while/dowhile   需要先无条件执行一次dowhile反之用while.

■ 综合案例

• 昨日作业

需求：输入年份，计算某一年是否是闰年

<script>
// 需求：输入年份，计算某一年是否是闰年
// 规则：闰年能被4整除且不能被100整除，或能被400整除
//      (year % 4 == 0 && year % 100 != 0)   ||  year % 400 == 0
// 校验： 2019不是（校验：平年28天、闰年29天）

// 2020 是
// 2019 不是

// 思路：
// 1. 创建一个变量 year 
// 2. 判断

// 1. 创建一个变量 year 
var year = prompt("请输入年")
// 2. 判断
if ((year % 4 == 0 && year % 100 != 0)   ||  year % 400 == 0) {
 alert("闰年")
} else {
 alert("平年")
}
</script>

需求：if判断 过了几天

<script>
// 练习4（if判断 过了几天）

// 根据输入的三个数字，判断是这一年的第几天

var year = 2016  // 年
var month = 2    // 月
var day = 11     // 日

var sum = 0

// 1. 通过for循环输出1-n月
// 2. 循环中判断你是第几月 然后丢进sum盒子统计
// 3. 当前月单独判断  如果是当前月直接让for循环停止 加当前天数

for (var num=1; num<=month; num++) 
{

 if (num == month) {
     sum += day
     break;  // 退出for循环
 }

 // console.log(num) // 1 2
 // 判断第几月 然后加
 switch (num) {
     case 2:
         // sum+=28
         // sum+=29
         // year % 4 ==0 && year % 100 != 0
         // year % 400 == 0
         if ( (year % 4 ==0 && year % 100 != 0) || year % 400 == 0) {
             sum += 29
         } else {
             sum += 28
         }
         break;
     case 1:
     case 3:
     case 5:
     case 7:
     case 8:
     case 10:
     case 12:
         sum += 31
         break;
     case 4:
     case 6:
     case 9:
     case 11:
         sum += 30
         break;
     default:
         break;
 }
}

console.log(sum)

</script>

• 今日案例

打印100以内7的倍数
打印100以内的奇数
打印100以内所有偶数的和
打印出1000-2000年中所有的闰年，并以每行四个数的形式输出
入职薪水10K，每年涨幅5%，50年后工资多少？   

<script>
// 数字 % 2 == 1   奇数
// 数字 % 2 == 0   偶数
// 看能不能整除
// 数字 % 7/3 == 0  能

// 打印100以内7的倍数
// 打印100以内的奇数
// 打印100以内所有偶数的和
// 打印出1000-2000年中所有的闰年，并以每行四个数的形式输出
// 入职薪水10K，每年涨幅5%，50年后工资多少？   


// 打印100以内7的倍数
// 1. 输出1-100
// 2. 加判断只打印7的倍数  num % 7 == 0
// for (var num=1; num<101; num++) {
//     // console.log(num)
//     if (num % 7 == 0) {
//         console.log(num)
//     }
// }


// 打印100以内的奇数
// 1 先输出1-100
// 2 判断输出    num%2 == 1
// for (var num = 1; num<=100; num++) {
//     // console.log(100)
//     // if (num%2 == 1) 
//     if (num%2 != 0) 
//     {
//         console.log(num)
//     }
// }

// 打印100以内所有偶数的和
// 1 先打印1-100
// 2 判断是不是偶数  num % 2 == 0
// 3 求和  搞一个sum盒子  丢进去累计  
// var sum = 0
// for (var num = 1; num<101; num++) {
//     // console.log(num)

//     if (num % 2 == 0) {
//         // console.log(num)
//         // sum + num
//         // sum = sum + num
//         sum += num
//     }
// }

// console.log(sum)


// 打印出1000-2000年中所有的闰年，并以每行四个数的形式输出
// 1. 打印1000-2000 所有数
// 2. 根据之前的 固定公式 判断是不是闰年  再网页输出
// 3. 待会说 并以每行四个数的形式输出

// for (var year = 1000; year < 2001; year++) {
//     // document.write(year, "<br />")
//     // year % 4 == 0 && year % 100 != 0
//     // year % 400 == 0
//     if ( (year % 4 == 0 && year % 100 != 0) ||  year % 400 == 0) 
//     {
//         document.write(year, "<br />")
//     }
// }


// 3. 待会说 并以每行四个数的形式输出
//    4 
//    8
//    ..
//    num % 4 == 0
// var num = 0
// for (var year = 1000; year < 2001; year++) {
//     // document.write(year, "<br />")
//     // year % 4 == 0 && year % 100 != 0
//     // year % 400 == 0
//     if ( (year % 4 == 0 && year % 100 != 0) ||  year % 400 == 0) 
//     {
//         num++
//         // document.write(year, "<br />")
//         document.write(year, '-')

//         if (num % 4 == 0) {
//             document.write("<br />")
//         }
//     }
// }


// 入职薪水10K，每年涨幅5%，50年后工资多少？   

// 分析：当前工资 = 去年工资 * 0.05 + 去年工资
// 代码：
// var money = 10000
// money = money  * 0.05 + money 
// ....
// money = money  * 0.05 + money 

// // 1. 循环50年
// // 2. 使用公式
// var money = 10000
// for (var num = 1; num<51; num++) {
//     money += money * 0.05  
// }
// console.log(money) // 114673.99785753674
</script>

七、断点调试 (重中之重）

讲解

• 说明

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步 一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

浏览器的 Debug工具

• 步骤

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

• 调试中的相关操作概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8icN1Z3-1623721503863)(images/1566345342991.png)]

• **练习 : **（直接复制，关键问题你会用debug调试工具）

console.log('start')

// 定义变量
var sum = 0;
// 循环
for(var num = 1; num <=10; num++)
{
	sum += num;
}

console.log('end')

任务

通过断点调试 验证 for/while循环运行流程

八、break终止循环

continue 结束本次循环

break 生活案例：吃包子 10个 假设你吃了5个吃不下

continue生活案例：吃包子 10个 假设你吃了5个 第6个脏了丢了 从7个开始吃

• 说明

break语句：退出循环
continue语句：退出当前循环，继续下一次循环

• 练习：通过for循环输出数字1-5, 分别判断当数字==3时使用break和continue的效果

<script>
// 通过for循环输出数字1-5, 
// 分别判断当数字==3时使用break和continue的效果

for (var num=1; num<6; num++) {

    // if (num == 3 ) { break }   大括号只有一行代码可以省略
    if (num == 3 ) break
    console.log(num)  // 1 2  
}

console.log('----')

for (var num=1; num<6; num++) {
    if (num == 3 ) continue
    console.log(num) // 1 2 4 5 
}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yXqVC0Ym-1623721503866)(images/1591775769254.png)]

九、案例：打印三角形

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-30Em5Aox-1623721503867)(images/1566364296794.png)]

<script>
// 需求：不通过循环输出一个9*9的长方形*
// document.write('*********<br />')
// document.write('*********<br />')
// document.write('*********<br />')
// document.write('*********<br />')
// document.write('*********<br />')
// document.write('*********<br />')
// document.write('*********<br />')
// document.write('*********<br />')
// document.write('*********<br />')

// 发现：上述代码冗余，重复执行一段代码用循环
// 解决：上循环  因为9行 所以循环9次

// for (var i = 1; i<=9; i++) {
//     document.write('*********<br />') 
// }

// 发现：上述代码还是冗余  刚才是行、现在是列
// 解决：继续通过for循环
// 先用：for循环输出9个星  再嵌套for
// for (var j = 1; j<=9; j++) {
//     document.write('*')  // *********
// }
// 演变：解决问题

// i = 1  1<9 成立 *********<br />
// i = 2  2<9 成立 *********<br />
// ...
// i= 9   9==9 成立  *********<br />
// i=10   10<9 10==9  都不成立 退出
// for (var i = 1; i<=9; i++) 
// {
//     for (var j = 1; j<=9; j++) {
//         document.write('*')  // *********
//     }
//     document.write('<br />') 
// }

// 控制行
for (var i = 1; i<=20; i++) 
{
    // for (var j = 1; j<=1; j++) {
    // for (var j = 1; j<=2; j++) {
    // for (var j = 1; j<=3; j++) {
    // ...
    // for (var j = 1; j<=9; j++) {
    // 控制列
    for (var j = 1; j<=i; j++) 
    {
        document.write('*')  // *********
    }
    document.write('<br />') 
}
</script>

十、案例：九九乘法表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Db5MD5g-1623721503868)(images/1566364219350.png)]

<script>
/*
最外层 控制行
最内层 控制列
    1.先数最多的列
    2.按照最多的列输出数据
    3.写下来找规则
*/
for (var i = 1; i<=9; i++)
{
    // 输出*
    /*
        i=1   *     j<=1
        i=2   **    j<=2
        i=3   ***   j<=3
    */
    // for (var j=1; j<=9; j++)
    for (var j=1; j<=i; j++)
    {
        // document.write(i, '*', j, '=', i*j, '&nbsp;&nbsp;&nbsp;')
        document.write(i +  '*' + j + '=' + (i*j) + '&nbsp;&nbsp;&nbsp;')
        // document.write('*<span style="display:inline-block;margin-right:10px;"></span>')
    }
    // 输出隐藏的换行
    document.write('<br />')
}
</script>

■ 复习

循环

什么是循环：重复做一件事的表现
循环的好处：提高工作效率

// 1. 循环变量初始化
// 2. 循环变量判断
while (条件) {
    // 代码 & 更新
}

// 1. 循环变量初始化
do {
    // 3代码 & 更新
}while (2条件) 

for (1循环变量初始化;2循环变量判断;3更新) {
    代码
}


不管什么功能这第三个循环都可以实现
知道循环次数用for 不知道循环次数用while或者do...while
需要无条件先执行一次用do...while 反之用while

断点调试
之前：我们是用肉眼 分析代码从上到下执行 每一行出现什么结果
但是：实战工作中 有很多文件相互关联 有时候肉眼分辨不过来  通过开发工具调试  一行一行走 一行一行看结果

断点使用：1-打开谷歌浏览器的开发工具 -> 2-点sources -> 3-点击你要调试的文件 设置断点 然后刷新网页
	    4-点↓一步步走
	  
break		终止循环
continue    结束当前/本次循环，继续下一次循环

■ 作业

• 代码题

见附件

• 非代码题目

1将课件一级标题需求练习至少敲三遍
2通过有道云笔记或word文档根据自己的理解整理学习笔记（晚整理，睡回忆，早读）
3预习明天课程内容
4晚自习下课前10分钟 小组成员相互提问 今日教学目标