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对象
相关推荐
本教程主要涵盖JavaScript的第一章，基础语法部分的1~3节，旨在帮助初学者快速理解并掌握JavaScript的基本用法。 首先，JavaScript是一种解释型的、基于原型的、弱类型的脚本语言。它的基本语法包括变量声明、数据...
JavaScript 基础语法 什么是 JavaScript JavaScript 是一种嵌入在网页中的解释型脚本语言，运行在浏览器中，用来丰富页面的互动。它最初由 Netscape 公司发明，最后提交给欧洲计算机制造商协会（ECMA）， ECMA 将 ...
9. **JS_chp1课堂案例**：这部分内容可能包含了一些课堂上的实际示例，帮助学生理解和应用第一章学到的JS基础概念。 通过这些课件，初学者可以系统地学习和掌握JavaScript的基本语法，并通过实例加深理解，为进一步...
JavaScript函数是第一类对象，可以赋值给变量、作为参数传递和返回。函数定义有两种方式：函数声明和函数表达式。作用域决定变量在哪里可见，全局变量在整个脚本中都可用，而局部变量只在函数内部有效。ES6引入了...
这个名为“JavaScript第1章的所有答案”的压缩包文件显然是一个学习资源，包含了解答JavaScript第一章节所有习题、实验和理论问题的答案。这为初学者提供了一个宝贵的自我检查和学习平台，帮助他们更好地理解和掌握...
本“accp5.0JavaScript第五章上机答案”应当包含了上述知识点的具体实践和解答，帮助学员巩固理论知识，提高动手能力。通过解决上机题目，学员能够更好地理解和运用JavaScript，为后续的Web开发打下坚实基础。
本资源"JavaScript第2章的答案"聚焦于这一编程语言的第二章内容，旨在帮助学习者深入理解和掌握JavaScript的基本概念和语法。 首先，JavaScript第二章通常涵盖的基础内容可能包括变量、数据类型和操作符。变量是...
在"accp 5.0 s2 javascript 第六章"的学习中，我们聚焦于JavaScript这一强大的编程语言，特别是在上机阶段。JavaScript是互联网应用开发的关键技术，尤其在网页动态交互方面有着不可替代的作用。本章的内容可能包括...
总的来说，"JavaScript第四章的答案"涵盖了从基本语法到高级概念的广泛内容。这份资料详尽地解答了这一章可能出现的所有问题，无论你是初学者还是有一定经验的开发者，都会从中受益匪浅。务必仔细研读并实践，这将对...
第一章 概述 4 1．1 JavaScript的由来 4 1．2 什么是JavaScript 4 1．3 JavaScript的特点 4 1．3．1 javascript的优点 5 1．3．2 javascript的局限性 5 1．4 Java 与 JavaScript 有什么不同 5 第二章 语法...
本压缩包文件“js2阶段的js第一章课后习题答案”是针对JavaScript学习者的一个资源，特别是那些正在进行js2阶段学习的学员。这个章节通常涵盖JavaScript的基础概念，包括语法、变量、数据类型、操作符、流程控制以及...
在北大青鸟ACCP5.0 S2的课程中，JavaScript作为核心部分，主要涵盖第4至7章的内容，旨在帮助学员深入理解和掌握这门语言的关键概念和技术。 第四章可能主要介绍了JavaScript的基础语法。这部分内容通常包括变量声明...
JavaScript 中函数是第一类对象，可以赋值给变量、作为参数传递或作为其他函数的返回值。函数声明使用 `function` 关键字，ES6 中引入了箭头函数（=>）的简洁语法。 5. 对象： 对象是键值对的集合，通过花括号 `{...
#### 第一章 简介 - **JavaScript的特点**：JavaScript是一种弱类型的编程语言，这意味着在定义变量时无需指定其类型，使用`var`关键字即可创建变量。此外，JavaScript是区分大小写的，因此`a`与`A`、`valueof`与`...
这个名为"JavaScript第一章示例代码1.rar"的压缩包很可能是为了教学或学习目的而准备的，包含了与JavaScript第一章相关的实践代码示例。在这个章节中，我们通常会接触到JavaScript的基础知识，包括但不限于变量、...
在“S2-3使用JavaScript增强交互效果第一章到第三章”的课程中，我们深入探讨了如何利用JavaScript来提升用户的在线体验。 第一章：JavaScript基础 在这个章节，我们将学习JavaScript的基本语法，包括变量声明、...
在"21天学通JavaScript"这本书的第一部分中，涵盖了从基础到进阶的JavaScript知识，包括但不限于以下内容： 1. **JavaScript简介**：介绍JavaScript的历史、作用以及在网页开发中的地位，解释它是如何运行在浏览器...
总的来说，"JavaScript第十章完整案例"是一个全面锻炼JavaScript技能的实践平台，涵盖了从基础语法到高级特性的广泛内容，同时也提供了实际项目经验，对于提升开发者解决问题的能力和理解Web开发的整体流程有着重要...
在这个压缩包文件中，你将找到关于这一章的课后习题解答、上机实践指导以及理论知识的解析，这些内容对于学习和巩固JavaScript知识体系具有极大的价值。 首先，我们来深入理解JavaScript的基础语法。这包括变量声明...