每一周的学习报告 第六周 BOM基础

学习周报

BOM浏览器对象模型

BOM概述

什么是BOM

BOM全称Browser Object Model，即浏览器对象模型，它提供独立于内容于浏览器窗口进行交互对象，其核心对象是window
BOM由一系列相关的对象构成，BOM的兼容性比较差

BOM的构成

BOM是指整个浏览器窗口，它包含DOM

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

1. 它是JS访问浏览器窗口的一个接口
2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
   在调用时可省略window
   注意：window.name是一个特殊的属性

window对象常见事件

窗口加载事件

1. load事件

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

window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数
我们把代码写在此事件中，就可以在任何地方书写代码
2. DOMContentLoaded事件

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

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
在网页图片比较多时，使用load事件会使网页加载时间过长，此时使用DOMContentLoaded事件可减少加载时间
注意：le9以上才支持

调整窗口大小事件

• resize事件

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

当浏览器窗口大小改变会被触发

定时器

两种计时器

• setTimeout()

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

当延迟结束后执行函数
window可省略不写
怎么停止setTimeout()计时器

window.clearTimeout (timeout ID)

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

• setInterval()

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

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
与setTimeout()不同的是setInterval()会重复调用函数
停止setlnterval()定时器

window.clearInterval (intervalID);

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

---

this的指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window)
2. 方法谁调用就指向谁
3. 构造函数指向构造函数的实例

---

JS执行队列

Javascript的一大特点是单线程，这意味着所有任务需要排队
为了解决等待问题，提出了同步与异步

同步与异步

console.log (1);
setTimeout ( function (){
console.log (3) ;
}, 0) ;
console.log (2);

代码的结果依然是1 2 3

同步任务

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

异步任务

JS的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型：

1. 普通事件，如click、resize等
2. 资源加载，如load、error等
3. 定时器，包括setlnterval、setTimeout等

执行机制：

1. 先执行执行栈中的同步任务
2. 异步任务(回调函数)放到任务队列中
3. 一旦任务栈中所有同步任务执行完毕，系统会按次序读取异步任务
   

location对象

什么是loaction对象

location对象用于获取或设置窗口的URL，并且可以用于解析URL，这个属性返回值是一个对象

什么是URL

URL是统一资源定位符，是互联网上的标准资源，互联网上的每一个文件都有对应的唯一URL
有了URL就可以找出每一个文件所在的位置
URL的基本格式是：

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

location对象的属性

location对象的方法

navigator对象

navigator对象包含了有关浏览器的信息，常用的是userAgent属性，可以返回客户机发送服务器的user-agent头部的值，可以判断用户用哪个终端打开了页面

history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中)访问过的URL