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>
posted @   华丽转身撞到墙  Views(46)  Comments(2Edit  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示