JavaScript程式基本範例 - 超圖解系列圖書

JavaScript程式基本範例
文∕趙英傑

本文主要是提供動態網頁課程的學員，有關《Dreamweaver 2004中文版網頁設計寶典》第八章「動態網頁案例研究」的互動程式補充說明。Dreamweaver提供的「行為」面版，替網頁設計師省下許多撰寫程式碼的苦力，而Macroemdia公司的Exchange網站，也提供各種額外（免費和收費）的行為指令，讓用戶下載使用。然而總有些時候，我們可能找不到所需的行為指令，或者需要將行為指令產生的程式訊息改成中文。

像這個時候，瞭解一點程式語法總是有用處的。眾所周知，HTML語言是描述網頁文件內容的標籤語言，而互動效果則需要透過 Javascript 或 VBScript 程式語言達成（例如，動態隨機顯示某些圖片或文字、在狀態列顯示捲動文字…等等）。VBScript是微軟公司發明的語言，大多只能用在自家的IE瀏覽器上；JavaScript則是網景（Netscape）公司所創造的語言，能在各種瀏覽器上執行。因此，一般網頁設計製作人員通常會採用JavaScript來撰寫網頁互動程式。更何況，Macromedia公司的Flash和Director 軟體也都陸續把 ECMAScript（JavaScript語言的公訂標準）視為母語，JavaScript 語言在動態網頁的重要性可見一斑。

Dreamweaver的行為指令，就是預先寫好的 JavaScript 程式片段。

下載本文的範例檔案

請按此下載。

JavaScript的語法格式

JavaScript程式主要是在瀏覽器中執行（反過來說，瀏覽器是 JavaScript 程式的執行環境），並且可直接內嵌在HTML網頁中。內嵌在網頁中的 JavaScript 程式碼要放在 <script> 和 </script> 標籤之間，例如：

<html>
<body>
<script language="javascript"">
<!--
  JavaScript程式碼寫在這裡。
//-->
</script>
</body>
</html>

例如，底下的 JavaScript 程式透過doument物件的write()方法，在網頁上輸出“您好！”字串（document就是「文件」的意思，代表顯示在瀏覽器視窗裡的網頁文件）：

<html>
<body>
<script language="javascript">
<!--
  document.write("您好！");
//-->
</script>
</body>
</html>

自訂函數

函數（function）是一段可被重複使用的程式碼。在它被呼叫之前，函數裡的程式不會執行。函數的語法格式如下：

function 自訂函數名稱(參數1, 參數2,… 參數n){
  函數的程式碼
  return 傳回值;
}

定義一個稱為 cube 的計算三次方數值的程式，並傳回計算結果，寫法如下：

<script language="javascript">
<!--
 document.write("5 的三次方：" + cube(5));
 function cube(n){
  var result = n * n * n;
  return result;
 } 
//-->
</script>

自訂函數通常放在網頁的檔頭區（亦即，<head>和</head>標籤之間），以確保網頁的程式都能呼叫到它。

觸發事件

用戶或者JavaScript程式本身都能觸發一些事件（或者說「動作」），這些事件可能是用戶按下滑鼠，或者選取某些文字，或者敲敲鍵盤…等等。每個事件都有特定的名稱，例如：

onClick：代表「按一下」事件
onMouseOver：代表「游標滑入」
onMouseUp：代表「放開滑鼠鈕」

負責接收並處理事件的程式稱為「事件處理常式（event handler）」。底下是一個基本的事件範例，該網頁的檔頭區包含一個稱為 goodbye() 的自訂函數，其中的alert()代表開啟「警告」對話方塊：

<html>
<head>
<script languge="javascript">
  function goodbye(){
    alert("謝謝光臨！");
  }
</script>
</head>
<body onUnload="goodbye()">
請關閉瀏覽器視窗。
</body>
</html>

寫在 <body> 標籤中的 onUnload 事件，會在用戶關閉瀏覽器視窗時觸發。因此，上面的網頁會在它被關閉時，顯示「謝謝光臨」的警告方塊。

動態調換影像的程式範例

Dreamweaver具有一個稱為「調換影像」的行為指令，能動態調換指定的影像（參閱《Dreamweaver 2004中文版網頁設計寶典》一書8-10頁）。底下的範例將說明如何自行撰寫一個陽春型的調換影像程式：

請把游標移入圖像

首先我們要知道插入影像的HTML標籤指令是 <img> ，它有一個指定影像路徑和檔名的 src 屬性。例如，底下的標籤指令將在網頁上插入 "icons" 資料夾裡的 icon6.gif 檔：

<img src="icons/icon6.gif" />

若要透過 JavaScript 動態設定影像檔，必須先採用 id 和 name 屬性，替 <img> 標籤元素命名（或者在 Dreamweaver 的「設計」檢視模式下，點選影像後，再透過屬性檢測器面版命名）。例如，替影像命名成 "icon" 的指令寫法如下：

<img src="icons/icon6.gif" 
id="icon" name="icon" />

這個名稱必須是在此網頁中獨一無二的名字。命名影像標籤之後，就能透過底下的 Javascript 敘述設定它的 src 屬性值：

document.icon.src = "icons/icon2.gif";

瞭解如何用程式指定影像檔之後，請在Dreamweaver中開啟新的 HTML 網頁，並切換到「程式碼」檢視模式。在 <body> 和 </body> 標籤之間，輸入底下的標籤指令：

<a href="#">
  <img src="icons/icon6.gif" id="icon" 
  name="icon"/>
</a>

<a> 標籤是超連結指令，它的 href 屬性用於指令連結網址。因為此超連結僅用於觸發執行 JavaScript 程式，並不連結到任何網址，所以 href 屬性指定成 "#"。接著，在網頁的<head>和</head>標籤之間，輸入底下的 JavaScript 程式函數：

<script language="javascript">
 // 替換滑鼠滑入時的影像
 function mouseOver(pict) {
   document.icon.src  = pict;
 }
 // 替換滑鼠滑出時的影像
 function mouseOut(pict) {
   document.icon.src  = pict;
 }
</script>

最後，設定 <a> 標籤的 onMouseOver（游標滑入）以及onMouseOut（游標滑出）的事件處理常式：

<a href="#" 
  onMouseOver="mouseOver('icons/icon2.gif')"
  onMouseOut="mouseOut('icons/icon6.gif')" >
  <img src="icons/icon6.gif" 
    id="icon" name="icon" />
</a>

完成的範例檔請參閱本文附件的 swapIcon.htm。

使用下拉式選單替換影像

本節將採用 JavaScript，在用戶選擇不同選單內容時，替換右邊的影像，實際效果如下：

製作步驟如下：

1. 開啟新網頁後，使用Dreamweaver的表單工具建立一個表單：

表單元素都要放在這個紅色虛線框裡面（亦即，HTML的 <form> 和 </form> 標籤之間）。在「屬性」檢測器面版左下角的「表單名稱」欄位，將此表單命名成：icon_form。

2. 在表單的紅色虛線框範圍內，輸入「選擇圖像：」文字，然後插入一個下拉式選單：

3. 在「屬性」檢測器面版左下角的「清單/選單」名稱欄位，輸入：icon_menu 命名。

4. 按下「屬性」檢測器上的「清單值」按鈕，設定此選單內容。

5. 在下拉式選單之後，插入 icon1.gif 影像，並將此影像命名成：icon。底下是目前步驟所建立的 HTML 表單原始碼：

<form id="icon_form" name="icon_form">
 選擇圖像：
 <select name="icon_menu" id="icon_menu">
   <option value="icon1.gif">dog 1</option>
   <option value="icon2.gif">dog 2</option>
   <option value="icon3.gif">dog 3</option>
   <option value="icon4.gif">dog 4</option>
   <option value="icon5.gif">dog 5</option>
   <option value="icon6.gif">dog 6</option>
   <img src="icons/icon1.gif" align="top" 
        id="icon" name="icon"/>
 </select>
</form>

6. 在網頁 HTML 的檔頭區，建立底下的 JavaScript 程式函數：

<script language="javascript">
<!--
function swapImg (path){
var URL = document.icon_form.icon_menu.options
     [document.icon_form.icon_menu
     .selectedIndex].value;
document.icon_form.icon.src = path + URL;
}
//-->
</script>

這個名叫swapImg的自訂函數，將接受一個代表圖檔路徑的參數（path），函數裡的區域變數 URL 將存放下拉式選單中，被選取項目的資料值，也就是圖檔的檔名。其中的 options 代表選單項目的集合（陣列），selectedIndex 則是目前選取項目的索引編號（從 0 開始）。 value 則是「數值」的意思。

7. 最後，在下拉式選單的 <select> 標籤之中，輸入底下的 onChange 事件處理常式，這個事件將在用戶改變選項時被觸發：

<select name="icon_menu" id="icon_menu"
        onchange="swapImg('icons/')">

完成的範例檔請參閱本文附件的 pullDown.htm。

JavaScript 程式參考網站

底下是一些收藏許多 JavaScript 程式教學與範例的網站，請讀者自行探索：

W3 Schools 的 JavaScript 教學：優良且淺顯易懂的教學。
Dynamic Drive網站：這是最知名、最豐富的 JavaScript 和動態網頁（DHTML）程式收集網站之一。
Earth Web t網站的 JavaScript 程式範例
WebReference 網站的 JavaScript 教學文件，也收集許多 JavaScript 的相關資源連結。

11 thoughts on “JavaScript程式基本範例”

條子表示:

2005/11/099:05 下午

:mrgreen::mrgreen:
在老師這邊學到好多東西。
老師那些「改造」真利害，崇拜指數又加 20% 哈哈哈
真羨慕老師的小孩。:evil:

回覆
tony表示:

2006/05/2811:05 下午

請問一下「使用下拉式選單替換影像」
這個可以直接替換成swf格式嗎？
我改了一下程式碼好像跑不起來
＜EMBED src=”icons/red.swf” style=”LEFT: 20px; POSITION: absolute; TOP: 100px” align=right width=800 height=800 type=application/x-shockwave-flash ; quality=”high” wmode=”transparent” autostart=”false” ; id=”icon” name=”icon”＞
是沒辦法直接如此更改？
還是？
謝謝啦！

回覆
cubie表示:

2006/06/024:11 下午

建議直接用Flash來製作下拉式選單。因為不同瀏覽器對於外掛程式的處理機制並不相同。用Flash來切換Flash內容會簡單很多。

底下是一個基本的範例提供你參考，可以用在IE瀏覽器上，更好的方法應該是用SWFObj(http://blog.deconcept.com/swfobject/)。

先在 <head> 區放置底下的JavaScript程式：

function switchSwf(fileName) {
document.mySWF.movie = “swf/” + fileName;
}

內文區的程式：

<object id="mySWF" name="mySWF" …省略>
<param name="movie" value="swf/a.swf" />
<embed src="swf/a.swf" …省略></embed>
</object>
</p>
<a href="#" onclick="switchSwf(‘a.swf’);">a.swf</a>
<br />
<a href="#" onclick="switchSwf(‘b.swf’);">b.swf</a>

回覆
no name表示:

2006/08/037:52 下午

請問老師知道甚麼javascript希望回信:roll:

回覆
cubie表示:

2006/08/041:58 上午

抱歉，不瞭解你的意思…？

回覆
加減表示:

2007/12/1510:00 上午

之前就一指苦惱”下拉式選單替換影像”這個東西要怎麼用

在這裡終於學會了..真是太感謝老師了:razz:

回覆
cubie表示:

2007/12/1510:29 上午

不客氣 😉

回覆
steak表示:

2009/07/3112:35 下午

請問老師 :

我要傳送一字串如下

TextSendText.vaule = 字串
SendText()

會傳送給其他使用者

但是我不至到可以用什麼指令來接收 SendText裡面的值

回覆
cubie表示:

2009/07/3111:29 下午

你的意思是傳給伺服器端的程式嗎？

回覆
Ida Lu表示:

2011/08/1912:18 下午

想要請問如何使用javascript更改select的外在樣式，
我有看過別的網站有使用過

回覆
cubie表示:

2011/08/192:12 下午

你的意思是透過選單，動態切換CSS樣式嗎？建議使用jQuery程式庫，它的.toggleClass()方法可動態切換CSS類別，說明與範例程式請參閱：

http://api.jquery.com/toggleClass/

thanks,
jeffrey

回覆