web小总结

1. JS常见BUG

一、汇总

1. Error
2. EvalError
3. RangeError
4. ReferenceError
5. SyntaxError
6. TypeError
7. URIError

接下来挨个进行解释。

二、介绍

2.1 ERROR

ERROR是基类型，其他的错误类型都是继承自该类型，所以所有的错误类型共享了一套相同的属性，但是ERROR错误类型很少见，只有少量浏览器会抛出该类错误。
主要用于开发者自定义错误

2.2 EvalError

先了解Eval函数的用法
当函数eval()使用不正确的时候会抛出该错误，但是由于这个错误在不同浏览器中表现不一致，所以很少使用，也即很少遇到。

2.3 RangeError
数值超出相应范围时即报错，这个应该比较常见

2.4 ReferenceError

找不到对象的时候会报这个错误，通常情况下，访问不存在变量的时候，就会发生错误：

因为b没有定义，所以直接使用会报错

2.5 SyntaxError

解析代码错误时就会导致此类错误（语法或语义错误）：

**2.6 TypeError
**
变量保存着意外的类型时或访问不存在的方法时，会导致这个错误：

总的归纳为使用的类型和期望预期的类型不同时就会报这个错误。

2.7 URIError(不是URLError)

使用encodeURI()或decodeURI()函数时，传入的URI格式不正确时报错

2 jsDemo

1. 时间器

要实现时间每秒更新需要setInterval()函数
JavaScript的setInterval()函数用于设定每隔指定的时间就执行对应的函数或代码。
该函数属于全局对象window。

语法

setInterval(code,millisec[,"lang"])

参数	     描述
code	     必需。要调用的函数或要执行的代码串。
millisec	 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

**代码片段

CSS

* {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 500px;
        height: 200px;
        margin: 100px auto;
        text-align: center;
        line-height: 200px;
    }

    ul {
        position: relative;
        width: 240px;
        list-style: none;
        overflow: hidden;
        margin: 0 auto;
    }

    ul li {
        float: left;
        width: 60px;
        height: 60px;
        background-color: #000;
        margin: 0 10px;
        color: white;
        line-height: 60px;
        text-align: center;
        font-size: 20px;
        font-weight: 900;
    }

    ul li:not(:last-child)::after {
        content: ':';
        position: absolute;
        font-size: 20px;
        font-weight: 900;
        color: #000;
    }

    ul li:nth-child(1)::after {
        left: 77px;
    }

    ul li:nth-child(2)::after {
        left: 157px;
    }

HTML

 <div class="box">
        <h1>
            <span class="year">2021年</span>
            <span class="month">11月</span>
            <span class="day">03日</span>
        </h1>
        <ul>
            <li class="shi">cdc</li>
            <li class="fen"></li>
            <li class="miao"></li>
        </ul>
    </div>

JS

//获取年dom元素
    let nian = document.querySelector(".year");
    //获取月dom元素
    let yue = document.querySelector(".month");
    //获取天dom元素
    let tian = document.querySelector(".day");
    //获取小时dom元素
    let shi = document.querySelector(".shi");
    //获取分钟dom元素
    let fen = document.querySelector(".fen");
    //获取秒dom元素
    let miao = document.querySelector(".miao");

    //页面初始赋值
    getTime()

    //每隔一秒赋值
    setInterval(function () {
        getTime()
    }, 1000)

    
    //获取时间
    function getTime() {
        //定义日期对象
        let date = new Date();
        //获取年
        let year= date.getFullYear();
        year=  year < 10 ? "0" + year : year;
        //获取月
        let month= date.getMonth()+1;
        month=  month < 10 ? "0" + month : month;
        //获取日
        let day= date.getDate();
        day=  day < 10 ? "0" + day : day;
        //获取小时
        let hours = date.getHours();
        hours = hours < 10 ? "0" + hours : hours;
        //获取分钟
        let minutes = date.getMinutes();
        minutes = minutes < 10 ? "0" + minutes : minutes;
        //获取秒
        let seconds = date.getSeconds();
        seconds = seconds < 10 ? "0" + seconds : seconds;
        //赋值
        shi.innerHTML = hours;
        fen.innerHTML = minutes;
        miao.innerHTML = seconds;
        nian.innerHTML=year+"年";
        yue.innerHTML=month+"月";
        tian.innerHTML=day+"日";
    }

2. 用localStorage实现登录注册

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。但要实现页面共享需要使用localStorage

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了
操作的方式：

存：

var obj = {"name":"xiaoming","age":"16"}

localStorage.setItem("userInfo",JSON.stringify(obj));

取：

var user = JSON.parse(localStorage.getItem("userInfo"))

删除：

localStorage.remove("userInfo);

清空：

localStorage.clear();

浏览器查看

注册代码片段

先存一个用户信息，随后就可以注释掉了

let userInfo=[{
        userName:'liaiyong',
        pwd:'123456'
    },{
        userName:'heyuanyuan',
        pwd:'456123'
    }]

    // //本地存储

    localStorage.setItem("userInfo",JSON.stringify(userInfo))

然后获取用户信息

 //获取信息
    let userInfo= JSON.parse(localStorage.getItem("userInfo"))

然后去校验用户名是否存在等一些约定，然后将用户输入的用户名和密码存入这个用户信息里，最后再重新存储，这样本地存储的信息就更新成功了！

//注册成功
        userInfo.push({"userName":nameVal,"pwd":pwdVal})//将用户名和密码存入用户信息里
        localStorage.setItem("userInfo",JSON.stringify(userInfo))//重新存储用户信息

登录片段
因为已经存储了一个用户信息所以不需要再重新存储了，直接获取用户信息就可以了，然后做一些非空验证等其他约定验证，当所有验证满足后，就拿用户输入的用户名和密码和原用户信息里的用户名密码比较，看是否正确，正确后就可以进行下一步操作

//判断用户名或密码
        let num=0;
        for (let i = 0; i < userInfo.length; i++) {
            if(userInfo[i].userName==nameVal&&userInfo[i].pwd==pwdVal){
                return true
            }else{
                num++;
            }
        }
        if(num==userInfo.length){
            alert("用户名或密码错误")
            return false
        }

3. JS理论

break和continue的区别和作用

1、break用于跳出一个循环体或者完全结束一个循环，不仅可以结束其所在的循环，还可结束其外层循环。
		注意：
		（1）只能在循环体内和switch语句体内使用break。
		（2）不管是哪种循环，一旦在循环体中遇到break，系统将完全结束循环，开始执行循环之后的代码。
		（3）当break出现在循环体中的switch语句体内时，起作用只是跳出该switch语句体，并不能终止循环体的执行。若想强行终止循环体的执行，可以在循环体中，但并不在switch语句中设置break语句，满足某种条件则跳出本层循环体。

2、continue语句的作用是跳过本次循环体中剩下尚未执行的语句，立即进行下一次的循环条件判定，可以理解为只是中止(跳过)本次循环，接着开始下一次循环。
		注意：
		（1）continue语句并没有使整个循环终止。
		（2）continue 只能在循环语句中使用，即只能在 for、while 和 do…while 语句中使用。8

三元表达式

boolean？true：false //这是表达式是语法

例举一个demo:

let new1=10;
let new2=20;
let new3=null;
new3 = new2>new1?30:0i
这句三元表达式的意思是
当new2>new1=true：的时候 new3=30
当new2>new1=false：的时候 new3=0

运算符

1 赋值运算符 = += -= *= /= %=
    2 一元运算符 自增 自减 +=
    3 自增/自减运算符 ++ --
        ++i 先自增,在使用
        i++ 先使用,在自增
    4 算术运算符 + - * / % 
   	5.逻辑运算符：&&、||、!
       逻辑运算符的运算结果有两个true或false。
       “&&”逻辑与(并且关系)。如果左右两个操作数都为true，则结果为true，否则，结果为false。
                     逻辑与，就是两个条件同时满足时，则结果为true。
	　　“||”逻辑或。左右两个条件，只要有一个满足，则返回true，否则，返回false。
	　　“!”取反运算。!true = false  、   !false = true  、 !100 = fals
    6 比较运算符 > < == != <= >= ===全等于(值相同,类型也相同) !==不全等于

特殊的值
​

 null,对象类型的空值

​ undefined,声明变量但未赋值的默认值

​ NaN,使用Number进行强转并且强转失败时

变量的强转

​ Number(值):将值转换为数据类型。

​ 转换失败返回NaN，表明该值无法转换为数值。

​ Boolean(变量名):判断该变量是否有值。

​ 空字符串，null,undefined,0 会返回false，其他返回true。

函数的声明

​ ① function 函数名(形参名,形参名,…){函数体}

​ ② var 变量名=new Function(“形参名”,“形参名”,“函数体”);

​ ③ var 变量名=function(形参名,形参名,…){函数体}

​ 注意:
​ 在js中函数是以对象的形式存在的，相当于js底层创建一个对象来存储逻辑。

函数的形参

​ ① 形参的声明无需类型声明，直接写形参名即可

​ ② 如果声明了多个形参，在函数被调用的时候，可以不赋值，也可以部分赋值，但是

需要按照顺序给值。

​ 注意:

​ 同名函数不是重载，而是覆盖

函数的返回值

​ 默认返回undefined，如果我们声明了return语句，则按照return语句返回。

函数的执行符

​ 函数是对象，也就说我们是声明了一个变量指向了一个存储了逻辑代码的函数对象。

​ 在js中，我们可以使用如下方式告诉浏览器将函数对象中的逻辑代码给执行:

​ 函数名(实参,实参,…)

​ 所以函数的执行符为小括号。

​ 注意:

​ 前提变量指向的必须是一个函数对象094

函数作为参数传递

​ 因为函数是对象，在js中函数是可以作为实参传递给另外一个函数使用的

​ 格式如下:

​ function 函数名(形参名){形参名()}

​ 函数名(function(){})

数组的声明

​ ① var 数组名=new Array() 声明一个空数组

​ ② var 数组名=new Array(元素1,元素2,元素3,…) 声明一个带有初始化数据的数组

​ ③ var 数组名=new Array(长度) 声明一个指定长度的数组

​ ④ var 数组名=[] 声明一个空数组

​ ⑤ var 数组名=[元素1,元素2,元素3,…]声明一个带有初始化数据的数组

​ 注意:

​ js的数组声明无需指明长度，js的数组会随着数组中存储的数据的数量的变更

自动的变化，其数组的长度。js的数组可以存储任意类型的数据。

数组的存取

​ 数组名[角标] 返回角标的值

获取：alert（名[0]）

​ 数组名[角标]=值 将新的值存储到指定的角标中，覆盖原有值。

赋值：名[0]=“想要赋的值”

数组的遍历

① 使用for循环

		for(var i=0;i<数组名.length;i++){循环体};

	② 使用for in 语句

		for(var i in 数组名){循环体}  注意i的值为角标，不是数组中的值

数组的常用功能

concat方法：返回一个新数组

join方法：返回字符串值

pop方法：移除数组中的最后一个元素并返回该元素

push方法：将新元素添加到一个数组中，并返回数组的新长度值

Date对象常用功能

var d = new Date

d.getFullYear()：返回当前的年份数

d.getMonth()+1：返回月份，需要手动+1

d.getDay()：返回星期数，星期日返回0

d.getDate()：返回日期数

Math对象常用功能

alert(Math.ceil(1.2));//向上取整

alert(Math.floor(1.2));//向下取整

alert(Math.floor(Math.random()*9000+1000));//0和1之间的数值

特殊的功能

eval方法：将字符串的js代码转换为真正的js代码执行

如：var a=“var bb=123”;

​ eval(a);

​ alert(bb)

isNaN方法：判断值是否为数值类型，返回true不是数值，false表示为数值

事件机制

作用：让浏览器监听用户在网页中的行为动作，一旦满足要求，立即触发对应的逻辑的执

行。

使用:

​ ① 事件声明在HTML标签上，不同的事件监听的行为不同。

​ ② 将逻辑和监听建立联系，当满足后直接触发执行

单机事件：onclick

双击事件：ondblclick

键盘事件：onkeydown键盘下压，onkeyup键盘弹起

焦点事件 就是光标：onfocus获取光标，onblur失去光标

值改变事件：onchange专门用在select标签上使用

页面加载事件：onload用在body标签上