《JavaScript程序设计教程》项目3：科学计算器的设计

上传人：独*** IP属地：江苏上传时间：2022-11-08 格式：PPTX 页数：53 大小：547.83KB 积分：15 举报 版权申诉

已阅读5页，还剩48页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript程序设计教程项目3：科学计算器的设计项目3：科学计算器的设计3.1功能与技术分析3.1.1功能分析将简单计算器改进为一个科学计算器，可以进行sin、cos、tan、arcsin、arccos、arctan等三角函数的计算，还可以计算乘方、取整、取余、求阶乘、求对数等计算，如图3-1所示。项目3：科学计算器的设计3.1功能与技术分析3.1.2技术分析除了JavaScript基本知识外，项目中涉及的技术有：函数及数学对象的概念。

1.在前面的项目中多次使用的函数是JavaScript的重要概念。通常，对于要重复使用的一段代码，最好将其编写为一个函数，另外，将实现特定功能的代码段组织为一个函数也是便于编写大的程序。

2.数学对象提供基本的数学运算函数和常数，它封装了大量复杂的数学公式与运算。项目3：科学计算器的设计3.2函数与大多数的程序设计语言相同，JavaScript语言可以通过编写函数的方式组合一些可重复使用的脚本代码块，增加脚本代码的结构化和模块化。我们在前面项目的讲述中已经使用过函数，下面详细给出函数的概念。项目3：科学计算器的设计3.2函数3.2.1函数概述函数是已命名的代码块，代码块中的语句作为一个整体被引用和执行。函数可以使用参数来传递数据，也可以不使用参数。函数可以使用return语句返回确定的值，也可以不返回任何值。使用函数的一个显而易见的好处在于它的可重用性。使用函数的另一个好处在于它能够降低程序的复杂度。通过函数可以把较大的程序分解成几个较小的程序段，从而把一项复杂的大任务分解成多个容易解决的小任务。项目3：科学计算器的设计3.2函数3.2.1函数概述在JavaScript中，函数分为系统预定义的函数和用户自定义的函数两种。在例2-3中使用的函数parseFloat()就属于预定义函数，JavaSscript还提供了许多预定义函数，如parseInt()、eval()…等等。

对这些预定义函数的使用，能够提高编程的效率，避免编写已有的基本函数代码。有关的使用方法，读者可自行参考有关的文献。本节介绍的函数是指用户根据需要自定义的函数。项目3：科学计算器的设计3.2函数3.2.2函数的定义与调用1.函数的定义要使用自已定义的函数，必须先定义函数。定义函数时使用以下格式：function自定义函数名(){函数体}

函数定义以关键字function标识，后面是函数名以及一对圆括号。在圆括号之后是一对大括号，在大括号内就是函数所包含的语句组，称为函数体。项目3：科学计算器的设计3.2函数3.2.2函数的定义与调用1.函数的定义每个函数都必须有一个函数名，函数名的命名规则与变量名一样。但要注意，在同一文件中的两个函数不能同名。在HTML文档中，函数定义通常放在由<head></head>标记对之间，以确保函数先定义后使用。

例2-1中定义了一个函数Test()，这个函数的功能是测试字符串和数字进行的运算。项目3：科学计算器的设计3.2函数3.2.2函数的定义与调用对自定义函数的调用形式是“函数名()”。

函数调用可以以一条语句的形式出现，也可以是出现在表达式中。例2-1中，触发按钮的单击事件后调用了函数Test()：onclick="Test();"函数调用必须使用圆括号()，指明此时对标识符Test的使用是函数调用。项目3：科学计算器的设计3.2函数3.2.2函数的定义与调用JavaSscript按书写顺序执行程序中的代码，当看到关键字“function”时知道有一个函数Test()的定义，但还不执行它，只是记住它的存在。

当执行到语句“Test();”时知道这是一个对函数Test()的调用，于是就执行函数Test()定义中的函数体语句，测试并输出计算结果字符串；语句执行后，遇到了函数体的结束标记“}”，知道Test()函数的这次执行结束了，也就是刚才的函数调用Test()完成了；于是再转去执行其后的语句。项目3：科学计算器的设计3.2函数3.2.3函数的参数为了向函数传递一些必要的信息，可以给函数添加参数。在JavaSscript中定义函数的完整格式是：function自定义函数名（形参1,形参2，…）{函数体}在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（用逗号“,”分隔）指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。

把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时为形参实际传递的值称为实际参数，简称实参。项目3：科学计算器的设计3.2函数3.2.3函数的参数为了向函数传递一些必要的信息，可以给函数添加参数。在JavaSscript中定义函数的完整格式是：function自定义函数名（形参1,形参2，…）{函数体}如果定义的函数有参数，那么对这种函数的调用形式就是函数名（实参1，实参2，…）通常，如果在定义函数时使用了多少个形参，那么在函数调用时也必须给出同样数目的实参，并且在实参之间也必须用逗号“,”分隔。项目3：科学计算器的设计3.2函数3.2.3函数的参数【例3-1】编写一个能改变文本字体大小和颜色的函数。项目3：科学计算器的设计3.2函数3.2.3函数的参数【例3-1】编写一个能改变文本字体大小和颜色的函数。首先编写网页界面代码.<html>

<head>

<title>函数的参数</title>

</head>

<bodyonload="Show('36pt','#ff0000')">

<h2>函数的参数</h2><hr>

<spanid="sh"class="">JavaScript学堂</span>

<inputtype="button"value="改变字体大小和颜色"onclick="Show('18pt','#0000ff')">

</body></html>项目3：科学计算器的设计3.2函数3.2.3函数的参数【例3-1】编写一个能改变文本字体大小和颜色的函数。其中“改变字体大小和颜色”按钮的事件处理器调用函数Show()以实现字体大小和颜色的改变在<head></head>中插入如下JavaScript代码：<scripttype="text/javascript">

functionShow(size,text){

document.getElementById("sh").style.fontSize=size;

document.getElementById("sh").style.color=text;

}</script>项目3：科学计算器的设计3.2函数3.2.3函数的参数【例3-1】编写一个能改变文本字体大小和颜色的函数。注：(1)在函数体内，形参其实就是一个变量（为了区别，可以把它称为形参变量），具体有什么值，这时还不能确定，要依赖于对这个函数调用时传递的实参值。项目3：科学计算器的设计3.2函数3.2.3函数的参数【例3-1】编写一个能改变文本字体大小和颜色的函数。注：(2)函数的第一次调用Show('36pt','#ff0000')有两个实参“36pt”和“#ff0000”，当执行这个函数调用时，其执行流同样要进入函数show()的函数体。

但与没有参数的函数调用不同，JavaSscript在执行其函数体之前会先把实参值“36pt”和“#ff0000”分别传递给形参size和color，这样，在执行函数体时，作为变量的形参size和color就有了确切的值。函数的执行结果是显示红色的字符串“JavaScript学堂”，字体大小为36pt。

项目3：科学计算器的设计3.2函数3.2.3函数的参数【例3-1】编写一个能改变文本字体大小和颜色的函数。注：(3)单击按钮后，程序再次调用函数，执行结果是显示蓝色的字符串“JavaScript学堂”，字体大小为18pt。

本例说明一个函数定义之后可以被多次调用，从而多次发挥作用。

(4)两个实参的先后顺序不能错，如果写成Show('#ff0000','36pt')，那么将会显示出错信息。项目3：科学计算器的设计3.2函数3.2.4函数的返回值对于函数调用，一方面可以通过参数向函数传递数据，另一方面也可以从函数获取数据，也就是说函数可以返回值。

在JavaSscript中，可以使用return语句为函数返回一个值：return表达式；这条语句的作用是结束函数体的执行，并把其后的表达式的值作为函数的返回值。函数返回值可以直接赋予变量或用于表达式中，也就是说函数调用可以出现在表达式中。项目3：科学计算器的设计3.2函数3.2.4函数的返回值如在项目2中多次使用的函数：function$(x){

returndocument.getElementById(x);}这是一个能够返回对象的函数$(x)，其中getElementById()是document对象中的一个方法，返回对拥有指定id的第一个对象的引用，这里return语句从函数返回的就是该对象值。注：(1)对于return语句，也可以不带表达式，即return;这条语句同样是结束当前函数的执行。项目3：科学计算器的设计3.2函数3.2.4函数的返回值注：(2)作为一种好的编程方法，有必要把只返回undefined的函数从返回正常值的函数中区分开来，从而把只返回undefined的函数称为过程。

例如，前面示例中的函数Show()役有明确指定返回值，故实际上应当称为过程。过程和函数的一个显著区别是：过程调用单独构成一条语句，而函数调用出现在表达式中。项目3：科学计算器的设计3.2函数3.2.5函数的嵌套与递归1.函数的嵌套通常，一个完成较大任务的函数会调用其他实现较小任务的函数。在JavaSscript中，允许在一个函数定义的函数体语句中出现对另一个函数的调用，这就是所谓的函数嵌套调用。

如在项目2中的多个例子中，多个函数都又多次嵌套调用了返回对象的函数$(x)。项目3：科学计算器的设计3.2函数3.2.5函数的嵌套与递归2.函数的递归允许函数嵌套调用的一种特殊情况是在一个函数定义的函数体中出现对自身函数的直接（或间接）调用，这样的函数称为递归函数。项目3：科学计算器的设计3.2函数3.2.5函数的嵌套与递归2.函数的递归递归函数的引入来自于对问题的递归解决方法。

比如，对于求阶乘10!，可以采用递归算法。也就是，先计算9！的值，然后通过10*9！可得出结果，而要计算9!，又可以分解为9*8!，依此类推，直至2*1!，而1！等于1。这种思路的结果是可以得出阶乘的递归定义：项目3：科学计算器的设计3.2函数3.2.5函数的嵌套与递归2.函数的递归【例3-2】设计一个递归函数，求阶乘n！的值。首先编写网页界面代码.<html>

</head>

<body>

<h2>计算阶乘</h2><hr>请输入一个非负整数：<br>

<inputtype="text"name="text">

<inputtype="button"value="确定"onclick="calc(text.value)"><p>

<spanid="out"></span>

</body></html>项目3：科学计算器的设计3.2函数3.2.5函数的嵌套与递归2.函数的递归【例3-2】设计一个递归函数，求阶乘n！的值。其中“确定”按钮的事件处理器调用函数calc()，在<head></head>中插入如下JavaScript代码：<scripttype="text/javascript">

functioncalc(n){

n=parseInt(n)||0;

document.getElementById("out").innerHTML=n+"！="+Factorial(n);

}</script>项目3：科学计算器的设计3.2函数3.2.5函数的嵌套与递归2.函数的递归【例3-2】设计一个递归函数，求阶乘n！的值。其中调用了递归计算阶乘的函数Factorial(n)：functionFactorial(n){

varfac;

if(n<=1)fac=1;

elsefac=n*Factorial(n-1);

returnfac;}如果输入的n=10可计算出10！=3628

800，如图3-3所示项目3：科学计算器的设计3.2函数3.2.5函数的嵌套与递归2.函数的递归注：在递归函数中有两个必不可少的要素。

(l)有一个测试是否继续递归调用的条件，如上例中的"if(n<=1)"，如果满足则执行“fac=l;",不再递归。

(2)有一个递归调用的语句，如上例中的“fac=n*Factorial(n-

l);”。

在递归函数中，应该是先测试，后进行递归调用，并且递归调用的参数应该是逐渐逼近递归结束的条件。项目3：科学计算器的设计3.2函数3.2.5变量的作用域根据变量的作用范圈．JavaScript中的变量又可以分为全局变量和局部变量。

全局变量是在所有函数之外的脚本中定义的变量，其作用范围是这个变量定义之后的所有语句，包括其后定义的函数中的程序代码和它后面的其他<script></script>标记对中的程序代码。

局部变量是定义在函数代码之内的变量，只有在该函数中且位于这个变量定义之后的程序代码可以使用这个局都变量。项目3：科学计算器的设计3.2函数3.2.5变量的作用域局部变量对其后的其他函数和脚本代码来说都是不可见的。如果在其后的其他函数和脚本代码中使用了与这个局部变量同名的变量，在那些地方使用的变量与这个局部变量毫无关系。如果函数中定义了与全局变量同名的局部变量，则在该函数中且位于这个变量定义之后的程序代码使用的是局部变量，而不是全局变量，也就是局部变量覆盖了全局变量。项目3：科学计算器的设计3.3数学对象

Math对象即数学对象，是JavaScript核心对象之一，拥有一系列的属性和方法，能够进行比基本算术运算更为复杂的运算。

Math对象所有的属性和方法都是静态的，不能生成对象的实例，但能直接访问它的属性和方法。例如可直接访问Math对象的PI属性和abs(num)方法：varMyPI=Math.PI;varMyAbs=Math.abs(-5);项目3：科学计算器的设计3.3数学对象3.3.1访问基本属性

Math对象拥有很多基本属性，如平方根、自然对数ln2、圆周率、欧拉常数e等表示数学运算中经常使用的常量。Math对象的常见属性如表3-1所示。属性说明Math.E返回欧拉常数e的值Math.LN2返回2的自然对数Math.LN10返回10的自然对数Math.LOG2E返回2为底e的对数Math.LOG10E返回10为底e的对数Math.PI返回圆周率PI的值Math.SQRT1_2返回0.5的平方根Math.SQRT2返回2的平方根项目3：科学计算器的设计3.3数学对象3.3.1访问基本属性【例3-3】Math对象基本属性。项目3：科学计算器的设计3.3数学对象3.3.1访问基本属性【例3-3】Math对象基本属性。

(1)编写网页界面

使用表格来规范各项输出内容的大小和位置

(2)在<head></head>标记中添加网页读入事件处理器onload()函数项目3：科学计算器的设计3.3数学对象3.3.2基本数学运算

Math对象提供丰富的方法用于数学运算，其常见方法参见表3-2所示。方法说明Math.abs(num)返回num的绝对值Math.acos(num)返回num的反余弦Math.asin(num)返回num的反正弦Math.atan(num)返回num的反正切Math.ceil(num)返回大于等于一个数的最小整数Math.cos(num)返回num的余弦值Math.exp(num)返回底为欧拉常数e的num次方Math.floor(num)返回小于等于一个数的最大整数Math.log(num)返回num的自然对数Math.max(num1,num2)返回num1和num2中较大的数Math.min(num1,num2)返回num1和num2中较小的数Math.pow(num1,num2)返回num1的num2次方Math.random()返回0至1间的随机数Math.round(num)返回最接近num的整数（四舍五入）Math.sin(num)返回num的正弦值Math.sqrt(num)返回num的平方根Math.tan(num)返回num的正切值项目3：科学计算器的设计3.3数学对象3.3.2基本数学运算【例3-4】Math对象部分方法的应用。项目3：科学计算器的设计3.3数学对象3.3.2基本数学运算【例3-4】Math对象部分方法的应用。

(1)编写网页界面使用表格来规范各项输出内容的大小和位置

(2)在<head></head>标记中添加单击按钮的事件处理器calc()函数项目3：科学计算器的设计3.3数学对象3.3.2基本数学运算注：(1)Math对象提供了很多的数学方法用于基本运算，这些基本能满足Web应用程序的要求，但需要注意的是，JavaScript脚本中浮点运算精确度不高，常导致计算结果产生微小误差从而导致最终结果的致命错误。

例如：alert(Math.sin(Math.PI));代码运行结果如图3-6所示。可见，JavaScript脚本中Math.sin(Math.PI)返回的结果与理论上的0非常接近，但微小的误差足以导致精确计算的失败。项目3：科学计算器的设计3.3数学对象3.3.2基本数学运算注：(2)由于三角函数的参数使用弧度制，所以三角函数方法使用时如果参数为角度值，应在参数上乘以/180。项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.1科学计算器的界面设计【例3-5】带有科学计算功能的计算器。

项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.1科学计算器的界面设计【例3-5】带有科学计算功能的计算器。和项目2的设计类似，科学计算器的界面设计实现也是通过使用嵌套的表格来控制计算器各按钮的位置。外层表格第一行的前两个列合并放置输入框，第三列使用子表放置清除键和退格键按钮，第二行的第一列使用子表放置数学函数键共12个按钮，第二列使用子表放置数字键、小数点与等号键等12个按钮，第三列使用子表放置四则运算、取整取余、乘方、变号（+/–）等8个按钮，如图所示。文本显示区

函数区

数字区

运算符项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.1科学计算器的界面设计【例3-5】带有科学计算功能的计算器。编写步骤如下：1.主表的设计主表设置表格边框宽度为3，第一行第一个单元格跨越列的数量为2，即第一行将两个单元格合并为一个单元格，其中放置一个单行文本框，名为txtnum，可输入长度为34，默认初始显示内容为0，内容居右显示。除此之外，剩余的4个单元格将分别填入子表，如图所示。文本显示区

函数区

数字区

运算符项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.1科学计算器的界面设计【例3-5】带有科学计算功能的计算器。编写步骤如下：2.子表的设计在主表中嵌套4个子表，其中子表1嵌套在主表的第一行第三列，放置清除键和退格键；子表2嵌套在主表的第二行第一列，放置12个数学函数按钮键；子表3嵌套在主表的第二行第二列，放置数字键、小数点和符号键；子表4嵌套在主表的第二行第三列，放置四则运算、取整取余、乘方、变号键。文本显示区

函数区

数字区

运算符项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.1科学计算器的界面设计【例3-5】带有科学计算功能的计算器。编写步骤如下：2.子表的设计子表1：放置清除键和退格键。子表2：放置12个数学函数按钮键。子表3：放置数字键、小数点和等号键等12个按钮。子表4：放置四则运算、取整取余、乘方、变号键（+/–）等8个按钮。项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.2科学计算器的设计与代码实现

(1)改写处理运算符按钮单击鼠标事件的JavaScript函数：当所点击的运算符按钮为“+”、“-”、“*”、“/”和“=”时，情况同项目2简单计算器。当所点击的运算符按钮为“%”时，文本框中最后显示的值为原文本框的值除去第二次点击的数字按钮的值所剩的余数；当所点击的运算符按钮为“x^y”时，调用数学方法Math.pow()，文本框中最后显示的值为原文本框值x的第二次点击的数字按钮的值y次方，即x^y。其中pow()方法可返回x的y次幂的值。项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.2科学计算器的设计与代码实现

(2)增加处理数学函数运算符按键（一元运算符）单击鼠标事件的JavaScript函数：接受数学函数运算符按键（一元运算符）的函数math(op)首先判断文本框中的内容是否为空。若为空，则弹出一个带有一条指定消息和一个OK按钮的警告框，警告框中内容显示为“请注意输入数据”；若不为空，则使用switch语句来对所点击的不同数学函数按键调用不同的函数做不同的运算。项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.2科学计算器的设计与代码实现

(2)增加处理数学函数运算符按键（一元运算符）单击鼠标事件的JavaScript函数：当所点击的数学函数按键是“Sin”时，调用Math对象中的sin方法，显示原文本框中的值的正弦值；当所点击的数学函数按键是“Cos”时，调用Math对象中的cos方法，显示原文本框中的值的余弦值；当所点击的数学函数按键是“Tan”、“aSin”、“aCos”、“aTan”时，所做运算类似于所点击的数学函数按键是“Sin”的情况，分别显示原文本框中的值的对应的值。项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.2科学计算器的设计与代码实现

(2)增加处理数学函数运算符按键（一元运算符）单击鼠标事件的JavaScript函数：当所点击的数学函数按键是“PI”时，调用Math对象中的PI属性，显示PI；当所点击的数学函数按键是“1/x”时，显示原文本框中的值的倒数；当所点击的数学函数按键是“Exp”时，调用Math对象中的Exp方法，显示e的x次幂的值；当所点击的数学函数按键是“ln”时，调用Math对象中的ln属性，显示x的自然对数的值；项目3：科学计算器的设计3.4带有科学计算功能的计算器3.4.2科学计算器的设计与代码实现

(2)增加处理数学函数运算符按键（一元运算符）单击鼠标事件的JavaScri

人人文库> 全部分类> 行业资料 > 医学制药

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

《JavaScript程序设计教程》项目3：科学计算器的设计

文档简介

温馨提示

最新文档

评论

《JavaScript程序设计教程》项目3：科学计算器的设计

文档简介

温馨提示

最新文档

评论

相关文档