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對象