第2章
世界上最流行的編程語言——JavaScript

◎本章教學微視頻：12個　18分鐘

學習指引

在程序開發過程中，總是需要對代碼程序不斷地調試以及優化才能達到理想的效果，JavaScript也同樣需要一套有力的開發工具。本章將詳細介紹與JavaScript相關工具的應用，主要內容包括JavaScript常用的編寫工具、開發工具與調試工具。

重點導讀

• 掌握JavaScript編寫工具的使用。
• 掌握JavaScript開發工具的使用。
• 掌握JavaScript調試工具的使用。

2.1　JavaScript的編寫工具

JavaScript是一種腳本語言，代碼不需要編譯成二進制，而是以文本的形式存在，因此任何文本編輯器都可以作為其開發環境。通常使用的JavaScript編輯器有記事本、UltraEdit和Dreamweaver。

2.1.1　系統自帶編輯器記事本

記事本是Windows系統自帶的文本編輯器，也是最簡潔方便的文本編輯器。由于記事本的功能過于單一，所以要求開發者必須熟練掌握JavaScript語言的語法、對象、方法和屬性等。這對于初學者是極大的挑戰，因此，不建議使用記事本。但是由于記事本簡單方便、打開速度快，所以常用來進行局部修改，如圖2-1所示。

2.1.2　UltraEdit文本編輯器

UltraEdit是能夠滿足一切編輯需要的編輯器。UltraEdit是一套功能強大的文本編輯器，可以編輯文本、十六進制數據、ASCII碼，可以取代記事本，內建英文單詞檢查，C++及VB指令突顯，可同時編輯多個文件，而且即使開啟很大的文件速度也不會慢。軟件附有HTML標簽顏色顯示、搜尋替換以及無限制地還原功能，一般大家喜歡用其來代替記事本的文本編輯器，如圖2-2所示。

2.1.3　Dreamweaver開發工具

Adobe公司的Dreamweaver是一個非常優秀的網頁開發工具，其用戶界面也非常友好，深受廣大用戶的喜愛。Dreamweaver編輯窗口如圖2-3所示。

提示：除了上述編輯器外，還有很多種編輯器可以用來編寫JavaScript程序，如Aptana、1st JavaScript Editor、JavaScript Menu Master、Platypus JavaScript Editor、SurfMap JavaScript、JavaScript Editor等。“工欲善其事，必先利其器。”選擇一款適合自己的JavaScript編輯器，可以讓編輯工程事半功倍。

2.2　JavaScript常用的開發工具

由于JavaScript缺少合適的開發工具的支持，編寫JavaScript程序，特別是超過500行以上的JavaScript程序，就會變得非常復雜，若在代碼中不小心多輸入了一個“(”或“{”，則整段代碼就有可能無法運行。本節就來介紹幾款常用的JavaScript開發工具。

2.2.1　附帶測試的開發工具——TestSwarm

TestSwarm是Mozilla實驗室推出的一個開源項目，旨在為開發者提供在多個瀏覽器版本上快速、輕松測試自己JavaScript代碼的方法。

目前，TestSwarm正在測試許多開發人員都依靠的諸多流行的開源JavaScript庫，其中包括jQuery、YUI、Dojo、MooTools和Prototype等。如果用戶想在自己的項目中使用TestSwarm，可以下載并在自己的服務器上安裝TestSwarm。圖2-4所示為TestSwarm的工作界面。

2.2.2　半自動化開發工具——Minimee

在互聯網領域，速度就是一切。這意味著當面對CSS和JavaScript文件的時候，文件大小是一個重要的要素。Minimee可以自動將文件最小化并對其進行組合，幫助用戶化繁為簡。圖2-5所示為Minimee的工作界面。

2.2.3　輕松建立JavaScript庫的開發工具——Boilerplate

Boilerplate是基于HTML/CSS/JavaScript的一個快速、健壯和面向未來的網站模板。經過多年的迭代開發，功能更加完善，包括跨瀏覽器的正常化顯示、性能優化、Ajax跨域通信和Flash處理等。這個模板包含一個.htaccess配置文件，通過該配置文件可以設置Apache緩存、網站播放HTML5視頻、使用@font-face和允許使用gzip等。圖2-6所示為Boilerplate的工作界面。

它同樣可以工作在手機瀏覽器，它擁有iOS、Android、Opera所支持的標簽和CSS骨架。Boilerplate有以下特性。

• 支持HTML5。
• 跨瀏覽器兼容，包括對IE 6的支持。
• 高速緩存和壓縮規則，最佳實踐配置。
• 移動瀏覽器優化。
• 單元測試套件JavaScript分析。
• 移動與特定CSS規則的iOS和Android的瀏覽器支持。

2.3　JavaScript常用的調試工具

JavaScript調試器能幫忙找出JavaScript代碼中的錯誤。要想成為一名高級JavaScript調試員，你需要知道你可用到的一些調試器、典型的JavaScript調試工作流程和高效調試的核心條件。

當調查一個特定問題時，通常將遵循以下過程。

（1）在調試器的代碼查看窗口找出相關代碼。

（2）在覺得可能發生問題的地方設置斷點。

（3）若是行內腳本，則在瀏覽器中重載頁面；若是一個事件處理器則單擊按鈕，以再次運行腳本。

（4）一直等到調試器暫停執行并通過代碼。

（5）查看變量值。例如，查看那些本該包含一個值卻顯示未定義的變量，或者希望返回true卻返回false時。

（6）如果需要，使用命令行對代碼進行求值，或者為測試改變變量。

（7）通過學習導致錯誤情況發生的那段代碼來找出問題所在。

這里介紹5個最常用的JavaScript調試工具。

2.3.1　調試工具——Drosera

Drosera可以調試任何基于WebKit的應用程序，Drosera的調試界面如圖2-7所示。

2.3.2　規則的調試工具——Dragonfly

Dragonfly可以高亮顯示語法和斷點，搜索功能強大，可以搜索當前選擇的腳本，可以用文本、正則表達式來加載所有的JavaScript文件。Dragonfly的調試界面如圖2-8所示。

2.3.3　Firefox的集成工具——Firebug

Firefox集成了Firebug，它提供了一個豐富的Web開發工具，可以在任何網頁編輯、調試和監控CSS、HTML與JavaScript。Firebug的調試界面如圖2-9所示。

2.3.4　前端調試利器——DebugBar

在IE 8之前，在IE中的調試只有alert命令，雖然可以在Visual Studio中進行調試，但過程比較麻煩。一個比較好的工具就是DebugBar，不過該工具與Firebug比起來，還是有很大差距的。

DebugBar雖然可以與Firebug一樣獲取頁面元素、做源代碼調試和CSS調試，但是，其功能實在有限。DebugBar工作界面如圖2-10所示。

2.3.5　支持瀏覽器多的工具——Venkman

Venkman是Mozilla的JavaScript Debugger代碼名稱，可以在用戶界面上和控制臺命令中使用斷點管理、調用棧檢查、檢查變量/對象等功能，可以讓用戶以最習慣的方式調試。

Venkman可以從http://www.hacksrus.com/~ginda/venkman/下載，然后用Firefox打開得到的xpi文件，它就會自動安裝，重啟Firefox，選擇“工具”→JavaScript Debugger命令啟動Venkman，其工作界面如圖2-11所示。

從工作界面中可以看出其窗口布局很清晰，Loaded Scripts中顯示當前可用的JavaScript文件，單擊文件旁邊的加號，就會打開一個詳細列表，列出該文件中的所有函數。

代碼中的斷點跟蹤是調試工作中的重點，Venkman支持兩種斷點模式，分別是硬（Hard）斷點和將來（Future）斷點。將來斷點設置在函數體之外的代碼行上，一旦這些代碼行加載到瀏覽器上就會立即執行。

下面給出一個實例，其中有一個JavaScript文件DebugSample.js和一個調用頁面CallPage.html。

用Firefox打開CallPage.html，啟動Venkman，在所需的代碼行上設置一個斷點，單擊代碼行左側的邊欄即可。每次單擊這一行時，這行就會在以下3種間輪流切換：無斷點、硬斷點、將來斷點。硬斷點由一個紅色的B指示，將來斷點由橙色的F指示（注：此處界面在實際操作過程中會顯示為相應的彩色，因本書是黑白印刷，無法正常顯示出顏色，讀者可在實際界面或者相關視頻中看到。余同）。函數體外的代碼行只能切換為無斷點和將來斷點。可以在“var y = "hello";”這一行設個斷點，如圖2-12所示。

然后單擊頁面中的test按鈕，可以看到在斷點處停止了，接下來的操作想必都知道了，它和其他的Debugger用法相同。

下面看一下Venkman的另一個強大特性。右擊一個斷點，在彈出的快捷菜單中選擇Breakpoint Properties（斷點屬性）命令，如圖2-13所示。

這樣會打開Breakpoint Properties對話框，允許用戶修改斷點的行為，如圖2-14所示。

這個窗口的強大之處在于“When triggered, execute…”（當觸發時，執行…），選中這個復選框，會置一個文本框有效，可以編寫JavaScript代碼，每次遇到斷點時都會執行此代碼，向這個定制腳本傳遞的參數名為_count_，它表示遇到斷點的次數。下面的4個行為中也以Stop if result is true的功能最強大，它意味著只有當定制代碼的返回值為true時，斷點才會暫停執行。

2.4　編寫第一個JavaScript程序——Hello，JavaScript!

在記事本中編寫JavaScript程序的方法很簡單，只需打開記事本文件，在打開的窗口中輸入相關JavaScript代碼即可。

【例2-1】（實例文件：ch02\Chap2.1.html）在記事本中編寫JavaScript的腳本，打開記事本文件，在窗口中輸入如下代碼：

將記事本文件保存為Chap2.1.html格式的文件，然后再使用IE瀏覽器打開即可瀏覽最后的效果，如圖2-15所示。

2.5　就業面試技巧與解析

2.5.1　面試技巧與解析（一）

面試官：如果當前瀏覽器不支持JavaScript，如何做才能不影響網頁的美觀？

應聘者：現在瀏覽器種類、版本繁多，不同瀏覽器對JavaScript代碼的支持度不一樣。為了保證瀏覽器不支持的這部分代碼不影響網頁的美觀，可以使用HTML注釋語句將其注釋，這樣便不會在網頁中輸出這些代碼。

2.5.2　面試技巧與解析（二）

面試官：使用JavaScript編寫好應用程序后，你認為還需要對JavaScript代碼進行優化處理嗎？

應聘者：對于我個人來說，優化處理是必要的，而且主要優化的是腳本程序代碼的下載時間和執行效率，因為JavaScript運行前不需要進行編譯而直接在客戶端運行，所以代碼的下載時間和執行效率直接決定了網頁的打開速度，從而影響客戶端的用戶體驗效果。