JavaScript —— APIs（五）

 一、Window对象

1.  BOM（浏览器对象模型）  

2.  定时器-延时函数

①、定义

②、定时器比较

③、【案例】

3.  JS执行机制

4.  location对象

注意：hash应用

不点击页面刷新号，点击刷新按钮也可以实现页面刷新

【案例】

5.  navigator对象

注意：蓝色区域的代码可以实现在手机端，刷新页面后，跳转到location.href的那个网址

6.  histroy对象

可以实现点击前进后退两个按钮，跳转到对应的前一个或者后一个页面上

  

这两种代码等价

二、本地存储

1.   本地存储介绍

2.  本地存储分类 - localStorage 语法

注意：所有键都要加引号

若要改一个数据，前提是这个数据已经被存储过了

（原来有这个键，则这样操作就是改，若原来没有这个键，这样操作就是增）

注意：本地存储只能存储字符串型，要进行别的操作时，记得转换

3.  本地存储分类 - sessionStorage

4.  【总结】

5.  本地存储处理复杂类型

先将复杂类型数据转化为 JSON 字符串，再将 JSON 字符串转化为对象

定义一个变量，将取到的字符串接过来

注意：这里（‘键’，值）

存储简单数据类型，可以直接使用

存储复杂数据类型，结果无法使用

注意：本地类型中，只能存储字符串

  字体颜色为黑色，所以是字符串

JSON存储的数据是一个字符串，不是数组。JSON存储可以便于查看数据，方便之后取数据

【总结】

三、综合案例

【学生就业信息表】

1.  渲染业务

注意：黄框中话的意思是，如果有数据，则将其转化为JSON字符串，再转化为对象，用于后期渲染页面。

要是没有数据的话，就执行后面的语句，即返回空数组

①、读取并拿到数据

②、map（ ）和 join（ ）实现数组拼接

<1> map ( ) 方法

<2> join ( ) 方法

注意：小括号中用什么符号分隔，结果里面就显示什么符号

若不想要分隔符，则小括号里面写空字符串

小括号中什么都不写时，默认为逗号分隔

③、用map + join 实现渲染页面

注意：本地存储已经存到页面里面去了，不需要每次都存一次，存一次就会一直在

、

2.  新增业务

① 阻止默认事件，追加新数据 

 注意：获取此刻的时间用 new Date( ).toLocalestring( )

② 重置和渲染页面

注意：获取此刻的时间用 new Date( ).toLocalestring( )

<1>  渲染页面 

前面写过将新写的内容加入到数组中去的函数 render（ ），所以渲染页面的时候直接调用函数就好了

<2>  重置页面

this 指向函数的调用者 info  （用 info 注册提交事件，可以便于在重置的时候，直接用 reset（））

③ 把数组重新存入本地存储里面，记得转换为ISON字符串存储

注意：需要将之前的数据存储到本地存储中去，否则页面刷新后，数据会被删除

3.  删除业务

注意：用 index 来获取索引号

① 

② 

注意：confirm 返回两个值，一个是 true 一个是 false

③ 处理再加一个数据后的序号问题

<1> 当数组为空时，返回结果是0 ，则执行后面的语句，

<2> 当数组不为空时返回结果是1数组的长度，则执行问号后面冒号前面的语句

四 正则表达式

1.  定义

2.  应用场景

3.  语法

① 定义

注意：/ / 中间不需要加引号

② 判断

【例如】这两个不匹配，所以结果是 false

4.  exec（ ）

【区别】

5.  元字符

①、边界符

以 哈 开头

当 ^ 和 $ 在一起时，只有一种情况是 true ，其他情况都是 false

②、量词

注意：这些量词在使用时，都有必须加^ 和 $ 

只能出现 哈 ，但是可以出现 0 次，或者无数次。中间有其他字符都是错误的

 *

+

?

只能出现一次或者不出现，其他情况都是错的

{ n }

等于 n 

只有黄框中是 true ，其他都是 false

{ n ，}

大于等于 n

{ n,m } 中间千万不能有空格

③、字符类

加了精确匹配后，只能选择一个

可以选择【】内三个数中的两个

用 - 可以实现在一定范围内选择

【案例】

【代码】

添加焦点事件

注意：这是选择 input 的下一个兄弟

6.  修饰符

i 匹配时不区分大小写

蓝框中只能替换一次，想要全局的都替换，需要加 g，g 写在 i 前面或者后面都可以

替换 replace

【案例】

注意： | 表示或者

好啦！这次分享就到此结束啦！我们APIs部分的学习到这里也就告一段落啦！！！

下面就是JS的进阶学习！

那么我们下周同一时间同一地点不见不散！！！