2022-07-12 第二组 卢睿 学习心得

JS

今日学完了JS
明天要学java了，太快了啊
不过今天的内容都吸收的差不多了

注意

不要强行用switch

函数的命名规则

小驼峰式

switch...case里的break是可选的

循环

for语法

  1. let i = 0;初始化条件，当i=0时，循环开始

  2. i<10；判断条件，会和初始化条件配合循环的执行，决定了循环什么时候停下来

  3. 循环体，循环在重复做什么事情

  4. i++ 循环条件，每次循环体执行完毕让1产生变化
    面试题：for循环的执行条件

  5. i可以看做是一个局部变量

  6. 循环条件是看根据实际情况更改的

  7. 当修改循环条件时，要确保循环可以朝着一个有头（终点）的方向去改变，确保它能够到达这个位置

  8. 在开发中，尽量避免死循环

for循环的特殊写法
for(let i = 0;i < 10;){
}

for(let i = 0;;i++){
}

for(let i = 0;;){
}

for(;;){
}
数组
let arr = [10,5,9,7,-5,100,257];
//打印输出数组中的所有元素
//数组有一个属性length-长度
//长度：数组中有多少元素
//注意区分长度和下表（索引）
        
for(let i = 0;i < arr.length;i++){
        console.log(arr[i]);
}
        
//取出数组中的最后一个元素，不能是underline
console.log(arr[length - 1]);
练习1

找出数组中的最大值，可以用三元，也可以用if

我自己的代码

let arr = [10,5,9,7,-5,100,257];
let max = arr[0];
for (let i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
        max = arr[i]
    }            
}
console.log(max);

和老师的差不多，这种方法也叫打擂台

练习2

判断一个数在数组中是否存在，存在就打印，不存在输出-1
自己写的，有点毛病

let max = 9;
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] == max) {
                console.log(i);
                break;
            }else{
                console.log(-1);
                break;
            }
        }

老师的答案
确实妙

        let arr = [10, 5, 9, 7, -5, 100, 257];
        function exists(num,array) {
            let index = -1
            // 当变量的作用域出现了重叠，不要出现重名的情况
            // 尤其是全局和局部，变量最好不重名
            for (let i = 0; i < array.length; i++) {               
                if(array[i] == num){
                    return 1
                }                
            }           
        }
        console.log(exists(100,arr));

for in

能做的事情较少，只能做遍历操作

let arr = [1,2,3,4,5];
for(let a in arr){
    console.log(a);
}

//可以理解为a是arr数组的下标通过映射给a

while循环

let a = 10; 初始化条件
a < 100 循环判断条件
打印输出 循环体
a++循环条件

执行流程：

  1. 初始化
  2. 判断条件
  3. 执行循环条件
  4. 自增

while：初始化条件不好控制
for：每个for循环的初始化条件是单独控制的，每个for循环的a++都是隔离的

练习

今年是2022年
今天我们公司有10个人
每年公司会以百分之10的比重招人
问：哪一年公司人数突破100人

do...while 循环

let a 初始化条件
do 做什么事
log 循环体
a > 100 判断条件
a++循环条件
do...while 和whlie的区别
do...while 先执行一次，在判断,无论条件是否成立，至少执行一次
while：如果条件不成立，一次都不走

死循环：

while (ture) {  
}
JS内置函数

Array:
1. concat（）
2. join()设置分隔符连接数组为一个字符串
3. pop()删除最后一个元素
4. sort()排序，从小到大排序
Global：
1. isNaN（）判断一个值是 不是数字
2. parseFloat():把一个整数转换成小数
3. parseInt():把一个小数转成整数，取整
4. number():把一个值转换成number类型
5. string():把其他类型转换成字符串
String
1. charAt(1) 取出指定位置的字符
2. indexOf('a') 判断指定的字符是否存在，如果存在则返回下标
3. lastIndexOf('a') 从后往前找
4. replace('a','b') 替换字符串
5. split('~') 根据~去拆分字符串，得到一个数组
6. substring(1,6) 字符串截取
Math
1. ceil() 向上取整
2. floor() 向下取整
3. round() 四舍五入
4. rangom() 随机生成一个0~1随机数
5. tan() cos sin
6. E PI
Date
1. new Date() 获取系统当前日期
2. getDate() 返回日期的日 1~31
3. getHours() 返回时间中的时 0~23
4.......

查找

抓取用document

    <div id="div1">我是div</div>
    <script>
        let div = document.getElementById('div1');
        console.log(div);
    </script

    <div id="div1" class="aaa">我是div</div>
    <script>
        let divs = document.getElementsByClassName('aaa');
        console.log(divs[0]);
    </script>

    <div id="div1" class="aaa">我是div</div>
    <script>
        // 新写法，从上往下第一个div  括号里写的时选择器，需要带#或者.
        let div = document.querySelector('div')
        console.log(div);
    </script>

    <div id="div1" class="aaa">我是div</div>
    <script>

        // 获得的是集合，想获取具体的要加上角标
        let divs = document.querySelectorAll('div')
        console.log(divs);
    </script>

操作内容

        let div = document.querySelector('#div1')
        console.log(div,innerText);
        div.innerText = "<b>我是加粗的<b>"




        //根据id去抓
        let div1 = document.getElementById("div1")
        console.log(div1);

        // 根据class抓取HTML元素，得到的是一堆元素
        let divs = document.getElementsByClassName("div1")
        console.log(div[0]);
        
        // 根据tag抓取HTML元素,得到的是一堆元素
        let divs = document.getElementsByTagName("div")
        console.log(div[0]);
        
        // 新方法，根据选择器去抓取一个元素，从上到下遇见的第一个，标签选择器
        let div = document.querySelector("div")
        console.log(div);
        
        // id选择器或标签  用.div2
        let div = document.querySelector("#div2")
        console.log(div);
        
        // 拿到的是所有的
        let divs = document.querySelectorAll('div')
        console.log(divs[0]);
        
        let div = document.querySelector("div");
        // 获取元素内部的文本
        console.log(div.innerText);
        
        let div = document.querySelector("div");
        // 获取元素内部的标签的所有
        console.log(div.innerHTML);
        
        let div = document.querySelector("div");
        div.innerText("我是JS来的")
        
        let div = document.querySelector("div");
        //能认识标签
        div.innerHTML("<h1>我是JS来的<h1>");
        
        <input type="text" id="username">
        <script>
            let input = document.querySelector("input");
            input.value = "我是JS放进文本框的";
        </script>

事件

事件就是当我们和HTML标签元素发生交互时产生的行为
onclick：单击事件
ondblclick: 双击事件
onblor：失去焦点（点出去）
onfocus：获得焦点（点一下）
onchange：改变
onload：加载

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

案例

当用户名admin，密码123456，提示登陆成功，否则提示用户名或密码错误
思路：给按钮添加单击事件，当点击按钮时，获取用户名和密码框输入的值，然后进行判断，if...else

案例

在用户的文本框输入用户名，如果用户名为admin，在span中显示用户名已被占用，否则在span中显示用户名可用，

作业：三级联动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="sheng" onchange="setShi()">
        <option value="qxzs">---请选择省---</option>
        <option value="jl">吉林省</option>
        <option value="ln">辽宁省</option>
    </select>
    <select id="shi" onchange="setQu()">
        <option value="qxzs1">---请选择市---</option>
    </select>
    <select id="qu">
        <option>---请选择区---</option>

    </select>
    <script>
        function setShi() {
            let sheng = document.querySelector("#sheng").value;
            let shi = document.querySelector("#shi");
            let html = shi.innerHTML;
            let qu = document.querySelector("#qu");
            if (sheng == 'jl') {
                html = '<option  value="qxzs1">---请选择市---</option><option value="cc">长春市</option><option value="sp">四平市</option>';
                shi.innerHTML = html;
                qu.innerHTML = '<option>---请选择区---</option>'


            }
            if (sheng == 'ln') {
                html = '<option  value="qxzs1">---请选择市---</option><option value="sy">沈阳市</option><option value="sl">大连市</option>';
                shi.innerHTML = html;
                qu.innerHTML = '<option>---请选择区---</option>'

            }
            if (sheng == 'qxzs') {
                html = '<option  value="qxzs1">---请选择市---</option>';
                shi.innerHTML = html;
                qu.innerHTML = '<option>---请选择区---</option>'
            }

        }
        function setQu() {
            let shi1 = document.querySelector("#shi").value;
            let qu = document.querySelector("#qu");
            let html2 = qu.innerHTML;
            if (shi1 == 'qxzs1') {
                qu.innerHTML = '<option>---请选择区---</option>';              
            }
            
            if (shi1 == 'cc') {
                qu.innerHTML = '<option>---请选择区---</option>';
                html2 = "<option>---请选择区---</option><option value='ng'>南关区</option><option value='cy'>朝阳区</option>";
                qu.innerHTML = html2;
            }
            if (shi1 == 'sp') {
                qu.innerHTML = '<option>---请选择区---</option>';
                html2 = "<option>---请选择区---</option><option value='td'>铁东区</option><option value='sl'>双辽市</option>";
                qu.innerHTML = html2;
            }
            if (shi1 == 'sy') {
                qu.innerHTML = '<option>---请选择区---</option>';                
                html2 = "<option>---请选择区---</option><option value='gh'>皇姑区</option><option value='sh'>沈河区</option>";
                qu.innerHTML = html2;
            }
            if (shi1 == 'dl') {
                qu.innerHTML = '<option>---请选择区---</option>';                                
                html2 = "<option>---请选择区---</option><option value='jz'>西岗区</option><option value='jz'>金州区</option>";
                qu.innerHTML = html2;
            }
           
        }

    </script>
</body>

</html>
过程：

市控制县出了点小插曲，检查了好久，才发现问题出在省控制市的函数里，这个小问题解决完了后一切就变得特别顺利，一会就全部写出来了。感觉代码可以多优化一些，第一次写稍微复杂的题，感觉磕磕绊绊的，但和另外两位同学讨论了之后就有思路了。

感想：

在写代码的时候遇见了bug，不能第一时间求助别人，先自己多想想，能自己磕出来就自己磕出来，自己咳出来的感觉特别爽！！！

posted @   LegendR  阅读(35)  评论(0)  编辑  收藏  举报
相关博文：
· 2022-07-14 第二组 卢睿 学习心得
· 2022-08-24 第八组 卢睿 学习心得
· 20220712 第二组 刘世琦 学习记录
· 2022-07-12 第八组 刘禹彤 学习笔记
· 2022-07-12 第三组 高严 JavaScript 02
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛