文章目录
一.BOM概述
1.什么是BOM
BOM（BrowserObject Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很对方法和属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是w3c，BOM最初是Netscape浏览器标准的一部分
2.BOM的构成
BOM比DOM更大，它包含了DOM
window对象是浏览器的顶级对象，它具有双重角色。
1.它是JS访问浏览器的一个接口
2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如：alert( )、prompr( )等
注意：window下的一个特殊属性window.name
3.窗口加载事件
<!-- 传统的窗口加载事件 只能写一次-->
window.onload = function(){}
或者
<!-- 没有限制 -->
window.addEventListener(‘load’,function(){});
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）就调用到处理函数
window.addEventListener(‘DOMContentLoaded’,function(){});
4.调整窗口大小事件
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
window.onresize = function(){}
或者 window.addEventListener(‘resize’,function(){});
注意：
1.只要窗口大小发生像素变化，就会触发这个事件
2.我们经常利用这个事件完成响应式布局。window.innerWidth当屏幕的宽度
5. 定时器
两种定时器
- setTimeout（）
- setInterval （）
setTimeout（）定时器
window.setTimeout（调用函数，[延迟的毫秒数]）;
setTimeout（）方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
setTimeout（）这个调用函数我们也称之为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数
简单理解：回调，就是回头调用的意思，上一件事干完，再回头再调用这个函数
5秒之后自动关闭广告案例：
<img src="../BOM/ad.jpg" alt="" class ="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function(){
ad.style.display = 'none';
},5000)
</script>
停止setTimeout（）定时器：
window.clearTimeout（timeoutID）;
1.window 可以省略
2.里面的参数就是定时器的标识符
setInterval（）定时器
window.setInterval（调用函数，[间隔的毫秒数]）;
setTimeout（）方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
倒计时案例：
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class = "hour"></span>
<span class = "minute"></span>
<span class = "second"></span>
</div>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2022-1-25 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
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;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
清除计时器：
发送短信案例：
发送短信<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
var time= 3;
btn.addEventListener('click',function(){
btn.disabled = true;//当输入框无内容时，按钮点击后会禁用
var timer = setInterval(function(){ //设置定时器
if(time == 0){
clearInterval(timer);//当时间为0时销毁定时器
btn.disabled = false;
btn.innerHTML = '发送';
time = 3;
}else{
btn.innerHTML = '还剩下'+ time +'秒';
time--;
}
},1000);
})
</script>
6.this
this的指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定this到底指向谁。一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window（主营定时器里面的this指向window）
二.JS执行机制
1.JS是单线程
JavaScript语言的一大特点是单线程，同一个时间只能做一件事。这是因为JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束才会执行后一个，导致的问题是：如果JS执行的时间过长，这样会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉
于是JS提出了同步和异步
JS的执行机制：
2.location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL：统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
3.location对象的属性
4.location对象的方法
5.navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的uesr-agent头部的值
6.history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互该对象包含用户（在浏览器窗口中）访问过得URL
