Introduction to JavaScript, NTUPT

滑鼠的控制端賴下述的 event handler 指令來產生各種變化，以增加網頁的特效：

按滑鼠左鍵的變化： OnClick 指令
滑鼠經過或離開的變化： OnMouseOver 指令、OnMouseOut 指令
開啟網頁的變化：OnLoad 指令
關閉網頁的變化： OnUnload 指令
選擇改變的變化： OnChange 指令
資料上傳的變化： OnSubmit 指令
重設視窗大小的變化： OnResize 指令

按滑鼠左鍵的變化

按滑鼠左鍵時會出現想要的動作函數變化是可由 OnClick 指令來產生，通常用在按鈕 <input> 之內，或是超連結 <a href=...> 之內，並不須要使用 <script> </script>。如果放在超連結 <a href=...> 之內，而不欲使網頁產生變化時，則超連結的 href 參數需連結至原網頁位址或使用空白 (href=' ')。 OnClick 指令所能產生的動作可以是

出現小視窗 (window.open)、提示匣 (alert)、詢問匣 (confirm)

執行功能函數 (function( ))

關閉視窗 (window.close)

用途	JavaScript 語法	實例
在按鈕上按一下，出現提示匣。	<form> <input type=button value="按鈕上的文字" onclick="alert('提示匣內容')"> </form>	你累了嗎？ 3 ´ 5 =？
定義功能函數為出現提示匣，再用按鈕指令去開啟功能函數，則會出現提示匣。詳見功能函數的產生提示匣一節。	<script> function 功能函數名稱( ) {alert("提示匣內容")} </script> <form> <input type=button value="按鈕文字" onclick="功能函數名稱( )"> </form>	按按看九九乘法
定義功能函數為出現小視窗，再用按鈕指令去開啟功能函數，則會出現小視窗。詳見功能函數設定視窗變化一節。	<script> function 功能函數名稱 ( ) { window.open("小視窗位址","小視窗名稱", config="width=寬度,height=高度")} </script> <form> <input type=button value="按鈕文字" onclick="功能函數名稱( )"> </form>	再次提醒你猜猜我是誰？
按某個按鈕時，狀態列出現文字變化；按另外一個按鈕時，則出現另一段文字	<form> <input type=button value=按鈕文字 onclick="window.status='文字一' "> <input type=button value=按鈕文字 onclick="window.status='文字二' "> </form>	絕不補考提醒文字
按按鈕時，會至本次開啟網頁之前一頁或次一頁。詳見滑鼠控制之「按滑鼠左鍵」一節。	<form> <input type="button" value="上一頁" onClick="history.back( )"> <input type="button" value="回首頁" onClick="location='首頁位址'"> <input type="button" value="下一頁" onClick="history.forward( )"> </form>	穿梭網頁
按超連結時，先出現一個提示匣，再進行超連結。如超連結至原網頁位址或未連結網址，則使該網頁形同不動。	<a href="超連結的網頁" onclick="alert('提示匣的內容')"> 欲連結的文字或圖片 </a>	你知道嗎？出現提示匣
輸入文字再按按鈕後，會出現含有該輸入文字的提示匣。	<script language=javascript> function 功能函數名稱(變數名稱) { alert(變數名稱.按鈕名稱.value+ "其他文字")} } </script> <form> <input type=text name="按鈕名稱"> <input type=button onclick="功能函數名稱(this.變數名稱)"> </form>	恭喜中獎
定義功能函數為出現提示匣，再用超連結指令去開啟功能函數，則先出現提示匣，再進行超連結。如超連結至原網頁或未連結網址，則使該網頁形同不動。詳見功能函數的產生提示匣一節。	<script> function 功能函數名稱( ) {alert("提示匣內容")} </script> <a href="超連結的網頁位址" onclick="功能函數名稱( )"> 欲連結的文字或圖片 </a>	按這裡
在超連結上按一下，先出現含變數的提示匣，再進行超連結。詳見功能函數的產生提示匣一節。	<script language=javascript> function 功能函數名稱(變數){alert('變數')} </script> <a href="新網頁網址" onclick="功能函數名稱(變數對應值 )"> 超連結字串</a>	你成功了
按超連結，會先出現小視窗。如超連結至原網頁或未連結網址，則使該主網頁形同不動。	<a href="本網頁位址" onclick="window.open('小視窗位址','小視窗名稱', config='height=小視窗高度,width=小視窗寬度')"> 欲連結的文字或圖片</a>	通關密語
按超連結文字，會自動關閉視窗。超連結至空白，表示不欲再開新網頁。	<a href=" " onclick="self.close( )"> 欲連結的文字或圖片 </a>	關閉視窗解釋名詞

滑鼠經過或離開的變化

滑鼠經過或離開時會產生的變化的指令有 onMouseOver 或 onMouseOut 等指令。onMouseOver 是指在滑鼠經過時會出現的變化，而 onMouseOut 則指在滑鼠離開時所出現的變化。

一般而言，onMouseOver 和 onMouseOut 兩個指令設定是放在超連結 <a> 之內。雖為 JavaScript 程式，但不需要使用 <script> </script>。注意：在 <a> 之內如果沒有使用 href=新網頁位址，則表示連結回至原來的網頁，亦即滑鼠變化產生時，網頁內容沒有變化。

在 onMouseOver 和 onMouseOut 兩個指令內，若以分號分開，再加上參數 return true，此作用是使「網頁內容不變」。

用途 JavaScript語法實例

滑鼠經過某段文字時，會自動出現提示匣。 <a onmouseover="alert('提示匣的內容'); return true">
欲產生滑鼠經過變化的文字
</a> 別碰我

滑鼠經過某段文字時，狀態列會自動出現文字變化，離開時再出現另一段文字變化。 <a onmouseover="window.status='字串一'; return true"
onmouseout="window.status='字串二'; return true">
欲產生滑鼠經過變化的文字或圖片
< /a >
滑鼠照過來

滑鼠經過時某圖片時，會變成另一圖片；而滑鼠離開時，會自動變回來。
兩張圖片的大小最好是一樣的尺寸，這樣就具有動畫的效果。 <a onmouseover="document.圖片名稱.src='新圖片位址' "
onmouseout="document.圖片名稱.src='原來圖片位址' ">
<img src="原來圖片位址" name="圖片名稱">
</a> 快樂臉
 功能函數的快樂臉

滑鼠經過時，會改變主體背景顏色。 <script language=javascript>
function 功能函數名稱 {document.bgColor=color }
</script>
<form>
<input type=button onmouseover="功能函數名稱">
</form>
政黨顏色

開啟網頁的變化

OnLoad 指令為開啟網頁時，會先出現的變化，例如：用來提供緊急或最新消息的提示匣。與置於 <head> </head> 之間的 Window.Open 指令極為類似。所不同的是 Window.Open 可直接連結至另一網頁，而 OnLoad 的功能如下：

出現提示匣或詢問匣

執行功能函數或條件函數。

通常 OnLoad 指令置於 <body> 之內，不需要 <script></script> 來區隔程式。

用途 JavaScript語法實例

當網頁開啟時，會直接出現提示匣。 <body onload="alert('提示匣內容')"> 單行的歡迎光臨
 多行的歡迎光臨

當網頁開啟時，會啟動功能函數而出現提示匣。
詳見功能函數的「出現提示匣」一節。 <script>
var 變數名稱一 = "提示匣內容一\n"
var 變數名稱一 = 變數名稱一 + "提示匣內容二\n"
var 變數名稱一 = 變數名稱一 + "提示匣內容三\n"
function 功能函數名稱( ){
alert(變數名稱一 )
</script>
<body onload="功能函數名稱( )">
　進站宣告

自動計算進入本網頁遨遊的時間。詳見舉例說明遨遊時間一
 遨遊時間二

當網頁開啟時，會自動定焦到所欲填寫的表單。
詳見條件函數的「輸入訊息比對」一節。 <head>
<script>
function 功能函數名稱( ) {
document.選單名稱.空白框名稱.focus( );
return;
}
</script>
</head>
<body onload="功能函數名稱( )">
</script>
　定焦輸入姓名

關閉網頁的變化

>OnUnload 指令會造成該網頁之關閉，與 Window.Close 指令或 Self.Close 指令類似。不同的是 Window.Close 只會自動出現詢問是否結束的提示匣， Self.Close 指令會直接關閉，而 OnUnload 指令可以出現自行編輯提示匣或詢問匣。

通常置於 <body> 之內，用來作為結束網頁結束前提醒重要事項用。

用途	JavaScript 語法	實例
當關閉視窗時，會出現可以自行編輯的提示匣。	<body onunload="alert('提示匣內容')">	那麼快走

本網頁於 02/27/2002 製作，並於 2005/11/03更新