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 程式教學與範例的網站,請讀者自行探索:

Posts created 467

11 thoughts on “JavaScript程式基本範例

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

  2. 請問一下「使用下拉式選單替換影像」
    這個可以直接替換成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”>
    是沒辦法直接如此更改?
    還是?
    謝謝啦!

  3. 建議直接用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>

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

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

  5. 請問老師 :

    我要傳送一字串 如下

    TextSendText.vaule = 字串
    SendText()

    會傳送給其他使用者

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top