1 / 104

JavaScript

. JavaScript. 資策會教育訓練處 楊宏文 hubert Yang hwyang@iii.org.tw. 內建物件. www.hubert.idv.tw. 內建物件 (built-in object) 的種 類. 陣列物件 (Array object) 。 布林物件 (Boolean object) 。 日期物件 (Date object) 。 函數物件 (Function object) 。 數學物件 (Math object) 。 數字物件 (Number object) 。 字串物件 (String object) 。.

minjonet-roussel
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. .......... .......... 內建物件

  3. .......... www.hubert.idv.tw .......... 內建物件(built-in object)的種類 • 陣列物件(Array object)。 • 布林物件(Boolean object)。 • 日期物件(Date object)。 • 函數物件(Function object)。 • 數學物件(Math object)。 • 數字物件(Number object)。 • 字串物件(String object)。

  4. .......... www.hubert.idv.tw .......... 陣列物件(Array Object) • 建立陣列的語法如下。 陣列名稱 = new Array ([陣列元件個數]) 陣列名稱 = new Array ([陣列元件一,陣列元件二…..])

  5. .......... www.hubert.idv.tw .......... 陣列物件(Array Object) • 使用陣列的語法如下。 陣列名稱.特性 陣列名稱.方法(參數群)

  6. .......... www.hubert.idv.tw .......... 陣列物件特性 • 陣列物件可搭配的特性如下。 length ->陣列物件的長度 prototype ->原型。用於製作特殊的特性

  7. .......... www.hubert.idv.tw .......... 陣列物件方法 • 陣列物件可使用的方法如下。 eval() ->將指定的引數(運算式)計值 concat() ->傳回將所有元素結合的完整字串 join() ->傳回將所有元素結合的完整字串 reverse() ->將所有元素反轉 sort([數值比較]) ->將所有元素由小到大排序 toString() ->傳回以字串表示所有元素 valueOf() ->傳回以數值表示所有元素

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

  9. .......... www.hubert.idv.tw .......... 常見的錯誤 <script> var classId = new Array[3]; classId[0] = "Oracle"; classId[1] = "Internet"; classId[2] = "JavaScript"; document.write("第二個元素是", classId[1], "<br>"); </script>

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

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

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

  13. .......... www.hubert.idv.tw sort() 是依字元值大小進行排列 .......... 常見的錯誤 <script> var score = new Array(50, 80, 35, 100); document.write("成績由高分到低分排列："); document.write(score.sort().reverse()); </script>

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

  15. .......... www.hubert.idv.tw .......... 練習2-1 • 依下列要求修改上例的輸出結果： • 1.寫入陣列後自動將Text欄位清空， • 以待下一筆輸入。 • 2.顯示陣列值時，加上適當的說明。 • 如：第一個陣列為“Hubert”。 • 3.修飾輸出入畫面 (Lay out)。

  16. .......... www.hubert.idv.tw .......... 練習2-2 • 依下列要求修改練習1-4通訊錄的例子： • 動態地寫入通訊錄資料。 • 寫入陣列後自動將Text欄位清空，以待下一筆輸入。 • 修飾輸出入畫面 (Lay out)。

  17. .......... www.hubert.idv.tw .......... 日期物件(Date Object) • 建立日期物件的語法如下。 日期物件名稱 = new Date () 日期物件名稱 = new Date (“月, 日, 年”) 日期物件名稱 = new Date (年, 月, 日, 時, 分, 秒)

  18. .......... www.hubert.idv.tw .......... 日期物件(Date Object) • 使用日期物件的語法如下。 日期物件名稱.特性 日期物件名稱.方法(參數)

  19. .......... www.hubert.idv.tw .......... 日期物件方法(1)- 取得時間(GET) • 日期物件可使用的方法如下。 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的差值

  20. .......... www.hubert.idv.tw .......... 日期物件方法(2)- 設定時間(SET) • 日期物件可使用的方法如下。 setYear(年數) ->設定日期物件為指定年份數 setMonth(月數) ->設定日期物件為指定月份數 setDate(日數) ->設定日期物件為指定日數 setHours(時數) ->設定日期物件為指定時數 setMinutes(分數) ->設定日期物件為指定分數 setSeconds(秒數) ->設定日期物件為指定秒數 toGMTString() ->轉換日期物件為GMT格式的字串 toString() ->轉換日期物件為當地時區格式的字串

  21. .......... www.hubert.idv.tw .......... 日期物件範例一 <Script> var now = new Date(); document.write(now); </Script>

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

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

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

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

  26. .......... www.hubert.idv.tw .......... 綜合範例 – array & date <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>

  27. .......... www.hubert.idv.tw .......... 數學物件(Math Object) 提供數學函式及常數。

  28. .......... www.hubert.idv.tw .......... 數學物件特性 • 數學物件可搭配的特性如下。 E ->自然對數(約2.71828) LN2 ->2的自然對數(約0.69315) LN10 ->10的自然對數(約2.30259) LON2E ->以2為底e的自然對數(約1.44270) LON10E ->以10為底e的自然對數(約0.43429) PI ->圓周率(約3.1415926) SORT1_2 ->1/2的平方根(約0.70711) SORT2 ->2的平方根(約1.41421)

  29. .......... www.hubert.idv.tw .......... 數學物件方法(1) • 數學物件可使用的方法如下。 sin (數值) ->傳回正弦三角函數值 cos (數值) ->傳回餘弦三角函數值 tan (數值) ->傳回正切三角函數值 acos (數值) ->傳回反餘弦三角函數值 asin (數值) ->傳回反正弦三角函數值 atan (數值) ->傳回反正切三角函數值

  30. .......... www.hubert.idv.tw .......... 數學物件方法(2) • 數學物件可使用的方法如下。 abs (數值) ->傳回絕對值 exp (數值) ->傳回指數函數值 log (數值) ->傳回以e為底的自然對數值 random () ->傳回0(含)至1(不含)的隨機值 sqrt (數值) ->傳回平方根值

  31. .......... www.hubert.idv.tw .......... 數學物件方法(3) • 數學物件可使用的方法如下。 round (數值) ->傳回四捨五入後的值 ceil (數值) ->傳回無條件進位後的值 floor (數值) ->傳回無條件捨去後的值 max (數值1,…,數值N) ->傳回最大的數值 min (數值1,…,數值N) ->傳回最小的數值 pow (底數,指數) ->傳回底數之指數次方值

  32. .......... www.hubert.idv.tw .......... 數學物件範例 <Script> with(document) { write("max(3,5) = ",Math.max(3,5),"<BR>") write("min(3,5) = ",Math.min(3,5),"<BR>") write("亂數 = ",Math.random(),"<BR>") write("PI = ",Math.PI,"<BR>") write("sin(30') = ",Math.sin(Math.PI/6)*100,"<BR>") write("cos(30') = ",Math.cos(Math.PI/6)*100) } </Script>

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

  34. .......... www.hubert.idv.tw .......... 練習2-3 • 依下列要求修改上例的輸出結果： • 使用者可以自行輸入起始日。 • 修飾輸出入畫面 (Lay out)。

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

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

  37. .......... www.hubert.idv.tw .......... 字串物件 (String Object) • 建立字串物件的語法如下。 變數 = “字串” 字串物件名稱 = new String (字串)

  38. .......... www.hubert.idv.tw .......... 字串物件 (String Object) • 使用字串物件的語法如下。 字串物件名稱.特性 字串物件名稱.方法(參數)

  39. .......... www.hubert.idv.tw .......... 字串物件特性 • 字串物件可搭配的特性如下。 length ->傳回字串長度 prototype ->原型。用於製作特殊的特性

  40. .......... www.hubert.idv.tw .......... 字串物件方法(1) • 字串物件可使用的方法如下。 big() ->傳回大字體 <BIG> blink() ->傳回閃爍字體 <BLINK> bold() ->傳回粗黑字體 <B> fixed() ->傳回打字機字體 <TT> italics() ->傳回斜體字體 <I> small() ->傳回小字體 <SMALL> strike() ->傳回劃掉字體 <STRIKE> sub() ->傳回下標字 <SUB> sup() ->傳回上標字 <SUP>

  41. .......... www.hubert.idv.tw .......... 字串物件方法(2) • 字串物件可使用的方法如下。 link(連接網址) ->產生超連結 fontcolor(color) ->指定使用某顏色 fontsize(size) ->指定使用某字級大小 indexOf(搜尋值,[起始位置]) ->由左至右搜尋該字串第一次出現的位置 lastIndexOf(搜尋值,[起始位置]) ->由右至左搜尋該字串第一次出現的位置

  42. .......... www.hubert.idv.tw .......... 字串物件方法(3) • 字串物件可使用的方法如下。 replace(x,y) ->用字串y 取代字串x toLowerCase() ->轉換成小寫 toUpperCase() ->轉換成大寫 charAt(index)->傳回索引值所指的字元 substring(索引值A,索引值B) ->傳回由索引值A至索引值B前一字元 所構成的字串 substr(索引值A, 字串長度) ->傳回由索引值A開始的子字串

  43. .......... www.hubert.idv.tw .......... 字串物件方法(4) • 字串物件可使用的方法如下。 slice(起始值 [, 結束值]) ->將字串從指定的字元位置開始, 至 指定的位置結束, 摘錄成一新的字串 split(“字元”) ->將字串以指定之字元為單位, 切成 數個子字串, 並存成陣列 concat(字串2 [, 字串3]) ->將幾段字串結合成完整字串

  44. .......... www.hubert.idv.tw .......... 字串物件範例一 <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>

  45. .......... www.hubert.idv.tw .......... 字串物件範例二 <Script> var str1 = "10"; var str2 = "20"; with(document){ write(str1 + str2,"<BR>"); write(Number(str1) + Number(str2),"<BR>"); } </Script>

  46. .......... www.hubert.idv.tw .......... 字串物件範例三 <Script> var sayHello = "你好嗎？"; document.write(sayHello.fontcolor("#ff00ff"), "<BR>"); document.write(sayHello.replace('你','妳')); document.write("共有", sayHello.length, "個字。<BR>"); </Script>

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

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

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

  50. .......... www.hubert.idv.tw .......... 範例七 – 字串切離 <script> var str = "Hubert Yang"; var strarray = str.split(" "); alert(strarray[0] + ", 你好"); </script>

More Related