20220712 第一小组 张明旭 JS学习记录

心情

今天是正式学习的第四天，感觉上午任务不是特别重，身心放松，知识点都掌握的不错；一到下午刚上课就画风突变，内容突然就男了，后来依旧是男上加男。。。

重点：

• 四大循环（理解）
• 内置函数（了解）
• 在script中用document抓取body中元素，使其发生内容或状态的改变（理解）
• 事件（理解）

知识点

一、对昨天内容的复习及作业解答：

switch...case的效率问题case后面是字面量（常量）

不要强行用switch

函数名的命名规则：小驼峰式（第一个单词首字母小写，其余单词首字母大写）

作业解答：给一个日期，确定它是所在年的第几天：

 function getDays(year,month,day){
            let count = 0;
            switch(month){
                case 12 : count += 30;
                case 11 : count += 31;
                case 10 : count += 30;
                case 9 : count += 31;
                case 8 : count += 31;
                case 7 : count += 30;
                case 6 : count += 31;
                case 5 : count += 30;
                case 4:
                    count += 31;
                case 3:
                    count += (isRun(year) ? 29 : 28)
                case 2:
                   count += 31;
                case 1:
                   count += day;

            }
            return count;
        }
        console.log(getDays(2022,2,14));
        function isRun2(year){
            switch(year % 400){
                case 0:
                    console.log(year + "是闰年");
                    return;
                default:
                    if(year % 4 == 0 && year % 100 != 0){
                        console.log(year + "是闰年");
                        return;
                    }
                    console.log(year + "不是闰年");
            }
        }
        isRun2(2100);

二、四大循环

1、for语句循环

面试题：for循环的执行步骤。

1. let i = 0；初始化条件，当i=0时，循环开始，只走一次；

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

3. 循环体：这个循环在重复什么事情；

4. i++ 是循环条件，每次循环体执行完毕，让i产生变化；

• i 可以看做是一个局部变量，在一个for里；

• 循环条件可根据实际情况更改；

• 当更改循环条件时,确保循环条件能达到判断条件标准，避免死循环；

• 在开发中避免死循环；

for(let i = 0;i < 10;i++){
            // 循环体
            console.log(i);

        }
        // for 的几种死循环,死循环但不报错
           // for(;;){
           // }

           // for(let i = 0; i < 10;){
           // }

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

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

        let arr = [10,5,9,7,-5,100,257]
        // 打印输出数字中所有元素
            // console.log(arr[0]);
        // 数组有一个属性length=长度
        // 长度：数组中有多少元素
        // 注意区分长度和下标（索引）
        // 去除数组中最后一个元素，不能是undefined
            // console.log(arr[arr,length-1]);
    // 如果变量的作用域有重叠，不要出现重名的现象，全局和局部的变量最好不要重名

// 练习1：
        // 找出数组中的最大值，可以用三元，可以用if...else
          // 答1：//  let max = 0;
                 // for(let i = 0;i < arr.length;i++){
                 //     if(max < arr[i]){
                 //         max = arr[i]
                 //     }
                 // }
                 // console.log("最大值为：" + max);
          // 答2：假设  max = arr[0](数组中第一个值)
        let max = arr[0];
        for (let i = 0;i < arr.length;i++){
            if(max < arr[i]){
                max = arr[i]
            }
        }
        console.log("最大值为：" + max);

        // 练习2：
        // 判断一个数是否在数组中，如果在，返回它的下标
        // 如果不存在，返回-1
        let a = -5;
        let index = -1;
        for (let i = 0;i < arr.length;i++){
            if(a == arr[i]){
                index = i;
            }

        }
        console.log(index);

2.for in 循环语句：能做的事少，只能做遍历操作

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

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

3.while循环

执行流程：

• let a = 10;初始条件

• a < 100 循环判断条件

• a++ 循环条件

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

• while初始化条件不受自己控制，for循环自己定义初始化条件

• while循环条件没有固定位置不好控制，for循环的循环条件都是隔离的（有固定位置的）

• while写函数时，返回值便于管理，

死循环：

    //    while（ture）{}；

// 练习1：
            // 今年是2022年
            // 今年我们公司有10个人
            // 每年公司会以10%的比重招人
            // 问：哪一年公司人数突破100人
        // 答1:
        let b = 10;
        let i = 0;
        while(b < 100 ){
            b += 0.1*b;
            i++;
        }
        console.log((2022 + i) + "年能突破100人");
        // 答2：
        function count(){
            let year = 2022;
            let sum = 10;
            while(sum <= 100){
                sum *= 1.1;
                year++;
            }
            // return可以返回字符串
            return year + "年超过了100人，人数是" + sum;
        }
        console.log(count());

4.do...while循环

执行流程：

• let a 初始化条件
• do 做什么事
• log 循环体
• a > 100判断条件
• a++循环条件

do...while 和 while的区别

• do...while先执行一次在判断，while如果条件不成立，一次都不执行

let a = 10;
        do{
            console.log(a);

        }while(a > 100);

do...while的死循环：

// do{}while（ture）；

三、JS的内置函数

Array ：

1.concat（）链接

2.join('-')设置分隔符连接数组为一个字符串

3.pop()删除最后一个元素

4.sort()排序，从小到大

    let arr = [1,2,3];
    // arr.pop();
    // console.log(arr[2]);
     console.log(arr.sort());

Global:

1.isNaN():判断一个值是不是数字

2.parseFloat:把一个整数转换成小数

3.parseInt():把一个小数取整

4.number():把一个值转换成number类型

5.string():把其他类型转换成字符串

    let a =1.9;
    console.log(parseInt(a));

    let num1 = parseFloat("11");
    let num2 = parseFloat("12");
    console.log(num1 + num2);

string：

1.charAt():取出指定位置的字符

2.indexxof():判断指定的字符是否存在，如果存在返回下标

3.lastIndexof('a'):从后往前找

4.replace（'a','b'):替换字符串

5.split('-'):根据- 去拆分字符串，得到数组

6.substring(1,6);字符差截取

    let b = "hello";
    console.log(b.charAt(0));

Math:

1.ceil():向上取整

2.floor()：向下取整

3.round():四舍五入

4.random():随机生成一个0-1的随机数

5.三角函数():tan() sin() cot() cos()

6.E PI

let c = 10.5;
       console.log(Math.ceil(c));
       // 生成0-100的随机整数，不包括0，包括100
       console.log(Math.random()*100);
       // 生成5-11的随机整数
       console.log(Math.random());

Date:

1.new Date():获取系统当前时间

2.getDate():返回日期的日

3.getHours():返回时间中的时

4.getMinutes():返回时间中的分

5.getSeconds():返回时间中的秒

6.getTime():获取系统当前时间

7.getYear():获取当前时间的年

四、在script中用document抓取body中元素，使其发生内容或状态的改变 （我认为和css有点相似）

    根据id抓取HTML元素
    let div1 = document.getElementById('div1');
    console.log("div1");
    // 根据class抓取HTML元素,得到的事一堆元素
    let divs = document.getElementsByClassName('div1');
    console.log(divs[0]);

    // 根据标签抓取AHTML元素
    let div3 = document.getElementsByTagName("div");
    console.log(div3[0]);

    // 新方法
    // 根据选择器抓取第一个元素(选择器在括号里，旧方法不在括号里)
    let div = document.querySelector('.div');
    console.log(div);

    // 根据选择器抓取全部某个类型元素
    let div4 = document.querySelectorAll('.div');
    console.log(div[0]);

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

    // 获取元素内的文本
    console.log(div.innerText);

    // 获取元素内的所有内容，包括标签
    console.log(div.innerHTML);

    // 改变div内容，不认标签
    div.innerText = "我是JS来的"

    // 改变div内容，认识标签
    div.innerHTML = "<h1>我是JS来的<h1>"

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

• onclick：单击事件
• ondblclicl:双击事件
• onblur:失去焦点
• onfocus:得到焦点
• onchange:改变事件
• onload:加载事件（加载的时候干什么）
• onmousemove:鼠标跟随事件(跟随鼠标的特效)

        // 当设置了对应的时间之后会执行目标函数
        // 点击按钮就弹出一个弹窗
        function jump(){
            alert("按钮被点击了")

        }
        function valid(){
            console.log("失去了焦点。。。");

        }
        function get(){
            console.log("获得了焦点。。。");

        }
        function change(){
            console.log("发生了改变");
        }
        function load(){
            console.log("已经加载完毕");
        }

<details>
<summary>练习</summary>

<!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>
    <p>
        账号：<input type="text" id="username">
    </p>
    <p>
        密码：<input type="password" id="password">
    </p>
    <p>
        <input type="button" value="登录" onclick="jump()">
    </p>

    <script>
        // 练习1
        // 需求:当用户名==admin，密码==123456，提示登陆成功
        // 否则，提示用户名或密码错误
        // 思路：
        //     给按钮添加单击事件
        //     当点击按钮后，获取用户名框和密码框输入的值，然后判断，if（）登陆成功else（）用户名或密码错误
        function jump(){
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            if(username == "admin" && password == "123456"){
                alert("登录成功");
            }else{
                alert("用户名或密码错误");
            }

        }

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

<!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>
        用户名：<input type="text" id="username" onblur="valid()">
        <span></span>

        <script>
            /*
                在用户名的文本框中输入用户名，
                如果用户名为admin，则在span中显示用户名已被占用
                否则，显示用户名可用！
                分析：
                需要给文本框添加onchange，onblur，出发函数
                需要向span中写入内容！innerText innerHTML
            */
           function valid(){
                let username = document.querySelector("#username").value;
                let span = document.querySelector("span");
                if(username == "admin"){
                    // 用户名已被占用
                    span.innerText = "用户名已被占用！"
                }else {
                    // 用户名可用
                    span.innerText = "用户名可用！";
                }
           }

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

#作业：

<!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>---请选择省---</option>
        <option value="ji">吉林省</option>
        <option value="li">辽宁省</option>
    </select>
    <select id="shi" onchange="setqu()">
        <option >---请选择市---</option>

    </select>
    <select id="qu">
        <option>请选择区</option>

    </select>

    <script>
        function setshi(){
            document.querySelector('#qu').innerHTML='<option>请选择区</option>';

            // 思路：
            // 先抓取省的下拉菜单，知道你选了哪个省
            // 判断哪个省
            // 构建市的下拉菜单选项
            // 抓取市的下拉菜单

            //初始状态区没有选项
            // 选择了省，区没有选项
            // 选了省,选了市,选了区,又切换了省
            let sheng = document.getElementById("sheng").value;
            // 要保留市原本内容
            let shi = document.querySelector("#shi");
            let html = shi.innerHTML;
            if(sheng =='ji'){
                html='<option>请选择市</option>'
                html += '<option value="cc">长春市</option><option value="sp">四平市</option>';
                // 在写入选项之前清空
                shi.innerHTML = "<option >---请选择市---</option>"
                // 把拼接好的下拉菜单选项通过innerHTML放回下拉菜单中
                shi.innerHTML = html;
            }
            if(sheng == 'li'){
                html='<option>请选择市</option>'
                html +='<option value="sy">沈阳市</option> <option value="dl">大连市</option>';
                shi.innerHTML = "<option >---请选择市---</option>";
                shi.innerHTML = html;

            }
        }
        function setqu(){
            let shi = document.getElementById("shi").value;
            let qu = document.querySelector("#qu");
            let html1 = qu.innerHTML;
            if (shi == "cc") {
                html1='<option>请选择区</option>'
                html1 +='<option value="cy">朝阳区</option><option value="ly">绿园区</option>';
                qu.innerHTML = "<option>请选择区</option>";
                qu.innerHTML = html1;

            }
            if (shi =="sp") {
                html1='<option>请选择区</option>'
                html1 +='<option value="td">铁东区</option><option value="tx">铁西区</option>';
                qu.innerHTML = "<option>请选择区</option>";
                qu.innerHTML = html1;

        }
        if (shi =="sy") {
            html1='<option>请选择区</option>'
            html1 +='<option value="hg">皇姑区</option> <option value="sh">沈河区</option>';
            qu.innerHTML = "<option>请选择区</option>";
            qu.innerHTML = html1;

        }
        if (shi =="dl") {
            html1='<option>请选择区</option>'
            html1 +='<option value="jz">金州区</option><option value="gjz">甘井子区</option>';
            qu.innerHTML = "<option>请选择区</option>";
            qu.innerHTML = html1;

        }
        }

    </script>

</body>
</html>