Transcript 03-基本資料型態
第三章 基本資料型態 張智星 [email protected] http://mirlab.org/jang 台大資工系 多媒體檢索實驗室 JavaScript 程式設計與應用：用於網頁用戶端 本章大綱 大綱 本章說明 JavaScript 常用的資料型態，以及與這些資料型 態相關的函式及範例。 主題 3-1：資料型態簡介 3-2：數字 3-3：字串 3-4：布林 3-5：日期物件 3-6：數學物件 3-7：影像物件 2/43 JavaScript 程式設計與應用：用於網頁用戶端 3-1：資料型態簡介 本小節介紹JavaScript各種基本資料型態。 3/43 JavaScript 程式設計與應用：用於網頁用戶端 JavaScript資料型態 JavaScript 的資料型態（Data Type）可分成三類 基本資料型態 組合資料型態 字串（string） 數字（number） 布林（boolean） 函數（function） 內建物件：日期、陣列、Math、Number等 自訂物件 特殊資料型態 Null & undefined 4/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-1 主題:用 typeof() 函數得到各種變數的資料型 態。 連結：typeof01.htm 說明 使用「==」、「>」、「<」等判斷運算元，會 回傳true或false的布林型態。 在JavaScript中的變數跟C語言不一樣，不需要在 宣告時指定資料型態，而且同一個變數可以變換 成不同的資料型態。 5/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-2 主題：顯示各種會產生undefined的範例。 連結：undefined01.htm 說明 「undefined」是一種特殊的資料型態，專門用來判斷下 列兩種情況 不存在的變數：未宣告，且未指定值的變數。 未初始化的變數：已宣告，但未指定值的變數。 變數如果未經過宣告，就無任何值存在，所以無法取用， 但此類變數可以經由 typeof() 傳回 “undefined” 字串。 如果只經過宣告，但尚未初始化，它的預設值則是 undefined（非字串！）。此類變數亦可經由 typeof() 傳 回 “undefined”。 6/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-3 主題：檢查 null 的各種性質和用法。 連結： null01.htm 程式碼重點 x=null; (x)?document.writeln("True!"):document.writeln("False!"); 說明 範例中註解的Null或NULL都是錯誤的（在C語言 中用的是NULL）。 null, 0, false，在條件判斷時都是不成立的條件。 7/43 JavaScript 程式設計與應用：用於網頁用戶端 3-2：數字 本小節介紹數值的運算及相關函式的使用。 8/43 JavaScript 程式設計與應用：用於網頁用戶端 數值內存與表示 為保留最高的精確度，JavaScript 內部把所有的數 值均表示成雙倍精準（Double Precision）浮點數。 整數和浮點數，其內部儲存和運算方式都是以雙倍 精準的浮點數來進行。 在 PC 上，一般浮點數都是佔用 4 bytes，但雙倍精 準浮點數會佔用 8 bytes，以提升數值運算的精確度。 (我們一般常用的科學計算軟體 MATLAB，它的預設 數值型態也是雙倍精準浮點數。) 9/43 JavaScript 程式設計與應用：用於網頁用戶端 數值基底 JavaScript 的整數大部分是以十進位來表示，但若 有需要，也可以使用不同的基底（Base）來表示， 例如八進位和十六進位： 八進位的數字以 0 開頭，只包含數字 0 到 7。（但是如 果有一個數字的開頭是 0，但卻也包含數字 8 或 9，或包 含小數點，那麼它就會被認定成是一個十進位數字。） 十六進位的數字以 "0x"，只包含了數字 0 到 9，和字母 A 到 F（不論大小寫）。字母 A 到 F 分別代表 10 到 15。 也就是說，0xA 等於 10，而 0xF 等於 15。 八進位和十六進位的數字可以是負數，但是不能有小數部 分，而且也不能以科學記號法（指數）來表示。 10/43 JavaScript 程式設計與應用：用於網頁用戶端 數值表示範例(1) 數字 說明 十進位表示法 .0001, 0.0001, 4 個浮點數，值皆相等。 1e-4, 1.0e-4 0.0001 3.45e2 一個浮點數。 345 42 一個整數。 42 0378 一個整數。雖然看起來像八進位數字 （以0開頭），8 不是正確的數字，所以 378 這個數字是十進位數字。 0377 一個八進位整數。注意它雖然只比上面 的數字小1，它真正的值卻截然不同。 0.0001 一個浮點數字。即使以0開頭，它卻不是 0.0001 八進位數字，因為它有一個小數點。 255 11/43 JavaScript 程式設計與應用：用於網頁用戶端 數值表示範例(2) 數字 說明 十進位表示法 00.0001 這是一個錯誤。開頭的兩個0顯示它是個八進位 數，可是八進位數字是不能有小數點的。 (編譯器錯誤) 0Xff 十六進位的整數。 255 0x37CF 十六進位的整數。 14287 0x3e7 十六進位的整數。注意 "e" 並不是指數。 999 0x3.45e2 這是一個錯誤。十六進位數字不能有小數部分。 (編譯器錯誤) 說明 浮點數可用小數點或用科學記號法來表示。若用科學記號法，大寫或 小寫的 “e” 都可以表示 「10的次方」。 JavaScript 使用IEEE 754 浮點標準的數值表示法來表示數字，您可以 寫出大到 1.7976931348623157x10308 和小到 5.00x10-324 的數字。 12/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-4 主題：產生 JavaScript 的特殊數值 連結：number01.htm 說明 NaN（Not a Number，非數字）：用不正確的資料來執行數學 運算時，或是執行無意義的數學運算，就會產生這個數值。 正的無限大（Infinity）：當正數大到無法顯示在 JavaScript 中 時，就會使用這個數值。 負的無限大（-Infinity）：當負數大到無法顯示在 JavaScript 中時，就會使用這個數值。 為什麼「Math.pow(0, 0) = 1」？理論上應該是 NaN… 13/43 JavaScript 程式設計與應用：用於網頁用戶端 Number物件 Number 是一個內訂的物件，我們可以使用 它的相 關屬性來代表與數字相關的常數 常數表示法 說明 Number.MIN_VALUE 傳回能在 JavaScript 中表示最接近零的數 字。大約等於 5.00E-324。 Number.MAX_VALUE 傳回能在 JavaScript 中表示的最大值。大 約等於 1.79E+308。 傳回一個能在 JavaScript 中表示、且比最 Number.NEGATIVE_INFINITY 大負數 (-Number.MAX_VALUE) 還要小的 值。 Number.POSITIVE_INFINITY 傳回能在 JavaScript 中表示且大於最大數 (Number.MAX_VALUE) 的值。 Number.NaN 一個特殊值，可指出算術運算式的傳回值 不是一個數字。 14/43 JavaScript 程式設計與應用：用於網頁用戶端 數字相關函式(1) 函式格式 說明 parseInt(numString, [radix]) 傳回一個從字串 numString 轉換而來的整 數，其中 radix 是介於 2 和 36 之間的值， 用來指出包含在 numString 中的數字基底 （Base）。如果未提供，則字首為 0x 的字 串會視為十六進位的數字，而字首為 0 的 字串則會視為八進位的數字。其他所有的字 串則會視為十進位的數字。 parseFloat(numString) 傳回一個從字串 numString 轉換而來的浮 點數。 isNaN(number) 如果 number 值為 NaN，則 isNaN 函式會 傳回 true，否則會傳回 false。通常使用此 函式來測試 parseInt 和 parseFloat 方法的 傳回值。 15/43 JavaScript 程式設計與應用：用於網頁用戶端 數字相關函式(2) 函式格式 x.toString([radix]) 說明 將數值 x 轉成特定基底 radix 的字 串。 將數值 x 轉成小數點以下 n 位有 x.toFixed(n) 效數字的小數點表示法。 將數值 x 轉成小數點以下 n 位有 x.toExponential(n) 效數字的科學記號表示法。 x.toPrecision(n) 將數值 x 轉成共具有 n 位有效數 字。 16/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-5 主題：利用toString()函式，顯示不同基底的 表示方式 連結：number03.htm 程式碼重點 document.writeln("<td>"+x.toString()); document.writeln("<td>"+x.toString(2)); document.writeln("<td>"+x.toString(8)); document.writeln("<td>"+x.toString(16)); 說明 如果toString沒有放任何參數，預設用十進位轉換。 17/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-6 主題：與數字物件（Number）相關的常數與 函式的測試 連結：number02.htm 說明 這個範例使用Number物件，以及數字相關函式 表中的各種方法來處理數值資料。 18/43 JavaScript 程式設計與應用：用於網頁用戶端 3-3：字串 本小節介紹各種字串物件及函式運用。 19/43 JavaScript 程式設計與應用：用於網頁用戶端 字串表示方式 字串資料型態可以用來表示一列文字內容。我們只要把文字 括在相符的單括號或雙括號裡，就可以形成一個字串。 "This is a string" 'This is a string quoted by single quotes' "This is a string with 'single' quotes" 'This is a string with "double" quotes' "This another string with \"double\" quotes" 說明 可用單引號或雙引號來界定字串的開始和結束。 為了避掉雙引號的原來用途（標示字串的開始和結束），我們要在雙 引號前加上反斜線(\)。 20/43 JavaScript 程式設計與應用：用於網頁用戶端 字串物件函式與屬性(1) 性質或方法 說明 length 傳回字串的長度 toUpperCase() 換成大寫字母 toLowerCase() 換成小寫字母 concat() 字串並排（等效於使用加號） charAt(n) 抽出第 n 個字元（n=0 代表第一個字元） charCodeAt(n) 抽出第 n 個字元（n=0 代表第一個字元），並轉換成 Unicode substr(m, n) 傳回一個字串，從位置 m 開始，且長度為 n substring(m, n) 傳回一個字串，從位置 m 開始，結束於位置 n-1 indexOf(str) 尋找子字串 str 在原字串的第一次出現位置 lastIndexOf(str) 尋找子字串 str 在原字串的最後一次出現位置 21/43 JavaScript 程式設計與應用：用於網頁用戶端 字串物件函式與屬性(2) 性質或方法 說明 等效的HTML標籤 big() 增大字串的字型 <big>...</big> small() 減小字串的字型 <small>...</small> blink() 閃爍字串（不適用於 IE、Chrome）<blink>...</blink> bold() 變粗體 <b>...</b> italics() 變斜體 <i>...</i> fixed() 變等寬字體 <tt>...</tt> strike() 槓掉字串 <strike>...</strike> sub() 變下標 <sub>...</sub> sup() 變上標 <sup>...</sup> fontcolor() 設定字串的顏色 <font color=...>...</font> fontsize() <font size=...>...</font> 設定字串的字型大小 22/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-7 主題：示範各種字串物件的方法與屬性 連結：string01.htm 說明 注意 substr(m, n) 和 substring(m, n) 的差異。如果 text = "我願是千萬條江河" ，則 text.substr(3,5)會傳回 “千萬條江河” （第3個字元開始，取5個字 元） text.substring(3,5)會傳回 “千萬” （第3個字元開始，第4個字元 結束） 有關於字串的比對，只提到了 indexOf() 和 lastIndexOf() 兩個方法，事實上 JavaScript 對於字串的比對和代換有許 多強大的功能，例如 search、match、replace 等函數， 23/43 這些功能統稱「通用表示法」，後面的章節會仔細介紹。 JavaScript 程式設計與應用：用於網頁用戶端 範例3-8 主題：使用eval()函式，將字串轉成程式碼 連結：eval01.htm 程式碼重點 for (i=1; i<=3; i++){ command = "x" + i + "=" + i*i*i; eval(command); } 說明 我們把 JavaScript 要執行的命令收集在字串變數 command，然後再用 eval 指令來 “執行” 這個字串，就 可以創造出三個變數 x1、x2 和 x3。 24/43 JavaScript 程式設計與應用：用於網頁用戶端 各種物件的toString() 物件 toString() 的結果 Array（陣列） 將 Array 的元素轉換為字串，形成以逗號串連起來的 結果，此結果 與 Array.toString() 和 Array.join() 得 到的結果相同 Boolean（布林） 如果布林值為 True，會傳回 "true"；否則會傳回 "false" Date（日期） 傳回顯示日期的文字形式 Error（錯誤） 傳回包含錯誤訊息的字串 Function（函數） 傳回函數的定義 Number（數字） 傳回數字的文字表示法 String（字串） 傳回 String 物件的值 自訂物件 傳回 "[object Object]" 25/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-9 主題：利用toString()將各種物件轉成字串 連結：toString01.htm 說明 若要將字串轉成數值，可用 parseInt() 或是 parseFloat() 這兩個函數 parseInt() 可將字串轉整數。(若轉換不成功，則傳回 NaN。) parseFloat() 可將字串轉浮點數。(若轉換不成功，則 傳回 NaN。) 26/43 JavaScript 程式設計與應用：用於網頁用戶端 3-4：布林 本小節介紹布林物件的使用方式。 27/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-10 主題：有關Boolean資料型態的測試 連結：boolean01.htm 程式碼重點 說明 document.write(“x==y ==> ” + (x==y) + “<br>”); document.write(“y==z ==> ” + (y==z) + “<br>”); document.write(“x=z ==> ” + (x=z) + “<br>”); JavaScript 中的布林（Boolean）資料型態的值只有兩種： true 和 false。 在上述範例中，(x==y) 和 (y==z) 都會測試兩個數目是 否相等，因此會回傳布林常數 true 和 false，但是 (x=z) 是一個指派敘述，因此回傳的值就是被指派的值。 28/43 JavaScript 程式設計與應用：用於網頁用戶端 3-5：日期物件 本小節介紹日期物件的使用方法。 29/43 JavaScript 程式設計與應用：用於網頁用戶端 Date物件相關函式 方法 說明 toString() 以標準字串來表示日期物件 toLocaleString() 以地方字串（依作業系統而有所不同）來表示日 期物件 getYear() 取得年份 getMonth() 取得月份（需注意：0 代表一月，因此例如若是 八月，結果就是 7） getDate() 取得日數 getHours() 取得時數 getMinutes() 取得分鐘數 getSeconds() 取得秒數 getDay() 取得星期數（例如若是星期四，結果就是 4） 30/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-11 主題：示範各種日期物件的屬性及函式 連結：date01.htm 說明 new Date() 即會產生包含現在日期的一個日期物件。 new Date() 產生的物件，並不會因為過了一段時間後， 使用getSeconds()這些取得時間訊息的函式就會跟著改變， 這些時間訊息都在new Date()的時候決定了。 31/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-12 主題：使用 eval()簡化範例3-11的程式碼 連結：date02.htm 程式碼重點 for (i=0; i<method.length; i++) document.writeln("<br> today." + method[i] + "() = " + eval("today."+method[i]+"();")); 說明 組成字串來讓 eval 進行執行。 32/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-13(1) 主題：利用getTime()寫一個碼表程式。 連結：dateGetTime01.htm 說明 getTime()可以傳回來某個時間物件與 1970 年 1 月 1 日 零時的時間差距，單位是毫秒。 當按鈕文字是”開始計時”時，按下按鈕後，我們記錄目前 時間(date1)，設定時間顯示為”計時中...”，並將按鈕文字 改為”停止計時”。 當按鈕文字是”停止計時”時，按下按鈕後，我們記錄目前 時間”date2”，並算出時間差距(timeDiff)並顯示在時間欄 位內，同時將按鈕文字改為”歸零”。 33/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-13(2) 說明 若要設計在計時過程中，文字欄位不斷顯示目前 計時結果，但這種密集的即時顯示會比較消耗 CPU 的計算時間。欲達到此功能，必須使用 setTimeOut() 函數，將會在後面詳述。 我們也可以產生一個日期物件後，再對此物件進 行修改（例如改變秒數或月份）或格式轉換，相 關的方法很多，在此不再贅述。 34/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-12 (流程圖) 啟始狀態 按鈕顯示：開始計時 文字欄位：00:00:00 按鈕顯示：停止計時 文字欄位：計時中… 按鈕顯示：歸零 文字欄位：xx.xx.xx 35/43 JavaScript 程式設計與應用：用於網頁用戶端 3-6：數學物件 本小節介紹數學物件（Math）的各種屬性及 函式使用方法。 使用時必須引用Math物件，例如 Math.PI Math.exp(-2) 36/43 JavaScript 程式設計與應用：用於網頁用戶端 數學物件方法(1) 方法 說明 abs(x) 取一個數 x 的絕對值 ceil(x) 傳回大於或等於 x 的最小整數 floor(x) 傳回小於或等於 x 的最大整數 log(x) 計算以 e (2.71828) 為底的自然對數值 exp(x) 傳回以 e (2.71828) 為底的冪次方值 pow(a, n) 計算任意 a 的 n 次方 max(a, b) 傳回兩個數 a, b 中較大的數 min(a, b) 傳回兩個數 a, b 中較小的數 sqrt(x) 求出一個數 x 的平方根 round(x) 四捨五入至整數 37/43 JavaScript 程式設計與應用：用於網頁用戶端 數學物件方法(2) 方法 說明 random() 隨機產生一個介於 0~1 的數值 sin(x) 正弦函數 cos(x) 餘弦函數 tan(x) 正切函數 asin(x) 反正弦函數 acos(x) 反餘弦函數 atan(x) 反正切函數 說明 如果你的工作或研究牽涉到許多數學運算，那就 應該使用 MATLAB 來完成，比較省時省力！ 38/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-14 主題：示範各種數學物件函式及屬性的使用 連結：math01.htm 程式碼重點 with (Math){ // 使用 Math 物件的另一種方法 document.writeln(pow(cos(PI/3),2)+pow(sin(PI/3),2)); } 說明 只要放在 with(Math) 大括弧中的數學函數，都可 以不再引用 Math。 39/43 JavaScript 程式設計與應用：用於網頁用戶端 3-7：影像物件 本小節介紹影像物件各種屬性及函式的使用 方法。 40/43 JavaScript 程式設計與應用：用於網頁用戶端 影像物件屬性 影像物件也是一個內建的物件，可以由兩種方式產生： 由網頁的影像標籤 <img> 所產生，並經由 id 屬性來取得影像物件。 由 new Image() 來產生新的影像物件，並可指定其對應影像網址， 以達到快取（Cache）功能。 影像比較常用的屬性如下： src：影像的網址。 tagName：標籤名稱（即是IMG）。 id：id名稱 naturalWidth：原始影像的寬度，以像素為單位。 naturalHeight：原始影像的高度，以像素為單位。 clientWidth：網頁顯示影像的寬度，以像素為單位。 clientHeight：網頁顯示影像的高度，以像素為單位。 ownerDocument：影像所在的文件。 41/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-15 主題：列出Image物件的各種屬性及方法 連結：imageProp01.htm 程式碼重點 for (prop in myImage) document.write("<br>myImage." + prop + " = " + myImage[prop]); </script> 說明 指定網址後，影像物件就會把各種相關資訊從網址抓回來， 若事先指定多個影像物件的網址，就可以達到快取的功能。 據筆者所知，JavaScript 目前並沒有相關的 audio 物件， 可以達到快取的功能。 42/43 JavaScript 程式設計與應用：用於網頁用戶端 範例3-16 主題：直接抓取網頁中的影像標籤，並列出其性質 連結：imageProp02.htm 說明 範例中，你會看到影像圖檔的呈現，那是因為 myImage.outerHTML 就是顯示此影像的標籤，所以你會 看到此影像。 若obj為<a target=_blank href="myHome.htm">linked text</a> obj.outerHTML = <a target=_blank href="myHome.htm">linked text</a> obj.innerHTML = linked text 43/43