舊文件

此處文件僅供參考，請自行考量時效性與適用程度，其他庫藏文件請參考文件頁面；
我們亟需您的協助，進行共筆系統搬移、及文件整理工作，詳情請查閱參與我們。

「使用者:Shyangs/JavaScript」修訂間的差異

出自 MozTW Wiki

小
小 （→‎網路資料）
 
(未顯示同一使用者於中間所作的 28 次修訂)
行 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>；全域變數與區域變數。
+
*可用 <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">//全域變數</span>
+
  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 條件判斷==
行 101： 行 123：
 
  </body></html>
 
  </body></html>
  
 +
==型態轉換==
 +
===字串轉數值===
 +
*刪去非數字的字串後部，把餘下的數字字串轉換為數值型態。
 +
<html><body>
 +
<span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki>
 +
<span style="color:blue">function</span> change(fObj)
 +
{
 +
  n1=parseInt(fObj.str.value);
 +
  n2=parseFloat(fObj.str.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公分78"</span> name=<span style="color:#DE3163">"str"</span>><nowiki><br></nowiki>
 +
parseInt:<input type=<span style="color:#DE3163">"text"</span> value=<span style="color:#DE3163">"輸出"</span> name=<span style="color:#DE3163">"result1"</span>><nowiki><br></nowiki>
 +
parseFloat:<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">"change(this.form)"</span>>
 +
</form>
 +
</body></html>
 +
===數值轉字串===
 +
<html><body>
 +
<span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki>
 +
<span style="color:blue">function</span> change(fObj)
 +
{
 +
  str1=<span style="color:#DE3163">""</span>+12;  <span style="color:green">//字串+數值，即為字串</span>
 +
  str2=<span style="color:#DE3163">""</span>+34;  <span style="color:green">//試比較將這兩行改寫成 str1=12;str2=34; 的結果</span>
 +
  fObj.result.value=str1+str2;
 +
}
 +
//--></script></span>
 +
 +
數值轉字串<nowiki><br></nowiki>
 +
<form>
 +
數值 a =12<nowiki><br></nowiki>
 +
數值 b =34<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">"change(this.form)"</span>>
 +
</form>
 +
</body></html>
 +
 +
==eval==
 +
*eval 是 evaluate 的簡寫
 +
*eval(codeString)
 +
=== 例一 ===
 +
<html><body>
 +
<span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki>
 +
result=eval(<span style="color:#DE3163">"2*3+4"</span>);
 +
document.write(<span style="color:#DE3163">"eval_result="</span>);
 +
document.write(result);
 +
//--></script></span>
 +
</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.takka.com.hk/jstutor/jsindex.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>

節點建立、插入、移除

insertBefore

網路資料

取自 "https://wiki.moztw.org/index.php?title=使用者:Shyangs/JavaScript&oldid=24602"
個人工具