javascrip和客户端计算.pdf资源-CSDN文库

ajax

javascrip

需积分: 3 82 浏览量 2008-04-26 13:58:53 上传评论收藏 707KB PDF 举报

资源推荐

资源详情

资源评论

下载

第27章 JavaScript和客户端计算

27.1 简单的JavaScript程序：Hello World！

通常介绍一门新的语言的流行的例子是“Hello Wo r l d！”程序。这可能是你曾经编写过的

最简单的程序了。它只是在屏幕上简单地显示单词“ Hello Wo r l d ！”。虽然非常简单，但是它

介绍了J a v a S c r i p t的起点。程序清单2 7 - 1说明了一个样本“Hello Wo r l d！”应用程序。

程序清单27-1 JavaScript中的HELLO WORLD!程序

<HTML>

<HEAD>

document.write("Hello World!")

</SCRIPT>

</HEAD>

<BODY>

...

</BODY>

< / H T M L >

正如你所看到的，J a v a S c r i p t应用程序代码嵌入到H T M L文档的H E A D部分。但是你可以将

这段J a v a S c r i p t代码放在文档中的任何位置。注意在 < S C R I P T >和< / S C R I P T >标记之间的一行代

码。这一行就是向屏幕上写输出结果的命令。

提示把是函数的脚本放入H T M L文档的H E A D 部分，并且将调用这些函数的主程序放在B O D Y

部分。把脚本放在该网页的H E A D部分可以防止它们被进一步访问。如果脚本添加到 B O D Y区，

那么网页一显示，它们就立刻会执行。

w r i t e语句被认为是d o c u m e n t对象的一个方法。函数和方法都是脚本代码块，在代码的另一

个地方可能会涉及到。典型的情况是，函数和方法提供了对经常使用的例程的访问。在这种情

况下，写入结果数据是一项公共的函数。下面的部分将详细地回顾对象、方法和属性。此时，

要理解输出“Hello Wo r l d！”通过w r i t e命令写入目前查看的网页(文档)。

27.2 函数是什么

在程序清单2 7 - 1中显示的代码中，w r i t e方法是一个普通的动作。一个函数的目的是通过把

一个普遍的特性作成一个可以被无数次引用的代码块来简化你所编写的代码。这样，函数类似

于前面所讨论的< S C R I P T >标记的S R C 标志。如果没有函数，那么你将不得不在任何希望使用

这段代码块的时候键入它，那么如果这段通用的代码的某一特殊段被修改，那么将来就将会给

维护带来很大麻烦。不是在一个位置更新它，而是将不得不手工找到那段代码出现的地方并进

行更新。

设想你希望编写一个应用程序，它确定在一个在线计算机商店中的待售的笔记本计算机的

数量。如果在一个 J a v a S c r i p t应用程序中需要多次确定它的数量，那么就可以将它放在一个函

第27章 JavaScript和客户端计算 357

下载

数中，并在需要的时候引用。在这个例子中，确定此情况下待售计算机的数量可能需要几行代

码：与数据库相连，检索数据库中的信息，重新格式化该信息，如果没有遇到错误，返回值，

并断开同数据库的连接。作为一个网页开发人员，你也许希望避开这些动作。你尤其不希望每

次希望确定笔记本计算机的数量的时候，在你的源程序中独立包括所有这些动作。如果编制一

个单独的命令，例如G e t N u m b e r O f P C s则更为有效。

一个函数使你可以用一个单独的命令将涉及到的多个动作集合起来。为了再进一步扩展

Hello Wo r l d！应用程序，可以添加一个进行某些数学计算的函数。例如添加一个叫做 F i g u r e Ti p

的函数，计算基于一个初始数目的1 5 ％的小费(见程序清单2 7 - 2 )。

程序清单27-2 确定1 5 %小费的简单函数( F i g u r e Ti p )

<HTML>

<HEAD>

function FigureTip(amount){

var TipAmount

TipAmount=amount*.15

document.write("A 15% tip for $",amount," would be: $",TipAmount)

return TipAmount;

}

</SCRIPT>

</HEAD>

<BODY>

FigureTip(20)

</SCRIPT>

< / B O D Y >

正如你所看到的那样，函数在 J a v a S c r i p t 中通过f u n c t i o n 命令来声明。紧跟着该函数的名字

的是参数的列表，封闭在括号内。“参数”是允许该函数和脚本中调用该函数的其他部分之间

的联系的变量。参数通过为该函数提供信息，经常用于确定一个函数的动作和结果。在程序清

单2 7 - 2中，F i g u r e Ti p是一个接受一个参数( a m o u n t )的函数。然后它使用通过 a m o u n t 参数传递给

该函数的值作为确定小费的等式的一部分。虽然这个例子仅仅显示了一个使用的参数，但是你

可以使用多个参数，它们之间用逗号分开。

在命名了函数并建立了函数需要的参数之后，可以声明该函数的主体，也就是可以多次使

用的代码行。必须用与在 <SCRIPT LANGUAGE>标记中指定的语言相同的语言来编写这些代

码行。

然后你必须标记实现该函数的脚本代码行。你可以通过将脚本中的代码行用中括号 (开始是

“{”，“}”在末尾)将代码行封闭以指定这个代码块。在程序清单2 7 - 2中，Ti p A m o u n t = a m o u n t * . 1 5 ,

document.write (“A 15% tip for $”, amount, “ would be: $”, Ti p A m o u n t )，以及return Ti p A m o u n t

就是由于位于括号中而成为函数主体的命令。

在程序清单2 7 - 2中的函数的代码的第一行，var Ti p A m o u n t声明了一个可以在该函数其他地

方使用的变量。这种类型的行是J a v a S c r i p t显示它的一些C语言根基的地方。你应该声明每个计

划用于J a v a S c r i p t 代码中的变量。在 C和其他的语言中，你不得不将一个变量声明为一个数 (例

如一个整型或浮点型值)、字符串类型或作为另一个对象。在 J a v a S c r i p t 中，只需声明变量；而

不需要声明它是什么类型的变量。

当声明变量的时候，你也可以为它设置一个默认值。在前面的例子中，通过修改要读取的

第一行：var Ti p A m o u n t = 0，当函数首次调用的时候，可以初始化变量 Ti p A m o u n t的值为零。

注意 J a v a S c r i p t语言并不要求你在使用变量之前进行声明。J a v a S c r i p t当你在代码中首次使用它

们的时候就自动进行声明。但是，建议你显式地声明变量 ( 5 3 5页)，因为它有助于使你的代码易

于理解和维护。

该函数的第二行是确定合适的小费的乘法计算，建立在传递给该函数的钱的数量的基础上。

因为平均的小费是1 5 ％，因此该编程函数取出传递给它的钱的数量，并乘以 0 . 1 5。然后将结果

存储在上一行声明的变量Ti p A m o u n t中。

代码的下一行显示了为浏览者读取的等式的结果。取消它，你可以使用 w r i t e 方法来显示使

用J a v a S c r i p t的网页中的文本。D o m e n t . w r i t e表明结果应该打印到目前的网页中。在括号的里面，

注意你希望打印在屏幕上的文本使用引号封闭。还要注意用来存储价格的全部数量的变量，以

及该全部数量的小费位于 w r i t e方法中。如果你希望显示变量的结果，则把该变量插入 w r i t e声

明中，不要加引号。 J a v a S c r i p t 逐字地打印在引号中的文本，并打印没有加引号的变量的值。

例程程序清单2 7 - 2 中的代码行在屏幕上显示下列内容：

A 15% tip for $20 would be: $3

变量和文本在w r i t e 声明中必须分开。程序清单 2 7 - 2的例子中使用了一个逗号将它们分开。

然而，也可以不使用逗号。使用加号 ( + )来代替逗号感觉更舒服，它也可以将这些文本字符串

和变量连接起来。

最后，函数返回一个容纳该函数结果的变量。没有必要一定返回一个结果，这取决于你正

在编写的函数的本质。如果你正在编写的函数要进行数学计算，那么可能希望将结果返回到程

序中对函数的调用之处。例如，如果你编写了一个确定数字平方根的 F i n d S q u a r e R o o t 的函数，

那么你可能希望该函数返回那个结果。这样，主程序的一部分将使用下面的一行代码来写结果：

document.write ("The square root of 4 is : ", FindSquareRoot(4))

由于所编写的函数( F i n d S q u a r e R o o t )返回一个结果，因此你可以立即在 w r i t e声明中使用该

结果。也可以把F i n d S q u a r e R o o t 的结果指定给一个变量，然后输出该变量，但是前面的例子减

掉了这段代码。

27.3 对象家族树

当然，J a v a S c r i p t不只是允许你在网页中使用函数。 J a v a S c r i p t提供的关键选项是通过浏览

器中固有的特殊对象来访问We b 浏览器中的信息。这些对象允许脚本监视网页和浏览器的信息，

或者改变这些特性。

在We b浏览器中的Document Object Model(DOM)中没有对象是独立的。每个对象都以这样

或那样的方式和另一个对象相关，可以通过像 J a v a S c r i p t这样的脚本语言来引用。这种关系可

根据到该浏览器窗口的由上而下的途径来决定。你在该窗口中查看到的每个事物都是该窗口的

一部分。所以，窗口对象在 We b浏览器对象的层次中是最高的对象。图 2 7 - 1 图解说明了这些对

象是彼此如何相关的。

在窗口对象正下方的对象是文档、位置、历史和附加的窗口对象。如果你考虑一个典型的

网页，那么你将意识到这些都是用来描述整个窗口的。浏览器窗口是有关于 U R L 的信息或者是

358 第五部分脚本编程、动态HTML和动态内容

下载

你正在查看的网页的位置、浏览器向前或向后浏览网页时所追踪的历史信息，是有实际网页数

据的文档，以及诸如框架之类的附加窗口。

图27-1 JavaScript语言可以访问We b浏览器陈列的对象的层次

你在该浏览器中所看到的网页是该层次中典型的最复杂的对象，因为它是将所有信息提交

给查看者，以及通过窗口检索数据的地方。因此找到同文档对象直接相关的无数对象并不令人

惊奇。图2 7 - 1 显示了有三个描述一个文档的信息基本类型：链接和锚，小程序和插件，以及表

单。表单本身由许多对象组成。表单可以包含任何数量的按钮、单选钮、复选框，或者文本输

入域。所有这些对象都位于该层次中的表单对象的下面。

注意随着D H T M L的进步，We b 浏览器的对象模型也极大地扩展了。在D H T M L目前的版本中，

目前在网页中寻址该网页中所有的对象成为可能，而不仅仅是特殊的对象。 D H T M L 为使用

JavaScript在Web浏览器中编程提供了更为强大的Document Object Model(DOM)。然而，记住不同

浏览器中的DOM可能并不完全相同。

27.3.1 为对象命名

现在你了解了在J a v a S c r i p t 语言中无数的家族成员之间的联系，重要的是要理解如何单独

引用每个对象。如果你是有设计网页表单的经验，那么可能熟悉命名表单控件的概念。命名对

于把信息从表单传递给服务器中的C G I脚本是必要的。在J a v a S c r i p t和其他面向对象的语言中这

种命名的概念更为重要。

在J a v a S c r i p t 中的每个对象都必须给出一个名字，目的是可以在该语言中进行识别。在

J a v a S c r i p t中不能创建的对象有它们自己唯一的默认名字。例如，你不能动态地通过 J a v a S c r i p t

来创建新的文档或者位置信息对象，因此这些对象都使用自己默认的名字：分别是 d o c u m e n t和

l o c a t i o n。你可以更新一些这些对象，或者从其中读取信息，但是你不能创建这些对象的新的

例子，或者是额外的副本。

你必须正确地命名你所创建的对象。要给一个对象命名，在创建对象的时候，可使用

N A M E 属性。例如，如果你正在为在表单中输入名字创建一个新的文本域，应该使用下面的

句法：

27.3.2 引用对象

在所有的自定义对象都已经正确命名之后，可以引用该浏览器窗口的任何对象。你可以在

自己的J a v a S c r i p t应用程序中使用最高阶层的对象。然而，如果你希望引用任何窗口对象下面

第27章 JavaScript和客户端计算 359

下载

360 第五部分脚本编程、动态HTML和动态内容

下载

的对象，那么需要清楚地声明该层次路径。简单地说，这种声明意味着你必须在根对象 (窗口)

和希望引用的对象之间的代码中包括所有的对象。幸运的是，不需要在每次引用一个对象的时

候都包括根对象(窗口)，因为所有的内容都必须从这个起始点开始。另外，使用“ .”字符来隔

离你在J a v a S c r i p t应用程序中指定的层次路径的元素。

例如，要检查在网页文档中的一个表单中的叫做 y o u r n a m e 的输入域的一个属性，使用下列

语法来标识该域：

document.myform.yourname

或

document.forms[0].yourname

第一个例子显示了如果你已经为网页中的表单指定了一个名字的话，如何横贯它的路径。第

二个例子描述了如何使用表单默认对象来引用网页中的表单。注意 [ 0 ] 这个语法。该语法指示

J a v a S c r i p t表示希望读取该网页的第一个表单。一个网页中额外的表单用[ 1 ]、[ 2 ]、[ 3 ]等等来标识。

27.3.3 对象组

正如你所看到的那样，前面的例子说明了如何引用表单中的项目， J a v a S c r i p t可以区分在

网页中的多个表单，即使它们没有全部正确命名，因为每个对象都存储在一个数组中。一个数

组是一系列相似的对象，按照逻辑组织起来，由一个数字或索引来进行唯一的标识。在

J a v a S c r i p t中的索引范围从0到该网页中对象的数目少一。这个规则是从J a v a S c r i p t的祖先C语言，

那里继承来的。

你可以将数组看成是街道上的一排房屋。每个房屋可能是不同的，但是它们都是房屋。另

外，每个房屋都有与之相关的一个街道号码。如果你希望引用一个特定的房屋，那么你将使用

那个房屋的街道号码。数组也是同样的道理。在表单的例子中，网页中的每个表单可能是不同

的(不同的输入域和按钮)，但是它们仍然都是表单。每一个都可以通过一个唯的表单数字来引

用。表单并非唯一可以作为数组来考虑的对象。你也可以使用数组来标识一系列网页中的框架、

超链接和锚点。

27.3.4 对象属性

现在你可以唯一地标识网页中的对象了，可以对它做哪些设置呢？取决于该对象，你可以

设置和读取它的属性。在 J a v a S c r i p t中的每个对象都有属性。一些属性是一个特定的对象所独

有的，而其他的属性是所有的或多对象所共享的。

你可以通过使一个对象的一个属性等于你所希望的值来改变它的属性。例如，设想你希望

改变输入到网页中表单的y o u r n a m e域的值。在这种情况下，将改变 y o u r n a m e对象的v a l u e属性。

你应该使用下列的语法：

document.forms[0].yourname.value="John Doe"

类似地，你可以读取属性值，在 J a v a S c r i p t 应用程序的其他地方来使用。例如，你可以从

y o u r n a m e域中读取值来打印一个欢迎消息：

Document.writeln("Hello " + document.forms[0].yourname.value + ", good to see you again!")

27.3.5 对象方法

属性改变一个对象的特征，方法则涉及一个特定对象的唯一的特殊动作。要在 J a v a S c r i p t

剩余23页未读，继续阅读

评论收藏

内容反馈

lishuiqing

粉丝: 13
资源: 23

javascrip和客户端计算.pdf

JavaScript获取客户端计算机硬件及系统信息2009[借鉴].pdf

JavaScript 权威指南（第四版）.pdf

asp.net core 3.1中文教程.pdf

[完整][中文][WEB安全测试].(美)霍普.扫描版.pdf

pdfmake:纯 JavaScript 客户端/服务器端 PDF 打印-开源

netcore.pdf

JavaScript权威指南(第6版)中文版pdf+源代码

程序天下:JavaScript实例自学手册

PHP和MySQL Web开发第4版pdf以及源码

JSPrintManager:先进的Java客户端打印和扫描解决方案

ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

java开源包101

java开源包10

Java第十五届蓝桥杯大赛软件JavaB组真题

SwitchHosts

安卓期末大作业（AndroidStudio开发），垃圾分类助手app，分为前台后台，代码有注释，均能正常运行

Notepad++安装包

2024北森能力测评题库.7z

微信小程序源码-合集1.rar

Java面试八股文2023最新版

Linux Centos7 升级最新版OpenSSH-9.6p1 有脚本（支持离线）

JDK1.8 windows 64位

ruoyi-vue-pro 芋道源码项目的表结构

ruoyi-vue-pro开发指南PDF下载

myeclipse 10.7.1 windows 安装包

最新资源

ASP.NET4高级程序设计第4版带目录PDF 分卷压缩包 part1