《JavaScript权威指南》——Web游览器中的js

Window对象是所有客户端JavaScript特性和API的主要接入口。Window对象是全局对象,处于作用链的顶部,属性和方法也是全局的.

Window对象定义的属性：Location对象指定当前显示在窗口的URL.

document是window对象的一个最重要的属性，引用的是Document对象。

每个Element对象都有style和className属性，来允许脚本指定文档元素的CSS样式，或者来修改元素上的css类名。

Window、Document、Element对象上另一个重要的属性集合是事件处理程序相关的属性，在脚本绑定函数，这个函数在事件触发时，以异步的方式调用。事件处理程序的属性以“on”开始的。

Window对象的onload处理程序，当显示在窗口的文档内容稳定并可以操作的时候触发。

Web文档里的JavaScript：JavaScript程序通过Document对象和它包含的Element对象遍历和管理文档内容，增强用户的浏览体验。

Web应用里的JavaScript：Web浏览器是简单的操作系统，定义底层API、保存数据和绘制图像。web应用本质上就是javascript程序。

(JavaScript是Web的原始脚本语言，type的默认值为text/javascript，所以没有必要进行显示标注。)

HTML中的事件处理程序:JavaScript程序必须定义事件处理程序——web游览器先注册Javascript函数，之后调用它作为事件的响应。

URL中的JavaScript：在URL后面跟一个javascript：协议限定符，这种特殊的协议类型指定的URL内容为任意内容，能被JavaScript解释器运行，url能识别是执行代码后的返回值，如果资源没有内容，返回undefined。

JavaScript程序的执行有两个阶段：第一阶段——载入文档内容，并执行<script>元素里的代码，文档载入完成，所有脚本执行完后进入第二阶段。

                                                         第二阶段——这个阶段是异步的，由事件进行驱动。在事件驱动阶段发生的第一件事是load事件，指文档全部加载。

（核心javascript和客户端javascript都有一个单线程的执行模型，脚本和事件处理程序在同一时间只能执行一个，没有并发性。）  

同步、异步和延迟的脚本

当HTML解析器遇到<script>元素时，默认必须执行脚本，再恢复文档的解析和渲染。脚本的执行只在默认情况下是同步和阻塞的。

<script>标签可以有defer和async属性来改变脚本的执行方式。这些都是布尔属性。

defer属性使得游览器延迟脚本的执行，知道文档的载入和解析完成。

async属性使游览器尽快的执行脚本，不用在下载脚本时阻塞文档解析。（两个属性都存在时，忽略defer属性）

<script defer src="deferred.js"></script>
<script async src="async.js"></script>

在html5中规定者两个属性要与src同时使用才有效。

事件驱动的JavaScript——通过注册事件来处理程序函数，注册的事件发生时异步调用函数。

注册事件处理程序最简单的方法是把javascript函数赋值给目标对象。

window.onload  = function() {...};
document.getElementById("button").onclick = function() {...}

有些事件的目标是文档元素，它们经常往上传递给文档树，这个过程叫“冒泡”。

addEventListaner()方法可以允许安全的注册多个监听器。（在IE8之前用另一种方法代替——attachEvent()）

window.addEventListaner("load",function(){...},false)

客户端JavaScript线程模型——JavaScript语言核心并不包含任何线性机制，严格的单线程工作。

客户端JavaScript时间线（理想的事件线，现实中各种游览器的支持细节不同）

1.创建document对象，解析HTML文档，创建DOM树，readystate属性值为loading。

2.HTML解析器没有遇到async和defer属性的<script>元素，，把这些元素添加到文档中，然后再执行行内或外部脚本。脚本进行同步执行，并且脚本在下载和执行的过程中，文档会停止解析

3.当解析器遇到了设置async和defer属性的<script>元素时，开始下载脚本，但是会继续解析文档。

4.文档解析完成后，document.readystate属性变成了interactive（互动的）

5.有defer属性的脚本，按照出现顺序进行执行。

6.游览器在Document对象上触发DOMContentLoaded事件，执行程序从同步脚本执行阶段转换到了异步事件驱动阶段。

7.文档已经完全解析，等待其他内容的加载，如图片。readystate属性值为complete

8.开始调用异步事件，以异步响应用户输入事件等。

（所有游览器都支持load事件，在文档完全载入并可以操作最通用的技术，在DOMContentLoaded事件之后触发.）

功能测试 解决不兼容问题的一种强大技术

/*
* 功能测试
* */
if(element.addEventListener) {//在使用这个W3C方法之前首先检测它是否可用
    element.addEventListener("keydown",handler,false);
    element.addEventListener("keypress",handler,false);
}
else if(element.attachEvent){//在使用该IE方法之前首先检测它
    element.attachEvent("keydown",handler);
    element.attachEvent("keypress",handler);
}
else{//否则，选择普遍支持的技术
    element.onkeydown = element.onkeypress = handler;
}

Internet Explorer里的条件注释 

<!-- IE在HTML中条件注释-->
<!--[if IE 6]>
this content is actually inside an HTML comment.
It will only be displayed in IE6.
<![endif]-->
<!--[if lte IE 7]>
只在IE7以及IE7之前的版本显示
<![endif]-->
<!--[if !IE]><-->
正常的html内容，但不会在ie中显示
<!--><![endif]-->

/*
* IE的JavaScript解释器支持条件注释
* */
/*@cc_on
  @if (@_jscript)
  //该代码位于一条js注释内，但在IE中可以执行
  alert("in ie");
  @else */
  //除了ie以外的游览器都执行这里的代码
  /*@end
@ */

JavaScript可访问性——一条重要原则，设计的代码即使在禁用JavaScript解释器的游览器也能正常运行。

安全性

• web游览器针对恶意代码的第一条防线就是它们不支持某些功能。
• web游览器针对恶意代码的第二条防线是在自己支持的某些功能上施加限制。

同源策略——对JavaScript代码能够操作哪些Web内容的一条完整的安全限制，主要负责管理窗口或窗体中的JavaScript代码能够操作哪些Web内容。