Transcript JavaScript
.......... JavaScript 資策會教育訓練處 楊宏文 hubert Yang [email protected] .......... .......... 內建物件 .......... .......... 內建物件(built-in object)的種類 www.hubert.idv.tw •陣列物件(Array object)。 •布林物件(Boolean object)。 •日期物件(Date object)。 •函數物件(Function object)。 •數學物件(Math object)。 •數字物件(Number object)。 •字串物件(String object)。 .......... .......... 陣列物件(Array Object) www.hubert.idv.tw •建立陣列的語法如下。 陣列名稱 = new Array ([陣列元件個數]) 陣列名稱 = new Array ([陣列元件一,陣列元件二…..]) .......... .......... 陣列物件(Array Object) •使用陣列的語法如下。 陣列名稱.特性 陣列名稱.方法(參數群) .......... www.hubert.idv.tw .......... 陣列物件特性 www.hubert.idv.tw •陣列物件可搭配的特性如下。 length prototype .......... ->陣列物件的長度 ->原型。用於製作特殊的特性 .......... 陣列物件方法 www.hubert.idv.tw •陣列物件可使用的方法如下。 eval() ->將指定的引數(運算式)計值 concat() ->傳回將所有元素結合的完整字串 join() ->傳回將所有元素結合的完整字串 reverse() ->將所有元素反轉 sort([數值比較]) ->將所有元素由小到大排序 toString() ->傳回以字串表示所有元素 valueOf() ->傳回以數值表示所有元素 .......... .......... 陣列範例一 www.hubert.idv.tw <Script> var classId = new Array(3) classId[0] = "Oracle" classId[1] = "Internet" classId[2] = "JavaScript" document.write(classId,"<br>") document.write(classId.reverse().join(' & '),"<br>") document.write(classId.sort(),"<br>") document.write(classId.sort().reverse(),"<br>") </script> .......... .......... 常見的錯誤 <script> var classId = new Array[3]; classId[0] = "Oracle"; classId[1] = "Internet"; classId[2] = "JavaScript"; document.write("第二個元素是", classId[1], "<br>"); </script> .......... www.hubert.idv.tw .......... 陣列範例二 www.hubert.idv.tw <script> var a = new Array(7,3,6,5); for (var i=0; i<a.length; i++); document.write("a[", i, "] = ", a[i], "<BR>"); </script> .......... .......... 陣列範例三 - 二維陣列 www.hubert.idv.tw <script> var a = new Array(3); a[0]=new Array(7,3,6,5); a[1]=new Array(2,9,0,6); a[2]=new Array(7,9,6,7); for (var i=0; i<3; i++) { for (var j=0; j<4; j++) document.write("a[", i, "][", j, "] = ", a[i][j], "<BR>"); } </script> .......... .......... 陣列範例四 - 動態建立陣列 www.hubert.idv.tw <Html> <Script> var i = 0; var nameArray = new Array() function add() { nameArray[i]=document.forms[0].elements[0].value alert ("第"+i+"個元素為"+nameArray[i]) i++ } function show() { alert (nameArray.join()) } </Script> <Body><Form> <input type=text> <input type=button value="加入陣列" onClick=add()> <input type=button value="顯示陣列值" onClick=show()> </Form></Body></Html> .......... .......... 常見的錯誤 www.hubert.idv.tw <script> var score = new Array(50, 80, 35, 100); document.write("成績由高分到低分排列："); document.write(score.sort().reverse()); </script> sort() 是依字元值 大小進行排列 .......... .......... 數值的排序 www.hubert.idv.tw <script> function compareNumbers(a, b){ return a - b; } var score = new Array(50, 80, 35, 100); document.write("成績由高分到低分排列："); document.write(score.sort(compareNumbers).reverse()); </script> .......... .......... 練習2-1 www.hubert.idv.tw 依下列要求修改上例的輸出結果： 1.寫入陣列後自動將Text欄位清空， 以待下一筆輸入。 2.顯示陣列值時，加上適當的說明。 如：第一個陣列為“Hubert”。 3.修飾輸出入畫面 (Lay out)。 .......... .......... 練習2-2 www.hubert.idv.tw 依下列要求修改練習1-4通訊錄的例子： 1. 動態地寫入通訊錄資料。 2. 寫入陣列後自動將Text欄位清空，以 待下一筆輸入。 3. 修飾輸出入畫面 (Lay out)。 .......... .......... 日期物件(Date Object) www.hubert.idv.tw •建立日期物件的語法如下。 日期物件名稱 = new Date () 日期物件名稱 = new Date (“月, 日, 年”) 日期物件名稱 = new Date (年, 月, 日, 時, 分, 秒) .......... .......... 日期物件(Date Object) •使用日期物件的語法如下。 日期物件名稱.特性 日期物件名稱.方法(參數) .......... www.hubert.idv.tw .......... 日期物件方法(1)- 取得時間(GET) www.hubert.idv.tw •日期物件可使用的方法如下。 getYear() ->傳回年份數 getMonth() ->傳回月份數(0-11) getDate() ->傳回日數(1-31) getDay() ->傳回星期數(0-6) getHours() ->傳回時數(0-23) getMinutes() ->傳回分數(0-59) getSeconds() ->傳回秒數(0-59) getTime() ->傳回自1970/1/1 0:0:0算起之毫秒數 getTimezoneOffset()->傳回當地地區時間與GMT的差值 .......... .......... 日期物件方法(2)- 設定時間(SET) www.hubert.idv.tw •日期物件可使用的方法如下。 setYear(年數) setMonth(月數) setDate(日數) setHours(時數) setMinutes(分數) setSeconds(秒數) ->設定日期物件為指定年份數 ->設定日期物件為指定月份數 ->設定日期物件為指定日數 ->設定日期物件為指定時數 ->設定日期物件為指定分數 ->設定日期物件為指定秒數 toGMTString() ->轉換日期物件為GMT格式的字串 toString() ->轉換日期物件為當地時區格式的字串 .......... .......... 日期物件範例一 <Script> var now = new Date(); document.write(now); </Script> .......... www.hubert.idv.tw .......... 日期物件範例二 www.hubert.idv.tw <Script> var today = new Date(); var month = today.getMonth()+1; var date = today.getDate(); var day = today.getDay(); document.write("今天是"); document.write(month, "月"); document.write(date, "日"); document.write("星期", day); </Script> .......... .......... 日期物件範例三 www.hubert.idv.tw <Script> var now = new Date(); var day = now.getDay(); var dayName; if (day == 0) dayName = "星期日"; else if (day == 1) dayName = "星期一"; else if (day == 2) dayName = "星期二"; else if (day == 3) dayName = "星期三"; else if (day == 4) dayName = "星期四"; else if (day == 5) dayName = "星期五"; else dayName = "星期六"; document.write ("今天是快樂的",dayName); </Script> .......... .......... 日期物件範例四 www.hubert.idv.tw <Script> var now = new Date(); var hour = now.getHours(); if (hour > 4 && hour < 19){ document.bgColor = "#FFFFFF"; document.fgColor = "#000000"; document.write ("善用每秒鐘作最有效率的事！"); } else{ document.bgColor = "#000000"; document.fgColor = "#FFFFFF"; document.write ("休息一下，充電後再出發。"); } </Script> .......... .......... 日期物件範例五 www.hubert.idv.tw <script> var msperday = 86400000; var today = new Date(); var yesterday = new Date(today-msperday); document.write("<li>昨天是"+ (yesterday.getMonth()+1)+ "/"+yesterday.getDate()); document.write("<li>今天是"+ (today.getMonth()+1)+ "/"+today.getDate()); </script> .......... .......... 綜合範例 – array & date www.hubert.idv.tw <Script> var dayName = new Array(7) dayName[0] = "日"; dayName[1] = "一" ; dayName[2] = "二"; dayName[3] = "三" ; dayName[4] = "四"; dayName[5] = "五" ; dayName[6] = "六"; var now = new Date(); var day = now.getDay(); document.write(“今天是快樂的星期" + dayName[day]); </Script> .......... .......... 數學物件(Math Object) 提供數學函式及常數。 .......... www.hubert.idv.tw .......... 數學物件特性 www.hubert.idv.tw •數學物件可搭配的特性如下。 E LN2 LN10 LON2E LON10E PI SORT1_2 SORT2 .......... ->自然對數(約2.71828) ->2的自然對數(約0.69315) ->10的自然對數(約2.30259) ->以2為底e的自然對數(約1.44270) ->以10為底e的自然對數(約0.43429) ->圓周率(約3.1415926) ->1/2的平方根(約0.70711) ->2的平方根(約1.41421) .......... 數學物件方法(1) www.hubert.idv.tw •數學物件可使用的方法如下。 sin (數值) cos (數值) tan (數值) acos (數值) asin (數值) atan (數值) .......... ->傳回正弦三角函數值 ->傳回餘弦三角函數值 ->傳回正切三角函數值 ->傳回反餘弦三角函數值 ->傳回反正弦三角函數值 ->傳回反正切三角函數值 .......... 數學物件方法(2) www.hubert.idv.tw •數學物件可使用的方法如下。 abs (數值) exp (數值) log (數值) random () sqrt (數值) .......... ->傳回絕對值 ->傳回指數函數值 ->傳回以e為底的自然對數值 ->傳回0(含)至1(不含)的隨機值 ->傳回平方根值 .......... 數學物件方法(3) www.hubert.idv.tw •數學物件可使用的方法如下。 round (數值) ceil (數值) floor (數值) max (數值1,…,數值N) min (數值1,…,數值N) pow (底數,指數) .......... ->傳回四捨五入後的值 ->傳回無條件進位後的值 ->傳回無條件捨去後的值 ->傳回最大的數值 ->傳回最小的數值 ->傳回底數之指數次方值 .......... 數學物件範例 <Script> with(document) { write("max(3,5) write("min(3,5) write("亂數 write("PI write("sin(30') write("cos(30') } </Script> .......... www.hubert.idv.tw = ",Math.max(3,5),"<BR>") = ",Math.min(3,5),"<BR>") = ",Math.random(),"<BR>") = ",Math.PI,"<BR>") = ",Math.sin(Math.PI/6)*100,"<BR>") = ",Math.cos(Math.PI/6)*100) .......... 綜合範例：日期與數學物件 www.hubert.idv.tw <Script> var now = new Date() var firstDay = new Date(2002,2,1,0,0,0) var duration = now - firstDay var msPerDay = 24 * 60 * 60 * 1000 //換算成毫秒 days = Math.round(duration/msPerDay) alert("我學習JavaScript已經有"+days+"天了") </Script> .......... .......... 練習2-3 www.hubert.idv.tw 依下列要求修改上例的輸出結果： 1. 使用者可以自行輸入起始日。 2. 修飾輸出入畫面 (Lay out)。 .......... .......... 數學物件範例 – 動態顯示格言 www.hubert.idv.tw <Script> motto = new Array(3); motto[0] = "只隔著牆對你笑，而不爬過來的才是好鄰居"; motto[1] = "買人壽保險和賭徒最大的不同是：前者死了才 會贏，後者贏了才會死"; motto[2] = "民進黨和國民黨最大的不同是：民進黨拿了錢 什麼都幹，國民黨拿了錢什麼都不幹"; var random = Math.random() * 10; var index = Math.floor(random)%3; document.write(motto[index]); </Script> .......... .......... 數學物件範例 – 動態顯示圖片 www.hubert.idv.tw <script> function pickapic(){ var picname = new Array() picname[0] = "a.gif"; picname[1] = "b.gif"; picname[2] = "c.gif"; picname[3] = "d.gif"; picname[4] = "e.gif"; picname[5] = "f.gif"; picname[6] = "g.gif"; picname[7] = "h.gif"; var which = Math.floor(Math.random()*100)%8; random_pic.src = picname[which]; } </script> <body onload="pickapic()"> <img name="random_pic"> </body> .......... .......... 字串物件 (String Object) •建立字串物件的語法如下。 變數 = “字串” 字串物件名稱 = new String (字串) .......... www.hubert.idv.tw .......... 字串物件 (String Object) •使用字串物件的語法如下。 字串物件名稱.特性 字串物件名稱.方法(參數) .......... www.hubert.idv.tw .......... 字串物件特性 www.hubert.idv.tw •字串物件可搭配的特性如下。 length prototype .......... ->傳回字串長度 ->原型。用於製作特殊的特性 .......... 字串物件方法(1) www.hubert.idv.tw •字串物件可使用的方法如下。 big() blink() bold() fixed() italics() small() strike() sub() sup() ->傳回大字體 ->傳回閃爍字體 ->傳回粗黑字體 ->傳回打字機字體 ->傳回斜體字體 ->傳回小字體 ->傳回劃掉字體 ->傳回下標字 ->傳回上標字 .......... <BIG> <BLINK> <B> <TT> <I> <SMALL> <STRIKE> <SUB> <SUP> .......... 字串物件方法(2) www.hubert.idv.tw •字串物件可使用的方法如下。 link(連接網址) ->產生超連結 fontcolor(color) ->指定使用某顏色 fontsize(size) ->指定使用某字級大小 indexOf(搜尋值,[起始位置]) ->由左至右搜尋該字串第一次出現的位置 lastIndexOf(搜尋值,[起始位置]) ->由右至左搜尋該字串第一次出現的位置 .......... .......... 字串物件方法(3) www.hubert.idv.tw •字串物件可使用的方法如下。 replace(x,y) ->用字串y 取代字串x toLowerCase() ->轉換成小寫 toUpperCase() ->轉換成大寫 charAt(index) ->傳回索引值所指的字元 substring(索引值A,索引值B) ->傳回由索引值A至索引值B前一字元 所構成的字串 substr(索引值A, 字串長度) ->傳回由索引值A開始的子字串 .......... .......... 字串物件方法(4) www.hubert.idv.tw •字串物件可使用的方法如下。 slice(起始值 [, 結束值]) ->將字串從指定的字元位置開始, 至 指定的位置結束, 摘錄成一新的字串 split(“字元”) ->將字串以指定之字元為單位, 切成 數個子字串, 並存成陣列 concat(字串2 [, 字串3]) ->將幾段字串結合成完整字串 .......... .......... 字串物件範例一 <Script> var str = "Hello!"; var num = 12345; var yahoo = "來去Yahoo"; with(document){ write(str.big(),"<BR>"); write(num.toString().bold(),"<BR>"); write(yahoo.link("http://tw.yahoo.com/")); } </Script> .......... www.hubert.idv.tw .......... 字串物件範例二 www.hubert.idv.tw <Script> var str1 = "10"; var str2 = "20"; with(document){ write(str1 + str2,"<BR>"); write(Number(str1) + Number(str2),"<BR>"); } </Script> .......... .......... 字串物件範例三 www.hubert.idv.tw <Script> var sayHello = "你好嗎？"; document.write(sayHello.fontcolor("#ff00ff"), "<BR>"); document.write(sayHello.replace('你','妳')); document.write("共有", sayHello.length, "個字。<BR>"); </Script> .......... .......... 字串物件範例四 www.hubert.idv.tw <Script> var hello = "HELLO!" with(document) { write(hello,"<BR>") write("第1個字元為",hello.charAt(0),"<BR>") write("L在第",hello.indexOf("L"),"個字元","<BR>") write("L在第",hello.lastIndexOf("L"), "個字元","<BR>") write("k在第",hello.indexOf("k"),"個字元","<BR>") write(hello.fontsize("5"),"<BR>") write("擷取第2至第4個字元:",hello.substring(1,4),"<BR>") write("擷取從第2個字元開始的3個字元:", hello.substr(1,3),"<BR>") } </Script> .......... .......... 範例五 – 格式檢查 www.hubert.idv.tw <Script> function isEmail() { if (document.form1.text1.value == "") alert("請填寫你的電子郵件地址。"); else if (document.form1.text1.value.indexOf("@") == -1) alert("沒有\"@\"符號，不算電子郵件地址。"); else alert("檢查完成！"); } </Script> <form name="form1"> 請輸入你的 EMail 位址： <input type="text" name="text1"> <input type="button" value="檢查" onClick="isEmail()"> </form> .......... .......... 範例六 – 格式檢查 www.hubert.idv.tw <Script> function isEmail(form) { if (form.text1.value == "") alert("請填寫你的電子郵件地址。"); else if (form.text1.value.indexOf("@") == -1) alert("沒有\"@\"符號，不算電子郵件地址。"); else alert("檢查完成！"); } </Script> <form> 請輸入你的 EMail 位址： <input type="text" name="text1"> <input type="button" value="檢查" onClick="isEmail(this.form)"> </form> .......... .......... 範例七 – 字串切離 <script> var str = "Hubert Yang"; var strarray = str.split(" "); alert(strarray[0] + ", 你好"); </script> .......... www.hubert.idv.tw .......... 範例八 – 擷取子字串 www.hubert.idv.tw <script> var str = "0123456789"; document.write(str, "<br>"); document.write("擷取第3至第8個字"); document.write(str.slice(2, 8), "<br>"); document.write("擷取第3至後面算來第3個字"); document.write(str.slice(2, -2)); </script> .......... .......... 範例九 – 隨機超連結 www.hubert.idv.tw <script> var hotText1 = "YAHOO! KIMO"; var hotText2 = "Google"; var url1 = "http://tw.yahoo.com/"; var url2 = "http://www.google.com/"; var num = Math.random(); var whichone = Math.floor(num * 100) % 2; if (whichone==0) document.write(hotText1.link(url1)); else document.write(hotText2.link(url2)); </script> .......... .......... 範例十 – 字串的結合 <script> var str1 = "Hello!"; var str2 = " I am"; var str3 = " Hubert."; var str4 = str1.concat(str2, str3); document.write(str4); </script> .......... www.hubert.idv.tw .......... 範例十一 – 產生樂透數字 www.hubert.idv.tw <script> luckynumber = new Array(); for (var i=0; i<6; i++){ newnumber = Math.round(Math.random()*42 + 1); //個位數前面補0; newnumber = (newnumber.toString().length==1)? "0"+newnumber : newnumber; //數字不得重複出現; if (luckynumber.join().indexOf(newnumber)==-1) luckynumber[i] = newnumber; else i--; } document.write(luckynumber.join()); </script> .......... .......... 練習2-4 www.hubert.idv.tw 依下列要求修改前例的輸出結果： 1.以中文字方式表達 ex.今天是五月一日星期日。 2.修飾輸出入畫面 (Lay out)。 .......... .......... 內建函數 .......... .......... 內建函式 (built-in function) 的種類 www.hubert.idv.tw • isNaN() • Number() • parseInt() • parseFloat() • escape() • Unescape() • eval() .......... .......... isNaN() www.hubert.idv.tw • 測試指定的引數字串是否為數值。 isNaN(測試值) • 意思是 “is Not a Number?”，回 傳布林值(true/false)。 .......... .......... 範例 - isNaN www.hubert.idv.tw <Script> var a = 10 var b = 'hubert' var c = a + b document.write("<li> a不是數值嗎？", isNaN(a) ,"<br>") document.write("<li> b不是數值嗎？", isNaN(b) ,"<br>") document.write("<li> c不是數值嗎？", isNaN(c)) </Script> .......... .......... Number() www.hubert.idv.tw • 將引數內的物件轉換成數值。 Number(物件) •如果遇到不合法的字元，傳回NaN (Not a number)。 .......... .......... parseInt() www.hubert.idv.tw •剖析引數字串並傳回指定基底的整數。 parseInt(數值, [基底]) •如果遇到不合法的字元，馬上停止剖析 ，傳回已經剖析過的數值。 .......... .......... parseInt() www.hubert.idv.tw •基底代表幾進位制。(可為2,8,10,16) •如果省略基底或指定為0，則： 1.若字串起頭為“0x”或“0X”，基底為 16 2.若字串起頭為“0”，基底為8 3.若字串起頭不為以上三種，基底為10 .......... .......... 範例 – 數值與字串型態轉換 www.hubert.idv.tw <Script> var a = 10; var b = '20'; document.write("<li> a + b = ", a + b); document.write("<li> a + b = ", a + Number(b)); document.write("<li> a + b = ", a.toString() + b); </Script> .......... .......... 範例 – 數值與字串型態轉換 www.hubert.idv.tw <Script> var str = "32C"; document.write("將'32C'轉成數值"); document.write("<li>利用 Number()轉換：", Number(str)); document.write("<li>利用 parseInt()轉換： ", parseInt(str)); </Script> .......... .......... parseFloat() www.hubert.idv.tw •剖析引數字串並傳回浮點數。 parseFloat(數值) •如果遇到不合法的字元，馬上停止剖析 ，傳回已經剖析過的數值。 .......... .......... escape() www.hubert.idv.tw • 將非文數字轉換成ASCII碼。 escape(非文數字) • 以“%xx”的模式回應。 .......... .......... Unescape() www.hubert.idv.tw • 將ASCII字串轉成ISO Latin-1字元表 中的字元。 Unescape(%參數) • 以“%xx”的模式傳入。 .......... .......... eval() www.hubert.idv.tw • 執行參數字串中所包含的運算式。 • 強制轉換成數值。 eval(運算式) •如果遇到不合法的字元，會發生錯誤。 .......... .......... 範例 - eval www.hubert.idv.tw <Script> var a = 10; var b = '20‘; document.write("<li> a + b = ", a + b, "<br>"); document.write("<li> a + b = ", a + eval(b), "<br>"); document.write("<li> a + b = ", a.toString() + b); </Script> .......... .......... 事件處理程序 .......... .......... JavaScript 的事件處理程序 www.hubert.idv.tw • “事件(event)”是使用者對瀏覽器或網 頁內容所做的某個動作。 • 基於利用 Script 處理網頁的大量需求， HTML 4.01規格中定義了許多事件處 理程序 (event handlers)。每個事件都 有不同的 觸發(啟動)條件。 .......... .......... 事件 Abort Blur Change Click DblClick DragDrop Error Focus Load KeyPress KeyDown .......... www.hubert.idv.tw KeyUp MouseDown MouseUp MouseOver MouseOut MouseMove Resize Reset Select Submit Unload .......... 事件處理程序 onAbort onBlur onChange onClick onDblClick onDragDrop onError onFocus onLoad onKeyPress onKeyDown .......... www.hubert.idv.tw onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onResize onReset onSelect onSubmit onUnload .......... onAbort 啟動 滑鼠指向 .......... www.hubert.idv.tw 放棄載入影像時 ，並按下滑鼠左鍵時。 .......... onBlur 啟動 www.hubert.idv.tw 失去焦點(lose focus)時 1. Blur：意指由清楚變成模糊，代表由 『作用中』變成『非作用中』。 2.當滑鼠指標由焦點的視窗、框架或框 架組離開時。 3.滑鼠指標離開表格中的某個元件時。 相關物件：document , frame , text , textarea , select .......... .......... onChange 啟動 內容改變時 • 通常用在表單元件中。 相關物件：text , textarea , select .......... www.hubert.idv.tw .......... onFocus 啟動 www.hubert.idv.tw 成為焦點(gain focus)時 1. focus：意指由模糊變成清楚，代表由 『非作用中』變成『作用中』。 2.滑鼠指標進入視窗、框架或框架組時。 3.滑鼠指標進入表格中的元件時。 相關物件：document , frame , text , textarea , select .......... .......... 事件處理程序 - 範例一 www.hubert.idv.tw <HTML> <BODY onBlur="document.bgColor='blue'" onFocus="document.bgColor='red'"> <FORM> 姓名：<INPUT TYPE=text onBlur="alert('謝謝您的填寫…')"> </BODY> </HTML> .......... .......... onLoad 啟動 www.hubert.idv.tw 載入相關物件時 1.當瀏覽器載入視窗時。 2.當瀏覽器載入框架組中的所有框架時。 3.當瀏覽器載入影像時。 相關物件：window , document , frame , image .......... .......... onUnload 啟動 www.hubert.idv.tw 卸載(離開)相關物件時 相關物件：window , document , frame , image .......... .......... 事件處理程序 - 範例二 <Html> <Body onLoad="alert('歡迎光臨!')" onUnload=alert("歡迎下次再來!")> </Body> </Html> 也可以寫成 <script> document.onLoad = alert(“歡迎光臨!”) </script> .......... www.hubert.idv.tw .......... onError 啟動 發生錯誤時 •當文件無法正確載入時。 •當影像無法正確載入時。 .......... www.hubert.idv.tw .......... 事件處理程序 - 範例三 www.hubert.idv.tw <Script> function HandelError(img){ alert ("無法載入" + img.name + "，\n載入替代圖檔...") img.src = "error.gif" } </Script> <IMG SRC="test.gif" NAME=Image1 onError="HandelError(this)"> .......... .......... onMouseDown 啟動 www.hubert.idv.tw 按下滑鼠指標時 相關物件： 1. 所有表單元件(checkbox 、 radio 、 button) 。 2. 超連結點。 3. 文字、圖形。 .......... .......... 範例四 – 保護原始碼 www.hubert.idv.tw <script> function showMsg(){ if (event.button == 2) alert("版權所有，請勿複製本站內容！") } </script> <body onMouseDown = showMsg()> </body> .......... .......... onMouseOut 啟動 www.hubert.idv.tw 滑鼠指標離開時 相關物件： 1. 所有表單元件(checkbox 、 radio 、 button) 。 2. 超連結點。 3. 文字、圖形。 .......... .......... onMouseOver 啟動 www.hubert.idv.tw 滑鼠指標通過(進入)時 相關物件： 1. 所有表單元件(checkbox 、 radio 、 button) 。 2. 超連結點。 3. 文字、圖形。 .......... .......... 範例五 – 動態項目符號 www.hubert.idv.tw <Script> function show(){ star.style.display = '' } function hidden(){ star.style.display = 'None' } </Script> <font id=star style="display:None"> ◆</font> <font color=blue onMouseOver=show() onMouseOut=hidden()>游標</font> .......... .......... 事件處理程序 - 範例六 www.hubert.idv.tw <Html> <Body> <a href="http://www.seed.net.tw" onMouseOver="alert('goto SeedNet!')">SeedNet</a> <a href="http://www.hinet.net" onMouseOver="alert('goto Hinet!')">Hinet</a> <img src="seednet.gif" onMouseOver="location='http://www.seed.net.tw'"> </Body> </Html> .......... .......... 事件處理程序 - 範例七 www.hubert.idv.tw <Html> <Body> <a href="http://www.seed.net.tw" onMouseOver="status='goto SeedNet!';return true">SeedNet</a> <a href="http://www.hinet.net" onMouseOver="status='goto HiNet!';return true">Hinet</a> </Body> </Html> 如果未使用 return true, 則 所定義的 status 顯示字樣將無法 取代原連結位址 .......... .......... 事件處理程序 - 範例八 www.hubert.idv.tw <Html> <Body> <a href="http://www.seed.net.tw" onMouseOver = " status= '前往seednet!' ;return true " onMouseOut ="status= ' ' ">SeedNet</a> <a href="http://www.hinet.net" onMouseOver =" status= '前往hinet!';return true " onMouseOut ="status= ' ' ">Hinet</a> </Body> </Html> .......... .......... 練習2-5 達成下述之輸出結果： 1.滑鼠通過 seednet 連 結字樣上方時，顏色 改變。 2.狀態列顯示提示字樣 。 .......... www.hubert.idv.tw .......... onClick 啟動 www.hubert.idv.tw 在元件上點一下滑鼠左鍵時。 相關物件： 1. 所有表單元件(checkbox 、 radio 、 button) 。 2. 超連結點(link) 。 3. 圖形或文字。 4. 其他所有的 HTML 標籤均可(ex.body…)。 .......... .......... 事件處理程序 www.hubert.idv.tw <FORM NAME="form1"> <INPUT TYPE="button" VALUE="請按我..."> </FORM> <Script> function sayHello() { alert("Hello! World") } document.form1.onclick = sayHello </Script> .......... .......... 事件處理程序 www.hubert.idv.tw <script> function turn(obj){ if(obj.direction=="left") obj.direction = "right"; else obj.direction = "left"; } function changeto(what){ document.all.tags("marquee").item(0).behavior=what; } </script> <marquee onmouseover="turn(this)">Hubert</marquee> <input type="button" value="捲動" onclick="changeto('scroll')"> <input type="button" value="滑動" onclick="changeto('slide')"> <input type="button" value="交替" onclick="changeto('alternate')"> .......... .......... onDblClick 啟動 在元件上點兩下滑鼠左鍵時。 相關物件： 1. 所有 HTML 標籤均可。 .......... www.hubert.idv.tw .......... 範例九 – 文字超連結法 www.hubert.idv.tw <H2> <font face="arial" onMouseOver=this.color='red' onMouseOut=this.color='black' onClick=location="http://www.seed.net.tw" >Seednet</font><br> <font face="arial" onMouseOver=this.color='red' onMouseOut=this.color='black' onClick=location="http://www.hinet.net" >Hinet</font> </H2> .......... .......... 範例十 – 文字超連結法 <Script> function font1(x){ x.face = "arial black" x.size = "4" } function font2(x){ x.face = "arial" x.size = "3" } </Script> … 接下頁 … .......... www.hubert.idv.tw .......... 範例十 – 文字超連結法 (續) www.hubert.idv.tw … 接上頁 … <font face="arial" onMouseOver=font1(this) onMouseOut=font2(this) onClick=location="http://www.seed.net.tw" >Seednet</font><br> <font face="arial" onMouseOver=font1(this) onMouseOut=font2(this) onClick=location="http://www.hinet.net" >Hinet</font> .......... .......... onReset 啟動 按下重置(reset)鈕時。 相關物件：form .......... www.hubert.idv.tw .......... onSubmit 啟動 按下傳送(submit)鈕時。 相關物件：form .......... www.hubert.idv.tw .......... 事件處理程序 - 範例十一 www.hubert.idv.tw <Html> <Body> <Form onReset ="alert('你按了Reset')" onSubmit="alert('你按了Submit')"> <input type=reset> <input type=submit> <input type=button value="按鈕" onClick="alert('你按了button')"> </Form> </Body> </Html> .......... .......... 事件處理程序 – 控制CSS www.hubert.idv.tw <SCRIPT> function mOver() { document.all.tags("FONT").item(0).style.color = "red" } function mOut() { document.all.tags("FONT").item(0).style.color = "black" } </SCRIPT> <FONT onMouseOver="mOver()" onMouseOut="mOut()"> JavaScript</FONT> <FONT onMouseOver="mOver()" onMouseOut="mOut()"> HUBERT</FONT> .......... .......... 事件處理程序 – 控制CSS www.hubert.idv.tw <SCRIPT> function mOver() { document.all("a").style.color = "red" } function mOut() { document.all("a").style.color = "black" } </SCRIPT> <FONT ID="a" onMouseOver="mOver()" onMouseOut="mOut()"> JavaScript</FONT> <FONT ID="b" onMouseOver="mOver()" onMouseOut="mOut()"> HUBERT</FONT> ..........