1 / 107

JavaScript

. 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).

lazaro
Télécharger la présentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. .......... .......... JavaScript 資策會教育訓練處 楊宏文(hubert Yang) hwyang@iii.org.tw

  2. .......... .......... DOM

  3. .......... www.hubert.idv.tw .......... 文件物件模式 (DOM) • 是所有built – in object的階層式集合。 • 直接對應到瀏覽器握網頁的特性。 • 每一家廠商各自發展自己的DOM，因此，不同瀏覽器的DOM並不相同。

  4. .......... www.hubert.idv.tw .......... Netscape 的 DOM

  5. .......... .......... Document物件

  6. .......... www.hubert.idv.tw .......... 文件物件(Document object) 1.代表目前的文件資訊。 2.直接對應至HTML的Body標籤組。

  7. .......... www.hubert.idv.tw .......... 本文物件的使用語法 • 使用表單物件的語法如下。 document.特性 document.方法(參數群)

  8. .......... 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

  9. .......... www.hubert.idv.tw .......... 文件物件的物件階層圖 Document Anchor Applet Area Image Form Link

  10. .......... www.hubert.idv.tw .......... 本文物件範例 – 最近更新時間 • <Script> • document.write("◎本頁最後更新日期： ") • document.write(document.lastModified) • </Script>

  11. .......... .......... Image物件

  12. .......... www.hubert.idv.tw .......... 影像物件(Image object) 1.用於表現一個影像。 2.直接對應至HTML的IMG元件。

  13. .......... www.hubert.idv.tw .......... 影像物件範例 – 影像快取 <Script> //進站時預先載入影像圖檔，供後續其他網頁快取使用 img1 = new Image(); img1.src = "/image1.gif"; img2 = new Image(); img2.src = "/image2.GIF"; </Script>

  14. .......... .......... Form物件

  15. .......... www.hubert.idv.tw .......... 表單物件(Form object) 1.用於定義表單，提供使用者輸入資料。 2.包含許多控制類型。 3.直接對應至HTML的表單元件。

  16. .......... www.hubert.idv.tw .......... 表單物件的物件階層圖 FormButton Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarea

  17. .......... www.hubert.idv.tw .......... 表單物件的使用語法 • 使用表單物件的語法如下。 表單名稱.特性 表單名稱.方法(參數群) forms[索引值].特性 forms[索引值].方法(參數群)

  18. .......... www.hubert.idv.tw .......... 表單物件的特性 • 表單物件可搭配的特性如下： action ->ACTION屬性設定值 elements ->以陣列代表表單內所有元件 encoding ->使用POST傳送時之編碼方式 length ->表單內元件個數 method ->指定傳送方式 (POST/GET) target ->將執行結果於特定視窗內執行

  19. .......... www.hubert.idv.tw .......... 表單物件的方法 • 表單物件可使用的方法如下。 eval() ->執行引數運算式計算 reset() ->模擬按下 reset 按鈕的動作 submit() ->模擬按下 submit 按鈕的動作 toString() ->傳回字串表示值 valueOf() ->傳回數值表示值

  20. .......... www.hubert.idv.tw .......... 本文物件(Text object) • 顯示一個可供輸入的欄位。 • 可使用的事件處理程序： • onBlur, onChange, onFocus • onKeyDown, onKeyUp • onMouseDown, onMouseUp

  21. .......... www.hubert.idv.tw .......... 本文物件相關參數 • type = text //類型為本文 • name = tel //欄位名稱 • value = 03-4257387 //初始值 • size = 20 //欄位大小 • title = 提示值 //提示值 • AccessKey = L //快捷鍵值 • maxlength = 10 //可輸入資料長度 • readonly //指定成為唯讀屬性

  22. .......... 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 來替代物件名稱，可以大幅簡化程式碼內容。

  23. .......... www.hubert.idv.tw .......... 本文物件的物件特性 defaultValue -> 該元件預設值 type -> 該元件類型 name -> 該元件識別名稱 value -> 該元件目前輸入值

  24. .......... 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>

  25. .......... 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 之間

  26. .......... www.hubert.idv.tw .......... 練習4-1 • 依要求完成： • 游標進入text方塊中時，自動將 • 「請填寫…」清掉。

  27. .......... www.hubert.idv.tw .......... 練習4-2 • 依要求完成： • 模仿 outlook express 的通訊錄設計。 • 當輸入姓氏之後，會自動在顯示欄位顯示出來。 • 當輸入名字之後，會自動在顯示欄位顯示出來。 • 定義 Access Key 。

  28. .......... 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>

  29. .......... 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>

  30. .......... www.hubert.idv.tw .......... 圓鈕物件(Radio object) 1. 顯示一個可供選擇(單選)的欄位。 2. ON 表示確認﹔OFF 表示不確認。 可使用的事件處理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp

  31. .......... www.hubert.idv.tw .......... 圓鈕物件相關參數 • type = radio //類型為圓鈕 • name = gender //欄位名稱為gender • value = boy //傳送值為boy • checked //設定為預設選項 Input type=radio name=sex value=boy checked

  32. .......... 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

  33. .......... www.hubert.idv.tw .......... 練習4-3 • 依要求完成： • 選擇「其他」時， • 自動將游標移進左方 text 中。

  34. .......... www.hubert.idv.tw .......... 圓鈕物件的物件特性 checked ->判斷是否已經核取 defaultChecked ->該元件預設為核取與否 type ->該元件類型 name ->該元件識別名稱 value ->該元件目前輸入值

  35. .......... 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>

  36. .......... www.hubert.idv.tw .......... 練習4-4 • 依要求完成： • 自動判斷使用者性別。

  37. .......... www.hubert.idv.tw .......... 確認方塊物件(Checkbox object) 1. 顯示一個可供選擇(複選)的欄位。 2. ON 表示確認﹔OFF 表示不確認。 可使用的事件處理程序： onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp

  38. .......... www.hubert.idv.tw .......... 確認方塊物件相關參數 • type = checkbox //類型為確認方塊 • name = hobby //欄位名稱 • value = music //傳送值 • checked //設定為預設選項 Input type=checked name=hobby value=music

  39. .......... 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>

  40. .......... 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>

  41. .......... 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>

  42. .......... 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>

  43. .......... 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>

  44. .......... www.hubert.idv.tw .......... 密碼物件(password object) 1.顯示一個可供輸入密碼的欄位。 2.利用 * 隱藏所輸入的資料。 可使用的事件處理程序： onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp

  45. .......... www.hubert.idv.tw .......... 密碼物件相關參數 • type = password //類型為密碼 • name = password //欄位名稱 • value = 1234 //初始值 • size = 20 //欄位大小 • maxlength = 10 //可輸入資料長度 Input type=password name=pw

  46. .......... 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>

  47. .......... www.hubert.idv.tw .......... 練習4-5 • 依要求修改前例： • 開啟時，游標自動移到 '中文姓名' 欄位，等待輸入。 • 按下 '填好了' 按鈕，檢查密碼。 • 如果有問題，依其性別告知密碼不正確，同時將第二個欄位的密碼清除。 • 游標自動移到 '重新輸入' 欄位，等待輸入。

  48. .......... www.hubert.idv.tw .......... 密碼物件的物件特性 defaultValue -> 該元件預設值 type -> 該元件類型 name -> 該元件識別名稱 value -> 該元件目前輸入值

  49. .......... 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> …<下頁續>

  50. .......... 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>

More Related