while和for循环语句
对于初学者的友好理解方式
本章学习的开头 咱们先来聊一下求和 因为本章学习涉及到求和
求和 -->来个容器 然后每次循环的数都扔到里面做加法运算
这个容器在我们代码中叫变量 所以创建一个变量，储存所有数的和
最终打印输出最终值
创建的这个变量：这个变量不会改变整个计算过程的一个量
以上均为个人总结
while语句
目标：掌握while循环语句，能重复执行某段代码
循环/;重复执行某段代码，而while：在....，期间
while语法：
while(判断条件){ 循环条件，重复执行的代码 }
代码示例： <script>
//先声明i这个变量
let i=1;
while(i<=10){
document.write(i)
i++;
//注意点：再循环内体中，务必需要改变判断条件中的变量
}
</script>
结果如下：
----> 先判断条件是否成立，如果条件成立，此时执行循环体
再判断条件是否成立，如果条件成立，此时执行循环体
再判断条件是否成立，如果条件成立，此时执行循环体
........
当判断条件不成立时，此时终止循环
- while循环的三要素：
- 变量的初始值
- 终止的条件 （ 什么时时候结束循环 要提前想好 并设置 终止条件要设置，否则循环就会一直执行，造成死循环）
- 变量的变化量 自增或自减 i++ i--
注意： 不要i++习惯了 代码出错 注意看变量名是否与自己命名的变量名一致
- 例题
需求：打印1-100的和
<script>
//1.求1-100的和
//1.先打印1-100的值
//2.累加计算
let gross=0;
//用来储存和的变量
let num=1;
while(num<=100){
//打印1-100
// document.write(num) 因为求和 这个结果就不能被打印出来了
gross=gross+num; //简写 gross+=num
num++;
}
document.write(gross);
</script>
结果为：
2.例题
需求：求1-100的偶数和
<script>
//需求：求1-100的偶数和
//1.先打印1-100的数
//2.打印1-100的偶数
//3.求值
let gross=0;
let num=1;
while(num<=100){
// document.write(num); //需要得到偶数 所以就不用这一步 用if判断得到偶数
if(num%2===0){
// document.write(num) //这一步也不需要输出 这时候偶数已得出来 思考怎么把偶数求和
gross=gross+num; //简写gross+=num
//利用gross这个变量容器把这个偶数相加
}
num++
}
document.write(gross);
</script>
结果为：
3.例题
需求：当输入我爱你时 弹窗才会消失
<script>
//需求：当输入我爱你时 弹窗才会消失
let love; //未赋值的变量
while(love!=='我爱你'){
love=prompt('你爱不爱我')
}
</script>
效果：
for循环语句
- for循环基本使用
- 循环嵌套
- 退出循环
掌握for循环重复执行某些代码
for循环的语法
-
也是重复执行代码
-
好处：把声明起始值，循环条件，变化值写到一起，让人一目了然
for循环也是循环，它也有三要素
1:变量的初始值
2：变量的条件，也是限定好变量的取值范围
3：最后就是变量的变化 自增或自减 i++ i--
快捷输出for格式：
代码模板示例：
for (let index =1; index <=10; index++) {
}
代码示例：for(let i=1;i<=100;i++){
document.write(`我今年${i}岁了<br>`)
} 得出结果为：我今年1岁了
我今年2岁了
我今年3岁了
我今年....岁了
我今年100岁了
1.例题
需求：使用for循环 求1-100的总和
<script>
//使用for循环 求1-100的总和
//先打印出1-100
//累加
let gross=0;
//创建容器 变量 来接收 num输出的值 并累加
for (let num =1; num <=100; num++) {
// document.write(num) ; //需要求和 此步就先不做打印
gross=gross+num; //可简写 gross+=num
}
document.write(gross);
</script>
结果为：
2.例题
需求：求1-100的偶数和
<script>
// 需求：求1-100的偶数和
//1.还是先打印出1-100
//2.打印出1-100的偶数 是否为偶数 是做判断 那么就用if
//3.累加求值
let gross=0;
//同理 求和 来个变量容器
for (let num = 1; num <=100; num++) {
// document.write(num) ; //需要的是偶数 那这一步 不需要做输出
if(num%2===0){
gross=gross+num;
}
}
document.write(gross);
</script>
结果为：
循环嵌套
掌握for循环重复执行某些代码
通俗的说 就是一个for循环里再套一个for循环 一个循环里再套一个循环，一般用在for循环里
for 循环嵌套 语法
代码示例：
for (let index = 0; index < array.length; index++) {
;
for (let index = 0; index < array.length; index++) {
;
}
}
1.例题
需求： 计算： 假如每天记住5个单词，3天后一共？能记住多少单词 拆解： 第一天 ： 5个单词 第二天： 5个单词 第三天： 5个单词
<script>
//需求 3天背5个单词案例 for循环嵌套来做
//1.先用外面for打印出天数
//2.用里面for打印出单词个数
//并单独输出 天数 和个数
for (let index =1; index <=3; index++) {
document.write(`第${index}天<br>`) ;
for (let index2 =1; index2 <=5; index2++) {
document.write(`今天记住第${index2}个单词<br>`) ;
}
}
</script>
结果为：
2.例题
需求：用户自己输入天数 并输出背多少个单词
<script>
// 需求 用户自己输入天数 并输出背多少个单词
//1.先还是正常写出嵌套的格式
//2.变量的初始值不变还是为1
//2.咱们控制变量的循环条件即可
//3.循环条件的值我们确定不了 需要用户输入 所以需要创建一个变量
let day=prompt('请输入第几天')
let number=prompt('请输入单词个数')
for (let index1 = 1; index1<=day; index1++) {
document.write(`第${index1}天<br>`);
for (let index2 = 1; index2<=number; index2++) {
document.write(`今天记住第${index2}个单词<br>`) ;
}
}
</script>
当输入1 和10 结果为：
注意： 要先分清楚每个嵌套各自的目的
退出循环
continue , break 这是 for循环中的两个关键字 ( 能使用break就使用break 、 )
continue 跳过本次循环 开启下一轮循环 ( 我们通过if else也能实现类似功能的 不是必须要用 )
break 直接终止循环
break 和 continue
break 和 continue关键字都可以用在 for 和 while 循环结构中，表示跳出循环； break：直接跳出循环 continue 语句用在循环结构内，用于跳过本次循环中剩余的代码，并在表达式的值为真时，继续执行下一次循环。
代码示例：for (let index = 1; index <=10; index++) { if(index==9){
代码示例：for (let index = 1; index <=10; index++) {
if(index==9){
break ;
};
document.write(index);
} 本来此段代码应该输出1-10的 由于加了break 就终止了循环 停在了只能输出1-8
总结： whlie循环与for循环的区别 ：
当知道执行次数的时候一般用for
例如：for i=0 ,i<n ,i++ {} 这里的n是已知数，可以循环n次
当条件循环时 一般用while
while i<n {}
不知道要循环多少次，当i>=n的时候 停止循环
推崇： 在循环次数 确定时，用for， 不确定时，用while`
代码题： ` 需求： 页面中打印出5行5列的星星 ①：利用双重for循环来做 ②：外层循环控制打印行，内层循环控制每行打印几个（列）
//1 用for循环嵌套试试
//分别控制行和列
for (let index= 1; index <=5; index++) {
document.write(`<br>`)
for (let star= 1; star<=5; star++) {
document.write(`⭐`) ;
}
}
//思路真的很重要
//可以先试着打一个出来 再打印一行出来
//可以直接用最笨的办法打印出5行来
//中间添加一个br换行
//最终你会发现 写一行内容 再利用外面的循环 循环出5行来
//外面的循环里面的代码5次 里面循环里面的代码5次
升级版本： 用户输入行数和列数，打印对应的猪猪！
//需求 用户输入行数，打印对应的星星
//外面控制行 line
//里面控制个数 number
let line=prompt("老板想来几行猪")
let number=prompt("老板每行想来几头猪")
for (let index1 =1; index1 <=line; index1++) {
for (let index2 =1; index2 <=number; index2++) {
document.write(`🐖`);
}
document.write(`<br>`)
}
</script>
打印倒三角形星星
需求：如图所示
分析：
①：利用双重for循环来做
②：外层循环控制打印行，内层循环控制每行打印几个（列）
③：内层循环的个数跟第几行是一一对应的
九九乘法表
需求：如图所示
分析：
①：只需要把刚才倒三角形星星做改动
②： ★ 换成 1 x 1 = 2 格式
<style>
span{
display: inline-block;
padding: 10px ;
border: 2px solid #000;
width: 80px;
text-align: center;
}
</style>
</head>
<body>
<script>
for (let index =1; index <=9; index++) {
for (let index1 = 1; index1<=index; index1++) {
let gross=index*index1;
document.write(`<span>${index}*${index1}=${gross}</span>`) ;
}
document.write(`<br>`)
}
</script>
