1.BOM（把浏览器当做对象来看）
window对象是一个全局变量，也可以说是JS中的顶级对象
像document、console.log()这些都是window的属性，基本BOM的属性和方法都是BOM
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略windw
2.定时器-延迟函数
JS内置的一个用来让代码延迟执行的函数，叫setTimeout
语法： setTimeout（回调函数，等待的毫秒数）
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
清除延时函数： let timer = setTimeout(回调函数，等待的毫秒数) clearTimeout(timer)
注意点： 1.延时器需要等待，所以后面的代码先执行
2.每一次调用延时器都会产生一个新的延时器
两种定时器的区别
两种定时器对比：执行的次数
延时函数: 执行一次
间歇函数:每隔一段时间就执行一次,除非手动清除
// 间歇性定时器：
// setInterval(函数，时间)
// clearInterval(定时器标识)
// 延迟性定时器：
// setTimeout(函数，时间)
// clearTimeout(定时器标识)
五秒钟自动关闭广告
<script>
setTimeout(function(){
document.querySelector('div').style.display = 'none'
},5000)
</script>
3.递归函数
递归函数：函数内部调用其自身
延迟性函数使用递归可以实现间歇性函数
<script>
// 函数的递归、递归函数
// 递归函数：函数内部调用其自身
// 所以，延迟性函数使用递归可以实现间歇性函数
function fn(){
console.log('a');
setTimeout(fn,1000)
}
fn()
</script>
4.显示时间
div{
height: 100px;
background-color: purple;
font-size: 20px;
font-weight: 700;
color: blueviolet;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div></div>
<script>
function showTime(){
const n = new Date()
document.querySelector('div').innerHTML = n.toLocaleString()
// 加入延迟性函数实现间歇
setTimeout (showTime,1000)
}
showTime()
</script>
</body>
5.JS执行机制
同步任务
同步任务都在主线程上执行，形成一个执行栈。
异步任务
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中（任务队列也称为消息队列）。
JS执行机制
- 先执行执行栈中的同步任务。
- 异步任务放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行任务，所以这种机制被称为事件循环
6.location对象
location的数据类型是对象，它拆分并保存了url地址的各个组成部分
常用属性和方法：
href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search 属性获取地址中携带的参数，符号 ？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<script>
// location对象是地址栏对象，它包含了Url里面所有的东西
// 地址栏对象
console.log(window.location);
// 地址栏里面的地址
console.log(location.href)
</script>
<script>
// url地址
// 协议：
// http://主机（ip）:端口/路径（index/user/index.html?user = 123&pwd=abc#hash）
// file://
document.addEventListener('click', function () {
// 获取href
console.log(location.href);
// 设置
location.href = 'http://www.baidu.com'
// 获取问号后面的
console.log(location.search);
console.log(location.hash);
/* // 方法
// 重新加载当前url
location.reload(true)
// 加载指定的url(可以返回)
location.assign('http://www.jd.com')//会产生历史记录
// 替换url（不能返回）
location.replace('http://www.ifeng.com')//不会产生历史记录 */
})
</script>
7.navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
通过 userAgent 检测浏览器的版本及平台
<script>
// navigator 浏览器对象
console.log(navigator);
// 检测浏览器版本平台
console.log(navigator.userAgent);
</script>
倒计时跳转案例
<body>
<p>页面会在<span>5</span>秒钟后跳转</p>
<script>
let i = 5
let timer = setInterval(function(){
i--
document.querySelector('span').innerHTML = i
if(i === 0){
clearInterval(timer)
location.href = 'http://www.baidu.com'
}
},1000)
</script>
</body>
8.history对象
history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
<script>
//
console.log(history);
//访问过得历史记录的数量
console.log(history.length);
// 返回历史记录，历史记录的上一个
console.log(history.back);
// 前进历史记录
history.forward()
// 前进或者后退
history.go(1)//前进或者后退
</script>
9.screen对象
屏幕对象
<script>
// 屏幕对象
console.log(screen);
console.log(screen.width);
</script>
10.本地存储
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage和localStorage约 5M 左右
常见的使用场景： todomvc.com/examples/va… 页面刷新数据不丢失
11.本地存储分类-localStorage
目标： 能够使用localStorage 把数据存储的浏览器中
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
特性：
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用
语法：
存储数据：
localStorage.setItem(key, value)
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
浏览器查看本地数据
<script>
// 数据存储在用户浏览器中
// 作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
// localStorage
// 存：属性名,属性值
// localStorage.setItem('键','值')
// localStorage.setItem(key,value)
localStorage.setItem('uname','张飞')
localStorage.setItem('age','18')
// 如果重复存储就是覆盖
// 取(取不到就是null)
// localStorage.getItem('键')
const re = localStorage.getItem('uname')
console.log(re);
// 删
// localStorage.removeItem('键')
localStorage.removeItem('age')
</script>
12.本地存储分类-sessionStorage
特性：
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage 基本相同
13.存储复杂数据类型
目标： 能够存储复杂数据类型以及取出数据
1.本地只能存储字符串,无法存储复杂数据类型
2.解决：需要将复杂数据类型转换成JSON字符串，再存储到本地
语法：JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串 存储 本地存储中
3.问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用
4.解决：把取出来的字符串转换为对象（如果刚开始是数组，最后就是转换为数组，这里的案例是对象）
语法：JSON.parse(JSON字符串)
将JSON字符串转换成对象 取出 时候使用
<script>
// 本地存储不能存储复杂数据类型，要转化为字符串，用的时候再转化为复杂数据类型
// localStorage.setItem('user','张三')
// localStorage.setItem('age',18)
const obj = {
uname : '张三丰',
age : 22,
gender : '男',
}
// 不能直接存储引用型数据类型，但是可以存字符串
// JSON把对象转换为字符串
// 对象.方法
//JSON.stringify(复杂数据类型);//将复杂数据类型转化为JSON字符串格式
// `
// {
// "uname":"张三丰",
// "age":"22",
// "gender":"上海"
// }
// `
/* const str = JSON.stringify(obj)
localStorage.setItem('userMessage',str) */
localStorage.setItem('user1',JSON.stringify(obj))
// 取：
const re = localStorage.getItem('user1')
console.log(re);//得到的是字符串
// 将字符串再转化为复杂数据类型
const o = JSON.parse(re)
console.log(o);
</script>
存储复杂的数据类型
<script>
//数组
// 复杂数据类型
let arr = [{name:'娃哈哈'}]
// 转化为字符串
const qq = JSON.stringify(arr)
localStorage.setItem("wahaha",qq)
// 再转化为复杂数据类型
const aa = JSON.parse(qq)
console.log(aa);
</script>
<script>
//对象
const obj1 = {
name : '陈磊',
gender : '女',
age : '22'
}
// 转化为JSON字符串进行存储
localStorage.setItem('简历',JSON.stringify(obj1))
// 使用的时候再转换为复杂数据类型，对象
console.log(JSON.parse(JSON.stringify(obj1)));
</script>
