在介紹CSS時(shí)提到，為了分離HTML中的樣式，我們把所有樣式規(guī)則都移到獨(dú)立的CSS文件中，然后在HTML中加以引入。這使得HTML更加容易理解和維護(hù)，同時(shí)也對(duì)搜索引擎、屏幕閱讀器更加友好。

外部腳本也是一樣的道理，除了在極少數(shù)情況下（少量的JavaScript、Google Analytics等），JavaScript總是應(yīng)當(dāng)作為外部資源來引入到HTML中。

為了方便維護(hù)和復(fù)用，我們常常將不同語言的代碼分離到不同的文件。更重要的是，這樣的組織方式會(huì)讓你的代碼更優(yōu)雅！

只需要將 script.js has been imported.

分別保存上述兩個(gè)文件，置于同一目錄下并打開HTML，會(huì)有相同的效果。

  
    

      
Carrot
      
Apple
      
Banana
    
    
  

// file: dom.js
// 獲得id為fruits的節(jié)點(diǎn)
var ul = document.getElementById("fruits"),
    carrot = ul.firstElementChild;
ul.removeChild(carrot);
var pear = document.createElement("li");
// 設(shè)置pear的style屬性
pear.setAttribute("style", "color: red");
// 設(shè)置pear的內(nèi)容
pear.innerHTML = "pear"
ul.appendChild(pear);

中。更多 DOM 操作的方法請(qǐng)參考 W3C School: DOM 方法。
3.事件

正是 DOM 事件使得頁面可以與用戶進(jìn)行交互，例如點(diǎn)擊、移入、移出、滾動(dòng)等。同樣地，來個(gè)例子：

  


  

    Mouse Over Me ! 
  

// 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;");
};

通過設(shè)置HTML元素的屬性，可以設(shè)置其事件處理函數(shù)。我們?cè)?b>

上綁定了兩個(gè)事件：mouseover（鼠標(biāo)移入）和mouseout（鼠標(biāo)移出）。

那么window.onload是什么呢？注意到我們?cè)?b>中引入了event.js，然而因?yàn)镠TML是流式文檔，在執(zhí)行event.js時(shí)，還沒有得到渲染，此時(shí)直接document.getElementById("block")只會(huì)得到空。因此我們需要綁定窗口載入事件的處理函數(shù)，在窗口已經(jīng)載入后，再進(jìn)行 DOM 操作。

而window便是我們接下來要介紹的 BOM。

3.BOM

瀏覽器對(duì)象模型 (Browser Object Model，BOM) 使 JavaScript 有能力與瀏覽器“對(duì)話”。雖然尚無正式標(biāo)準(zhǔn)，但大多現(xiàn)代瀏覽器都實(shí)現(xiàn)了相同的交互方法和屬性。其功能包括：操作瀏覽器窗口、瀏覽歷史與導(dǎo)航、Cookie操作、各類提醒框等。

window 是瀏覽器中一個(gè)特殊的對(duì)象。所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。全局變量是 window 對(duì)象的屬性。全局函數(shù)是 window 對(duì)象的方法。

3.1 導(dǎo)航

window.location對(duì)象用于訪問當(dāng)前 URL，或者導(dǎo)航到新的頁面。location有如下幾個(gè)屬性：

hostname：web 主機(jī)的域名

pathname：當(dāng)前頁面的路徑和文件名

port：web 主機(jī)的端口

protocol：所使用的 web 協(xié)議（http:// 或 https://）

href：當(dāng)前url，對(duì)它賦值可以實(shí)現(xiàn)重定向

reload()：這是一個(gè)方法，調(diào)用后會(huì)刷新當(dāng)前頁面

除了window.location外，還有window.history提供瀏覽器歷史的操作，常用的有：

history.back()：與在瀏覽器點(diǎn)擊后退按鈕相同

history.forward()：與在瀏覽器中點(diǎn)擊按鈕向前相同
更多瀏覽器導(dǎo)航的BOM對(duì)象可以參考W3C School:location、W3C School:history。

3.2 消息

彈出窗口對(duì)象使用簡(jiǎn)單方便，但因其交互方式生硬，通常只用于調(diào)試?？梢栽?JavaScript 中創(chuàng)建三種消息框：警告框、確認(rèn)框、提示框。

alert("some message")：警告框,點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作；

confirm("something")：確認(rèn)框，點(diǎn)擊確定或者取消才能繼續(xù)進(jìn)行操作，相應(yīng)地，返回值為true或false；

prompt("something")：提示框，輸入內(nèi)容，并點(diǎn)擊確認(rèn)或取消才能繼續(xù)進(jìn)行操作，相應(yīng)地，返回輸入內(nèi)容，或者null（如果取消）。

注意這些彈窗都會(huì)阻塞當(dāng)前的Javascript進(jìn)程。

console我們已經(jīng)很熟悉了，除了常用的console.log()外，還有console.error()，console.info()，console.debug()等用以日志分級(jí)的函數(shù)。

console我們?cè)贜ode.js的課程中已經(jīng)多次使用，但console并非 ECMAScript 標(biāo)準(zhǔn)提供的對(duì)象。只是瀏覽器和 Node.js 都實(shí)現(xiàn)都提供了這樣的全局對(duì)象而已。

4.AJAX

AJAX（Asynchronous JavaScript and XML，異步的 JavaScript 和 XML），是用來與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的技術(shù)，避免了重新加載整個(gè)頁面。

可以說AJAX是現(xiàn)代化的頁面的標(biāo)志，可用來創(chuàng)建動(dòng)態(tài)性極強(qiáng)的 web 界面，現(xiàn)在我們來學(xué)習(xí)它！絕大多數(shù)瀏覽器都提供了 XMLHttpRequest 對(duì)象來完成 AJAX。為了理解 AJAX 是如何工作的，我們還是首先看一個(gè)案例：

這里有一個(gè)按鈕，點(diǎn)擊按鈕將會(huì)向服務(wù)器請(qǐng)求當(dāng)前時(shí)間，服務(wù)器返回后將時(shí)間顯示在下面。每次點(diǎn)擊按鈕時(shí)間都會(huì)更新，但頁面不會(huì)刷新。

為了實(shí)現(xiàn)上述的效果，首先需要在頁面上顯示類似這樣的元素：

點(diǎn)擊按鈕時(shí)將會(huì)調(diào)用ajaxload()函數(shù)，在該函數(shù)中進(jìn)行 AJAX 請(qǐng)求：

function ajaxload(){
  var result = document.getElementById("result");
  // 創(chuàng)建一個(gè) AJAX 請(qǐng)求
  var xhr = new XMLHttpRequest();
  // 打開URL：/date
  xhr.open("GET", "/date", true);
  // xhr 狀態(tài)改變的處理函數(shù)
  xhr.onreadystatechange=function(){
    // 狀態(tài)為4表示響應(yīng)已就緒；狀態(tài)碼200表示成功的響應(yīng)
    if (xhr.readyState==4 && xhr.status==200)
      // 顯示響應(yīng)文本
      result.innerHTML=xhr.responseText;
  }
  xhr.send();
}

更多關(guān)于 readyState 的信息，參見W3C School:ReadyState

上述的代碼在ajax.html中。除此之外，我們還需要一個(gè)服務(wù)器來處理這些請(qǐng)求。當(dāng)請(qǐng)求根目錄/時(shí)，返回這個(gè) HTML 文件；當(dāng)請(qǐng)求/date時(shí)，返回當(dāng)前時(shí)間。下面服務(wù)器代碼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")

這段代碼的意圖應(yīng)該比較容易理解吧？我們?cè)谙旅娴腃hrome調(diào)試中，會(huì)詳細(xì)地介紹這些代碼產(chǎn)生的效果。

到這里，我們已經(jīng)介紹了常用的幾個(gè)瀏覽器全局變量。window下的全局變量還有：

innerHeight/innerWidth：瀏覽器窗口內(nèi)部高度/寬度；

navigator：包含有關(guān)訪問者瀏覽器的信息；

screen：訪問者屏幕的寬度，以像素計(jì)；

setTimeout()/clearTimeout()：定時(shí)器/取消定時(shí)；

document.cookie：現(xiàn)在多數(shù)網(wǎng)站使用Cookie來識(shí)別用戶。

5.jQuery

一般的網(wǎng)站都會(huì)包含客戶端腳本，這些腳本的數(shù)量甚至比服務(wù)器代碼還要多，尤其是單頁APP這種交互性優(yōu)秀的站點(diǎn)。

jQuery 是一個(gè)javascript基礎(chǔ)框架，極大地方便了客戶端腳本的編寫，這里只做簡(jiǎn)要介紹，此后的項(xiàng)目開發(fā)中，你會(huì)見到眾多的jQuery代碼。jQuery提供的API包括：

DOM操作：選擇、讀取和更改DOM元素的內(nèi)容、屬性；

AJAX：異步網(wǎng)絡(luò)請(qǐng)求；

動(dòng)畫效果：滑動(dòng)、延遲、淡入淡出等；

事件處理：鍵盤/鼠標(biāo)事件、瀏覽器事件、表單事件等；

表單：表單的提交、表單的序列化、控件焦點(diǎn)變化等。

為了表現(xiàn)jQuery的強(qiáng)大，我們引入jQuery，使用jQuery重新實(shí)現(xiàn) DOM 一節(jié)中的參考代碼dom.html和dom.js。首先在dom-jquery.js之前引入jquery.js：

...


...

// file: dom-jquery.js
// 選擇 id 為 fruits 的元素集合（該集合中只有一個(gè)元素，即 ul ）
var $ul = $("#fruits");
// 找到該元素的第一個(gè)子元素（即 li）并將其移除
$ul.find(":first-child").remove();
// 創(chuàng)建一個(gè) li 元素，并設(shè)置其 color 樣式為 red，其內(nèi)容為 pear
var $pear = $("
")
    .css("color", "red")
    .html("pear");
// 將 pear 添加到 ul 中
$ul.append($pear);

如果你是初識(shí)jQuery，可能會(huì)奇怪$是什么。其實(shí)$在javascript中是一個(gè)合法的標(biāo)識(shí)符，也就是說$可以用來命名變量。

jQuery 提供的全局變量：$，它稱為 jQuery 對(duì)象。習(xí)慣上，通過 jQuery 選擇符得到的集合一般命名為以$起始的字符串，例如 $ul。

$ul是一個(gè)集合，只不過它只有一個(gè)元素。如果使用 $li = $("li")，那么該集合便會(huì)有3個(gè)元素，jQuery的所有方法都是對(duì)整個(gè)集合進(jìn)行操作的。

6.Chrome 調(diào)試

Chrome和Firefox是Web開發(fā)中常用的調(diào)試工具，我們以Chrome為例。使用以下的任何一種方式都可以打開Chrome調(diào)試窗口：

在任何一個(gè)頁面上，點(diǎn)擊右鍵，選擇“審查元素”；

快捷鍵F12；

設(shè)置 -> 更多工具 -> 開發(fā)者工具。

打開的調(diào)試窗口中，有8個(gè)標(biāo)簽頁。常用的有 Elements、Network、Sources、Console。

6.1 Elements

Elements 中，我們可以查看頁面元素，在左側(cè)可以點(diǎn)選某一個(gè)元素，該元素會(huì)在頁面上高亮，同時(shí)在右側(cè)顯示該元素的所有樣式。這些樣式還是可編輯的。

6.2 Network

Network 中，可以查看當(dāng)前頁面的所有網(wǎng)絡(luò)請(qǐng)求。比如 AJAX 一節(jié)中我們會(huì)發(fā)送多個(gè)請(qǐng)求，在 Network 標(biāo)簽頁中，可以看到訪問頁面時(shí)的請(qǐng)求，以及點(diǎn)擊按鈕獲取數(shù)據(jù)時(shí)的請(qǐng)求，如下圖所示：

從上圖中可以看到這兩個(gè)請(qǐng)求：

第一個(gè)請(qǐng)求的URL是localhost，方法為 GET，響應(yīng)狀態(tài)碼為 200，響應(yīng)的Content-Type為text/html，響應(yīng)大小為712B，文件大小為567B（其余為協(xié)議頭所占空間），載入時(shí)間為13毫秒。

第二個(gè)請(qǐng)求Content-Type為text/plain，這是在服務(wù)器代碼中決定的。另外其initiator即初始化該請(qǐng)求的代碼，在首頁（index）的第14行，我們這一行的代碼為：

 xhr.send();

text/html指示瀏覽器這是一個(gè)HTML文件，瀏覽器便會(huì)把它渲染為一個(gè)Web文檔。如果將Content-Type設(shè)置為text/plain，瀏覽器則會(huì)直接顯示HTML源碼。

不僅如此，我們還可以點(diǎn)擊第二個(gè)請(qǐng)求來查看其詳情，如下圖：

右側(cè)詳情窗口中有5個(gè)標(biāo)簽頁，常用的是 Headers、Preview、Response。其中 Headers 中給出了請(qǐng)求和響應(yīng)的所有頭字段；Response 則給出了響應(yīng)體的內(nèi)容，這里是：

Mon Mar 30 2015 21:32:17 GMT+0800 (CST)

它就是xhr.responseText的值。

6.3 Sources

Sources標(biāo)簽頁下，可以查看當(dāng)前網(wǎng)站的HTML，及其引入的所有CSS、Javascript文件。重要的是，在Javascript文件中的任何一行，我們都可以設(shè)置斷點(diǎn)，腳本將會(huì)在這一行停下來。觸發(fā)斷點(diǎn)時(shí)，我們可以查看斷點(diǎn)所在的作用域內(nèi)的所有變量的值，如下圖所示：

右側(cè)窗格顯示了局部變量、監(jiān)視變量以及調(diào)用棧。右側(cè)窗格的上方有繼續(xù)、下一步、進(jìn)入函數(shù)、跳出函數(shù)、禁用斷點(diǎn)等按鈕。

還可以切換至Console，在當(dāng)前作用域下執(zhí)行任何Javascript語句。

6.4 Console

Console與Node.js的控制臺(tái)類似，這是一個(gè)Javascript的交互式環(huán)境。在這里可以執(zhí)行任何Javascript語句，如圖：

上圖中我們首先執(zhí)行了：

new Date()

控制臺(tái)中輸出了這個(gè)語句的返回值。接著執(zhí)行：

console.error("test error")

我們便在控制臺(tái)看到了一則錯(cuò)誤，其內(nèi)容為test error。

在斷點(diǎn)觸發(fā)時(shí)（例如上圖中的情況），在控制臺(tái)可以訪問當(dāng)前作用域的任何對(duì)象，讀取或設(shè)置它們的值，甚至在這里調(diào)用作用域內(nèi)的任何函數(shù)。如圖便是輸出了上述斷點(diǎn)觸發(fā)時(shí)的xhr對(duì)象。

版權(quán)聲明

本文由Harttle創(chuàng)作，轉(zhuǎn)載需署名作者且注明文章出處

GPU云服務(wù)器 云服務(wù)器 天碼營(yíng) javascript dom 編程藝術(shù) javascript dom編程藝術(shù) javascript的dom編程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87725.html

• 上一篇：企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)-imooc
• 下一篇：【JavaScript】【對(duì)象】更好地理解對(duì)象繼承