客户端Javascript涵盖在本系列的第二部分第10章，主要讲解javascript是如何在web浏览器中实现的，这些章节介绍了大量的脚本宿主对象，这些对象可以表示浏览器窗口、文档树的内容。这些章节同样涵盖重要的web应用所需要的网络编程API、本地存储和检索数据、画图等。主要包含内容有以下章节：
web浏览器中的javascript / window对象 / 脚本化文档 / 脚本化CSS / 事件处理 / 校本化http / jQuery类库 / 客户端存储 / 多媒体和图形编程 / HTML5API
本书的第一部分介绍了javascript语言核心，第二部分开始转向web浏览器中的javascript讨论。迄今为止，我们的大部分例子是合法的javascript代码，带是没有特定的上下文，也就是说它们运行在不明的环境总。本章节提供了一个可以允许javascript上下文。
在开始讨论javascript之前，考虑下web浏览器是怎么呈现页面的，其静态页面称为文档(document),相对于文档来说，洽谈web页面甘江更像是应用。如果需要的话，这些页面可以载入新的新想，因此看起来图形化，而非文本化，并且它们可以进行离线操作，以及保存数据倒本地，以便再次访问进行状态恢复。此外，还有其它web页面处于文档和应用的中间，结合了两者的特性。
本章以客户端javascript概述开始，包括一个简单的例子，以及对javascript如何在web文档和web应用中角色讨论。概述内容还介绍了那些内容会在后续章节中提到，接下来会详细解释javascript代码在html文档中如何嵌入，然后介绍兼容性、可访问性和安全性等问题。
1.客户端javascript
window对象是所有客户端javascript特性和API的主要接入点。它表示web浏览器的一个窗口或窗体，并且可以用window表示来引用它。window对象定义了一些属性，比如：Location对象的location属性，Location对象指定当前显示在窗口的URL，并允许脚本往窗口里载入新的URL。
//设置location属性，跳转至新的页面 window.location.href = "http://www.baidu.com" //location.href = "http://www.baidu.com"
window对象还定义了一些方法，比如alert(),可以弹出一个对话框用来显示一些信息，还有setTimeout(),可以注册一个函数，在给定的一些时间内触发一个回调
setTimeout(function(){alert("5秒跳转"),1000}); setTimeout(function(){location.href = "http://www.baidu.com"},5000)注意上面的代码并没有显式的使用window 属性。在客户端javascript中，window对象 也是全局对象。这意味着window对象处于作用域链顶部，它的属性和方法实际上是全局变量和全局函数。window对象有一个自身引用的属性，叫做window。如果需要引用窗口对象本身，引用引用这个属性。但是如果只想引用全局窗口对象的属性，通常不需要用到window。
window对象还定义了很多其他重要的属性、方法和构造函数，参见12章查看完整细节。
window对象中一个重要的属性是document,它引用Document对象，后者表示显示在窗口中的文档。Document有一些重要的方法，比如getElementByid()，可以基于元素的id返回单一的文档元素，（表示html标签的一对开始/结束标记，以及它们之间所有的内容）：
//查找id="timestamp"元素 var timestamp = document.getElementById("timestamp")getElementById()返回的Element对象有其它重要的属性和方法，比如允许脚本获取它的内容，设置属性值等：
//如果元素为空，往里边插入的哪个区日期和事件 if (timestamp.firstChild == null) timestamp.appendChild(document.createTextNode(new Date().toString()));
查询、遍历和修改文档将在12章做介绍。
每个Element对象都有style和className属性，允许脚本指定元素css样式，或修改元素上的css类名，设置这些css相关的属性会改变文档元素的呈现：
timestamp.style.backgroundColor="red";
指定样式className
//或者修改类，让样式指定具体内容 timestamp.className = "heightlight TopDarkNav"
14章会讲解style和className属性和其它css编程技术
window、Document和Element对象上另一个重要的属性集合是事件处理程序相关的属性。可以在脚本中为止绑定一个函数，这个函数会在某个事件发生时以异步的方式调用。
事件处理程序可以让javascript代码修改窗口，文档和组成文档的元素的行为。事件处理程序是以单词"on"开始的，用法如下：
//当用户单击元素时，更新它的内容 timestamp.onclick = function(){this.innerHTML = new Date().toDateString();}window对象的onload对象处理程序是最重要的事件处理程序之一。当显示在文档内的内容文档且可以操作时触发。javascript代码通常封装在onload事件处理程序里。15章会详细讲述事件。
下面的例子是onload处理程序的演示，并展示了客户端javascript的实例代码，包括查询文档元素，修改css类和定义事件处理程序。注意代码里的函数是在另一个函数里定义的。因为事件处理程序的广泛使用，是的嵌套函数在客户端javascript中非常普遍。
<head> <meta charset="utf-8"> <style type="text/css"> .reveal * { display: none; } .reveal *.handle { display: block; } </style> <script type="text/javascript"> window.onload = function() { //所有页面逻辑加载完毕后启动 var element = document.getElementsByClassName("reveal"); for (var i = 0; i < element.length; i++) { //对每个元素进行遍历 var elt = element[i]; //找到容器中的“handle”元素 var title = elt.getElementsByClassName("handle")[0]; addRevealHandler(title, elt); console.log(elt.className); } function addRevealHandler(title, elt) { title.onclick = function() { if (elt.className == "reveal") elt.className = "revealed"; else if (elt.className == "revealed") elt.className = "reveal"; } } }; </script> </head> <body> <div class="reveal"> <h1 class="handle">文字title(Click Here)</h1> <p>文字内容</p> </div> </body>在本章的概要介绍到了，一些web页面感觉上像文档，而另一些则像应用。接下来的两节探讨javascript在两种页面类型里是如何使用的
i.web文档里的javascript
javascript程序可以通过Document对象和它包含的Element对象遍历和管理文档内容。它可以通过操作css样式和类，修改文章内容的呈现。并且可以通过注册事件的处理辰星来定义文档的元素行为。内容、呈现和行为的组合叫动态HTML或者DHTML，会在13-17章里介绍到
javascript可以增强用户的体验：比如以下方式：
ii.web应用里的javascript
在web文档库使用的javascript DHTML特性在web应用里都会用到，对于web应用来说，除了内容、呈现和操作api之外，还依赖web浏览器环境提供更基础的服务。‘
要真正的了解web应用，需要先认识web浏览器已经有很好的发展了，现在不仅仅是显示温度的角色了，而已经变成简易的操作系统。操作系统定义很多底层的API、提供绘制图形，保存文件等功能。web浏览器也定义了底层API（16章）、保存数据（18章），和绘制图形（19章）。
谨记web浏览器是简单的操作系统的概念，这样就可以把web定义问用javascript访问更多浏览器提供的高级服务（比如网络、图形和数据存储）的web页面。高级服务里最著名的是xmlHTTPRequest，可以对HTTP请求编程来启动网络。web里是固体这个从服务器获取新信息，而不用从新载入页面。类似这样的web应用通常胶Ajax应用，Ajax构成了web2.0的脊梁。xmlhttpRequest会在16章详细介绍。
HTML5标准和相关标准为web应用定义了很多其他重要的API，如地理位置信息，历史管理和后台线程。使用这些API后，会开启一场web应用的功能革命。这些内容在20章会介绍。当然，javascript在web里的应用比在文档里显得更重要。javascript增强了web文档。但是良好的设计的文档需要在禁用了javascript后还能继续工作。web应用的本质就是javascript程序。
2.在html嵌入javascript
接下来小节会介绍4中javascript嵌套技术。但是，值得注意的是，html事情处理程序属性和javascript：url这两种方式现代的javascript代码里已经很少使用。内联脚本（没有src）也比以前用的更少了。主张内容(html)和行为(javascript)代码应该尽量保持分离。根据这个编程哲学，javascript最好通过<script>的src属性嵌入到html文档里
i.<script>元素
<script> //javascript代码 </script>
在XHTML中<script>标签的内容被当做其它内容一样对待。如果javascript代码包含了"<"或"&"字符，那么这些字符会被解释成xml标记，因此，如果使用XHTML，最好把所有的javascript代码放到一个CDATA部分里
<script><![CDATA[ //这里是javascript代码 ]]></script>
下面的例子展示了一个简单的javascript程序。注释解释了这个辰星是做什么的。主要演示javascript代码以及css样式表是如何嵌入到html文件里。
<script type="text/javascript"> //定义一个函数显式当前时间 function displayTime() { var elt = document.getElementById("clock"); var now = new Date(); elt.innerHTML = now.toLocaleTimeString(); //显式它 setTimeout(displayTime, 1000); } window.onload = displayTime; </script> <body> <div id="clock"> </div> </body>ii.外部文件中的脚本
外部文件中的脚本它的用法如下：
<script src="unit.js"></script>
javascript文件一般以.js结尾，它包含纯粹的javascript代码
使用src属性时，<script></script>标签之间的任何内容都会忽略掉，如果需要，可以在此处不错说明文档和版权信息，但要注意，如果有任何非空格或javascript的注释文本出现在此，html5校验器会报错。
我们通常看到以下代码
<script src="unit.js"> config = {...}; </script>这段戴拿定义了一些配置项，有unit.js来读取,这是一种将页面传入库文件的方法，在javascript库中的开发中十分常见，其中<script></script>之间是一段纯文本，在unit.js读取时这段文本然后执行一次，浏览器不会自动执行script>中的代码。
下面是一些使用src属性的javascript的优点
我们通常看到以下代码
从服务器之外的服务器里载入脚本有重要的安全隐患，6.ii节介绍的同源安全策略会阻止一个域文档的javascript和另外一个域的内容进行交互。但是，要注意和脚本本身的来源并没有关系，而是和脚本嵌入的文档来源有关系。因此，同源策略和并不适合用在以下的情况，即便代码和文档有不同的来源，javascript代码也可以和它嵌入的文档进行交互，当在页面中用src脚本时，就给了脚本作者（这段脚本域的网站管理员）完全控制web页面的权限。
iii.脚本类型javascript是web元素脚本语言，而在默认的情况下，假定<script></script>包含或引用javascript代码，如果使用不标准脚本语言，就必须用type指定MIME类型：
<script type="text/vbscript"> //这里是VBScript代码 </script>
type的默认属性是"text/javascript",如果需要，可以显式的指定此类型，但完全没必要。老的浏览器在标记上用language代替type标记，这样的情况现
新闻热点
疑难解答
