1-2 閬 G`ヶ

基本而言,我們可有兩種方式來使用 JavaScript 於網頁之中:
  1. 循序執行(Sequential Execution): 瀏覽器讀入網頁後,即載入並執行 JavaScript 程式碼,最後將結果直接呈現在瀏覽器上。
  2. 事件驅動(Event Driven): 瀏覽器讀入網頁後,即載入 JavaScript 程式碼,但必須等到使用者點選連結或影像,或是啟動其他滑鼠事件(例如當滑鼠離開某個影像),才能觸發 JavaScript 的執行。
本節將先介紹「循序執行」的 JavaScript 程式碼,並以最簡單的範例來帶領讀者進入 JavaScript 的世界。至於「事件驅動」的 JavaScript 程式碼設計,將會在下一節說明。

若要在 HTML 原始碼中加入 JavaScript 的程式碼,只要使用 <script> 標籤即可,其基本格式如下:

<script language=javascript> JavaScript 程式碼 ... </script> 在上述基本格式中,標籤中的大小寫並無任何影響(因此「script」可寫成「SCRIPT」,「language」可寫成「LANGUAGE」。)。此外,JavaScript/JScript 即是 <script> 標籤的預設語言,因此「language=javascript」或「language=jscript」也可以完全省略。(若你使用的語言是 VBScript 或 PerlScript,則一定要加上 language=VBScript 或 language=PerlScript。)

Hint
雖然 HTML 內的 JavaScript 標籤是可以不分大小寫,但是標籤內部的 JavaScript 程式碼本身會區分大小寫,這是要特別注意的地方!

首先我們來看一個循序執行的簡單範例,此範例會在網頁上印出「Hello World!」,如下:

Example(hello01.htm):

上述範例的原始檔如下:

原始檔(hello01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>利用 JavaScript 來印出 "Hello World!"</h2>
<hr>

<script language="javascript">
	str = "Hello World!";
	document.write(str);
</script>

<hr>
</body>
</html>

其中 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!" 事實上是寫在不同的兩列上,在網頁排版後所呈現的效果,就會形成由空格分開的兩個英文字。範例如下:

Example(writeln01.htm):

上述範例的原始檔如下:

原始檔(writeln01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>document.write() 和 document.writeln() 的差別</h2>
<hr>
使用 document.write():
<script>document.write("Good"); document.write("Bye!");</script>
<br>
使用 document.writeln():
<script>document.writeln("Good"); document.writeln("Bye!");</script>

<hr>
</body>
</html>

由上述範例也可以看出,JavaScript 是自由格式(Free Format)的,每一列程式碼可以塞下好幾個敘述,只要每一個敘述都有加上一個分號來表示敘述的結尾。

若要呈現 JavaScript 印出的原始效果,而不希望看到網頁排版之後的效果,可以 <pre> 和 </pre> 將 JavaScript 的程式碼前後包夾,例如:

Example(writeln02.htm):

上述範例的原始檔如下:

原始檔(writeln02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>呈現 JavaScript 印出的原始效果</h2>
<hr>

<pre>
使用 document.write():
<script>document.write("Good"); document.write("Bye!");</script>
使用 document.writeln():
<script>document.writeln("Good"); document.writeln("Bye!");</script>
使用 document.write() 再加上 "\n":
<script>document.write("Good\n"); document.write("Bye!\n");</script>
</pre>

<hr>
</body>
</html>

Hint
為縮減篇幅,後續的程式碼列表,將不再顯示標準的 HTML 網頁檔頭與檔尾,而以「...」來取代。

由上述範例可知,document.write("...\n") 和 document.writeln("...") 得到的效果是一樣的,其中 "\n" 代表換列符號,類似的符號可以整理如下:

特殊字元說明
\n換列符號(New Line)
\t定位符號(Tab)
\r歸位符號(Carriage Return):將游標移到目前列的第一個位置,印出的文字將會蓋過之前的文字
\\插入一個反斜線(\)
\"插入一個雙引號(")
\'插入一個單引號(')

Hint
使用 <pre> 和 </pre> 來包夾 JavaScript 的程式碼,可以得JavaScript 的原始輸出結果(未經瀏覽器排版), 非常適用於JavaScript 程式碼的偵錯。

下面這個例子,會在瀏覽器呈現 5 個由小變大的 "Hello World!":

Example(hello02.htm):

上述範例的原始檔如下:

原始檔(hello02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>利用 JavaScript 來印出 size 由 1 到 5 的"Hello World!"</h2>
<hr>

<script>
// 由 for 迴圈來產生 5 個由小變大的  "Hello World!"
for (i=1; i<=5; i++)
	document.writeln("<font size=" + i + ">Hello World!</font><br>");
</script>

<hr>
</body>
</html>

在上例中,我們利用 JavaScript 的 for 迴圈來逐次更改字串的大小,因此瀏覽器上會顯示 5 個由小變大的 "Hello World!"。(有關於 for 迴圈,我們會在下一章仔細說明。)由以上範例我們可注意到下列事項:

我們前面提到,若要得到未經瀏覽器排版前的 JavaScript 輸出結果,可以使用 <pre> 和 </pre>,但是對於含有 HTML 標籤的文字資料,我們就必須改用 <xmp> 和 </xmp>,例如,若要印出前一個範例未經瀏覽器排版前的結果,可見下列範例:

Example(helloXmp01.htm):

上述範例的原始檔如下:

原始檔(helloXmp01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>利用 &#60xmp&#62 和 &#60/xmp&#62 來印出未經瀏覽器排版的結果</h2>
<hr>

<script>
// 由 for 迴圈來產生 5 個由小變大的  "Hello World!"
document.write('<xmp>');
for (i=1; i<=5; i++)
	document.writeln("<font size=" + i + ">Hello World!</font><br>");
document.write('</xmp>');
</script>

<hr>
</body>
</html>

Hint
若將 <xmp> 及 </xmp> 寫成置於 <script>...</script> 之外的 HTML 標籤,你可以得到一樣的結果嗎?為什麼?請試看看!

換句話說,我們可以使用 <pre> 和 <xmp> 來觀察經由 JavaScript 或瀏覽器解譯之後的資料,詳細流程可見此「example/HTML,JavaScript解譯及排版流程流程.ppt」。

Example(HTML,JavaScript解譯及排版流程流程.ppt):

在過去 Web 瀏覽器群雄並起的時代,並不是每一種瀏覽器都能夠支援 JavaScript,因此我們就要想一種辦法來適時地隱藏 JavaScript 的程式碼,以避免不認得 JavaScript 的瀏覽器將 JavaScript 的原始碼呈現在網頁上。其方法就是混合使用 HTML 及 JavaScript 的註解,例如:

<script language=javascript> <!-- JavaScript 程式碼 ... //--> </script>
但現在兩大瀏覽器都支援 JavaScript,所以使用這種「隱藏程式碼」的 JavaScript 的程式已經越來越少了。以本節第一個 "Hello World!" 的例子,若使用「隱藏程式碼」的方式來撰寫,得到的網頁呈現效果完全相同,其原始檔案如下:

原始檔(hello03.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用註解來隱藏程式碼,使不支援 JavaScript 的瀏覽器不會產生錯誤訊息</h2>
<hr>

<script language="javascript">
<!-- 如果瀏灠器無法辨識JavaScript程式, 則從下行開始隱藏
	str = "Hello World!";
	document.write(str);
// 隱藏至上行為止 -->
</script>

<hr>
<!--#include file="foot.inc"-->


JavaScript 程式設計與應用:用於網頁用戶端