2022-07-12 第二小组 张鑫 学习笔记

实训第五天 js巩固

一.今日重点

1.案例回顾

2.四种循环

3.内置函数

4.元素节点

5.事件

6.三级联动实现

二.学习心得

今天的学习强度很大，昨天对js已经有了初步的认识，今天将js和html连接到一起后难度骤升。知识点方面，对于事件以及循环的部分还需要进一步加强，晚上自己做关于三级联动网页的实现，也遇到了很多问题，例如不能通过对市级标签的改变进而改变县级标签，最后我用了比较常规的方法总算做出了想要的效果，还需要继续努力，学的知识越来越多，这就需要不断地复习巩固，训练加强思维。

三.学习内容

案例回顾：

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

2.不要强行使用switch

3.函数命名规则：小驼峰式

switch..case中的break是可选的

循环：

1.for 循环

执行步骤：

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

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

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

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

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

②循环条件是可以根据实际情况更改的

③当修改循环条件时，要确保循环可以向终点前进去改变

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

for循环的特殊写法(死循环不报错)

for( ; ; ){ }

案例1：

let arr = [10, 5, 9, 7, -5, 100, 257];
打印输出数组中所有元素
console.log(arr[0]);

数组有一个属性length

长度：数组中有多少个元素

注意区分长度和下标（索引）

把数组中的每个元素都操作一遍，叫做数组的遍历（迭代）

for (let i = 0; i <arr.length; i++) {console.log(arr[i]);}
取出数组中的最后一个元素，不能是underfined
console.log(arr.length-1);

找出数组中的最大值

let max = arr[0];
for (let i = 0; i < arr.length; i++) {            
    if (arr[i]>max) {
       max = arr[i];
    }      
}
console.log(max);
function exists(num,array) {
            let index = -1;
            for (let i = 0; i < array.length; i++) {
                if (array[i] == num) {
                    index = i; }
            } return index;  
        }
        console.log(exists(100,arr));

for in语句：能做的事情比较少，只能做遍历操作

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

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

while循环执行流程:

let a =10:初始化条件

a < 100:循环判断条件（条件表达式）

打印输出:循环体

a++ :循环条件

1.初始化条件

2.判断条件

3.执行循环体

4.自增

while循环         pk         for循环
初始化条件不好控             每个for循环的初始化条件都是单独控制的
循环条件不好控               每个for循环的a++都是隔离的
写函数时,返回值便于管理

案例：

今年是2022年.今年公司有十人,每年公司会以10%的比重招人,问:哪一年公司人数突破100人.

function up(year,count) {
            while (count < 100) {
                count*=1.1;
                year++;
            }
            return year+'年公司突破100人,'+'人数是'+count;
        }
        console.log(up(2022,10));
```html
        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)

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.random():随机生成0-1的随机数

5.三角函数 tan sin cos cot

6.E PI

Date:

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

2.getDate():返回日期的日1~31

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

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

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

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

7.getYear():获取年

根据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('div');
 console.log(divs[0]);

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

获取元素内部的文本,不会获取到内部HTML标签

console.log(div.innerText);

获取内部所有内容，包括HTML标签

console.log(div.innerHTML);

改变元素内容

div.innerText = 'woshijslaide '
div.innerHTML = "<h1>woshijslaide</h1>"

let username = document.querySelector('#username');
username.value='外部来的'

onclick:单击事件

ondblclick:双击事件

onblur:失去焦点

onfocus:获得焦点

onchange：改变

onload:加载

<p>账号：<input type="text" id="username">
    </p>
    <p>
        密码：<input type="password" id="password">
    </p>
    <p>
        <input type="button" value="登录" onclick="login()">
    </p>

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


        // 自己写的
        // function jump() {
        //     let trueusername = 'admin';
        //     let truepassword = '123456';
        //     let username = document.querySelector('#username').value;
        //     let password = document.querySelector('#password').value;
        //     if (username == trueusername && password == truepassword) {
        //         console.log('登陆成功');
        //     } 
        //     return'用户名或者密码错误';
        // }

        // 老师写的
        function login() {
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;
            if (username == 'admin' && password == '123456') {
                alert('登陆成功');
            }else{
                alert('用户名或密码错误');
            }
        }
<p>账号：<input type="text" id="username">
    </p>
    <p>
        密码：<input type="password" id="password">
    </p>
    <p>
        <input type="button" value="登录" onclick="login()">
    </p>

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


        // 自己写的
        // function jump() {
        //     let trueusername = 'admin';
        //     let truepassword = '123456';
        //     let username = document.querySelector('#username').value;
        //     let password = document.querySelector('#password').value;
        //     if (username == trueusername && password == truepassword) {
        //         console.log('登陆成功');
        //     } 
        //     return'用户名或者密码错误';
        // }

        // 老师写的
        function login() {
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;
            if (username == 'admin' && password == '123456') {
                alert('登陆成功');
            }else{
                alert('用户名或密码错误');
            }
        }

<body>
    用户名：<input type="text" id="username" onchange="change()" 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>

<body>
    <select id="sheng" onchange="setshi()">
        <option value="wait1">---请选择省---</option>
        <option value="jl">吉林省</option>
        <option value="ln">辽宁省</option>
    </select>
    <select id="shi" onchange="setqu()">
        <option value="wait2">---请选择市---</option> 
    </select>
    <select  id="qu">
        <option value="wait3">---请选择区---</option> 
    </select>

    <script>
        function setshi(params) {
            let sheng = document.querySelector('#sheng').value;
            let shi = document.querySelector('#shi');
            let qu = document.querySelector('#qu');
            let html = shi.innerHTML;
            let html2 = qu.innerHTML;

            if (sheng == 'wait1') {
                html='<option>---请选择市---</option>'
                html2='<option>---请选择区---</option>'
                qu.innerHTML = html2;
                shi.innerHTML = html;
            }
            if (sheng == 'jl') {
                html ='<option>---请选择市---</option>'+'<option value="cc">长春市</option>'+'<option value="sp">四平市</option>'
                html2='<option>---请选择区---</option>'
                shi.innerHTML = html;
                qu.innerHTML = html2;
            }
            if (sheng == 'ln') {
                html ='<option>---请选择市---</option>'+'<option value="sy">沈阳市</option><option value="dl">大连市</option>'
                html2='<option>---请选择区---</option>'
                shi.innerHTML = html;
                qu.innerHTML = html2;
            }
            
        }
        function setqu(){
            let shi = document.querySelector('#shi').value;
            let qu = document.querySelector('#qu');
            let html = qu.innerHTML;
            if (shi == 'cc') {
                html ='<option>---请选择区---</option>'+'<option>朝阳区</option>'+'<option>宽城区</option>'
                qu.innerHTML = html; 
            }if(shi == 'sp'){
                html ='<option>---请选择区---</option>'+'<option>铁西区</option>'+'<option>铁东</option>'
                qu.innerHTML = html; 
            }if(shi == 'sy'){
                html ='<option>---请选择区---</option>'+'<option>大东区</option>'+'<option>皇姑区</option>'
                qu.innerHTML = html;     
            }if(shi == 'dl'){
                html ='<option>---请选择区---</option>'+'<option>中山区</option>'+'<option>金州区</option>'
                qu.innerHTML = html; 
            }
        }

    </script>
</body>