2022-7-12学习第七组刘昀航

前情提要

switch..case的效率问题case的后面是字面量（常量）
不要强行使用Switch
函数命名规则：小驼峰式

一、for循环

for循环的执行步骤：

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

        2.i<10；判断条件,会和初始化条件配合循环的执行

        3.循环体，循环在做什么事

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

for (let i = 0; i < 10; i++) {

            console.log(i)

        }

练习：

         找出数组的最大值：

        for (let i = 0; i < arr.length; i++) {

            if(arr[i]>max){

                max = arr[i]

            }

        }

        console.log(max)

判断一个数在数组中是否存在，如果存在返回他的下标，如果不存在，返回-1

		 function ishave(num, arr) {

        let index = -1;

        for (let i = 0; i < arr.length; i++) {

            if (num == arr[i]) {

                index = i

            }

        }

        return index;

    }

二、for in循环

1.for in语句，能做的事情很少，只能做遍历操作

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

代码如下（示例）：

		let arr = [1,2,3,4,5]

        for (const key in arr) {

            console.log(key)

        }

三、while 和 do...while循环

1.while

    1.初始化条件

        2.判断条件

        3.执行循环体

        4.自增

代码如下（示例）：

		let a = 0;

        while(a<100){

            a++;

            console.log('哈哈哈')

        }

练习：

问题：公司有10个人，每年增10%，哪一年突破100人，今年2022年

  let people = 10;

			    let year = 0;

			    while(people<101){

			        people = people*1.1

			        year++;

			    }

			    console.log(2022+year+'年突破100人')

do... while

do{

        console.log(a);

        a++;

    }while(a<100);

四、内置函数

 Array:

            1.concat()连接

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

            3.删除最后一个元素

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

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

    Global:

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

            2.parseFloat():把一个整数转化为小数

            3.parsetInt():把一个小数转化为整数(去掉小数点)

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

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

    String:

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

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

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

            4.replace('a','b'):把一个值转成number类型

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

            6.substring(1,6):字符串截取

    Math:

            1.ceil():向上取整

            2.floor():向下取整

            3.round():四舍五入

            4.ramdom()随机：生成一个0-1的随机数

    Date:

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

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

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

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

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

五、抓取html元素的方法

getElementById --通过id抓取元素
getElementsByClassName --通过class抓取元素
getElementsByTagName --通过标签名抓取元素
querySelector --根据选择器抓取第一个元素
querySelectorAll --根据选择器获取所有元素

六、事件

事件就是我们和html标签元素发生交互时产生的

onclick:单击事件
ondblclick：双击事件
onblur:失去焦点
onfocus:获得焦点

练习：

1.模仿登录案例

<p>用户名：<input  type="text" id="username"></p>

    <p>密码：<input type="password" id="password"></p>

    <p><input type="button" onclick="yanzheng()" value="登录"></p>

    <script>

       function yanzheng(){

           let username = document.getElementById('username').value

           let password = document.getElementById('password').value

           if(username == 'admin'&& password ==123456){

                alert('登录成功！')

           }

           alert('登录失败！')

        }

    </script>

2.校验用户

用户名：<input type="text" id="username" onblur="tishi()">

<span id="aaa"></span>

<script>

    function tishi(){

        let username = document.getElementById('username').value;

        let span1 = document.getElementById('aaa')

        if(username == 'admin'){

            span1.innerText = "该用户已存在！"

        }else{

          span1.innerText ="该用户可用"

        }

    }

</script>

3.三级联动

<body>

    <select id="sheng" onchange="setShi()">

        <option value="">---请选择省---</option>

        <option value="jl">吉林省</option>

        <option value="ln">辽宁省</option>

    </select>

    <select id="shi" onchange="setQu()">

        <option value="">---请选择市---</option>

    </select>

    <select id="qu">

        <option value="">---请选择区---</option>

    </select>

    <script>

        function setShi() {

            let sheng = document.getElementById('sheng').value;

            let shi = document.getElementById('shi');

            let qu = document.getElementById('qu');

            let html = shi.innerHTML;

            if (sheng == 'jl') {

                html = '<option value="cc">长春市</option><option value="sp">四平市</option>';

                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单

                shi.innerHTML = html;

            }

            if (sheng == 'ln') {

                html = '<option value="sy">沈阳市</option><option value="dl">大连市</option>';

                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单

                shi.innerHTML = html;

            }

            qu.innerHTML="<option >--待选择--</option>"

        }

        function setQu() {

            let shi = document.getElementById('shi').value;

            let qu = document.getElementById('qu');

            let html = qu.innerHTML;

            if (shi == 'cc') {

                html = '<option value="sy">双阳区</option><option value="jy">净月区</option>';

                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单

                qu.innerHTML = html;

            }

            if (shi == 'sp') {

                html = '<option value="yt">伊通满族自治县</option><option value="td">铁东区</option>';

                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单

                qu.innerHTML = html;

            }

            if (shi == 'sy') {

                html = '<option value="hu">皇姑区</option><option value="sjt">苏家屯区</option>';

                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单

                qu.innerHTML = html;

            }

            if (shi == 'dl') {

                html = '<option value="zx">中山区</option><option value="xg">西岗区</option>';

                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单

                qu.innerHTML = html;

            }

        }

    </script>

</body>

巴特西

2022-7-12 javascript(2) 第七组刘昀航

2022-7-12学习第七组刘昀航

前情提要

一、for循环

二、for in循环

三、while 和 do...while循环

1.while

do... while

四、内置函数

五、抓取html元素的方法

六、事件

练习：

最新文章

热门文章

巴特西

2022-7-12 javascript(2) 第七组 刘昀航

2022-7-12学习 第七组 刘昀航

前情提要

一、for循环

二、for in循环

三、while 和 do...while循环

1.while

do... while

四、内置函数

五、抓取html元素的方法

六、事件

练习：

最新文章

热门文章

2022-7-12 javascript(2) 第七组刘昀航

2022-7-12学习第七组刘昀航