重学Javascript基础（五） JavaScript的循环语句

文章	分类	评论
186	3	34

01.认识循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        while(true){
            console.log("hello World")
        }
    </script>
</body>
</html>

02.循环语句-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>
</head>
<body>
    
    <script>
        // 死循环
        while(true){
            console.log("Hello World")
            console.log("Hello Coderwhy")
        } 
    </script>
</body>
</html>

03.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>
</head>
<body>
    
    <script>
        // 1.练习一：打印10次Hello World
        var count = 0
        while (count < 10){
            console.log("Hello World:",count)
            count++
        }

        // 2.练习二：打印0~99的数字
        var count = 0
        while(count < 100){
            console.log(count)
            count++
        }

        // 3.练习三：计算0~99的数字和
        var count = 0
        var totalCount = 0
        while(count < 100){
            totalCount += count
            count++
        }
        console.log("totalCount:",totalCount)

        // 4.练习四：计算0~99的奇数和
        // 如何判断一个数字是奇数还是偶数
        var num = 120
        if(num % 2 !== 0){
            // 奇数
            console.log("num是一个奇数")
        }

        var count = 0;
        var totalCount = 0
        while(count < 100){
            if(count % 2 !== 0){
                totalCount += count
            }
            count++
        }

        console.log("所有的奇数和：",totalCount)

        // 5.练习五：计算0~99的偶数和
        var count = 0
        var totalCount = 0
        while(count < 100){
            if(count % 2 === 0){
                totalCount += count
            }
            count++
        }

        console.log("所有的偶数和：",totalCount)

        // 算法优化
        var count = 0
        var totalCount  = 0
        while(count < 100){
            totalCount += count
            count += 2
        }

        console.log("所有的偶数和：",totalCount)
    </script>
</body>
</html>

04.循环语句-do-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>
</head>
<body>
    <script>
        // do...while 语法结构
        // do{

        // }while(条件)

        // 练习一：打印10次Hello World
        var count = 0
        do {
            console.log("Hello World")
            count++
        }while(count < 10)

        // 练习二：计算0~99的数字和
        var count = 0
        var totalCount = 0
        do{
            totalCount += count
            count++
        }while(count < 100)
        console.log("totalCount:",totalCount)
    </script>
</body>
</html>

05.循环语句-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>
</head>
<body>
    
    <script>
        /*
            1.首先，会先执行var count = 0;
            2.根据条件执行代码
                count < 3
                alert(count) 
                count++
        */
       for(var count = 0;count < 3;count++){
        alert(count)
       }
    </script>
</body>
</html>

06.循环语句-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>
</head>
<body>
    
    <script>
        // 1.打印10次Hello World
        // for(var i = 0;i<10,i++){
        //     console.log("Hello World")
        // }

        // 2.打印0~99的数字
        for(var i = 0;i < 100;i++){
            console.log(i) 
        }

        // 3.0~99的数字和
        var totalCount = 0
        for(var i = 0;i < 100;i++){
            totalCount += i
        }
        console.log("totalCount:",totalCount)

        // 4.0~99的奇数和
        var totalCount = 0
        for(var i = 0;i<100;i++){
            if(i%2 !== 0){
                totalCount += i 
            }
        }
        console.log("totalCount:",totalCount)

        // 算法优化
        var totalCount = 0;
        for(var i = 1;i < 100;i+=2){
            totalCount += i 
        }
        console.log("totalCount:",totalCount)

    </script>
</body>
</html>

07.循环嵌套的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // for循环的嵌套：循环中执行体，里面又嵌套了循环
        for(var i = 0;i<10;i++){
            console.log("i开始执行：",i)

            for(var j = 0;j<3;j++){
                console.log("执行j循环")
            }

            console.log("i结束执行：",i) 
        }
    </script>
</body>
</html>

08.循环嵌套练习一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <script>
        // 在屏幕上显示一个❤
        // document.write("❤")

        // 案例一：
        for(var i = 0;i<9;i++){
            document.write("<div>")
                for(var m = 0;m<10;m++){
                    document.write("❤")
                }
            document.write("</div>")
        }
    </script>
</body>
</html>

09.循环嵌套练习二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i = 0;i<6;i++){
            document.write("<div>")
                for(var m = 0;m < i+1;m++){
                    document.write("❤ ")
                }
            document.write("</div>")
        }
    </script>
</body>
</html>

10.循环嵌套练习三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i = 0;i<9;i++){
            document.write("<div>")

                for(var m = 0;m<i+1;m++){
                    var a = m + 1
                    var b = i + 1
                    var result = (m+1)*(i+1)
                    document.write(`${a}*${b}=${result}`)
                    document.write(a+"*"+b+"="+result+" ")
                }
                
            document.write("</div>")
        }
    </script>
</body>
</html>

11.循环嵌套练习三-美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            padding: 8px 16px;
            border: 1px solid orange;
            color: red;
        }
    </style>
</head>
<body>

    <script>
        document.write("<table>")
            for(var i = 0;i<9;i++){
                document.write("<tr>")
                    for(var m = 0;m<i+1;m++){
                        var a = m + 1
                        var b = i + 1
                        var result = (m+1)*(i+1)
                        document.write(`<td>${a}*${b}=${result}</td>`)
                    }
                document.write("</tr>")
            }
        document.write("</table>")
    </script>
    
</body>
</html>

12.循环的控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var names = ["abc","cba","nba","mba","bba","aaa","bbb"]

        // 循环遍历数组
        // break关键字的使用
        // 需求：遇到nba时，不再执行后续的迭代
        // for(var i = 0;i<4;i++){
        //     console.log(names[i])
        //     if(names[i] === "nba"){
        //         break;
        //     }
        // }

        // continue关键字的使用：立刻结束本次循环，执行下一次循环（step)
        // 需求：不打印nba
        for(var i = 0;i<7;i++){
            if(name[i]==="nba" || names[i] === "cba"){
                continue
            }
            console.log(names);
        }
    </script>
</body>
</html>

13.随机生成数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // Match.random():[0,1)
        for(var i = 0;i < 1000;i++){
            var randomNum = Math.random() * 100
            randomNum = Math.floor(randomNum)
            console.log(randomNum)
        }

        // 生成一个0~99的随机数
        var randomNum = Math.floor(Math.random() * 100);
        
    </script>
</body>
</html>

14.猜数字游戏-综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.随机生成一个0~99的数字
        var randomNum = Math.floor(Math.random()*100)
        alert(randomNum);
        // 2.玩家有7次机会猜测数字
        var isSuccess = false
        var count = 3
        for(var i = 0;i<count;i++){
            // 获取用户的输入
            var inputNum = Number(prompt("请输入您猜测的数字："))

            // 和randomNum进行比较
            if(inputNum === randomNum){
                alert("恭喜你，猜对了")
                isSuccess = true
                break
            }else if(inputNum > randomNum){
                alert("您猜大了")
            }else{
                alert("您猜小了")
            }

            if(i === count - 1){
                alert("您的次数已经用完了")
            }
        }

        // if(!isSuccess){
        //     alert("您的机会用完了~")
        // }
    </script>
</body>
</html>

感谢大家观看，我们下次见

什么是作用域链以及作用域链在javascript中的作用是什么？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]回顾如何定义作用域链如何定义'作用域'？说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念，它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构，即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中，每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]

Hary

哈喽，你的SSL好像过期喽

abzzp

@秋风于渭水确实 [[微笑]]

通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]

BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]

什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]

秋风于渭水

这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。

defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]

async属性是什么？它有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]

城市教堂

我热爱旅游专栏。令人惊艳了解路线。

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

程序员鸡皮

站点介绍