第6章利用JavaScript开发动态文档.doc

第6章利用JavaScript开发动态文档目录第6章利用JavaScript开发动态文档16.1 简介16.2元素定位26.2.1绝对定位26.2.2相对定位56.2.3 静态定位66.3 移动元素66.4元素可见性96.5修改颜色和字体106.5.1修改颜色106.6 动态内容136.7 堆叠元素166.8定位鼠标光标196.9 响应鼠标单击216.10 缓慢移动元素226.11拖放元素25我们可将动态XHTML文档通俗地定义为当通过浏览器进行显示时，还可以按照某种方式进行修改的文档。提供动态文档的最常用的客户端方法是使用JavaScript操纵显示文档的DOM对象。显式的用户交互请求可以触发对文档的修改，同样，也可以通过定期修改文档，或者当浏览器事件发生时修改文档。XHTML元素初始时可能会位于浏览器中任意给定的位置。但是，如果按照某种特殊的方式对元素进行定位，那么可以动态地将元素移动到显示窗口中的其他位置。可以使元素不可见，也可以使元素重新出现。文档的背景色和前景（元素）色也都是可以改变的。显示文本的字体、字体大小和字体样式也可以改变。甚至元素的内容都可以改变。文档中的重叠元素可以按某种自上向下的堆叠顺摩进行定位，堆叠顺序也是可以动态修改的。当在文档上单击鼠标时，可以确定光标在浏览器窗口中的位置。还可以使元素在浏览器窗口中四处缓慢移动。最后，可以将元素定义为允许用户将它们拖放到浏览器窗口的任意位置。本章将对这些内容展开讨论。6.1 简介动态XHTML并不是一种新的标记语言。它是一个技术集合，可供动态修改通过XHTML描述的文档。确切地讲，所谓动态XHTML文档，其含义是指可在文档已显示并仍在显示时通过用户交互或浏览器事件，对其标签属性、标签内容或者元素样式属性进行修改。可通过嵌入式的脚本来完成此类修改，脚本可以将文档元素作为相关文档对象模型(DOM)结构中的对象来访问。各种不同浏览器对动态XHTML的支持并不统一。与第5章一样，本章的讨论限定在W3C标准中的方法而不是某一种浏览器供应商所定义的特性。本章中的所有示例，除了6.11节之外，使用的都是DOM 0事件模型，因此都可以在IE8和FX3浏览器中正确显示。6.11节中的示例使用的是DOM 2事件模型，这是因为如果采用DOM 0事件模型将无法按照标准方式进行设计。由于IE8不支持DOM 2事件模型，因此，该节中的示例无法在IE8中正确显示。本章将讨论如何利用客户端JavaScript来实现基于XHTML文档的用户交互。第810章将讨论如何利用服务器端技术来实现基于XHTML文档的用户交互。6.2元素定位 在能够实现HTML 4.0的浏览器问世之前，Web站点的开发人员几乎无法控制HTML元素在文档中的布局。在很多情况下，HTML文件中的元素就是简单地放到文档中，就像在使用文字处理器那样直接将文本放到文档中填满一行，开始一个新行，再填满这一行，诸如此类一直持续下去。HTML表格为元素布局提供了一种分栏框架，但不够灵活，并且显示所需的时间也非常长。不过，缺乏强大和快速的元素布局控制方式这一情况随着1997年W3C的层叠样式表定位(Cascading Style Sheets-Positioning，CSS-P)的发布而结束了。CSS-P完全得到了IE8和FX3的支持。CSS-P不仅能够用于将任意元素定位到文档显示窗口的任意位置，能够动态地将某个元素移动到显示窗口的某个新位置，还能够利用JavaScript修改元素的定位样式属性。这些样式属性的名称为left和top，分别表示位于左方和上万的某个参考点与元素所处位置之间的距离。将另一个样式属性position与属性left和top联合使用能够在更高层次上控制元素的布局和移动。position属性有三个可能的取值，分别为absolute、relative以及static。6.2.1绝对定位将属性position的值设定为absolute，其含义为元素在文档显示窗口中的位置与其他元素的位置无关。例如，如果需要设定某个文本段落的位置为距离显示窗口的左边缘100像素，离显示窗口顶部边缘200像素，那么可采用如下元素进行设定。- text -绝对定位的一种应用是将某一组特殊的文本与一组普通的文本段落相叠加，以便产生类似于纸面上的水印效果。可以把一组字母之间留有间距的浅灰色较大斜体文本作为特殊文本，它能够使普通文本及其自身都比较清晰易读。下面的XHTML示例文档实现了这种格式的特殊文本。在这个示例中，显示了一组对苹果进行描述的正常文本段落。与该段落相叠加的是一个不太引人注意的消息文本APPLES ARE GOOD FOR YOU。下面给出该示例文档： Absolute positioning /* A style for a paragraph of text */ .regtext tfon.t-family: Times; font-size: 14pt; width: 600px /* A style for the text to be absolutely positioned *./ .abstext tposition: absolute; top: 25px; left: 50px; font-family: Times; font-size: 24pt; font-style: italic; letter-spacing: lem; color: rgb(102r102,102); width: 500px Apple is the common name for any tree of the genus Malus,of the family Rosaceae. Apple trees grow in any of the temperate areas of the world. Some apple blossoms are white,but most have stripes or tints of rose. Some apple blossoms are bright red. Apples have a firm and fleshy structure that grows from the blossom The colors of apples range from green to very dark red. The wood of apple trees is fine-grained and hard. It is, therefore. good for furnitureconstruction. Apple trees have been grown for manycenturies. They are propogated by grafting because theydo not reproduce themselves. APPLES ARE GOOD FOR YOU 图6-1展示了absPos.html的显示结果。图6-1 absPos.html的显示结果需要指出的是，普通文本和特殊文本样式中都包含了width属性。此处使用这一属性可以保证特殊文本能够均匀嵌入到普通文本中。如果没有这个属性，文本将超出浏览器显示窗口的右边框。当然，浏览器窗口的宽度因客户端而异，甚至对同一个客户端来说，每一分钟也都可能不相同，这是因为用户可能随时调整浏览器窗口的大小。当一个元素在另一个定位元素（指定了position属性的元素）内部进行绝对定位时，那么top和lefi的属性值将从这个外部元素的左上角（而不是从浏览器窗口的左上角）开始测量。为了演示这种嵌套元素的布局，此处对上一个示例文档absPos.html进行了修改，将普通文本的位置修改为距离顶部100像素、距离左边框100像素。并且利用标签和将特殊文本嵌入普通文本中。由此得到的文档如下所示，文件名为absPos2.html。 Nested absolute positioning /* A style for a paragraph of text */ .regtext font-family: Times; font-size: 14pt; width: 500px; position : absolute; top: lOOpx; left: lOOpx; /* A style for the text to be absolutely positioned */ .abstext position: absolute; top: 25px; left: 50px; font-family: Times; font-size: 24pt; font-style : italic; letter-spacing : lem; color : rgb (102, 102, 102) ; width : 400px; Apple is the common name for any tree of the genus Malus, of the family Rosaceae. Apple trees grow in any of the temperate areas of the world. Some apple blossoms are white. but most have stripes or tints of rose. Some apple blossoms are bright red. Apples have a firm and fleshy structure that grows from the blossom. The colors of apples range from green to very dark red. The wood of apple trees is fine-grained and hard. It is, therefore, good for furniture construction. Apple trees have been grown for many centuries. They are propagated by grafting because they do not reproduce themselves. APPLES ARE GOOD FOR YOU 图6-2展示了absPos2.html的显示结果。图6-2 absPos2.html的显示结果6.2.2相对定位如果只将元素的position属性设定为relative，而没有指定元素的top和left属性值，那么这样的元素在文档中的位置好像没有设定position属性一样。但是，这样的元素以后可能会移动。如果为top和left属性指定了值，那么元素将会从原来的位置（即还没有设定top和left时的位置）移开，移动量是这两个属性指定的值。例如，假定文档中包含两个按钮，position属性值为默认值static。那么它们将紧靠着位于同一行中，当然前提是它们所在的行水平空间足够大。如果这两个按钮的position属性设定为relative，并将第二个按钮的left属性设定为50px，这样，第二个按钮将向右偏离它原来所处的位置50像素。在某个元素绝对定位于另一个元素中的情况下，或者是在元素相对定位的情况下，属性top和left如果取负值，其作用为分别将元素向上和向左移动。相对定位可以实现元素定位中的很多特殊效果。例如，可通过将标签的值增大或者减小，令其偏离原来的位置，从而创建上标和下标。在下例中，将一行文本的字体设定为普通字体、大小为24磅。一个单词嵌入在这行文本中，字体为斜体、大小为48磅、字体颜色为红色。正常情况下，这个特殊单词的底部将与这个文本行剩余部分的底部对齐。在这个示例中，需要将这个特殊单词在这一行的垂直方向上居中，因此position属性设定为relative、top属性设定为10像素，于是这个特殊单词的高度相对于环绕文本降低了10像素。由此得到的XHTML文档如下所示，文件名为reIPos.html: Relative positioning Apples are GOOD for you. 图6-3展示了relPos.html的显示结果。图6-3 relPos.html的显示结果。6.2.3 静态定位position属性的默认值为static。静态定位的元素在文档中的位置与position属性值为relative而没有指定top和left属性值的元素一样。它们之间的区别在于静态定位的元素初始条件下不熊设定top和left属性，以后也不能修改所在的位置。因此，不能将静态定位的元素从正常位置移开，以后也不能从这个位置移动该元素。6.3 移动元素前面已经提到，如果某XHTML元素的position属性值为absolute或者relative，那么该元素是可以移动的。元素的移动非常简单：修改top或者lefi属性值就将导致元素在显示窗口中移动。如果position属性值为absolute，那么元素将移动到top和lefi属性值指定的位置；如果position属性值为relative，那么元素将从原有位置开始移动，移动距离为top和left属性值的大小。在下面的示例中，一张图片被绝对定位在显示窗口中。该文档中还包含了两个文本框，其标签分别为x coordinate和v coordinate。在这两个文本框中，用户可以输入该图片的left和top属性的新值。当按下标签为Move It的按钮之后，图片的left和top属性将修改为文本框中的值，元素将移动到这个新位置。这个示例利用了一个JavaScript函数来修改left和top属性的值，此函数单独保存为一个文件。虽然将需要移动的元素的id发送给实现元素移动的函教这种方式并不是必须的，但这里为了证明该函数可以应用到任何数目的不同元素，还是将元素的id发送给了该函数。这两个文本框的值也作为参数发送给了函数。实际的参数值是文本框的DOM地址加上value属性值，这为文本框的值提供了完整的DOM地址。需要注意的是，由于top和left是样式属性，因此此处在需要移动的图片的DOM地址之后附加了style属性。因为从文本框输入的top和left值只是数字的字符串表示，但top和left属性的末尾必须是某种单位名称的缩写形式，所以事件处理程序在将属性值赋给top和left属性之前要先将px连接到每个属性值上。此文档名为mover.html，下面给出此文档及相关的JavaScript文件： Moving elements x coordinate : y coordinate : /mover.js/ Illustrates moving an element within a document/ The event handler function to move an elementfunction movelt (movee, newTop, newLeft) dom = document.getElementByld (movee).style;/ Change the top and left properties to perform the move/ Note the addition of units to the input values domtop = newTop + pxi; dom.left = newLeft + px;图6-4和图6-5分别展示了图片在mover.html中的初始位置和移动后的新位置。图6-4 mover.html的显示效果（在按下Move It按钮之前）图6-5 mover.html的显示效果（在按下Move It按钮之后）6.4元素可见性利用文档元素的visibility属性可以将它们指定为可见或者隐藏。因此，该元素两个可能的取值也自然应该是visible(可见)和hidden(隐藏)。通过一个窗口小部件，用户就可以控制某个元素是否可见。下面的示例显示了一张图片，并且允许用户使用一个按钮来控制该图片的显示状态是可见还是不可见。事件处理程序仍然是一个独立文件。 Visibility control /showHide.js/ Illustrates visibility control of elements/ The event handler function to toggle the visibility/ of the images of Saturnfunction fliplmag() dom = document.getElementByld(saturn).style;/ Flip the visibility adjective to whatever it is not nowif (dom.visibility = visible) dom.visibility = hidden;else dom.visibility = visible;6.5修改颜色和字体可以动态修改文档的背景色和前景色，同样也可以动态修改文本的字体属性。6.5.1修改颜色颜色的动态修改比较简单。下面的示例文档为用户提供了两个文本框，可供用户输入颜色说明，其中一个是针对文档背景色，另一个是针对前景色。其中输入的颜色说明可以按照CSS中颜色属性设定的三种方式来指定。不管什么时候，当其中一个文本框的内容发生变化时，都将调用一个JavaScript函数来对文档的某个相应的颜色属性(backgroundColor或者color)进行修改。该函数一共有两个参数，其中第一个参数用于指定新设定的颜色是针对背景还是针对前景的；第二个参数用于指定新设定的颜色。新设定的颜色是文本框的value属性值，可以由用户进行修改。在这个示例中，事件处理函数是在XHTML文本框元素中调用的。这就为引用元素的DOM地址提供了一种非常简单的方式。在此情况下，JavaScript中的this变量就是一个对该元素对象的引用。对这样一个对象的引用就是该对象的DOM地址。因此，在文本元素中，this变量的值就是这介文本元素的DOM地址。所以，在下面的示例中，this.value将作为事件处理函数的实参。由于是在一个输入元素中调用函数，因此，this.value就是这个输入元素值的DOM地址。此文档名为dynColors.html，下面给出此文档及相关的JavaScript文件： Dynamic colors This small page illustrates dynamic setting of the foreground and background colors for a document Background color: Foreground color: / dynColors.js/ Illustrates dynamic foreground and background colors/ The event handler function to dynamically set the/ color of background or foregroundfunction setColor(where,newColor) if (where = background) document.body.style.backgroundColor = newColor; else document .body . style . color = newColor;6.5.2 修改字体Web用户已经习惯了当鼠标光标位于文档中的链接上面时，这些链接的颜色将发生变化。当鼠标光标置于文档元素上时，通过利用鼠标事件mouseoVer来触发JaVasc邱t事件处理程序，可以修改文档中任何元素的任意属性，包括文本。因此，当鼠标光标位于文本上面时，文本的字体样式和字体大小以及前景色和背景色都可以进行修改。在鼠标光标离开文本后，利用鼠标事件mouseout来触发相应的事件处理程序又可以将文本恢复到原来的样式。如果CSS属性名是没有连字号的单一单词时，则相关的JaVaScript属性名与CSS属性名相同。但是，如果CSS属性名包含连字号时，如fontsize，则相关的JaVaSc邱t属性名就不同于CSS属性名（因为JaVaSc邱t属性名不能包合连字号）。按照惯例，当CSS属性名包含连字号时，则删除连字号，并大写连字号后面的那个字母，以此作为相关的属性名。因此，与属性fontsize相关的属性名是fontSize。在下面的示例文档中，嵌入了特定单词的语句是唯一的元素。因为此特定单词是span元素的内容，所以可以更改元素的属性。该文档的前景色为默认的黑色。单词的颜色为蓝色。当鼠标光标移动到该单词上面时，其颜色将变为红色，字体样式将变为斜体，字体大小将从16磅变为24磅。当鼠标光标移开此单词时，单词将恢复原状。此文档名为dynFont.html，下面给出该文档： Dynamic fonts .regTextfont:16pt Times New Roman .wordText color:blue; The state of Washington produces many of our nations apples. 需要注意的是，在此示例中，事件处理程序嵌入在标记中。这是不需要将JavaScript单独保存为文件的少数几种情况中的一种。图6-6和图6-7分别展示了当鼠标光标不在特定单词上面和位于特定单词上面时文橼dynFont.html在浏览器中的显示效果。图6-6 当鼠标光标不在单词上面时dynFont.html的显示效果图6-7 当鼠标光标位于单词上面时dynFont.html的显示效果6.6 动态内容前几节分别介绍了如何动态修改元素的位置、元素的可见性、元素颜色、背景色以及文本字体的样式。本节将讨论如何修改XHTML元素的内容。元素内容是通过元素对应的JavaScript对象的value属性来访问的。因此，修改元素的内容与修改元素的其他属性并没有太大区别。下面的示例将展示如何使用动态内容。一个与其他表单元素相关联的文本区域元素能够为浏览器用户填充表单提供帮助，这个文本区域一般称为帮助框。帮助框的内容可以根据鼠标光标所在的位置而不断变化。当光标位于某个输入框时，帮助框将显示如何填充该输入框的建议信息。当光标离开这个输入框后，帮助框中的内容将发生变化，以显示当前对应的帮助信息。在这个示例中，JavaScript脚本中定义了一个消息数组，这个数组中的元素将在帮助框中显示。当鼠标光标位于某个输入框上面时，利用mouseover事件来调用事件处理函数将帮助框中的内容修改为合适的值（与该输入框相关联的值）。这个值是通过发送给事件处理函数的参数指定的。当鼠标光标离开这个输入框后，利用mouseout事件来调用事件赴理函数以便将帮助框中的内容恢复为“标准”值。下面给出此标记文档及相关的JavaScript文件： Dynamic values Customer information Name : Email : To create an account, provide the following: User ID: Password : This box provides advice on filling out the formon this page. Put the mouse cursor over any inputfield to get advice. / dynValue.js/ Illustrates dynamic values var helpers = Your name must be i