基本而言,我們可有兩種方式來使用 JavaScript 於網頁之中:本節將先介紹「循序執行」的 JavaScript 程式碼,並以最簡單的範例來帶領讀者進入 JavaScript 的世界。至於「事件驅動」的 JavaScript 程式碼設計,將會在下一節說明。
- 循序執行(Sequential Execution): 瀏覽器讀入網頁後,即載入並執行 JavaScript 程式碼,最後將結果直接呈現在瀏覽器上。
- 事件驅動(Event Driven): 瀏覽器讀入網頁後,即載入 JavaScript 程式碼,但必須等到使用者點選連結或影像,或是啟動其他滑鼠事件(例如當滑鼠離開某個影像),才能觸發 JavaScript 的執行。
若要在 HTML 原始碼中加入 JavaScript 的程式碼,只要使用 <script> 標籤即可,其基本格式如下:
在上述基本格式中,標籤中的大小寫並無任何影響(因此「script」可寫成「SCRIPT」,「language」可寫成「LANGUAGE」。)。此外,JavaScript/JScript 即是 <script> 標籤的預設語言,因此「language=javascript」或「language=jscript」也可以完全省略。(若你使用的語言是 VBScript 或 PerlScript,則一定要加上 language=VBScript 或 language=PerlScript。) 首先我們來看一個循序執行的簡單範例,此範例會在網頁上印出「Hello World!」,如下:
上述範例的原始檔如下:
其中 str 是一個字串變數,其值為 "Hello World!",document 則是一個物件,代表程式碼所在的文件,write 則是 document 的一個方法,可將一個字串印出於瀏覽器,因此 document.write(str) 的作用就是將 "Hello World!" 顯示在瀏覽器之上。
我們在前一小節提過,JavaScript 是一個以物件為基礎的語言,因此幾乎所有的變數在 JavaScript 中都是一個物件,一個物件通常有一些性質(Property)和方法(Method),而與物件相關的函數通常就被定義成物件的方法(或是功能)。舉例來說,我們可以把一個微波爐看成一個物件,那麼微波爐的顏色(Color)就是一個性質,容量(Volume)又是另一種性質,而我們可以把「加熱」(Heat)看成微波爐的一個方法(或是函數)它的輸入參數有兩個,第一個參數是放進微波爐的物品,第二個參數則是加熱的秒數。因此對於一個容量為八公升的白色微波爐 A,A.color 就是 white,A.volume 就是 8,而 A.heat("冷水", 30) 傳回值可能是 "溫水"(冷水加熱 30 秒變成溫水),而 A.heat("冷水", 300) 傳回值可能是 "沸水"(冷水加熱 300 秒變成沸水)。因此在上述範例中,document 就是一個 JavaScript 的物件,代表此網頁所在的文件,而 write() 就是一個方法,可以將輸入的字串寫到文件內。
document 物件還有一個與列印相關的方法:writeln(),它和 write() 的最大差別在於 writeln() 在列印完畢後會換列,但 write() 不會。例如如果連續呼叫 document.write("Good") 和 document.write("Bye!"),在網頁會呈現連在一起的 "GoodBye!",但是如果連續呼叫 document.writeln("Good") 和 document.writeln("Bye!"),則在網頁會呈現中間有空格的 "Good Bye!",這是因為 "Good" 和 "Bye!" 事實上是寫在不同的兩列上,在網頁排版後所呈現的效果,就會形成由空格分開的兩個英文字。範例如下:
上述範例的原始檔如下:
由上述範例也可以看出,JavaScript 是自由格式(Free Format)的,每一列程式碼可以塞下好幾個敘述,只要每一個敘述都有加上一個分號來表示敘述的結尾。
若要呈現 JavaScript 印出的原始效果,而不希望看到網頁排版之後的效果,可以 <pre> 和 </pre> 將 JavaScript 的程式碼前後包夾,例如:
上述範例的原始檔如下:
由上述範例可知,document.write("...\n") 和 document.writeln("...") 得到的效果是一樣的,其中 "\n" 代表換列符號,類似的符號可以整理如下:
特殊字元 說明 \n 換列符號(New Line) \t 定位符號(Tab) \r 歸位符號(Carriage Return):將游標移到目前列的第一個位置,印出的文字將會蓋過之前的文字 \\ 插入一個反斜線(\) \" 插入一個雙引號(") \' 插入一個單引號(')
下面這個例子,會在瀏覽器呈現 5 個由小變大的 "Hello World!":
上述範例的原始檔如下:
在上例中,我們利用 JavaScript 的 for 迴圈來逐次更改字串的大小,因此瀏覽器上會顯示 5 個由小變大的 "Hello World!"。(有關於 for 迴圈,我們會在下一章仔細說明。)由以上範例我們可注意到下列事項:
我們前面提到,若要得到未經瀏覽器排版前的 JavaScript 輸出結果,可以使用 <pre> 和 </pre>,但是對於含有 HTML 標籤的文字資料,我們就必須改用 <xmp> 和 </xmp>,例如,若要印出前一個範例未經瀏覽器排版前的結果,可見下列範例:
- For-loop 的格式和 C 語言一樣。
- 字串的並排是由「+」來達成。
- JavaScript 有兩種加入註解的方法:
- 單行註解(如上例),此種註解方式和 C++ 相同,例如
// 單列程式碼註解 - 多行註解,此種註解方式和 C 相同,例如:
/* 多列程式碼註解 第二列註解 ... */ 上述範例的原始檔如下:
換句話說,我們可以使用 <pre> 和 <xmp> 來觀察經由 JavaScript 或瀏覽器解譯之後的資料,詳細流程可見此「example/HTML,JavaScript解譯及排版流程流程.ppt」。
在過去 Web 瀏覽器群雄並起的時代,並不是每一種瀏覽器都能夠支援 JavaScript,因此我們就要想一種辦法來適時地隱藏 JavaScript 的程式碼,以避免不認得 JavaScript 的瀏覽器將 JavaScript 的原始碼呈現在網頁上。其方法就是混合使用 HTML 及 JavaScript 的註解,例如:
但現在兩大瀏覽器都支援 JavaScript,所以使用這種「隱藏程式碼」的 JavaScript 的程式已經越來越少了。以本節第一個 "Hello World!" 的例子,若使用「隱藏程式碼」的方式來撰寫,得到的網頁呈現效果完全相同,其原始檔案如下:
JavaScript 程式設計與應用:用於網頁用戶端