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

http://www.ptt.cc/bbs/Ajax/M.1213531689.A.D20.html

正規表示式

RegExp g Modifier

w3schools

流程控制

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

網路資料

Mozilla 開發者中心：重新介紹 JavaScript、JavaScript 1.5 教學
ECMAScript - MDC
w3schools_js、w3school_cn
Ajax 學習筆記（良葛格學習筆記）
伍新華電腦工作室：JavaScript - 基礎課程
JavaScript - 用法|在线手册|属性|方法

@@ 行 29： / 行 29： @@
 ==變數（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>
   <span style="color:#704214"><script type="text/javascript"><nowiki><!--</nowiki>
   <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>
   function func()
@@ 行 38： / 行 39： @@
      <span style="color:blue">var</span> num = 33;       <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>
+     gInteger = 20;      <span style="color:green">//全域變數（不建議這麼寫）</span>
   }
   //--></script></span>
@@ 行 430： / 行 431： @@
 *[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://stuck.myweb.hinet.net/c/js/index.htm JAVASCRIPT 線上教學]
+*[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://www.fzs8.net/Java/JavaScript/index.html JavaScript - 用法|在线手册|属性|方法]

Mozilla Taiwan (MozTW)

舊文件

Views

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

出自 MozTW Wiki

於 2009年9月27日 (日) 01:59 的最新修訂

內容大綱

入門基礎

Hello! World!

資料型態（Data type）

變數（Variable）

正規表示式

RegExp g Modifier

流程控制

if 條件判斷

switch 條件判斷

for 迴圈

while 迴圈

break、 continue、goto

數值運算

兩數加減乘除

型態轉換

字串轉數值

數值轉字串

eval

例一

例二

捨去與進位

四捨五入

例一

例二

無條件捨去、無條件進位

冪次方、平方根

亂數

字串

字串長度

連結字串

取出字串

分割

檢索

置換

節點建立、插入、移除

insertBefore

網路資料

個人工具

本站導覽：

搜尋

工具: