本節書摘來自異步社群《jquery與javascript入門經典》一書中的第1章，第1.2節，作者：【美】brad dayley著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
簡要地介紹動态web程式設計後，該切入正題，為編寫jquery和javascript準備好開發環境了。
編寫jquery和javascript項目時，開發環境至關重要。開發環境應具有如下特點。
易于使用的ide：ide提供了文本編輯器，讓您能夠以最簡單的方式修改代碼。請選擇您用起來很順手且支援html、css、javascript和jquery的ide。
用于開發的web伺服器：絕不要直接在用于生産的web伺服器上進行開發（雖然大多數人都會偶爾這樣做）。要測試腳本和互動，必須有web伺服器。
用于開發的web浏覽器：同樣，應針對您最熟悉或最常用的浏覽器進行開發。為幫助查找和修複腳本的問題，需要在浏覽器中啟用調試工具。
組織有序的項目：組織項目、目錄和檔案名時，應考慮擴容。web項目包含大量檔案和目錄時，要重新調整其結構很難。過多的檔案或令人迷惑的檔案名可能導緻項目管理起來既麻煩又困難。
1.2.1 搭建web開發環境
搭建web開發環境涉及三個步驟。首先，需要安裝一款ide，它提供了建立和編輯代碼的工具。其次，需要在浏覽器中添加并啟用javascript調試工具。第三，需要搭建用于開發的web伺服器，供您用來測試腳本。下面引領您完成所有這些任務。
1．安裝web開發ide
對javascript開發而言，ide最為重要。ide提供了單一的使用者界面，讓您能夠完成各種web應用編寫任務。實際上，可使用任何文本編輯器來編寫html、css、javascript和jquery代碼，但您将發現易于使用的ide可極大地提高效率。
市面上有多款這樣的ide，有些是開源的，有些價格不菲，請根據需要選擇最合适的那款。選擇的ide應支援代碼自動完成和錯誤檢查，因為這兩項功能可節省大量時間。
可供選擇的ide包括dreamweaver、visual studio以及其他幾款。然而，eclipse包含大量插件并支援擴充。就jquery和javascript而言，可考慮使用aptana studio，因為它易于安裝和使用，且提供了mac、windows和linux版。
（1）安裝aptana studio
本書使用aptana studio，是以這裡将詳細介紹其安裝和配置步驟，但本書介紹的所有編輯和調試概念也适用于其他ide。
您應選擇standalone version并指定您要安裝到哪種作業系統上，如圖1.7所示。下載下傳安裝程式後，執行它并按說明操作；安裝過程非常簡單。
安裝aptana studio後，啟動它。首次啟動時，需要指定工作區的位置。工作區是存儲項目和檔案的地方，請選擇一個友善管理的位置。
（2）配置aptana studio
安裝aptana studio後，還需執行下面幾個配置步驟。
1．選擇菜單commands>bundle development>install bundle，再從束清單（bundles list）中選擇jquery，并單擊ok按鈕。
2．選擇菜單windows>preferences，以打開如圖1.8所示的preferences（首選項）對話框。在preferences對話框中，選擇aptana studio>themes（如圖1.8所示），再從下拉清單中選擇一個主題。主題将設定視窗、菜單、標明内容和代碼元素的顔色和字型。請選擇最适合您的主題。在這個對話框中，還可對主題進行定制。
注意：在這個對話框中，還可導入和導出主題。本書的配套網站提供了一個名為aptanatheme.tmtheme的檔案，它就是編寫本書時使用的主題。您可在這個對話框中導入這個主題。
3．選擇左下角的頁籤outline，并将其拖放到頁籤app explorer旁邊。這讓您能夠更好地檢視腳本的大綱，并關閉底部不需要的頁籤snippets和sample。最終的結果應類似于圖1.9所示。
4．嘗試使用各種首選項和菜單，以熟悉界面。
至此，aptana studio便配置好了，可以開始建立項目了。
2．配置浏覽器開發工具
安裝并配置aptana studio後，便可配置浏覽器以調試javascript了。本節将介紹在三款主要浏覽器中啟用javascript調試的步驟。選擇使用哪款浏覽器無關緊要，本書使用的是firefox。
firefox提供的使用者體驗最為一緻且最為可靠。另外，firefox的跨平台支援也最為一緻。
（1）在firefox中安裝firebug
按如下步驟在firefox中啟用javascript調試。
1．打開firefox。
2．選擇菜單tools（工具）> add-ons（附加元件）。
3．在右上角的搜尋框中輸入firebug以搜尋firebug，再單擊install（安裝）按鈕安裝它。
4．在右上角的搜尋框中輸入firequery以搜尋firequery，再單擊install（安裝）按鈕安裝它。firequery擴充firebug，使其也支援jquery。
5．重新啟動firefox後，單擊firebug按鈕以顯示firebug控制台，如圖1.10所示。
（2）在internet explorer中啟用開發人員工具
請按如下步驟在internet explorer中啟用javascript調試。
1．打開internet explorer。
2．單擊settings（設定）按鈕并從下拉菜單中選擇developer tools（開發人員工具），也可按f12鍵。
3．将顯示開發人員控制台，如圖1.11所示。
（3）在chrome中啟用javascript控制台
請按如下步驟在chrome中啟用javascript調試。
1．打開chrome。
2．單擊settings（設定）按鈕，并從下拉菜單中選擇tools（工具）>developer tools（開發者工具），也可按ctrl+shift+j（pc）或cmd + shift + j（mac）。
3．将顯示javascript控制台，如圖1.12所示。
3．安裝用于開發的簡單web伺服器
浏覽器準備就緒後，最後一步是安裝并配置用于開發的簡單伺服器。在可能的情況下，通常最好在開發計算機上安裝基本的web伺服器。
可供選擇的web伺服器有多款，但最常用的是apache和iis。就開發伺服器而言，最佳的選擇是支援mysql和php的apache。本書使用xampp，因為它有mac、windows和linux版。
請按如下步驟安裝xampp，并将其配置為開發伺服器。
1．下載下傳xampp安裝程式并安裝xampp。安裝過程非常簡單，但請将您選擇的安裝位置記錄下來，後面要用。
2．啟動xampp control panel，如圖1.13所示。
3．在xampp control panel中，單擊apache的config按鈕，并選擇檔案httpd.conf在編輯器中打開這個apache 配置檔案。
4．在檔案httpd.conf中添加如下指令，這樣該伺服器運作時您将能夠直接通路目錄code。
5．儲存檔案。
6．在目錄/xamp/htdocs（或您設定的apache根目錄）中，建立一個名為code的目錄。您将把自己編寫的代碼存儲到這個目錄。
7．在xampp control panel中，停止apache服務再啟動它。
8．在web浏覽器中輸入如下位址，浏覽器中将出現類似于圖1.14所示的目錄連結。
至此，web伺服器就已準備就緒，可将其用于web開發了。
1.2.2 建立web開發項目
安裝ide和web伺服器後，便可以開始建立項目了。本節介紹一些概念以及在aptana studio中建立項目的過程。
1．目錄結構
web項目開始通常很小，隻有幾幅圖像和幾個檔案，但随着時間的推移，将在項目中添加越來越多的檔案，如果項目組織不善，很快就會變得混亂不堪。
為避免這種問題，應預先規劃目錄結構。什麼樣的目錄結構最合适呢？這取決于具體需求、項目将包含多少圖像、檔案類型等因素。
一個簡單的例子是，可采用類似于下面的基本目錄結構。
root：包含index.html、網站地圖、友善網絡搜尋的内容等。
root/html：隻包含html檔案。
root/js：包含javascript檔案。
root/php：包含所有的伺服器端php腳本。
root/images：包含所有的圖形。
root/images/visual：包含用于建立網頁的圖形元素，如按鈕。
root/images/photos：包含網站顯示的所有圖檔。
上述清單旨在說明一種確定檔案組織有序的方式；哪種組織方式最佳完全由您決定。您可能想添加更多的子目錄，但不要使用太多的子目錄，以免檔案的url過于混亂。
2．檔案命名
建立web項目時，需要注意的另一個方面是檔案名。下面是一些需要考慮的因素。
别太長：檔案名通常是url的一部分，javascript需要對其進行分析。如果檔案名太長，将導緻代碼過于繁瑣。
確定檔案名有意義：建立網頁時，需要用到相關腳本或html頁面的檔案名，在編輯器中查找檔案時，也需要用到檔案名。如果檔案名未能反映其用途，可能增加開發工作的難度。
建立項目
本節介紹在aptana studio中建立項目的過程。在aptanastudio和大部分ide中，項目都為多檔案網站和應用提供了一種組織、控制、生成和部署方式。
本節不會花太多時間讨論項目，隻想讓您對基本web項目的工作原理有大緻認識。
請按如下步驟在aptana studio中建立一個項目。
選擇菜單file>new>web project打開project template（項目模闆）對話框。
選擇default project并單擊next按鈕。
輸入項目名。請使用簡短而有意義的項目名，如本書使用的項目名tyjquerycode。
取消選擇複選框use default location。
輸入本章前面在檔案httpd.conf中添加的目錄（這裡為c:xampphtdocscode）。
單擊finish按鈕，新項目将出現在頁籤workspace中，如圖1.15所示。
右擊項目名并選擇new>folder，再将檔案夾命名為hour01，用于存儲本章的代碼。
至此第一個項目便建立好了。
使用jquery和javascript建立動态網頁
建立項目後，便可開始建立動态網頁了。在本節中，您将按指定的步驟建立一個非常簡單的動态網頁。這個網頁是基于html的，它使用css指定樣式，并使用jquery和javascript實作互動。
添加html
建立簡單網頁的第一步是，指定可供樣式化和操縱的html元素。請按如下步驟在aptana中建立html文檔。
右擊前面建立的檔案夾hour01。
從彈出菜單中選擇new>file。
将檔案命名為first.html并單擊ok按鈕，這将打開一個空文檔。
輸入下面的html代碼。如果您不太熟悉html，也不用擔心，本書後面将介紹足夠的知識，讓您能夠使用它。
儲存檔案。
在web浏覽器中，輸入下面的url，您将看到文本click me。
就這麼簡單，至此所有的基本html元素都已準備就緒。在下一節，您将設定元素的樣式，讓文本click me看起來更像按鈕。
1.2.3 添加css
浏覽器渲染的簡單文本很乏味，但通過添加css樣式，很容易解決這種問題。在本節中，您将使用css讓文本看起來更像按鈕。
請按如下步驟給元素添加css樣式。為友善您參考，程式清單1.7是您執行下述步驟對樣式進行修改後的腳本。
1．在網頁的
标簽中，添加如下代碼，給所有的元素指定css樣式。
2．在樣式span中添加如下屬性設定，将文本的背景色改為深藍色。
3．在樣式span中添加如下屬性設定，将字型顔色改為白色，并将字型改為bold。
4．在樣式span中添加如下屬性設定，在文本周圍加上邊框。
5．在樣式span中添加如下屬性設定，以指定元素的絕對位置。
6．儲存檔案。
7．在web浏覽器中輸入如下url，您将看到樣式化後的click me，如圖1.16所示。
1.2.4 編寫動态腳本
根據需要設定html元素的樣式後，便可開始添加動态互動了。在本節中，您将導入托管的jquery庫，以便能夠使用jquery；然後，将浏覽器滑鼠事件mouseover關聯到一個移動文本的javascript函數。
請按如下步驟在網頁中添加jquery和javascript互動。
1．給元素添加一個id，以便能夠引用它；另外，給mouseover事件指定處理程式，如程式清單1.7的第30行所示。
2．在标簽
中添加下面的代碼行（如程式清單1.7的第5行所示）。這行代碼從托管網站加載jquery庫。
3．在标簽
中添加下面的javascript函數（如程式清單1.7的第6～13行所示）。這個函數建立一個數組，其中包含10～350的坐标值；每當使用者在元素上移動滑鼠時，都随機地設定該元素的css屬性top和left。
4．儲存檔案。
5．在web浏覽器中輸入下面的url，您将看到樣式化的文本click me，如圖1.16所示。
6．現在嘗試單擊按鈕click me。每當被滑鼠指向時，該按鈕都将移動，讓您無法單擊它。
7．找個您讨厭的家夥，讓他去單擊這個按鈕。
程式清單1.7 一個簡單的jquery和javascript互動式網頁