JavaScript学习笔记03

目录

一、循环结构

二、跳转语句

三、计数器

四、document.write()

五、双重for循环

六、累加算法


程序三大结构:

 

一、循环结构

        循环结构:根据某些给出的条件,重复的执行同一段代码

        三要素:初始值、条件、改变条件的语句
        注:必须要有改变条件的语句,否则会成为死循环。

        1.while循环

while(条件表达式){
    //循环体->循环执行的语句块
}

        示例: 使用while循环倒序输出1-5

<script>
        //1.初始条件
        var num=5
        //2.条件判断
        while(num>0){
            //3.要执行的代码
            console.log(num)
            //4.自身改变
            num--
        }
</script>

        2.do-while循环

        先执行,再进行条件判断

do{

        //要执行的代码

}while(条件)

        示例:控制台输出“first implement”一次

<script>
    var num=10
    do{
        console.log('first implement');
        num++
    }while(num<10);
</script>

        3.for循环

for(var i=0;i<n;i++){
    要执行的代码
}

        示例:输出1-10

<script>
    for (var i=1;i<=10;i++){
         console.log(i)
    }
</script>

二、跳转语句

        1.break语句:终止循环

        break与循环一起使用,在循环没有结束时,因满足设置的条件,提前终止循环。

        示例:有五个包子,吃完第三个就饱了,提前结束循环

<script>
    /*有五个包子,吃完第三个就饱了,结束*/
    for(var i=1;i<=5;i++){
        console.log('吃第'+i+'个包子');
        if(i==3){
            break
        }
    }
</script>

        2.continue语句:结束本次循环

        在循环中,把本次的循环跳过去,继续执行后面的循环

        示例:有五个包子,吃到第三个掉地上了,接着吃后面的

<script>
    /*有五个包子,吃到第三个掉地上了,接着吃后面的*/
    var s=0
    for(var j=1;j<=5;j++){
        if(j==3)
            continue
        console.log('吃第'+j+'个包子');
        s++
    }
    console.log('一共吃了'+s+'个包子');
</script>

三、计数器

        定义一个变量充当计数器功能,初始值为0(不一定,根据题目来),每达到所设条件,就执行一次计数器功能

        示例:100以内能被4整除的前五个数

<script>
    /*100以内能被4整除的前五个数*/
    var count=0 //计数器count
    for(var i=0;i<100;i++){
        if((i+1)%4 == 0){ //满足条件
            console.log(i+1);
            count++ //执行计数器累加功能
        }
        if(count == 5)
            break
    }
</script>

四、document.write()

        document.write('内容'),将结果打印到页面上,而不是控制台

        示例:

<script>
    document.write('hello world') //显示内容到页面
    document.write('<br>') //换行
    document.write('<h3>hello world<h3>') //加标签
</script>

 

五、双重for循环

        循环的嵌套:外层循环循环一次,内层要循环完

        编程思想:
                外层循环 -> 打印行数
                内层循环 -> 打印每行元素
                关键点:计算每行打印多少个元素,根据外层循环变量直到确定

        示例:输出三角形

<body>
    <script>
        for(var i=0;i<6;i++){
            for(var j=0;j<=i;j++){
                document.write("*")
            }
            document.write('<br>')
        }
    </script>
</body>

        打印结果:

        

六、累加算法

        类型诸如:
                _ + _ + ... + _ + _
        若设i为循环变量,s为前n项累加之和,则程序的基本结构为:

    s=0;
    for(i=1;i<=n;i++)
        s = s + _ ;

         示例:

<body>
    <script>
        var sum=0
        var n=1
        while(n<101){
            sum =sum + n
            n++
        }
        console.log(sum); //sum=5050
    </script>
</body>

七、练习

        1.九九乘法表

<!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>九九乘法表</title>
</head>
<body>
    <script>
        var str=""
        for (var i=1;i<=9;i++){
            for(var j=1;j<=i;j++){
                str += j+"x"+i+"="+(j*i)+"\t";// \t:水平制表(ht) ,跳到下一个tab位置
                // document.write(j+"x"+i+"="+(j*i)+'\t')
            }
            str += "\n"
            // document.write("<br/>")
        }
        console.log(str);
    </script>
</body>
</html>

 

        2.1-100的所有偶数

<!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>偶数</title>
</head>
<body>
    <script>
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                console.log(i);
            }
        }
    </script>
</body>
</html>

        结果太长,就不截图了。

        3.1-100内7的倍数

<!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>7的倍数</title>
</head>
<body>
    <script>
        for(var i=1;i<=100;i++){
            if(i%7==0){
                console.log(i);
            }
        }
    </script>
</body>
</html>

 

        4.20-80之间能被3整除的,输出每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>
</head>
<body>
    <script>
        /*20-80之间能被3整除的,每五个一行*/
        var count=0
        for(var i=20;i<=80;i++){
            if(i%3 == 0){
                document.write(i+' ')
                count++
            }
            // if(count%5 == 0){
            //     document.write("<br>")
            // }
            if(count === 5){
                document.write("<br>")
                count=0
            }
        }
    </script>
</body>
</html>

         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>
</head>
<body>
    <script>
        /*
            n上三角形行数
            i行数  空格  星
             i     n-i  2*i-1
        */
        var n=5
        for(var i=1;i<=n;i++){
            //打印空格
            for(var j=1;j<=n-i;j++){
                document.write('&nbsp;&nbsp;')
            }
            //打印星
            for(var t=1;t<=2*i-1;t++){
                document.write('*')
            }
            document.write('<br>')
        }
        /*
                *1 2*1-1
               ***3 2*2-1
              *****5 2*3-1
             *******7 2*4-1
            *********9 2*5-1
             *******7 2*4-1
              *****5 2*3-1
               ***3 2*2-1
                *1 2*1-1
        */
        m=4
        for(var i=m;i>0;i--){
            for(var j=m-i+1;j>=1;j--){
                document.write('&nbsp;&nbsp;')
            }
            for(var t=2*i-1;t>0;t--){
                document.write('*')
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

         6.分数求和

<!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>
</head>
<body>
    <script>
        var s=0
        for(var i=1;i<=100;i++){
            if(i%2==0){
                s += (-1/i)
            }else{
                s += 1/i
            }
        }
        document.write("1 - 1/2 + 1/3 - 1/4 + 1/5 ... +1/99 - 1/100的结果为:" + s)
    </script>
</body>
</html>

         7.50年后的工资

<!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>
</head>
<body>
    <script>
        /*入职薪资10k/月,每年涨幅5%,50年后工资多少?*/
        var salary=10000*12
        for(var i=1;i<50;i++){
            salary += salary*0.05
        }
        document.write('50年后的工资为' + salary.toFixed(2))
    </script>
</body>
</html>

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值