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

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

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

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

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

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

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

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

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

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

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

.......... 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的差值

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

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

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

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

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

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

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

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

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

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

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

.......... www.hubert.idv.tw .......... 練習2-3 • 依下列要求修改上例的輸出結果： • 使用者可以自行輸入起始日。 • 修飾輸出入畫面 (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>

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

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

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

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

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

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

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

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

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

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

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

Javascript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JavaScript

JavaScript

Javascript

JavaScript