2022-07-12 第七小组 闫馨月 学习笔记

控制一段代码,反复执行很多次。


一、for循环

控制一段代码,反复执行很多次。

格式:

for (初始化语句;循环条件;迭代语句) {

                循环体语句(重复执行的代码);

}

示例

for(let i=0;i<10;i++){

        console.log(i);

}

1.1 for循环案例1

A:求1-5之间的数据和,并把求和结果在控制台输出。

分析:

①定义for循环使其能够依次访问到:1、2、3、4、5。

for(let i=1;i<=5;i++){

    }

②在循环外定义一个整数变量sum用来累加这些数据。

 //为什么要放在外面??只需要一个变量,放到循环外,相当于在外面准备了一个盒子,每次变量到一个数据,就把这个数据加上去。

let sum=0;
  
for(int i=1;i<=5;i++){

    sum+=i;

//把别人的数据加给自己用 += ,循环1就加一给自己。
//sum=sum+i
}
 console.log(sum);

 ③循环结束后,输出球和变量即是结果。

                        

1.2 for循环案例2

A:求1-10之间的奇数和,并把求和结果在控制台输出。

方法一:

①定义for循环使其能够依次访问到:1、2、3、4、5.....10。

②在for循环中,通过 if 筛选出奇数

for (let i = 1; i <=10; i++) {

        if( i % 2 == 1){

            //i=1,3,5,7..
    }

}
    

③在循环外定义一个整数变量sum用来累加这些数据。

 let sum=0;

    for (let i = 1; i <=10; i++) {

        if( i % 2 == 1){//求偶数,就i % 2 == 0

            sum+=i;

            //i=1,3,5,7..
        }

    }
    console.log(sum);

方法二:

①定义for循环使其能够依次访问到:1、2、3、4、5、7、9

for (let i = 1; i <=10; i+=2) {

      }
    

②在循环外定义一个整数变量sum用来累加这些数据。

 let sum=0;

    for (let i = 1; i <=10; i+=2) {//求偶数,i就等于2

        sum+=i;

    }

    console.log(sum);

二、while循环

初始化语句:

while(循环条件){

        循环体语句(被重复执行的代码);

        迭代语句;

}

什么时候用for循环?什么时候用while循环?

• 功能上完全一样,for能解决的while也能解决,反之亦然。

• 使用规范:知道循环几次:使用for;不知道循环几次建议使用:while。

while循环案例1

今年是2022年,公司有10个人, 每年公司会以百分之10的比重招人,问:哪一年公司人数突破100人。

代码如下(示例):

function count(){

            let year = 2022;

            let sum = 10;

            while(sum <= 100) {

                sum *= 1.1;

                year++;
            }
            return year + "年人数超过了100人,人数是:" + sum;
        }

        // 需求就是最后我要打印输出哪一年超过了100人,人数是:xxxx
       
             console.log(count());

三、do-while循环

先执行再判断循环条件。

do-while循环的特点:一定会先执行一次循环体


初始化语句;

do {

        循环体语句;

        迭代语句;

}while (循环条件);


三种循环的区别:

🟢for循环和while循环(先判断后执行)

🟢do...while(第一次先执行后判断)

for和while的区别:

🟢for循环和while循环的执行流程是一模一样的。

🟢如果已知循环次数建议使用for循环,如果不知道循环几次建议使用while循环。

🟢for循环中,控制循环的变量旨在循环中可以使用。while循环中,控制循环的变量旨在循环后还可以继续使用。

四、死循环

一直循环的执行下去,如果没有干预不会停止下来。


for(;;){

console.log("a");

}

//经典做法

while(true){

.......

        }

do{

        .....

}while(true);

五、抓取元素

根据id去抓取HTML元素

let div1 = document.getElementById("div1");

console.log(div1);

根据class抓取HTML元素,得到的时一堆元素

let divs = document.getElementsByClassName("div1");

console.log(divs[0]);

根据tag抓取HTML元素,得到的是一堆元素

let divs = document.getElementsByTagName("div");

console.log(divs[0]);

新方法

根据选择器去抓取一个元素

let div = document.querySelector('.div2');

console.log(div);

根据选择器去抓取全部元素

let divs = document.querySelectorAll('.div1');

 console.log(divs[0]);

改变元素的内容

div.innerText = "<h1>我是通过JS来的</h1>";

div.innerHTML = "<h1>我是JS来的</h1>";

六、事件

事件就是当我们和HTML标签元素发生交互时产生的行为


onclick:单击事件

ondblclick:双击事件

onblur:失去焦点

onfocus:获得焦点

onload:加载

当设置了对应的事件之后,会执行目标函数

点击按钮,弹出一个弹窗

function jump(a){

        alert("按钮被点击了..." + a);

}

 function valid(){

        console.log("失去了焦点...");

}

function get(){

         console.log("获得了焦点...");

 }

function change(){

         console.log("发生了改变...");

 }

function load(){

        console.log("已经加载完毕...");

}


总结

以上就是今天主要学习的循环结构、事件、抓取元素。本文仅仅简单介绍了循环结构、事件、抓取元素的使用。总的来说我基本了解,想要完全了解还需要更多的项目案例进行巩固。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值