代码下载
BOM
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。
| DOM | BOM |
|---|---|
| 文档对象模型 | 浏览器对象模型 |
| DOM 就是把「文档」当做一个「对象」来看待 | 把「浏览器」当做一个「对象」来看待 |
| DOM 的顶级对象是 document | BOM 的质级对象是 window |
| DOM 主要学习的是操作页面元泰 | BOM 学习的是浏览器窗口交互的一些对象 |
| DOM 是 W3C 标准规范 | BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差 |
BOM的构成
BOM 比 DOM 更大，它包含 DOM。
顶级对象window包含：document，location，navigation，screen，history。
window 对象是浏览器的顶级对象，它具有双重角色。
- 它是 JS 访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
注意:window下的一个特殊属性 window.name
顶级对象window
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。注意:
- 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。
- window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制。
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。Ie9以上才支持。如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。
window.onload = function() {let btOne = document.querySelector('.btOne');btOne.onclick = function() {alert('1');};};window.addEventListener('load', function() {let btTwo = document.querySelector('.btTwo');btTwo.addEventListener('click', function() {alert('2');});});window.addEventListener('DOMContentLoaded', function() {let btThree = document.querySelector('.btThree');btThree.addEventListener('click', function() {alert('3');});});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。 注意:
- 只要窗口大小发生像素变化，就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
window.addEventListener('DOMContentLoaded', function() {let resize = document.querySelector('.resize');window.addEventListener('resize', function() {if (window.innerWidth < 800) {resize.style.display = 'none';} else {resize.style.display = 'block';}});});
定时器
window 对象给我们提供了 2 个非常好用的方法-定时器：setTimeout()，setInterval()。
setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数：
- window 可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
- 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
setTimeout(function() {alert('我爆了');}, 3000);function callback() {alert('爆炸了');}setTimeout(callback, 5000);let ad = setTimeout(function() {let ad = document.querySelector('.ad');ad.style.display = 'none';}, 3000);
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。 注意:
- window 可以省略。
- 里面的参数就是定时器的标识符 。
let clear = document.querySelector('.clear');clear.addEventListener('click', function() {window.clearTimeout(ad);});
setInterval() 定时器，setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。注意:
- window 可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
- 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。 4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
- 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
var num = 0;setInterval(function() {console.log(num)num++;}, 1000);
clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。 注意:
- window 可以省略。
- 里面的参数就是定时器的标识符 。
let add = document.querySelector('.add');let remove = document.querySelector('.remove');var timer = nulladd.addEventListener('click', function() {timer = setInterval(function() {console.log('你好！');}, 1000);});remove.addEventListener('click', function() {window.clearInterval(timer);});
倒计时案例：
let hour = document.querySelector('.hour');let minute = document.querySelector('.minute');let second = document.querySelector('.second');let time = + new Date() + 5*3600*1000;let cd = setInterval(countdown, 1000);function countdown() {let now = + new Date();if (time > now) {let t = (time - now)/1000;console.log('t:' + t);let h = ('0' + parseInt(t/3600)).slice(-2);let m = ('0' + parseInt(t%3600/60)).slice(-2);let s = ('0' + parseInt(t%60)).slice(-2);hour.innerHTML = h;minute.innerHTML = ":" + m;second.innerHTML = ":" + s;} else {window.clearInterval(cd);}};
发送短信倒计时案例：
let send = document.querySelector('.send');var count = 10send.addEventListener('click', function() {let timer = setInterval(function() {if (count > 0) {send.style.disable = true;send.innerHTML = count + ' s';} else {send.style.disable = false;send.innerHTML = '发送';count = 10;window.clearInterval(timer);}count--;}, 1000);})
this
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this 的最终指向的是那个调用它的对象
现阶段，我们先了解一下几个this指向
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中，谁调用this指向谁
- 构造函数中this指向构造函数的实例
console.log(this);function fn() {console.log(this);}fn();let o = {say: function() {console.log(this);}};let btn = document.querySelector('.btn');btn.addEventListener('click', function() {console.log(this);});o.say();function Fun() {console.log(this);}let f = new Fun();
JS 执行机制
同步任务，同步任务都在主线程上执行，形成一个执行栈。
异步任务，JS 的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型:
- 普通事件，如 click、resize 等
- 资源加载，如 load、error 等
- 定时器，包括 setInterval、setTimeout 等 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)
JS 执行机制：
- 先执行执行栈中的同步任务。
- 异步任务(回调函数)放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( event loop)。
console.log('1');document.onclick = function() {console.log('click');}console.log('2');setTimeout(function() {console.log('3');});console.log('4');
location 对象
window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
URL，统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有 一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为:
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 |
| pathV | 路径 由 零或多个!符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数 以键值对的形式,通过&符号分隔开来 |
| fragment | 片段 ＃后面内容 常见于链接锚点 |
location 对象的属性：
| location对象厲性 | 返回值 |
|---|---|
| location.href | 获取或者设置整个URL |
| location.host | 返回主机（域名） www.itheima.com |
| location.port | 返回端口号 如果未写 返回空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| location.hash | 返回片段 #后面内容 常见于链接锚点 |
let jump = document.querySelector('.jump');let msg = document.querySelector('.jumpmsg');var jumptime = 5;jump.onclick = function() {msg.innerHTML = jumptime + 's后跳转'let jumptimer = setInterval(function() {if (jumptime > 0) {jump.style.disable = false;msg.innerHTML = jumptime + 's后跳转'} else {clearInterval(jumptimer);location.href = 'http://www.baidu.cn';}jumptime--;}, 1000);};
获取URL参数案例：
console.log(location);console.log(location.search);let p = location.search.substr(1);console.log(p);let a = p.split('=');console.log(a);let d = document.querySelector('div');d.innerHTML = a[1] + "，欢迎您！"
location 对象的方法：
| location对象方法 | 返回值 |
|---|---|
| location.assign() | 跟href 一样，可以跳转页面（也称为重定向页面) |
| location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.reload() | 重新加载页面，相当于刷新按钮或者{5 如果参数为true 强制刷新 ctrl+f5 |
let baidu1 = document.querySelector('.baidu1');let baidu2 = document.querySelector('.baidu2');let refresh = document.querySelector('.refresh');baidu1.onclick = function() {location.assign('https://www.baidu.cn/');};baidu2.onclick = function() {location.replace('https://www.baidu.cn/');};refresh.onclick = function() {location.reload(true);};
navigator 对象
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS |Symbian|Windows Phone)/i))) {window.location.href = ""; //手机
} else {window.location.href = ""; //电脑
}
history 对象
window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中) 访问过的 URL。
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward() | 前进功能 |
| go(参数） | 前进后退功能 参数如果是 1前进1个页面 如果是-1后退1个页面 |
console.log(history.length);let back = document.querySelector('button');back.onclick = function() {// history.forward();history.go(1);};
