JavaScript流程控制-循环

1、循环的主要目的
2、js中的循环
3、for循环
4、while循环
5、do while循环
6、循环小结
7、案例

1、循环的主要目的

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //循环的目的：可以重复执行某些代码
        for(var i = 1;i<=100;i++){
    
    
            console.log("我喜欢");  
        }
    </script>
    
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2、js中的循环

在这里插入图片描述

3、for循环

在这里插入图片描述

3.1、for循环语法结构

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

在这里插入图片描述

3.2、for循环执行过程

在这里插入图片描述

1.首先执行里面的计数器变量var i = 1 .但是这句话在for里面只执行一次 index
2.去i<=100来判断是否满足条件，如果满足条件就去执行循环体不满足条件退出循环
3.最后去执行i++ i++是单独写的代码递增第一轮结束
4.接着去执行i<=100如果满足条件就去执行循环体不满足条件退出循环第二轮

3.3、断点调试

在这里插入图片描述

3.4、案例：一行打印五个小星星

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '';
        for(var i = 1;i<=5;i++){
    
    
            str = str+'★';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.5、双重for循环

3.5.1、双重for循环概述

在这里插入图片描述

3.5.2、双重for循环执行过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

3.5.3、打印五行列的小星星

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '';
        for(var i = 1;i <= 5; i++){
    
    //外层循环负责打印五行
            for(var j = 1;j <= 5;j++){
    
    //里层循环负责一行打印五个星星
                str = str + '★';   
            }
            str = str +'\n'
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.5.4、打印倒三角案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 = str +'\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

3.5.5、打印九九乘法表案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '';
        for( var i = 1;i <= 9;i++){
    
    
            for(var j = 1;j <= i;j++){
    
    
                // 1 x 2 = 2
                str += j + 'x' + i + '=' + i * j +'\t';
            }
            str +='\n';//每一行打印完胡换行
        }
        console.log(str);
        
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.6、for循环小结

在这里插入图片描述

4、while循环

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问。
        var message = prompt('你爱我吗?');
        while(message != '我爱你'){
    
    
            message = prompt('你爱我吗?');
        }
        alert('我也爱你呀')
    </script>
</head>
<body>
    
</body>
</html>

5、do while循环

在这里插入图片描述

6、循环小结

在这里插入图片描述

7、案例

在这里插入图片描述

JavaScript流程控制-循环

JavaScript流程控制-循环

1、循环的主要目的

2、js中的循环

3、for循环

3.1、for循环语法结构

3.2、for循环执行过程

3.3、断点调试

3.4、案例：一行打印五个小星星

3.5、双重for循环

3.5.1、双重for循环概述

3.5.2、双重for循环执行过程

3.5.3、打印五行列的小星星

3.5.4、打印倒三角案例

3.5.5、打印九九乘法表案例

3.6、for循环小结

4、while循环

5、do while循环

6、循环小结

7、案例

猜你喜欢