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

@

目录

• 2022-7-12学习 第七组 刘昀航
  • 前情提要
• 一、for循环
• 二、for in循环
• 三、while 和 do...while循环
  • • 1.while
  • do... while
• 四、内置函数
• 五、抓取html元素的方法
• 六、事件
  • 练习：

---

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

前情提要

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

---

一、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>