其他分享
首页 > 其他分享> > 20220712 第二小组 罗大禹 学习笔记

20220712 第二小组 罗大禹 学习笔记

作者:互联网

JavaScript

今日重点

  1. 循环
  2. 选取元素
  3. 事件

学习心得

  1. 使用循环时,一些小细节没有注意到,导致无法运行,通过检查代码,更改后,成功运行。
  2. 使用之前的知识点时,有些记不牢,需要查看笔记。要多加翻阅笔记加深印象

学习内容

重点1 四种循环

1. for循环(理解)

点击查看代码
         语法:
         for(let i =0;i<10;i++){
             /*循环体*/
         }
            执行流程:
            1.let i =0;初始化条件,当i=0时,循环开始 (初始化条件只走一次,在第一次循环开启之前)
            2.i<10;判断条件,会和初始化条件配合循环的执行。决定了循环什么时候停止。若无法停止为死循环
            3.循环体:循环在重复做啥事
            4.i++ 循环条件,每次循环体执行完毕,可以使i产生变化
            注意:
            a.i可以看作一个局部变量,即只在该for循环里有用
            b.循环条件是可以根据实际情况更改的
            c.当修改循环条件时,要确保循环可以向着终点(满足判断条的)前进
            d。我们在开发中,尽量避免死循环
          例子:
          <script>
          let arr = [10,5,7,-5,100,257];
          // 打印输出数组中的所有元素
          // 数组有一个属性length-长度
          // 长度:数组中有多少个元素
          // 注意区分长度和下标(索引),最大下标=最大长度-1
          for(let i = 0;i < arr.length;i++){
              console.log(arr[i]);
          }
           
          // 取出数组中的最后一个元素,不能是undefined
          console.log(arr[arr.length-1]);
          </script>
              

for循环练习

点击查看代码
        <script>
        //练习:判断一个数在数组中是否存在,如果存在,返回它的下标
        // 若不存在,返回-1
        // 当变量的作用域出现了重叠,不要出现重名的情况
        // 尤其是全局和局部,变量最好不要重名

        let arr = [10, 5, 7, -5, 100, 257];
        function cun(num,array){
            let index = -1;
            for(let i = 0;i < array.length;i++){
                if(array[i] == num){
                    index=i;
                }
            }
            return index;
        }
        console.log(cun(100,arr));
        </script>

2. for in(了解)

点击查看代码
        <script>
        let arr = [1,2,3,4,5,];
        // for in语句,能做的事情比较少,只能做遍历操作
        // 可以理解为a是arr数组的下标通过映射给a
        for(let a in arr){
            console.log(a);
        }
        </script>

3.while循环(了解)

点击查看代码
        语法:
        let a = 10
        while(a<100){
            a++;
        }
		while循环
         let a = 10; 初始化条件
         a<100 循环判断条件
         打印输出 循环体
         a++循环条件
         
         	while循环的执行流程
             1.初始化条件
        	 2.判断条件
        	 3.执行循环体
         	 4.自增(循环条件)
         
          while循环              pk          for循环

         初始化条件不好控制                 每个for循环的初始化条件都是单独的
         循环条件不好控制                   每个for循环的循环条件都是隔离的
         写函数时,返回值便于管理
         
         <script>
        /*练习
        今天是2022年我们公司有10个人
        每年公司会议百分之十的比重招人
        问,哪一年,公司人数突破一百人
        */
         function count(){
            let year = 2022;
            let sum = 10;
            while(sum<=100){
                sum*=1.1;
                year++;
            }
            return year + "年人数超过了100人,人数是:" + sum ;
        }
        console.log(count());
	</script>

4. do...while循环(了解)

点击查看代码
        语法:	
	let a = 10;
	do{
        a++;
        console.log(a);   
        }while(a > 100);

	do...while循环的执行流程
        1.let a 初始化循环
        2.do 做啥事
        3.log循环体
        4.a>100判断条件
        
        do...while和while的区别
        do...while先执行一次再判断。无论条件是否成立,至少执行一次
        while:如果条件不成立,一次都不走

死循环标准

点击查看代码
死循环: 
	for(;;){}
        while(true){}
	do{
        }while(true);

重点2 选取元素(了解)

1. 老写法

点击查看代码
        <script>

        <div class="div1" id="div1">
        <div class="div2" id="div2">我是div2</div>
    	</div>
	//1.根据id去抓取html元素
         	let div1 = document/*文档*/.getElementById("div1");
        	 console.log(div1);
        //2.根据class抓取html元素,得到的是一堆元素
        	 let divs = document.getElementsByClassName("div1");
         	console.log(divs[0]);
        //3.根据tag(标签)抓取html元素,得到的依然是一堆元素
        	 let divs = document.getElementsByTagName('div');
        	 console.log(divs[0]);

        </script>

2. 新写法

点击查看代码
        </script>

	<div class="div1" id="div1">
        <div class="div2" id="div2">我是div2</div>
    	</div>

	//1.根据选择器去抓取一个元素,抓取从上到下遇到的第一个
         	let div = document.querySelector('.div2');
        	 console.log(div);
        //2.根据选择器去抓取全部元素
         	let divs = document.querySelectorAll('div');
        	 console.log(divs[1]);
		let div = document.querySelector("div");
        //获取元素内部文本(文字),不会获取html标签
                console.log( div.innerText);
        //获取元素内部的所有内容,包括HTML标签
                console.log( div.innerHTML);
        // 更改div里的内容
                div.innerText = "我是JS来的";
                div.innerHTML = "<h1>我是JS来的</h1>";(会识别标签)

        </script>

3. 事件(理解)

1.事件

点击查看代码
	    onclick:单击事件
            ondblclick:双击事件
            onblur:失去焦点(一般用于文本框)
            onfocus:获得焦点
            onchange:改变(下拉框)
            onlode:加载(一般放在body上)
            
            例子:
            //当设置了对应的事件后,会执行目标函数
            <button type="button" onclick="jump('你好')">按钮</button>

	    <script>

	    function jump(a){
            alert("被Q了" + a);
       	    }

	    </script>

2. 事件练习

点击查看代码
<script>
        // 需求:当用户名==admin,密码==123456时,弹出弹窗,提示登陆成功
        // 否则用户名或密码错误
        /*
        当点击按钮时,获取用户名和密码框输入的值
        然后判断,if()登陆成功else用户名或密码错误
        */
       function am(){
        let username = document.querySelector('#username').value;
        let password = document.querySelector('#password').value;
        if(username == "admin" && password == "123456"){
            alert("登陆成功");
        }else{
            alert("用户名或密码错误");
        }
       }
</script>

4. 内置函数(了解)

点击查看代码
            Array(数组):
                1.concat()连接
                2.join('-')设置分隔符连接数组为一个字符串
                3.pop()删除最后一个元素
                4.sort()排序,从大到小排序
                5.reverse()对数组数据的倒序排序
            Global(全局函数):
                1.isNaN():判断一个值是不是数字
                2.parseFloat():把一个整数转换成小数
                3.parseInt():把一个小数转成整数,取整(砍掉小数)
                4.number():把一个值转成number类型
                5.string():把其他类型转成字符串110 120 119
            String(字符串):
                1.charAt():取出指定位置的字符
                2.indexof():判断指定的字符是否存在,若存在返回下标,若不存在返回-1
                3.lastindexof():从后往前找
                4.replace('a','b'):替换字符串(把字符串中的a全换成b)
                5.split('-'):根据横线去拆分字符串,得到一个数组
                6.substring(1,6):字符串的截取(从下标为1的位置截取到下标为6的位置)
            Math:
                1.ceil()向上取整
                2.floor()向下取整
                3.round()四舍五入
                4.random()随机,生成一个0-1的随机数
                5.tan() sin() cos cot
                6.E(e) PI(派Π)
            Date:
                1.new Date();获取系统当前日期
                2.getDate():返回日期的日 1~31
                3.getHours():返回时间的小时0~23
                4.getMinutes():返回事件中的分
                5.getSeconds():返回时间中的秒
                6.getTime():获取系统当前时间
                7.getYear():获取年

标签:20220712,arr,console,log,笔记,while,let,大禹,div
来源: https://www.cnblogs.com/ldydj/p/16472010.html