用JavaScript实现Web页交互性.docx

《用JavaScript实现Web页交互性.docx》由会员分享，可在线阅读，更多相关《用JavaScript实现Web页交互性.docx（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、用JavaScript实现Web页交互性目录1 JAVASCRIPT 概述 4JAVASCRIPT 简介 41.1 JAVASCRIPT 的特征 4简单性的语言41.1.1 基于对象的语言4动态的语言41.1.2 具有较强的平安性的语言4多平台的语言41.2 JAVASCRIPT 的局限性 4浏览器相关的局限性413.1 平安性有关的局限性5JAVASCRIPT 和 JAVA 的区别 513.1.1 于对象和面向对象5所谓事件驱动，就是指主页(Homepage)中执行了某种操作所产生的动 作。(这种动作也称为“事件，如按下鼠标、移动窗口、选择菜单等), 会引起相应的事件响应。1.2.4 具有较

2、强的平安性的语言JavaScript是一种平安性很强的语言，它不允许客户访问本地硬盘，且 不能将数据存入服务器上，不允许对网络文档干地修改和删除，只能通 过浏览器实现信息浏览或动态交互，从而有效地防止病毒的入侵。1.2.5 多平台的语言实际上JavaScript依赖于浏览器本身与操作环境无关，只要能运行支持 JavaScript的浏览器计算机都可正确运行。1.3 JavaScript 的局限性2JavaScript为Web内容设计人员提供了极大的灵活性和控制手段。它 能够将一个Web节点中的不同组成局部捆绑在一起，成为一个紧密结 合的信息源。然而，像任何事物一样，JavaScript也有它的局

3、限性。13.1 浏览器相关的局限性 目前WWW上有很多浏览器，到现在为止，只有NetscapeNavigator2.0s Netscape Navigator3.0 Netscape Gold2.0 完全支 持JavaScript, IE3.0只是局部支持，不过正4.0、正5.0已可以完全支 持JavaScript的信息，其他浏览器皆不支持。支持与不支持JavaScript 的浏览器在显示一个带有JavaScript脚本的主页时，结果全然不同。13.2 平安性有关的局限性JavaScript的设计目标在于Web平安性，它比以前任何一种方法 都更能保证Web的平安这自然是牺牲JavaScript

4、的一些功能换来的。JavaScript不能翻开、读、写、保存用户在计算机上的文件。它有权访 问的唯一信息就是它所嵌入的那一个Web主页中的信息。JavaScript不能翻开、读、写、保存Web服务器上的文件。尽管可以 使用它来提交HTML命令，但HTML命令也不能翻开那些文件。JavaScript不能用来编写破坏计算机上任何资源的病毒。它产生在 糟糕的事情也不过是一个设计不好的主页可能会显示一些错误信息（可 能需要关闭浏览器），仅此而已。简而言之，JavaScript只生存于它小 小的世界Web主页里。13.3 JavaScript 和 Java 的区别3虽然JavaScript与Java有紧

5、密的联系，但却是两个公司开发的不同的 两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言, 特别适合于Internet应用程序开发；而JavaScript是Netscape公司 的产品，其目的是为了扩展Netscape Navigator功能，而开发的一种 可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身 是Live Script;而Java的前身是Oak语言。下面对两种语言间的异同 作如下比拟：13.3.1 于对象和面向对象Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交

6、互 作用的复杂软件。它是一种基于对象(Object Based )和事件驱动(Event Driver)的编程语言。因而它本身提供了非常丰富的内部对象 供设计人员使用。13.3.2 释和编译 两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到 客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的 仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平 台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不 需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执 行。143强变量和弱变量两种语言所采取的变量是不一样的。J

7、ava采用强类型变量检查，即所有变量在编译之前必须做声明。如：Integer x;String y;x=1234;x=4321;其中X=1234说明是一个整数，Y=4321说明是一个字符串。JavaScript中变量声明，采用其弱类型。即变量在使用前不需做声明, 而是解释器在运行时检查其数据类型，如：x=1234;y =4321;前者说明x为其数值型变量，而后者说明y为字符型变量。1.1.4 代码格式不一样Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那 么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML

8、文档中， 并且可动态装载。编写HTML文档就像编辑文本文件一样方便。1.1.5 嵌入方式不一样在HTML文档中，两种编程语言的标识不同，JavaScript使用 Script./Script来标识,而 Java 使用applet./applet来 标识。1.1.6 静态联编和动态联编Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编 译器能够实现强类型检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检 查，如不经编译就无法实现对象引用的检查。1.5 JavaScript程序运行环境软件环境Windows 95/98或Windows NT以上

9、版本的Windows操作系统配Netscape Navigator x.O 或Internet Explorer 3.0 以上版本的浏览器。 用于编辑HTML文档的字符编辑器（WS、WPS、Notepad. WordPad 等）或HTML文档编辑器、或者类似Dreamweaver MX的网页开发工 具软件。1.5.1 硬件配置 首先必须具备运行Windows 95/98或Windows NT的基本硬件配置环境。推荐: 基本内存32M、CRT至少可以显示256色，分辨率在640X480以上CPU只少II233以上级别鼠标和其它外部设置鼠标和其它外部设置（根据需要选用）1.6 JavaScript

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

11、程序/ Script(2) JavaScript的注释语法Seri pt Language=JavaScript / ScriptJavaScript脚本与程序可以放人HTML文件头部或文件体中的任何地 方。在Netscape的Web站点中的许多例子以及其他地方，习惯上在 HTML件的头部包括Script容器,这也是较好的格式。基于以上嵌入 语法，我们可将JavaScript脚本程序嵌入HTML文档中以实现动态网 页的设计。2 JavaScript对象和对象的引用JavaScript语言是基于对象的(Object-Based ),而不是面向对象的 (object-oriented )。之所以说

12、它是一门基于对象的语言，主要是因 为它没有提供抽象、继承、重载等有关面向对象语言的许多功能。而是 把其它语言所创立的复杂对象统一起来,从而形成一个非常强大的对象 系统。虽然JavaScript语言是一门基于对象的语言，但它还是具有一 些面向对象的基本特征。它可以根据需要创立自己的对象，从而进一步 扩大JavaScript的应用范围，增加编写Web文件的功能。32.1 对象的基本结构JavaScript中的对象是由属性(properties)和方法(methods)两个基本 的元素构成的。前者是对象在实施其所需要行为的过程中，实现信息的 装载单位，从而与变量相关联；后者是指对象能够按照设计者的意

13、图而 被执行，从而与特定的函数相关联。2.2 引用对象的途径 一个对象要真正地被使用，可采用以下几种方式获得：引用JavaScript 内部对象、由浏览器环境中提供、创立新对象。这就是说一个对象在被引用之前，这个对象必须存在，否那么引用将毫无 意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象 可通过三种方式获取。要么创立新的对象，要么利用现存的对象。2.3 有关对象操作语句JavaScript不是纯面向对象的语言，它设有提供面向对象语言的许多功 能，因此JavaScript设计者之所以把它称为基于对象而不是面向 对象的语言是因为在JavaScript中提供了几个用于操作对

14、象的语句、 关键词及运算符。2.4 对象属性的引用对象属性的引用可由以下三种方式之一实现：2.4.1 使用点（.）运算符university.Name=云南省 university.city=昆明市university. Date 二 ” 1999”其中university是一个已经存在的对象，Name、City、Date是它的 三个属性，并通过操作对其赋值。2.4.2 通过对象的下标实现引用universityO=云南universityl=昆明市university2 = 1999通过数组形式的访问属性，可以使用循环操作获取其值。function showunievsity(object)

15、for (var j=0;j2; j + +)document.write(objectj)假设采用For.Jn那么可以不知其属性的个数后就可以实现：Function showmy(object)for (var prop in this) docament.write(thisprop);1.1.2 解释和编译5强变量和弱变量51.1.3 代码格式不一样5嵌入方式不一样61.1.4 静态联编和动态联编6JAVASCRIPT程序运彳亍环境61.5.1 软件环境6硬件配置1.6 JAVASCRIPT程序在HTML中嵌入的两种语法4 62 JAVASCRIPT对象和又寸象的弓|用72.1 对象的基

16、本结构7引用对象的途径72.2 有关对象操作语句7对象属性的引用72.2.1 使用点（.）运算符7通过字符串的形式实现universityName=云南universityCity=昆明市universityDate = ,19992.4 对象的方法的引用5在JavaScript中对象方法的引用是非常简单的。ObjectName.methodsO实际上methods() = FunctionName方法实质上是一个函数。如引用 university对象中的showmy ()方法,那么可使用:document.write (university.showmyO)或：document.write(

17、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为我们提供了一些非常有用的常用内部对象和方法。用户不 需要用脚本即可实现网页的交互。33.1 JavaScript窗口的输入输出在JavaScript中可以非常方便地实现输入输出信息，并与用户进行交 互。JavaScript

18、是基于对象的脚本编程语言，那么它的输入输出就是通 过对象来完成的。其中有关输入可通过窗口( Window )对象来完成, 而输出可通过文档(document)对象的方法来实现。请看下面例子: 在弹出的对话框中输入你要输出在网页中的话，按确定即可在网页中实 现输出。图1窗口输入图2窗口输出例子中使用的window.prompt。就是一个窗口对象的方法，其基本作 用是，当装入Web页面时在屏幕上显示一个具有“确定和取消 的对话框，让你输入数据。document.writle是一个文档对象的方法, 它的基本功能，是实现Web页面的输出显示。3.1.1 窗口对象 该对象包括许多有用的属性、方法和事件驱

19、动程序，编程人员可以利用 这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。在使用 应注意以下几点：(1)该对象对应于HTML文档中的Body和FrameSet两种标识;(2 ) onload和onunload都是窗口对象属性;(3 )在JavaScript脚本中可直接引用窗口对象。如：window.alert (口对象输入方法口对象输入方法)可直接使用以下格式：alert (窗口对象的事件驱动口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。3.1.2 窗口对象的方法窗口对象的方法主要用来提供信息或输入数据以及创立一个新

20、的窗口。(1)创立一个新窗口 open():使用window.open (参数表)方法可以 创立一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的 叩七。(2 )具有0K按钮的对话框：alert。方法能创立一个具有0K按钮的对 话框。(3 )具有0K和Cancel按钮的对话框：confirm。方法为编程人员提供 一个具有双按钮的对话框。(4 )具有输入信息的对话框：prompt。方法允许用户在对话框中输入信 息，并可使用默认值，其基本格式如下prompt (提示信息，默认值)。3.1.3 窗口对象中的属性口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用 其主要属性有以下几个：

21、frames确定文档中帧的数目frames (帧)作 为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几 占/ (1)帧本身已是一类窗口，继承了窗口对象所有的属性和方法。(2 ) Parent :指明当前窗口或帧的父窗口。(3 ) defaultstatus :默认状态，它的值显示在窗口的状态栏中。(4 ) status :包含文档窗口中帧中的当前信息。(5 ) top :包括的是用以实现所有的下级窗口的窗口。(6 ) window :指的是当前窗口(7 ) self :引用当前窗口。(8 ) frames :属性是通过HTML标识Frames的顺序来引用的,它 包含了一个窗口中的

22、全部帧数。3.1.4 输出流及文档对象 在JavaScript文档对象中，提供了用于显示关闭、消除、翻开HTML 页面的输出流。(1)创立新文档open()方法使用document.open。创立一个新的窗口或在指定的命令窗口内翻开文档。由于窗口对象是所加载的父对象, 因而我们在调用它的属性或方法时，不需要加入Window对象。例用Window. Open()与 Open。是一样的。翻开一个窗口的基本格式：Window .open(URL7窗口名字/窗口属 性),window属性参数是由字符串组成，由逗号分隔,它指明了有关 新创立窗口的属性。表1 window属性参数参数设定值含义toolba

23、r 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确定窗口的高度。在使用OpenQ方法时，需要注意以下点。1)通常浏览器窗口中，总有一个文档是翻开的，因而不需要为输出建立一个新文档。2 )在完成对Web文档的写操作后，要使用或调用cl

24、ose()方法来实现 对输出流的关闭。3 )在使用open。来翻开一个新流时，可为文档指定一个有效的文档 类型，有效文档类型包括 text/HTML、text/gifs text/xims text/plugin 等。(2 )write()s writeln。输出显示 该方法主要用来实现在Web页面上显 示输出信息。在实际使用中，需注意以下几点：1 ) writeln。与write。唯一不同之处在于在末尾加了一个换行符。2 )为了正常显示其输出信息，必须指明 标记，使之告 诉编辑器。3)输出的文档类型，可以由浏览器中的有效的合法文本类型所确定。(3)关闭文档流close()在实现多个文档对象中

25、，必须使用close。来关 闭一个对象后，才能翻开另一个文档对象。(4 )清除文档内容clear()使用该方法可清除已经翻开文档的内容。范例以下程序演示了你进入主页所停留的时间：该例子中通过时间对象来调 用系统时间进行计时并输出。结果如以下图3: 图3计算停留时间3.2用窗体对象（Form ）实现交互sissis窗体基础知识体对象使设计人员能用窗体中不同的元素与客户机用户相交互，而用 不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。3 （1 ）什么是窗体对象 窗体（Form ）:它构成了 Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms数组来实现 不

26、同窗体的访问。 在Forms0中共有三个基本元素，而Formsl中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：Name=表的名称Target=指定信息的提交窗口 action=接收窗体程序对应的URLMethod二信息数据传送方式(get/post)ecotype=窗体编码方式onsubmit =JavaScript 代码(2 )窗体对象的方法(2 )窗体对象的方法体对象的方法只有一个-submit。方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,那么使用以下格式:document.mytest.submit()(3

27、)9体对象的属性窗体对象中的属性主要包括以下:Elements name action target encoding method.除Elements外,其它几个均反映了窗体中标识中相应属性的状态，这 通常是单个窗体标识而elements常常是多个窗体元素值的数组例:elementsO.Mytable.elementsl (4 )访问窗体对象在JavaScript中访问窗体对象可由两种方法实现: 1)通过访问窗体在窗体对象的属性中首先必须指定其窗体名，而后就可以通过以下标识 访问窗体如：document.Mytable()o2)通过数组来访问窗体除了使用窗体名来访问窗体外，还可以使用窗体对象

28、数组来访问窗体对 象。但需要注意一点，因窗体对象是由浏览器环境提供的，而浏览器环 境所提供的数组下标是由0到no所以，可通过以下格式实现窗体对象 的访问:document.forms0document.formsldocument.forms2.(5 )弓I用窗体的先决条件在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创立窗体，并将定义窗体局部放在引用之前。通过对象的下标实现引用72.5对象的方法的引用83利用内部对象实现网页交互93.1 JAVASCRIPT3.1 JAVASCRIPT口的输入输出9口对象93.1.2 窗口对象的事件驱动93.1.3 窗口对象的事件驱动93

29、.1.4 窗口对象的方法9口对象中的属性10输出流及文档对象103.1.6 范例 113.2用窗体对象（FORM ）实现交互113.2.1 窗体基础知识11窗体中的基本元素12323范例15 33实现框架的交互16窗体中的基本元素 窗体中的基本元素由按钮、单项选择按钮、复选按钮、提交按钮、重置按钮、 文本框等组成。在JavaScript中要访问这些基本元素，必须通过对应 特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通 过该元素的属性或方法来引用。其引用的基本格式见下：formName.elements.methadName （窗体名.元素名或数组.方法）formName.ele

30、maent.propertyName（窗体名.元素名或数组属性）F面分别介绍：(1) Text单行单列输入元素功能：对Text标识中的元素实施有效的控制。1)基本属性name :设定提交信息时的信息名称，对应于HTML文档中的Nameovalue :用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue :包括Text元素的默认值2)基本方法 blur():将当前焦点移到后台。selectQ :加亮文字。3）主要事件onFocus :当Text获得焦点时，产生该事件。OnBlur :从元素失去焦点时，产生该事件。onselect :当文字被加亮显示后，产生该文件。on

31、change :当Text元素值改变时，产生该文件。例：Form name=testinput type=text” name=test” value=this is a JavaScript =that is a JavaScript1,;document.mytest.selectO;document.mytest.blurO; (2 ) textarea多行多列输入元素功能：实施对Textarea中的元素进行控制。1)基本属性name :设定提交信息时的信息名称，对应HTML文档Textarea的 NameoValue :用以设定出现在窗口中对应HTML文档中Value的信息。Defau

32、lt value :元素的默认值。2)方法blur():将输入焦点失去select():将文字加亮后3)事件onBlur:当失去输入焦点后产生该事件onFocus :当输入获得焦点后，产生该文件 onchange :当文字值改变时，产生该事件onselect :当文字加亮后，产生该文件(3) Select选择元素功能：实施对滚动选择元素的控制。1)属性name :设定提交信息时的信息名称，对应文档select中的nameolength :对应文档 select 中的 lengthoptions :组成多个选项的数组selectindex :该下标指明一个选项select :在中每一选项都含有以

33、下属性：Text :选项对应的文字selected :指明当前选项是否被选中Index :指明当前选项的位置defaultselected :默认选项2)事件 onBlur :当select选项失去焦点时，产生该文件。onFocas :当select获得焦点时，产生该文件。onchange :选项状态改变后，产生该事件。(4 ) Button 按钮功能：实施对Button按钮的控制。1)属性name :设定提交信息时的信息名称，对应文档中button的Name0value :用以设定出现在窗口中对应HTML文档中Value的信息。2)方法click。该方法类似于一个按下的按钮。3)事件oncl

34、ick当单击button按钮时，产生该事件。例: document.elements。.value=mytest; 通过元素访问或document.testcallvalue=,mytestn; / 通过名字访问 (5 ) checkbox 检查框功能：实施对一个具有复选框中元素的控制。1)属性name :设定提交信息时的信息名称。value :用以设定出现在窗口中对应HTML文档中Value的信息。checked :该属性指明框的状态true/false.defauitchecked :默认状态2)方法click。该方法使得框的某一个项被选中。3）事件0ndick:当框的选被选中时，产生该事

35、件。（6 ） radio无线按钮功能：实施对一个具单项选择功能的无线按钮控制。1）属性nam设定提交信息时的信息名称，对应HTML文档中的radio的name相同value :用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。length :单项选择按钮中的按钮数目。defalechecked :默认按钮。checked :指明选中还是没有选中。index :选中的按钮的位置。2）方法chick。:选定一个按钮。3）事件 onclick:单击按钮时，产生该事件。(7) hidden:隐藏功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。

36、1)属性name :设定提交信息时的信息名称，对应HTML文档的hidden中的 Name0value :用以设定出现在窗口中对应HTML文档中Value的信息，对应 HTML 文档 hidden 中的 value。defaleitvalue :默认值(8 ) Password 口令功能：实施对具有口令输入的元素的控制。1)属性name :设定提交信息时的信息名称，对应HTML文档中password中 的 nameovalue :用以设定出现在窗口中对应HTML文档中value的信息，对应 HTML 文档中 password 中的 value0defaultvalu :默认值2)方法selec

37、t。:加亮输入口令域。blur():使之丧失password输入焦点。focus()：获得password输入焦点。(9 ) submit提交元素功能：实施对一个具有提交功能按钮的控制。1)属性name:设定提交信息时的信息名称，对应HTML文档中submito value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML 文档中 value。2)方法click。相当于按下submit按钮。3)事件onclick()当按下该按钮时，产生该事件。范例这个例子我们演示通过点击一个按钮(red )来改变窗口颜色，点击调 用动态按钮文档”调用一个动态按钮文档。效果如图4图5所示：图

38、4原始背景 图5改变后背景3.3实现框架的交互什么是框架框架frames最主要功用是“分割视框架frames最主要功用是“分割视使每个小视窗”能显示不同的HTML文件，不同框架之间可以互动(interact),这就是说不同框架之 间可以交换信息与资料。例如：假设您开了两个frames，第一个frame 可显示书的目录，第二个frame那么显示章节的具体内容。3 框架可以将屏幕分割成不同的区域，每个区域有自己的URL ,通过 frames数组对象来实现不同框架的访问。实际上框架对象本身也是一 类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下 面我们先看一下框架的例子。如以下图3 :

39、图6框架划分用HTML标识将屏幕分成三个框架。先将窗口分成以两行为单位的窗 口，之后再按需要分成两个窗口。并在相应的框架中放入自己的HTML 文档。通过frameset告诉浏览器您要设置几个框架；rows这项参数3.3.1 什么是框架16如何访问框架163.3.2 范例 174 JAVASCRIPT与网页的结合设计和应用184.1 在网页中自动显示更新时间18点击弹出菜单184.2 使用行为的交互19播放歌曲194.2.1 图片交换19在标题栏显示当前时间204.3 为网页设置密码21实现问答测试214.4 小游戏23测试反响能力234.4.1 动脑亮灯24告诉浏览器您想将视窗分割成几列；而c

40、ols这项参数是告诉浏览器您 想将视窗分割成几行。可以用很多组的frameset. tags将视窗分割得更复杂。也可以给每个frame 一个名字（name） , frame的名字在JavaScript语法中的地位非常重要。还可以用src告诉浏览器您要 载入哪一个HTML文件。如何访问框架在前面我们介绍过使用document.forms实现单一窗体中不同元素的 访问。而要实现框架中多窗体的不同元素的访问，那么必须使用window 对象中的frames属性。frames属性同样也是一个数组，他在父框架集 中为每一个子框架设有一项。通过下标实现不同框架的访问:parent.framesIndexl.

41、docuement.formsindex2通过确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访问：parent.framesName.decument.formNames.elementName.(m/p) 范例F面我们通过一个具体的实例，来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在实现更为复杂的信息交互。该例子是在个多窗口中实现窗体信息的动态交互，在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口， 每个窗体窗口实现不同信息的动态交互。主调文档:首先将窗口划分为具有两行的窗体，此后再将第二行的窗体划 分为具有两列的

42、窗体l.html为显示标题文档;2 .html为第二框架文档其中需要注意的是:通过JavaScript脚本将所示的云南和四川分别改为昆明和成都；3 .html为第三框架文档。结果如以下图7 :图7框架交互JavaScript与网页的结合设计和应用网页的设计者可以通过JavaScript控制HTML文档的各种对象 窗口、 帧、表格、按钮、图像、列表框、嵌入的插件和小程序等直接与这些对 象交互。这里我将在自己设计的日剧东京爰情故事”的主题小网站中 加入一些实用的JavaScript程序以实现简单的交互令网页更加生动。6 在网页中自动显示更新时间使用 document.write(document.

43、lastMc)dified)语句让网页自动显示 更新时间，让浏览者知道网站的最新更新情况。如以下图8,在设计者修 改网页并发布后，网页将自动显示修改时间。刀图8网页更新时间6.1 点击弹出菜单使用窗口的一些属性和方法函数来实现目录的隐藏,让网页看起来更清 晰明了，非常的实用。如下点击图9中的目录即可弹出如图10中的目 录菜单。图9目录图10详细目录6.2 使用行为的交互 在网页可视编辑软件FrontPage或Dream weaver中都镶入了 JavaScript的行为面板，通过给选定的对象添加行为，即可轻易实现 JavaScript的一些交互功能。播放歌曲使用播放声音行为如图11，点击文字链

44、接即可听到播放的歌曲图11点击播放音乐6.2.1 图片交换使用交换图像行为，当鼠标停留在图12的图片上时，图片将转换成图13的图片。图12原始图片图13交换后图片6.3 在标题栏显示当前时间这里我们用document.title和today对象来链接系统时间并显示在标 题栏上，如以下图14浏览者翻开网页即可看到标题栏上显示的当天时间。图14标题栏显示时间为网页设置密码 在一些你想要限制用户的网页或资料里使用。利用while循环实现，密 码错误时的重新输入。如图15至17所示，输入密码正确那么显示欢 迎光临！点确定按钮后，进入网页。否那么重新输入密码，直到密码正 确为止。图15输入密码图16密码

45、错误图17密码正确实现问答测试这里利用添加选择按钮和自定义函数Score。来实现问答的效果。在网 页中添加这种小测试将增加浏览者参与的积极性。如下回答图18的问 题，可以得出图19的答案。图18选择测试图19测试结果6.4 小游戏当然，还可以利用JavaScript编写有趣的小游戏加入到网页中,这些 小小的JavaScript交互游戏将弓|起浏览者极大的兴趣，增加网页的访 问率。图20小游戏测试反响能力该游戏中玩家按住并拖动红色格子，防止红色格子撞到蓝色格子或边框, 否那么游戏结束并输出游戏总时间。图21测试反映能力图22测试反映结果6.4.1 动脑亮灯玩家用鼠标点击方框，小方框四周及本身变成黄色。如灯已经亮，即小 方框已经为黄色，那么点击后，灯灭。开动脑筋，点击亮灯，使全部的小 方框都变成黄色。图23动脑亮灯图24点击亮灯6.4.2 数学计算这里调用数学函数，实现地一个随机输出，力口、减、乘、除表达式的功 能，玩者必须在指定时间内得出并输入表达式的计算结果。图25数学计算游戏图26数学计算结果6.4.3 方框游戏这是一个双人游戏，玩家依次点击边框围方框，方框分红蓝两色，蓝色 先行，游戏最后哪个颜色围的方框最多，那么那方胜利。图27方框游戏图27点击围框结论经过两个多月的设计和撰写，毕业设计终