1.08k likes | 1.3k Views
. JavaScript. 資策會教育訓練處 楊宏文 ( hubert Yang ) hwyang@iii.org.tw. DOM. www.hubert.idv.tw. 文件物件模式 (DOM). 是所有 built – in object 的階層式集合。 直接對應到瀏覽器握網頁的特性。 每一家廠商各自發展自己的 DOM ,因此,不同瀏覽器的 DOM 並不相同。. www.hubert.idv.tw. Netscape 的 DOM. Document 物件. www.hubert.idv.tw. 文件物件 (Document object).
E N D
.......... .......... JavaScript 資策會教育訓練處 楊宏文(hubert Yang) hwyang@iii.org.tw
.......... .......... DOM
.......... www.hubert.idv.tw .......... 文件物件模式 (DOM) • 是所有built – in object的階層式集合。 • 直接對應到瀏覽器握網頁的特性。 • 每一家廠商各自發展自己的DOM,因此,不同瀏覽器的DOM並不相同。
.......... www.hubert.idv.tw .......... Netscape 的 DOM
.......... .......... Document物件
.......... www.hubert.idv.tw .......... 文件物件(Document object) 1.代表目前的文件資訊。 2.直接對應至HTML的Body標籤組。
.......... www.hubert.idv.tw .......... 本文物件的使用語法 • 使用表單物件的語法如下。 document.特性 document.方法(參數群)
.......... www.hubert.idv.tw .......... 本文物件的特性 • 本文物件可搭配的特性如下: bgColor ->相當於 HTML 的 BGCOLOR alinkColor ->相當於 HTML 的 ALINK linkColor ->相當於 HTML 的 LINK vlinkColor ->相當於 HTML 的 VLINK fgColor ->相當於 HTML 的 TEXT title ->相當於 HTML 的 <title> lastModified ->最近更新日期 URL ->文件的 URL
.......... www.hubert.idv.tw .......... 文件物件的物件階層圖 Document Anchor Applet Area Image Form Link
.......... www.hubert.idv.tw .......... 本文物件範例 – 最近更新時間 • <Script> • document.write("◎本頁最後更新日期: ") • document.write(document.lastModified) • </Script>
.......... .......... Image物件
.......... www.hubert.idv.tw .......... 影像物件(Image object) 1.用於表現一個影像。 2.直接對應至HTML的IMG元件。
.......... www.hubert.idv.tw .......... 影像物件範例 – 影像快取 <Script> //進站時預先載入影像圖檔,供後續其他網頁快取使用 img1 = new Image(); img1.src = "/image1.gif"; img2 = new Image(); img2.src = "/image2.GIF"; </Script>
.......... .......... Form物件
.......... www.hubert.idv.tw .......... 表單物件(Form object) 1.用於定義表單,提供使用者輸入資料。 2.包含許多控制類型。 3.直接對應至HTML的表單元件。
.......... www.hubert.idv.tw .......... 表單物件的物件階層圖 FormButton Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarea
.......... www.hubert.idv.tw .......... 表單物件的使用語法 • 使用表單物件的語法如下。 表單名稱.特性 表單名稱.方法(參數群) forms[索引值].特性 forms[索引值].方法(參數群)
.......... www.hubert.idv.tw .......... 表單物件的特性 • 表單物件可搭配的特性如下: action ->ACTION屬性設定值 elements ->以陣列代表表單內所有元件 encoding ->使用POST傳送時之編碼方式 length ->表單內元件個數 method ->指定傳送方式 (POST/GET) target ->將執行結果於特定視窗內執行
.......... www.hubert.idv.tw .......... 表單物件的方法 • 表單物件可使用的方法如下。 eval() ->執行引數運算式計算 reset() ->模擬按下 reset 按鈕的動作 submit() ->模擬按下 submit 按鈕的動作 toString() ->傳回字串表示值 valueOf() ->傳回數值表示值
.......... www.hubert.idv.tw .......... 本文物件(Text object) • 顯示一個可供輸入的欄位。 • 可使用的事件處理程序: • onBlur, onChange, onFocus • onKeyDown, onKeyUp • onMouseDown, onMouseUp
.......... www.hubert.idv.tw .......... 本文物件相關參數 • type = text //類型為本文 • name = tel //欄位名稱 • value = 03-4257387 //初始值 • size = 20 //欄位大小 • title = 提示值 //提示值 • AccessKey = L //快捷鍵值 • maxlength = 10 //可輸入資料長度 • readonly //指定成為唯讀屬性
.......... www.hubert.idv.tw .......... 表單物件範例 - text(1) <form> 姓名:<input type=text name=name onBlur="alert(this.value+'! 你好')"><BR> 學號:<input type=text name=stdId onKeyDown="alert('學號:'+this.value)"><BR> 班級:<input type=text name=classId onFocus="this.value='JC201'"><BR> </form> 善用 this 來替代物件名稱,可以大幅簡化程式碼內容。
.......... www.hubert.idv.tw .......... 本文物件的物件特性 defaultValue -> 該元件預設值 type -> 該元件類型 name -> 該元件識別名稱 value -> 該元件目前輸入值
.......... www.hubert.idv.tw .......... 表單物件範例 - text(2) <form name=form1> 姓名:<input type=text name=name onBlur="alert('這個表單元件是'+this.type)"><BR> 學號:<input type=text name=stdId onChange="alert('欄位名稱是'+this.name)"><BR> 班級:<input type=text name=classId value=JC201 onChange="alert('預設值是'+this.defaultValue+',你已經改成'+this.value)"><BR> </form>
.......... www.hubert.idv.tw .......... 表單物件範例 - text(3) <form name=form1> 請輸入數字編號: <input name=id_no onkeypress="if((event.keyCode < 48)||(event.keyCode > 57)) return false;"> </form> 輸入值必須介於 0 – 9 之間
.......... www.hubert.idv.tw .......... 練習4-1 • 依要求完成: • 游標進入text方塊中時,自動將 • 「請填寫…」清掉。
.......... www.hubert.idv.tw .......... 練習4-2 • 依要求完成: • 模仿 outlook express 的通訊錄設計。 • 當輸入姓氏之後,會自動在顯示欄位顯示出來。 • 當輸入名字之後,會自動在顯示欄位顯示出來。 • 定義 Access Key 。
.......... www.hubert.idv.tw .......... 綜合範例 – 跨視窗資料傳遞 <!-- 檔案一 : survey.htm --> <BODY> <FORM NAME=form1> 請選擇你最喜歡的科目: <INPUT TYPE=text NAME=sub> <A HREF='#' onClick=javascript:open('query.htm','','width=100')>查詢</A> </FORM> </BODY> 在此情況下不得省略 <body>
.......... www.hubert.idv.tw .......... 綜合範例 – 跨視窗資料傳遞 <!-- 檔案二 : query.htm --> <Script> function choice(sub){ opener.document.form1.sub.value = sub self.close() } </Script> <LI><A HREF=javascript:choice("Internet")>Internet</A> <LI><A HREF=javascript:choice("JavaScript")>JavaScript</A>
.......... www.hubert.idv.tw .......... 圓鈕物件(Radio object) 1. 顯示一個可供選擇(單選)的欄位。 2. ON 表示確認﹔OFF 表示不確認。 可使用的事件處理程序: onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp
.......... www.hubert.idv.tw .......... 圓鈕物件相關參數 • type = radio //類型為圓鈕 • name = gender //欄位名稱為gender • value = boy //傳送值為boy • checked //設定為預設選項 Input type=radio name=sex value=boy checked
.......... www.hubert.idv.tw .......... 表單物件範例 - radio (1) <form name=form1> 性別: <input type=radio name=gender onBlur="this.form.result.value='男生'">男生 <input type=radio name=gender onClick="this.form.result.value='女生'">女生 <input type=radio name=gender onFocus="this.form.result.value='不男不女'">以上皆非 <BR><input type=text name=result> </form> this.form 相當於 document.form1
.......... www.hubert.idv.tw .......... 練習4-3 • 依要求完成: • 選擇「其他」時, • 自動將游標移進左方 text 中。
.......... www.hubert.idv.tw .......... 圓鈕物件的物件特性 checked ->判斷是否已經核取 defaultChecked ->該元件預設為核取與否 type ->該元件類型 name ->該元件識別名稱 value ->該元件目前輸入值
.......... www.hubert.idv.tw .......... 表單物件範例 - radio (2) <form name=form1> 姓別: <input type=radio name=gender>男生<BR> <input type=radio name=gender checked>女生<BR> <input type=button value="判斷使用者輸入" onclick=SEX()> </form> <script> function SEX(){ if (document.form1.elements[0].checked) gender="男生" else gender="女生" alert('性別是:'+gender) } </script>
.......... www.hubert.idv.tw .......... 練習4-4 • 依要求完成: • 自動判斷使用者性別。
.......... www.hubert.idv.tw .......... 確認方塊物件(Checkbox object) 1. 顯示一個可供選擇(複選)的欄位。 2. ON 表示確認﹔OFF 表示不確認。 可使用的事件處理程序: onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp
.......... www.hubert.idv.tw .......... 確認方塊物件相關參數 • type = checkbox //類型為確認方塊 • name = hobby //欄位名稱 • value = music //傳送值 • checked //設定為預設選項 Input type=checked name=hobby value=music
.......... www.hubert.idv.tw .......... 表單物件範例 - checkbox <form> 興趣: <input type=checkbox name=fishing onBlur="this.form.result.value+=',釣魚'">釣魚 <input type=checkbox name=movie onClick="this.form.result.value+=',看電視'">看電視 <input type=checkbox name=music onFocus="this.form.result.value+=',聽音樂'">聽音樂 <BR><input type=text name=result size=30> </form>
.......... www.hubert.idv.tw .......... 表單物件綜合範例(1) <form> 姓名:<input type=text name=name maxlength=8 size=8><BR> 性別:<input type=radio name=sex value=boy checked>男 <input type=radio name=sex value=girl>女<BR> 興趣:<input type=checkbox name=fishing>釣魚 <input type=checkbox name=tv checked>看電視 <input type=checkbox name=music>聽音樂<BR> <input type=submit value=填好了> <input type=reset value=清除> </form>
.......... www.hubert.idv.tw .......... 表單物件綜合範例(2) <form> 姓名:<input type=text name=name maxlength=8 size=8><BR> 性別:<input type=radio name=sex value=boy checked>男 <input type=radio name=sex value=girl>女<BR> 興趣:<input type=checkbox name=fishing>釣魚 <input type=checkbox name=tv checked>看電視 <input type=checkbox name=music>聽音樂<BR> <input type=button value=自動填值(1) onclick = this.form.elements[0].value="張三"> <input type=button value=自動填值(2) onclick = this.form.elements[3].checked="true"> <input type=reset value=還原初始設定> </form>
.......... www.hubert.idv.tw .......... 表單物件綜合範例(3) <body onLoad=document.forms[0].elements[0].focus()> <form> 姓名:<input type=text name=name maxlength=8 size=8><BR> 性別:<input type=radio name=sex value=boy checked>男 <input type=radio name=sex value=girl>女<BR> 興趣:<input type=checkbox name=fishing>釣魚 <input type=checkbox name=tv checked>看電視 <input type=checkbox name=music>聽音樂<BR> <input type=button value=顯示元件個數 onclick=alert(this.form.elements.length)> <input type=reset value=還原初始設定> </form> </body>
.......... www.hubert.idv.tw .......... 表單物件綜合範例(4) <body onLoad=document.forms[0].elements[0].focus()> <form> 姓名:<input type=text name=name onBlur="alert(this.value+'! 歡迎你填這問卷!')"><BR> 性別:<input type=radio name=sex value=boy checked>男 <input type=radio name=sex value=girl>女<BR> 興趣:<input type=checkbox name=fishing>釣魚 <input type=checkbox name=tv checked>看電視 <input type=checkbox name=music>聽音樂<BR> <input type=reset value=還原初始設定> </form> </body>
.......... www.hubert.idv.tw .......... 密碼物件(password object) 1.顯示一個可供輸入密碼的欄位。 2.利用 * 隱藏所輸入的資料。 可使用的事件處理程序: onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp
.......... www.hubert.idv.tw .......... 密碼物件相關參數 • type = password //類型為密碼 • name = password //欄位名稱 • value = 1234 //初始值 • size = 20 //欄位大小 • maxlength = 10 //可輸入資料長度 Input type=password name=pw
.......... www.hubert.idv.tw .......... 表單物件範例 - password(1) <form name=form1> 輸入密碼:<input type=password name=pw1><BR> 重新輸入:<input type=password name=pw2><BR> <input type=button value=開始檢查 onClick=checkPw()> </form> <Script> function checkPw(){ if (document.form1.pw1.value!= document.form1.pw2.value) alert ("兩組密碼不符,請重新輸入") else alert ("OK!") } </Script>
.......... www.hubert.idv.tw .......... 練習4-5 • 依要求修改前例: • 開啟時,游標自動移到 '中文姓名' 欄位,等待輸入。 • 按下 '填好了' 按鈕,檢查密碼。 • 如果有問題,依其性別告知密碼不正確,同時將第二個欄位的密碼清除。 • 游標自動移到 '重新輸入' 欄位,等待輸入。
.......... www.hubert.idv.tw .......... 密碼物件的物件特性 defaultValue -> 該元件預設值 type -> 該元件類型 name -> 該元件識別名稱 value -> 該元件目前輸入值
.......... www.hubert.idv.tw .......... 表單物件範例 - password(2) <Script> function checkPwLgh(index,str){ if (str.length != 9){ alert('你只輸入'+str.length+'位數\n請輸入9位數密碼') document.form1.elements[index].value = '' document.form1.elements[index].focus() }} function checkRetype(){ if (document.form1.pw.value != document.form1.retypePw.value){ alert ("兩組密碼不符,請重新輸入") document.form1.retypePw.value = '' document.form1.retypePw.focus() } else alert ("密碼檢查作業完成!")} </Script> …<下頁續>
.......... www.hubert.idv.tw .......... 表單物件範例 - password(2) ……<接上頁> <form name=form1> 輸入密碼: <input type=password name=pw size=9 maxlength=9 onChange=checkPwLgh(0,this.value)><BR> 重新輸入: <input type=password name=retypePw size=9 maxlength=9 onChange=checkPwLgh(1,this.value)><BR> <input type=button value=密碼檢查 onClick=checkRetype()> </form>