JavaScript —— BOM（浏览器对象模型）

ECMAScript是JavaScript的核心，在web中使用JavaScript,BOM则无疑才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

1. window对象
   BOM的核心对象是window，表示浏览器的一个实例。
   在浏览器中，window对象既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

2. 全局作用域
   window对象同时扮演着ECMAScript中Global对象的角色，因此所有全局作用域中声明的变量。函数都会变成window对象的属性和方法。
   全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。

3. 窗口大小

   var pageWidth = window.innerWidth;
   var pageHeight = window.innerHeight;
   if(typeof pageWidth != "number"){
   if(document.compatMode == "CSS1Compat"){
   pageWidth = document.documentElement.clientWidth;//IE,Firefox,Safari,Opera.Chrome保存信息
   pageHeight = document.documentElement.clientHeight;
   }else{
   pageWidth = document.body.clientWidth;//IE6中标准模式,以上属性可获得
   pageHeight = document.body.clientHeight;//混杂模式使用body
   }
   }

检查pageWidth保存的是不是一个数值，确定页面是否处于标准模式。
移动设备window.innerWidth和window.innerHeight保存着可见视口，屏幕上可视页面区域。
其他移动浏览器中，document.documentElement度量的是布局视口，即渲染后页面的实际大小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动IE浏览器把布局视口的信息保存在document.body.clientWidth/clientHeight中。这些值不会随页面而缩放变化。

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。resizeTo()两个参数：新宽度，新高度。resizeBy()两个参数：新窗口与原窗口的宽高差。
window.resizeTo(100,100);//调整到100 * 100
window.resizeBy(100,50);//调整到200 * 150

1. 导航和打开窗口
   window.open()可以导航到一个特定的URL，可以打开一个新的浏览器窗口，
   4个参数：加载的URL，窗口目标，特性字符串，新页面是否取代浏览器。历史记录中当前加载页面的布尔值。（第4个参数只在不打开新窗口的情况下使用）
   < a href=“http://www.baidu.com” target=“topFrame”></ a>//同等于
   window.open(“http://www.baidu.com”,“topFarme”);
   如果一个名叫"topFrame"的窗口或框架，就在该窗口或框架加载这个URL，否则会创建一个新窗口将其命名为"topFrame"，
   第二个参数：_self,_top,_blank,_parent。
2. 间歇调用和超时调用

超时调用 setTimeout()

超时调用：指定的时间过后执行代码 setTimeout()方法
超时调用使用window对象的setTimeout()方法。两个参数：要执行的代码和以毫秒表示的时间

setTimeout(function(){
alert("Hello world!");
},1000);//推荐使用
setTimeout("alert('Hello world')",1000);//可能导致性能损失，不建议以字符串作为第一个参数

后指定的代码不一定执行
JavaScript是一个单线程序的解释器，因此一定时间内只能执行一段代码。
为了控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。第二个参数告诉JavaScript再过多久把当前任务添加到队列中。
调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。
要取消尚未执行的超时调用计划，可以调用clearTimeout()方法，并将相应的超时调用ID作为参数传递给它。

var timeId = setTimeout(function(){
alert("Hi");
},1000);
clearTimeout(timeId);

超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined。

间歇调用 setInterval()

按照指定的时间间隔重复执行代码，直至间歇调用被取消或页面被卸载。
setInterval() 参数与setTimeout()相同
setInterval()方法同样也会返回一个间歇调用ID，该ID可用于在将来某个时刻取消间歇调用。clearInterval()取消间歇调用。
在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。超时调用完全可以避免这一点，所以最好不用使用间歇调用。

1. 系统对话框
   alert()方法，向用户显示一个系统对话框，其中包含指定的文本和一个OK（“确定”）按钮。
   confirm()方法，"警告"对话框，OK按钮，cancel按钮，消息。为了确定用户是单击了OK还是Concel，可以检查confirm()返回的布尔值，OK=true,cancel=false
   prompt()方法，"提示"框，提示用户输入一些文本。OK，cancel按钮，文本输入域，两个参数：要显示给用户的文本提示和文本输入域的默认值（可以是一个空字符串）

2. location对象
   location提供了当前窗口中加载的文档有关的信息，还提供了一些导航功能。
   既是window对象的属性，也是document对象的属性，
   location对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

1. 查询字符串参数
   创建一个函数，可以解析查询字符串，然后返回包含所有参数的一个对象。

   function getQuertStringArgs() {
   // 取得查询字符串并去掉开头的问号
   var qs = (location.search.length > 0 ? location.search.substring(1): ''),
   // 保存数据的对象
   args = {},
   // 取得每一项
   items = qs.length ? qs.split("&") : [],
   item = null,
   name = null,
   value = null,
   // 在for循环中适应
   i = 0,
   len = items.length;
   // 逐个将每一项添加到args对象中
   for(i=0; i < len; i++) {
   item = items[i].split("=");
   name = decodeURIComponent(item[0]);
   value = decodeURIComponent(item[1]);
   if(name.length) {
   args[name] = value;
   }
   }
   return args;
   }

2. 位置操作
   改变浏览器的位置，使用assign()方法并为其传递一个URL。
   location.assign(“http://wwww.baidu.com”);
   立即打开新URL，在浏览器的历史记录中生成一条记录
   window.location = “http://wwww.baidu.com”;//也会调用assign()方法，效果一样
   location.href = “http://wwww.baidu.com”;//也会调用assign()方法，效果一样,常用
   location.replace(“http://wwww.baidu.com”);
   这个方法虽然会导致浏览器位置改变，但不会在历史记录中生成新纪录，用户不能单击“后退”回到前一个页面
   location.reload();//重新加载（有可能从缓存中加载）
   location.reload(true);//重新加载（从服务器重新加载）

此文来源于《JavaScript高级程序设计》的总结摘取