JavaScript零基础通关（7）for 循环断点调试：for循环重复某些操作求学生成绩案例一行打印5个星星打印五行五列的星星

编程语言 2022-04-20 01:49:51 阅读次数: 0

JavaScript 流程控制-循环

  1. 循环
    循环目的
    在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句
    规律性的重复操作，
  2. JS 中的循环
    在Js 中，主要有三种类型的循环语句：
    for 循环
    while 循环
    do…while 循环
  3. for 循环
    在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

2.1 语法结构
for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：
把某些代码循环若干次，通常跟计数有关系

for(初始化变量; 条件表达式; 操作表达式 ){
    
    
    //循环体
}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。
var i=0;

for( 初始化变量; 条件表达式; 操作表达式 ){
    
    
    //循环体语句
}

执行过程：

  1. 初始化变量，初始化操作在整个 for 循环只会执行一次。
  2. 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
  3. 执行操作表达式，此时第一轮结束。
  4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
  5. 继续执行操作表达式，第二轮结束。
  6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

执行操作表达式，这个时候第一轮结束，
断点调试：
断点调试就是自己在程序的某一行设置一个断电，调试的时候，程序运行到这一行就会停住，
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。
2.2 for 循环重复相同的代码
for循环可以重复相同的代码 ，比如我们要输出10句“媳妇我错了”

//  基本写法
for(var i = 1; i <= 10; i++){
    
    
    console.log('媳妇我错了~');
}
// 用户输入次数
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++) {
    
    
    console.log('媳妇我错了~');
}

2.3 for 循环重复不相同的代码
for 循环还可以重复不同的代码，这主要是因为使用了计数器 ，计数器在每次循环过程中都会有变化。
例如，求输出一个人1到100岁：

//  基本写法
for (var i = 1; i <= 100; i++) {
    
    
      console.log('这个人今年' + i + '岁了');
}

2.3 for 循环重复不相同的代码
for 循环还可以重复不同的代码，这主要是因为使用了计数器 ，计数器在每次循环过程中都会有变化。
例如，求输出一个人1到100岁：
for(var i=01;i<=100;i++)【else console.log('这个人今年’+i+‘岁了’);
2.4 for 循环重复某些相同操作
for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。
课堂案例1： 求1-100之间所有整数的累加和
需要循环100次，我们需要一个计数器 i
我们需要一个存储结果的变量 sum ，但是初始值一定是 0
核心算法：1 + 2 + 3 + 4 … ，sum = sum + i;

循环的目的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 循环的目的：可以重复执行某些代码
        console.log('媳妇我错了');
        console.log('媳妇我错了');
        console.log('媳妇我错了');
        console.log('---------------------');
        for (var i = 1; i <= 1000; i++) {
    
    
            console.log('媳妇我错了');

        }
    </script>
</head>

<body>

</body>

</html>

for循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. for 重复执行某些代码， 通常跟计数有关系
        // 2. for 语法结构
        // for (初始化变量; 条件表达式; 操作表达式) {
    
    
        //     // 循环体
        // }
        // 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用 
        // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
        // 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
        // 6. 代码体验 我们重复打印100局 你好
        for (var i = 1; i <= 100; i++) {
    
    
            console.log('你好吗');
        }
    </script>
</head>

<body>

</body>

</html>

for循环执行过程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环的执行过程
        for (var i = 1; i <= 100; i++) {
    
    
            console.log('你好吗');
        }
        // 1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index
        // 2. 去 i <= 100 来判断是否满足条件， 如果满足条件  就去执行 循环体  不满足条件退出循环 
        // 3. 最后去执行 i++   i++是单独写的代码 递增  第一轮结束 
        // 4. 接着去执行 i <= 100 如果满足条件  就去执行 循环体  不满足条件退出循环   第二轮
    </script>
</head>

<body>

</body>

</html>

for循环执行相同的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环可以执行相同的代码
        for (var i = 1; i <= 10; i++) {
    
    
            console.log('媳妇我错了');

        }
        // 我们可以让用户控制输出的次数
        var num = prompt('请您输入次数');
        for (var i = 1; i <= num; i++) {
    
    
            console.log('媳妇我错了');

        }
    </script>
</head>

<body>

</body>

</html>

for循环重复不同的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环可以重复执行不同的代码  因为我们有计数器变量 i 的存在 i每次循环值都会变化
        // 我们想要输出1个人 1~100岁
        // for (var i = 1; i <= 100; i++) {
    
    
        //     console.log('这个人今年' + i + '岁了');

        // }
        for (var i = 1; i <= 100; i++) {
    
    
            if (i == 1) {
    
    
                console.log('这个人今年1岁了，他出生了');
            } else if (i == 100) {
    
    
                console.log('这个人今年100岁了，他死了');
            } else {
    
    
                console.log('这个人今年' + i + '岁了');

            }
        }
    </script>
</head>

<body>

</body>

</html>

for循环可以重复执行不同的代码，因为我们由计算器变量i的存在，i每次循环值都会发生变化

06-for循环重复某些操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环重复执行某些操作 比如说我们做了100次加法运算
        // 求 1~100 之间的整数累加和
        //         需要循环100次，我们需要一个计数器  i  
        // 我们需要一个存储结果的变量 sum ，但是初始值一定是 0
        // 核心算法：1 + 2 + 3 + 4 ....   ，sum  =  sum + i;
        var sum = 0; // 求和 的变量
        for (var i = 1; i <= 100; i++) {
    
    
            // sum = sum + i;
            sum += i;
        }
        console.log(sum);
    </script>
</head>

<body>

</body>

</html>

07-for循环案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 求1-100之间所有数的平均值   需要一个 sum 和的变量 还需要一个平均值 average 变量
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= 100; i++) {
    
    
            sum = sum + i;
        }
        average = sum / 100;
        console.log(average);

        // 2. 求1-100之间所有偶数和奇数的和   我们需要一个偶数的和变量 even  还需要一个奇数 odd
        var even = 0;
        var odd = 0;
        for (var i = 1; i <= 100; i++) {
    
    
            if (i % 2 == 0) {
    
    
                even = even + i;
            } else {
    
    
                odd = odd + i;
            }
        }
        console.log('1~100 之间所有的偶数和是' + even);
        console.log('1~100 之间所有的奇数和是' + odd);

        // 3. 求1-100之间所有能被3整除的数字的和   
        var result = 0;
        for (var i = 1; i <= 100; i++) {
    
    
            if (i % 3 == 0) {
    
    
                // result = result + i;
                result += i;
            }
        }
        console.log('1~100之间能够被3整数的数字的和是：' + result);
    </script>
</head>

<body>

</body>

</html>

var sum=0;
var average=0;
for(var i=1;i<=100;i++0{
sum+=i;}
average=sum/100;
console.log(average);
var result=0;
for(var i=1;i<=100;i++){
if(i%3==0){result+=i;}}
console.log('1-100之间能够被3整除的数字和是‘+Result);

08-求学生成绩案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 弹出输入框输入总的班级人数(num)
        // 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到
        // for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num
        // 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）
        // 弹出结果
        var num = prompt('请输入班级的总人数:'); // num 总的班级人数
        var sum = 0; // 求和的变量
        var average = 0; // 求平均值的变量
        for (var i = 1; i <= num; i++) {
    
    
            var score = prompt('请您输入第' + i + '个学生成绩');
            // 因为从prompt取过来的数据是 字符串型的需要转换为数字型
            sum = sum + parseFloat(score);
        }
        average = sum / num;
        alert('班级总的成绩是' + sum);
        alert('班级平均分是：' + average);
    </script>
</head>

<body>

</body>

</html>

for(var i-1;i<=num;;i++){
var score=prompt(‘请您输入第’+i+‘个学生成绩’);
sum=sum+parseFloat(score);
average=sum/num;

09-一行打印5个星星

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 一行打印五个星星 
        // console.log('★★★★★');
        // for (var i = 1; i <= 5; i++) {
    
    
        //     console.log('★');

        // }
        // var str = '';
        // for (var i = 1; i <= 5; i++) {
    
    
        //     str = str + '★';
        // }
        // console.log(str);
        var num = prompt('请输入星星的个数');
        var str = '';
        for (var i = 1; i <= num; i++) {
    
    
            str = str + '★'
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

var str=‘’;

for(var i=1;i<=5;i++){str+=‘3’;}
var num=prompt(‘请输入星星的个数’);
var str=‘’;
for(var i=1;i<=num;i++){str+=‘’;}
console.log(str);

10-双重for循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 双重for循环 语法结构
        // for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    
    
        //     for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
    
    
        //         // 执行语句;
        //     }
        // }
        // 2. 我们可以把里面的循环看做是外层循环的语句
        // 3. 外层循环循环一次， 里面的循环执行全部
        // 4. 代码验证
        for (var i = 1; i <= 3; i++) {
    
    
            console.log('这是外层循环第' + i + '次');
            for (var j = 1; j <= 3; j++) {
    
    
                console.log('这是里层的循环第' + j + '次');

            }
        }
    </script>
</head>

<body>

</body>

</html>

for(外层的初始化变量；外层的条件表达式；外层的操作表达式){
for(里层的初始化变量；里层的条件表达式；里层的操作表达式){}}
for(var i=1;i<=3;i++){
console.log(‘这是外层循环’+i+‘此’);
for(var j=1;j<=3;j++){
console.log(‘这是里层的循环’+j+‘此’);}}

11打印五行五列的星星

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 打印五行五列星星
        var str = '';
        for (var i = 1; i <= 5; i++) {
    
     // 外层循环负责打印五行
            for (var j = 1; j <= 5; j++) {
    
     // 里层循环负责一行打印五个星星
                str = str + '★';
            }
            // 如果一行打印完毕5个星星就要另起一行 加 \n
            str = str + '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

var str=‘’;
for(var i=1;i<=5;i++){
for(var j-1;j<=5;j++){//里层循环负责一行打印五个星星
str+=‘#’;}
str+=‘\n’;
}console.log(str);

12-打印n行n列的星星

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 打印n行n列的星星
        var rows = prompt('请您输入行数:');
        var cols = prompt('请您输入列数:');
        var str = '';
        for (var i = 1; i <= rows; i++) {
    
    
            for (var j = 1; j <= cols; j++) {
    
    
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

for(var i=1;i<=rows;i++){for(var j=1；j<=cols;j++){
str+=;#;;}
str+=‘\n’;}console.log(str);

13-打印倒三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 打印倒三角形案例
        var str = '';
        for (var i = 1; i <= 10; i++) {
    
     // 外层循环控制行数
            for (var j = i; j <= 10; j++) {
    
     // 里层循环打印的个数不一样  j = i
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

var str=‘’;
for(var i=1;i<=10;i++){
for(var j=i;j<=10;j++){str+=‘#’;}
str+=‘\n’;}console.log(str);

14-99乘法表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 九九乘法表
        // 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
        // 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行  
        // 内层的 for 循环控制每行公式  j  
        // 核心算法：每一行 公式的个数正好和行数一致， j <= i;
        // 每行打印完毕，都需要重新换一行
        var str = '';
        for (var i = 1; i <= 9; i++) {
    
     // 外层循环控制行数
            for (var j = 1; j <= i; j++) {
    
     // 里层循环控制每一行的个数  j <= i
                // 1 × 2 = 2
                // str = str + '★';
                str += j + '×' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

var str=‘’;
for(var i=1;i<=9;i++){
for（var j=1;j<=i;j++){str+=l+‘x’+i+‘=’+i*j+‘\t’;}
str+=‘\n’;}

15while循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. while 循环语法结构  while 当...的时候
        // while (条件表达式) {
    
    
        //     // 循环体
        // }
        // 2. 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环
        // 3. 代码验证
        var num = 1;
        while (num <= 100) {
    
    
            console.log('好啊有');
            num++;
        }
        // 4. 里面应该也有计数器 初始化变量
        // 5. 里面应该也有操作表达式  完成计数器的更新 防止死循环
    </script>
</head>

<body>

</body>

</html>

var num=1’
while(num<=100){
console.log(‘好啊有’);
num++;}
里面应该也有计数器，初始哈变量
里面应该也有操作表达式，完成计数器的更新防止死循环

16-while循环案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // while循环案例
        // 1. 打印人的一生，从1岁到100岁
        var i = 1;
        while (i <= 100) {
    
    
            console.log('这个人今年' + i + '岁了');
            i++;
        }
        // 2. 计算 1 ~ 100 之间所有整数的和
        var sum = 0;
        var j = 1;
        while (j <= 100) {
    
    
            sum += j;
            j++
        }
        console.log(sum);

        // 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
        var message = prompt('你爱我吗?');
        while (message !== '我爱你') {
    
    
            message = prompt('你爱我吗?');
        }
        alert('我也爱你啊！');
    </script>
</head>

<body>

</body>

</html>

var i=1;
while(i<=100){console.log(‘这个人今年’+i+‘碎了’);
i++;}
var sum=0;
var j=1;
while(j<=100){
sum+=j

17-do-while循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1.do while 循环 语法结构
        do {
    
    
            // 循环体
        } while (条件表达式)
        // 2.  执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
        // 3. 代码验证
        var i = 1;
        do {
    
    
            console.log('how are you?');
            i++;
        } while (i <= 100)
        // 4. 我们的do while 循环体至少执行一次
    </script>
</head>

<body>

</body>

</html>

do-while循环语法结果，do{循环体}while(条件表达式)
var i=1;do{console.og(‘how are you?’);i++;}while(i<=100)
do-while循环体至少执行一次

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/124094732
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022