BOM概述

什么是BOM

BOM（Browser Object model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的现象，其核心对象是window

BOM是由一系列相关的对象构成，并且每个对象都提供了很多方法和属性

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

BOM的构成

BOM比DOM更大，它包含DOM

window对象是浏览器的顶级对象，它具有双重角色

他是JS访问浏览器窗口的一个接口
他是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法

在调用的时候可以忽略window，前面学习的对话框都属于window对象方法，

注意window下的一个特殊属性 window.name

window对象的常见事件

「2.1窗口加载事件」

1
2
3

window.onload = function() {}
或者
window.addEventListener("load", function() {})

window.load是窗口（页面）加载事件，当文档内容完全加载完成就会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数

注意：

有了window.onload就可以把js代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
window.onload传统注册事件方式只能写一次，如果出现多个，会以最后一个window.onload为准
如果使用addEventListener则没有限制

1	document.addEventListener('DOMContentLoaded', function() {})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash

ie9以上支持

如果页面的图片很多的话，从用户访问到onload触发可能需要很长时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

「2.2调整窗口大小事件」

1
2
3

window.onresize = function() {}
或者
window.addEventListener("resize", function() {})

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

注意：

只要窗口大小发生变化，就会触发这个事件
我们经常利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度

定时器

「3.1两种定时器」

window对象给我们提供了2个好用的方法-定时器

setTimeout()
setInterval()

「3.2setTimeout()定时器」

1	window.setTimeout(调用函数，延迟的毫秒数);

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

window可以省略
这个调用函数可以直接写函数，或者写函数名，或者采用字符串**’函数名()’**三种形式。第三种不推荐
延迟的毫秒数省略默认是0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

回调函数

setTimeout()这个调用函数也称为回调函数 callback，普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。简单理解：回调，就是回头调用的意思，上一件事干完，在回头调用这个函数。以前提到的element.onclick=function(){} 或者 element.addEventListener(“click”,fn) 里面的函数也是回调函数。

setTimeout(function() {
    console.log('时间到了');
}, 2000);
// 标识符(名字)
function callback() {
    console.log('shijiandao');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
setTimeout('callback()', 3000); //我们不提倡这个写法

案例：5s后关闭广告

<img src="images/ad.png" alt="" class="ad">
<script>
	var ad = document.querrySelector('.ad');
    setTimeout(function() {
        ad.style.display = 'none';
    }, 5000);
</script>

「3.3停止setTimeout()定时器」

1	window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器

注意：

window可以省略
里面的参数就是定时器的标识符

<button>
   点击停止定时器
</button>
<script>
	var btn = document.querrySelector('button');
    var timer = setTimeout(function() {
        console.log('时间没到');
    },5000);
    btn.addEventListener('click', function() {
        clearTimeout(timer);
    })
</script>

「3.4setInterval()定时器」

1	window.setInterval(回调函数，间隔的毫秒数);

setInterval()方法重复调用一个函数，每隔一段时间，就去调用一次这个回调函数。

注意：

window可以省略
这个回调函数可以直接写函数，或者写函数名，或者采取字符串**’函数名()’**三种形式
延迟的毫秒数省略默认是0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

1
2
3

setInterval(function() {
    console.log('持续输出');
}, 1000)

「3.5停止setInterval()定时器」

1	window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用setInterval()建立的定时器

注意：

window可以省略
里面的阐述就是定时器的标识符

案例：点击清除定时器

<button class="begin">开启定时器</button>
<button class="stop">停止计时器</button>
<script>
	var begin = document.querrySelector('.begin');
    var stop = document.querrySelector('.stop');
    var timer = null; //全局变量 null是一个空对象
    begin.addEventListener('click', function() {
        timer = setInterval(function() {
            console.log('你好吗');
        }, 1000);
    })
    stop.addEventListener('click', function() {
        clearInterval(timer);
    })
</script>

案例：倒计时效果

案例：发送短信

JS执行机制

「4.1JS是单线程」

JavaScript语言的一大特点就是单线程，也就说，同一i时间只能做一件事，这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先添加，之后在删除。

单线程就意为着，所有任务需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

「4.2同步和异步」

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是JS出现了同步和异步。

同步，前一个任务结束后在执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的。比如做饭的同步做法：烧水做饭，等水开了，再去切菜炒菜
异步，在做一件事时，因为这件事会花费很长时间，在做这件事的同时，你还可以去处理其他事情，比如做饭的异步做法，我们在烧水的同时，利用这十分钟，去切菜炒菜。
他们的本质区别; 这条流水线上各个流程的执行顺序不同

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

JS的异步是通过回调函数实现的，异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

一般异步任务有三种类型

普通事件，如click,resize等
资源加载，如load,error等
定时器，包括setInterval,setTimeout等

「4.3执行机制」

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

location对象

「5.1什么是location对象」

window对象给我们提供了一个location属性用于获取或设置窗口的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

「5.2URL」

统一资源定位符（Uniform Resource Locator ，URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎末处理它。

URL一般语法格式

1 2	protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的http ftp maito等
host	主机（域名） www.itheima.com
port	端口号可选，省略时使用方案的默认端口，如http的默认端口为80
path	路径由零或多个’/‘符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符号分隔开来
fragment	片段 #后面内容常见于链接锚点

「5.3location对象的属性」

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容

重点记住：href和search

案例; 5s后跳转页面

<button>点击</button>
<div></div>
<script>
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.addEventListener('click', function() {
        //console.log(location.href);
        location.href = 'http://www.itcast.cn';
    })
    var timer = 5;
    setInterval(function() {
        if(timer == 0) {
            location.href = 'http://www.itcast.cn';
        } else {
            div.innerHTML = '您将在' + timer + '秒后跳转到首页';
            timer--;
        }
    }, 1000);
</script>

「5.4location对象的方法」

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也成为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5，如参数为true，强制刷新ctrl+f5

<button>点击</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        //记录浏览历史，所以可以实现后退功能
        location.assign('http://www.itcast.cn');
        //不记录浏览历史，所以不可以实现后退功能
        location.replace('http://www.itcast.cn');
        location.reload();
    })
</script>