「使用者:Shyangs/JavaScript」修訂間的差異
出自 MozTW Wiki
(→eval) |
小 (→網路資料) |
||
(未顯示同一使用者於中間所作的 25 次修訂) | |||
行 23: | 行 23: | ||
** Array (陣列) | ** Array (陣列) | ||
** Date (日期) | ** Date (日期) | ||
− | ** RegExp | + | ** RegExp (Regular Expression,正規表示式) |
* Null (空) | * Null (空) | ||
* Undefined (未定義) | * Undefined (未定義) | ||
==變數(Variable)== | ==變數(Variable)== | ||
− | * | + | *可用 <span style="color:blue">var</span> 來宣告全域變數與區域變數;若省略關鍵字 <span style="color:blue">var</span>,則皆為全域變數。參見[http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Variables#Global_Variables Core JavaScript 1.5 Guide:Variables] |
+ | *省略關鍵字 <span style="color:blue">var</span> 將造成嚴格警告(類型:undeclared variable)。請盡量不要在函數內,以省略 <span style="color:blue">var</span>的方式來宣告全域變數。 | ||
<html><body> | <html><body> | ||
<span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
<span style="color:blue">var</span> gNum = 123; <span style="color:green">//全域變數</span> | <span style="color:blue">var</span> gNum = 123; <span style="color:green">//全域變數</span> | ||
− | gInteger = 20; <span style="color:green">// | + | gInteger = 20; <span style="color:green">//全域變數(不建議這麼寫)</span> |
<span style="color:blue">var</span> gStr = <span style="color:#DE3163">"字串"</span>; <span style="color:green">//全域變數</span> | <span style="color:blue">var</span> gStr = <span style="color:#DE3163">"字串"</span>; <span style="color:green">//全域變數</span> | ||
function func() | function func() | ||
{ | { | ||
− | num = 33; <span style="color:green">//區域變數</span> | + | <span style="color:blue">var</span> num = 33; <span style="color:green">//區域變數</span> |
− | str = <span style="color:#DE3163">"文字"</span>; <span style="color:green">//區域變數</span> | + | <span style="color:blue">var</span> str = <span style="color:#DE3163">"文字"</span>; <span style="color:green">//區域變數</span> |
+ | gInteger = 20; <span style="color:green">//全域變數(不建議這麼寫)</span> | ||
} | } | ||
//--></script></span> | //--></script></span> | ||
</body></html> | </body></html> | ||
+ | |||
+ | <html><body> | ||
+ | <span style="color:#704214"><script language="javascript"> | ||
+ | mode=<span style="color:#DE3163">'edit'</span>; <span style="color:green">//有沒有用var宣告都沒差//全域變數</span> | ||
+ | function upload() | ||
+ | { | ||
+ | alert(mode); <span style="color:green">//<==執行到這邊時是 undefined</span> | ||
+ | <span style="color:blue">var</span> mode = <span style="color:#DE3163">'uplaod'</span>;<span style="color:green">//區域變數</span> | ||
+ | alert(mode); <span style="color:green">//<== upload</span> | ||
+ | } | ||
+ | upload(); | ||
+ | </script></span> | ||
+ | </body></html> | ||
+ | :*http://www.ptt.cc/bbs/Ajax/M.1213531689.A.D20.html | ||
+ | |||
+ | ==正規表示式== | ||
+ | *[http://zh.wikipedia.org/wiki/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F 維基] | ||
+ | *[http://www.w3schools.com/jsref/jsref_obj_regexp.asp w3schools] | ||
+ | ===RegExp g Modifier=== | ||
+ | *[http://www.w3schools.com/jsref/jsref_regexp_modifier_g.asp w3schools] | ||
=流程控制= | =流程控制= | ||
==if 條件判斷== | ==if 條件判斷== | ||
行 149: | 行 171: | ||
<html><body> | <html><body> | ||
<span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
− | result=eval("2*3+4"); | + | result=eval(<span style="color:#DE3163">"2*3+4"</span>); |
document.write(<span style="color:#DE3163">"eval_result="</span>); | document.write(<span style="color:#DE3163">"eval_result="</span>); | ||
document.write(result); | document.write(result); | ||
//--></script></span> | //--></script></span> | ||
</body></html> | </body></html> | ||
+ | |||
=== 例二 === | === 例二 === | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> calc() | ||
+ | { | ||
+ | T=document.getElementById(<span style="color:#DE3163">"TBL"</span>); | ||
+ | for (var i=1;i<=3;i++) | ||
+ | { | ||
+ | codeString=<span style="color:#DE3163">"T.rows["</span>+i+<span style="color:#DE3163">"].cells[2].innerHTML=parseInt(T.rows["</span>+i+<span style="color:#DE3163">"].cells[0].innerHTML)*parseInt(T.rows["</span>+i+<span style="color:#DE3163">"].cells[1].innerHTML)"</span>; | ||
+ | eval(codeString); | ||
+ | } | ||
+ | } | ||
+ | //--></script></span> | ||
+ | <form> | ||
+ | <nowiki><table</nowiki> id=<span style="color:#DE3163">"TBL"</span> border=<span style="color:#DE3163">"1"</span>></nowiki> | ||
+ | <nowiki><tr><td>單價</td><td>總數</td><td>總價</td></tr></nowiki> | ||
+ | <nowiki><tr><td>10</td><td>8</td><td></td></tr></nowiki> | ||
+ | <nowiki><tr><td>24</td><td>2</td><td></td></tr></nowiki> | ||
+ | <nowiki><tr><td>45</td><td>5</td><td></td></tr></nowiki> | ||
+ | </table> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"計算"</span> onClick=<span style="color:#DE3163">"calc()"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ==捨去與進位== | ||
+ | ===四捨五入=== | ||
+ | *Math.round(數值) | ||
+ | *數值.toFixed(n) , n為小數後第n位。注意:此法,所得結果是字串。 | ||
+ | ==== 例一 ==== | ||
+ | *取到整數 | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> calc(fObj) | ||
+ | { | ||
+ | n1=Math.round(fObj.num.value); | ||
+ | n2=parseFloat(fObj.num.value).toFixed(0); | ||
+ | fObj.result1.value=n1; | ||
+ | fObj.result2.value=n2; | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | 四捨五入取到整數<nowiki><br></nowiki> | ||
+ | <form> | ||
+ | 數值 =<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"12.56"</span> name=<span style="color:#DE3163">"num"</span>><nowiki><br></nowiki> | ||
+ | Math.round:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result1"</span>><nowiki><br></nowiki> | ||
+ | toFixed(0):<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result2"</span>><nowiki><br></nowiki> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"計算"</span> onClick=<span style="color:#DE3163">"calc(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ==== 例二 ==== | ||
+ | *取到小數點後第二位 | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> calc(fObj) | ||
+ | { | ||
+ | n1=Math.round(fObj.num.value*100)/100;<span style="color:green">//取到小數點後第三位,則改寫 n1=Math.round(fObj.num.value*1000)/1000</span> | ||
+ | n2=parseFloat(fObj.num.value).toFixed(2); | ||
+ | fObj.result1.value=n1; | ||
+ | fObj.result2.value=n2; | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | 四捨五入取到小數點後第二位<nowiki><br></nowiki> | ||
+ | <form> | ||
+ | 數值 =<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"3.1415"</span> name=<span style="color:#DE3163">"num"</span>><nowiki><br></nowiki> | ||
+ | Math.round:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result1"</span>><nowiki><br></nowiki> | ||
+ | toFixed(2):<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result2"</span>><nowiki><br></nowiki> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"計算"</span> onClick=<span style="color:#DE3163">"calc(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ===無條件捨去、無條件進位=== | ||
+ | *無條件捨去:Math.floor(數值) | ||
+ | *無條件進位:Math.ceil(數值) | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> calc(fObj) | ||
+ | { | ||
+ | n1=Math.floor(fObj.num.value); | ||
+ | n2=Math.ceil(fObj.num.value); | ||
+ | fObj.result1.value=n1; | ||
+ | fObj.result2.value=n2; | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | 無條件捨去、無條件進位<nowiki><br></nowiki> | ||
+ | <form> | ||
+ | 數值 =<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"12.56"</span> name=<span style="color:#DE3163">"num"</span>><nowiki><br></nowiki> | ||
+ | 無條件捨去:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result1"</span>><nowiki><br></nowiki> | ||
+ | 無條件進位:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result2"</span>><nowiki><br></nowiki> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"計算"</span> onClick=<span style="color:#DE3163">"calc(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ==冪次方、平方根== | ||
+ | *冪次方:Math.pow(底數,指數) | ||
+ | *平方根:Math.sqrt(數值) | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> calc(fObj) | ||
+ | { | ||
+ | fObj.result1.value=Math.pow(fObj.num.value,2); | ||
+ | fObj.result2.value=Math.pow(fObj.num.value,3); | ||
+ | fObj.result3.value=Math.sqrt(fObj.num.value); | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | 冪次方、平方根<nowiki><br></nowiki> | ||
+ | <form> | ||
+ | 數值 =<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"2"</span> name=<span style="color:#DE3163">"num"</span>><nowiki><br></nowiki> | ||
+ | 平方:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result1"</span>><nowiki><br></nowiki> | ||
+ | 立方:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result2"</span>><nowiki><br></nowiki> | ||
+ | 平方根:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result3"</span>><nowiki><br></nowiki> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"計算"</span> onClick=<span style="color:#DE3163">"calc(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ==亂數== | ||
+ | *Math.random() 產生的亂數值範圍為[0,1) | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | document.write(Math.random()); <span style="color:green">//每一個 Math.random() 都是一個獨立的亂數值,上下這兩個是不同的Math.random()</span> | ||
+ | DicePoint=Math.floor(Math.random()*6)+1; <span style="color:green">//Math.random()*6=[0,6) //無條件捨去[0,6)={0,1,2,3,4,5} //{0,1,2,3,4,5}+1={1,2,3,4,5,6}</span> | ||
+ | document.write(<span style="color:#DE3163">"<nowiki><br></nowiki>骰子點數:"</span>+DicePoint); | ||
+ | //--></script></span> | ||
+ | </body></html> | ||
+ | =字串= | ||
+ | ==字串長度== | ||
+ | *字串.length | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> calc(fObj) | ||
+ | { | ||
+ | str=fObj.inputValue.value; | ||
+ | fObj.result.value=str.length; | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | 字串長度<nowiki><br></nowiki> | ||
+ | <form> | ||
+ | 字串:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"JavaScript"</span> name=<span style="color:#DE3163">"inputValue"</span>><nowiki><br></nowiki> | ||
+ | 長度=<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result"</span>><nowiki><br></nowiki> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"計算"</span> onClick=<span style="color:#DE3163">"calc(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ==連結字串== | ||
+ | *字串+字串 | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> connect(fObj) | ||
+ | { | ||
+ | str1=<span style="color:#DE3163">"Java"</span>; | ||
+ | str2=<span style="color:#DE3163">"Script"</span>; | ||
+ | fObj.result.value=str1+str2; | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | 連結字串<nowiki><br></nowiki> | ||
+ | <form> | ||
+ | 字串 a = Java<nowiki><br></nowiki> | ||
+ | 字串 b = Script<nowiki><br></nowiki> | ||
+ | 連結:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result"</span>><nowiki><br></nowiki> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"連結"</span> onClick=<span style="color:#DE3163">"connect(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ==取出字串== | ||
+ | *字串.charAt(位置編號) | ||
+ | *字串.substr(開始位置,取出字數) | ||
+ | *字串.substring(開始位置,結束位置) | ||
+ | *字串.slice(開始位置,結束位置) | ||
+ | **slice可以使用負值,substring不行 | ||
+ | **位置編號,從 0 開始 | ||
+ | {| style="width:50%" border="1" | ||
+ | |align="center"|位置編號 | ||
+ | |align="center"|0 | ||
+ | |align="center"|1 | ||
+ | |align="center"|2 | ||
+ | |align="center"|3 | ||
+ | |align="center"|4 | ||
+ | |align="center"|5 | ||
+ | |align="center"|6 | ||
+ | |- | ||
+ | |align="center"|字串 | ||
+ | |align="center"|A | ||
+ | |align="center"|B | ||
+ | |align="center"|C | ||
+ | |align="center"|D | ||
+ | |align="center"|E | ||
+ | |align="center"|F | ||
+ | |align="center"|G | ||
+ | |} | ||
+ | :*一字串"ABCDEFG" | ||
+ | :*'''字串.charAt(0)''' 會取出"A" | ||
+ | :*'''字串.substr(2,3)''' 會取出"CDE" | ||
+ | :*'''字串.substring(2,5)''' 會取出"CDE" | ||
+ | :*'''字串.slice(2,-1)''' 會取出"CDEF",相當於 '''字串.slice(2,6)''' | ||
+ | |||
+ | ==分割== | ||
+ | *字串.split("分割文字")、字串.split("分割文字",可存的陣列元素數目) | ||
+ | **字串.split("分割文字") 的結果是一陣列。 | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> F_split(fObj) | ||
+ | { | ||
+ | str=<span style="color:#DE3163">"How are you doing?"</span>; | ||
+ | separator=fObj.separator.value; | ||
+ | fObj.result.value=str.split(separator); | ||
+ | fObj.result2.value=str.split(separator).length; | ||
+ | fObj.result3.value=str.split(separator)[0]; | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | 連結字串<nowiki><br></nowiki> | ||
+ | <form> | ||
+ | 字串 = How are you doing?<nowiki><br></nowiki> | ||
+ | 分割文字:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">" "</span> name=<span style="color:#DE3163">"separator"</span>>(預設值為一空白,試填入空字串,觀察其結果。)<nowiki><br></nowiki> | ||
+ | 結果(陣列):<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result"</span>><nowiki><br></nowiki> | ||
+ | 陣列長度:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result2"</span>><nowiki><br></nowiki> | ||
+ | 陣列編號0的元素:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result3"</span>><nowiki><br></nowiki> | ||
+ | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"分割"</span> onClick=<span style="color:#DE3163">"F_split(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | ==檢索== | ||
+ | ==置換== | ||
+ | *字串.replace(尋找字串,新字串) | ||
+ | **字串.replace(/RegExp/Modifier,"新字串") | ||
+ | <html><body> | ||
+ | <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki> | ||
+ | <span style="color:blue">function</span> change(fObj) | ||
+ | { | ||
+ | str=fObj.pre.value; | ||
+ | fObj.after.value=str.replace(/Firefox /g,<span style="color:#DE3163">"火狐"</span>); | ||
+ | } | ||
+ | //--></script></span> | ||
+ | |||
+ | <nowiki><h3>置換<h3></nowiki> | ||
+ | <form> | ||
+ | 置換前<nowiki><br></nowiki><textarea cols=<span style="color:#DE3163">"40"</span> rows=<span style="color:#DE3163">"3"</span> name=<span style="color:#DE3163">"pre"</span>> | ||
+ | Firefox 的下載數量自2004年9月釋出正式版後持續的增加,在2008年2月21日,Firefox 下載數量到達了50億次。</textarea><nowiki><br></nowiki> | ||
+ | 置換後<nowiki><br></nowiki><textarea cols=<span style="color:#DE3163">"40"</span> rows=<span style="color:#DE3163">"3"</span> name=<span style="color:#DE3163">"after"</span>></textarea><nowiki><br></nowiki> | ||
+ | "Firefox "置換為"火狐"<input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"置換"</span> onClick=<span style="color:#DE3163">"change(this.form)"</span>> | ||
+ | </form> | ||
+ | </body></html> | ||
+ | |||
+ | =節點建立、插入、移除= | ||
+ | ==insertBefore== | ||
+ | *[http://forum.moztw.org/viewtopic.php?p=131433#131433 moztw#p=131433] | ||
+ | *[http://developer.mozilla.org/en/docs/DOM:element.insertBefore MDC] | ||
=網路資料= | =網路資料= | ||
− | *Mozilla 開發者中心:[http://developer.mozilla.org/zh_tw/docs/%E9%87%8D%E6%96%B0%E4%BB%8B%E7%B4%B9_JavaScript 重新介紹 JavaScript] | + | *Mozilla 開發者中心:[http://developer.mozilla.org/zh_tw/docs/%E9%87%8D%E6%96%B0%E4%BB%8B%E7%B4%B9_JavaScript 重新介紹 JavaScript]、[https://developer.mozilla.org/zh_tw/Core_JavaScript_1.5_%e6%95%99%e5%ad%b8 JavaScript 1.5 教學] |
− | *[http://www.w3schools.com/js/default.asp w3schools_js] | + | *[https://developer.mozilla.org/en/ECMAScript ECMAScript - MDC] |
+ | *[http://www.w3schools.com/js/default.asp w3schools_js]、[http://www.w3school.com.cn/js/index.asp w3school_cn] | ||
+ | *[http://caterpillar.onlyfun.net/Gossip/AjaxGossip/AjaxGossip.html Ajax 學習筆記(良葛格學習筆記)] | ||
+ | *伍新華電腦工作室:[http://www.takka.com.hk/jstutor/jsindex.htm JavaScript - 基礎課程] | ||
+ | <!-- 失連 | ||
+ | *[http://www.itsway.net/js/jsindex.aspx JavaScript教程] | ||
*[http://stuck.myweb.hinet.net/c/js/index.htm JAVASCRIPT 線上教學] | *[http://stuck.myweb.hinet.net/c/js/index.htm JAVASCRIPT 線上教學] | ||
− | * | + | --> |
+ | *[http://www.fzs8.net/Java/JavaScript/index.html JavaScript - 用法|在线手册|属性|方法] |
於 2009年9月27日 (日) 01:59 的最新修訂
入門基礎
Hello! World!
- 網頁寫入文字"你好!"。
<html><body>
<script type="text/javascript"><!--
document.write("你好!");
//--></script>
</body></html>
- 彈出對話框"你好!"。
<html><body>
<script type="text/javascript"><!--
alert("你好!");
//--></script>
</body></html>
資料型態(Data type)
- Number (數字)
- String (字串)
- Boolean (真假值)
- Object (物件)
- Function (函式)
- Array (陣列)
- Date (日期)
- RegExp (Regular Expression,正規表示式)
- Null (空)
- Undefined (未定義)
變數(Variable)
- 可用 var 來宣告全域變數與區域變數;若省略關鍵字 var,則皆為全域變數。參見Core JavaScript 1.5 Guide:Variables
- 省略關鍵字 var 將造成嚴格警告(類型:undeclared variable)。請盡量不要在函數內,以省略 var的方式來宣告全域變數。
<html><body>
<script type="text/javascript"><!--
var gNum = 123; //全域變數
gInteger = 20; //全域變數(不建議這麼寫)
var gStr = "字串"; //全域變數
function func()
{
var num = 33; //區域變數
var str = "文字"; //區域變數
gInteger = 20; //全域變數(不建議這麼寫)
}
//--></script>
</body></html>
<html><body>
<script language="javascript">
mode='edit'; //有沒有用var宣告都沒差//全域變數
function upload()
{
alert(mode); //<==執行到這邊時是 undefined
var mode = 'uplaod';//區域變數
alert(mode); //<== upload
}
upload();
</script>
</body></html>
正規表示式
RegExp g Modifier
流程控制
if 條件判斷
if (條件式) { 陳述句; } else { 陳述句; }
switch 條件判斷
for 迴圈
while 迴圈
break、 continue、goto
數值運算
加 | 減 | 乘 | 除 | 餘數 |
+ | - | * | / | % |
兩數加減乘除
<html><body> <script type="text/javascript"><!-- function calc(fObj) { n1=parseFloat(fObj.num1.value); n2=parseFloat(fObj.num2.value); fObj.result1.value=n1 + n2; fObj.result2.value=n1 - n2; fObj.result3.value=n1 * n2; fObj.result4.value=n1 / n2; fObj.result5.value=n1 % n2; } //--></script> 數值運算<br> <form> 數值 a =<input type="text" value="12" name="num1"><br> 數值 b =<input type="text" value="5" name="num2"><br> 兩數之和=<input type="text" value="輸出" name="result1"><br> 兩數之差=<input type="text" value="輸出" name="result2"><br> 兩數乘積=<input type="text" value="輸出" name="result3"><br> 商=<input type="text" value="輸出" name="result4"><br> 餘數=<input type="text" value="輸出" name="result5"><br> <input type="button" value="計算" onClick="calc(this.form)"> </form> </body></html>
型態轉換
字串轉數值
- 刪去非數字的字串後部,把餘下的數字字串轉換為數值型態。
<html><body> <script type="text/javascript"><!-- function change(fObj) { n1=parseInt(fObj.str.value); n2=parseFloat(fObj.str.value); fObj.result1.value=n1; fObj.result2.value=n2; } //--></script> 字串轉數值<br> <form> 數值 =<input type="text" value="12.56公分78" name="str"><br> parseInt:<input type="text" value="輸出" name="result1"><br> parseFloat:<input type="text" value="輸出" name="result2"><br> <input type="button" value="計算" onClick="change(this.form)"> </form> </body></html>
數值轉字串
<html><body> <script type="text/javascript"><!-- function change(fObj) { str1=""+12; //字串+數值,即為字串 str2=""+34; //試比較將這兩行改寫成 str1=12;str2=34; 的結果 fObj.result.value=str1+str2; } //--></script> 數值轉字串<br> <form> 數值 a =12<br> 數值 b =34<br> 結果:<input type="text" value="輸出" name="result"><br> <input type="button" value="計算" onClick="change(this.form)"> </form> </body></html>
eval
- eval 是 evaluate 的簡寫
- eval(codeString)
例一
<html><body>
<script type="text/javascript"><!--
result=eval("2*3+4");
document.write("eval_result=");
document.write(result);
//--></script>
</body></html>
例二
<html><body> <script type="text/javascript"><!-- function calc() { T=document.getElementById("TBL"); for (var i=1;i<=3;i++) { codeString="T.rows["+i+"].cells[2].innerHTML=parseInt(T.rows["+i+"].cells[0].innerHTML)*parseInt(T.rows["+i+"].cells[1].innerHTML)"; eval(codeString); } } //--></script> <form> <table id="TBL" border="1"></nowiki> <tr><td>單價</td><td>總數</td><td>總價</td></tr> <tr><td>10</td><td>8</td><td></td></tr> <tr><td>24</td><td>2</td><td></td></tr> <tr><td>45</td><td>5</td><td></td></tr>
<input type="button" value="計算" onClick="calc()"> </form> </body></html>
捨去與進位
四捨五入
- Math.round(數值)
- 數值.toFixed(n) , n為小數後第n位。注意:此法,所得結果是字串。
例一
- 取到整數
<html><body> <script type="text/javascript"><!-- function calc(fObj) { n1=Math.round(fObj.num.value); n2=parseFloat(fObj.num.value).toFixed(0); fObj.result1.value=n1; fObj.result2.value=n2; } //--></script> 四捨五入取到整數<br> <form> 數值 =<input type="text" value="12.56" name="num"><br> Math.round:<input type="text" value="輸出" name="result1"><br> toFixed(0):<input type="text" value="輸出" name="result2"><br> <input type="button" value="計算" onClick="calc(this.form)"> </form> </body></html>
例二
- 取到小數點後第二位
<html><body> <script type="text/javascript"><!-- function calc(fObj) { n1=Math.round(fObj.num.value*100)/100;//取到小數點後第三位,則改寫 n1=Math.round(fObj.num.value*1000)/1000 n2=parseFloat(fObj.num.value).toFixed(2); fObj.result1.value=n1; fObj.result2.value=n2; } //--></script> 四捨五入取到小數點後第二位<br> <form> 數值 =<input type="text" value="3.1415" name="num"><br> Math.round:<input type="text" value="輸出" name="result1"><br> toFixed(2):<input type="text" value="輸出" name="result2"><br> <input type="button" value="計算" onClick="calc(this.form)"> </form> </body></html>
無條件捨去、無條件進位
- 無條件捨去:Math.floor(數值)
- 無條件進位:Math.ceil(數值)
<html><body> <script type="text/javascript"><!-- function calc(fObj) { n1=Math.floor(fObj.num.value); n2=Math.ceil(fObj.num.value); fObj.result1.value=n1; fObj.result2.value=n2; } //--></script> 無條件捨去、無條件進位<br> <form> 數值 =<input type="text" value="12.56" name="num"><br> 無條件捨去:<input type="text" value="輸出" name="result1"><br> 無條件進位:<input type="text" value="輸出" name="result2"><br> <input type="button" value="計算" onClick="calc(this.form)"> </form> </body></html>
冪次方、平方根
- 冪次方:Math.pow(底數,指數)
- 平方根:Math.sqrt(數值)
<html><body> <script type="text/javascript"><!-- function calc(fObj) { fObj.result1.value=Math.pow(fObj.num.value,2); fObj.result2.value=Math.pow(fObj.num.value,3); fObj.result3.value=Math.sqrt(fObj.num.value); } //--></script> 冪次方、平方根<br> <form> 數值 =<input type="text" value="2" name="num"><br> 平方:<input type="text" value="輸出" name="result1"><br> 立方:<input type="text" value="輸出" name="result2"><br> 平方根:<input type="text" value="輸出" name="result3"><br> <input type="button" value="計算" onClick="calc(this.form)"> </form> </body></html>
亂數
- Math.random() 產生的亂數值範圍為[0,1)
<html><body>
<script type="text/javascript"><!--
document.write(Math.random()); //每一個 Math.random() 都是一個獨立的亂數值,上下這兩個是不同的Math.random()
DicePoint=Math.floor(Math.random()*6)+1; //Math.random()*6=[0,6) //無條件捨去[0,6)={0,1,2,3,4,5} //{0,1,2,3,4,5}+1={1,2,3,4,5,6}
document.write("<br>骰子點數:"+DicePoint);
//--></script>
</body></html>
字串
字串長度
- 字串.length
<html><body> <script type="text/javascript"><!-- function calc(fObj) { str=fObj.inputValue.value; fObj.result.value=str.length; } //--></script> 字串長度<br> <form> 字串:<input type="text" value="JavaScript" name="inputValue"><br> 長度=<input type="text" value="輸出" name="result"><br> <input type="button" value="計算" onClick="calc(this.form)"> </form> </body></html>
連結字串
- 字串+字串
<html><body> <script type="text/javascript"><!-- function connect(fObj) { str1="Java"; str2="Script"; fObj.result.value=str1+str2; } //--></script> 連結字串<br> <form> 字串 a = Java<br> 字串 b = Script<br> 連結:<input type="text" value="輸出" name="result"><br> <input type="button" value="連結" onClick="connect(this.form)"> </form> </body></html>
取出字串
- 字串.charAt(位置編號)
- 字串.substr(開始位置,取出字數)
- 字串.substring(開始位置,結束位置)
- 字串.slice(開始位置,結束位置)
- slice可以使用負值,substring不行
- 位置編號,從 0 開始
位置編號 | 0 | 1 | 2 | 3 | 4 | 5 | 6 |
字串 | A | B | C | D | E | F | G |
- 一字串"ABCDEFG"
- 字串.charAt(0) 會取出"A"
- 字串.substr(2,3) 會取出"CDE"
- 字串.substring(2,5) 會取出"CDE"
- 字串.slice(2,-1) 會取出"CDEF",相當於 字串.slice(2,6)
分割
- 字串.split("分割文字")、字串.split("分割文字",可存的陣列元素數目)
- 字串.split("分割文字") 的結果是一陣列。
<html><body> <script type="text/javascript"><!-- function F_split(fObj) { str="How are you doing?"; separator=fObj.separator.value; fObj.result.value=str.split(separator); fObj.result2.value=str.split(separator).length; fObj.result3.value=str.split(separator)[0]; } //--></script> 連結字串<br> <form> 字串 = How are you doing?<br> 分割文字:<input type="text" value=" " name="separator">(預設值為一空白,試填入空字串,觀察其結果。)<br> 結果(陣列):<input type="text" value="輸出" name="result"><br> 陣列長度:<input type="text" value="輸出" name="result2"><br> 陣列編號0的元素:<input type="text" value="輸出" name="result3"><br> <input type="button" value="分割" onClick="F_split(this.form)"> </form> </body></html>
檢索
置換
- 字串.replace(尋找字串,新字串)
- 字串.replace(/RegExp/Modifier,"新字串")
<html><body> <script type="text/javascript"><!-- function change(fObj) { str=fObj.pre.value; fObj.after.value=str.replace(/Firefox /g,"火狐"); } //--></script> <h3>置換<h3> <form> 置換前<br><textarea cols="40" rows="3" name="pre"> Firefox 的下載數量自2004年9月釋出正式版後持續的增加,在2008年2月21日,Firefox 下載數量到達了50億次。</textarea><br> 置換後<br><textarea cols="40" rows="3" name="after"></textarea><br> "Firefox "置換為"火狐"<input type="button" value="置換" onClick="change(this.form)"> </form> </body></html>