@

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>

2022-7-12 javascript(2) 第七组 刘昀航的更多相关文章

  1. 2022-7-11 javascript学习 第七组 刘昀航

    ​ JavaScript是什么? 编程语言,脚本语言,依赖于某种容器来运行. JS是运行在浏览器上的,可以帮助我们去控制页面. Vue.js   react.js    jquery.js    an ...

  2. 2022-7-9 html 第七组 刘昀航

    ​ 一.基础认知 1.1 认识网页 网页的组成: 文字.图片.音频.视频.超链接 网页背后的本质:前端程序员写的代码 前端的代码通过什么软件转换成用户眼中的页面:浏览器转化(解析和渲染) 1.2 5大 ...

  3. 2022-7-14 java_2 第七组 刘昀航

    @ 目录 一.java约定规范 1.关于建包 2.控制台输入(Scanner) 关于Scanner的bug 计算器小练习: 二. 1.数组 建立数组的三种方式: 数据类型的初始值: 2.二维数组 使用 ...

  4. 2022-7-10 css 第七组 刘昀航

    ​ 样式通常存储在样式表中(先定义样式表),再把样式表添加到html元素中 定义CSS样式的方式: 行内样式(内联样式) ​ ·行内样式仅针对当前标签生效,如果当前的样式不需要复用,可以用行内样式 · ...

  5. 2022-7-13 java_1 第七组 刘昀航

    @ 目录 前言 一.一些基本的指令 二.java 1.java的三个版本 2.java特点 3.运行一个java程序 三.java的数据类型 1.java基本数据类型 2.强制转换的原理 3.八种基本 ...

  6. JavaScript学习笔记(12)——JavaScript内置对象

    1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编 ...

  7. JavaScript学习笔记(12)——JavaScript自定义对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 12 JavaScript String对象 & Date对象

    <script> var a = "string"; var b = new String("string"); var c = new Strin ...

  9. 19 01 12 javascript 定时器 封闭函数

    定时器 定时器在javascript中的作用1.制作动画2.异步操作3.函数缓冲与节流 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setIn ...

随机推荐

  1. [洛谷] P1065 [NOIP2006 提高组] 作业调度方案

    点击查看代码 #include<bits/stdc++.h> using namespace std; const int N = 1e6 + 10; int m, n, ans = 0; ...

  2. Web安全学习笔记 SQL注入上

    Web安全学习笔记 SQL注入上 繁枝插云欣 --ICML8 SQL注入分类 SQL注入检测 一.注入分类 1.简介 SQL注入是一种代码注入技术用于攻击数据驱动的应用程序在应用程序中,如果没有做恰当 ...

  3. 印尼医疗龙头企业Halodoc的数据平台转型之数据平台V2.0

    1. 摘要 数据平台已经彻底改变了公司存储.分析和使用数据的方式--但为了更有效地使用它们,它们需要可靠.高性能和透明.数据在制定业务决策和评估产品或 Halodoc 功能的性能方面发挥着重要作用.作 ...

  4. C语言函数调用栈

    C语言函数调用栈 栈溢出(stack overflow)是最常见的二进制漏洞,在介绍栈溢出之前,我们首先需要了解函数调用栈. 函数调用栈是一块连续的用来保存函数运行状态的内存区域,调用函数(calle ...

  5. 2022年5月11日，NBMiner发布了41.3版本，在内核中加入了100％LHR解锁器，从此NVIDIA的显卡再无锁卡一说

           2022年5月11日,NBMiner发布NBMiner_41.3版本,主要提升了稳定性.         2022年5月8日,NBMiner发布NBMiner_41.0版本,在最新的内核 ...

  6. 923. 3Sum With Multiplicity - LeetCode

    Question 923. 3Sum With Multiplicity Solution 题目大意: 给一个int数组A和一个目标值target,求满足下面两个条件的组合个数,其中i,j,k分别为数 ...

  7. 安装Zabbix到Ubuntu（APT）

    运行环境 系统版本:Ubuntu 16.04.2 LTS 软件版本:Zabbix-4.0.2 硬件要求:无 安装过程 1.安装APT-Zabbix存储库 APT-Zabbix存储库由Zabbix官网提 ...

  8. 【单片机】CH32V103v8t6 - PA5-外部中断测试程序

    main.c文件内容 /* *@Note 外部中断线例程: EXTI_Line5(PA5) PA5设置上拉输入,下降沿触发中断. */ #include "debug.h" /** ...

  9. 爬虫Ⅱ:scrapy框架

    爬虫Ⅱ:scrapy框架 step5: Scrapy框架初识 Scrapy框架的使用 pySpider 什么是框架: 就是一个具有很强通用性且集成了很多功能的项目模板(可以被应用在各种需求中) scr ...

  10. BSP-充电名词解释

    充电名词解释 A~G H~N O~T U~Z A~G ACA = accessory charger adapter = 辅助充电适配器 ACC = apparent charge capacity ...