郝兴伟
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第 5章 客户端开发
目 录
5.7 浏览器内部对象
5.8 Web交互
5.9 综合举例
5.7 浏览器内部对象
JavaScript为我们提供了一些非常有用的常用内部对象和方法。
用户不需要用脚本来实现这些功能。
这正是 基于对象（ object based)编程的真正目的。
面向对象（ object oriented） OOP
5.7.1 navigator对象树
在 JavaScript中，有关浏览器的一些功能和信息是被封闭在一
系列的对象之中，这些对象被组织成树状结构，称为
Navigator对象树。
5.7.2 navigator对象
在 Navigator的对象树中,navigator对象处于最顶层，它和
window对象均在对象树顶层。主要的属性和方法有,
1,appName属性
存储表示浏览器名称的字符串。, Netscape”,或者
,Microsoft Internet Explorer”
2,appVersion属性
存储客户所用浏览器的版本号，一般形式为
VersionNumber+(PlatformName;+Version;+…)
VersionNumber为浏览器的版本号；正在运行的操作系统 平台
等
[例 5-6] 使用 navigator对象查看客户端浏览器特性
<html>
<head>
<script language="JavaScript">
function TrueFalse (flag)
{
return(flag? "是 ":"否 ");
}
</script>
</head>
<body>
<h2 align=center>您的浏览器特性 </h2>
浏览器名称,
<script language="JavaScript">
document.write(navigator.appName+"<br>");
</script>
（代码续）
浏览器版本,
<script language="JavaScript">
document.write(navigator.appVersion+"<br>");
</script>
支持 javascript,
<script language="JavaScript">
document.write(TrueFalse(navigator.javaEnabled())+"<br>");
</script>
</body>
</html>
（运行结果）
结果
5.7.3 window对象
window即客户的浏览器窗口,window对象用于描述窗口
的特征，它是 document,location和 history对象的父对象。
window对象是任何对象、属性和方法的假定父对象。也
就是说，用户可以在任一对象、属性和方法（不包括 window
对象本身）之前加上一个, window.”,作为它的所有者。
如果不加的话，浏览器仍假定其所有者是 window。
例如,
语句 alert("hello,world");
等价于,window.alert("hello,world);
1 Window对象类实例,window,self,parent和 top
严格地说 window,self,parent和 top不能算是 window对象的
属性，更合理的说法是它们是当前环境所涉及的 window对象
实例，或称它们是特殊的关键字。
--self和 window所代表的都是当前的窗口。
使用 self和 window属性的好处是增加程序可读性，因此
在比较复杂的程序中可以考虑使用它。
-- parent所指的是当前框架或窗口所在的父窗口，这一属性在
使用框架的网页中用途最广泛。
-- top是用以实现所有下级窗口的窗口，即主窗口，它和
parent有一些相似之处。
2 defaultStatus和 status属性
defaultStatus是显示在浏览器窗口状态栏上内容的默认
值,status是在浏览器窗口状态栏上内容的当前值。
在刚载入文档时 status和 defaultStatus都为空值。在网页
中我们所期望的一般是当鼠标在某个超链接或锚点上
经过时，显示一条提示信息，这样的用法可以写成,
<a href=URL onMouseOver="status='欢迎光临 '; return
true">
一般情况下,status属性与 onMouseOver同时使用。改
变 status属性直接影响状态栏的显示，如果与
onMouseOver同时使用，应使此事件处理程序返回 true。
当鼠标位于文档窗口内，并且不在任何的超链接和锚
点上时，显示 defaultStatus属性的值。
举例
<html>
<head>
</head>
<body>
<script language="JavaScript">
window.defaultStatus = "hello";
</script>
<a href="2.htm"
onMouseOver="status='欢迎光
临 '; return true">浏览器内嵌对
象 </a>
</body>
</html>
如果去掉 return true语句，
则达不到效果。
遇到的问题
刚才介绍了 <a>标记中使用,href属性和 onMouseover
事件属性。在实际应用时，可能遇到问题,
例如,
<a href=“web-ppt/cha1.rar”
onMouseOver=“status=?右单击，在快捷菜单中执行
另存为命令’ ; return true”>第一章 Web基础 </a>
上述事试图建立一个超连接，下载课件。可能遇到的
问题,
（ 1）课件所在的文件夹和课件文件名应该为英语字
母（在 Tomcat和 IIS中不同,IIS可以是中文）
（ 2）使用 onMouseOver事件属性导致不能下载文件
3 alert(),comfirm()和 prompt()方法
（ 1） alert(字符串 )，显示一个窗口
（ 2） confirm(字符串 )，是一个确认形式的对话框，
但它是有返回值的
（ 3） prompt(),上面的两个方法都无法从用户那里
得到比 Yes和 No更多的信息。而 prompt()包含两个参
数，其语法为,
prompt("message","initial input");
函数调用的返回值是一个字符串。例如,
msg=prompt("请输入您的电话号码？ ","1234567");
对话框内输入电话号码后按, 确定, 按钮, 那么 msg
这个变量内就保存了你的电话号码；相反, 如果按
,取消,, msg是 null。
举例
<html>
<head>
</head>
<body>
<script language ="JavaScript">
window.alert("welcome");
</Script>
</body>
</html>
上述代码在 Frontpage中模拟显示，没有问题，会弹出
一个警告窗口
但是，在 IE中打开上述网页文件时，不显示任何内容
4 打开和关闭窗口
（ 1） open()方法打开一个新窗口，它的语法是,
open("URL","WindowName","Window Features");
-- 参数,
第三个参数是可选的，它表示新窗口的外观，是一
个字符串，可以指定多个特性，每一个特性间用逗号
分隔。
-- 返回值,返回值是一个所创建窗口的引用，或是
一个指向这个窗口的指针。
（ 2） close()用来关闭一个窗口
newWin.close()
close(),则关闭当前窗口
使用 Dreamwever的行为面板
Window对象属性方法很多，可以使用 Dreamweaver的行为面
板。添加“打开浏览器窗口”行为
代码
Window对象属性方法很多，可以使用 Dreamweaver的行为面
板。添加“打开浏览器窗口”行为
[例 5-7] 窗口操作举例
定义三个按钮, 打开新窗口,,, 关闭新窗口, 和
,查看源码,,点击, 打开新窗口, 按钮，则打开一
个新窗口，点击, 查看源码, 窗口则显示当前 Web页
的 html源代码。假设窗口的特征是没有工具栏、菜单、
状态栏高 200宽 200个像素。
代码,
代码 -1
<html>
<head>
<script language="javascript">
var temp; // 全局变量
function newone(url)
{
newWin=open(url,"subWindow",
"width=200,height=200,toolbar=0,status=0,location=0,
menubar=0");
return newWin;
}
代码 -2
function closeone(xWin)
{
// 若窗口存在，并且没有被关闭
if (xWin != "" && ! xWin.closed)
xWin.close();
}
</script>
</head>
代码 -3
function moveWin()
{
myWin=window.open("","在线交流 ","");
myWin.moveTo(0,0);
myWin.resizeTo(screen.availWidth,screen.availHeight);
myWin.location='http://211.86.49.1/myBBS/firstFrame.htm”
}
代码 -4
<body>
<input type="button" value="打开新窗口 " name="B1"
onclick="javascript:temp=newone('bookIndex.htm')" >
<input type="button" value="关闭新窗口 " name="B2"
onclick="javascript:closeone(temp);" ><br>
<input type="button" value="显示源文件 " name="B3"
onclick="window.location='view-
source:'+window.location.href">
</body>
</html>
代码 -5
新窗口对应的 html文件 bookIndex.htm内容如下,
<html>
<head>
<title>book Index</title>
</head>
<body>
<p align=center>Index for The book</p>
<hr>
<input type="button" value="关闭窗口 " name="B1"
onclick="window.close()" >
</body>
</html>
5 focus()和 blur()方法
-- focus()使某个窗口获得焦点，获得焦点的体现就是
它出现在最前面。
-- blur()使某个窗口失去焦点，体现在它被发配到后
台。
[例 5-8]窗口焦点状态示例
<html>
<title>the operation of window</title>
<body>
<form>
<input type="button" value="新建窗口 "
onClick='newWin=open("","subWindow","height=200,w
idth=200")'><br>
<input type="button" value="窗口前台 "
onClick="newWin.focus()"><br>
<input type="button" value="隐藏窗口 "
onClick="newWin.blur()">
</form>
</body>
<html>
显示
上述网页文
件在浏览器
中显示如图,
6,window对象的 opener,frames和 scroll方法
-- opener是父窗口的名字，而这个窗口容纳着 open()打开当
前窗口时调用的那个文档。
-- frames为一个数组，数组的成员是在窗口内的框架
(frame)。
-- scroll(x,y)方法有两个参数 x,y,它使窗口卷滚到 x,y坐标
处。
7,setTimeout()和 clearTimeout()
对于 Date对象，可以显示当前时间，而无法根据时间改变
动态地进行显示。 JavaScript还提供了另外两个函数：
setTimeout()和 clearTimeout()。
-- setTimeout()译作, 超时,,
它的语法是,timeID=setTimeout("expession",time);
setTimeout()运行后，在 time时间过后，将对, expression”
求值一次，但并不是每过一个 time时间就求值一次，因此
要想周期地改变，则需要周期地使用这一方法。
-- clearTimeout()的参数只有一个，就是上面的 timeID,通
过传递此参数才可以确定要清除哪一个超时设置。
[例 5-9] 网页中时钟的实现（对比,P224,例 5-4）
<html>
<head>
<script language="javascript">
var timeID; var Running=false;
function StartTime()
{
running=true;
ChangeTime();
}
function ChangeTime()
{
var currentTime=new Date();
document.myClock.show.value=currentTime.toLocaleString();
timeID=setTimeout("ChangeTime()",1000); //递归调用
}
代码续
function StopTime()
{
if (Running)
clearTimeout(timeID);
Running=false;
}
</script>
</head>
<body onLoad="StartTime()" onUnload="StopTime()">
<form name="myClock">
<input type="text" name="show" value=" " size=20>
</form>
</body>
</html>
5.7.4 document对象
Document对象是最常用、最重要、最复杂的对象，通过
document对象的属性和方法，可以实现一切 HTML文件所完
成的功能。
1,document的数值成员属性
所谓数值属性，是指这个属性本身不是任何的对象和数组。
Document的属性很多，这些属性的大部分都和 HTML的标识
符相对应。例如，对于 <body>标签，可以设置为,
<body bgcolor=“WHITE” text=“BLUE” link=“RED”
vlink=“CYAN” alink=“BLACK”>, 在 <body>标识内，设置
了一些颜色值，另外，还由 <title>标识设定了标题。
对于这些设定，可以通过对应的 document对象属性的赋值来
实现。
Document对象属性 及描述
[例 5-10] 利用循环来改变背景色，产生闪烁效果。
<html>
<head>
<script language="javascript">
function ChangeColor()
{
for (i=0;i<16777216;i++)
document.bgColor=i;
}
</script>
</head>
注意：循环时间太长，可能导致其他按钮按下不反应
（代码续）
<body>
<form>
<input type="button" value="改变文档背景颜色 "
onClick="ChangeColor()">
<input TYPE="button" value="停止改变背景颜色 "
onClick="window.alert('按钮按下 ')">
</form>
</body>
</html>
（ 2） lastModified,location和 referrer属性
lastModified属性描述这个 HTML文件最后被修改的日期，他
和 cookie对象的使用关系紧密。 location属性还有一个名字是
URL,可以用这两个名字来引用同一属性，它反应了现在正
在浏览器中显示的 HTML文件 URL。 referrer属性是用来描述
当前文档的载入文档的 URL,即通过点击文档 A中的链接到
达文档 B,则在 B中的 referrer值是 A的 URL。
例如,document.write(document.lastModified)将显示网页的最
后修改日期。
图
例如,document.write(document.lastModified)将显示网页的最
后修改日期。
2,anchors数组
（ 1）定义猫点：在 html中，定义一个锚点（ anchor） 是用
<a name=“锚点名称” >文本 </a>
标识来定义的,
（ 2）使用猫点
<a href=“2.htm#猫点名字, >超连接文本 </a>
按照它们在 HTML文档中的定义顺序,anchors数组中记录了
这些锚点。 anchors数组中的每个元素都是一个锚点
anchors数组最简单的用法是采用框架分别开设两个窗口，一
个是浏览导航窗口，另一个是主浏览窗口。在浏览导航窗口
中根据锚点的数量设置按钮，一个按钮对应一个锚点，按某
个按钮则可以在浏览窗口中跳到特定的文字处。
[例 5-11] 锚点应用举例
（ 1）将屏幕分成左右两个帧 FrameA和 FrameB
（ 2） 给定要在 FrameB中要显示的网页文件，包含多个书签
（ 3）要求编写一个 Web文档，根据 FrameB中显示的页面，在
FrameA中建立对应的按钮，点击按钮,FrameB中的网页会跳
到对应的书签位置。
（ 代码 1）
<html>
<frameset cols="*,*">
<frame src="mainA.htm" name="FrameA">
<frame src="mainB.htm" name="FrameB">
</frameset>
</html>
帧的顺序决定了网页文件的装载和显示顺序，
如果在 mainA.htm中，是看不到 mainB.htm的，
因为 mainA显示以前,mainB.htm还没有读入
（ 代码 2） mainA.htm文档,
<html>
<script language="javascript">
function SearchAnchor(Index)
{ parent.FrameB.location.hash="part"+Index;}
</script>
<body>
<script language="javascript">
var Num=parent.FrameB.document.anchors.length;
for (var i=1;i<=Num;i++)
{ document.write("<input type=\'button\' value=\'第 ",i,"部分 ")
document.write("\' onClick=\'SearchAnchor(");
document.write(i); document.write(")\'>");
document.write("<br>"); }
</script>
</body>
</html>
可以使用
document.write(Num)显示
Num的值
（ 代码 3） mainB.htm文档,
<html>
<body>
<a name="part1"><b>第一部分 四大名著 </b></a>
<ul>
<li>红楼梦
<li>水浒传
<li>西游记
<li>三国演义
</ul>
<a name="part2"><b>第二部分 金庸小说 </b></a>
<ul>
<li>笑傲江湖
<li>射雕英雄传
<li>天龙八部
</ul>
mainB.htm文档（续）
<a name="part3"><b>第三部分 外国名著 </b></a>
<ul>
<li>鲁宾逊漂流记
<li>白鹿原
<li>穆斯木的葬礼
</ul>
</body>
</html>
结果与分析
按照课本的代
码，能显示上
述的页面吗？
需要改变框架
的定义顺序，
即 FrameA在
FrameB的后
面定义。这样
得到的页面和
左面的图左右
相反
3,images数组成员属性
images数组的每个元素都是 images对象。首先看 html中与
<img>标签相关的属性,
例如,
<img name="plane" src="plane.gif" hspace="20" vspace="20"
width="30" height="50" border="5" lowsrc="plane1.gif">
JavaScript中使用 image对象有两个愿望，一是希望可以根据某
天的日期和浏览者的特定信息来决定载入哪一张图片：二是希
望可以利用这个对象在网页中实现一些动画功能。这两种愿望
都是要使图片不再静态，呆滞，而可以变得动态、灵活。
Image对象成员属性
[例 5-12] 动画显示
<html>
<head>
<script language="javascript">
var ImageNum=1;
function Begin()
{
document.MyImage.src=ImageArray[ImageNum].src;
ImageNum++;
If (ImageNum>3)
ImageNum=1;
}
</script>
</head>
<body>
代码续
<body>
<img name="MyImage" src="tu.gif"
onLoad="setTimeout('Begin()',500)">
<script language="javascript">
var ImageArray=new Array();
for (i=1;i<=3;i++)
{
ImageArray[i]=new Image();
ImageArray[i].src="tu"+i+".gif"
}
</script>
</body>
<html>
功能分析
（ 1） 装载一幅图片,MyImage
（ 2） 在内存中 new三个 Image对象,src属性分别赋 tu1.gif
（ 3） onLoad事件设置了 500毫秒之后运行 Begin()函数，装入
下一幅图片后又引起 onLoad事件，因此 500毫秒后又运行
Begin()函数，如此循环就实现了一个最简单的动画。 显示
图片 tu1.gif,tu2.gif和 tu3.gif形成动画效果
4 links链接数组
链接数组是另一种常用的 document对象中的数组。链接数组
（ links） 作用就是提供 HTML中定义的链接给 JavaScript,使
它可以得到这些链接的信息并做些工作。
链接数组的每一个元素都是链接对象（ links）,或者是 area
对象。 Link对象用来存储 URL的信息。一个完整的 URL可以
分成几个组成部分，例如下面的 URL,
http://www.abc.xyz.cn:8080/javascript/index.html#start
其中,#start是 hash数，用以调用文档中的 anchor。
一个链接包括 URL的所有信息。上面的这些 link对象成员属
性将一个 URL分解，对于编程提供了相当大的方便。
[例 5-13] 改变 URL示例
<html>
<body>
<form>
<input type="button" value="Google"
onClick="document.links[0].href='http://www.google.com' ">
<input type="button" value="百度 "
onClick="document.links[0].href='http://www.baidu.com' ">
<input type="button" value="北大天网 "
onClick="document.links[0].href='http://www.pku.edu.cn' ">
</form>
<a href="javascript:alert('选择搜索引擎，然后单击下一步 ')">下
一步 </a>
</body>
</html>
结果与分析
6 write()和 writeln()函数
wriet()的函数的一般形式是,
document.write(string1,string2,...)
这个成员方法的参数可以是任意多个，但是至少是一个。
当参数不是字符串时，将会被自动转换为字符串。我们可
以这样使用,
var Num=4;
document.write("Num=",Num) ;
writeln()和 write()类似，只是在输出完括号中的内容后会自
动换行。
7 open(),close()和 clear()函数
（ 1） open()函数允许打开一个已经存在的文档用来写入文件，
当用 open()函数打开一个文档流后，就可以用 write()函数向这个
窗口内写入文档流。
（ 2） close()方法的作用是在写完了文档流时，关闭这个文档。
[例 5-15] 文档对象的创建
下面的程序先打开一个新窗口，使用新窗口 document对象的
open(),write()和 close()。 由于 open()函数的运行是一种创
建的过程，原来窗口中的文档将被清除，于是这个例子的效果
是在新窗口内引起刷新窗口中的文档，写入新内容，再刷新，
再写入。
代码
<html>
<body>
<script language="javascript">
AWin=window.open("","","width=200,height=200");
for (var j=0;j<20;j++)
{
AWin.document.open("text/html");
AWin.document.write("这是第 ",j,"个文档！ ");
AWin.document.close();
}
</script>
</body>
</html>
可以在 Frontpage中预览
5.7.5 event 对象
要提高网页的交互性，必须需要要了解 event对象。在 IE和
Netscape4.0以上版本的浏览器中都包含 event对象。它在事件
创立时产生，如：点击一个可点击的对象，移动鼠标，或获
得输入焦点等，此时,Event对象被创建然后调用事件处理函
数。
1,event对象的属性
在不同的浏览器中,event对象的属性不完全相同,event对象
在 IE和 Netscape浏览器中的属性见表 5-9
2.可能的事件
在浏览器中可能的事件主要有,
onDblClick,鼠标双击
onKeyDown,键被按下
onKeyPress,键被按下然后被释放
onKeyUp,键被释放
onMouseDown,鼠标被按下
onMouseMove,鼠标移动
onMouseUp,鼠标被释放
onResize,窗口被调整大小
3,事件处理方法
事件是由事件处理函数进行处理的。但是，对于两种不同
的浏览器，事件的处理途径不安全一样。在 IE中，采用
“事件气泡”的方式处理事件，例如,
<body onclick="f1()">
<p onclick="f2()">
<em onclick="f3()">
<strong onclick="f4()">Click on me</strong>
</em>
</p>
</body>
事件处理顺序
对于上述的 html代码，每个标记都接受鼠标单击事件，都创建
event对象。那么，这个事件如何处理呢？顺序是这样的，例
如：点击 strong标记内的文本，它接收到一个 onClick事件，执
行 f4()； 然后发送 onclick事件给 <em>标记，执行 f3()； 然后发
送到 <p>标记，执行 f2()； 然后直到窗口。这样每个元素分别
以自己的方式处理点击事件。
但是如果想停止事件上传，可以在事件处理函数中，添加取
消气泡的代码，方法是,
function fx ()
{
…, … ;
this.event.cancelBubble = true;
}
Netscape中事件的处理
对于 Netscape采用的是事件捕捉（ captureEvents） 和释放
（ releaseEvents） 的方式，有两个成员函数。例如，用 window
对象的来描述鼠标移动 MOUSEMOVE事件，写作,
window.onMouseMove =yourhandlerFunction;
要释放该事件，写作,
window.releaseEvents(Event.MOUSEMOVE);
检查浏览器
Dreamweaver中添加“检查浏览器”行为
代码
Dreamweaver中添加“检查浏览器”行为
5.7.6 history对象
一般把 history对象称做历史清单对象，可以把它看做这样一个
列表，它保存窗口或框架在某时间段内的 url,并且提供几个方
法使我们可以在这个列表中前后移动。
history对象属性和方法见表 5-10。
<input type='button' value="快速返回 " onClick="history.go(-5)">
5.7.7 location对象
location（ 位置）对象用来存储当前的 url信息。它储存了一个
完整的 url,并且可能通过对对象的赋值来改变当前的 url,因
此可以改变当前的网页。 location对象的属性和 link对象是完全
相同的，不再做详细地解释。
location对象的属性有,hash,host,hostname,href,pathname，
port,protocol等
5.8 Web交互
通过 JavaScript,可以完成 Web的信息交互，在客户端完成动
态的 Web效果。
主要的交互包括 window对象的输入与输出,form以及 frame。
5.8.1使用 form实现 Web页面的信息交互
表单对象（ form） 是人机交互的主要手段，是 Web页面的基本
元素,form对象最主要的功能就是能够直接访问 html文档中的
窗体，它封装了相关的 html代码,
<form
name=“表的名称”
target=“指定信息的提交窗口”
action="接收窗体程序对应的 url"
method=信息数据传送方式 (get | post)
enctype =“窗体编码方式”
[onsubmit =“JavaScript代码” ]
>
２, form对象的方法
form对象的方法只有一个，即 submit()方法，该方法主要功
能就是实现 form信息的提交。如提交 mytest表单，则使用下
列格式,
document.mytest.submit();
３,form对象的属性
form对象中的属性主要包括,
elements,
name,
action,
target,
encoding,
method等。
除 elements外，其它几个均反映了 <form>标记中相应属性的
状态，这通常是单个 form标识。而 elements是多个 form元素
值的数组，例,myForm.elements[0],myForm.elements[0]等。
４、访问 form对象
方法一：通过 form名称访问
在 form对象的属性中指定 form名，通过下列标识访问 form,如：
document.myForm()。
方法二：通过数组来访问 form
使用 form对象数组来访问 form对象。但需要注意一点，因 form
对象是由浏览器环境提供的，而浏览器环境所提供的数组下
标是由 0到 n。 所以可通过下列格式实现 form对象的访问,
document.forms[0],document.forms[1],document.forms[2]
等。,.,
注意,
在 JavaScript中要对 form引用的条件是：必须先在页面中用
<form>标记创建窗体，并将定义窗体部分放在引用之前。
5,form中的基本元素
form中的基本元素有,
文本框（ text） 按钮、单选按钮（ radio）,复选按钮
（ checkbox）,按钮（ button） 等组成。
在 JavaScript中要访问这些基本元素，必须通过对应特定的
form元素的数组下标或 form元素名来实现。每一个元素主要
是通过该元素的属性或方法来引用。其引用的基本格式为,
formName.elements[].propertyName|methadName
或者,
formName.elementName.propertyName|methadName
（ 1） text单行文本框
（ 1）属性,name,设定提交信息时的信息名称，对应于
html文档中的 name。
value,用以设定出现在窗口中对应 html文档中 value的信息。
defaultvalue,包括 text元素的默认值。
（ 2）方法,blur() 将当前焦点移到后台。 select() 加亮文字。
（ 3）事件,onFocus,当 text获得焦点时，产生该事件。
OnBlur,从元素失去焦点时，产生该事件。 Onselect,当文
字被加亮显示后，产生该事件。 onchange,当 text元素值改
变时，产生该事件。
可以通过 Dreamweaver的行为窗口，为控件添加事件行为
举例
<html>
<body>
<form name="myForm">
<input type="text" name="text1" value="xxx" >
</form>
<script Language = "JavaScript">
document.myForm.text1.value = "yyy";
document.myForm.text1.select();
</script>
</body>
</html>
（２） textarea多行多列文本输入
（ 1）属性,name设定提交信息时的信息名称，对应 html文档
textarea的 name。 value用以设定出现在窗口中对应 html文档中
value的信息。 default value为元素的默认值。
（ 2）方法,blur()将输入焦点失去,select()将文字加亮后。
（ 3）事件,onBlur当失去输入焦点后产生该事件。 onFocus:当
输入获得焦点后，产生该事件。 Onchange:当文字值改变时，产
生该事件。 Onselect:当文字加亮后，产生该事件
（３） select选择元素
功能：实施对滚动选择元素的控制。
（ 1）属性,name:设定提交信息时的信息名称，对应文档
select中的 name。
length:对应文档 select中的 length。
options组成多个选项的数组。
selectIndex指明一个选项。
selected,指明当前选项是否被选中。
index指明当前选项的位置。
defaultselected默认选项。
（ 2）事件,OnBlur,当 select选项失去焦点时，产生该事件。
OnFocas,当 select获得焦点时，产生该事件。 Onchange,选项
状态改变后，产生该事件。
（４） button按钮
（ 1）属性,
name,设定提交信息时的信息名称，对应文档中 button的 name。
value,用以设定出现在窗口中对应 html文档中 value的信息。
（ 2）方法,click(),该方法类似于一个按下的按钮。
（ 3）事件,onclick当单击 button按钮时，产生该事件。
（ 5） checkbox检查框
（ 1）属性,
name,设定提交信息时的信息名称。
Value,用以设定出现在窗口中对应 html文档中 value的信息。
Checked,该属性指明框的状态 true/false,
Defauitchecked,默认状态。
（ 2）方法,click(),该方法使得框的某一个项被选中。
（ 3）事件,onclick,当框的选被选中时，产生该事件。
（６） radio无线按钮
（ 1）属性,
name,设定提交信息时的信息名称，对应 HTML文档中的 radio
的 name相同。
Value,用以设定出现在窗口中对应 html文档中 value的信息，对
应 html文档中的 radio的 name。
Length,单选按钮中的按钮数目。
Defalechecked,默认按钮。
Checked,指明选中还是没有选中。
Index,选中的按钮的位置。
（ 2）方法,chick(),选定一个按钮。
（ 3）事件,onclick,单击按钮时，产生该事件。
（７） hidden隐藏
（ 1）属性,
name,设定提交信息时的信息名称，对应 html文档的 hidden中
的 name。
Value,用以设定出现在窗口中对应 html文档中 value的信息，对
应 html文档 hidden中的 value。
Defaleitvalue为默认值。
（８） password口令
（ 1）属性,
name,设定提交信息时的信息名称，对应 HTML文档中
password中的 name。
Value:用以设定出现在窗口中对应 HTML文档中 Value的信息，
对应 HTML文档中 password中的 Value。
defaultvalu:默认值
（ 2）方法,
select():加亮输入口令域。
blur():使这丢失 passward输入焦点。
focus():获得 password输入焦点。
（９） submit提交元素
功能：实施对一个具有提交功能按钮的控制。
属性,name,设定提交信息时的信息名称，对应 html文档中
submit。
Value,用以设定出现在窗口中对应 html文档中 Value的信息，对
应 html文档中 value。
方法 click()相当于按下 submit按钮。
事件,onclick(),当按下该按钮时，产生该事件。
[例 5-16]
下面我们演示通过点击一个按钮（ red） 来改变窗口颜色，点击
,调用动态按钮文档, 调用一个动态按钮文档。
代码
<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="other.htm">调用其它文档 </a>
<form >
<Input type="button" value="red" onClick="changecolor()">
</form>
</body>
</html>
5.8.2使用 frame实现更复杂的交互
框架可以将屏幕分割成不同的区域，每个区域有自己的 url,通
过 frames[]数组对象来实现不同框架的访问。
实际上框架对象本身也是一类窗口，它继承了窗口对象的所有
特征，并拥有所有的属性和方法。
举例 -一个包含三个框架的框架网页
<html>
<frameset rows="20%,80%">
<frame src="frameA.htm">
<frameset Cols="200,*">
<frame src="frameB.htm">
<frame src="frameC.htm">
</frameset>
</frameset>
</html>
框架中元素的访问
要实现框架中多 form的不同元素的访问，则必须使用 window对
象中的 frames属性。 frames属性同样也是一个数组，它在父框
架集中为每一个子框架设有一项。通过下标实现不同框架的访
问,
parent.frames[i].docuement.forms[j]
通过 parent.frames.length确定窗口中窗体的数目。除了使用数组
下标来访问 form外还可以使用框架名和 form名来实现各元素的
访问，形式如下,
parent.frameName.document.formName.elementName;
5.8.3 和 Table的交互
1,创建框架
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=gb2312">
</head>
<frameset cols="541,*">
<frame name="frameA" src="1.htm">
<frame name="frameB" src="2.htm">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。 </p>
</body>
</noframes>
</frameset>
</html>
2,制作输入页面 1.htm-1
<html>
<head>
<title>数据输入表单 </title>
<script>
var i=1;
function getRadioValue()
{
var val="";
var j=0;
for(j=0;j<document.all.inputForm.sex.length;j++)
if(document.all.inputForm.sex[j].checked)
val = document.all.inputForm.sex[j].value;
return val;
}
代码 1.htm-2
function fillTable()
{
parent.frameB.document.all.dataTable.rows(i).cells(0).innerHTML =
document.inputForm.name.value;
parent.frameB.document.all.dataTable.rows(i).cells(1).innerHTML
=getRadioValue();
parent.frameB.document.all.dataTable.rows(i).cells(2).innerHTML =
document.inputForm.age.value;
parent.frameB.document.all.dataTable.rows(i).cells(3).innerHTML =
document.inputForm.tel.value;
parent.frameB.document.all.dataTable.rows(i).cells(4).innerHTML =
document.inputForm.email.value;
}
代码 1.htm-3
function nextRow()
{
document.inputForm.name.value="";
document.inputForm.age.value="";
document.inputForm.tel.value="";
document.inputForm.email.value="";
document.inputForm.name.focus();
i++;
}
</script>
</head>
代码 1.htm-4
<body>
<p align="center">数据输入表单 </p>
<div align="center">
<center>
<form name="inputForm" method="POST" action="--WEBBOT-SELF-
-">
<table id="inputTable" border="1" cellpadding="0" width="200">
<tr>
<td width="27%" align="center">姓名 </td>
<td width="73%">
<p><input type="text" name="name" size="20"></p>
</td>
</tr>
代码 1.htm-5
<tr>
<td width="27%" align="center">性别 </td>
<td width="73%">
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女 </td>
</tr>
<tr>
<td width="27%" align="center">年龄 </td>
<td width="73%"><input type="text" name="age" size="20"></td>
</tr>
<tr>
<td width="27%" align="center">电话 </td>
<td width="73%"><input type="text" name="tel" size="20"></td>
</tr>
代码 1.htm-6
<tr>
<td width="27%" align="center">email</td>
<td width="73%"><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td width="100%" align="center" colspan="2">
<input type="button" value="确定 " name="B1" onclick="fillTable()">
<input type="button" value="下一个 " name="B2" onclick="nextRow()">
</td>
</tr>
</table>
</form>
</center>
</div>
</body>
</html>
3,制作右边的数据统计表格 2.htm
<html>
<head>
<title>数据统计表 </title>
</head>
<body>
<p align="center"><font size="5">数据统计表 </font></p>
<div align="center">
<center>
<table id="dataTable" border="1" width="400">
<tr>
<td width="20%" align="center">姓名 </td>
<td width="20%" align="center">性别 </td>
<td width="20%" align="center">年龄 </td>
<td width="20%" align="center">电话 </td>
<td width="20%" align="center">email</td>
</tr>
代码 2.htm-续 1
<tr>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
</tr>
代码 2.htm-续 2
,
,
,
</table>
</center>
</div>
</body>
</html>
4.执行
5.8.4 深入理解表单
对于表单，我们添加各种控件。每一个控件，都创建一个对象。
对于控件，除了默认的属性外，用户可以添加属性。例如
<body>
<p>表单验证 </p>
<form name="myForm" method="POST">
姓名,<input type="text" name="T1" size="20"
myType="myText">
</form>
<script>
document.write(myForm.T1.myValidate);
</script>
</body>
使用用户定义的属性
通过为 <input … >添加属性，可以便于程序处理中对控件类型的
区分，例如：增加一个 myType=,”属性，来标明控件的类型。
function validateForm(theForm)
{
var field = theForm.elements;// 將表單所有元素放入數組
for(var i = 0; i < field.length; i++)
{
var myType=field[i].myType;//控件元素用户自定义属性
switch(myType)
{ …,}
…
}
5.9 综合举例
1,一个 Web课件框架
2,一个文档批注系统
5.9.1一个 Web课件框架
1,建立 Web应用中的的一个页面 --初始框架
用 Frontpage工具，完成 myframes.htm框架网页的设计，代码
如下,
主调文档 myframes.htm内容,
<html>
<head>
<title>GSL网络课程 </title>
</head>
myframes.htm代码
<frameset rows="60,*,40" framespacing="0" border="0"
frameborder="0">
<frame name="top" scrolling="no" src="mybanner.htm">
<frameset cols="*,250">
<frame name="frameA" target="main" scrolling="auto"
src="myA.htm" >
<frame name="frameB" target="_self" scrolling="auto"
src="myB.htm" >
</frameset>
<frameset cols="*,250">
<frame name="frameC" scrolling="no" src="myC.htm">
<frame name="frameD" scrolling="auto"
src="myD.htm?chapter=ch01&pagenums=26&page=0" >
</frameset>
</frameset>
</html>
2,Top帧的设计
top帧的设计显示一幅图片或 flash动画，我们指定它的源文件是
mybanner.htm,这是最为简单的一个网页，只要设置一幅背景图
片就可以了。或者根据帧的尺寸大小插入一个 flash动画。一个简
单的 mybanner.htm文档内容如下,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
<title>banner</title>
</head>
<body background="../例子 /image/banner.jpg">
</body>
</html>
3,frameC帧的设计
在 frameC帧，我们主要用于设计系统的状态，它对应了一个
myC.htm网页，可能是显示目前的在线人数，这里先不考虑。
4,frameD帧的设计
frameD帧是我们的页面导航区，包括：目录、上一页、下一页、
练习题等超级链接，是相对复杂的一个网页。
功能：控制 frameA帧和 frameB帧的显示。是非常重要的
MyD.htm文档内容 -1
<html>
<head>
<meta content="text/html; charset=windows-1252" http-
equiv="Content-Type">
<script src="QueryString.js" ></script>
<script src="indexdatas.js" ></script>
MyD.htm文档内容 -2
<script language="JavaScript">
//(1) index
image1on = new Image();
image1on.src = "images/indexov.gif";
image1off = new Image();
image1off.src = "images/indexup.gif";
MyD.htm文档内容 -3
//(2) up button,there status:on,off,and gray
image2on = new Image();
image2on.src = "images/backov.gif";
image2off = new Image();
image2off.src = "images/backup.gif";
image2dim = new Image();
image2dim.src = "images/backdim.gif";
//(3) next button,there status:on,off,and gray
image3on = new Image();
image3on.src = "images/nextov.gif";
image3off = new Image();
image3off.src = "images/nextup.gif";
image3dim = new Image();
image3dim.src = "images/nextdim.gif";
MyD.htm文档内容 -4
//(4) exercise
image4on = new Image();
image4on.src = "images/exerciseov.gif";
image4off = new Image();
image4off.src = "images/exerciseup.gif";
MyD.htm文档内容 -5
function myButtonInit()
{
var mynum = parseInt(mypagenums,10);
document['image2'].src = image2dim.src;
if (mynum <= 1)
document['image3'].src = image3dim.src;
}
MyD.htm文档内容 -6
function showPic()
{
if (document.images && PageNums > 1)
for (var i=0; i < showPic.arguments.length; i+=2)
{
if (showPic.arguments[i] == 'image3' && CurrentPage ==
PageNums) return;
else
if (showPic.arguments[i] == 'image2'&&CurrentPage==1)
return;
else
document[showPic.arguments[i]].src=eval(showPic.arguments[i+
1]+".src");
}
}
MyD.htm文档内容 -7
function changePage(cha,thePage)
{
var pagecode;
switch (cha) {
case "ch01",
pagecode = PagesIDs01[thePage];
break;
case "ch02",
pagecode = PagesIDs02[thePage];
break;
… …
}
return pagecode;
}
MyD.htm文档内容 -8
function NextPage()
{
if (CurrentPage == PageNums-2) return;
if ((CurrentPage + 1) == PageNums-2)
document['image3'].src = image3dim.src;
CurrentPage++;
pagecode = changePage(mycha,CurrentPage);
NextPageURLa = mycha + "/" + pagecode +"a"+".htm";
NextPageURLb = mycha + "/" + pagecode +"b"+".htm";
eval('parent.frames.frameA.location.href=NextPageURLa');
eval('parent.frames.frameB.location.href=NextPageURLb' );
}
MyD.htm文档内容 -9
function PrevPage()
{
if (CurrentPage == 0) return;
if (CurrentPage == 1)
document['image2'].src = image2dim.src;
CurrentPage--;
pagecode = changePage(mycha,CurrentPage);
BackPageURLa = mycha + "/" + pagecode +"a"+".htm";
BackPageURLb = mycha + "/" + pagecode +"b"+".htm";
eval('parent.frames.frameA.location.href=BackPageURLa');
eval('parent.frames.frameB.location.href=BackPageURLb');
}
MyD.htm文档内容 -10
function openIndex()
{
if (popup == "" || popup.closed)
{
url = "index/indexframes.htm";
popup=window.open("","IndexWin",
"scrollbars=yes,width=550,height=600,
top=70,left=120,resizable=yes");
popup.location = url;
}
else popup.focus();
}
</script>
<base target="_self">
</head>
MyD.htm文档内容 -11
<body leftmargin="1" topmargin="1" bgcolor="#000000">
<script language=JavaScript>
var Request=new QueryString(); // 创建参数对象实例
mycha = Request["chapter"]; // 章编号
mypagenums = Request["pagenums"]; // 当前章页数
mypage = Request["page"]; // 当前页
var PageNums = parseInt(mypagenums,10);
var CurrentPage = parseInt(mypage,10);
var popup="";
</script>
在 Index页面，会刷新 myD.htm的显示，
传入不同的参数
MyD.htm文档内容 -11
<div align="center">
<center>
<table border="0" cellpadding="0" width="100%"
height="100%">
<tr>
<td align="center" width="100%">
<table bgcolor="#000000" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td>
<a href="javascript:openIndex()"
onMouseOver="showPic('image1','image1on')"
onMouseOut="showPic('image1','image1off')">
<img name="image1" src="images/indexup.gif" ></a>
</td>
MyD.htm文档内容 -12
<td><a href="PrevPage()"
onMouseOver="showPic('image2','image2on')"
onMouseOut="showPic('image2','image2off')">
<img name="image2" src="images/backdim.gif" ></a>
</td>
<td><a href="NextPage()"
onMouseOver="showPic('image3','image3on')"
onMouseOut="showPic('image3','image3off')">
<img name="image3" src="images/nextup.gif" ></a>
</td>
<td><a href="GoExercise()"
onMouseOver="showPic('image4','image4on')"
onMouseOut="showPic('image4','image4off')">
<img name="image4" src="images/exerciseup.gif" ></a>
</td>
MyD.htm文档内容 -13
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>
<script language=JavaScript>
myButtonInit();
</script>
</body>
</html>
QueryString.js
QueryString.js定义了一个参数类, 用于获得当前页面的参
数, 在本例子中, 传递到 myD.htm页面的有三个参数, 分别
是：, chapter”（ 章编号 ）,, pagenums”（ 当前章的页数 ）
和, page”（ 当前页 ） 。
代码
function QueryString()
{//构造参数对象并初始化
var name,value,i;
var str=location.href; //获得浏览器地址栏 URL串
var num=str.indexOf("?")
str=str.substr(num+1); //截取,?” 后面的参数串
var arrtmp=str.split("&"); //将各参数分离形成参数数组
for(i=0;i < arrtmp.length;i++)
{
num=arrtmp[i].indexOf("=");
if(num>0)
{
name=arrtmp[i].substring(0,num); //取得参数名称
value=arrtmp[i].substr(num+1); //取得参数值
this[name]=value; //定义对象属性并初始化
}
}
indexdatas.js
包含文件 indexdatas.js定义了整个 Web应用所有网页用到到
全局变量, 内容如下,
var PageNums01 = 26 // 第 1章的页数
var PagesIDs01 = new Array(26); // 存储每一页的 ID=p+节
+小节, 节和小节各占两位
PagesIDs01[0] = "p00";
PagesIDs01[1] = "p0100";
…
PagesIDs01[25] = "p0702";
5,目录索引页设计
在 frameD帧中, 有一个, index”按钮, 点击该按钮, 将打开
一个新的窗口, 保存了一门课程中的课程目录, 通过该目录,
学生可以进入任何一章, 任何一个小节 。 此时, 在 frameA和
frameB中显示该小节的内容 。
此时可以通过 frameD帧中的, back”和, next”按钮, 完成前
后翻页任务 。
目录索引页 indexframes.htm设计成一个框架网页, 如图 5-
12 所示 。
图
indexframes.htm框架网页，包含了上下两个帧，上面显示菜单
（ myindexmenu.htm）,下面是每一章的目录（没章一个文件
/chxx/pindex.htm）。
indexframes.htm代码
<html>
<head>
<meta content="text/html; charset=windows-1252" http-
equiv="Content-Type">
<script>
var activeindex = null;
function showLayer(layer) {
eval(activeindex+".hide()");
activeindex = layer;
eval(layer+".show()");
}
indexframes.htm代码
function hideLayer(layer) {
eval(layer+".hide()");
}
</script>
</head>
<frameset frameborder="0" border="0" framespacing="0"
rows="100,*">
<frame name="indexmenu_frame"
src="myindexmenu.htm" target="_self">
<frame name="indexcontent_frame"
src="pleaseselcha.htm" target="main">
</frameset>
</html>
6,每一章的目录页
在目录窗口帧选择了一级项目, 然后选择章节后, 在
indexcontent_frame帧显示, 每一章的目录, 目录文件名
为 pindex.htm。 该文件含有大量的超链接, 最终通过这些
超链接, 来刷新 frameA和 frameB中的内容 。
例如, 某一章的 pindex.htm页面如图 5-13所示 。
图
pindex.htm代码 -1
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<title>pindex01</title>
<script src="../indexdatas.js" ></script>
<script language="JavaScript">
pindex.htm代码 -2
function GoContentPage(selstr)
{
Chapter = selstr.substring(0,2);
Section = selstr.substring(2,4);
Subsection = selstr.substring(4,6);
str = "p"+selstr.substring(2,6);
CurrentPage = 0;
while (CurrentPage<PageNums01)
{
if (PagesIDs01[CurrentPage] == str)
break;
CurrentPage ++;
}
pindex.htm代码 -3
if (CurrentPage == PageNums01)
CurrentPage = 0;
NewPageURLa =
"../ch"+Chapter+"/"+PagesIDs01[CurrentPage]+"a"+".htm";
NewPageURLb =
"../ch"+Chapter+"/"+PagesIDs01[CurrentPage]+"b"+".htm";
if (window.parent.opener && !window.parent.opener.closed)
{
window.parent.opener.parent.frames[1].location.href =
NewPageURLa;
window.parent.opener.parent.frames[2].location.href =
NewPageURLb;
}
pindex.htm代码 -4
// 刷新 frameD帧的内容, 使得其中的数据和索引页的选择同步
newurl = "../myD.htm?chapter=ch01&pagenums=26&page="
+ CurrentPage;
window.parent.opener.parent.frames[4].location = newurl;
top.blur();
}
</script>
<!--
<base target="main">
//-->
</head>
pindex.htm代码 -5
// 刷新 frameD帧的内容, 使得其中的数据和索引页的选择
同步
newurl =
"../myD.htm?chapter=ch01&pagenums=26&page=" +
CurrentPage;
window.parent.opener.parent.frames[4].location =
newurl;
top.blur();
}
</script>
<!--
<base target="main">
//-->
</head>
pindex.htm代码 -6
<body>
<p><font size="5">第一章 计算机技术与信息社会 </font></p>
<div align="center">
<center>
<table border="0" width="100%">
<tr>
<td ><p style="line-height,150%">1.1</p></td>
<td width="95%" colspan="2">
<p style="line-height,150%">信息, 信息技术和信息社会 </p>
</td>
</tr>
pindex.htm代码 -7
<tr>
<td ><p style="line-height,150%"></p></td>
<td >
<p>
<a href = "#"
onClick="GoContentPage('010101');">1.1.1</a></p></td>
<td ><p style="line-height,150%">信息的基本概念 </p></td>
</tr>
<!—其它各个小节的代码完全类似, 略 ?
</table>
</center>
</div>
</body>
</html>
图
8,总结 -1
上述的代码很长，从中我们可以体会到,Web应用的客户端
编程还是非常复杂的，但是只要经过认真的积累，定会编写
出精彩的 Web应用。
总结 -2表单操作
步骤 1—建 立框架
<html>
<head>
<title>New Page 2</title>
</head>
<frameset cols="300,*">
<frame name="frameA" src="1.htm">
<frame name="frameB" src="2.htm">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。 </p>
</body>
</noframes>
</frameset>
</html>
步骤 2—1.htm(1)
<html>
<head>
<title>个人信息输入表单 </title>
<script src="myimage.js"> </script>
<script>
function getRadioValue()
{
var val="";
var j=0;
for(j=0;j<document.all.inputForm.sex.length;j++)
if(document.all.inputForm.sex[j].checked)
val = document.all.inputForm.sex[j].value;
return val;
}
1.htm(2)
function getCheckbox(obj)
{
if(obj.checked)
return obj.myValue; // myValue为用户自定义的属性
}
function getAllCheckbox(theForm)
{
// 获取一组 checkbox的输入，通过用户自定义的属性（本处为
myType="interest"） 对控件分组
var str="";
var field = theForm.elements;// 將表單中的所有元素放入數組
for(var i = 0; i < field.length; i++)
if (field[i].myType == "interest")
if(field[i].checked)
str +=field[i].myValue; // myValue为用户自定义的属性
return str;
}
1.htm(3)
function getCheckbox(obj)
{
if(obj.checked)
return obj.myValue; // myValue为用户自定义的属性
}
function getAllCheckbox(theForm)
{
// 获取一组 checkbox的输入，通过用户自定义的属性（本处为
myType="interest"） 对控件分组
var str="";
var field = theForm.elements;// 將表單中的所有元素放入數組
for(var i = 0; i < field.length; i++)
if (field[i].myType == "interest")
if(field[i].checked)
str +=field[i].myValue; // myValue为用户自定义的属性
return str;
}
1.htm(4)
function getSelect(obj) {
var s="";
if(obj!=null)
for(var i=0;i<obj.options.length;i++)
if(obj.options[i].selected)
return s+i;
}
1.htm(5)
function showImg(i)
{ switch(i){
case "0",
parent.frameB.document.all.cartonImg.src = imageBoy.src;
break;
case "1",
parent.frameB.document.all.cartonImg.src = imageGirl.src;
break;
case "2",
parent.frameB.document.all.cartonImg.src = imageMan.src;
break;
case "3",
parent.frameB.document.all.cartonImg.src = imageWoman.src;
break;
} }
1.htm(6)
function fillTable(){ parent.frameB.document.all.dataTable.rows(0).cells(1).inne
rHTML = document.inputForm.name.value;
parent.frameB.document.all.dataTable.rows(1).cells(1).inne
rHTML = getRadioValue();
var sel=getSelect(document.inputForm.carton);
showImg(sel);
parent.frameB.document.all.dataTable.rows(3).cells(1).inne
rHTML = document.inputForm.email.value;
var interestStr=getAllCheckbox(document.inputForm);
parent.frameB.document.all.dataTable.rows(4).cells(1).inne
rHTML = interestStr;
}
</script>
</head>
1.htm(7)
<body> <p align="center">个人信息输入表单 </p>
<form name="inputForm" >
<table id="inputTable">
<tr>
<td width="76" align="center">姓名 </td>
<td width="192">
<input type="text" name="name" myType="text">
</td>
</tr>
<tr>
<td width="76" align="center">性别 </td>
<td width="192">
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女 </td>
</tr>
1.htm(8)
<tr> <td width="76" align="center">卡通形象 </td>
<td width="192">
<select size="1" name="carton">
<option>男孩 </option>
<option>女孩 </option>
<option>男人 </option>
<option>女人 </option>
</select></td>
</tr>
<tr>
<td width="76" align="center" myType="email">email</td>
<td width="192"><input type="text" name="email"></td>
</tr>
1.htm(9)
<tr> <td width="76" align="center">爱好 </td>
<td width="192">
<input type="checkbox" name="C1" value="ON" myType =
"interest" myValue="运动 ">运动
<input type="checkbox" name="C2" value="ON" myType =
"interest" myValue="唱歌 ">唱歌
<input type="checkbox" name="C3" value="ON" myType =
"interest" myValue="跳舞 ">跳舞 </td>
</tr>
<tr>
<td width="244" align="center" colspan="2">
<input type="button" value="确定 " name="B1"
onclick="fillTable()">
</td>
</tr> </table> </form>
1.htm(10)
<tr> <td width="76" align="center">爱好 </td>
<td width="192">
<input type="checkbox" name="C1" value="ON" myType =
"interest" myValue="运动 ">运动
<input type="checkbox" name="C2" value="ON" myType =
"interest" myValue="唱歌 ">唱歌
<input type="checkbox" name="C3" value="ON" myType =
"interest" myValue="跳舞 ">跳舞 </td>
</tr>
<tr>
<td width="244" align="center" colspan="2">
<input type="button" value="确定 " name="B1"
onclick="fillTable()">
</td>
</tr> </table> </form> </body> </html>
步骤 3--2.htm
<html>
<head>
<title>个人信息 </title>
<script language="JavaScript" src="myimage.js">
</script>
</head>
2.htm续 1
<body>
<p align="center">个人信息 </font></p>
<div align="center">
<center>
<table id="dataTable" width="300" height="151">
<tr>
<td width="70" align="right" height="16">姓名 </td>
<td width="319" height="16"></td>
</tr>
<tr>
<td width="70" align="right" height="16">性别 </td>
<td width="319" height="16"></td>
</tr>
2.htm续 2
<tr> <td width="70" align="right" height="67">照片 </td>
</center>
<td width="319" height="67" valign="middle"
align="center">
<img border="0" name="cartonImg" src="girl.gif"
align="left" width="42" height="44">
</td>
</tr>
<center>
<tr>
<td width="70" align="right" height="16">email</td>
<td width="319" height="16"></td>
</tr>
2.htm续 3
<tr> <td width="70" align="right" height="16">兴趣爱好 </td>
<td width="319" height="16"></td>
</tr>
</table>
</center>
</div>
<script>
//alert("ppppp");
//document.all.cartonImg.src = imageBoy.src;
</script>
</body>
</html>
步骤 4—myimage.js文件
注意,
全局变量，不属于一个具体的 document,document.imageBoy错误
图
5.9.2 一个文本文档批注系统
对于写在纸面上的东西, 我们很容易再对内容进行修改或添
加说明 。 如果是电子文档, 如何完成上述的功能呢？ 如果是
带有格式的文档, 如 Word文档, 可以用不同的颜色, 插入
,批注, 等方式对文档进行说明 。
对于文本文档，由于没有格式，因此无法用类似 Word的方法
来实现对文档的说明。因此，可以利用 html和 Javascript技术，
开发一个文本文档的批注系统。
1．登录界面设计
代码 -1
对应 html文档 mypostil.htm内容如下,
<html>
<head>
<title>postil</title>
<link href="css/site.css" rel="stylesheet" type="text/css">
<script language=javascript
src="script/myglobal.js"></script>
<script language=javascript>
代码 -2
function login()
{
var name = document.all.userName.value;
if( isEmpty( name ) )
{
alert(,用户名不能为空 ！, );
document.all.userName.focus();
return;
}
var r = document.all.role.value;
if( r == "teacher" )
window.open( "fileload.htm","_self" );
}
</script>
</head>
代码 -3
<body onload=javascript:document.all.userName.focus();
bgcolor=menu>
<div align="center">
<center>
<table border="0" cellpadding="0" width="100%"
height="100%">
<tr>
<td width="100%">
<table border=2 cellspacing=0 cellpadding=0
width=300 align=center>
<tr height=50>
<td align=center style="font-size:20;font-
weight:bold;color:#000075">
文本文档批注系统 </td>
</tr>
代码 -4
<tr>
<td style="font-size:16">用户名 <input type=text
name=userName></td>
</tr>
<tr>
<td style="font-size:16">角 色
<select name=role>
<option value=teacher>教师 </option>
<option value=student>学生 </option>
</select>
</td>
</tr>
代码 -5
<tr>
<td align=center><input type=button value=登录
onclick=login()>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
包含文件
在上述的文档中, 引用了一个,css文件 site.css,它定义了应用中
的样式 。 同时, 还用到了一个包含文件 myglobal.js,定一各个
html文档用到的公用函数和全局变量 。
（ 2） 全局包含文件 myglobal.js内容
function isEmpty( value )
{
var temp = value;
while (temp.indexOf( " ",0 ) != -1 )
temp = temp.replace( " ","" );
if (temp == "" ) return true;
else return false;
}
2．选择被批注文件并批注界面
登录后, 如果是教师角色, 则在当前窗口打开一个 fileload.htm
文档, 它是选择被批注文件, 进行批注的主界面 。 界面设计如图
5-16 所示 。
fileload.htm文档 -1
<html>
<head>
<title>file process</title>
<link href="css/site.css" type="text/css" rel="stylesheet">
<script language="javascript" src="script/myglobal.js"></script>
<script language=javascript>
var fileName;
var savePath;
var saveFolder;
var saveName;
var fileObj = new
ActiveXObject( "Scripting.FileSystemObject" );
var forReading = 1;
var forWriting = 2;
var forAppending = 8;
fileload.htm文档 -2
function readFile() {
fileName = document.all.homework.value;
if (fileName=="") {
alert("请选择一个文本文件 ");
return;
}
saveName = createHtmFileName( fileName );
saveFolder = saveName.substring( 0,
saveName.lastIndexOf( "." ) );
if( !fileObj.FolderExists( "c:\\" + saveFolder ) )
var folder = fileObj.CreateFolder( "c:\\" + saveFolder );
savePath = "c:\\" + saveFolder + "\\" ;
fileload.htm文档 -3
//显示选择的文本文件
var textFile = fileObj.OpenTextFile( fileName,forReading );
if ( textFile.AtEndOfStream ) {
document.all.t.rows(2).cells(0).innerHTML = "";
alert( "文件内容为空, 请重新读取 " );
return;
} else {
var lineNum = 0;
var str = "";
//读第一个字符, 如果曾加过编号, 该字符一定为 "<"
var hasNumed = textFile.read(1);
fileload.htm文档 -4
while( ! textFile.AtEndOfStream ) {
lineNum ++;
if (hasNumed != "<")
str = str + "<b>" + lineNum + ":</b>" ;
if (lineNum == 1) str += hasNumed;
while ( ! textFile.AtEndOfLine ) {
char = textFile.read(1);
if( char == " " ) {
//char = " ";
}
str += char;
}
str += "<br>";
if( ! textFile.AtEndOfStream ) textFile.skipLine();
}
fileload.htm文档 -5
document.all.t.rows(2).cells(0).innerHTML = str;
}
textFile.close();
//显示下面隐藏的表格 （ 带有批语的文本框 ）
document.all.t1.style.visibility = "visible";
document.all.annotation.focus();
}
fileload.htm文档 -6
function createHtmFileName( fileName ) {
var str = fileName;
var name = fileName.substring( str.lastIndexOf( "\\" ) + 1 );
var newFileName = name.substring( 0,
name.lastIndexOf( "." ) ) + ".htm";
return newFileName;
}
fileload.htm文档 -7
function updateFile( strSelected ) {
var textFile = fileObj.OpenTextFile( fileName,forWriting );
var fileCon = document.all.t.rows(2).cells(0).innerHTML;
//类似代码 <a href=#
// onclick="desOpen('strSelected','A_1')"
name='A_1'>strSelected </a>
var strWithLink = "<a href=# onclick=\"desOpen('"
+ strSelected + "','" + getName( fileCon,"A" ) + "')\" name='"
+ getName( fileCon,"A" ) + "'>"
+ strSelected + "</a>";
//add link to string selected
fileCon = fileCon.replace( strSelected,strWithLink );
textFile.write( fileCon );
textFile.close();
}
fileload.htm文档 -8
function contProc() {
var str = document.selection.createRange().text;
if( isEmpty( str ) ) return false;
var para = new Array();
para[0] = str; //text selected
para[1] = ""; //link's name
para[2] = ""; //file contents with descriptions
var sfe = "dialogWidth:30;dialogHeight:25" ;
var val = window.showModalDialog( "desCreator.htm",para,
sfe );
var description = val[0];
if( description != null && !isEmpty( description ) )
createHtmlFile( str,description );
return false;
}
fileload.htm文档 -9
function createHtmlFile( strSelected,description ) {
//read contents from new.htm previous so that can be
used in description writing
var desFile;
var fileCon;
if ( fileObj.FileExists( savePath + saveName ) ) {
desFile = fileObj.OpenTextFile( savePath +
saveName,forReading );
if ( desFile.AtEndOfStream )
fileCon = document.all.t.rows(2).cells(0).innerText;
else fileCon = desFile.readAll();
desFile.close();
} else fileCon =
document.all.t.rows(2).cells(0).innerHTML;
fileload.htm文档 -10
//write contents to new,htm
var obName = getName( fileCon,"div" );//id of div with
description
var strWithDescription = "<a href=# name='A_" +
obName.substring(2) + "' "
+ "onmouseover=showDes(1,'" + obName +
"') "
+ "onmouseout=showDes(0,'" + obName +
"')>"
+ strSelected
+ "</a>";
if( !isEmpty( description ) )
fileCon = fileCon.replace( strSelected,strWithDescription );
var newFile = fileObj.CreateTextFile( savePath + saveName );
newFile.write( fileCon );
fileload.htm文档 -11
var stylepro = "'visibility:hidden;position:absolute;
left:'+ window.event.clientX+';top:'+window.event.clientY";
var desStr = "<table bgcolor=#00ccff>"
+ "<tr><td>" + description + "</td></tr>" +
"</table>";
var scriptStr = "<script language=javascript>"
+"function showDes(bz,ob){"
+"v=\"visible\"\;"
+"if(bz==0) v=\"hidden\"\;"
+"document.all(ob).style.visibility=v;"
+"}"
+"</"+"script>"
scriptStr += "<link href=\"css/site.css\" rel=\"stylesheet\"
type=\"text/css\">";
fileload.htm文档 -12
newFile.write( "<div id=" + obName + " style=" + stylepro
+ ">" + desStr + "</div>" );
if ( fileCon.indexOf( scriptStr,0 ) == -1 )
newFile.write( scriptStr );
newFile.close();
//change current display
//by add link to text descripted,so that description can
be modified
updateFile( strSelected ); //read content to cells again
so that link can be displayed
readFile();
}
fileload.htm文档 -13
function getName( fileCon,ob ) { //create div's id automatically
var id;
var temp = fileCon;
var obStr = "<" + ob;
var firstChar = ob.substring( 0,1 );
var count = 0;
while ( temp.indexOf( obStr,0 ) != -1 ) {
count++;
temp = temp.substring( temp.indexOf( obStr,0 ) +
1 );
}
count++;
id = firstChar + "_" + count;
return id;
}
fileload.htm文档 -14
function desOpen( strSelected,linkName ) {
var para = new Array();
para[0] = strSelected; //text selected
para[1] = linkName; //link's name
para[2] = fileObj.OpenTextFile( savePath + saveName,
forReading ).readAll();
var val =
window.showModalDialog("desCreator.htm",para,
"dialogWidth:30;dialogHeight:25");
if ( val[0] == "del" ) deleteDes( val );
else modifyDes( strSelected,val );
}
fileload.htm文档 -15
function modifyDes( strSelected,val ) {
var tempFlie;
tempFile = fileObj.OpenTextFile( savePath +
saveName,forWriting );
tempFile.write( val[2] );
tempFile.close();
}
fileload.htm文档 -16
function deleteDes( val ) { //delete link from source file
var linkName = val[1];
var linkText = document.all(linkName).innerText;
var linkStr = document.all(linkName).outerHTML;
var str1 = fileObj.OpenTextFile( fileName,
forReading ).readAll();
if( str1.indexOf( linkStr,0 ) == -1 )
linkStr = "<a" + linkStr.substring( 2,linkStr.length -2 ) +
"a>";
str1 = str1.replace( linkStr,linkText );
var newFile = fileObj.OpenTextFile( fileName,
forWriting );
newFile.write( str1 );
newFile.close();
readFile();
fileload.htm文档 -17
//delete link and div from description file
var str2 = fileObj.OpenTextFile( savePath +
saveName,forReading).readAll();
var linkWithDesStr = "<a href=# name='A_" +
linkName.substring(2)
+ "'onmouseover=showDes(1,'d_" + linkName.substring(2)
+ "') onmouseout=showDes(0,'d_" + linkName.substring(2) +
"')>";
var tempStr =
str2.substring( str2.indexOf( linkWithDesStr,0 ) );
var linkText= tempStr.substring( tempStr.indexOf( ">",0 ) + 1,
tempStr.indexOf( "</a>",0 ) );
linkWithDesStr = linkWithDesStr + linkText + "</a>";
str2 = str2.replace( linkWithDesStr,linkText );
fileload.htm文档 -18
var divStr = "<div id=d_" + linkName.substring(2)
+ "style='visibility:hidden;position:absolute;
left:'+window.event.clientX+';top:'+window.event.clientY>"
+ "<table bgcolor=#00ccff><tr><td>" ;
var tStr = str2.substring( str2.indexOf( divStr,0 ) );
var divText=tStr.substring( tStr.indexOf( "<td>",
0 )+4,tStr.indexOf("</td>",0 ));
divStr = divStr + divText + "</td></tr></table></div>";
str2 = str2.replace( divStr,"" );
//write to source file again
//write to description file again
var newFile1 = fileObj.OpenTextFile( savePath +
saveName,forWriting );
newFile1.write( str2 );
newFile1.close();
}
fileload.htm文档 -19
function saveAnnotation() {
var desFile;
var tempFile;
var annStr = document.all.annotation.value;
if( !fileObj.FileExists( savePath + saveName ) ) {
if( isEmpty( annStr ) ) {
alert( "批语内容不能为空 " );
document.all.annotation.focus();
return;
}
tempFile = fileObj.CreateTextFile( savePath +
saveName );
tempFile.write( document.all.t.rows(2).cells(0).innerHTML );
tempFile.write( "<hr> 批语,< br> " +
annStr + "<br>" );
//alert( "保存成功 ！ " );
fileload.htm文档 20
var str = fileObj.OpenTextFile( savePath + saveName,
forReading ).readAll();
var annStr1 = "";
// 尚无批语
if( str.indexOf( "批语 ",0 ) == -1 ) {
if ( isEmpty( annStr ) ) {
alert( "批语内容不能为空 " );
document.all.annotation.focus();
return;
}
desFile = fileObj.OpenTextFile( savePath + saveName,
forAppending );
desFile.write( "<hr>批语,<br> " + annStr
+ "<br>" );
} else {
fileload.htm文档 21
if ( isEmpty( annStr ) ) {
var ok = confirm( "删除原有批语吗？ " );
if( ! ok ) {
document.all.annotation.focus();
return;
}
}
desFile = fileObj.OpenTextFile( savePath +
saveName,forWriting );
annStr1 = str.substring( str.indexOf( "批语 ",0 ) + 7,
str.indexOf( "<br>",str.indexOf( "批语 ",0 ) + 8 ) );
str = str.replace( annStr1," " + annStr );
desFile.write( str );
}
desFile.close();
}
</script>
fileload.htm文档 22
<body bgcolor=menu>
<table id=t border=1 width="600" bordercolorlight=#333333
bordercolordark=#ffffff>
<tr height=30>
<td align=center style="font-size,18; font-weight,bold" >文本
文档批注系统 </td>
</tr>
<tr height=20>
<td>
选择文件 < input type=file name=homework
onClick="readFile()" title="选择文档 ">
</td>
</tr>
<tr>
<td oncontextmenu="javascrpt:return
contProc();"></td>
</tr>
fileload.htm文档 23
<tr> <td>
<table id=t1 border=0 style="textalign,center; visibility,
hidden" width="587">
<tr>
<td align=center width="15">批 <br><br>语 </td>
<td width="558">
<textarea name=annotation rows=7
cols="90"></textarea><br>
<input type=button value=保存批语
onclick=saveAnnotation()>
</td>
</tr> </table>
</td>
</tr>
</table>
</body>
图
3,批注、批注修改、删除批注功能设计
在图所示的界面上，有户可以选择一段文本，然后右单击，来
添加批注了。当用户右单击时候，将打开一个新的窗口文档
desCreator.htm。 这是进行批注的添加，修改和删除的页面。
例如：对于上面打开的文件，选择第 9行的 return Str1语句，右
单击，则打开批注页面，如图 5-18所示。
图
图
desCreator.htm文档 -1
<html>
<head>
<title>注释的添加, 修改和删除 </title>
<!-- <link href="css/site.css" type="text/css"
rel="stylesheet"> -->
<script language="javascript"
src="script/myglobal.js"></script>
<script language="javascript">
var recValue = window.dialogArguments;//received from
previous
desCreator.htm文档 -2
function dispStr() {
var strSelected = recValue[0];
var nameStr = recValue[1];
document.all.t.rows(1).cells(0).innerText =
strSelected;
// 获取注释的内容
document.all.des.value = getDescription( nameStr,
recValue[2] );
}
desCreator.htm文档 -3
function getDescription( nameStr,desFileCon ) {
var divName = "d_" + nameStr.substring( 2 );
var divStr =
desFileCon.substring( desFileCon.indexOf( "id=" +
divName ) );
var description =
divStr.substring( divStr.indexOf( "<td>" ) + 4,
divStr.indexOf( "</td>" ) );
return description;
}
desCreator.htm文档 -4
function saveDes() {
var retValue = new Array();//return to previous
retValue[0] = document.all.des.value;
retValue[1] = recValue[1];
var fileCon = recValue[2];
retValue[2] =
fileCon.replace( getDescription( recValue[1],recValue[2] ),
retValue[0] );
if ( isEmpty( document.all.des.value ) )
if( recValue[1] == "" ) {
alert( "注释内容不能为空 ！ " );
document.all.des.value = "";
document.all.des.focus();
return;
}
desCreator.htm文档 -5
else {
retValue[0] = "del";
confirmOp( " 确 定 删 除 此 注 释 吗？ ",
retValue );
return;
}
confirmOp( "确定保存吗？ ",retValue );
}
desCreator.htm文档 -6
function confirmOp( prompt,value ) {
var ok = confirm( prompt );
if( ok ) {
window.returnValue = value;
window.close();
}
else {
document.all.des.focus();
return;
}
}
desCreator.htm文档 -7
function winClose() {
var retValue = new Array();
retValue[0] = "";
retValue[1] = recValue[1];
retValue[2] = recValue[2];
confirmOp( "直接关闭将不会保存填写的注释, 确认
要关闭吗？ ",retValue );
}
desCreator.htm文档 -8
function doByKey() {
if ( window.event.keyCode == 113 ) { //F2
saveDes();
}
if ( window.event.keyCode == 27 ) { //Esc
winClose();
}
}
</script>
</head>
desCreator.htm文档 -9
<body bgcolor=menu topmargin onload=dispStr()
onkeydown=doByKey()>
<div align="center">
<center>
<table border="0" cellpadding="0" width="100%"
height="100%">
<tr>
<td width="100%">
<table id=t border=1 width=400
bordercolorlight=#333333 bordercolordark=#ffffff
align=center >
<tr>
<td height=50 align=center style="font-size,18;
font-weight,bold">批注输入, 修改与删除 </td>
</tr>
desCreator.htm文档 -10
<tr>
<td>
请在下面书写批注,<br>
<textarea id=des cols=61 rows=10>
</textarea><br><br>
<input type=button value=保存 (F2)
onclick=saveDes()>
<input type=button value=关闭 (Esc)
onclick=winClose()>
</td>
</tr> </table>
</td> </tr>
</table>
</center>
</div>
</body>
4,批注生成的 html文档
文本文档批注系统，允许用户添加、修改和删除批注，同
时还允许用户添加一个总体的评价意见或说明。系统在原
先文档的基础上生成一个同名的 html文档，所有的批注都
将以 <div>块的形式保存在系统创建的 html文档中，此时，
用户可以用浏览器打开这个 html文档。带有批注的地方件
显示超链接，鼠标指向该超链接时，显示所做的批注内容，
如图 5-所示。
图
5,小节
文本文档批注系统，比较全面的解释了 Javascript中关于文件
的处理问题，用到了 windows对象的一个新方法
window.showModalDialog,它和第一个 E-learning系统相比对
于参数的传递法用了不同的方法，使得在 Web编程中可以方
便的实现传统程序设计中对话框的功能。
谢 谢 大 家
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第 5章 客户端开发
目 录
5.7 浏览器内部对象
5.8 Web交互
5.9 综合举例
5.7 浏览器内部对象
JavaScript为我们提供了一些非常有用的常用内部对象和方法。
用户不需要用脚本来实现这些功能。
这正是 基于对象（ object based)编程的真正目的。
面向对象（ object oriented） OOP
5.7.1 navigator对象树
在 JavaScript中，有关浏览器的一些功能和信息是被封闭在一
系列的对象之中，这些对象被组织成树状结构，称为
Navigator对象树。
5.7.2 navigator对象
在 Navigator的对象树中,navigator对象处于最顶层，它和
window对象均在对象树顶层。主要的属性和方法有,
1,appName属性
存储表示浏览器名称的字符串。, Netscape”,或者
,Microsoft Internet Explorer”
2,appVersion属性
存储客户所用浏览器的版本号，一般形式为
VersionNumber+(PlatformName;+Version;+…)
VersionNumber为浏览器的版本号；正在运行的操作系统 平台
等
[例 5-6] 使用 navigator对象查看客户端浏览器特性
<html>
<head>
<script language="JavaScript">
function TrueFalse (flag)
{
return(flag? "是 ":"否 ");
}
</script>
</head>
<body>
<h2 align=center>您的浏览器特性 </h2>
浏览器名称,
<script language="JavaScript">
document.write(navigator.appName+"<br>");
</script>
（代码续）
浏览器版本,
<script language="JavaScript">
document.write(navigator.appVersion+"<br>");
</script>
支持 javascript,
<script language="JavaScript">
document.write(TrueFalse(navigator.javaEnabled())+"<br>");
</script>
</body>
</html>
（运行结果）
结果
5.7.3 window对象
window即客户的浏览器窗口,window对象用于描述窗口
的特征，它是 document,location和 history对象的父对象。
window对象是任何对象、属性和方法的假定父对象。也
就是说，用户可以在任一对象、属性和方法（不包括 window
对象本身）之前加上一个, window.”,作为它的所有者。
如果不加的话，浏览器仍假定其所有者是 window。
例如,
语句 alert("hello,world");
等价于,window.alert("hello,world);
1 Window对象类实例,window,self,parent和 top
严格地说 window,self,parent和 top不能算是 window对象的
属性，更合理的说法是它们是当前环境所涉及的 window对象
实例，或称它们是特殊的关键字。
--self和 window所代表的都是当前的窗口。
使用 self和 window属性的好处是增加程序可读性，因此
在比较复杂的程序中可以考虑使用它。
-- parent所指的是当前框架或窗口所在的父窗口，这一属性在
使用框架的网页中用途最广泛。
-- top是用以实现所有下级窗口的窗口，即主窗口，它和
parent有一些相似之处。
2 defaultStatus和 status属性
defaultStatus是显示在浏览器窗口状态栏上内容的默认
值,status是在浏览器窗口状态栏上内容的当前值。
在刚载入文档时 status和 defaultStatus都为空值。在网页
中我们所期望的一般是当鼠标在某个超链接或锚点上
经过时，显示一条提示信息，这样的用法可以写成,
<a href=URL onMouseOver="status='欢迎光临 '; return
true">
一般情况下,status属性与 onMouseOver同时使用。改
变 status属性直接影响状态栏的显示，如果与
onMouseOver同时使用，应使此事件处理程序返回 true。
当鼠标位于文档窗口内，并且不在任何的超链接和锚
点上时，显示 defaultStatus属性的值。
举例
<html>
<head>
</head>
<body>
<script language="JavaScript">
window.defaultStatus = "hello";
</script>
<a href="2.htm"
onMouseOver="status='欢迎光
临 '; return true">浏览器内嵌对
象 </a>
</body>
</html>
如果去掉 return true语句，
则达不到效果。
遇到的问题
刚才介绍了 <a>标记中使用,href属性和 onMouseover
事件属性。在实际应用时，可能遇到问题,
例如,
<a href=“web-ppt/cha1.rar”
onMouseOver=“status=?右单击，在快捷菜单中执行
另存为命令’ ; return true”>第一章 Web基础 </a>
上述事试图建立一个超连接，下载课件。可能遇到的
问题,
（ 1）课件所在的文件夹和课件文件名应该为英语字
母（在 Tomcat和 IIS中不同,IIS可以是中文）
（ 2）使用 onMouseOver事件属性导致不能下载文件
3 alert(),comfirm()和 prompt()方法
（ 1） alert(字符串 )，显示一个窗口
（ 2） confirm(字符串 )，是一个确认形式的对话框，
但它是有返回值的
（ 3） prompt(),上面的两个方法都无法从用户那里
得到比 Yes和 No更多的信息。而 prompt()包含两个参
数，其语法为,
prompt("message","initial input");
函数调用的返回值是一个字符串。例如,
msg=prompt("请输入您的电话号码？ ","1234567");
对话框内输入电话号码后按, 确定, 按钮, 那么 msg
这个变量内就保存了你的电话号码；相反, 如果按
,取消,, msg是 null。
举例
<html>
<head>
</head>
<body>
<script language ="JavaScript">
window.alert("welcome");
</Script>
</body>
</html>
上述代码在 Frontpage中模拟显示，没有问题，会弹出
一个警告窗口
但是，在 IE中打开上述网页文件时，不显示任何内容
4 打开和关闭窗口
（ 1） open()方法打开一个新窗口，它的语法是,
open("URL","WindowName","Window Features");
-- 参数,
第三个参数是可选的，它表示新窗口的外观，是一
个字符串，可以指定多个特性，每一个特性间用逗号
分隔。
-- 返回值,返回值是一个所创建窗口的引用，或是
一个指向这个窗口的指针。
（ 2） close()用来关闭一个窗口
newWin.close()
close(),则关闭当前窗口
使用 Dreamwever的行为面板
Window对象属性方法很多，可以使用 Dreamweaver的行为面
板。添加“打开浏览器窗口”行为
代码
Window对象属性方法很多，可以使用 Dreamweaver的行为面
板。添加“打开浏览器窗口”行为
[例 5-7] 窗口操作举例
定义三个按钮, 打开新窗口,,, 关闭新窗口, 和
,查看源码,,点击, 打开新窗口, 按钮，则打开一
个新窗口，点击, 查看源码, 窗口则显示当前 Web页
的 html源代码。假设窗口的特征是没有工具栏、菜单、
状态栏高 200宽 200个像素。
代码,
代码 -1
<html>
<head>
<script language="javascript">
var temp; // 全局变量
function newone(url)
{
newWin=open(url,"subWindow",
"width=200,height=200,toolbar=0,status=0,location=0,
menubar=0");
return newWin;
}
代码 -2
function closeone(xWin)
{
// 若窗口存在，并且没有被关闭
if (xWin != "" && ! xWin.closed)
xWin.close();
}
</script>
</head>
代码 -3
function moveWin()
{
myWin=window.open("","在线交流 ","");
myWin.moveTo(0,0);
myWin.resizeTo(screen.availWidth,screen.availHeight);
myWin.location='http://211.86.49.1/myBBS/firstFrame.htm”
}
代码 -4
<body>
<input type="button" value="打开新窗口 " name="B1"
onclick="javascript:temp=newone('bookIndex.htm')" >
<input type="button" value="关闭新窗口 " name="B2"
onclick="javascript:closeone(temp);" ><br>
<input type="button" value="显示源文件 " name="B3"
onclick="window.location='view-
source:'+window.location.href">
</body>
</html>
代码 -5
新窗口对应的 html文件 bookIndex.htm内容如下,
<html>
<head>
<title>book Index</title>
</head>
<body>
<p align=center>Index for The book</p>
<hr>
<input type="button" value="关闭窗口 " name="B1"
onclick="window.close()" >
</body>
</html>
5 focus()和 blur()方法
-- focus()使某个窗口获得焦点，获得焦点的体现就是
它出现在最前面。
-- blur()使某个窗口失去焦点，体现在它被发配到后
台。
[例 5-8]窗口焦点状态示例
<html>
<title>the operation of window</title>
<body>
<form>
<input type="button" value="新建窗口 "
onClick='newWin=open("","subWindow","height=200,w
idth=200")'><br>
<input type="button" value="窗口前台 "
onClick="newWin.focus()"><br>
<input type="button" value="隐藏窗口 "
onClick="newWin.blur()">
</form>
</body>
<html>
显示
上述网页文
件在浏览器
中显示如图,
6,window对象的 opener,frames和 scroll方法
-- opener是父窗口的名字，而这个窗口容纳着 open()打开当
前窗口时调用的那个文档。
-- frames为一个数组，数组的成员是在窗口内的框架
(frame)。
-- scroll(x,y)方法有两个参数 x,y,它使窗口卷滚到 x,y坐标
处。
7,setTimeout()和 clearTimeout()
对于 Date对象，可以显示当前时间，而无法根据时间改变
动态地进行显示。 JavaScript还提供了另外两个函数：
setTimeout()和 clearTimeout()。
-- setTimeout()译作, 超时,,
它的语法是,timeID=setTimeout("expession",time);
setTimeout()运行后，在 time时间过后，将对, expression”
求值一次，但并不是每过一个 time时间就求值一次，因此
要想周期地改变，则需要周期地使用这一方法。
-- clearTimeout()的参数只有一个，就是上面的 timeID,通
过传递此参数才可以确定要清除哪一个超时设置。
[例 5-9] 网页中时钟的实现（对比,P224,例 5-4）
<html>
<head>
<script language="javascript">
var timeID; var Running=false;
function StartTime()
{
running=true;
ChangeTime();
}
function ChangeTime()
{
var currentTime=new Date();
document.myClock.show.value=currentTime.toLocaleString();
timeID=setTimeout("ChangeTime()",1000); //递归调用
}
代码续
function StopTime()
{
if (Running)
clearTimeout(timeID);
Running=false;
}
</script>
</head>
<body onLoad="StartTime()" onUnload="StopTime()">
<form name="myClock">
<input type="text" name="show" value=" " size=20>
</form>
</body>
</html>
5.7.4 document对象
Document对象是最常用、最重要、最复杂的对象，通过
document对象的属性和方法，可以实现一切 HTML文件所完
成的功能。
1,document的数值成员属性
所谓数值属性，是指这个属性本身不是任何的对象和数组。
Document的属性很多，这些属性的大部分都和 HTML的标识
符相对应。例如，对于 <body>标签，可以设置为,
<body bgcolor=“WHITE” text=“BLUE” link=“RED”
vlink=“CYAN” alink=“BLACK”>, 在 <body>标识内，设置
了一些颜色值，另外，还由 <title>标识设定了标题。
对于这些设定，可以通过对应的 document对象属性的赋值来
实现。
Document对象属性 及描述
[例 5-10] 利用循环来改变背景色，产生闪烁效果。
<html>
<head>
<script language="javascript">
function ChangeColor()
{
for (i=0;i<16777216;i++)
document.bgColor=i;
}
</script>
</head>
注意：循环时间太长，可能导致其他按钮按下不反应
（代码续）
<body>
<form>
<input type="button" value="改变文档背景颜色 "
onClick="ChangeColor()">
<input TYPE="button" value="停止改变背景颜色 "
onClick="window.alert('按钮按下 ')">
</form>
</body>
</html>
（ 2） lastModified,location和 referrer属性
lastModified属性描述这个 HTML文件最后被修改的日期，他
和 cookie对象的使用关系紧密。 location属性还有一个名字是
URL,可以用这两个名字来引用同一属性，它反应了现在正
在浏览器中显示的 HTML文件 URL。 referrer属性是用来描述
当前文档的载入文档的 URL,即通过点击文档 A中的链接到
达文档 B,则在 B中的 referrer值是 A的 URL。
例如,document.write(document.lastModified)将显示网页的最
后修改日期。
图
例如,document.write(document.lastModified)将显示网页的最
后修改日期。
2,anchors数组
（ 1）定义猫点：在 html中，定义一个锚点（ anchor） 是用
<a name=“锚点名称” >文本 </a>
标识来定义的,
（ 2）使用猫点
<a href=“2.htm#猫点名字, >超连接文本 </a>
按照它们在 HTML文档中的定义顺序,anchors数组中记录了
这些锚点。 anchors数组中的每个元素都是一个锚点
anchors数组最简单的用法是采用框架分别开设两个窗口，一
个是浏览导航窗口，另一个是主浏览窗口。在浏览导航窗口
中根据锚点的数量设置按钮，一个按钮对应一个锚点，按某
个按钮则可以在浏览窗口中跳到特定的文字处。
[例 5-11] 锚点应用举例
（ 1）将屏幕分成左右两个帧 FrameA和 FrameB
（ 2） 给定要在 FrameB中要显示的网页文件，包含多个书签
（ 3）要求编写一个 Web文档，根据 FrameB中显示的页面，在
FrameA中建立对应的按钮，点击按钮,FrameB中的网页会跳
到对应的书签位置。
（ 代码 1）
<html>
<frameset cols="*,*">
<frame src="mainA.htm" name="FrameA">
<frame src="mainB.htm" name="FrameB">
</frameset>
</html>
帧的顺序决定了网页文件的装载和显示顺序，
如果在 mainA.htm中，是看不到 mainB.htm的，
因为 mainA显示以前,mainB.htm还没有读入
（ 代码 2） mainA.htm文档,
<html>
<script language="javascript">
function SearchAnchor(Index)
{ parent.FrameB.location.hash="part"+Index;}
</script>
<body>
<script language="javascript">
var Num=parent.FrameB.document.anchors.length;
for (var i=1;i<=Num;i++)
{ document.write("<input type=\'button\' value=\'第 ",i,"部分 ")
document.write("\' onClick=\'SearchAnchor(");
document.write(i); document.write(")\'>");
document.write("<br>"); }
</script>
</body>
</html>
可以使用
document.write(Num)显示
Num的值
（ 代码 3） mainB.htm文档,
<html>
<body>
<a name="part1"><b>第一部分 四大名著 </b></a>
<ul>
<li>红楼梦
<li>水浒传
<li>西游记
<li>三国演义
</ul>
<a name="part2"><b>第二部分 金庸小说 </b></a>
<ul>
<li>笑傲江湖
<li>射雕英雄传
<li>天龙八部
</ul>
mainB.htm文档（续）
<a name="part3"><b>第三部分 外国名著 </b></a>
<ul>
<li>鲁宾逊漂流记
<li>白鹿原
<li>穆斯木的葬礼
</ul>
</body>
</html>
结果与分析
按照课本的代
码，能显示上
述的页面吗？
需要改变框架
的定义顺序，
即 FrameA在
FrameB的后
面定义。这样
得到的页面和
左面的图左右
相反
3,images数组成员属性
images数组的每个元素都是 images对象。首先看 html中与
<img>标签相关的属性,
例如,
<img name="plane" src="plane.gif" hspace="20" vspace="20"
width="30" height="50" border="5" lowsrc="plane1.gif">
JavaScript中使用 image对象有两个愿望，一是希望可以根据某
天的日期和浏览者的特定信息来决定载入哪一张图片：二是希
望可以利用这个对象在网页中实现一些动画功能。这两种愿望
都是要使图片不再静态，呆滞，而可以变得动态、灵活。
Image对象成员属性
[例 5-12] 动画显示
<html>
<head>
<script language="javascript">
var ImageNum=1;
function Begin()
{
document.MyImage.src=ImageArray[ImageNum].src;
ImageNum++;
If (ImageNum>3)
ImageNum=1;
}
</script>
</head>
<body>
代码续
<body>
<img name="MyImage" src="tu.gif"
onLoad="setTimeout('Begin()',500)">
<script language="javascript">
var ImageArray=new Array();
for (i=1;i<=3;i++)
{
ImageArray[i]=new Image();
ImageArray[i].src="tu"+i+".gif"
}
</script>
</body>
<html>
功能分析
（ 1） 装载一幅图片,MyImage
（ 2） 在内存中 new三个 Image对象,src属性分别赋 tu1.gif
（ 3） onLoad事件设置了 500毫秒之后运行 Begin()函数，装入
下一幅图片后又引起 onLoad事件，因此 500毫秒后又运行
Begin()函数，如此循环就实现了一个最简单的动画。 显示
图片 tu1.gif,tu2.gif和 tu3.gif形成动画效果
4 links链接数组
链接数组是另一种常用的 document对象中的数组。链接数组
（ links） 作用就是提供 HTML中定义的链接给 JavaScript,使
它可以得到这些链接的信息并做些工作。
链接数组的每一个元素都是链接对象（ links）,或者是 area
对象。 Link对象用来存储 URL的信息。一个完整的 URL可以
分成几个组成部分，例如下面的 URL,
http://www.abc.xyz.cn:8080/javascript/index.html#start
其中,#start是 hash数，用以调用文档中的 anchor。
一个链接包括 URL的所有信息。上面的这些 link对象成员属
性将一个 URL分解，对于编程提供了相当大的方便。
[例 5-13] 改变 URL示例
<html>
<body>
<form>
<input type="button" value="Google"
onClick="document.links[0].href='http://www.google.com' ">
<input type="button" value="百度 "
onClick="document.links[0].href='http://www.baidu.com' ">
<input type="button" value="北大天网 "
onClick="document.links[0].href='http://www.pku.edu.cn' ">
</form>
<a href="javascript:alert('选择搜索引擎，然后单击下一步 ')">下
一步 </a>
</body>
</html>
结果与分析
6 write()和 writeln()函数
wriet()的函数的一般形式是,
document.write(string1,string2,...)
这个成员方法的参数可以是任意多个，但是至少是一个。
当参数不是字符串时，将会被自动转换为字符串。我们可
以这样使用,
var Num=4;
document.write("Num=",Num) ;
writeln()和 write()类似，只是在输出完括号中的内容后会自
动换行。
7 open(),close()和 clear()函数
（ 1） open()函数允许打开一个已经存在的文档用来写入文件，
当用 open()函数打开一个文档流后，就可以用 write()函数向这个
窗口内写入文档流。
（ 2） close()方法的作用是在写完了文档流时，关闭这个文档。
[例 5-15] 文档对象的创建
下面的程序先打开一个新窗口，使用新窗口 document对象的
open(),write()和 close()。 由于 open()函数的运行是一种创
建的过程，原来窗口中的文档将被清除，于是这个例子的效果
是在新窗口内引起刷新窗口中的文档，写入新内容，再刷新，
再写入。
代码
<html>
<body>
<script language="javascript">
AWin=window.open("","","width=200,height=200");
for (var j=0;j<20;j++)
{
AWin.document.open("text/html");
AWin.document.write("这是第 ",j,"个文档！ ");
AWin.document.close();
}
</script>
</body>
</html>
可以在 Frontpage中预览
5.7.5 event 对象
要提高网页的交互性，必须需要要了解 event对象。在 IE和
Netscape4.0以上版本的浏览器中都包含 event对象。它在事件
创立时产生，如：点击一个可点击的对象，移动鼠标，或获
得输入焦点等，此时,Event对象被创建然后调用事件处理函
数。
1,event对象的属性
在不同的浏览器中,event对象的属性不完全相同,event对象
在 IE和 Netscape浏览器中的属性见表 5-9
2.可能的事件
在浏览器中可能的事件主要有,
onDblClick,鼠标双击
onKeyDown,键被按下
onKeyPress,键被按下然后被释放
onKeyUp,键被释放
onMouseDown,鼠标被按下
onMouseMove,鼠标移动
onMouseUp,鼠标被释放
onResize,窗口被调整大小
3,事件处理方法
事件是由事件处理函数进行处理的。但是，对于两种不同
的浏览器，事件的处理途径不安全一样。在 IE中，采用
“事件气泡”的方式处理事件，例如,
<body onclick="f1()">
<p onclick="f2()">
<em onclick="f3()">
<strong onclick="f4()">Click on me</strong>
</em>
</p>
</body>
事件处理顺序
对于上述的 html代码，每个标记都接受鼠标单击事件，都创建
event对象。那么，这个事件如何处理呢？顺序是这样的，例
如：点击 strong标记内的文本，它接收到一个 onClick事件，执
行 f4()； 然后发送 onclick事件给 <em>标记，执行 f3()； 然后发
送到 <p>标记，执行 f2()； 然后直到窗口。这样每个元素分别
以自己的方式处理点击事件。
但是如果想停止事件上传，可以在事件处理函数中，添加取
消气泡的代码，方法是,
function fx ()
{
…, … ;
this.event.cancelBubble = true;
}
Netscape中事件的处理
对于 Netscape采用的是事件捕捉（ captureEvents） 和释放
（ releaseEvents） 的方式，有两个成员函数。例如，用 window
对象的来描述鼠标移动 MOUSEMOVE事件，写作,
window.onMouseMove =yourhandlerFunction;
要释放该事件，写作,
window.releaseEvents(Event.MOUSEMOVE);
检查浏览器
Dreamweaver中添加“检查浏览器”行为
代码
Dreamweaver中添加“检查浏览器”行为
5.7.6 history对象
一般把 history对象称做历史清单对象，可以把它看做这样一个
列表，它保存窗口或框架在某时间段内的 url,并且提供几个方
法使我们可以在这个列表中前后移动。
history对象属性和方法见表 5-10。
<input type='button' value="快速返回 " onClick="history.go(-5)">
5.7.7 location对象
location（ 位置）对象用来存储当前的 url信息。它储存了一个
完整的 url,并且可能通过对对象的赋值来改变当前的 url,因
此可以改变当前的网页。 location对象的属性和 link对象是完全
相同的，不再做详细地解释。
location对象的属性有,hash,host,hostname,href,pathname，
port,protocol等
5.8 Web交互
通过 JavaScript,可以完成 Web的信息交互，在客户端完成动
态的 Web效果。
主要的交互包括 window对象的输入与输出,form以及 frame。
5.8.1使用 form实现 Web页面的信息交互
表单对象（ form） 是人机交互的主要手段，是 Web页面的基本
元素,form对象最主要的功能就是能够直接访问 html文档中的
窗体，它封装了相关的 html代码,
<form
name=“表的名称”
target=“指定信息的提交窗口”
action="接收窗体程序对应的 url"
method=信息数据传送方式 (get | post)
enctype =“窗体编码方式”
[onsubmit =“JavaScript代码” ]
>
２, form对象的方法
form对象的方法只有一个，即 submit()方法，该方法主要功
能就是实现 form信息的提交。如提交 mytest表单，则使用下
列格式,
document.mytest.submit();
３,form对象的属性
form对象中的属性主要包括,
elements,
name,
action,
target,
encoding,
method等。
除 elements外，其它几个均反映了 <form>标记中相应属性的
状态，这通常是单个 form标识。而 elements是多个 form元素
值的数组，例,myForm.elements[0],myForm.elements[0]等。
４、访问 form对象
方法一：通过 form名称访问
在 form对象的属性中指定 form名，通过下列标识访问 form,如：
document.myForm()。
方法二：通过数组来访问 form
使用 form对象数组来访问 form对象。但需要注意一点，因 form
对象是由浏览器环境提供的，而浏览器环境所提供的数组下
标是由 0到 n。 所以可通过下列格式实现 form对象的访问,
document.forms[0],document.forms[1],document.forms[2]
等。,.,
注意,
在 JavaScript中要对 form引用的条件是：必须先在页面中用
<form>标记创建窗体，并将定义窗体部分放在引用之前。
5,form中的基本元素
form中的基本元素有,
文本框（ text） 按钮、单选按钮（ radio）,复选按钮
（ checkbox）,按钮（ button） 等组成。
在 JavaScript中要访问这些基本元素，必须通过对应特定的
form元素的数组下标或 form元素名来实现。每一个元素主要
是通过该元素的属性或方法来引用。其引用的基本格式为,
formName.elements[].propertyName|methadName
或者,
formName.elementName.propertyName|methadName
（ 1） text单行文本框
（ 1）属性,name,设定提交信息时的信息名称，对应于
html文档中的 name。
value,用以设定出现在窗口中对应 html文档中 value的信息。
defaultvalue,包括 text元素的默认值。
（ 2）方法,blur() 将当前焦点移到后台。 select() 加亮文字。
（ 3）事件,onFocus,当 text获得焦点时，产生该事件。
OnBlur,从元素失去焦点时，产生该事件。 Onselect,当文
字被加亮显示后，产生该事件。 onchange,当 text元素值改
变时，产生该事件。
可以通过 Dreamweaver的行为窗口，为控件添加事件行为
举例
<html>
<body>
<form name="myForm">
<input type="text" name="text1" value="xxx" >
</form>
<script Language = "JavaScript">
document.myForm.text1.value = "yyy";
document.myForm.text1.select();
</script>
</body>
</html>
（２） textarea多行多列文本输入
（ 1）属性,name设定提交信息时的信息名称，对应 html文档
textarea的 name。 value用以设定出现在窗口中对应 html文档中
value的信息。 default value为元素的默认值。
（ 2）方法,blur()将输入焦点失去,select()将文字加亮后。
（ 3）事件,onBlur当失去输入焦点后产生该事件。 onFocus:当
输入获得焦点后，产生该事件。 Onchange:当文字值改变时，产
生该事件。 Onselect:当文字加亮后，产生该事件
（３） select选择元素
功能：实施对滚动选择元素的控制。
（ 1）属性,name:设定提交信息时的信息名称，对应文档
select中的 name。
length:对应文档 select中的 length。
options组成多个选项的数组。
selectIndex指明一个选项。
selected,指明当前选项是否被选中。
index指明当前选项的位置。
defaultselected默认选项。
（ 2）事件,OnBlur,当 select选项失去焦点时，产生该事件。
OnFocas,当 select获得焦点时，产生该事件。 Onchange,选项
状态改变后，产生该事件。
（４） button按钮
（ 1）属性,
name,设定提交信息时的信息名称，对应文档中 button的 name。
value,用以设定出现在窗口中对应 html文档中 value的信息。
（ 2）方法,click(),该方法类似于一个按下的按钮。
（ 3）事件,onclick当单击 button按钮时，产生该事件。
（ 5） checkbox检查框
（ 1）属性,
name,设定提交信息时的信息名称。
Value,用以设定出现在窗口中对应 html文档中 value的信息。
Checked,该属性指明框的状态 true/false,
Defauitchecked,默认状态。
（ 2）方法,click(),该方法使得框的某一个项被选中。
（ 3）事件,onclick,当框的选被选中时，产生该事件。
（６） radio无线按钮
（ 1）属性,
name,设定提交信息时的信息名称，对应 HTML文档中的 radio
的 name相同。
Value,用以设定出现在窗口中对应 html文档中 value的信息，对
应 html文档中的 radio的 name。
Length,单选按钮中的按钮数目。
Defalechecked,默认按钮。
Checked,指明选中还是没有选中。
Index,选中的按钮的位置。
（ 2）方法,chick(),选定一个按钮。
（ 3）事件,onclick,单击按钮时，产生该事件。
（７） hidden隐藏
（ 1）属性,
name,设定提交信息时的信息名称，对应 html文档的 hidden中
的 name。
Value,用以设定出现在窗口中对应 html文档中 value的信息，对
应 html文档 hidden中的 value。
Defaleitvalue为默认值。
（８） password口令
（ 1）属性,
name,设定提交信息时的信息名称，对应 HTML文档中
password中的 name。
Value:用以设定出现在窗口中对应 HTML文档中 Value的信息，
对应 HTML文档中 password中的 Value。
defaultvalu:默认值
（ 2）方法,
select():加亮输入口令域。
blur():使这丢失 passward输入焦点。
focus():获得 password输入焦点。
（９） submit提交元素
功能：实施对一个具有提交功能按钮的控制。
属性,name,设定提交信息时的信息名称，对应 html文档中
submit。
Value,用以设定出现在窗口中对应 html文档中 Value的信息，对
应 html文档中 value。
方法 click()相当于按下 submit按钮。
事件,onclick(),当按下该按钮时，产生该事件。
[例 5-16]
下面我们演示通过点击一个按钮（ red） 来改变窗口颜色，点击
,调用动态按钮文档, 调用一个动态按钮文档。
代码
<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="other.htm">调用其它文档 </a>
<form >
<Input type="button" value="red" onClick="changecolor()">
</form>
</body>
</html>
5.8.2使用 frame实现更复杂的交互
框架可以将屏幕分割成不同的区域，每个区域有自己的 url,通
过 frames[]数组对象来实现不同框架的访问。
实际上框架对象本身也是一类窗口，它继承了窗口对象的所有
特征，并拥有所有的属性和方法。
举例 -一个包含三个框架的框架网页
<html>
<frameset rows="20%,80%">
<frame src="frameA.htm">
<frameset Cols="200,*">
<frame src="frameB.htm">
<frame src="frameC.htm">
</frameset>
</frameset>
</html>
框架中元素的访问
要实现框架中多 form的不同元素的访问，则必须使用 window对
象中的 frames属性。 frames属性同样也是一个数组，它在父框
架集中为每一个子框架设有一项。通过下标实现不同框架的访
问,
parent.frames[i].docuement.forms[j]
通过 parent.frames.length确定窗口中窗体的数目。除了使用数组
下标来访问 form外还可以使用框架名和 form名来实现各元素的
访问，形式如下,
parent.frameName.document.formName.elementName;
5.8.3 和 Table的交互
1,创建框架
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=gb2312">
</head>
<frameset cols="541,*">
<frame name="frameA" src="1.htm">
<frame name="frameB" src="2.htm">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。 </p>
</body>
</noframes>
</frameset>
</html>
2,制作输入页面 1.htm-1
<html>
<head>
<title>数据输入表单 </title>
<script>
var i=1;
function getRadioValue()
{
var val="";
var j=0;
for(j=0;j<document.all.inputForm.sex.length;j++)
if(document.all.inputForm.sex[j].checked)
val = document.all.inputForm.sex[j].value;
return val;
}
代码 1.htm-2
function fillTable()
{
parent.frameB.document.all.dataTable.rows(i).cells(0).innerHTML =
document.inputForm.name.value;
parent.frameB.document.all.dataTable.rows(i).cells(1).innerHTML
=getRadioValue();
parent.frameB.document.all.dataTable.rows(i).cells(2).innerHTML =
document.inputForm.age.value;
parent.frameB.document.all.dataTable.rows(i).cells(3).innerHTML =
document.inputForm.tel.value;
parent.frameB.document.all.dataTable.rows(i).cells(4).innerHTML =
document.inputForm.email.value;
}
代码 1.htm-3
function nextRow()
{
document.inputForm.name.value="";
document.inputForm.age.value="";
document.inputForm.tel.value="";
document.inputForm.email.value="";
document.inputForm.name.focus();
i++;
}
</script>
</head>
代码 1.htm-4
<body>
<p align="center">数据输入表单 </p>
<div align="center">
<center>
<form name="inputForm" method="POST" action="--WEBBOT-SELF-
-">
<table id="inputTable" border="1" cellpadding="0" width="200">
<tr>
<td width="27%" align="center">姓名 </td>
<td width="73%">
<p><input type="text" name="name" size="20"></p>
</td>
</tr>
代码 1.htm-5
<tr>
<td width="27%" align="center">性别 </td>
<td width="73%">
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女 </td>
</tr>
<tr>
<td width="27%" align="center">年龄 </td>
<td width="73%"><input type="text" name="age" size="20"></td>
</tr>
<tr>
<td width="27%" align="center">电话 </td>
<td width="73%"><input type="text" name="tel" size="20"></td>
</tr>
代码 1.htm-6
<tr>
<td width="27%" align="center">email</td>
<td width="73%"><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td width="100%" align="center" colspan="2">
<input type="button" value="确定 " name="B1" onclick="fillTable()">
<input type="button" value="下一个 " name="B2" onclick="nextRow()">
</td>
</tr>
</table>
</form>
</center>
</div>
</body>
</html>
3,制作右边的数据统计表格 2.htm
<html>
<head>
<title>数据统计表 </title>
</head>
<body>
<p align="center"><font size="5">数据统计表 </font></p>
<div align="center">
<center>
<table id="dataTable" border="1" width="400">
<tr>
<td width="20%" align="center">姓名 </td>
<td width="20%" align="center">性别 </td>
<td width="20%" align="center">年龄 </td>
<td width="20%" align="center">电话 </td>
<td width="20%" align="center">email</td>
</tr>
代码 2.htm-续 1
<tr>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
</tr>
代码 2.htm-续 2
,
,
,
</table>
</center>
</div>
</body>
</html>
4.执行
5.8.4 深入理解表单
对于表单，我们添加各种控件。每一个控件，都创建一个对象。
对于控件，除了默认的属性外，用户可以添加属性。例如
<body>
<p>表单验证 </p>
<form name="myForm" method="POST">
姓名,<input type="text" name="T1" size="20"
myType="myText">
</form>
<script>
document.write(myForm.T1.myValidate);
</script>
</body>
使用用户定义的属性
通过为 <input … >添加属性，可以便于程序处理中对控件类型的
区分，例如：增加一个 myType=,”属性，来标明控件的类型。
function validateForm(theForm)
{
var field = theForm.elements;// 將表單所有元素放入數組
for(var i = 0; i < field.length; i++)
{
var myType=field[i].myType;//控件元素用户自定义属性
switch(myType)
{ …,}
…
}
5.9 综合举例
1,一个 Web课件框架
2,一个文档批注系统
5.9.1一个 Web课件框架
1,建立 Web应用中的的一个页面 --初始框架
用 Frontpage工具，完成 myframes.htm框架网页的设计，代码
如下,
主调文档 myframes.htm内容,
<html>
<head>
<title>GSL网络课程 </title>
</head>
myframes.htm代码
<frameset rows="60,*,40" framespacing="0" border="0"
frameborder="0">
<frame name="top" scrolling="no" src="mybanner.htm">
<frameset cols="*,250">
<frame name="frameA" target="main" scrolling="auto"
src="myA.htm" >
<frame name="frameB" target="_self" scrolling="auto"
src="myB.htm" >
</frameset>
<frameset cols="*,250">
<frame name="frameC" scrolling="no" src="myC.htm">
<frame name="frameD" scrolling="auto"
src="myD.htm?chapter=ch01&pagenums=26&page=0" >
</frameset>
</frameset>
</html>
2,Top帧的设计
top帧的设计显示一幅图片或 flash动画，我们指定它的源文件是
mybanner.htm,这是最为简单的一个网页，只要设置一幅背景图
片就可以了。或者根据帧的尺寸大小插入一个 flash动画。一个简
单的 mybanner.htm文档内容如下,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
<title>banner</title>
</head>
<body background="../例子 /image/banner.jpg">
</body>
</html>
3,frameC帧的设计
在 frameC帧，我们主要用于设计系统的状态，它对应了一个
myC.htm网页，可能是显示目前的在线人数，这里先不考虑。
4,frameD帧的设计
frameD帧是我们的页面导航区，包括：目录、上一页、下一页、
练习题等超级链接，是相对复杂的一个网页。
功能：控制 frameA帧和 frameB帧的显示。是非常重要的
MyD.htm文档内容 -1
<html>
<head>
<meta content="text/html; charset=windows-1252" http-
equiv="Content-Type">
<script src="QueryString.js" ></script>
<script src="indexdatas.js" ></script>
MyD.htm文档内容 -2
<script language="JavaScript">
//(1) index
image1on = new Image();
image1on.src = "images/indexov.gif";
image1off = new Image();
image1off.src = "images/indexup.gif";
MyD.htm文档内容 -3
//(2) up button,there status:on,off,and gray
image2on = new Image();
image2on.src = "images/backov.gif";
image2off = new Image();
image2off.src = "images/backup.gif";
image2dim = new Image();
image2dim.src = "images/backdim.gif";
//(3) next button,there status:on,off,and gray
image3on = new Image();
image3on.src = "images/nextov.gif";
image3off = new Image();
image3off.src = "images/nextup.gif";
image3dim = new Image();
image3dim.src = "images/nextdim.gif";
MyD.htm文档内容 -4
//(4) exercise
image4on = new Image();
image4on.src = "images/exerciseov.gif";
image4off = new Image();
image4off.src = "images/exerciseup.gif";
MyD.htm文档内容 -5
function myButtonInit()
{
var mynum = parseInt(mypagenums,10);
document['image2'].src = image2dim.src;
if (mynum <= 1)
document['image3'].src = image3dim.src;
}
MyD.htm文档内容 -6
function showPic()
{
if (document.images && PageNums > 1)
for (var i=0; i < showPic.arguments.length; i+=2)
{
if (showPic.arguments[i] == 'image3' && CurrentPage ==
PageNums) return;
else
if (showPic.arguments[i] == 'image2'&&CurrentPage==1)
return;
else
document[showPic.arguments[i]].src=eval(showPic.arguments[i+
1]+".src");
}
}
MyD.htm文档内容 -7
function changePage(cha,thePage)
{
var pagecode;
switch (cha) {
case "ch01",
pagecode = PagesIDs01[thePage];
break;
case "ch02",
pagecode = PagesIDs02[thePage];
break;
… …
}
return pagecode;
}
MyD.htm文档内容 -8
function NextPage()
{
if (CurrentPage == PageNums-2) return;
if ((CurrentPage + 1) == PageNums-2)
document['image3'].src = image3dim.src;
CurrentPage++;
pagecode = changePage(mycha,CurrentPage);
NextPageURLa = mycha + "/" + pagecode +"a"+".htm";
NextPageURLb = mycha + "/" + pagecode +"b"+".htm";
eval('parent.frames.frameA.location.href=NextPageURLa');
eval('parent.frames.frameB.location.href=NextPageURLb' );
}
MyD.htm文档内容 -9
function PrevPage()
{
if (CurrentPage == 0) return;
if (CurrentPage == 1)
document['image2'].src = image2dim.src;
CurrentPage--;
pagecode = changePage(mycha,CurrentPage);
BackPageURLa = mycha + "/" + pagecode +"a"+".htm";
BackPageURLb = mycha + "/" + pagecode +"b"+".htm";
eval('parent.frames.frameA.location.href=BackPageURLa');
eval('parent.frames.frameB.location.href=BackPageURLb');
}
MyD.htm文档内容 -10
function openIndex()
{
if (popup == "" || popup.closed)
{
url = "index/indexframes.htm";
popup=window.open("","IndexWin",
"scrollbars=yes,width=550,height=600,
top=70,left=120,resizable=yes");
popup.location = url;
}
else popup.focus();
}
</script>
<base target="_self">
</head>
MyD.htm文档内容 -11
<body leftmargin="1" topmargin="1" bgcolor="#000000">
<script language=JavaScript>
var Request=new QueryString(); // 创建参数对象实例
mycha = Request["chapter"]; // 章编号
mypagenums = Request["pagenums"]; // 当前章页数
mypage = Request["page"]; // 当前页
var PageNums = parseInt(mypagenums,10);
var CurrentPage = parseInt(mypage,10);
var popup="";
</script>
在 Index页面，会刷新 myD.htm的显示，
传入不同的参数
MyD.htm文档内容 -11
<div align="center">
<center>
<table border="0" cellpadding="0" width="100%"
height="100%">
<tr>
<td align="center" width="100%">
<table bgcolor="#000000" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td>
<a href="javascript:openIndex()"
onMouseOver="showPic('image1','image1on')"
onMouseOut="showPic('image1','image1off')">
<img name="image1" src="images/indexup.gif" ></a>
</td>
MyD.htm文档内容 -12
<td><a href="PrevPage()"
onMouseOver="showPic('image2','image2on')"
onMouseOut="showPic('image2','image2off')">
<img name="image2" src="images/backdim.gif" ></a>
</td>
<td><a href="NextPage()"
onMouseOver="showPic('image3','image3on')"
onMouseOut="showPic('image3','image3off')">
<img name="image3" src="images/nextup.gif" ></a>
</td>
<td><a href="GoExercise()"
onMouseOver="showPic('image4','image4on')"
onMouseOut="showPic('image4','image4off')">
<img name="image4" src="images/exerciseup.gif" ></a>
</td>
MyD.htm文档内容 -13
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>
<script language=JavaScript>
myButtonInit();
</script>
</body>
</html>
QueryString.js
QueryString.js定义了一个参数类, 用于获得当前页面的参
数, 在本例子中, 传递到 myD.htm页面的有三个参数, 分别
是：, chapter”（ 章编号 ）,, pagenums”（ 当前章的页数 ）
和, page”（ 当前页 ） 。
代码
function QueryString()
{//构造参数对象并初始化
var name,value,i;
var str=location.href; //获得浏览器地址栏 URL串
var num=str.indexOf("?")
str=str.substr(num+1); //截取,?” 后面的参数串
var arrtmp=str.split("&"); //将各参数分离形成参数数组
for(i=0;i < arrtmp.length;i++)
{
num=arrtmp[i].indexOf("=");
if(num>0)
{
name=arrtmp[i].substring(0,num); //取得参数名称
value=arrtmp[i].substr(num+1); //取得参数值
this[name]=value; //定义对象属性并初始化
}
}
indexdatas.js
包含文件 indexdatas.js定义了整个 Web应用所有网页用到到
全局变量, 内容如下,
var PageNums01 = 26 // 第 1章的页数
var PagesIDs01 = new Array(26); // 存储每一页的 ID=p+节
+小节, 节和小节各占两位
PagesIDs01[0] = "p00";
PagesIDs01[1] = "p0100";
…
PagesIDs01[25] = "p0702";
5,目录索引页设计
在 frameD帧中, 有一个, index”按钮, 点击该按钮, 将打开
一个新的窗口, 保存了一门课程中的课程目录, 通过该目录,
学生可以进入任何一章, 任何一个小节 。 此时, 在 frameA和
frameB中显示该小节的内容 。
此时可以通过 frameD帧中的, back”和, next”按钮, 完成前
后翻页任务 。
目录索引页 indexframes.htm设计成一个框架网页, 如图 5-
12 所示 。
图
indexframes.htm框架网页，包含了上下两个帧，上面显示菜单
（ myindexmenu.htm）,下面是每一章的目录（没章一个文件
/chxx/pindex.htm）。
indexframes.htm代码
<html>
<head>
<meta content="text/html; charset=windows-1252" http-
equiv="Content-Type">
<script>
var activeindex = null;
function showLayer(layer) {
eval(activeindex+".hide()");
activeindex = layer;
eval(layer+".show()");
}
indexframes.htm代码
function hideLayer(layer) {
eval(layer+".hide()");
}
</script>
</head>
<frameset frameborder="0" border="0" framespacing="0"
rows="100,*">
<frame name="indexmenu_frame"
src="myindexmenu.htm" target="_self">
<frame name="indexcontent_frame"
src="pleaseselcha.htm" target="main">
</frameset>
</html>
6,每一章的目录页
在目录窗口帧选择了一级项目, 然后选择章节后, 在
indexcontent_frame帧显示, 每一章的目录, 目录文件名
为 pindex.htm。 该文件含有大量的超链接, 最终通过这些
超链接, 来刷新 frameA和 frameB中的内容 。
例如, 某一章的 pindex.htm页面如图 5-13所示 。
图
pindex.htm代码 -1
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<title>pindex01</title>
<script src="../indexdatas.js" ></script>
<script language="JavaScript">
pindex.htm代码 -2
function GoContentPage(selstr)
{
Chapter = selstr.substring(0,2);
Section = selstr.substring(2,4);
Subsection = selstr.substring(4,6);
str = "p"+selstr.substring(2,6);
CurrentPage = 0;
while (CurrentPage<PageNums01)
{
if (PagesIDs01[CurrentPage] == str)
break;
CurrentPage ++;
}
pindex.htm代码 -3
if (CurrentPage == PageNums01)
CurrentPage = 0;
NewPageURLa =
"../ch"+Chapter+"/"+PagesIDs01[CurrentPage]+"a"+".htm";
NewPageURLb =
"../ch"+Chapter+"/"+PagesIDs01[CurrentPage]+"b"+".htm";
if (window.parent.opener && !window.parent.opener.closed)
{
window.parent.opener.parent.frames[1].location.href =
NewPageURLa;
window.parent.opener.parent.frames[2].location.href =
NewPageURLb;
}
pindex.htm代码 -4
// 刷新 frameD帧的内容, 使得其中的数据和索引页的选择同步
newurl = "../myD.htm?chapter=ch01&pagenums=26&page="
+ CurrentPage;
window.parent.opener.parent.frames[4].location = newurl;
top.blur();
}
</script>
<!--
<base target="main">
//-->
</head>
pindex.htm代码 -5
// 刷新 frameD帧的内容, 使得其中的数据和索引页的选择
同步
newurl =
"../myD.htm?chapter=ch01&pagenums=26&page=" +
CurrentPage;
window.parent.opener.parent.frames[4].location =
newurl;
top.blur();
}
</script>
<!--
<base target="main">
//-->
</head>
pindex.htm代码 -6
<body>
<p><font size="5">第一章 计算机技术与信息社会 </font></p>
<div align="center">
<center>
<table border="0" width="100%">
<tr>
<td ><p style="line-height,150%">1.1</p></td>
<td width="95%" colspan="2">
<p style="line-height,150%">信息, 信息技术和信息社会 </p>
</td>
</tr>
pindex.htm代码 -7
<tr>
<td ><p style="line-height,150%"></p></td>
<td >
<p>
<a href = "#"
onClick="GoContentPage('010101');">1.1.1</a></p></td>
<td ><p style="line-height,150%">信息的基本概念 </p></td>
</tr>
<!—其它各个小节的代码完全类似, 略 ?
</table>
</center>
</div>
</body>
</html>
图
8,总结 -1
上述的代码很长，从中我们可以体会到,Web应用的客户端
编程还是非常复杂的，但是只要经过认真的积累，定会编写
出精彩的 Web应用。
总结 -2表单操作
步骤 1—建 立框架
<html>
<head>
<title>New Page 2</title>
</head>
<frameset cols="300,*">
<frame name="frameA" src="1.htm">
<frame name="frameB" src="2.htm">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。 </p>
</body>
</noframes>
</frameset>
</html>
步骤 2—1.htm(1)
<html>
<head>
<title>个人信息输入表单 </title>
<script src="myimage.js"> </script>
<script>
function getRadioValue()
{
var val="";
var j=0;
for(j=0;j<document.all.inputForm.sex.length;j++)
if(document.all.inputForm.sex[j].checked)
val = document.all.inputForm.sex[j].value;
return val;
}
1.htm(2)
function getCheckbox(obj)
{
if(obj.checked)
return obj.myValue; // myValue为用户自定义的属性
}
function getAllCheckbox(theForm)
{
// 获取一组 checkbox的输入，通过用户自定义的属性（本处为
myType="interest"） 对控件分组
var str="";
var field = theForm.elements;// 將表單中的所有元素放入數組
for(var i = 0; i < field.length; i++)
if (field[i].myType == "interest")
if(field[i].checked)
str +=field[i].myValue; // myValue为用户自定义的属性
return str;
}
1.htm(3)
function getCheckbox(obj)
{
if(obj.checked)
return obj.myValue; // myValue为用户自定义的属性
}
function getAllCheckbox(theForm)
{
// 获取一组 checkbox的输入，通过用户自定义的属性（本处为
myType="interest"） 对控件分组
var str="";
var field = theForm.elements;// 將表單中的所有元素放入數組
for(var i = 0; i < field.length; i++)
if (field[i].myType == "interest")
if(field[i].checked)
str +=field[i].myValue; // myValue为用户自定义的属性
return str;
}
1.htm(4)
function getSelect(obj) {
var s="";
if(obj!=null)
for(var i=0;i<obj.options.length;i++)
if(obj.options[i].selected)
return s+i;
}
1.htm(5)
function showImg(i)
{ switch(i){
case "0",
parent.frameB.document.all.cartonImg.src = imageBoy.src;
break;
case "1",
parent.frameB.document.all.cartonImg.src = imageGirl.src;
break;
case "2",
parent.frameB.document.all.cartonImg.src = imageMan.src;
break;
case "3",
parent.frameB.document.all.cartonImg.src = imageWoman.src;
break;
} }
1.htm(6)
function fillTable(){ parent.frameB.document.all.dataTable.rows(0).cells(1).inne
rHTML = document.inputForm.name.value;
parent.frameB.document.all.dataTable.rows(1).cells(1).inne
rHTML = getRadioValue();
var sel=getSelect(document.inputForm.carton);
showImg(sel);
parent.frameB.document.all.dataTable.rows(3).cells(1).inne
rHTML = document.inputForm.email.value;
var interestStr=getAllCheckbox(document.inputForm);
parent.frameB.document.all.dataTable.rows(4).cells(1).inne
rHTML = interestStr;
}
</script>
</head>
1.htm(7)
<body> <p align="center">个人信息输入表单 </p>
<form name="inputForm" >
<table id="inputTable">
<tr>
<td width="76" align="center">姓名 </td>
<td width="192">
<input type="text" name="name" myType="text">
</td>
</tr>
<tr>
<td width="76" align="center">性别 </td>
<td width="192">
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女 </td>
</tr>
1.htm(8)
<tr> <td width="76" align="center">卡通形象 </td>
<td width="192">
<select size="1" name="carton">
<option>男孩 </option>
<option>女孩 </option>
<option>男人 </option>
<option>女人 </option>
</select></td>
</tr>
<tr>
<td width="76" align="center" myType="email">email</td>
<td width="192"><input type="text" name="email"></td>
</tr>
1.htm(9)
<tr> <td width="76" align="center">爱好 </td>
<td width="192">
<input type="checkbox" name="C1" value="ON" myType =
"interest" myValue="运动 ">运动
<input type="checkbox" name="C2" value="ON" myType =
"interest" myValue="唱歌 ">唱歌
<input type="checkbox" name="C3" value="ON" myType =
"interest" myValue="跳舞 ">跳舞 </td>
</tr>
<tr>
<td width="244" align="center" colspan="2">
<input type="button" value="确定 " name="B1"
onclick="fillTable()">
</td>
</tr> </table> </form>
1.htm(10)
<tr> <td width="76" align="center">爱好 </td>
<td width="192">
<input type="checkbox" name="C1" value="ON" myType =
"interest" myValue="运动 ">运动
<input type="checkbox" name="C2" value="ON" myType =
"interest" myValue="唱歌 ">唱歌
<input type="checkbox" name="C3" value="ON" myType =
"interest" myValue="跳舞 ">跳舞 </td>
</tr>
<tr>
<td width="244" align="center" colspan="2">
<input type="button" value="确定 " name="B1"
onclick="fillTable()">
</td>
</tr> </table> </form> </body> </html>
步骤 3--2.htm
<html>
<head>
<title>个人信息 </title>
<script language="JavaScript" src="myimage.js">
</script>
</head>
2.htm续 1
<body>
<p align="center">个人信息 </font></p>
<div align="center">
<center>
<table id="dataTable" width="300" height="151">
<tr>
<td width="70" align="right" height="16">姓名 </td>
<td width="319" height="16"></td>
</tr>
<tr>
<td width="70" align="right" height="16">性别 </td>
<td width="319" height="16"></td>
</tr>
2.htm续 2
<tr> <td width="70" align="right" height="67">照片 </td>
</center>
<td width="319" height="67" valign="middle"
align="center">
<img border="0" name="cartonImg" src="girl.gif"
align="left" width="42" height="44">
</td>
</tr>
<center>
<tr>
<td width="70" align="right" height="16">email</td>
<td width="319" height="16"></td>
</tr>
2.htm续 3
<tr> <td width="70" align="right" height="16">兴趣爱好 </td>
<td width="319" height="16"></td>
</tr>
</table>
</center>
</div>
<script>
//alert("ppppp");
//document.all.cartonImg.src = imageBoy.src;
</script>
</body>
</html>
步骤 4—myimage.js文件
注意,
全局变量，不属于一个具体的 document,document.imageBoy错误
图
5.9.2 一个文本文档批注系统
对于写在纸面上的东西, 我们很容易再对内容进行修改或添
加说明 。 如果是电子文档, 如何完成上述的功能呢？ 如果是
带有格式的文档, 如 Word文档, 可以用不同的颜色, 插入
,批注, 等方式对文档进行说明 。
对于文本文档，由于没有格式，因此无法用类似 Word的方法
来实现对文档的说明。因此，可以利用 html和 Javascript技术，
开发一个文本文档的批注系统。
1．登录界面设计
代码 -1
对应 html文档 mypostil.htm内容如下,
<html>
<head>
<title>postil</title>
<link href="css/site.css" rel="stylesheet" type="text/css">
<script language=javascript
src="script/myglobal.js"></script>
<script language=javascript>
代码 -2
function login()
{
var name = document.all.userName.value;
if( isEmpty( name ) )
{
alert(,用户名不能为空 ！, );
document.all.userName.focus();
return;
}
var r = document.all.role.value;
if( r == "teacher" )
window.open( "fileload.htm","_self" );
}
</script>
</head>
代码 -3
<body onload=javascript:document.all.userName.focus();
bgcolor=menu>
<div align="center">
<center>
<table border="0" cellpadding="0" width="100%"
height="100%">
<tr>
<td width="100%">
<table border=2 cellspacing=0 cellpadding=0
width=300 align=center>
<tr height=50>
<td align=center style="font-size:20;font-
weight:bold;color:#000075">
文本文档批注系统 </td>
</tr>
代码 -4
<tr>
<td style="font-size:16">用户名 <input type=text
name=userName></td>
</tr>
<tr>
<td style="font-size:16">角 色
<select name=role>
<option value=teacher>教师 </option>
<option value=student>学生 </option>
</select>
</td>
</tr>
代码 -5
<tr>
<td align=center><input type=button value=登录
onclick=login()>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
包含文件
在上述的文档中, 引用了一个,css文件 site.css,它定义了应用中
的样式 。 同时, 还用到了一个包含文件 myglobal.js,定一各个
html文档用到的公用函数和全局变量 。
（ 2） 全局包含文件 myglobal.js内容
function isEmpty( value )
{
var temp = value;
while (temp.indexOf( " ",0 ) != -1 )
temp = temp.replace( " ","" );
if (temp == "" ) return true;
else return false;
}
2．选择被批注文件并批注界面
登录后, 如果是教师角色, 则在当前窗口打开一个 fileload.htm
文档, 它是选择被批注文件, 进行批注的主界面 。 界面设计如图
5-16 所示 。
fileload.htm文档 -1
<html>
<head>
<title>file process</title>
<link href="css/site.css" type="text/css" rel="stylesheet">
<script language="javascript" src="script/myglobal.js"></script>
<script language=javascript>
var fileName;
var savePath;
var saveFolder;
var saveName;
var fileObj = new
ActiveXObject( "Scripting.FileSystemObject" );
var forReading = 1;
var forWriting = 2;
var forAppending = 8;
fileload.htm文档 -2
function readFile() {
fileName = document.all.homework.value;
if (fileName=="") {
alert("请选择一个文本文件 ");
return;
}
saveName = createHtmFileName( fileName );
saveFolder = saveName.substring( 0,
saveName.lastIndexOf( "." ) );
if( !fileObj.FolderExists( "c:\\" + saveFolder ) )
var folder = fileObj.CreateFolder( "c:\\" + saveFolder );
savePath = "c:\\" + saveFolder + "\\" ;
fileload.htm文档 -3
//显示选择的文本文件
var textFile = fileObj.OpenTextFile( fileName,forReading );
if ( textFile.AtEndOfStream ) {
document.all.t.rows(2).cells(0).innerHTML = "";
alert( "文件内容为空, 请重新读取 " );
return;
} else {
var lineNum = 0;
var str = "";
//读第一个字符, 如果曾加过编号, 该字符一定为 "<"
var hasNumed = textFile.read(1);
fileload.htm文档 -4
while( ! textFile.AtEndOfStream ) {
lineNum ++;
if (hasNumed != "<")
str = str + "<b>" + lineNum + ":</b>" ;
if (lineNum == 1) str += hasNumed;
while ( ! textFile.AtEndOfLine ) {
char = textFile.read(1);
if( char == " " ) {
//char = " ";
}
str += char;
}
str += "<br>";
if( ! textFile.AtEndOfStream ) textFile.skipLine();
}
fileload.htm文档 -5
document.all.t.rows(2).cells(0).innerHTML = str;
}
textFile.close();
//显示下面隐藏的表格 （ 带有批语的文本框 ）
document.all.t1.style.visibility = "visible";
document.all.annotation.focus();
}
fileload.htm文档 -6
function createHtmFileName( fileName ) {
var str = fileName;
var name = fileName.substring( str.lastIndexOf( "\\" ) + 1 );
var newFileName = name.substring( 0,
name.lastIndexOf( "." ) ) + ".htm";
return newFileName;
}
fileload.htm文档 -7
function updateFile( strSelected ) {
var textFile = fileObj.OpenTextFile( fileName,forWriting );
var fileCon = document.all.t.rows(2).cells(0).innerHTML;
//类似代码 <a href=#
// onclick="desOpen('strSelected','A_1')"
name='A_1'>strSelected </a>
var strWithLink = "<a href=# onclick=\"desOpen('"
+ strSelected + "','" + getName( fileCon,"A" ) + "')\" name='"
+ getName( fileCon,"A" ) + "'>"
+ strSelected + "</a>";
//add link to string selected
fileCon = fileCon.replace( strSelected,strWithLink );
textFile.write( fileCon );
textFile.close();
}
fileload.htm文档 -8
function contProc() {
var str = document.selection.createRange().text;
if( isEmpty( str ) ) return false;
var para = new Array();
para[0] = str; //text selected
para[1] = ""; //link's name
para[2] = ""; //file contents with descriptions
var sfe = "dialogWidth:30;dialogHeight:25" ;
var val = window.showModalDialog( "desCreator.htm",para,
sfe );
var description = val[0];
if( description != null && !isEmpty( description ) )
createHtmlFile( str,description );
return false;
}
fileload.htm文档 -9
function createHtmlFile( strSelected,description ) {
//read contents from new.htm previous so that can be
used in description writing
var desFile;
var fileCon;
if ( fileObj.FileExists( savePath + saveName ) ) {
desFile = fileObj.OpenTextFile( savePath +
saveName,forReading );
if ( desFile.AtEndOfStream )
fileCon = document.all.t.rows(2).cells(0).innerText;
else fileCon = desFile.readAll();
desFile.close();
} else fileCon =
document.all.t.rows(2).cells(0).innerHTML;
fileload.htm文档 -10
//write contents to new,htm
var obName = getName( fileCon,"div" );//id of div with
description
var strWithDescription = "<a href=# name='A_" +
obName.substring(2) + "' "
+ "onmouseover=showDes(1,'" + obName +
"') "
+ "onmouseout=showDes(0,'" + obName +
"')>"
+ strSelected
+ "</a>";
if( !isEmpty( description ) )
fileCon = fileCon.replace( strSelected,strWithDescription );
var newFile = fileObj.CreateTextFile( savePath + saveName );
newFile.write( fileCon );
fileload.htm文档 -11
var stylepro = "'visibility:hidden;position:absolute;
left:'+ window.event.clientX+';top:'+window.event.clientY";
var desStr = "<table bgcolor=#00ccff>"
+ "<tr><td>" + description + "</td></tr>" +
"</table>";
var scriptStr = "<script language=javascript>"
+"function showDes(bz,ob){"
+"v=\"visible\"\;"
+"if(bz==0) v=\"hidden\"\;"
+"document.all(ob).style.visibility=v;"
+"}"
+"</"+"script>"
scriptStr += "<link href=\"css/site.css\" rel=\"stylesheet\"
type=\"text/css\">";
fileload.htm文档 -12
newFile.write( "<div id=" + obName + " style=" + stylepro
+ ">" + desStr + "</div>" );
if ( fileCon.indexOf( scriptStr,0 ) == -1 )
newFile.write( scriptStr );
newFile.close();
//change current display
//by add link to text descripted,so that description can
be modified
updateFile( strSelected ); //read content to cells again
so that link can be displayed
readFile();
}
fileload.htm文档 -13
function getName( fileCon,ob ) { //create div's id automatically
var id;
var temp = fileCon;
var obStr = "<" + ob;
var firstChar = ob.substring( 0,1 );
var count = 0;
while ( temp.indexOf( obStr,0 ) != -1 ) {
count++;
temp = temp.substring( temp.indexOf( obStr,0 ) +
1 );
}
count++;
id = firstChar + "_" + count;
return id;
}
fileload.htm文档 -14
function desOpen( strSelected,linkName ) {
var para = new Array();
para[0] = strSelected; //text selected
para[1] = linkName; //link's name
para[2] = fileObj.OpenTextFile( savePath + saveName,
forReading ).readAll();
var val =
window.showModalDialog("desCreator.htm",para,
"dialogWidth:30;dialogHeight:25");
if ( val[0] == "del" ) deleteDes( val );
else modifyDes( strSelected,val );
}
fileload.htm文档 -15
function modifyDes( strSelected,val ) {
var tempFlie;
tempFile = fileObj.OpenTextFile( savePath +
saveName,forWriting );
tempFile.write( val[2] );
tempFile.close();
}
fileload.htm文档 -16
function deleteDes( val ) { //delete link from source file
var linkName = val[1];
var linkText = document.all(linkName).innerText;
var linkStr = document.all(linkName).outerHTML;
var str1 = fileObj.OpenTextFile( fileName,
forReading ).readAll();
if( str1.indexOf( linkStr,0 ) == -1 )
linkStr = "<a" + linkStr.substring( 2,linkStr.length -2 ) +
"a>";
str1 = str1.replace( linkStr,linkText );
var newFile = fileObj.OpenTextFile( fileName,
forWriting );
newFile.write( str1 );
newFile.close();
readFile();
fileload.htm文档 -17
//delete link and div from description file
var str2 = fileObj.OpenTextFile( savePath +
saveName,forReading).readAll();
var linkWithDesStr = "<a href=# name='A_" +
linkName.substring(2)
+ "'onmouseover=showDes(1,'d_" + linkName.substring(2)
+ "') onmouseout=showDes(0,'d_" + linkName.substring(2) +
"')>";
var tempStr =
str2.substring( str2.indexOf( linkWithDesStr,0 ) );
var linkText= tempStr.substring( tempStr.indexOf( ">",0 ) + 1,
tempStr.indexOf( "</a>",0 ) );
linkWithDesStr = linkWithDesStr + linkText + "</a>";
str2 = str2.replace( linkWithDesStr,linkText );
fileload.htm文档 -18
var divStr = "<div id=d_" + linkName.substring(2)
+ "style='visibility:hidden;position:absolute;
left:'+window.event.clientX+';top:'+window.event.clientY>"
+ "<table bgcolor=#00ccff><tr><td>" ;
var tStr = str2.substring( str2.indexOf( divStr,0 ) );
var divText=tStr.substring( tStr.indexOf( "<td>",
0 )+4,tStr.indexOf("</td>",0 ));
divStr = divStr + divText + "</td></tr></table></div>";
str2 = str2.replace( divStr,"" );
//write to source file again
//write to description file again
var newFile1 = fileObj.OpenTextFile( savePath +
saveName,forWriting );
newFile1.write( str2 );
newFile1.close();
}
fileload.htm文档 -19
function saveAnnotation() {
var desFile;
var tempFile;
var annStr = document.all.annotation.value;
if( !fileObj.FileExists( savePath + saveName ) ) {
if( isEmpty( annStr ) ) {
alert( "批语内容不能为空 " );
document.all.annotation.focus();
return;
}
tempFile = fileObj.CreateTextFile( savePath +
saveName );
tempFile.write( document.all.t.rows(2).cells(0).innerHTML );
tempFile.write( "<hr> 批语,< br> " +
annStr + "<br>" );
//alert( "保存成功 ！ " );
fileload.htm文档 20
var str = fileObj.OpenTextFile( savePath + saveName,
forReading ).readAll();
var annStr1 = "";
// 尚无批语
if( str.indexOf( "批语 ",0 ) == -1 ) {
if ( isEmpty( annStr ) ) {
alert( "批语内容不能为空 " );
document.all.annotation.focus();
return;
}
desFile = fileObj.OpenTextFile( savePath + saveName,
forAppending );
desFile.write( "<hr>批语,<br> " + annStr
+ "<br>" );
} else {
fileload.htm文档 21
if ( isEmpty( annStr ) ) {
var ok = confirm( "删除原有批语吗？ " );
if( ! ok ) {
document.all.annotation.focus();
return;
}
}
desFile = fileObj.OpenTextFile( savePath +
saveName,forWriting );
annStr1 = str.substring( str.indexOf( "批语 ",0 ) + 7,
str.indexOf( "<br>",str.indexOf( "批语 ",0 ) + 8 ) );
str = str.replace( annStr1," " + annStr );
desFile.write( str );
}
desFile.close();
}
</script>
fileload.htm文档 22
<body bgcolor=menu>
<table id=t border=1 width="600" bordercolorlight=#333333
bordercolordark=#ffffff>
<tr height=30>
<td align=center style="font-size,18; font-weight,bold" >文本
文档批注系统 </td>
</tr>
<tr height=20>
<td>
选择文件 < input type=file name=homework
onClick="readFile()" title="选择文档 ">
</td>
</tr>
<tr>
<td oncontextmenu="javascrpt:return
contProc();"></td>
</tr>
fileload.htm文档 23
<tr> <td>
<table id=t1 border=0 style="textalign,center; visibility,
hidden" width="587">
<tr>
<td align=center width="15">批 <br><br>语 </td>
<td width="558">
<textarea name=annotation rows=7
cols="90"></textarea><br>
<input type=button value=保存批语
onclick=saveAnnotation()>
</td>
</tr> </table>
</td>
</tr>
</table>
</body>
图
3,批注、批注修改、删除批注功能设计
在图所示的界面上，有户可以选择一段文本，然后右单击，来
添加批注了。当用户右单击时候，将打开一个新的窗口文档
desCreator.htm。 这是进行批注的添加，修改和删除的页面。
例如：对于上面打开的文件，选择第 9行的 return Str1语句，右
单击，则打开批注页面，如图 5-18所示。
图
图
desCreator.htm文档 -1
<html>
<head>
<title>注释的添加, 修改和删除 </title>
<!-- <link href="css/site.css" type="text/css"
rel="stylesheet"> -->
<script language="javascript"
src="script/myglobal.js"></script>
<script language="javascript">
var recValue = window.dialogArguments;//received from
previous
desCreator.htm文档 -2
function dispStr() {
var strSelected = recValue[0];
var nameStr = recValue[1];
document.all.t.rows(1).cells(0).innerText =
strSelected;
// 获取注释的内容
document.all.des.value = getDescription( nameStr,
recValue[2] );
}
desCreator.htm文档 -3
function getDescription( nameStr,desFileCon ) {
var divName = "d_" + nameStr.substring( 2 );
var divStr =
desFileCon.substring( desFileCon.indexOf( "id=" +
divName ) );
var description =
divStr.substring( divStr.indexOf( "<td>" ) + 4,
divStr.indexOf( "</td>" ) );
return description;
}
desCreator.htm文档 -4
function saveDes() {
var retValue = new Array();//return to previous
retValue[0] = document.all.des.value;
retValue[1] = recValue[1];
var fileCon = recValue[2];
retValue[2] =
fileCon.replace( getDescription( recValue[1],recValue[2] ),
retValue[0] );
if ( isEmpty( document.all.des.value ) )
if( recValue[1] == "" ) {
alert( "注释内容不能为空 ！ " );
document.all.des.value = "";
document.all.des.focus();
return;
}
desCreator.htm文档 -5
else {
retValue[0] = "del";
confirmOp( " 确 定 删 除 此 注 释 吗？ ",
retValue );
return;
}
confirmOp( "确定保存吗？ ",retValue );
}
desCreator.htm文档 -6
function confirmOp( prompt,value ) {
var ok = confirm( prompt );
if( ok ) {
window.returnValue = value;
window.close();
}
else {
document.all.des.focus();
return;
}
}
desCreator.htm文档 -7
function winClose() {
var retValue = new Array();
retValue[0] = "";
retValue[1] = recValue[1];
retValue[2] = recValue[2];
confirmOp( "直接关闭将不会保存填写的注释, 确认
要关闭吗？ ",retValue );
}
desCreator.htm文档 -8
function doByKey() {
if ( window.event.keyCode == 113 ) { //F2
saveDes();
}
if ( window.event.keyCode == 27 ) { //Esc
winClose();
}
}
</script>
</head>
desCreator.htm文档 -9
<body bgcolor=menu topmargin onload=dispStr()
onkeydown=doByKey()>
<div align="center">
<center>
<table border="0" cellpadding="0" width="100%"
height="100%">
<tr>
<td width="100%">
<table id=t border=1 width=400
bordercolorlight=#333333 bordercolordark=#ffffff
align=center >
<tr>
<td height=50 align=center style="font-size,18;
font-weight,bold">批注输入, 修改与删除 </td>
</tr>
desCreator.htm文档 -10
<tr>
<td>
请在下面书写批注,<br>
<textarea id=des cols=61 rows=10>
</textarea><br><br>
<input type=button value=保存 (F2)
onclick=saveDes()>
<input type=button value=关闭 (Esc)
onclick=winClose()>
</td>
</tr> </table>
</td> </tr>
</table>
</center>
</div>
</body>
4,批注生成的 html文档
文本文档批注系统，允许用户添加、修改和删除批注，同
时还允许用户添加一个总体的评价意见或说明。系统在原
先文档的基础上生成一个同名的 html文档，所有的批注都
将以 <div>块的形式保存在系统创建的 html文档中，此时，
用户可以用浏览器打开这个 html文档。带有批注的地方件
显示超链接，鼠标指向该超链接时，显示所做的批注内容，
如图 5-所示。
图
5,小节
文本文档批注系统，比较全面的解释了 Javascript中关于文件
的处理问题，用到了 windows对象的一个新方法
window.showModalDialog,它和第一个 E-learning系统相比对
于参数的传递法用了不同的方法，使得在 Web编程中可以方
便的实现传统程序设计中对话框的功能。
谢 谢 大 家
