window对象
一.BOM（Browser Object Model浏览器对象模型）
- Browser Object Model浏览器对象模型
- window 是浏览器内置中的全局对象，我们所学的webApis的知识内容都是基于window对象实现的
- window对象包含了navigator ，location，documen ，thistory，screen五个属性就是所谓的bom
- document是实现dom的基础，他其实是依附于window的属性
定时函数-延时函数
-
js内置的一个用来让代码延迟执行的函数，叫setTimeout
-
语法
setTimeout(回调函数，等待的毫秒数) // 例如 setTimeout(function() { alert(111) }, 3000)
setTimeout仅仅只执行一次，所以可以理解就是把一段代码延迟执行平时省略window
let timer=setTimeout(回调函数，等待的毫秒数)
clearTimeout(temer)
图片五秒后自动关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../img/kyrie1.png" alt="">
</body>
<script>
let img = document.querySelector('img')
setTimeout(function() {
img.style.display = 'none'
}, 5000)
</script>
</html>
递归函数
自己调用自己就是递归函数
function fn(){
num++
console.log(11)
if(num>=100){
return
}
// 在函数里面自己调用自己
fn()
}
递归函数容易编程死递归一定要加退出条件
结合递归函数和settimeout能实现setinterval一样的功能
<body>
<div class="clock"></div>
</body>
<script>
let clock =document.querySelector('.clock')
function myInteral(){
let d = new Date();//实例化
clock.innerHTML=d.toLocaleString();
// 延时任务，自调用
setTimeout(myInteral,1000);
}
myInteral();
</script>
- setInterval的特征是重复执行，首次执行会延时
- setimeout的特征是延时执行，只有执行一次
- setimeout结合递归函数，能模拟setinterval重复执行
- clearTimeout清除由settiont创建的定时任务
js执行机制
js是单线程（同一个时间只能做一件事）js是为处理页面中的用户交互以及操作DOM而诞生的
单线程意味着所以任务都要排队
所以js出现了同步和异步
- 同步：前一个任务结束后执行下一个任务，程序的执行顺序和任务的排列顺序是一致的同步的
同步任务：都在主线程上执行，形成一个执行栈
- 异步：你在做一件事的时候还可以处理其他的事
异步任务
js的异步事通过回调函数实现的
- 普通事件：click ，resize
- 资源加载：load，error
- 定时器：setInterval，setimeout
异步任务相关添加到任务队列中
-执行机制
1.先执行执行栈中的同步任务
2.异步任务先放入任务队列中
3.一旦执行栈中的所有同步任务执行任务完毕，系统会按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
Location对象
-
数据类型是对象 拆分让你并保存了url地址的各个组成部分
-
常用属性和方法
1.href属性获取完整的url地址对其赋值时用于地址的跳转可读写
location.href=''
小案例：五秒后跳转的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<a href="https://www.icourse163.org/">好好学习 <span>n</span>秒后跳转</a>
</body>
<script>
let a = document.querySelector('a')
let num = 5
let timer = setInterval(function() {
num--
a.innerHTML = `好好学习 <span>${num}</span>秒后跳转`
if (num === 0) {
clearInterval(timer)
location.href = 'https://www.icourse163.org/'
}
}, 1000)
</script>
</html>
2.search属性获取地址中携带的参数，符号？后面部分
location.search
3.hash属性获取地址中的哈希值符号#后面部分
location.hash
4.reload方法用来刷新当前页面，传入参数true时代表强制刷新
location.reload（true）//有本地缓存
//强制刷新 ctrl+f5
navigator对象
该对象记录了浏览器自身的相关信息用来是你别设备让他显示对应网页
histroy对象
跟浏览器地址栏的操作相对应，比如前进，后退，历史记录等
history.back()
history.forward()
history.go(1)
本地存储
随互联网的快速发展，基于网页的应用越来越普遍，同时变得越来越复杂，伪类满足各种各样的需求，会经常在啊本地存储大量的数据，html5规范提出了相关解决方案
1.数据存储在用户浏览器中
2.设置，读取方便，甚至页面刷新不丢失数据
3.容量较大，sessionStorage和localStorage约5M左右
localStorage
- 生命周期永久有效，除非手动删除，否则关闭页面也会存在
- 可以多窗口（页面）共享
- 以键值对的形式存储使用
1.存储数据
localStorage.setlten(key,value)
2.获取数据
localStorage.getltem(key）
3.删除数据
localStorage.removeltem(key）
