JavaScript介绍（三）

ゝ一世哀愁。 2022-08-23 14:59 326阅读 0赞

**第六讲 使用内部对象系统**

使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。

一、浏览器对象层次及其主要作用

除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。

![Image 1][]　浏览器对象(Navigator)

提供有关浏览器的信息

![Image 1][]　窗口对象(Windows)

Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。

![Image 1][]　位置对象(Location)

Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。

![Image 1][]　历史对象(History)

History对象提供了与历史清单有关的信息。

![Image 1][]　文档对象(Document)

document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。

编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。

二、文档对象功能及其作用

在Navigator浏览器中，document文档对象是核心是，同时也是最重要的。见图6-1所示。

<table> 
 <tbody> 
  <tr> 
   <td> <p><font></font><font>Links</font> </p></td> 
   <td> <p><font>Anchor</font> </p></td> 
   <td> <p><font>Form</font> </p></td> 
   <td> <p><font>Method</font> </p></td> 
   <td> <p><font>Prop</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>链接对象</font> </p></td> 
   <td> <p><font>锚对象</font> </p></td> 
   <td> <p><font>窗体对象</font> </p></td> 
   <td> <p><font>方法</font> </p></td> 
   <td> <p><font>对象</font> </p></td> 
  </tr> 
 </tbody> 
</table>

图6－1 document对象

从图6-1中可以看出，document对象的主要作用就是把这些基本的元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个角度看，document对象中又是由属性和方法组成。

１、document中三个主要的对象

在document中主要有：links,anchor,form等三个最重要的对象：

（１）anchor锚对象：

anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。

（２）链接links对象

link对象指的是用<A Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。

（３）窗体（Form）对象

窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document. Forms\[\]数组来使得在同一个页面上可以有多个相同的窗体,使用forms\[\]数组要比使用窗体名字要方便得多。

例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。

Test6\_1.htm

<Html>

<head>

</head>

<body>

<form >

</form>

</form>

</body>

</html>

其中用了OnChnge事件(当窗体内容改变时激发)。第一个使用窗体名字标识my,第二个使用窗体数组Forms\[\]。其效果是一致。

２、文档对象中的attribute属性

document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：

（１）链接颜色：alinkcolor

这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定改变。

（２）链接颜色：linkcolor

当用户使用<A Href=...> Text string </A>链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。

（３）浏览过后的颜色：VlinkColor

该属性表示的是已被浏览存储为已浏览过的链接颜色。

（４）背景颜色：bgcolor

该元素包含文档背景的颜色。

（５）前景颜色：Fgcolor

该元素包含HTML文档中文本的前景颜色。

３、文档对象的基本元素

（１）窗体属性：

窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过document.forms.length反映该文档中所创建的窗体数目。

（２）锚属性：anchors

该属性中，包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在document.anchors.length中。

（３）链接属性：links

链接属性是指在文档中<A>...</A>的由Href=...指定的数目，其链接数目保存在document.links.length中。

**三、范例**

例子1：下列程序随机产生每日一语。

test6\_3.html

<HTML>

<HEAD>

<!--

tips = new Array(6);

tips\[0\]="每日一语（1）";

tips\[1\]="每日一语（2）";

tips\[2\]="每日一语（3）";

tips\[3\]="每日一语（4）";

tips\[4\]="每日一语（5）";

tips\[5\]="每日一语（6）";

index = Math.floor(Math.random() \* tips.length);

document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips\[index\]+"</FONT>");

</Script>

</HEAD>

</BODY>

</HTML>

输出结果见图6-3所示。

![Image 1][]

**第七讲 窗口及输入输出**

JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关  
输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。

**一、窗口及输入输出**

请看下面例子：

<HTML>

<Head>

Var test=window.prompt("请输入数据:");

document.write(test+"JavaScript输入输出的例子");

</script>

</Head>

</HTML>

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

![Image 1][]

图1

**1、窗口对象**

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

![Image 1][]　该对象对应于HTML文档中的<Body>和<FrameSet>两种标识；

![Image 1][]　onload和onunload都是窗口对象属性；

![Image 1][]　在JavaScript脚本中可直接引用窗口对象。如：

window.alert("窗口对象输入方法")

可直接使用以下格式：

alert("窗口对象输入方法")

**　**

**2、窗口对象的事件驱动**

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

**3、窗口对象的方法**

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

![Image 1][]　创建一个新窗口open()

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

![Image 1][]　具有OK按钮的对话框

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

![Image 1][]　具有OK和Cancel按钮的对话框

confirm()方法为编程人员提供一个具有两个按钮的对话框。

![Image 1][]　具有输入信息的对话框

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

**　**

**4、窗口对象中的属性**

窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用，其主要属性有以下几个：

（１）frames 确文档中帧的数目

frames（帧）作为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几点：

![Image 1][]　frames属性是通过HTML标识<Frames>的顺序来引用的，它包含了一个窗口中的全部帧数。

![Image 1][]　帧本身已是一类窗口，继承了窗口对象所有的全部属性和方法。

（２）Parent 指明当前窗口或帧的父窗口。

（３）defaultstatus:默认状态，它的值显示在窗口的状态栏中。

（４）status:包含文档窗口中帧中的当前信息。

（５）top:包括的是用以实现所有的下级窗口的窗口。

（６）window.指的是当前窗口

（７）self:引用当前窗口。

**　**

**5、输出流及文档对象**

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

**（１）创建新文档open()方法**

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

Window .open("URL","窗口名字","窗口属性"\]

window属性参数是由一个字符串列表项它由逗号分隔，它指明了有关新创建窗口的属性。见表7-1所示。

表7-1

<table> 
 <tbody> 
  <tr> 
   <td> <p><font></font><font>参 数</font> </p></td> 
   <td> <p><font>设定值</font> </p></td> 
   <td> <p><font>含 义</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>toolbar</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>建立或不建立标准工具条</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>location</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>建立或不建立位置输入字段</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>directions</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>建立或不建立标准目录按钮</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>status</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>建立或不建立状态条</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>menubar</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>建立或不建立菜单条</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>scrollbar</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>建立或不建立滚动条</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>revisable</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>能否改变窗口大小</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>width</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>确定窗口的宽度</font> </p></td> 
  </tr> 
  <tr> 
   <td> <p><font>Height</font> </p></td> 
   <td> <p><font>yes/no</font> </p></td> 
   <td> <p><font>确定窗口的高度。</font> </p></td> 
  </tr> 
 </tbody> 
</table>

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

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

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

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

**（２）write()、writeln()输出显示。**

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

![Image 1][]　writeln()与write()唯一不同之处在于在未尾加了一个换符。

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

![Image 1][]　输出的文档类型，可以由浏览器中的有效的合法文本类型所确定。

（３）关闭文档流close()

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

（４）清除文档内容clear()

使用该方法可清除已经打开文档的内容。

**　**

**二、简单的输入、输出例子**

在JavaScript中可以非常方便地实现输入输出信息，并与用户进行交互。

**1、JavaScript信息的输入**

通过使用JavaScript中所提供的窗口对象方法prompt(), 就能完成信息的输入。该方法提供了最简便的信息输入方式，其基本格式如下：

Window.prompt("提示信", 预定输入信息);

此方法首先在浏览器窗口中弹出一个对话框, 让用户自行输入信息。一旦输入完成后，就返回用户所输入信息的值。例:

test=prompt（“请输入数据:”，”this is a JavaScript”）

实际上prompt()是窗口对象的一个方法。因为缺省情况下所用的对象就是window对象, 所以windows对象可以省略不写。

**2、输出显示**

每种语言，都必须提供信息数据的输出显示。JavaScript也是一样，它提供有几个用于信息输出显示的方法。比较常用的有window.alert()、document.write和及document.writln()方法。

**１)、document.write()方法和document.writeln()方法**

document是JavaScript中的一个对象在它中封装许多有用的方法，其中write()和writeln()就是用于将文本信息直接输出到浏览器窗口中的方法。

document.write()；

document.writeln()；

说明：

![Image 1][]　write()和writeln()方法都是用于向浏览器窗口输出文本字串；

![Image 1][]　二者的唯一区别就是writeln()方法自动在文本之后加入回车符。

**　**

**２)、 window.alert()输出**

在JavaScript为了方便信息输出，JavaScript提供了具有独立的对话框信息输出─alert()方法。  
alert()方法是window对象的一个方法，因此在使用时，不需要写window窗口对象名，而是直接使用就行了。它主要用途用在输出时产生有关警告提示信息或提示用户，一旦用户按“确定”钮后，方可继续执行其他脚本程序。例:

<HTML>

<HEAD>

</HEAD>

<BODY>

alert("这是一个JavaScript测试程序");

</Script>

</BODY>

</HTML>

**　**

**３)、利用输入、输出方法实现交互**

在JavaScript中，可以利用prompt()方法和write()方法实现与Web页面用户进行交互。例下面就是一个有关实现交互的例子。

**Test7\_1.htm**

<HTML>

<HEAD>

</HEAD>

<BODY>

<!-- Hide From Other Browsers

document.write("<H1>有关交互的例子");

my=prompt("请输入数据:");

document.write(my+"</H1>");

document.close();

// Stop Hiding from Other Browsers-->

</Script>

</BODY>

</HTML>

从上面程序可以看出：

![Image 1][]　可通过write()和prompt()方法实现交互。

![Image 1][]　在JavaScript脚本语言中可以使用HTML标识语言的代码。从而实现混合编程。其中<H1>和<Br>就是HTML标识符。

**四、范例**

下列程序演示了你进入主页所停留的时间。

**test7\_2.htm**

<html>

<td vAlign="top" width="135">您在此停留了：

</form>

var id, iM = 0, iS = 1;

start = new Date();

function go()

now = new Date();

time = (now.getTime() - start.getTime()) / 1000;

time = Math.floor( time);

iS = time % 60;

iM = Math.floor( time / 60);

if ( iS < 10)

document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";

else

document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";

id = setTimeout( "go()", 1000);

go();

</script>

</body>

</html>

在浏览器中的结果，见下图所示。

![Image 1][]

**第八讲 WEB页面信息的交互**

要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

**一、窗体基础知识**

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

**１、什么是窗体对象**

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

</form>

</form>

在Forms\[0\]中共有三个基本元素，而Forms\[1\]中只有两个元素。

窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

<Form

Name ="表的名称"

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

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

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

enctype ="窗体编码方式"

\[onsubmit ="JavaScript代码"\]>

</Form>

**　**

**２、窗体对象的方法**

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

document.mytest.submit()

**３、窗体对象的属性**

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

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

elements\[0\].Mytable.elements\[1\]

**　**

**４、访问窗体对象**

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

（１）通过访问窗体

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

（２）通过数组来访问窗体

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

document.forms\[0\]

document.forms\[1\]

document.forms\[2\]...

**　**

**５、引用窗体的先决条件**

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

**　**

**二、窗体中的基本元素**

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

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

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

下面分别介绍：

**　**

**１、Text单行单列输入元素**

![Image 1][]　功能：对Text标识中的元素实施有效的控制。

![Image 1][]　基本属性：

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

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

defaultvalue：包括Text元素的默认值

![Image 1][]　基本方法：

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

select()：加亮文字。

![Image 1][]　主要事件：

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

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

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

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

例：...

</form>

...

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

document.mytest.select();

document.mytest.blur();

</script>

**　**

**２、textarea多行多列输入元素**

![Image 1][]　功能：实施对Textarea中的元素进行控制。

![Image 1][]　基本属性

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

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

Default value：元素的默认值。

![Image 1][]　方法：

blur()：将输入焦点失去

select()：将文字加亮后

![Image 1][]　事件：

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

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

Onchange:当文字值改变时，产生该事件

Onselect:当文字加亮后，产生该文件

**　**

**３、Select选择元素**

![Image 1][]　功能：实施对滚动选择元素的控制。

![Image 1][]　属性：

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

Length:对应文档select中的length

options:组成多个选项的数组

selectIndex;该下标指明一个选项

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

Text:选项对应的文字

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

Index:指明当前选项的位置

defaultselected:默认选项

![Image 1][]　事件：

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

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

Onchange:选项状态改变后，产生该事件。

**　**

**４、Button按钮**

![Image 1][]　功能：实施对Button按钮的控制。

![Image 1][]　属性：

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

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

![Image 1][]　方法：

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

![Image 1][]　事件：

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

例 ：

</form>

...

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

或

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

</script>

.....

**　**

**５、checkbox检查框**

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

![Image 1][]　属性：

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

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

Checked:该属性指明框的状态true/false.

defauitchecked:默认状态

![Image 1][]　方法：

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

![Image 1][]　事件：

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

**　**

**６、radio无线按钮**

![Image 1][]　功能：实施对一个具单选功能的无线按钮控制。

![Image 1][]　属性：

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

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

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

defalechecked:默认按钮。

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

index:选中的按钮的位置。

![Image 1][]　方法：

chick():选定一个按钮。

![Image 1][]　事件：

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

**　**

**７、hidden:隐藏**

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

![Image 1][]　属性：

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

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

defaleitvalue:默认值

**　**

**８、Password口令**

![Image 1][]　功能：实施对具有口令输入的元素的控制。

![Image 1][]　属性：

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

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

defaultvalu:默认值

![Image 1][]　方法

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

blur():使这丢失passward输入焦点。

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

**　**

**９、submit提交元素**

![Image 1][]　功能：实施对一个具有提交功能按钮的控制。

![Image 1][]　属性：

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

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

![Image 1][]　方法

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

![Image 1][]　事件：

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

**三、范例**

下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

test8_1.htm
    <html>
    <head>
    <Script Language="JavaScript">
    //原来的颜色
    document.bgColor="blue";
    document.vlinkColor="white";
    document.linkColor="yellow";
    document.alinkcolor="red";
    //动态改变颜色
    
    function changecolor(){
       document.bgColor="red";
       document.vlinkColor="blue";
       document.linkColor="green";
       document.alinkcolor="blue";
    }
    
    </script>
    </HEAD>
    <body bgColor="White" >
    <A href="test8_2.htm"> 调用动态按钮文档</a>
    
    <form >
       <Input type="button"  Value="red" onClick="changecolor()">
    </form>
    </BODY>
    </HTML>
    
    输出结果见图1所示。
    
    
    
                    图1
    
    
    动态按钮程序。
     test8_2.htm
    <HTML>
    <HEAD>
    </HEAD>
    
    <p align="center">　</p>
    <div align="center"><center>
    
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%"><form name="form2" onSubmit="null">
         <p><input type="submit" name="banner" VALUE="Submit"
         onClick="alert('You have to put an /'action=[url]/
    ' on the form tag!!')"> <br>
    
    <script language="JavaScript">
    
    var id,pause=0,position=0;
    function banner() {
            // variables declaration
       	var i,k,msg="    这里输入你要的内容";// increase msg
            k=(30/msg.length)+1;
            for(i=0;i<=k;i++) msg+=" "+msg;
            // show it to the window
           document.form2.banner.value=msg.substring(position,
    position-30);
            // set new position
           if(position++==msg.length) position=0;
            // repeat at entered speed 
            id=setTimeout("banner()",60); }
    // end -->
    banner();
    </script></p>
        </form>
        </td>
      </tr>
    </table>
    </center></div>
    
    <p>　</p>
    
    <BODY>
    <A href="test8_1.htm"> 返回</a>
    
    </BODY>
    </HTML>
    
    输出结果见图2所示。

**第九讲 实现更复杂的交互**

**一、什么是框架**

框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTM L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。  
　　框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames\[\]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。

![Image 1][]

**图9-1 框架对象**

以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。

通过\[Framset \]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而 cols这项参数是告诉浏览器您想将视窗分割成几 行。

可以用很多组的 <frameset...> tags 将视窗分割得更复杂。

可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。

可以用 <src> 告诉浏览器您要载入哪一个 HTML文件。

**二、如何访问框架**

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

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

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

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

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

**三、范例**

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

tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体；

test9-1.html为显示标题文档；  
test9\_2.html为第二框架文档其中需要注意的是:  
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；  
test7\_3.html为第三框架文档。

1.  **主调文档**
    
    主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。
    
    **Test9.htm**
    
        <HTML>
        <HEAD>
        </HEAD>
        <Frameset Rows="10%,90%">
           	<frame src="test9_1.htm"> 
                   <Frameset Cols="40%,60%">
          	     <frame src="test9_2.htm"> 
            	     <frame src="test9_3.htm">
                   </Frameset>
                </Frameset>
        </HTML>
2.  **第一个框架**
    
    主要作用是显示标题文档。
    
    ***Test9\_1.htm***
    
        <HTML>
        <HEAD>
        </HEAD>
        <H2>使用框架实现WEB交互</H2>
        </HTML>
        　
3.  **第二个框架**
    
    主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。
    
    **Test9\_2.htm**
    
        <HTML>
        <HEAD>
        </HEAD>
        <Body>
        <Form name="test9_1">
        请选择城市：<BR>
        <Select name="select1" Multiple>
        <Option>云南省
        <Option>四川省
        <Option>贵州省                                       
        <Option>山东省
        <Option>江苏省
        <Option>浙江省
        <Option>安徽省                                       
        <Option>河南省
        
        </select><BR>
        <HR>
        <Input Type="Submit" name="" value="提交">
        <Input Type="reset" name="" value="复位">
        </Form>
        <pre>
        <script language="JavaScript">
           document.test9_1.elements[0].options[0].text="昆明市";
           document.test9_1.elements[0].options[1].text="成都市";
         </script>
        </pre>
        </Body>
        </HTML>
        　
4.  **第三个框架**

主要作用是实现交互。

**Test9\_3.htm**

<HTML>
    <HEAD>
    </HEAD>
    <Body>
    <Form name="test9_2">
    请输入用户名：
    <Input Type="text" name="text1" Value="" Size=20><BR>
    <HR>
    请选择:
    <Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR>
    <Input Type="Checkbox" name="checkbox2" Value="bf">部分信息<BR>
    <Input Type="Checkbox" name="checkbox3" Value="sy">所有城市<br>
    <HR>
    <Input Type="Submit" name="" value="提交">
    <Input Type="reset" name="" value="复位">
    <BR>
    </Form>
    <script language="JavaScript">
       document.test9_2.elements[0].value="劳动和社会保障";
       document.test9_2.elements[1].checked=true;
       document.test9_2.elements[2].checked=true;
       document.test9_2.elements[3].checked=false;
    </script>
    </Body>

</HTML>

在浏览器中的结果见图9-2所示。

![Image 1][]

图 9-2 在浏览器中结果

本讲介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。

[Image 1]: