「使用者:Shyangs/JavaScript」修訂間的差異
出自 MozTW Wiki
小 (→例二) |
(→冪次方、平方根) |
||
行 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">"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">"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>> | <input type=<span style="color:#DE3163">"button"</span> value=<span style="color:#DE3163">"計算"</span> onClick=<span style="color:#DE3163">"calc(this.form)"</span>> | ||
</form> | </form> |
於 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 - 基礎課程