於 2008年5月24日 (六) 13:58 的修訂

入門基礎

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
Null （空）
Undefined （未定義）

變數（Variable）

用 var 來宣告變數，可以省略關鍵字 var；全域變數與區域變數。

<html><body>
<script type="text/javascript"><!--
var gNum = 123;     //全域變數
gInteger = 20;      //全域變數
var gStr = "字串";  //全域變數
function func()
{
   num = 33;       //區域變數
   str = "文字";   //區域變數
}
//--></script>
</body></html>

流程控制

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)

@@ 行 278： / 行 278： @@
   <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,5] //[0,5]+1＝[1,6]</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>
 =字串=
 ==字串長度==

Mozilla Taiwan (MozTW)

舊文件

Views

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

出自 MozTW Wiki

於 2008年5月24日 (六) 13:58 的修訂

內容大綱

入門基礎

Hello! World!

資料型態（Data type）

變數（Variable）

流程控制

if 條件判斷

switch 條件判斷

for 迴圈

while 迴圈

break、 continue、goto

數值運算

兩數加減乘除

型態轉換

字串轉數值

數值轉字串

eval

例一

例二

捨去與進位

四捨五入

例一

例二

無條件捨去、無條件進位

冪次方、平方根

亂數

字串

字串長度

連結字串

取出字串

分割

檢索

置換

網路資料

個人工具

本站導覽：

搜尋

工具: