计算机毕业设计-用JavaScript实现Web页交互性

时间：2023-10-12 04:30:01 | 来源：网站运营

时间：2023-10-12 04:30:01 来源：网站运营

计算机毕业设计-用JavaScript实现Web页交互性：1、研究的意义，同类研究工作国内外现状、存在问题（重点论文网原创论文）

JavaScript更好的实现了网页的交互性，同时扩展了HTML语言的一些功能，使得信息与用户之间不仅只是一种显示和浏览的关系，而是一种实时的、动态的、可交互的表达方式。不断深入的探讨和掌握JavaScript脚本语言将给网络编程人员和网页浏览者带来更大的方便。

本文主要参考文献为：

[1] B：李开荣、Web设计技术[M]、高等教育出版社、2004：34-37.

[2] B：邵丽萍等、网页编程技术[M]、清华大学出版社、2002：102-109.

[3] B：E书免费电子图书、网络编程基础篇之——JavaScript[M]、2001：1-7.




2、研究目标、内容和拟解决的关键问题（根据任务要求进一步具体化）

通过对JavaScript脚本语言内部对象的深入研究，进一步了解JavaScript的特性，利用编写简单的JavaScript脚本语言实现网页的交互。关键是对内部对象属性和方法的深入了解。内容如下：

1. 简单介绍JavaScript

2. 详细叙述JavaScript对象和对象的引用

3. 详细叙述利用内部对象实现网页交互

4. 完成JavaScript与网页的结合设计和应用

3、特色与创新之处

本文计划运用JavaScript脚本语言，通过实际设计，在自己的主题网站中具体实现如网页加密、菜单弹出、图片转换、多媒体播放、问答测试及当前时间显示等与窗口、表格、按钮、图像及其它对像的交互功能，让网页变得更加的生动、有趣，最终更好的实现网站网页与浏览者的交互。

4、拟采取的研究方法、步骤、技术路线

通过对JavaScript语言和对象的研究，更深入的掌握JavaScript的编程方法，接着更好的利用其实现网页的交互。

5、使用的主要仪器设备、试剂和药品

软件环境： Windows 95/98或Windows NT以上版本的Windows操作系统配置。Netscape Navigator x.0或Internet Explorer 3.0以上版本的浏览器。用于编辑HTML文档的类似Dream weaver MX的网页开发工具软件。

硬件配置：首先必须具备运行Windows 95/98或Windows NT的基本硬件配置环境

基本内存32M以上

CRT至少可以显示256色，分辨率在640X480以上

CPU只少II233以上级别

鼠标和其它外部设置（根据需要选用）

6、参考文献

[1] B：将民、JavaScript实例、技巧与应用[M]、清华大学出版社.、2003：16-18.

[2] B：李开荣、Web设计技术[M]、高等教育出版社、2004：34-37.

[3] B：E书免费电子图书、网络编程基础篇之——JavaScript[M]、2001：1-7.

[4] A：何克石、基于JavaScript的动态网页设计[J] 、现代计算机、2000，3:：34-36.

[5] A： 钟蕴玉、 用JavaScript实现Web页交互性[J] 、杭州师范大学自然科学学报、2002，3： 42-46.

[6] B：胡仁喜等、最新网页制作实例教程——FrontPage 2003[M]、机械工业出版社、2005：1-309.

[7] B：邵丽萍等、网页编程技术[M]、清华大学出版社、2002：102-109.

目 录

摘 要（中文） 1

摘 要（英文） 2

前 言 3

1 JAVASCRIPT概述 4

1.1　JAVASCRIPT 简介 4

1.2 JAVASCRIPT的特征 4

1.2.1 简单性的语言 4

1.2.2 基于对象的语言 4

1.2.3 动态的语言 4

1.2.4 具有较强的安全性的语言 4

1.2.5 多平台的语言 4

1.3 JAVASCRIPT的局限性 4

1.3.1 浏览器相关的局限性 4

1.3.2 安全性有关的局限性 5

1.4 JAVASCRIPT和JAVA的区别 5

1.4.1 基于对象和面向对象 5

1.4.2 解释和编译 5

1.4.3 强变量和弱变量 5

1.4.4代码格式不一样 5

1.4.5 嵌入方式不一样 6

1.4.6 静态联编和动态联编 6

1.5 JAVASCRIPT程序运行环境 6

1.5.1 软件环境 6

1.5.2 硬件配置 6

1.6 JAVASCRIPT程序在HTML中嵌入的两种语法[4] 6

2 JAVASCRIPT对象和对象的引用 7

2.1 对象的基本结构 7

2.2 引用对象的途径 7

2.3 有关对象操作语句 7

2.4 对象属性的引用 7

2.4.1 使用点（.）运算符 7

2.4.2 通过对象的下标实现引用 7

2.5 对象的方法的引用 8

3 利用内部对象实现网页交互 9

3.1 JAVASCRIPT窗口的输入输出 9

3.1.1 窗口对象 9

3.1.2 窗口对象的事件驱动 9

3.1.3 窗口对象的方法 9

3.1.4 窗口对象中的属性 10

3.1.5 输出流及文档对象 10

3.1.6 范例 11

3.2 用窗体对象（FORM）实现交互 11

3.2.1 窗体基础知识 11

3.2.2 窗体中的基本元素 12

3.2.3 范例 15

3.3 实现框架的交互 16

3.3.1 什么是框架 16

3.3.2 如何访问框架 16

3.3.3 范例 17

4 JAVASCRIPT与网页的结合设计和应用 18

4.1 在网页中自动显示更新时间 18

4.2 点击弹出菜单 18

4.3 使用行为的交互 19

4.3.1 播放歌曲 19

4.3.2 图片交换 19

4.4 在标题栏显示当前时间 20

4.5 为网页设置密码 21

4.6 实现问答测试 21

4.7 小游戏 23

4.7.1 测试反应能力 23

4.7.2 动脑亮灯 24

4.7.3 数学计算 25

_Toc121598184.7.4 方框游戏 26

参考文献 29

致 谢 30

附 录 31

附录1 输入输出实例 31

附录2 在网页停留的时间 31

附录3 改变背景颜色 32

附录4 框架交互 32

附录5 点击弹出菜单 35

附录6 在标题栏显示当前时间 35

附录7 问答测试 35

附录8 数学计算 37

附录9 方框游戏 39

附录10 动脑亮灯 48

附录11 测试反映 52




前言

随着Internet国际互联网在我国的普及，越来越多的社会团体、企事业单位，在互联网上建立自己的网络，甚至个人也设立了自己的网站。企业及个人需要通过网站上的web网页展示自身产品，发布最新动态，与用户进行交流和沟通，与合作伙伴建立联系，以及开展电子商务等。要实现这些需求及功能就要求网页与用户之间具备一定的交互能力。

早期的web网页主要用来传送静态的用HTML语言编制的文档,它基本采用超链接技术。通过超文本和超媒体技术结合超链接的链接功能将各种信息组织成网络结构(web)，构成网络文档(Document)，实现Internet上的“漫游”。

然而，网站和电视是不一样的，电视只是将特定的信息传达给观众。每个看电视的人所接受到的信息都相同，不会因人而异，而网页则需要和读者之间互动，因读者不同的选择而产生不同的结果，让读者更好的得到想要的信息。而采用这种超链接技术存在一定的缺陷，用HTML超文本标识语言编写的网页, 信息与读者之间缺少一种比较直观的交互式方法, 它提供的信息基本是静态的信息,缺少一种实时、动态的表达和处理能力。

虽然，之前的静态网页可通过CGI(Common Gateway Interface)通用网关接口来实现一定的交互，但通过该方法，相关的运算及处理都必须在服务端上执行，再将执行完的结果传回给使用者端。如此一来，若同时有很多人在服务器端上执行CGI接口程序，整个服务器的运算速度就会降低，并且当有很多计算机同时访问服务器，服务器的负荷过重时，该机器就有死机的高危险性存在。一旦服务器死机，网页就无法正常浏览。同时由于该方法编程较为复杂，因而在一段时间内妨碍了Internet技术的发展。

JavaScript脚本语言是一种基于对象和事件驱动并具有安全性能的脚本语言。它的程序可以直接被浏览器读取，然后通过浏览器中的直译器执行运算。使用它不必通过服务器即可以与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户实现交互作用。从而可以用简单的脚本语言开发客户端的应用程序。JavaScript的出现弥补了HTML语言的缺陷，使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。

在此之前，我查阅了许多有关网页编程技术及JavaScript语言的资料。在这些相关资料中我发现，许多的书籍及论文都只是单方面的介绍了JavaScript的基础知识，举单独的实例，并没有真正具体的实现与网站网页的结合设计。然而JavaScript是为了更好的实现网页交互而产生的脚本语言，没有和网站网页的实际结合，一切犹如纸上谈兵。

本论文将尽量从JavaScript的语言基础到与网页结合的设计应用，精而简的介绍JavaScript常用的内部对象，运用具体生动的实例详细讲述如何应用JavaScript实现网页的交互。并通过实际设计，在自己的主题网站中具体实现如网页加密、菜单弹出、图片转换、多媒体播放、问答测试及当前时间显示等与窗口、表格、按钮、图像及其它对像的交互功能，让网页变得更加的生动、有趣，最终更好的实现网页与浏览者的交互。







1 JavaScript概述




1.1　JavaScript 简介

JavaScript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用JavaScript可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器。微软公司还有自己开发的JavaScript，称为JScript。JavaScript和Jscript基本上是相同的，只是在一些细节上有出入。JavaScript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单编程语言。[1]




1.2 JavaScript的特征

JavaScript 主要具有以下特征：

1.2.1 简单性的语言

JavaScript是一种脚本语言, 它是采用小文档的方式实现编程的。 其基本的结构形式与C+ + 、C、VB、Delphi 十分类似, 但它不像这些语言需要先编译, 而是在文档运行过程中被逐行地解释。它与HTML 结合在一起，方便了用户的使用操作。JavaScript 的简单性还体现在：首先它是一种基于Java 基本语句和控制流之上的简单而紧凑的设计语言, 从而对于学习Java是一种非常好的过渡；其次它的变量类型采用的是弱类型，并未使用严格的数据类型。

1.2.2 基于对象的语言

JavaScript 是一种基于对象的语言, 同时也可以看作是一种面向对象的语言。它能用自己创建的对象, 因此, 许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

1.2.3 动态的语言

JavaScript 是动态的, 它可以直接对用户或客户输入做出响应, 无需经过WEB服务文档。 它对用户的响应是采用以事件驱动的方式进行的。 所谓事件驱动, 就是指主页(Homepage)中执行了某种操作所产生的动作。（这种动作也称为“事件”, 如按下鼠标、移动窗口、选择菜单等）, 会引起相应的事件响应。

1.2.4 具有较强的安全性的语言

JavaScript是一种安全性很强的语言, 它不允许客户访问本地硬盘, 且不能将数据存入服务器上, 不允许对网络文档干地修改和删除, 只能通过浏览器实现信息浏览或动态交互, 从而有效地防止“病毒”的入侵。

1.2.5 多平台的语言

实际上JavaScript依赖于浏览器本身与操作环境无关, 只要能运行支持JavaScript的浏览器计算机都可正确运行。




1.3 JavaScript的局限性[2]

JavaScript为Web内容设计人员提供了极大的灵活性和控制手段。它能够将一个Web节点中的不同组成部分捆绑在一起，成为一个紧密结合的信息源。然而，像任何事物一样，JavaScript也有它的局限性。

1.3.1 浏览器相关的局限性

目前WWW上有很多浏览器，到现在为止，只有Netscape Navigator2.0、 Netscape Navigator3.0 Netscape Gold2.0 完全支持JavaScript，IE3.0只是部分支持，不过IE4.0、IE5.0已可以完全支持JavaScript的信息，其他浏览器皆不支持。支持与不支持JavaScript的浏览器在显示一个带有JavaScript脚本的主页时，结果全然不同。

1.3.2 安全性有关的局限性

JavaScript的设计目标在于“Web安全性”，它比以前任何一种方法都更能保证Web的安全，这自然是牺牲JavaScript的一些功能换来的。

JavaScript不能打开、读、写、保存用户在计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。

JavaScript不能打开、读、写、保存Web服务器上的文件。尽管可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。

JavaScript不能用来编写破坏计算机上任何资源的“病毒”。它产生在糟糕的事情也不过是一个设计不好的主页可能会显示一些错误信息（可能需要关闭浏览器），仅此而已。简而言之，JavaScript只生存于它小小的世界——Web主页里。




1.4 JavaScript和Java的区别[3]

虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；而Java的前身是Oak语言。下面对两种语言间的异同作如下比较：

1.4.1 基于对象和面向对象

Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。

JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

1.4.2 解释和编译

两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。

JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。

1.4.3 强变量和弱变量

两种语言所采取的变量是不一样的。

Java采用强类型变量检查，即所有变量在编译之前必须做声明。如:

Integer x;

String y;

x=1234;

x=4321;

其中X=1234说明是一个整数，Y=4321说明是一个字符串。

JavaScript中变量声明，采用其弱类型。即变量在使用前不需做声明，而是解释器在运行时检查其数据类型，如：

x=1234;

y＝"4321";

前者说明x为其数值型变量，而后者说明y为字符型变量。

1.4.4代码格式不一样

Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。

JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

1.4.5 嵌入方式不一样

在HTML文档中，两种编程语言的标识不同，JavaScript使用<Script>...</Script>来标识，而Java使用<applet>...</applet>来标识。

1.4.6 静态联编和动态联编

Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。

JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查，如不经编译就无法实现对象引用的检查。




1.5 JavaScript程序运行环境　　

1.5.1 软件环境

Windows 95/98或Windows NT以上版本的Windows操作系统配置。

Netscape Navigator x.0或Internet Explorer 3.0以上版本的浏览器。用于编辑HTML文档的字符编辑器(WS、WPS、Notepad、WordPad等)或HTML文档编辑器、或者类似Dreamweaver MX的网页开发工具软件。

1.5.2 硬件配置

首先必须具备运行Windows 95/98或Windows NT的基本硬件配置环境。推荐：

基本内存32M、CRT至少可以显示256色，分辨率在640X480以上CPU只少II233以上级别

鼠标和其它外部设置（根据需要选用）




1.6 JavaScript程序在HTML中嵌入的两种语法[4]

HTML规格说明本身并不直接支持条件选择执行， 因此用户若要纯粹用HTML文档在网页上完成一些交互工作，诸如请求有关用户平台的信息(Mac，UNIX或Windows)，然后在页面上仅显示选择的平台信息、根据用户操作播放音频消息、进行大量数学计算并在屏幕上显示结果等，就显得有些力不从心了。而在HTML文档中嵌入JavaScript程序后，完成这些工作就非常容易了。JavaScript程序在HTML中的嵌入有两种语法格式：

(1) 基本语法

<Script Language="JavaScript">

JavaScript程序

<／Script>

(2) JavaScript的注释语法

<Script Language="JavaScript">

< !--Hide the script from other browsers

JavaScript

／／Stop hiding from other browsers-->

<／Script>

JavaScript脚本与程序可以放人HTML文件头部或文件体中的任何地方。在Netscape的Web站点中的许多例子以及其他地方，习惯上在HTML件的头部包括Script容器，这也是较好的格式。基于以上嵌入语法，我们可将JavaScript脚本程序嵌入HTML文档中以实现动态网页的设计。




2 JavaScript对象和对象的引用

JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的语言，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增加编写Web文件的功能。[3]




2.1 对象的基本结构

JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相关联。




2.2 引用对象的途径

一个对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象、由浏览器环境中提供、创建新对象。

这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。




2.3 有关对象操作语句

JavaScript不是纯面向对象的语言，它设有提供面向对象语言的许多功能，因此JavaScript设计者之所以把它称为“基于对象”而不是面向对象的语言，是因为在JavaScript中提供了几个用于操作对象的语句、关键词及运算符。

2.4 对象属性的引用

对象属性的引用可由下列三种方式之一实现：

2.4.1 使用点（.）运算符

university.Name=“浙江省”

university.city=“杭州市”

university.Date="1999"

其中university是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。

2.4.2 通过对象的下标实现引用

university[0]=“浙江”

university[1]=“杭州市”

university[2]="1999"

通过数组形式的访问属性，可以使用循环操作获取其值。

function showunievsity(object)

for (var j=0;j<2; j++)

document.write(object[j])

若采用For...in则可以不知其属性的个数后就可以实现：

Function showmy(object)

for (var prop in this)

docament.write(this[prop]);

2.4.3 通过字符串的形式实现

university["Name"]=“浙江”

university["City"]=“杭州市”

university["Date"]="1999"




　 2.5 对象的方法的引用 [5]

在JavaScript中对象方法的引用是非常简单的。

ObjectName.methods()

实际上methods()=FunctionName方法实质上是一个函数。 如引用university对象中的showmy（）方法，则可使用：

document.write (university.showmy()) 或：document.write(university)

如引用math内部对象中cos()的方法 则：

with(math)

document.write(cos(35));

document.write(cos(80));

若不使用with则引用时相对要复杂些：

document.write(Math.cos(35))

document.write(math.sin(80))







3 利用内部对象实现网页交互

JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本即可实现网页的交互。[3]




3.1 JavaScript窗口的输入输出

在JavaScript中可以非常方便地实现输入输出信息，并与用户进行交互。JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。请看下面例子：在弹出的对话框中输入你要输出在网页中的话，按确定即可在网页中实现输出。

图1 窗口输入

图2 窗口输出

例子中使用的window.prompt()就是一个窗口对象的方法，其基本作用是，当装入Web页面时在屏幕上显示一个具有“确定”和“取消”的对话框，让你输入数据。document.writle是一个文档对象的方法，它的基本功能，是实现Web页面的输出显示。

3.1.1 窗口对象

该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。在使用应注意以下几点：

(1）该对象对应于HTML文档中的<Body>和<FrameSet>两种标识；

(2）onload和onunload都是窗口对象属性；

(3）在JavaScript脚本中可直接引用窗口对象。如：window.alert（"窗口对象输入方法"）可直接使用以下格式：alert（"窗口对象输入方法"）

3.1.2 窗口对象的事件驱动

窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。

3.1.3 窗口对象的方法

窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。

(1）创建一个新窗口open()：使用window.open（参数表）方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名。

(2）具有OK按钮的对话框 ：alert()方法能创建一个具有OK按钮的对话框。

(3）具有OK和Cancel按钮的对话框：confirm()方法为编程人员提供一个具有双按钮的对话框。

(4）具有输入信息的对话框：prompt()方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下prompt（“提示信息”，默认值）。

3.1.4 窗口对象中的属性

窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用，其主要属性有以下几个：frames 确定文档中帧的数目frames（帧）作为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几点：

(1）帧本身已是一类窗口，继承了窗口对象所有的属性和方法。

(2）Parent：指明当前窗口或帧的父窗口。

(3）defaultstatus：默认状态，它的值显示在窗口的状态栏中。

(4）status：包含文档窗口中帧中的当前信息。

(5）top：包括的是用以实现所有的下级窗口的窗口。

(6）window：指的是当前窗口

(7）self：引用当前窗口。

(8）frames：属性是通过HTML标识<Frames>的顺序来引用的，它包含了一个窗口中的全部帧数。

3.1.5 输出流及文档对象

在JavaScript文档对象中，提供了用于显示关闭、消除、打开HTML页面的输出流。

(1）创建新文档open() 方法 使用document.open()创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象是所加载的父对象，因而我们在调用它的属性或方法时,不需要加入Window对象。例用Window. Open() 与Open() 是一样的。

打开一个窗口的基本格式：Window .open("URL","窗口名字","窗口属性")，window属性参数是由字符串组成，由逗号分隔，它指明了有关新创建窗口的属性。

表1 window属性参数

参 数 设定值 含 义

toolbar yes/no 建立或不建立标准工具条

location yes/no 建立或不建立位置输入字段

directions yes/no 建立或不建立标准目录按钮

status yes/no 建立或不建立状态条

menubar yes/no 建立或不建立菜单条

scrollbar yes/no 建立或不建立滚动条

revisable yes/no 能否改变窗口大小

width yes/no 确定窗口的宽度

Height yes/no 确定窗口的高度。

在使用Open() 方法时，需要注意以下点。

1）通常浏览器窗口中，总有一个文档是打开的，因而不需要为输出建立一个新文档。

2）在完成对Web文档的写操作后，要使用或调用close() 方法来实现对输出流的关闭。

3）在使用open() 来打开一个新流时，可为文档指定一个有效的文档类型，有效文档类型包括text/HTML、text/gif、text/xim、text/plugin等。

(2）write()、writeln()输出显示 该方法主要用来实现在Web页面上显示输出信息。在实际使用中，需注意以下几点：

1）writeln()与write()唯一不同之处在于在末尾加了一个换行符。

2）为了正常显示其输出信息，必须指明<pre> </Pre>标记，使之告诉编辑器。

3）输出的文档类型，可以由浏览器中的有效的合法文本类型所确定。

(3) 关闭文档流close() 在实现多个文档对象中，必须使用close()来关闭一个对象后，才能打开另一个文档对象。

(4）清除文档内容clear() 使用该方法可清除已经打开文档的内容。

3.1.6 范例

下列程序演示了你进入主页所停留的时间：该例子中通过时间对象来调用系统时间进行计时并输出。结果如下图3：

图3 计算停留时间




3.2 用窗体对象（Form）实现交互

3.2.1 窗体基础知识

窗体对象使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。[3]

(1）什么是窗体对象 窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。

<form Name=Form1>

<input type=text...>

<input type=text...>

<inpup byne=text...>

</form>

<form Name=Form2>

<input type=text...>

<input type=text...>

</form>

在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

<Form>

Name ="表的名称"

Target ="指定信息的提交窗口"

action ="接收窗体程序对应的URL"

Method =信息数据传送方式(get/post)

ecotype ="窗体编码方式"

[onsubmit ="JavaScript代码"]>

</Form>

(2）窗体对象的方法 窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：document.mytest.submit()

(3）窗体对象的属性 窗体对象中的属性主要包括以下：Elements name action target encoding method.

除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：elements[0].Mytable.elements[1]

(4）访问窗体对象 在JavaScript中访问窗体对象可由两种方法实现：

1）通过访问窗体

在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如： document.Mytable()。

2）通过数组来访问窗体

除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境提供的，而浏览器环境所提供的数组下标是由0到n。所以，可通过下列格式实现窗体对象的访问：

document.forms[0]

document.forms[1]

document.forms[2]...

(5）引用窗体的先决条件 在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

3.2.2 窗体中的基本元素

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：

formName.elements[].methadName (窗体名.元素名或数组.方法)

formName.elemaent[].propertyName(窗体名.元素名或数组.属性)

下面分别介绍：

(1）Text单行单列输入元素

功能：对Text标识中的元素实施有效的控制。

1）基本属性

name：设定提交信息时的信息名称，对应于HTML文档中的Name。

value：用以设定出现在窗口中对应HTML文档中Value的信息。

defaultvalue：包括Text元素的默认值

2）基本方法

blur()：将当前焦点移到后台。

select()：加亮文字。

3）主要事件

onFocus：当Text获得焦点时，产生该事件。

OnBlur：从元素失去焦点时，产生该事件。

onselect：当文字被加亮显示后，产生该文件。

onchange：当Text元素值改变时，产生该文件。

例：…

<Form name="test">

input type="text" name="test" value="this is a JavaScript" >

</form>

…

<script language ="JavaScript">

document.mytest.value="that is a JavaScript";

document.mytest.select();

document.mytest.blur();

</script>

（2）textarea多行多列输入元素

功能：实施对Textarea中的元素进行控制。

1）基本属性

name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。

Value：用以设定出现在窗口中对应HTML文档中Value的信息。

Default value：元素的默认值。

2）方法

blur()：将输入焦点失去

select()：将文字加亮后

3）事件

onBlur：当失去输入焦点后产生该事件

onFocus：当输入获得焦点后，产生该文件

onchange：当文字值改变时，产生该事件

onselect：当文字加亮后，产生该文件

(3）Select选择元素

功能：实施对滚动选择元素的控制。

1）属性

name：设定提交信息时的信息名称，对应文档select中的name。

length：对应文档select中的length

options：组成多个选项的数组

selectIndex：该下标指明一个选项

select：在中每一选项都含有以下属性：

Text：选项对应的文字

selected：指明当前选项是否被选中

Index：指明当前选项的位置

defaultselected：默认选项　

2）事件

onBlur：当select选项失去焦点时，产生该文件。

onFocas：当select获得焦点时，产生该文件。

onchange：选项状态改变后，产生该事件。

(4）Button按钮

功能：实施对Button按钮的控制。

1）属性

name：设定提交信息时的信息名称，对应文档中button的Name。

value：用以设定出现在窗口中对应HTML文档中Value的信息。

2）方法

click()该方法类似于一个按下的按钮。

3）事件

onclick当单击button按钮时，产生该事件。例 ：

<Form name="test">

<input type="button" name="testcall" onclick=tmyest()>

</form>

…

<script language="javascirpt">

document.elements[0].value="mytest"; //通过元素访问

或

document.testcallvalue="mytest"; // 通过名字访问

</script>

…

(5）checkbox检查框

功能：实施对一个具有复选框中元素的控制。

1）属性

name：设定提交信息时的信息名称。

value：用以设定出现在窗口中对应HTML文档中Value的信息。

checked：该属性指明框的状态true/false.

defauitchecked：默认状态

2）方法

click()该方法使得框的某一个项被选中。

3）事件

onclick:当框的选被选中时，产生该事件。 　

(6） radio无线按钮 功能：实施对一个具单选功能的无线按钮控制。

1）属性

nam：设定提交信息时的信息名称，对应HTML文档中的radio的name相同

value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。

length：单选按钮中的按钮数目。

defalechecked：默认按钮。

checked：指明选中还是没有选中。

index：选中的按钮的位置。

2）方法

chick():选定一个按钮。

3）事件

onclick:单击按钮时，产生该事件。

(7) hidden:隐藏

功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。

1）属性

name：设定提交信息时的信息名称，对应HTML文档的hidden中的Name。

value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。defaleitvalue：默认值

(8）Password口令

功能：实施对具有口令输入的元素的控制。

1）属性

name：设定提交信息时的信息名称，对应HTML文档中password中的name。

value：用以设定出现在窗口中对应HTML文档中value的信息，对应HTML文档中password中的value。

defaultvalu：默认值

2）方法

select():加亮输入口令域。

blur()：使之丢失password输入焦点。

focus()：获得password输入焦点。

(9）submit提交元素

功能：实施对一个具有提交功能按钮的控制。

1）属性

name:设定提交信息时的信息名称，对应HTML文档中submit。

value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。

2）方法

click()相当于按下submit按钮。

3）事件

onclick()当按下该按钮时，产生该事件。

3.2.3 范例

这个例子我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。效果如图4图5所示：

图4 原始背景

图5 改变后背景

3.3 实现框架的交互

3.3.1 什么是框架

框架frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTML文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换信息与资料。例如：假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。[3]

框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过frames[]数组对象来实现不同框架的访问。实际上框架对象本身也是一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。如下图3：




图6 框架划分




用HTML标识将屏幕分成三个框架。先将窗口分成以两行为单位的窗口，之后再按需要分成两个窗口。并在相应的框架中放入自己的HTML文档。通过[frameset]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而cols这项参数是告诉浏览器您想将视窗分割成几行。可以用很多组的 <frameset...> tags 将视窗分割得更复杂。也可以给每个frame一个"名字" (name)，frame的名字在JavaScript语法中的地位非常重要。还可以用<src>告诉浏览器您要载入哪一个 HTML文件。

3.3.2 如何访问框架

在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的frames属性。frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。

通过下标实现不同框架的访问：

parent.frames[Index1].docuement.forms[index2]

通过parent.frames.length确定窗口中窗体的数目。

除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访问：

parent.framesName.decument.formNames.elementName.(m/p)

3.3.3 范例

下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互，在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口，每个窗体窗口实现不同信息的动态交互。

主调文档：首先将窗口划分为具有两行的窗体,尔后再将第二行的窗体划分为具有两列的窗体；

1.html 为显示标题文档；

2.html为第二框架文档其中需要注意的是:通过JavaScript脚本将所示的“浙江”和“浙江”分别改为“杭州”和“杭州”；

3.html 为第三框架文档。结果如下图7：




图7 框架交互

4 JavaScript与网页的结合设计和应用

网页的设计者可以通过JavaScript控制HTML文档的各种对象：窗口、帧、表格、按钮、图像、列表框、嵌入的插件和小程序等直接与这些对象交互。这里我将在自己设计的日剧“东京爱情故事”的主题小网站中加入一些实用的JavaScript程序以实现简单的交互，令网页更加生动。[6]




4.1 在网页中自动显示更新时间

使用document.write(document.lastModified)语句让网页自动显示更新时间，让浏览者知道网站的最新更新情况。如下图8，在设计者修改网页并发布后，网页将自动显示修改时间。[7]




图8 网页更新时间




4.2 点击弹出菜单

使用窗口的一些属性和方法函数来实现目录的隐藏，让网页看起来更清晰明了，非常的实用。如下点击图9中的目录即可弹出如图10中的目录菜单。

图9 目录

图10 详细目录




4.3 使用行为的交互

在网页可视编辑软件FrontPage或Dream weaver中都镶入了JavaScript的行为面板，通过给选定的对象添加行为，即可轻易实现JavaScript的一些交互功能。[6]

4.3.1 播放歌曲

使用播放声音行为如图11，点击文字链接即可听到播放的歌曲




图11 点击播放音乐

4.3.2 图片交换

使用交换图像行为，当鼠标停留在图12的图片上时，图片将转换成图13的图片。

图12 原始图片

图13 交换后图片




4.4 在标题栏显示当前时间

这里我们用document.title和today对象来链接系统时间并显示在标题栏上，如下图14浏览者打开网页即可看到标题栏上显示的当天时间。




图14 标题栏显示时间

4.5 为网页设置密码

在一些你想要限制用户的网页或资料里使用。利用while循环实现，密码错误时的重新输入。如图15至17所示，输入密码正确则显示“欢迎光临！”点确定按钮后，进入网页。否则重新输入密码，直到密码正确为止。




图15 输入密码

图16 密码错误

图17 密码正确




4.6 实现问答测试

这里利用添加选择按钮和自定义函数Score()来实现问答的效果。在网页中添加这种小测试将增加浏览者参与的积极性。如下回答图18的问题，可以得出图19的答案。

图18 选择测试

图19 测试结果

4.7 小游戏

当然，还可以利用JavaScript编写有趣的小游戏加入到网页中，这些小小的JavaScript交互游戏将引起浏览者极大的兴趣，增加网页的访问率。

图20 小游戏

4.7.1 测试反应能力

该游戏中玩家按住并拖动红色格子，避免红色格子撞到蓝色格子或边框，否则游戏结束并输出游戏总时间。

图21 测试反映能力

图22 测试反映结果




4.7.2 动脑亮灯

玩家用鼠标点击方框，小方框四周及本身变成黄色。如灯已经亮，即小方框已经为黄色，则点击后，灯灭。开动脑筋，点击亮灯，使全部的小方框都变成黄色。

图23 动脑亮灯

图24 点击亮灯

4.7.3 数学计算

这里调用数学函数，实现地一个随机输出，加、减、乘、除表达式的功能，玩者必须在指定时间内得出并输入表达式的计算结果。

图25 数学计算游戏

图26 数学计算结果

4.7.4 方框游戏

这是一个双人游戏，玩家依次点击边框围方框，方框分红蓝两色，蓝色先行，游戏最后哪个颜色围的方框最多，则那方胜利。

图27 方框游戏

图27 点击围框




结 论

经过两个多月的设计和撰写，毕业设计终于完成了。

设计初期，我查阅了许多有关网页编程技术及JavaScript语言的资料。在这些相关资料中我发现，许多的书籍及论文都只是单方面的介绍了JavaScript的基础知识和举单独的实例，并没有实现与网站网页的结合设计。而JavaScript是为了更好的实现网页交互而产生的脚本语言，没有和网页的实际结合，一切犹如纸上谈兵。

所以，本论文从JavaScript的语言基础到与网页结合的设计应用，精而简的介绍了JavaScript常用的内部对象，详细讲述了如何应用JavaScript实现网页的交互。并通过设计的网站实例具体阐述了该怎样把所学的JavaScript知识应用到网站网页的设计中以实现如网页加密、多媒体播放、问答测试及当前时间显示等与窗口、表格、按钮、图像及其它对像的交互功能，让网页更加的生动、有趣。

在此之前，编程本来就是我不擅长的方面。所以，在学习JavaScript脚本语言及完成编程设计的过程中遇到了不少困难。有时只是一个小小的循环或是一个小括号位置不对就可以让我反复修改和测试十几次甚至更多。即便如此，我还是很高兴能完成这次毕业设计，因为在毕业设计的过程中，我学到了不少与网页制作相关的知识，也增加了自身网页制作的实战经验。

JavaScript是一种短小精悍的网页脚本语言。它用简单的语言的实现了网页的交互性，同时扩展了HTML语言的一些功能，使得信息与用户之间不仅只是一种显示和浏览的关系，而是一种实时的、动态的、可交互的表达方式。不断深入的探讨和掌握JavaScript脚本语言将给网络编程人员和网页浏览者带来更大的方便。

参 考 文 献




[1] 蒋民. JavaScript实例. 技巧与应用[M]. 清华大学出版社. 2003.16-18.

[2] 李开荣. Web设计技术[M]. 高等教育出版社. 2004.34-37.

[3] E书免费电子图书. 网络编程基础篇之——JavaScript[M]. 2001.1-7.

[4] 何克石. 基于JavaScript的动态网页设计[J] 现代计算机, 2000，3: 34-36.

[5] 钟蕴玉等. 用JavaScript实现Web页交互性[J] 杭州师范大学自然科学学报, 2002，3: 42-46.

[6] 胡仁喜等. 最新网页制作实例教程——FrontPage 2003[M]. 机械工业出版社. 2005.1-309.

[7] 邵丽萍等. 网页编程技术[M]. 清华大学出版社. 2002.102-109.

更多原创论文下载推荐：