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对象
相关推荐
NULL 博文链接：https://hotstrong.iteye.com/blog/999215
第一章 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 第二章 语法...
第3章JavaScript基本语法 第4章windows(窗体)对象 第5章document对象 第6章 文本对象 第7章按钮对象 第8章 选择和隐藏对象 第9章location对象 第10章history对象 第11章layer对象 第12章字符串对象 第13章日期对象...
JavaScript 语言基础知识点总结(思维导图)
第一章 CSS样式表 1 1.1 什么是CSS 1 1.2 CSS的几种设置方式 1 1.2.1 内联样式表 1 1.2.2 嵌入样式表 2 1.2.3 外部样式表 2 1.2.4 输入样式表 3 1.3 样式规则的选择器 3 1.3.1 Html selector 3 1.3.2 class selector...
第4章 案例研究:JavaScript美术馆 4.1 编写标记语言文档 4.2 编写JavaScript函数 4.3 JavaScript函数的调用 4.4 对JavaScript函数进行功能扩展 4.5 小结 第5章 JavaScript编程原则和良好习惯 ...
第一部分 第1章 HTML 5简介 第2章 HTML 5的常用元素与属性 第3章 HTML 5表单相关元素和属性 第4章 HTML 5的绘图支持 第5章 HTML 5的多媒体支持 第二部分 第6章 级联样式单与CSS选择器 第7章 字体与文本相关...
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理，由浅入深、循序渐进地引导读者快速...
第 1 章 JAVASCRIPT的语法 1 1.1 什么是脚本程序和JAVASCRIPT 1 1.1.1 什么是脚本程序 1 1.1.2 Javascrpit的简介 1 1.2 脚本代码的位置 2 1.2.1 也可将javascript放入到单独的一个文件js文件，在需要使用的时候引入:...
《Head first javascript 》 是一部优秀的、注重实践的JavaScript教程。作者首先概览了JavaScript，包括它的语法...最后单独设计一章来讲述第三方示例，演示了YUI 和 jQuery JavaScript库的使用。此处为该书配套的源码.
第4~7章讲解了JavaScript编程中的高级技术，目的是帮助读者编写更复杂的JavaScript程序，主要涉及错误处理、函数式编程、面向对象编程、模块化等重要内容；第8~12章则将重心转移到JavaScript环境中可用的工具上，...
为什么学习JSP之前必须掌握JavaScript和Java语言？因为JSP是基于Java语言的，JSP是Java的网络应用，所以理所当然要熟悉Java语言，而JavaScript是一种...本章先介绍JavaScript的基本语法，然后介绍Java语言的具体特性。
第4章 JavaScript常用对象 73 4.1 Document对象 73 4.1.1 Document对象概述 73 4.1.2 使用Document对象 75 4.2 Form对象及其元素 79 4.2.1 Form对象概述 79 4.2.2 表单元素 80 4.2.3 表单元素属性和事件 82 4.2.4 ...
本书是一部优秀的、注重实践的...最后单独设计一章来讲述第三方示例，演示了YUI 和 jQuery javascript库的使用。 本书适合初级和中级水平的javascript开发人员阅读，可作为高等院校计算机专业的javascript课程教材。
本课程主要是介绍JavaScript语言的语法，如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入，可...第一章: JavaScript简介 第二章: JavaScript基本语法 第三掌 JavaScript对象 第四章 在浏览器中使用
Head First JavaScript（中文版）本书是一部优秀的、注重实践的JavaScript教程。作者首先概览了JavaScript，包括它的语法、良好的编码...最后单独设计一章来讲述第三方示例，演示了YUI 和 jQuery JavaScript库的使用。.
第一章 简介 这一章简单介绍了 JavaScript，Netscape 跨平台的基于对象的适用于客户和服务器应用程序的脚本语言。 客户端的 JavaScript 服务器端的 JavaScript JavaScript 对象 JavaScript 安全性 第二章 操作符 ...
《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识，着重介绍dom 编程技术背后的思路和原则：平稳退化、渐进增强和以用户为中心等。...第4章案例研究：javascript图片库 46
其中包括：第一章 HTML基础 第二章 HTML基础(2).ppt 第三章 CSS样式表_语法规则 第四章 CSS样式表_样式控制 第五章 CSS样式表_盒子模型.ppt 第六章 CSS样式表_页面布局 第七章 Javascript基础语法 第八章 Javascript...