JavaScript 函数
时间:2006-07-14 来源:pascal4123
第 4 章 Functions
德嘉書業 / 德嘉資訊科技 (www.takka.com.hk) 作者: 伍新華 Email: [email protected]4.1 Function 一般資料
4.2 Function 的定義及叫用
4.3 Function 內的文稿格式
4.4 Delimiter 的使用
4.5 Argument 及 return
4.6 Predefined functions
經過前面的章節, 相信你對 JavaScript 有一定的認識了, 但是單學習 JavaScript 的語法而沒有程式基礎, 你只能將本書的例子套用到自己的網頁中。若要真正能創作自己的 JavaScript , 還要對程式的編寫理論有一些認識, 這處連續4章就是說這些理論。
JavaScript 與 C 語言極相似, 可說是 C 語言的簡化版本, 若你對 C 有認識, 就不用看這處 4 章了。
4.1 Function 一般資料
1. 什麼是 function 及 method ?
在 JavaScript, function 是我們設定的一些程式片段, 能使到瀏覽器進行一些工作, 通常這些片段會利用一些 statements 來設定一些條件, 使到瀏覽器遇一些情況就會執行一些 methods。
這書常提到 method 及 function , 兩者有什麼不同呢? 兩者都是使用瀏覽器進行一些工作, 不同之處主要有兩點:
1. Method 是瀏覽器預定的程序, 我們在網頁中放下一個 method 名稱, 瀏覽器就會執行這預定程序。
Function 則是我們自己編寫的程序, 一般是編定一些條件及 method, 使到瀏覽器因應環境來執行這些 method。
2. Function 是獨立操作, method 則一定要與一個 object 掛鉤 (global method例外), 即是以 object.method( ) 的方式來使用。
2. Function 的中文譯名
"Function" 這字在台灣及內地都譯成 "函數", 這是使用數學上 function 的中文釋名: "函數", 但程式上的 function (應譯作 "功能" ) 與數學上的 function (函數) 是完全兩回事。 "函數" 這字常誤導初學程式者, 以為與什麼數值有關, 本書為免讀者混淆, 所以一路都會使用英文 function 這名稱。為了讓讀者更清楚知道哪一個是 function 的名稱, 本書會使用粗斜體字來顯示, 及名稱後附有 ( ) 的符號, 例如本書前面就有 counter( )、confirmchoice( ) 等名稱。
3. Function 的名稱規則
Function 的名稱任我們自訂, 但要依一定的規格, 在 1.10-6 的一節已說過, 這處要特別留意大小寫, 例如你在網頁開頭處定了一個名為 openWindow( ) 的 function , 隨後使用這 function 時要依足大小寫, 例如不能用 OpenWindow( ) 或 openwindow( )。
Function 不能採用的名稱:
有一列名稱是 JavaScript 保留給自己使用, 我們不能用作 function (或 variable) 的名稱, 請參看本書 附錄-2 的資料。
我們自訂 function 名稱時, 若一時大意用了這些限制名稱, 就會引起錯誤, 其中一個安全辦法是將這些不能用的名稱印製一份, 放在案頭核對, 另一個更方便的辦法是在使用一些普遍名稱時, 例如 write( )、check( )、confirm( )、validate( )、send( ) 等等, 在後加上 It 這字, 例如 writeIt( )、checkIt( )、confirmIt( )、validateIt( )、sendIt( ) 等等, 這就一定不會與這些限制名稱相撞了。
4.2 Function 的定義及叫用
1. Function 的定義及叫用
一個 function 分為兩部份, "定義" (definition) 部份及 "叫用" (call) 部份, "call" 也有譯作呼叫或呼喚。請先看以下一個簡單的function例子。
練習-34 簡單的 function 例子
1. 請用瀏覽器開啟示範磁碟中的 demo1.htm, 這網頁有以下內容:
<html> <head> <title> Function demonstration </title>
</head>
<body bgcolor=beige text=brown> <h1> 示範網頁 </h1>
<form>
<input type="button" name="" value=" 開始 " onClick="simpleDemo( )" >
</form>
</body> </html>
2. 網頁開啟後, 你會見到一個按鈕, 請按一下這按鈕, 就可啟動一串的反應, 請你看 simpleDemo( ) 所定義的反應如何逐項走出來。
A. 定義部份 (function definition):
我們要瀏覽器進行什麼程序, 這些程序就構成一個 function , 以下是今次例子中定義的部份:
1. 在定義的部份, 我們要做兩件事: (a) 給予這 function 一個自訂名稱, (b) 指定要這 function 進行的事項。
在這例子, 筆者將這 function 命名為 simpleDemo, 在 function 名稱後要加上一個 ( ) , 若這 function 有arguments (請看隨後例子), 就放在這括號內, 若沒有就空出。
2. 在 function 名稱前要加上 function 這個字, 讓瀏覽器知道隨後的資料是屬於一個 function 。
3. 我們用來指定要瀏覽器進行的工作的句子, 就是 statement (指述句子), 這些 statement 要放在 { } 這個大引號 (curly braces) 內, 這就是這 function 的範圍, 所以 function 有以下的格式:
4. 每個 statement 標準是用 ; 來結束, 例如:
alert(" This is alert diolog box. ");
confirm(" This is confirm dialog box.");
這 ; 字符在 JavaScript 語言中可略去, 不過若你要給瀏覽器很明確的指示, 又不嫌麻煩, 可以用標準寫法。
5. Function 可放在網頁任何地方, 但習慣是放在 <head> 及 </head> 內, 使到網頁的主體載入前這 function 已預備妥當。若 function 放在網頁後方, 有可能觀看者叫用這 function 時, 瀏覽器還未載入這 function , 就會出現錯誤訊息。
不過若 function 內有變數名稱, 這 function 要放在設定這變數的句子之後, 否則這 function 執行時, 瀏覽器找不到這變數, 就會出現錯誤, 請看 4.5-3 的例子。
B. 叫用部份:
我們定義了一個 function, 這 function 就在備用狀態, 我們要發出指示, 瀏覽器才會執行這 function, 在這例子, 筆者是使用一個按鈕來啟動這 function, 如下:
這處的 onClick="simpleDemo( )" 就是當觀看者按一下 (Click) 這按鈕, 就啟動 simpleDemo( ), 這稱為 function call, 或簡單地稱為 call, 叫用 function 的部份稱為 caller (叫用者/呼喚者)。
我們一般是利用 event handler 的方式來啟動一個 function , 但也可使到瀏覽器在載入網頁時自動執行, 例如:
<html> <head>
</head>
<body bgcolor=beige text=brown> <h1> 示範網頁 </h1>
</body> </html>
在以上例子, 瀏覽器由上而下執行這網頁的句子, 去到下方 simpleDemo( ) 這一個 caller, 就會啟動這 function。
4.3 Function 內的文稿格式
許多初學者在編寫 function 時, 常遇到一個難題, 一句中究竟在哪處可以分行, 哪處不可以, 在 1.10-4 的一節已說過 script 內的分行及空格, 除了在一個 argument 內, 瀏覽器是不理會分行及空格, 所以只有 argument 內不可以分行。
Function 也有類似情況, 除了argument不能分行, 其他地方都可自由分行或加上空格, 請看這例子。
練習-35 Function 的分行
1. 請你將示範磁碟中的 format.htm 複製去硬碟, 然後用瀏覽器開啟這硬碟中的檔案, 這檔案有以下內容:
<html> <head>
</head>
<body bgcolor=cyan text=red> <h1> 示範網頁 </h1>
<form>
<input type=button name="" value="叫出 confirm 對話盒 "
onClick="testFormat( ) " >
</form>
</body> </html>
2. 請你試驗一下按鈕的反應 ,應該一切操作正常。
3. 留意這 function 的三個 statement:
{ if ( confirm ("請你選擇 [確定] 或 [取消] ") )
{ alert("你按了 [確定], 代表選了 TRUE " ) }
else { alert("你按了 [取消], 代表選了 FALSE " ) }
}
4. 請你用「記事本」開啟上述網頁的原始檔案, 在上述的句子加上分行, 例如:
if
(
confirm
(
"請你選擇 [確定] 或 [取消] " // ← 只有這 argument 內不可以分行
)
)
除了 argument 的句子, 請你隨意分行。改完後, 將這檔案存檔, 然後在瀏覽器重新載入這檔案, 看是否有錯誤的訊息出現。
5. 最後請你將上述的一句 argument 分行, 看有什麼後果。
6. 你也可試試將這 function 的句子在一或兩行中完成, 看有什麼後果, 例如:
function testFormat( ){if ( confirm ("請你選擇 [確定] 或 [取消] ") )
{alert("你按了 [確定], 代表選了 TRUE " ) }else{alert(
"你按了 [取消], 代表選了 FALSE " ) } }
我們正常不會用這擠擁的寫法, 但操作上這也一樣正常。
4.4 Delimiter 的使用
在 function 內, { } 這大括號稱為 delimiter (分隔器), 是用來分開每一組運算, 這會給程式明確的指引, 執行時不會將一組運算與另一組運算混淆。
1. 只有一句 statement 可不要 delimiter
假若 statement 只有一句, 可以不用分隔器, 例如:
function testFormat( )
{ if ( confirm ("請你選擇 [確定] 或 [取消] ") )
{ alert("你按了 [確定], 代表選了 TRUE " ) }
else { alert("你按了 [取消], 代表選了 FALSE " ) }
}
這可簡為:
{ if ( confirm ("請你選擇 [確定] 或 [取消] ") )
alert("你按了 [確定], 代表選了 TRUE " )
else alert("你按了 [取消], 代表選了 FALSE " )
}
若一組反應中有多個 statements, 這組 statements 就一定要放在一對 delimiter 內, 例如:
2. Delimiter 的習慣位置
在 delimiter 的位置上, 程式員各有不同習慣, 例如有人喜歡這寫法:
function testFormat( )
{ if(confirm("請你選擇: ") ) { alert("你按了 [確定] ") }
else { alert("你按了 [取消] ") }
}
在這寫法, 你可清楚看到 { alert("你按了 [確定] ") } 是屬於 if 的, 而 { alert("你按了 [取消] ") } 是屬於 else 的, 這方式出錯的機會較少。
有人喜歡這寫法:
function testFormat( )
{
if(confirm("請你選擇: ") )
{ alert("你按了 [確定] ")
}
else { alert("你按了 [取消] ")
}
}
這寫法是將一對的 delimiters 放在同一的縮入位置, 這方便我們檢查是否漏了一個大括號, 又或方便檢查一對大括號是否對稱。
3. Delimiter 的對稱
Function 內每一組反應以 { 開始, 以 } 結束, 這處的例子是:
{ { } { } }
有時一組設定內又有多組設定 (nesting), 就會有這類似結構:
{ { { } } }
若程式有這類 nesting statement, 我們可將不同階層的 statement 作不同程度的縮入, 這就較方便檢查括號的對稱, 如下:
這些括號必需對稱, 若弄錯了或漏了一個, 瀏覽器執行這 function 時就會有對話盒告訴你在什麼地方出錯。
為了避免漏了這些括號, 筆者的習慣是每寫下一個開括號, 就立刻在下方加上一個關括號, 然後才在這兩個括號之間加上 statement, 這就不會出錯了。
4.5 Argument 及 return
設定一個 function 時, 若有一些數值 caller (叫用部份) 要送給這 function 來處理, 這數值就是一個 argument (引數), 這也稱為 parameter (參數), function 處理完畢後, 要將結果送回 caller 處, 這就是 return (傳回), 請先看以下一個簡單的例子。
1. Argument 的輸入及結果的傳回
練習-36 Function 的 argument 及 return
在這練習, 你要設定一個名為 circleArea( ) 的 function , 這 function 有一個名為 radius 的 argument, 即是 circleArea(radius), 這 function 設定了是 3.1416 * radius * radius, 即是計算圓形面績。
在叫用這 function 時, 你要在 caller 中將一個 5 的數值作為 argument, 傳給這 function來處理。
1. 請用瀏覽器開啟示範磁碟中的 return1.htm , 這檔案有以下內容:
2. 開啟瀏覽器及載入這網頁, 你應見到以下顯示:
5 cm半徑圓形的面積是: 78.54 cm2
1. 請先看 function caller 的部份, 有這設定:
circleArea(5) ← 這就是 caller
2. 這 (5) 是我們設定的 argument, 叫用時, 將這 5 字傳給 (pass to) 以下的 function definition:
3. 經上述操作, radius 就會等於 5, 所以隨後的 3.1416 * radius * radius 變成 3.1416 * 5 * 5, 得出 78.54 的數值, 這數值用 return 這項操作送回 caller, 而這 caller 就會變成 78.54。
2. 由觀看者選擇的 argument
上個練習在網頁固定了將 argument 設定 5, 這當然沒有實際用途, 你明白了 argument 及 return 的原理, 就可看以下例子, 這是讓觀看者輸入他選擇的 argument。
練習-37 可改變的 argument
在這練習, 你要設定一個計算圓形面積的程式, 觀看者在文字框輸入圓形的半徑, 按一個按鈕, 就會有 alert 對話盒顯示計算的結果。
1. 請用瀏覽器開啟示範磁碟中的 return2.htm , 這檔案有以下內容:
<html>
<body bgcolor=beige text=red> <p>
<form name="display"> 請輸入圓形半徑:
<input type="text" name="inbox" value="" size=4>
<!-- 這是 document.display.inbox -->
<input type="button" value="計算圓形面積"
onClick="document.display.outbox.value=calcArea(x.value)">
<p> 這圓形的面積是:
<input type="text" name="outbox" value="" size=10>
<!-- 這是 document.display.outbox -->
</form>
</body> </html>
2. 網頁開啟後, 請在第一個文字框輸入一個數字, 按 [計算圓形面積] 的按鈕, 你應看到結果在第二個文字框出現。
1. 在這網頁中, 你見到以下的文字框:
在下方的一個 script, 筆者為了方便, 作以下設定:
x=document.display.inbox
2. 例如你在第一個文字框輸入 10 這數值, 就會有這效果:
document.display.inbox.value=x.value=10
這 value 是指文字框內的數值。
3. 在 [計算圓形面積] 的按鈕中, 原本有這設定:
onClick="document.display.outbox.value=calcArea(x.value)"
在第一個文字框輸入 10 的數值後, 有這結果:
onClick="document.display.outbox.value=calcArea(10)"
4. 按一下這按鈕, 就會啟動 calcArea(10), 有以下反應:
(10) 這一個 argument 就會送去 calcArea(radius), 有這結果: radius=10, 因此 3.1416*radius*radius 會變為 314.16 , 這 function 的 return 將結果送回及替代原本的 calcArea(x.value), 有這結果:
onClick="document.display.outbox.value=314.16"
因此 document.display.outbox 這文字框會出現 314.16 的數值。
3. Script 的擺放位置
在上述例子, 為了方便, 筆者用 x 這個變數來代表這物件:
x=document.display.inbox
你要留意這設定內有 display 及 inbox 這些自訂名稱, 假若將這句放在前面, 例如:
<html> <head>
</head>
: :
瀏覽器執行 x=document.display.inbox 這句時, display 及 inbox 等名稱還未存在, 就會有提示對話盒告訴你 document.dispaly.inbox 不是一個 object (因這 object 還未出現)。
4. 變數的即時更新
作者利用上個練習, 舉例說明一個初學程式者常犯的錯誤, 就是不能在程式執行時才讀取最新的變數資料。請你試將 練習-37 以下兩項稍作改變 (紅字的部份):
<html> <body bgcolor=beige text=red> <p>
<form name="display"> 請輸入圓形半徑:
<input type="text" name="inbox" value="" size=4>
<input type="button" value="計算圓形面積"
onClick="document.display.outbox.value=calcArea(x)">
<p> 這圓形的面積是:
<input type="text" name="outbox" value="" size=10>
</form>
</body> </html>
你試試上述的網頁, 你會發現每次都會得出 0 的結果。
這網頁利用 x 來代表 document.display.inbox.value , 留意這一句是在網頁載入時就已執行, 當時 inbox 內沒有任何資料, 所以 x=0 , 啟動這句時: onClick= "document.display.outbox.value = calcArea(x)" , x 還是等於 0。
假若設定 x=document.display.inbox, 這是用 x 來代表這文字框, 另設定onClick="document.display.outbox.value=calcArea(x.value)" , 這使到程式在 onClick 時讀取最新的 x.value 數值。
5. Function 的兩個 arguments
前面練習的例子只有一個 argument, 有時一個 function 可以有多個 argument, 我們只要在 function definition 及在 function caller 中順序放好各 arguments, 這 function 就會知道如何處理。
練習-38 Function 的兩個 arguments
在這練習, 你要設定一個顯示橫線的 function , 在 caller 處將兩個 argument 交給這 function , 一個 argument 作為橫線的寬度 (width), 單位是 %, 另一個 argument 作為橫線的粗度 (size), 單位是 pixels。
1. 請用瀏覽器開啟示範磁碟中的 dblargu1.htm , 這檔案有以下內容:
<html> <head>
</head> <body>
This is line 1:
<p> <br> This is line 2:
</body></html>
2 網頁開啟後, 請你留意兩條橫線, 第一條應是 80% 寬及 5 點粗, 第二條應是 50% 寬及 2 點粗。
1. 首先看這 caller:
這是叫用 hrline( ) 及送出兩個 arguments, 因此在這 function definition 中:
function hrline(hrwidth,hrsize)
hrwidth=80, hrsize=5, 有這結果:
function hrline(hrwidth,hrsize)
{
document.write("<hr noshade width=80% size=5 )
}
這會產生 80% 寬度及 5 點粗度的橫線。
2. 第二次叫用 hrline( ) 時, 是使用這 argument: hrline(50,2) , 因此 hrwidth=50, hrsize=2, 所以會有 50% 寬度及 2 點粗度的橫線。
3. 在這例子, 你可看到 function 只要設定一次, 就可在整個檔案中重複使用, 每次使用時, 可因應需要而將不同的 argument 傳給這 function , 就可產生不同的結果。(請參看 15.2 的一節中的 Math.ceil( ) 及 Math.floor( ) 的例子。)
4. 若你要對 function 的 argument 及 return 要更加了解, 可再看多以下的一個例子, 但筆者不再解釋了, 你可自行研究。
這例子是設定兩個文字框, 觀看者分別在兩個文字框輸入數字, 再按一個按鈕, 就會有一個 alert 對話盒顯示兩個數字相乘的結果, 請你參看示範磁碟中的 dblargu2.htm。
<html> <head>
</head><body bgcolor=beige text=red> <p>
<form name="display"> 請輸入兩個數字:
<input type="text" name="inbox1" value="" size=4>
<input type="text" name="inbox2" value="" size=4>
<input type="button" value="計算兩個數字相乘"
onClick="z = calc (x.value, y.value); alert('結果是: ' + z )">
</form>
</body> </html>
4.6 Predefined functions
前面說的 functions 都是我們自己設定的, 瀏覽器也有一些預設 (predefined) 的 functions, 這也稱為 global functions 或 core functions, 我們在 script 中放下這些 functions 的名稱, 就可叫用, 與 method 不同之處是 method 要與一個 object 連結才可使用, 例如 window.open( )、document.write( ) 等等, method 前都有一個 object 名稱, 這處說的 predefined functions 是獨立的, 不與任何 object 連結。
這部份有些深奧地方, 你可稍後才看這部份。
1. escape( )
這用來將一些特別符號變為是 ASCII 編碼, 但範圍不包括字母及數目字符 (alphanumeric character) 及不包括這 7 個符號: * @ - _ + . / , 所以被進行編碼的會有 , ; = ( 等符號及空格。
要將文字進行這些編碼, 原因是這些符號在一些程式有特別的意義, 所以將文字交給這程式來處理前, 要將這些字符轉換為編碼, 例如在第 17 章 說到 cookies 的設定, 在 value 的一項就不能有空格及 ; 的字符, 若要加進這兩個字符, 就要使用escape 編碼 (請看 練習-130 )。
escape( ) 是使用這語法: escape(string) , string 是要進行編碼的句子, 留意 escape( ) 前是沒有 object 名稱的, 請看這例子:
<html> <body>
</body> </html>
網頁開啟後, 畫面會有這句文字:
Number%3D%2323350%2C%20is%20that%20true%3F
這處你可看到以下5個符號的編碼:
= %3D
# %23
, %2C
? %3F
空格 %20
請你看本書 附錄 10 的 ASCII 編碼表, 就會看到這些 escape 編碼實際是使用 ASCII 的 hex 編碼。
2. unescape( )
unescape( ) 的功能與 escape( ) 相反, 是將 escape 編碼變回字符, 並傳回這些字符, 例如以下的 script:
<html> <body>
</body> </html>
網頁開啟後, 有以下顯示:
Number%3D%2323350%2C%20is%20that%20true%3F // ←沒有解碼的句子
Number=#23350, is that true? // ← 解碼的句子
unescape( ) 有這格式: unescape("%hex") , 這處的 hex 是任何一個 ASCII hex編碼 (使用十六進位), 例如 unescape("%41") 會是 A 字。
3. eval( )
eval( ) 是要瀏覽器進行工作, 使用的是這語法: eval(string) , string 是代表文字, 若這文字是 expression, eval( ) 會進行檢查, 若是 statement 就會執行這statement, 若是數目字, 會進行計算。
請看這例子:
<html> <body>
</body> </html>
這處的 eval(x > y ) 是要檢查 x 是否大過 y , 若是, 就傳回 true 這字, 若不是, 就傳回 false 這字, 所以在這例子, alert 對話盒中會出現 false 這字。
eval( ) 這功能最有用的地方是強迫瀏覽器將數字作為數值來處理, 而不是文字。例如我們設定一個文字框讓觀看者輸入數字, 瀏覽器可能會將數字作文字來處理, 若使用 eval( ) 就一定會作數字來處理, 請看以下例子。
練習-39 使用 prompt 對話盒來接受觀看者輸入的數字
這網頁有一個 prompt 對話盒, 及要求觀看者輸入一個數字, 這 script 會將這數字與 100 相加, 然後用一個 alert 對話盒顯示結果。
1. 請用瀏覽器開啟示範磁碟中的 eval-1.htm, 這網頁有以下內容:
<html> <body>
</body> </html>
2. 網頁開啟後, 你會見到一個 prompt 對話盒, 請你輸入一個數字, 按 [確定], 看有什麼結果。
在這例子, 你會見到瀏覽器將你輸入的資料作為文字來處理, 例如你輸入 250, 就會有 250100 的結果。假若我們要將一些數字作為數值來處理, 而不是文字, 可使用 eval( ) 這項功能。
練習-40 使用 eval( ) 來處理觀看者輸入的數字
這練習是重複上個例子, 但加多了 eval( ) 來處理輸入的數字。
1. 請用瀏覽器開啟示範磁碟中的 eval-2.htm, 這網頁有以下內容:
<html> <body>
</body> </html>
2. 網頁開啟後, 你會見到一個 prompt 對話盒, 請你輸入一個數字, 按 [確定], 看與上個例子有何不同。
在今次例子, x=eval(x) 是將x放進 eval( ) 內變成數值, 然後再用 x 這變數來代表, 因此 (x + 100) 就會將兩個數字加起。
除了使用 eval( ), 我們也可使用 parseInt( ) 或 parseFloat( ), 請看隨後這兩段的資料。
4. isNAN( )
NaN 是 Not a Number 的簡寫, isNaN( ) 是用來檢查一項資料是否 "不是數字", 使用這語法: isNaN(testValue), 這 testValue 就是要檢查的資料, 若不是數字 (即是文字), 就傳回 true 這字, 若是數字, 就傳回 false, 請看以下例子。
練習-41 使用 isNaN 來檢查輸入的資料是否數字
這練習的網頁有一個文字框及要求觀看者輸入一個數字, 當觀看者輸入一個數字及按 [OK] 的按鈕, 就會啟動 isNaN( ) 這功能來檢查輸入的是否一個數字。
1. 請用瀏覽器開啟示範磁碟中的 isnan.htm, 這網頁有以下內容:
<html> <body>
<form name=fm> 請輸入一個數字然後按 [OK] <p>
<input type=text name=tx>
<input type=button value=" OK " onClick="checkIt( )" >
</body> </html>
2. 網頁開啟後, 請你在文字框輸入一個數字, 然後按 [OK], 看有什麼反應, 再在文字框輸入文字, 看有何不同。
5. Number( )
這用來將一個物件變為數字, 使用這語法: Number(obj) , obj 是代表一個物件, 例如我們將一個 Date 物件放進 Number( ) 內, 如下:
若是 Date object, Number( ) 會將這物件變為自 1970 年起計算的微秒數值 (請看 第 14 章 ), 若是正數, 就是這日期之後, 若是負數, 則是這日期之前, 這例子的 Dec 25, 1990 會得出 662054400000 的數值, 若是 Dec 25, 1950, 就會得出
-600249600000 的數值。
若是 Number(true), 這會得出1, 若是 Number(false), 會得出 0, 若是其他沒有數值相連的物件, 這功能會傳回 NaN, 表示 Not a Number。
6. parseInt( )
這是 parse integer (抽取整數), 是將一個字串變為十進位的整數, 使用這語法: parseInt(string, radix), 這 radix 是這 string 的進位基數, 無指定就是十進位。若 parseInt( ) 遇到不是數值的字串, 就會傳回 NaN 的訊息。若遇到數字及字母混雜, 就會抽取至字母前的位置。
例 1 : x=parseInt(13.12, 10) 或 x=parseInt(13.12)
(13.12, 10 ) 表示這 13.12 是十進位數字, 我們也可略去這 10 字, 無指明這 radix, 就表示是十進位, 經過 parseInt( ) 的處理, x 會等於 13。
例 2 : x=parseInt(13.12, 16)
(13.12, 16) 表示這 13.12 是十六進位數字, 經過 parseInt( ) 的處理, 13.12 變為整數 13, 再轉為十進位數字, 所以 x 會等於 19。
十六進位可以有 A 至 F 這六個數字, 若數值中有這六個數字, 就要放在 " " 內, 例如 parseInt("2F", 16), 這會得出 47 的十進位數字。
例 3 : x=parseInt(110100, 2)
(110100, 2) 表示這 110100 是二進位數字, 經過 parseInt( ) 轉為十進位數字, 所以x會等於 52。
例 4 : 若 parseInt( ) 遇到數字及字母混雜的字串, 就會抽取至字母前的位置, 留意這字串要放在 " " 內, 若字母是在第一個位置, 就會傳回 NaN, 例如:
x=parseInt("34.5th") ( x 會等於 34 )
x=parseInt("Version3.4") ( x 會等於 NaN )
例 5 : parseInt( ) 也可以將文字式的字串變為數字, 例如 x="34.5", 這 34.5 是放在 " " 內, 所以會作為文字來處理, 但 parseInt( ) 會將這文字抽出來變為整數, 例如:
x=parseInt("34.5 is the result.") ( x 會等於 34 )
請同時參看 練習-67 中使用 parseInt( ) 的例子。
7. parseFloat( )
這是 parse floating number (抽取浮點數), 是將一個字串之首的浮點數 (有小數點的數字) 抽出來, 使用這語法: parseInt(value), 若 parseFloat( ) 遇到不是數值的物件, 就會傳回 NaN 的訊息。
例 1 : 例如 x=parseFloat(13.12) ( x 會等於 13.12 )
例 2 : 例如 x=parseFloat("13.12version") ( x 會等於 13.12 )
若數值是數字及字母混雜的字串, 要放在 " " 內, parseFloat( ) 會抽取數字至字母前的位置, 若字母是在首位置, 就傳回 NaN。
parseFloat( ) 也可以將文字式的字串變為數字, 在 練習-40 , 你看到如何使用eval( ) 來指定將輸入的數字作為數值來處理, 這項功能也可使用 parseInt( ) (只要整數的部份) 或 parseFloat( ), 例如 練習-40 可有以下寫法。
<html> <body>
</body> </html>
這處的 x=parseFloat(x) 是將觀看者輸入的資料作為數字來處理。
( 第 4 章完 )