JavaScript 第一章 基本語法4~7節
4 、 JavaScript 的自定義函數
4.1 ）什麼是 JavaScript 的函數？要回答這個問題先看一個示例：
有一個計算器表單，點擊 + 、 - 、 * 、 / 四個按鈕 可以對輸入的兩個數進行
計算，並在第三個文本框中顯示計算的結果 ，如圖：
試着輸入以下代碼完成計算器：
<html>
<head>
<script language="javascript">
/* 加法函數 */
function add(){
var num1, num2;
/*
document.myform.txtNum1.value
文檔對象 . 表單名 . 文本框名 .value 可以取到文本框的值 ( 字符串 )
*/
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
/*
將文本框的值轉換爲浮點數後進行計算，
將計算結果設置給 name 值爲 txtResult 的文本框
*/
document.myform.txtResult.value = num1 + num2;
}
/* 減法函數 */
function subtration(){
var num1,num2;
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
document.myform.txtResult.value=num1 - num2;
}
/* 乘法函數 */
function multiplication(){
var num1,num2;
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
document.myform.txtResult.value=num1 * num2;
}
/* 除法函數 */
function division(){
var num1, num2;
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
document.myform.txtResult.value=num1 / num2;
}
</script>
</head>
<body>
<form action="" method="post" name="myform" id="myform">
購物簡易計算器 <br />
第一個數 : <input name="txtNum1" type="text" id="txtNum1"
size="25"><br />
第二個數 :<input name="txtNum2" type="text" id="txtNum2"
size="25"><br />
<!--
加法按鈕， onclick 是按鈕點擊事件， add() 是加法函數，當
點擊該按鈕的時候會觸發 onclick 事件並調用 add() 函數
-->
<input name="addButton2" type="button" id="addButton2"
value=" ＋ " οnclick="add()">
<!-- 減法按鈕 -->
<input name="subButton2" type="button" id="subButton2"
value=" － " οnclick="subtration()">
<!-- 乘法按鈕 -->
<input name="mulButton2" type="button" id="mulButton2"
value=" × " οnclick="multiplication()">
<!-- 除法按鈕 -->
<input name="divButton2" type="button" id="divButton2"
value=" ÷ " οnclick="division()">
<br />
計算結果 :<input name="txtResult" type="text"
id="txtResult" size="25">
</form>
</body>
</html>
當你錄入該段代碼並執行成功後，我們再回答什麼是 JavaScript 函數？其實
JavaScript 函數與 Java 中的方法類似，是執行特定任務的語句塊，還可以定義參數和返回值
4.2 ）如何使用函數？
函數語法：
function 函數名 ( 參數 1, 參數 2, …){ // 可以不帶參數
JavaScript 語句 ;
return 返回值 ; // 如果有返回值才需要 return 語句
}
4.3 ）體會帶參函數，將計算器函數改爲帶參函數，如下：
<script language=" javascript" >
/*
根據運算符執行計算的函數，參數 op 爲運算符
*/
function compute(op ){
var num1, num2;
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
if (op == "+"){
document.myform.txtResult.value = num1 + num2;
}else if (op == "-"){
document.myform.txtResult.value = num1 - num2;
}else if (op == "*"){
document.myform.txtResult.value = num1 * num2;
}else if (op == "/" && num2 != 0){
document.myform.txtResult.value=num1 / num2;
}
}
</script>
將 + 、 - 、 * 、 / 四個按鈕的 onclick 事件中的函數改爲：
compute(" 運算符 ")
如： <!-- 減法按鈕 -->
<input name="subButton2" type="button" id="subButton2"
value=" － " οnclick=" compute ('-') ">
執行效果相同，但是由之前的使用 4 個函數改成了使用 1 個函數搞定
5 、計算器代碼常見錯誤
常見錯誤 1 ，變量名區分大小寫：
var Num1, num2;
num1 = parseFloat(document.myform.txtNum1.value);// 報錯
常見錯誤 2 ，文本框的值是字符串，進行算術運算需轉換爲數值型，
var num1,num2;
// 沒有類型轉換， num1 爲字符串
num1 = document.myform.txtNum1.value;
6 、知識點總結
- JavaScript 腳本的基本結構是什麼 ？
- JavaScript 與 Java 基本語法有哪些相似的地方 ？
- 如何定義函數、如何調用函數 ？
- 計算器代碼的常見錯誤有哪些 ？
7 、請下載JavaScript幫助文檔
JavaScript 第一章 基本語法1~3節
JavaScript 第二章 使用window對象