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