「動態網頁案例研究」的互動程式補充說明。
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具有一個稱為「調換影像」的行為指令，能動態調換指定的影像。
底下的範例將說明如何自行撰寫一個陽春型的調換影像程式：
首先我們要知道插入影像的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>
使用下拉式選單替換影像
本節將採用 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/')">
沒有留言:
張貼留言