於 2008年5月24日 (六) 12:23 的修訂

入門基礎

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>

網路資料

Mozilla 開發者中心：重新介紹 JavaScript
w3schools_js
JAVASCRIPT 線上教學
伍新華電腦工作室：JavaScript - 基礎課程

@@ 行 246： / 行 246： @@
   無條件捨去:<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>

Mozilla Taiwan (MozTW)

舊文件

Views

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

出自 MozTW Wiki

於 2008年5月24日 (六) 12:23 的修訂

內容大綱

入門基礎

Hello! World!

資料型態（Data type）

變數（Variable）

流程控制

if 條件判斷

switch 條件判斷

for 迴圈

while 迴圈

break、 continue、goto

數值運算

兩數加減乘除

型態轉換

字串轉數值

數值轉字串

eval

例一

例二

捨去與進位

四捨五入

例一

例二

無條件捨去、無條件進位

冪次方、平方根

網路資料

個人工具

本站導覽：

搜尋

工具: