什么是BOM？
BOM（Browser Object Model）浏览器对象模型，提供了独立于内容而与窗口进行交互的对象，核心对象是window，学习与浏览器进行交互的一些对象比如怎么后退一个页面，前进一个页面，刷新等。BOM由一系列对象组成，每个对象有其对应的属性和方法，BOM缺乏标准，浏览器厂商再各自浏览器上定义的JS的语法标准化组织是ECMA，DOM是W3C。
var num = 10
log(num)
log(window.log)全局变量变成window对象的属性
function fn(){
}
fn()
window.fn()函数变成window对象的一个方法
可以省略window,alert和prompt都属于window的方法
var name = 10 不要这样写 window中有个特殊属性name页面加载事件
window.onload = function(){}
或者window.addEventListener('load',function(){})
是页面加载事件，当文档内容全部加载完就会触发事件，包括（图像，文本，脚本，样式）等调用处理函数。这样就能把js脚本放到html页面中任何位置了，之前只能在标签的下面，因为是按照从上往下依次执行的。
还有一个document.addEventListener('DOMContentLoaded',function(){})这个是仅当DOM加载完毕（不包括样式，图像等）如果一个页面图片很多，等全部的图像加载完需要一定时间，影响用户体验，我们可以使用这个。加载速度比load快。
<body>
<script>
// window.onload = function() {
// }
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('惦记我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);//先33
// console.log(33);
})
// window.addEventListener('load',function(){})
// window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发事件（包括图像，脚本文件，CSS，文件等）就调用的处理函数。
//可以把script放到任何地方了
//window.onload传统的注册方式之恩那个写一次，多个以最后一个为准
// 窗口加载时间document.addEventListener('DOMContentLoaded',function(){})仅当DOM加载完毕，不包括样式表，图片flash等 如果页面图片很多，会影响1用户交互效果，用这个比较好，加载速度比load更快
</script>
<button>点击</button>
</body>调整窗口大小事件
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
// window.onresize = function() {}
window.addEventListener('resize', function() {
console.log(window.innerWidth);
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
// 只要窗口大小像素变化，就会触发这个事件
// 我们经常用这个事件完成响应式布局,window.innerWidth当前屏幕的宽度
</script>定时器之setTimeout
setTimeout(调用函数，延迟时间（毫秒）可以省略默认为0），属于window对象，window可以省略。
setTimeout(function(){}，1000）或者把函数写到外面，setTimeout(fn,1000)
function fn(){},fn可以加引号。
定时器有很多，所以有时候会给定时器加标识符。
回调函数以及五秒后关闭广告
setTimeout也叫回调函数，普通函数是按照代码是按照代码顺序执行的，而这个函数，需要等待时间，时间到了才会去调用。
element.onclick = function(){}或者element.addEventListener('click',function(){})也是回调函数。
关闭广告是设置定时器，5秒过后设置隐藏
<div>123</div>
<script>
var div = document.querySelector('div');
setTimeout(function() {
div.style.display = 'none';
}, 5000)
</script>清除定时器clearTimeout?????????
window.clearTimeout(定时器名字）window可以省略
定时器setInterval()
setIterval(回调函数，间隔毫秒数）
与setTimeout()区别是setInterval（）循环执行，重复调用，每隔一段时间就调用一次回调函数。
<script>
// window.setInterval(回调函数，间隔毫秒数)
// 重复调用一个函数，每隔一段时间，就去调用一次回调函数
var time = setInterval(function() {
console.log('继续输出中');
}, 3000)
</script>每隔3秒在控制台打印继续输出中
倒计时效果
第一次执行也会有间隔毫秒是，解决办法，先调用一次这个函数
<body>
<div class="hour">1</div>
<div class="min">2</div>
<div class="sec">3</div>
<script>
//问题：第一次执行也有间隔毫秒数，因此会先显示123
//先调用一次这个函数，防止这个问题
var hour = document.querySelector('.hour');
var min = document.querySelector('.min');
var sec = document.querySelector('.sec');
var input = +new Date('2022-4-24 18:00:00');
count();
// var h = setInterval(function() {}, 200000)
// var m = setInterval(function() {}, 30000)
// var s = setInterval(function() {}, 1000)
setInterval(count, 1000);
function count() {
var now = +new Date(); //返回的是当前事件总的毫秒
// var input = +new Date(time); //用户输入事件zongdehaomiao
var times = (input - now) / 1000; //剩余总的秒数
// var d = parseInt(times / 60 / 60 / 24); //天
// d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; //把剩余的小时给盒子
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
min.innerHTML = m;
var s = parseInt(times % 60); //秒
s = s < 10 ? '0' + s : s;
sec.innerHTML = s;
// return d + '天' + h + '时' + m + '分' + s + '秒';
}
// console.log(count('2022-4-23 18:00:00'));
</script>
</body>
</html>清除定时器clearInterval
<button class="begin">开启</button>
<button class="stop">停止</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var time = null;//空对象
begin.addEventListener('click', function() {
time = setInterval(function() {
console.log('你好');
}, 1000)
})
stop.addEventListener('click', function() {
clearInterval(time); //报错 因为时局部变量
})
</script>发送验证码
<body>
<input type="text">
<button>发送</button>
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.addEventListener('click', fn)
function fn() {
btn.disabled = true; //点击了之后倒计时的时候禁用按钮
var time = 3;
btn.innerHTML = '还剩下' + time + '秒';
var timer = setInterval(function() {
if (time == 0) { //时间减为0后恢复
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000)
}
</script>
</body>this指向问题
this在定义的时候确定不了，只有函数执行的时候，指向调用它的对象。
1.全局作用域或者普通函数中this指向全局变量window,定时器中的this指向window。
console.log(this); //window
function fn() {
console.log(this); //window
}
fn();
setTimeout(function() {
console.log(this);//window
}, 1000);2.方法中谁调用指向谁
var o = {
sayHi: function() {
console.log(this); //指向o
}
}
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
// console.log(this); //指向按钮
// }
btn.addEventListener('click', function() {
console.log(this);
})3.构造函数中指向构造函数的实例
function Fun() {
console.log(this);//指向fun实例对象
}
var fun = new Fun();js中同步和异步
js语言一大特点，典型性的单线程，同一个时间只能做一件事，所有任务排队，下一个任务有可能等好长时间。
同步，前一个任务执行完再去执行下一个任务，比如烧完水再去炒菜
异步，可以同时处理事情，比如烧水的同时，也炒菜。
<script>
console.log(1);
setTimeout(function() {
console.log(3);
}, 1000)//等一秒在打印
console.log(2);//123 先打印2同步任务和异步任务执行过程
同步任务：代码顺序放入主线程中，回调函数属于异步任务，放到任务队列（消息队列），js的异步是回调函数实现的。
异步任务：普通事件click resize等、资源加载load error、定时器。
先执行栈中的同步任务，遇到回调函数先放到任务队列，不执行，接着执行下一个，完成同步任务后，去任务队列中找，拿到任务栈的最下面执行。
所以这就是为什么代码打印顺序是123,因为定时器放到了任务队列中，不执行，等到主线程中代码全部执行完毕后，再去任务队列中找到这个函数啊拿到栈中执行。
定时器是时间到了才会放到任务队列中，点击事件也是点击了才会放到任务队列。
事件循环：由于主线程不断地获取任务，执行任务，再获取任务，执行任务，这种机制叫做事件循环。
location对象
window提供了一个location属性用于获取或者设置窗体的url,并且可以用于解析url,因为这个属性返回的是一个对象，所以也叫location对象。
url统一资源定位符，互联网上的每一个资源都有唯一的url,它包含的信息指出文件的位置以及浏览器该怎么处理。
<!-- protocol://host[:port]/path/[?query]#fragment
通信协议 主机（域名） 端口号 路径 参数键值对形式&分开 片段常见于链接锚点 -->??location.href 获得或者设置整个url 重点
? ? location.host 返回主机
? ? location.port 返回端口号，未写返回空字符串
? ? location.pathname 返回路径
? ? location.search 返回参数 ?重点
? ? location.hash 返回片段?
? console.log(window.location.href);可以获取当前的url，也可以重新设置。
??location.href = 'http://www.baidu.com'; //点了之后跳转一个新的页面
在另一个新的页面获取上一个的url参数
?
<body>
<form action="17-index.html">
<p>登录页面</p>
<span>用户名</span><input type="text" name="uname"><input type="submit" value="登录">
</form>
</body>?
<body>
<div></div>欢迎你
<script>
console.log(location.search); //?uname=andy
//去掉问号 substr('起始的位置'，截取几个字符)
var pa = location.search.substr(1);
console.log(pa);
//利用等号分割键和值 split 分割成数组
var arr = pa.split('=');
console.log(arr);
var div = document.querySelector('div');
div.innerHTML = arr[1];
</script>
</body>
location常见方法
location.assign()跟href属性一样，可以跳转页面（重定向）记录历史，可以后退
location.replace()替换当前页面，因为不记录历史，所以不能后退页面
location.reload()重新加载，相当于刷新按钮，如果参数为true强制刷新
navigator对象
移动端显示移动端页面 pc端打开的使用pc页面
history对象
与浏览器的历史记录进行交互
history对象方法
back()实现后退
forward()实现前进
go(参数)前进后退功能 参数如果是1前进一个 -1后退一个。
前提要先有缓存
<a href="19-navigator对象.html">点我去19</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward();
history.go(1);
})<a href="20-history对象.html">点我去20</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward();
history.go(-1);
})
