最近更新: 2007-03-02

重新認識 JavaScript part 2, 互動環境 (command line mode)

繼《重新認識JavaScript》後,再介紹便於學習與測試的互動模式工具。

動態語言強調立即反應,最好使用者輸入什麼敘述,執行環境就立即顯示結果,發生錯誤亦可立即修改。然而 JavaScript 傳統的執行環境 (host) 是在瀏覽器上,所以我們通常習慣將 JavaScript 程式碼編輯儲存在檔案中,再開啟瀏覽器執行。這方式在學習時有些缺點,像是訊息輸出便非常麻煩。試想,如果你要練習用迴圈顯示一個九九乘法表,在上述環境中你可無法直接 print 、puts 或 echo 在瀏覽器上啊。最簡單的方式也要先指定一個文件節點,然後設定其 innterHTML 屬性才行。

既然 JavaScript 是一種動態語言,就該有動態語言的互動模式可用。JavaScript Shell - A command-line interface for JavaScript and DOM 就提供了兩個利用 JavaScript 設計的 JavaScript 互動式介面:JavaScript Shell 1.4JavaScript development enviornment。這兩個工具都是以瀏覽器為執行環境,但允許使用者直接在畫面上輸入程式碼後立即反應結果。於本機模式開啟時,甚至可以載入本機路徑中的 JavaScript 程式碼文件加以執行。

JavaScript Shell 1.4 為例簡單介紹其用法。它本身是一個純 JavaScript 程式,只要將該網頁另存於本機,就可以在本機直接啟動 (以瀏覽器開啟) 。如下圖:

JavaScript Shell 等待輸入狀態

在這環境中,你可以直接輸入程式碼;輸入多行時須按 Shift+Enter 鍵換行;可按上、下方向鍵叫回剛剛執行的程式碼內容再次編輯。如下圖藍色粗體字的內容就是使用者輸入的程式碼,黑色正常字則是 shell 對使用者適才輸入之程式碼的立即反應結果。

定義變數 w 及函數 hello

在 JavaScript Shell 中,使用者可直接以 print() 顯示訊息。以 print() 顯示的內容會以暗紅色字表示。當我們覺得畫面顯示太多內容時,可以 clear() 清除畫面。如下圖:

調用 hello() ,並準備清除畫面

清除畫面後可以按上方向鍵叫回剛剛輸入的程式碼繼續修改、編輯,clear() 並不會清除使用者輸入的程式碼。

再來一個例子說明在互動模式下寫程式的樂趣。下圖是 DOM 方法的操作例子,分別建立了一個 div 和一個 img 元素,再把它們加到 DOM 樹中。在 insertBefore()appendChild() 之後,我們就會立即看到結果。一但發現結果不對,我們可以馬上嘗試別的方法,不需要重覆「編輯器編輯檔案→儲存檔案→瀏覽器重新整理→操作測試→發現錯誤→修改檔案(回到第一步)」的過程。

以DOM方法建立元素,再加到 DOM 樹中

最後順便提一下,在 Mozilla 的專案中有一個正式的 JavaScript shell 。這是獨立的命令列程式,可做為 script shell 執行 JavaScript 程式。不過我在 Windows 環境下以 MinGW32 編譯失敗... 嗯,Makefile 的內容使用了許多 Unix 指令,而且會誤判我的編譯工具為 MSVC 。初步修改 Makefile 內容後總算可以開始編譯,卻又在編譯 jsapi.c 時發生語法層級錯誤。嗯,難道是 gcc 版本不對嗎?算了,有空再試。


JavaScript shell in Rhino

Rhino 是在 Java 平台上實作的 JavaScript 引擎。Rhino 也提供了一套 shell ,就包含在其下載檔中。Rhino 提供 binary 形式的下載檔,其中的 js.jar 即為已編譯好的引擎及工具。使用方式與上述所提者大同小異。

java -cp js.jar org.mozilla.javascript.tools.shell.Main
樂多舊網址: http://blog.roodo.com/rocksaying/archives/2795505.html

樂多舊回應
未留名 (#comment-4103735)
Tue, 06 Mar 2007 14:24:20 +0800
這個看起來好像還不賴,如果是單純用eidtor工具編輯再開瀏覽器是真的有點煩。

對於初學Javascript應該會有些幫助,可以立即看到效果,也方便是一些效果。
未留名 (#comment-4106695)
Tue, 06 Mar 2007 22:41:24 +0800
這玩意最有趣的地方,就是用它寫 Ajax 相關的程式碼,就像我在第4張圖中做的事。

當我改變 style 時,可以馬上看見樣式效果;當我加入或移除一個節點時,可以馬上看見那節點是不是如我預想一般地出現或消失。我不用矇著頭用想像的方式 (瞎猜) 先寫一堆程式碼,然後開瀏覽器才看得出效果。

實際用在開發 Ajax 相關功能時也非常管用。