JavaScript技术讲座

keaide · 发表于 2006-7-26 23:07

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

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

Links Anchor Form Method Prop
链接对象锚对象窗体对象方法对象

图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 >

<input type=text onChange="document.my.elements[0].value=this.value;" >

</form>

<form NAME="my">

<input type=text onChange="document.forms[0].elements[0].value=this.value;">

</form>

</body>

</html>

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

　

keaide · 发表于 2006-7-26 23:08

２、文档对象中的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中。

keaide · 发表于 2006-7-26 23:08

三、范例

例1:下面我们通过一个例子来说明文档对象的综合应用。输出结果见图6-2所示。

Test6_2.htm

<html>

<head>

</HEAD>

<BOdy>

<Form Name="mytable">

请输入数据：

<Input Type="text" Name="text1" Value="">

</Form>

<A name="Link1" href="test31.htm">链接到第一个文本</a><br>

<A name="Link2" href="test32.htm">链接到第二个文本</a><br>

<A name="Link2" href="test33.htm">链接到第三个文本</a><br>

<A href="#Link1">第一锚点</a>

<A href="#Link2">第二锚点</a>

<A Href="#Link3">第三锚点</a>

<BR>

<Script Language="JavaScript">

document.write("文档有"+document.links.length+"个链接"+"<br>"

;

document.write("文档有"+document.anchors.length+"个锚点"+"<br>"

;

document.write("文档有"+document.forms.length+"个窗体"

;

</script>

</body>

</HTML>

keaide · 发表于 2006-7-26 23:09

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

test6_3.html

<HTML>

<HEAD>

<script Language="JavaScript">

<!--

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所示。

keaide · 发表于 2006-7-26 23:09

第七讲窗口及输入输出

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

一、窗口及输入输出

请看下面例子：

<HTML>

<Head>

<script languaga="JavaScript">

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

;

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

;

</script>

</Head>

</HTML>

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

keaide · 发表于 2006-7-26 23:10

图1

keaide · 发表于 2006-7-26 23:11

1、窗口对象

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

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

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

　在JavaScript脚本中可直接引用窗口对象。如：

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

可直接使用以下格式：

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

　

2、窗口对象的事件驱动

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

3、窗口对象的方法

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

　创建一个新窗口open()

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

　具有OK按钮的对话框

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

　具有OK和Cancel按钮的对话框

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

　具有输入信息的对话框

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

　

4、窗口对象中的属性

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

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

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

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

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

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

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

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

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

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

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

　

keaide · 发表于 2006-7-26 23:11

5、输出流及文档对象

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

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

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

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

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

表7-1

　

参数
设定值
含义

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()方法时，需要注意以下点。

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

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

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

　

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

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

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

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

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

（３）关闭文档流close()

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

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

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

　

keaide · 发表于 2006-7-26 23:11

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

　　在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()；

说明：

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

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

　

２)、 window.alert()输出

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

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<Script Language ="JavaScript">

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

;

</Script>

</BODY>

</HTML>

　

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

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

Test7_1.htm

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<Script Language="JavaScript">

<!-- Hide From Other Browsers

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

;

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

;

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

;

document.close();

// Stop Hiding from Other Browsers-->

</Script>

</BODY>

</HTML>

从上面程序可以看出：

　可通过write()和prompt()方法实现交互。

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

　

keaide · 发表于 2006-7-26 23:12

四、范例

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

test7_2.htm

<html>

<form name="myform">

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

<input name="clock" size="8" value="在线时间"></td>

</form>

<script language="JavaScript">

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>

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

JavaScript技术讲座

浏览过的版块