對於jQuery的初學者來說，常常會找不到一個合適的練習工具，我會建議初學者使用瀏覽器以及開發者工具，
使用IE瀏覽器，「各主要瀏覽器的開發者工具( Developer Tool ) Part.2 - IE」
使用Google Chrome瀏覽器，「各主要瀏覽器的開發者工具( Developer Tool ) Part.4 - WebKit」
使用Firefox瀏覽器的話，也是可以使用內建的開發者工具，而且Firefox 10的開發者工具則是全新面貌，
「各主要瀏覽器的開發者工具( Developer Tool ) Part.1 - Firefox」
「Firefox 10 新增了令人興奮的開發者工具」
「Firefox 10全新開發者工具，支援網頁3D、HTML、CSS即時檢視」
我心中最理想的jQuery Debug以及練習的工具組合則是：Firefox + Firebug，
「Firefox 開發前端語言時的偵錯工具 Firebug 以及好用的套件」
但是有的人會覺得，只是單純練習個jQuery的指令與操作應該不用大費周章的去搞這些吧？！
尤其是沒有接觸過開發者工具的人，光是要認識如何使用就相當頭大了，
所以可以退而求其次，可以使用「jQueryPad」來當做單純練習的工具。
jQueryPad
網址：http://www.paulstovell.com/jquerypad
下載：http://www.paulstovell.com/get/jquerypad/jquerypad.zip
jQueryPad是個免費軟體，而且也是一個免安裝的工具，不過必須先安裝.NET Framework 3.5才能夠使用，
所以先確定你的作業環境是否已經安裝.NET Framework 3.5以上版本的套件。
Microsoft .NET Framework 3.5 Service Pack 1
解壓縮下載的檔案後，jQueryPad的內容如下：
執行「jQueryPad.exe」就可以開啟jQueryPad，
上圖就是jQueryPad的主畫面，
左上方的編輯區是用來編輯CSS與HTML，
右上方的編輯區是用來編輯Javascript以及jQuery，
下方的區塊則是顯示執行後的結果，
說穿了最下方的區塊就是一個IE瀏覽器，如果你的環境有安裝Firefox以及Chrome，也可以把結果另外顯示在瀏覽器上，
最上方的「Tips」其實沒有什麼特別的地方， 主要是跟我們說操作方式：
- 可以使用「Ctrl + Tab」在Javascript與HTML編輯區中做切換，
- 按下「F5」就是執行程式然後在下方顯示結果，
- 編輯jQueryPad樣板檔案的位置「jQueryPad\Templates」
有關Template檔案的修改與編輯，會在最後做個說明。
開啟jQueryPad之後不做任何的修改，直接F5做執行，
各位可以看到原本空白的暫存檔案位置於執行後有了資料，而顯示的就是此次暫存檔案的路徑，
暫存的目錄與檔案都會放置在「C:\Users\[使用者名稱]\AppData\Local\jQueryPad」中，
使用jQueryPad有一點會比較讓人困擾，那就是每一次你做執行的動作，它都會另外存一個暫存目錄與檔案，
雖然是相同的程式內容而沒有做任何的修改，在執行後還是會另外產生新的暫存目錄與檔案，
而且沒有清除這些暫存檔案的功能，所以在使用完jQueryPad之後就必須手動去做清理。
而jQueryPad有個「Save」的按鍵，這個按鍵所儲存的就會是包含HTML以及Javascript這兩個部分的Code，
所以在練習操作後，就可以使用把練習的程式給保留下來。
因為jQueryPad算是之前所開發的一個小工具，所以內建預設使用的jQuery版本為「v1.3.2」，
如果想要使用最新版本的jQuery則必須去修改jQueryPad的Template以及Config檔案。
其實最直接的方式就是把原本「jQueryPad/Templates/JQuery.js」的檔案內容用最新的jQuery給覆蓋，
但如果想要切換使用不同版本的jQuery就不建議把原本的JQuery.js內容給覆蓋，
在「jQuery Download」可以下載到各種不同版本的jQuery檔案，
http://docs.jquery.com/Downloading_jQuery
我這邊把最新的「jQuery-1.7.1.js」放到jQueryPad/Templates目錄中，
接著就是到上一層目錄「jQueryPad」，然後用文字編輯器開啟「jQueryPad.exe.config」檔案，
修改「jQueryPad.exe.config」內容中的「JQueryPath」的Value，這邊就直接置換為「jQuery-1.7.1.js」，
儲存後關閉檔案，並且重新啟動 jQueryPad，
執行一段程式，開啟暫存目錄，並開啟Jquery.js查看內容，就可以看到jQuery已經是使用「v1.7.1」
多一點程式內容的操作
如果想要用來測試一些jQuery.Plugin，可以參考以下的作法，
例如說，我要測試「Linq to JavaScript (JSLINQ)」
在HTML中增加以下的內容，
而Javascript增加以下內容，
執行結果：
總之就是把jQueryPad當做一個簡單型的網頁編輯器，
可在jQueryPad上編修HTML與Javascript內容，然後可以立即執行並且看結果，
這樣可以不用同時開啟網頁編輯器、瀏覽器去練習jQuery的操作。
jQueryPad的暫存目錄、檔案還真的是挺煩人的，所以就有人參照了原本jQueryPad的作法而另外開發了一個一樣的工具，
jQueryPad++
http://www.withonly.com/?tag=jquerypad
這個jQueryPad++比較大的不同就是暫存目錄的位置，
它是放在「C:\Users\[使用者名稱]\AppData\Local\Microsoft\Windows\Temporary Internet Files\」
所以一旦IE瀏覽器清除它的快取就會一併檔案給移除，
另外一點不同的是，當HTML或是Javascript有修改或是再次執行時，不會另外產生新檔案。
如果說要置換jQueryPad++預設使用的jQuery版本（原來預設使用v1.4.2），
我試過去修改Templates目錄下的「index.tpl」內容，卻無法正確的改使用「jQuery-1.7.1.js」檔案，
所以我就把「jquery.js」的內容用v1.7.1的內容給覆蓋掉，這樣就可以正確使用jQuery v1.7.1。
我還是會使用「Firefox + Firebug」來當做我練習jQuery的工具，
其實還是有線上版的網頁工具也可以達到同樣的效果：
JS Fiddle：http://jsfiddle.net/
JS Bin：http://jsbin.com
而jQueryPad會是用來當做要立即測試某個功能或是做操作示範時的工具（沒有網路連線的情況下），
因為有的時候做簡單的測試或示範是不需要大費周章的去開網頁編輯器、開新檔案、寫程式、存檔、開瀏覽器、測網頁……
小工具，提供給大家參考，練習jQuery的另一種選擇。
以上
沒有留言:
張貼留言