客户端解析html5,客户端JS——“Web浏览器中的JS”

1 客户端JavaScript

window对象自身也有一个名为window的属性，指向window对象

window.window.window.location.pathname;

2 在HTML里嵌入JavaScript

2.1 script元素

在XHTML中使用JavaScript，则需要放到一个CDATA部分：

2.2 脚本类型

把type属性设置为浏览器不能识别的值，即可在html页面中嵌入任意文本内容。

hello scripter;

"use strict"

var s = document.getElementsByTagName("script")[0];

console.log(s.text); //用text属性就可以获取该数据

2.3 URL中的JavaScript(避免使用)

javascript:协议限定符

可以用void操作符强制函数调用或给表达式赋予undefined值

它被当做一个单独的一行代码对待，语句之间必须用分号隔开。

w time ist?

书签

书签就是一个保存起来的URL。如果书签是javascript:URL，那么保存的就是一小段脚本，叫做bookmarklet。只要书签不返回值，它就可以操作当前显示的任何文档。

3 JavaScript程序的执行

3.1 同步、异步和延迟的脚本

script标签可以有defer和async属性，可以改变脚本的执行方式。这些属性只在和src属性联合使用时才有效：

async 属性规定一旦脚本可用，则会异步执行。async 属性仅适用于外部脚本(只有在使用 src 属性时)。

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

3.2 客户端JavaScript时间线

Web浏览器创建Document对象，并开始解析Web页面，解析html元素和它们的文本内容后添加Element对象和Text节点到文档中。在这个阶段documen.readystate属性值是“loading”

当HTML解析器遇到没有async和defer属性的script元素时，它把这些元素添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载(如果需要)和执行时解析器会暂停。这样脚本就可以用documen.wrte()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常简单定义函数和注册后面使用的注册时间处理程序，但他们可以遍历和操作文档树，因为在他们执行时已经存在了。这样，同步脚本可以看到它自己的script元素和它们之前的文档内容。

当解析器遇到设置了async属性的script元素时，它开始下载脚本文本，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下来等它下载。异步脚本禁止使用document.write()方法。它们可以看到自己的script元素和它之前的所有文档元素，并且可能或干脆不可能访问其他的文档内容。

当文档完成解析，document.readyState属性变成“interactive”。

所有有defer属性的脚本，会桉它们在文档里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树，禁止使用document.write()方法。

浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转换到事件驱动阶段。但要注意，这时可能还有异步脚本没有执行完成

这时，文档已经完全解析完成，但是浏览器可能还在等待其他内容载入，如图片。当所有这些内容完成载入时，并且所有异步脚本完成载入和执行，document.readyState属性改变为“complete”，Web浏览器触发Window对象上的load时间。

从此刻起，会调用异步事件，以异步响应用户输入事件、网络事件、计时器过期等。

4 兼容性和互用性

4.1 功能测试

常见的功能测试：

if (element.addEventListener) {

element.addEventListener("keydown", handler, false);

element.addEventListener("keypress", handler, false);

} else if (element.attachEvent) {

element.attachEvent("onkeydown", handler);

element.attachEvent("onkeypress", handler);

} else {

element.onkeydown = element.onkeypress = handler;

}

4.2 怪异模式和标准测试

document.compatMode属性，如果为"CSS1Compat"，则是在标准模式，如果在"BackCompat或undefined"，则是在怪异模式。

4.3 浏览器测试

早前通常需要做浏览器测试，即使用Navigator对象。

4.4 IE里的条件注释

IE中的条件注释(Conditionalcomments)对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。

条件注释只能用于IE5以上。

gt :greater than，选择条件版本以上版本，不包含条件版本

lt : lessthan，选择条件版本以下版本，不包含条件版本

gte :greater than or equal，选择条件版本以上版本，包含条件版本

lte :less than or equal，选择条件版本以下版本，包含条件版本

! : 选择条件版本以外所有版本，无论高低

使用方法：

IE的JavaScript解释器也支持条件注释：

/*@cc_on

@if(@_jscript)

alert("You are using Internet Explorer");

@else*/

alert("you are not using Internet Explorer");

/*@end

@*/