BOM

在学习完了JS的基础语法部分之后，就要开始学习JS最令人兴奋的地方，就是页面相关操作。为了操作页面，JS中有DOM文档模型，还有BOM浏览器对象模型，二者从不同角度对网页的行为和内容都有着影响。JS中针对BOM和 DOM 都有特别的对象映射以及方法，现在首先来学习BOM。

WINDOW对象

BOM的核心就是window对象，window对象既是JS和浏览器通信的接口，又是ECMA规定的全局对象。意味着在JS程序中直接定义的任何对象、变量和函数都是window对象的属性或者方法。

window对象的作用域

window对象的作用域就是全局作用域，直接用var定义变量和定义window的同名属性，效果是一样的。但是区别是var 定义的变量无法用delete删除，而定义window对象的属性可以。还有需要特别注意的是，ES6 里 let 定义的变量，不会扩散到全局，也不会成为window的属性。

var age = 29;
function sayAge() {
    console.log(age)
}

console.log(window.age);
console.log(age);
window.sayAge();
sayAge();

四条命令的结果都一样，全部显示29。

窗口位置与大小

从这里开始，各个浏览器针对window的属性确定和修改等繁杂的浏览器兼容问题开始冒出来。只要抓住核心的属性和应用即可。

.screenLeft 浏览器窗口或window相对于屏幕左边的值
.screenTop 浏览器窗口或window相对于屏幕上方的值
.screenX Firefox提供的相当于screenLeft的值
.screenY Firefox提供的相当于screenRight的值
.outerwidth 与 .outerheight Chrome里表示整个浏览器窗口的高和宽
.innerwidth 与 .innerheight Chrome里表示页面实际（视口）的高和宽
Chrome里还可以通过 document.documentElement.clientHeight 获得视口高度
Chrome里还可以通过 document.documentElement.clientWidth 获得视口宽度

所谓视口，就是页面显示的实际大小，浏览器窗口改变，打开调试工具等都会改变视口。

导航和打开窗口

newpage= window.open(URL, tag_name, attr, boolean) 这个方法表示打开新页面，第一个参数表示打开的URL，第二个页面表示在哪个名称的标签页里打开，第三个是类似于html tag属性写法的键值对，一般不太用，第四个参数只在不打开页面的情况下使用。一般只使用第一个参数即可。如果attr里的“location = no”，Chrome浏览器的做法是弹出一个简易的不带菜单栏单独页面，其实就像弹出窗口一样。一般不太使用该方法直接弹出窗口。这个方法返回的是新打开的页面对象，一般就用newpage.close()来关闭新页面。

超时调用和间隔调用

所谓超时调用就是指让程序暂停一会，间隔调用就是指间隔一定时间反复调用。超时调用使用window.setTimeout(exec,time)，第一个参数表示要执行的代码字符串或者一个函数，一般使用一个函数，而不要直接传递字符串，性能有很大下降。第二个参数是以毫秒计算的数值。超时结束以后，实际上是将代码添加到当前的执行队列，JS会执行完当前的队列才会执行超时的代码，所以在复杂的程序中，即使时间到了，也未必立刻执行代码。超时函数返回一个超时ID，如果要取消超时，可以用clearTimeout(timeoutID)。这里要注意的是，如果在循环中启动了多个定时器，接受定时器的变量其实只拿到了最后一个定时器ID，只能停掉最后一个超时。间隔调用的方法是setInterval()，接受的参数一样，第二个参数代表间隔的毫秒数。该方法返回一个间隔调用ID，用clearInterval()结束间隔调用。对于间隔调用要当心，最好能合理的结束，否则会一直执行到页面关闭。一般在实际开发的时候，不使用间隔调用，而是使用超时调用来模拟间隔调用。

系统对话框

首先需要了解的是，对话框是window属性，具体样式有浏览器提供而不是JS代码或者CSS控制，所有的对话框都是同步的，不点掉对话框，其他代码都处于停止执行的状态。

alert(message)用于显示用户无法控制的消息，用户在看完之后只能关闭，不能进行任何操作。
confirm(message)这个方法返回一个布尔值，用户按下OK返回true，按下cancel返回false。经常在用户确认的时候使用。
prompt(hint, placeholder)这个框用于提示用户输入一些信息，第一个参数表示提示信息，第二个参数表示默认显示在文本框内的内容，如果不想显示可以传一个空字符串。该方法有返回值，如果用户按下了OK，返回输入的文本内容，如果按下了cancel，会返回null。

在了解了window对象的方法（就像内置函数一样可以直接使用的方法）之后，还要看window对象包含的几个重要的对象：location对象，navigator对象，screen对象和history对象，这些对象都是window对象的属性，所以也像全局变量一样可以直接使用。

location 对象

Location 对象非常有用，包含了一系列和当前页面URL信息有关的属性以及操作页面跳转的方法。以编辑本篇博客的URL: http://www.conyli.cc/wp-admin/post.php?post=1442&action=edit为例，看看locaiton的属性和方法：

属性或方法名	解释
hash	返回URL中#号及后边的字符，如果不包含#则返回空字符串。常用在某些页面有锚链接来定位元素的id上。
host	返回`www.conyli.cc`
hostname	返回`www.conyli.cc`
href	返回完整的URL：`http://www.conyli.cc/wp-admin/post.php?post=1442&action=edit`
pathname	返回主机的路径部分：`/wp-admin/post.php`
port	必须URL中显式的写了路径，才会返回端口，不然为空字符串
protocol	返回页面使用的协议，通常是 `http: 或 https:`
search	返回?开头的查询字符串，本例返回 `?post=1442&action=edit`
.assign(URL)	跳转到指定的URL，会在history对象里留下记录。将location.href设置为一个新URL的时候，内部调用的是此方法。
.reload([true])	如果传入true，页面会彻底从服务器重载，如果不传任何参数，浏览器会按照最有效的方式加载（比如从缓存内加载部分文件，然后刷新改变的部分）

更改除了hash之外的location的属性，都会触发浏览器以新的URL进行访问，同时在history对象里留下记录。一般更改URL通用的做法是修改location.href属性，而不是调用.assign方法和单独修改其他属性。

navigator 对象

这个对象是识别浏览器以及浏览器的客户端运行环境的对象，有点像通过Python 的OS模块去获得系统信息。一些主要属性有：

属性或方法名	解释
appCodeName	基本上固定返回Mozilla
appName	Chrome下返回Netscape，一般没什么用
appVersion	返回浏览器版本
cookieEnabled	cookie是否启用
javaEnabled()	浏览器是否启用了Java
language	浏览器的主语言
mimeTypes	浏览器里注册的MIME类型的数组
onLine	是否连接到互联网
platform	所在系统平台，windows下返回"Win32"
plugins	安装的插件信息的数组
product	产品名称，Chrome里返回"Gecko"
productSub	版本信息
userAgent	浏览器版本信息
vendor	浏览器发行商的品牌
vendorSub	发行商的次要信息

navigator对象还有几个方法与MIME的注册有关，如果之后用到再学习。其他的属性不是很重要。

screen 对象

screen对象的用处不大，因为现代浏览器基本都禁止JS直接修改浏览器窗口与视口大小。主要用screen.height 和 screen.width取得浏览器所以屏幕的实际分辨率。

history 对象

从一个浏览器窗口被打开的时候，就建立了一个history对象，保存着所有上网历史记录。由于history是window对象的属性，所以每一个window环境都有一个history属性。出于安全考虑，JS无法从history对象中获得用户的上网记录，仅能通过history对象的方法来实现后退和前进。

属性或方法名	解释
.go(arg)	arg可以是数值，表示向前或向后跳转，正数表示前进多少页，负数表示后退多少页。还可以传入字符串，会跳到历史记录中最近的包含该字符串的那个URL，可能向前也可能后退。
.back()	后退，相当于点击后退按钮。
.forward()	前进，相当于点击前进按钮。
.length	历史记录的数量，如果是新打开的第一个页面，这个属性的值为0。可以用来测试是否是第一个页面。不过实际试了一下，返回1和2的都有。

BOM对象的功能主要是在页面以外操作链接和页面跳转的内容的。比较有用的对象是延时操作，对话框以及location对象。