客户端JS——“Web浏览器中的JS”

1 客户端JavaScript

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

window.window.window.location.pathname;

2 在HTML里嵌入JavaScript

2.1 script元素

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

<script><![CDATA[/*code...*/]]></script>

2.2 脚本类型

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

<script type="text/xxx"> //type设置为不能被浏览器识别的属性值
    hello scripter;
</script>
<script>
"use strict"
var s = document.getElementsByTagName("script")[0];
console.log(s.text); //用text属性就可以获取该数据
</script>

2.3 URL中的JavaScript（避免使用）

• javascript:协议限定符

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

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

---

<a href="javascript: new Date().toLocaleString()">w time ist?</a>

书签

书签就是一个保存起来的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，选择条件版本以下版本，包含条件版本

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

使用方法：

• <!--[if IE 6]>仅IE6可见<![endif]-->

• <!--[if gt IE 5.5]>仅IE 5.5以上可见<![endif]-->

• <!--[if lt IE 5.5]>仅IE 5.5以下可见<![endif]-->

• <!--[if gte IE 5.5]>IE 5.5及以上可见<![endif]-->

• <!--[if lte IE 5.5]>IE 5.5及以下可见<![endif]-->

• <!--[if !IE 5.5]>非IE 5.5的IE可见<![endif]-->

• <!--[if !IE]><!--> 您使用不是Internet Explorer <!--<![endif]-->

• <!--[if IE 6]><!-->您正在使用InternetExplorer version 6或者一个非IE 浏览器<!--<![endif]-->

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

/*@cc_on
@if(@_jscript)
alert("You are using Internet Explorer");
@else*/
alert("you are not using Internet Explorer");
/*@end
@*/