转载

JavaScript编程简介：DOM、AJAX与Chrome调试器-天码营

avascript 等于 ECMAScript + 宿主环境。宿主环境提供了一系列的全局对象，例如Node.js提供的require, console等；浏览器提供的DOM、BOM对象。本节课我们便来了解浏览器，熟悉客户端脚本开发和调试。

1.HTML中引入JS

Javascript 已经成为 Web 页面逻辑的默认脚本语言，可以直接在 HTML 文件中引入而不需表明脚本语言。Javascript 使用 <script> 标签引入，该标签可以出现在 <head> 中，也可以出现在 <body> 中。

在HTML4中， <script> 标签需要指定脚本类型： type="text/javascript" 。现在已经不必这样做了。JavaScript 是 HTML5 默认的脚本语言。

在HTML中引入Javascript有两种方式：内嵌JavaScript和外部JavaScript文件。

1.1 内嵌JavaScript

内嵌JavaScript（Inline JavaScript）是指在HTML中添加 <script> 标签，并将JavaScript代码直接写在标签的内容中。

<!-- embeded-script.html --> <html> <head> <script> console.log("I'll give you an alert!"); alert('This is an alert.'); </script> </head> <body> script is embeded in HTML </body> </html>

将上述代码另存为 embeded-script.html 并用浏览器打开它，你将会看到一个弹出窗口。

1.2 外部脚本

在介绍CSS时提到，为了分离HTML中的样式，我们把所有样式规则都移到独立的CSS文件中，然后在HTML中加以引入。这使得HTML更加容易理解和维护，同时也对搜索引擎、屏幕阅读器更加友好。

外部脚本也是一样的道理，除了在极少数情况下（少量的JavaScript、Google Analytics等），JavaScript总是应当作为外部资源来引入到HTML中。

为了方便维护和复用，我们常常将不同语言的代码分离到不同的文件。更重要的是，这样的组织方式会让你的代码更优雅！

只需要将 <script> 标签内容留空，并添加 src 属性：

// file: script.js console.log("I'll give you an alert!"); alert('This is an alert.');

<!-- file: import-script.html --> <html> <head> <script src="./script.js"></script> </head> <body> script.js has been imported. </html>

分别保存上述两个文件，置于同一目录下并打开HTML，会有相同的效果。

HTML为典型的流文档。即：自上而下分成一行一行, 并在每行中按从左至右依次排放元素。 正因为HTML流式文档的特征，其中的 <script> 也是按从上到下的顺序执行的。 HTML之所以采用这样的设计是因为互联网架设之初网络速度很有限，流式文档可以在载入的过程中就可以逐步地显示。**

2.DOM

文档对象模型（Document Object Model，DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。同样地，DOM 也是 W3C（万维网联盟）的标准。换句话将，DOM 定义了访问 HTML 和 XML 文档的标准。

我们关心的 HTML DOM 则是 DOM 的延伸，它包括 HTML 的标准对象模型、HTML 的标准编程接口、W3C DOM 标准。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

说了这么多，上述关于 DOM 和 HTML DOM 的概念或许在你有一定 Web 开发经历时才会理解。现在你可以认为 DOM 就是用来定义如何组织 HTML 结构、如何操作 HTML 元素的。当然，我们指的是从Javascript中操作 HTML 元素。

HTML DOM 将 HTML 文档视作树结构。这种结构就是我们常讲的 DOM 树：

如果你需要更多关于DOM的信息，请参考 W3C Schrool 的 DOM 教程。

2.1 节点、属性与内容

整个 HTML 文档是由树状组织的节点及其属性构成的。那么如何在Javascript中操作它呢？请看例子：

<!-- file: dom.html --> <html>   <body>     <ul id="fruits">       <li>Carrot</li>       <li>Apple</li>       <li>Banana</li>     </ul>     <script src='./dom.js'></script>   </body> </html>

// file: dom.js // 获得id为fruits的节点 var ul = document.getElementById('fruits'),     carrot = ul.firstElementChild; ul.removeChild(carrot); var pear = document.createElement('li'); // 设置pear的style属性 pear.setAttribute('style', 'color: red'); // 设置pear的内容 pear.innerHTML = 'pear' ul.appendChild(pear);

这段代码给出了一个简单的操作DOM元素过程。找到 id 为 fruits 的标签并删除其第一个子节点；然后创建一个新的元素 pear 并添加到 <ul> 中。更多 DOM 操作的方法请参考 W3C School: DOM 方法。

3.事件

正是 DOM 事件使得页面可以与用户进行交互，例如点击、移入、移出、滚动等。同样地，来个例子：

<!-- file: event.html --> <html> <head>   <script src='./event.js'></script> <head> <body>   <div id='block' onmouseover="over(this)" onmouseout="out(this)">     Mouse Over Me !    </div> </body> </html>

// file: event.js function over(obj) {   obj.innerHTML="mouse is over!!!" } function out(obj) {   obj.innerHTML="mouse is out..." } window.onload = function(){     var div = document.getElementById('block');     div.setAttribute('style', "background:lightgreen; width:200px;height:50px; margin: 50px;"); };

通过设置HTML元素的属性，可以设置其事件处理函数。我们在 <div> 上绑定了两个事件： mouseover （鼠标移入）和 mouseout （鼠标移出）。

那么 window.onload 是什么呢？注意到我们在 <head> 中引入了 event.js ，然而因为HTML是流式文档，在执行 event.js 时，<body>还没有得到渲染，此时直接 document.getElementById('block') 只会得到空。因此我们需要绑定窗口载入事件的处理函数，在窗口已经载入后，再进行 DOM 操作。

而 window 便是我们接下来要介绍的 BOM。

3.BOM

浏览器对象模型 (Browser Object Model，BOM) 使 JavaScript 有能力与浏览器“对话”。虽然尚无正式标准，但大多现代浏览器都实现了相同的交互方法和属性。其功能包括：操作浏览器窗口、浏览历史与导航、Cookie操作、各类提醒框等。

window 是浏览器中一个特殊的对象。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

3.1 导航

window.location 对象用于访问当前 URL，或者导航到新的页面。 location 有如下几个属性：

hostname ：web 主机的域名
pathname ：当前页面的路径和文件名
port ：web 主机的端口
protocol ：所使用的 web 协议（ http:// 或 https:// ）
href ：当前url，对它赋值可以实现重定向
reload() ：这是一个方法，调用后会刷新当前页面

除了 window.location 外，还有 window.history 提供浏览器历史的操作，常用的有：

history.back() ：与在浏览器点击后退按钮相同
history.forward() ：与在浏览器中点击按钮向前相同

更多浏览器导航的BOM对象可以参考 W3C School:location 、 W3C School:history 。

3.2 消息

弹出窗口对象使用简单方便，但因其交互方式生硬，通常只用于调试。可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

alert("some message") ：警告框,点击确定按钮才能继续进行操作；
confirm("something") ：确认框，点击确定或者取消才能继续进行操作，相应地，返回值为 true 或 false ；
prompt("something") ：提示框，输入内容，并点击确认或取消才能继续进行操作，相应地，返回输入内容，或者 null （如果取消）。

注意这些弹窗都会阻塞当前的Javascript进程。

console 我们已经很熟悉了，除了常用的 console.log() 外，还有 console.error() ， console.info() ， console.debug() 等用以日志分级的函数。

console 我们在Node.js的课程中已经多次使用，但console并非 ECMAScript 标准提供的对象。只是浏览器和 Node.js 都实现都提供了这样的全局对象而已。

4.AJAX

AJAX （Asynchronous JavaScript and XML，异步的 JavaScript 和 XML），是用来与服务器交换数据并更新部分网页的技术，避免了重新加载整个页面。

可以说AJAX是现代化的页面的标志，可用来创建动态性极强的 web 界面，现在我们来学习它！绝大多数浏览器都提供了 XMLHttpRequest 对象来完成 AJAX。为了理解 AJAX 是如何工作的，我们还是首先看一个案例：

这里有一个按钮，点击按钮将会向服务器请求当前时间，服务器返回后将时间显示在下面。每次点击按钮时间都会更新，但页面不会刷新。

为了实现上述的效果，首先需要在页面上显示类似这样的元素：

<input type='button' onclick='ajaxload()' value='Click Here to Get Data!'> <div id='result'></div>

点击按钮时将会调用 ajaxload() 函数，在该函数中进行 AJAX 请求：

function ajaxload(){   var result = document.getElementById('result');   // 创建一个 AJAX 请求   var xhr = new XMLHttpRequest();   // 打开URL：/date   xhr.open('GET', '/date', true);   // xhr 状态改变的处理函数   xhr.onreadystatechange=function(){     // 状态为4表示响应已就绪；状态码200表示成功的响应     if (xhr.readyState==4 && xhr.status==200)       // 显示响应文本       result.innerHTML=xhr.responseText;   }   xhr.send(); }

更多关于 readyState 的信息 ，参见 W3C School:ReadyState

上述的代码在 ajax.html 中。除此之外，我们还需要一个服务器来处理这些请求。当请求根目录 / 时，返回这个 HTML 文件；当请求 /date 时，返回当前时间。下面服务器代码 ajax.js ：

// file: ajax.js var http = require('http'),     fs = require('fs'),     html = fs.readFileSync('./ajax.html', 'utf8');  http.createServer(function (req, res) {   switch(req.url){     case '/':       res.writeHead(200, {'Content-Type': 'text/html'});       res.write(html)       break;     case '/date':       var date = new Date();       res.writeHead(200, {'Content-Type': 'text/plain'});       res.write(date.toString())       break;   }   res.end(); }).listen(1337, '127.0.0.1')

这段代码的意图应该比较容易理解吧？我们在下面的Chrome调试中，会详细地介绍这些代码产生的效果。

到这里，我们已经介绍了常用的几个浏览器全局变量。 window 下的全局变量还有：

innerHeight/innerWidth ：浏览器窗口内部高度/宽度；
navigator ：包含有关访问者浏览器的信息；
screen ：访问者屏幕的宽度，以像素计；
setTimeout()/clearTimeout() ：定时器/取消定时；
document.cookie ：现在多数网站使用Cookie来识别用户。

5.jQuery

一般的网站都会包含客户端脚本，这些脚本的数量甚至比服务器代码还要多，尤其是单页APP这种交互性优秀的站点。

jQuery 是一个javascript基础框架，极大地方便了客户端脚本的编写，这里只做简要介绍，此后的项目开发中，你会见到众多的jQuery代码。jQuery提供的API包括：

DOM操作：选择、读取和更改DOM元素的内容、属性；
AJAX：异步网络请求；
动画效果：滑动、延迟、淡入淡出等；
事件处理：键盘/鼠标事件、浏览器事件、表单事件等；
表单：表单的提交、表单的序列化、控件焦点变化等。

为了表现jQuery的强大，我们引入jQuery，使用jQuery重新实现 DOM 一节中的参考代码 dom.html 和 dom.js 。首先在 dom-jquery.js 之前引入 jquery.js ：

... <script src='./jquery.js'></script> <script src='./dom-jquery.js'></script> ...

// file: dom-jquery.js // 选择 id 为 fruits 的元素集合（该集合中只有一个元素，即 ul ） var $ul = $('#fruits'); // 找到该元素的第一个子元素（即 li）并将其移除 $ul.find(':first-child').remove(); // 创建一个 li 元素，并设置其 color 样式为 red，其内容为 pear var $pear = $('<li>')     .css('color', 'red')     .html('pear'); // 将 pear 添加到 ul 中 $ul.append($pear);

如果你是初识jQuery，可能会奇怪$是什么。其实$在javascript中是一个合法的标识符，也就是说 $ 可以用来命名变量。

jQuery 提供的全局变量： $ ，它称为 jQuery 对象。习惯上，通过 jQuery 选择符得到的集合一般命名为以$起始的字符串，例如 $ul 。

$ul 是一个集合，只不过它只有一个元素。如果使用 $li = $('li') ，那么该集合便会有3个元素，jQuery的所有方法都是对整个集合进行操作的。

6.Chrome 调试

Chrome和Firefox是Web开发中常用的调试工具，我们以Chrome为例。使用以下的任何一种方式都可以打开Chrome调试窗口：

在任何一个页面上，点击右键，选择“审查元素”；
快捷键 F12 ；
设置 -> 更多工具 -> 开发者工具。

打开的调试窗口中，有8个标签页。常用的有 Elements、Network、Sources、Console。

6.1 Elements

Elements 中，我们可以查看页面元素，在左侧可以点选某一个元素，该元素会在页面上高亮，同时在右侧显示该元素的所有样式。这些样式还是可编辑的。

6.2 Network

Network 中，可以查看当前页面的所有网络请求。比如 AJAX 一节中我们会发送多个请求，在 Network 标签页中，可以看到访问页面时的请求，以及点击按钮获取数据时的请求，如下图所示：

从上图中可以看到这两个请求：

第一个请求的URL是 localhost ，方法为 GET，响应状态码为 200，响应的 Content-Type 为 text/html ，响应大小为712B，文件大小为567B（其余为协议头所占空间），载入时间为13毫秒。
第二个请求 Content-Type 为 text/plain ，这是在服务器代码中决定的。另外其 initiator 即初始化该请求的代码，在首页（ index ）的第14行，我们这一行的代码为：