JavaScript 第一章 基本语法 4~7节
JavaScript 第一章 基本语法1~3节
JavaScript 第二章 使用window对象
JavaScript 第一章 基本语法4~7节
4、JavaScript的自定义函数
4.1）什么是JavaScript的函数？要回答这个问题先看一个示例：
有一个计算器表单，点击+、-、*、/四个按钮可以对输入的两个数进行
计算，并在第三个文本框中显示计算的结果，如图：
http://www.agoit.com/upload/picture/pic/86902/90a96ac4-6eff-3d8b-b0c4-7edfd851285f.jpg
试着输入以下代码完成计算器：
<html>
<head>
<script language="javascript">
/*加法函数*/
functionadd(){
varnum1, 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;
}
/*减法函数*/
functionsubtration(){
varnum1,num2;
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
document.myform.txtResult.value=num1 - num2;
}
/*乘法函数*/
functionmultiplication(){
varnum1,num2;
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
document.myform.txtResult.value=num1 * num2;
}
/*除法函数*/
functiondivision(){
varnum1, 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=" ＋ " >
<!-- 减法按钮 -->
<input name="subButton2" type="button"id="subButton2"
value=" － " >
<!-- 乘法按钮 -->
<input name="mulButton2" type="button"id="mulButton2"
value=" × " >
<!-- 除法按钮 -->
<input name="divButton2" type="button"id="divButton2"
value=" ÷ " >
<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=" － " color: #ff0000;">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对象
页:
[1]