用JavaScript控制层次对象

用JaveScript控制层次对象

JavaScrip概述
JavaScript是一种跨系统平台、具有面向对象编程能力的脚本语言。它嵌入在标准的HTML语言中，在客户端，由Netscape或与之兼容的浏览器解释执行。JavaScript与Java、CGI程序协作，对Web页面进行控制，实现与用户的动态交互。
JavaScript语言定义了诸如窗口、文档、表格等对象。严格的讲，JavaScript不是真正的面向对象的语言，因为它没有像Java那样的类创建和完全面向对象的特性，但JavaScript实际上又确实是以面向对象为基础的。JavaScript能响应浏览器环境中的事件，并对浏览器环境中的对象实施控制。它无须服务器端GGI程序的干预，即可实现与用户的交互功能。这可有效的降低对WWW服务器的依赖，简化在WWW环境中编程。
网景的Netscape Navigator 2．O是第一个支持JavaScript的浏览器。Navigator 3．O中，最显著的变化是将图形作为独立的对象处理，并能支持Live Corinection技术。Live Corinection定义了JavaScript程序与Java Applct程序相互进行通讯的方法。为了与最初的JavaScript区别，在声明脚本语言类别时，注明是JavaScript 1．1。在Navigator 4.0中使用的是JavaScript l．2，JavaScript1．2中最大的变化是加入了对层次对象的控制。
层次对象的基本概念
Navigator 4．O中增加了层标记，它是网景公司实现动态H1“M1”（Dyriamic HTML、DHTML)技术的核心。层次对象在浏览器窗口中表现为一个含有文字、图像的矩形区域。通过JavaScript可以设置层标记的各个参数，改变层次的内容、位置、颜色、大小、可见性以及层次间的覆盖关系等。用户最终看到的网页是由若干层次组合在一起后产生的效果。
首先必须在HTML文件中定义层次，方法非常简单：
＜LAYER＞the coRtent＜／LAYER＞
＜NOL AyER＞the content in othorbrowser＜／N0LAYER>
由于层标记是Navigator 4．O中新增加的标记，较早版本的浏览器不支持分层功能。NOLAYER标记指定了在那些不支持的层功能的浏览器中显示的信息。
LAYER标记有许多可选参数，在定义层标记时可以设定它们的初始值。在JavaScript中可以对部分参数进行修改。
在Netscape中，每个层次都作为一个对象处理。层次对象中所包含的全部文字与图形作为一个该对象的一子文档处理，而不是被视为层次对象的一个具体属性，在JavaScript中可以使用以下格式改变层次对象中的内容：
document．MyLayer．document．write（NewHTML）；
document．MvLoyer．dOCument．ctose（）；
由于只有关闭层次对象所对应的文档之后，浏览器窗口中显示的内容才能得到刷新，所以每次更新内容后，都要关闭一次层次的文档。
层次对象不仅可以借助JavaScript改变自身的属性，还可以对鼠标、键盘所触发的事件给予响应。层次对象可以响应五个事件驱动，它们分别是：
1．onMouseOver: 当鼠标移到该层次时，调用onMouseOver事件驱动程序中的代码。
2．onMouseOut: 当鼠标移出该层次时，调用onMouseOut事件驱动程序中的代码。
3．onFocus: 当光标移到该层次中时，调用onFocus事件驱动程序中时代码。
4．onB1ur :当光标移出该层次时，调用onBlur事件驱动程序中的代码。
5．onLoad: 当层次被加载到浏览器时，调用onLoad事件驱动程序中的代码。
美化Web页面的技巧
JavaScript提供了一套十分有效的方法，让Web页面的设计者只需编制简单的程序就可以控制层次对象的许多特性。巧妙的运用层次对象的这些特性可以制作出精美的Web页面，这些页面富于动感，具有很强的表现力。常用的技巧可以归结为以下几种类型：
1．动态刷新层次中的内容，这样可以在不影响窗口中其他内容的前提下，改变Web页面的部分内容；
2．使用JavaScript中的定时功能，不断改变层次对象的位置，让它移动起来；
3．使用JavaScript中的定时功能，让某一层次对象的显示范围不断改变，层次对象中的内容仿佛一点点被‘侵蚀’掉了；
4．控制层次对象间的重叠关系或改变某些层次的可见性，产生特殊的显示效果；
5．使层次对象响应鼠标、键盘事件，产生与用户的交互。
下面我们通过两个例子来体会一下如何使用JavaScript控制层次对象。例1中最初在窗口中显示一个黑色和一个灰色的“Slipping 1ayer”。当鼠标触及黑色文字所在的范围时，黑色文字开始向灰色文字移动。直至两个层次几乎重叠在一起。两个层次对象中的文字重叠在一起后，产生了类似阴影的效果。
例1：层次的移动与重叠
＜HTML＞
＜HEAD＞
＜TITLE＞Loyer Sample l＜／TITLE＞
＜SCRIPT LANGUAGE=“Javascript1．2”＞
functton move()
{
if （document．MyLayer．1eft＜200）｛
dOCument．MyLayer．1eft ＋＋；
intervallD=setTimeout（’move（）'，35);
}
}
＜／SCRIPT＞
＜／HEAD＞
＜BODY>
＜B＞＜1＞
＜LAYER name=bgLayer left＝202px top=51px＞
＜FONT cOl0＝bbbbbb size=＋3＞slipping 1ayer＜／FONT＞
＜／LAyER＞
＜LAYER name=MyLayer 1eft=0px top=50px onMouseover＝“move（）”＞
＜FONT color＝666666 size＝＋3＞s1i1pping 1ayer＜／FONT＞
＜／LAYER＞
＜／l＞＜／B＞
＜／BODY＞
＜／HTML）
下面的例子中展示了如何刷新层次中的内容，以及如何改变层次的显示范围。通过Clip参数来定义层次中可见的矩形范围。默认情况下，浏览器显示层次中的全部内容。但我们可以通过设置Clip参数来控制层次中显示的内容。例中，我们首先将层次中显示范围逐步缩小，直至窗口中不显示任何内容。然后对层次中所包含的文字信息进行更新，在逐步扩大显示范围，让读者看到更新后的内容。
例2：层次内容的刷新与显示范围的改变
＜HTML＞
＜HEAD＞
＜TITLE＞Layer samp1e 2＜／T1TLE＞
＜SCRIPT LANGUAGE=“Javascr1pt1．2”>
var direct=1；
function move（）
{
if (document.MyLaye.clip.bottom==document.MyLayer.clip.
top){
direct=-1
document. MyLayer．document．wrlte（“＜Hl＞What's New！＜／H1＞”)；
document.．MyLayer．document．c1ose（）；
}
if（document．MyLayer．c1ip．tOp==0）｛
direct=1；
document MyLaer.document．wrlte（“＜H1＞samp1e TW0＜／Hl>”）;
document．MyLayer．document．c1ose（）；
}
document. MyLayer．cIip．1eft=document．MyLaye＝．c11p．1eft ＋3*dlrect;
document.MyLayer.clip.right=document.MyLayer.clip.right-3*direct;
document. MyLayer. bottom=document．MyLayer． c1ip。
bottom-direct ；
intervaIID＝setTimeout（’move（），， l00）;
{
＜／SCRIPT>
＜／HEAD＞
＜BODY onload=“move（）”＞
＜LAYER name=MyLayer＞＜／LAYER＞
＜／BODY＞
＜／HTML＞
JaVaScript使得浏览器不再仅仅是一个静态显示文字、图形信息的平台。它使得制作Web页面不再是一件枯燥乏味的事情，而通过制作各种各样的动态Web页面，可向读者展示你丰富的想象力和创造力。
（林炜 李梅）