?
JavaScript 第一章 基本语法1~3节
JavaScript 第二章 使用window对象
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=" ? ＋ ? " onclick="add()">
???????? <!-- 减法按钮 -->
<input name="subButton2" type="button" id="subButton2"
value="? － ? " onclick="subtration()">
???????? <!-- 乘法按钮 -->
<input name="mulButton2" type="button" id="mulButton2"
value="? ×? " onclick="multiplication()">
???????? <!-- 除法按钮 -->
<input name="divButton2" type="button" id="divButton2"
value="? ÷? " onclick="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="? － ? " onclick=" 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对象
?