<1> web浏览器中的javascript

参考资料：《javascript权威指南》客户端javascript部分。

[b]一、web浏览器中的javascript[/b]
在web浏览器作为上下文运行javascript的范围内，通常称为客户端javascript。

Window对象是所有客户端Javascript特性和API的主要接入点，它表示web浏览器的一个窗口或窗体，并且可以用标识符”window”来引用它，window实际上是一个Window对象引用自身的属性。Window对象定义了一些属性，比如指代Loaction对象的location属性，Location对象指定当前显示在窗口中的url，并允许脚本往窗口里载入新的url，会立即跳转：

// 设置location属性，从而跳转到新的web页面
window.location = http://www.***.com

在客户端JavaScript中，window对象也是[b]全局对象[/b]。这意味着Window对象处于作用域链的顶部，它的属性和方法实际上是全局变量和全局函数，[b]使用全局变量和属性不需要显式的使用window来引用[/b]。上面的例子也可以直接用：location = http://www.***.com

Window对象其中一个重要的属性是document,它引用Document对象，后者表示显式在窗口（window对象）中的文档。Document对象有一些重要方法，比如getElementById()。
Window, Document, Element对象上有很多重要的属性和方法，后面会详细讲到。

[b]1. Web文档（document）里的javaScript[/b]
JavaScript程序可以通过Document对象和它包含的Element对象遍历和管理文档内容。它可以通过操纵CSS样式和类，修改文档内容的呈现；并且可以通过注册适当的事件处理程序来定义文档元素的行为。内容、呈现和行为的组合，叫做动态html或DHTML。

Web文档里应当少量使用JavaScript，因为Javascript真正的角色是增强用户的浏览体验，使信息的获取和传递更容易。

[b]2. Web应用里的Javascript[/b]
在web文档里使用的JavaScript DHTML特性在web应用中都会用到，对于web应用来说，除了内容，呈现和操作API之外，还依赖了WEB浏览器环境提供的更基础的服务。

要真正理解web应用，要认识到web浏览器渐渐变成了一个简易的操作系统。这样就可以把web应用定义为用Javascript访问更多浏览器提供的高级服务（如网络，图像和数据存储）的web页面。高级服务里最有名的是XMLHttpRequest对象，可以对HTTP请求编程来启用网络。Web应用使用这个服务从服务器获取新信息，而不用重新载入页面。类似这样的web应用通常叫做Ajax应用。

JavaScript在web应用里会比在web文档中显得更加重要，Javascript增强了web文档，但是涉及良好的文档需要在禁用javascript后还能继续工作。Web应用本质上就是javascript程序，它使用由web浏览器提供的操作系统类型的服务，并且不用期望他们在禁用浏览器脚本后还能正常工作。应用侧重和用户的交互响应。

从上面两节应该清楚web页面和web应用的区别。

[b]3. 在html里嵌入Javascript[/b]
在html里嵌入js有四种方法：
1） 内联，放置在<script></script>标签之间。
2） 放置在<script>标签的src属性指定的外部文件中。
3） 放置在html事件处理程序中，该事件处理程序由onclick或onmouseover这样的html属性指定。
4） 放在一个url里，url使用特殊的”javascript:url”协议。

最后一种方式现在很少使用了，内联脚本使用也越来越少了，最好的方式是放在src属性里（有个编程哲学叫“unobtrusive JavaScript”，主张内容html和行为[JavaScript代码]应当尽量地分离）。

[b]3.1 <script>元素[/b]
JavaScript代码可以以内联的形式出现在HTML文件里的<script></script>标签之间：
<script>
// javascript代码
</script>
在XHTML中（XHTML概念，与html的区别请参考：
[url]http://baike.baidu.com/link?url=2R-H0wPp72NiX8DrpmEgT1CmhPR1yl6iS5Cdgd0CJZGZ4-iX0R95ma7oqSCsseD9[/url]），<script>标签中的内容被当做其他内容一样对待。如果Javascript代码包含了”<”， ”>”或”&”字符，那么这些字符就会被解释成为XML标记，因此，如果使用XHTML,最好把所有的javascript代码放入一个CDATA部分：
<script>
<![CDATA[
// javascript代码
]]>
</script>

Javascript是web的原始脚本语言，[color=red]在默认情况下[/color]，假定<script>元素包含或引用javascript代码。如果使用非javascript脚本，则要使用type属性指定脚本的MIME类型：
<script type=”text/vbscript”>
// 这里是vb代码
</script>
[b]Type属性的默认值是”text/javascript”。[/b]

[color=red][b]另外：[/b][/color]当web浏览器遇到<script>元素，并且这个元素包含[color=red]不[/color]被浏览器识别的type属性时，它会解析这个元素但不会尝试执行或显示它的内容，也不会从指定的url中下载任何东西。这意味着可以使用<script>元素来嵌入任意的文本数据到文档里，只要用type属性指定一个不可执行的类型。获取数据的方法是用表示<script>元素的HTMLElement对象的text属性。注意，这些数据嵌入技术[b]只对内联脚本[/b]生效。

[b]3.2 外部文件中的脚本[/b]
<script>标签支持src属性，这个属性指定包含Javascript代码的文件的url，用法如下：
<script src=”../../scripts/utils.js”></script>
JavaScript文件的扩展名通常是以.js结尾的，它包含纯粹的javascript代码，其中既没有<script>标签，也没有其他html标签。

[img]http://dl2.iteye.com/upload/attachment/0091/4480/7b0c9b41-d83d-3e42-8ba8-cfaed89e9050.bmp[/img]


[b]3.3 Html中的事件处理程序[/b]
当脚本所在的html文件被载入浏览器时，这个脚本里的javascript代码只会执行一次。为了可交互，必须定义事件处理程序：web浏览器先注册js函数，并在之后调用它作为事件的响应。注册事件响应函数可以通过给html元素的属性赋值，比如onclick等实现。

[b]3.4 url中的javascript[/b]
在url后面跟一个”javascript:”协议限定符是另一种嵌入javascript代码到客户端的方式。这种特殊的协议类型指定url内容为任意字符串，这个字符串是会被javascript解释器运行的javascript代码。这段代码会被当做单独的一行对待，所以语句之间必须用分号隔开，而且注释要用/* */，不能用//，javascript代码的返回值作为javascript:url识别的资源，如果代码返回undefined，那么这个资源是没有内容的。这种用法可以使用在任何使用url的地方。比如：

<a href=”javascript: new Date().toLocaleTimeString();”>
What time is it?
</a>

部分浏览器会执行url里的代码并使用返回的字符串作为待显示新文档的内容，部分浏览器会执行js代码，但不会回显返回的内容（这时可以通过使用alert弹出显示的字符串）。

前面提到js返回undefined就不会回显任何内容，还可以[b]通过void操作符强制[/b]函数调用或给表达式赋予undefined值。如：

<a href=”javascript:void window.open(‘about:blank’);”>
打开一个窗口
</a>

[color=red][b]注意[/b][/color]：javascript url是web早起的遗物，通常应该避免在现代html里使用。

[b]4. javascript程序的执行[/b]
客户端javascript程序没有严格的定义，可以说javascript程序时由web页面中所包含的[b]所有javascript代码（上面提到的4中嵌入javascript方式）[/b]。所有这些单独的代码[color=darkred][b]共享同一个全局Window对象[/b][/color]。这意味着他们都可以看到相同的Document对象，可以共享相同的全局函数和变量的集合：[color=red]如果一个脚本定义了新的全局变量或函数，那么这个变量或函数会在脚本执行之后对任意javascript代码可见[/color]。上面这句话很重要。

如果web页面包含一个嵌入的窗体（通常使用<iframe>元素），嵌入文档中的javascript代码和被嵌入文档里的javascript代码会有不同的全局对象，它可以当做一个单独的javascript程序。如果外面和里面的文档来自于同一个服务器，那两个文档中的代码就可以进行交互。

[b]Js程序的执行有两个阶段。[/b][color=red]第一阶段[/color]，载入文档内容，并执行<script>元素里的代码（包括内联代码和src指定的外部脚本）。脚本通常按他们在文档里的出现[b]顺序执行[/b]，所有脚本的js代码都是从上往下。文档载入完成，并且所有脚本执行完后进入[color=red]第二阶段[/color]。这个阶段是异步的，由事件驱动。事件驱动阶段里第一个事件时load事件，指示文档已经完全载入，并可以操作（注意js的onload与jquery的ready的区别）。通常其他所有javascript代码都是在onload事件处理方法里定义。

[b]注意：核心javascript和客户端javascript都是一个[color=red]单线程执行模型[/color]，脚本和事件处理程序在同一个时间只能执行一个，没有并发性。[/b]

1. 如果想要程序响应一个事件，写一个函数，叫做“事件处理程序”、“事件监听器”或“回调”，然后注册这个函数，这样就会在事件发生时调用它，注册的时候函数并没有被调用。注册可以通过几种方式实现，
（1）[b]给html属性赋值[/b]。按照约定，事件处理程序的属性的名字是以“on”开始，后面跟着事件的名字。事件处理程序可以通过html属性来完成注册，但不鼓励将js代码和html内容混淆在一起。最简单的方法是把js函数赋值给目标对象的属性，类似：
Window.onload = function(){};
Document.getElementById(“button1”).onclick = function(){};
Function handleResponse(){}
Request.onreadystatechange = handleResponse;
还可以通过html元素属性赋值，后面讲到脚本化时会详细介绍。

（2）如果需要[b]为一个事件注册多个处理程序[/b]，大部分可以成为事件目标的对象都有一个叫做addEventListener()的方法，允许注册多个监听器。这个方法后面会介绍。
对于大部分浏览器的大部分事件来说，会把一个对象传递给事件处理程序作为参数，那个对象的属性提供了事件的详细信息，比如点击事件的对象会有一个属性说明鼠标的哪个按钮被单击。

客户端javascript程序还使用异步通知类型，这些类型往往不是事件，比如setTimeout()和setInterval()都是window对象的方法，是全局方法。前者可以设置在指定的毫秒数之后调用某个方法，后者是在指定的毫秒数后重复执行某个方法。可以用递归的方法让setTimeout达到setInterval的效果。

[b]5. 客户端javascript线程模型[/b]
Javascript语言核心并不包含任何线程机制，并且客户端javascript传统上也没有定义任何线程机制。单线程意味着浏览器必须在脚本和事件处理程序执行的时候停止响应用户输入，这意味着javascript脚本和事件处理程序不能运行太长时间。Html5定义了一种并发的控制方式，作为后台线程的“webworker”。Web worker是一个用来执行计算密集任务而不冻结用户界面的后台线程，但是web worker线程里的代码不能访问文档内容，不能和主线程或其他worker共享状态。

[b]6. 客户端javascript时间线[/b]
前面粗略的把javascript执行分为两个阶段，下面详细的解释javascript程序运行的事件线。

[img]http://dl2.iteye.com/upload/attachment/0091/4486/d5d14014-783d-3916-b9f6-d4e038e4aab4.bmp[/img]
[img]http://dl2.iteye.com/upload/attachment/0091/4484/92839cae-f435-3cc6-bbb4-8146623980d5.bmp[/img]


[b]7. 兼容性和互用性[/b]
Web浏览器时web应用的操作系统，但是web是一个存在各种差异性的环境。处理不兼容问题最简单的方法是使用类库。

[b]8. 同源策略[/b]
同源策略是对javascript代码能够操作哪些web内容的一条完整的[b]安全限制[/b]。当web页面使用多个<iframe>元素或打开其他浏览器窗口的时候，这一策略通常会发挥作用。这种情况下，同源策略负责管理窗口或窗体中的javascript代码以及和其他窗口或帧的交互。具体来说，[color=red]脚本只能读取和所属文档来源相同的窗口和文档的属性[/color]。
文档的来源包含协议、主机以及载入文档的url端口，从不同web服务器载入的文档具有不同的来源；通过同一主机的不同端口载入的文档具有不同的来源；使用http协议和https协议载入的文档具有不同的来源，即使他们来自同一个服务器。

[color=red][b]注意：脚本本身的来源和同源策略不相关，相关的是脚本所嵌入的文档的来源。[/b][/color]

[img]http://dl2.iteye.com/upload/attachment/0091/4488/819a7b50-c0c3-3d0c-80f1-0866e5127fe8.bmp[/img]


另外：在某些情况下同源策略显得太过严格了，所以引入了不严格的同源策略，可以放开一些要求，具体可以查看其它文档。

[b]9. 跨站脚本[/b]
跨站脚本（Cross-site scripting）,或者叫做XSS，这个术语用来表示一类安全问题，也就是攻击者向目标web站点注入html标签或者脚本。

[b]10. 客户端框架[/b]
一些web开发者发现基于客户端框架或类库来创建他们的web应用非常便捷。目前客户端框架很多，比如jQuery，Dojo, Prototype等。但是理解底层api会帮助我们成为更优秀的web开发者。