動(dòng)態(tài)HTML教程.doc

(第1章 動(dòng)態(tài)HTML教程)動(dòng)態(tài)HTML教程作者：佚名1.1第一天經(jīng)過(guò)微軟和Netscape關(guān)于瀏覽器大戰(zhàn)新聞發(fā)布會(huì)以及種種傳聞和無(wú)休止的辯論之后，你從新發(fā)布的這兩種4.0版的瀏覽器中得到了什么呢？只是一個(gè)占據(jù)了你的硬盤40-MB空間的龐大怪物？還是可以推動(dòng)媒體發(fā)展的令人興奮倍受鼓舞的充滿活力的新生事物？除了一些有能力制定4.0版本規(guī)格的大型站點(diǎn)之外，實(shí)際上動(dòng)態(tài)HTML還沒(méi)有真正廣泛應(yīng)用于互聯(lián)網(wǎng)。如果你不了解動(dòng)態(tài)HTML的含義，你應(yīng)該了解dHTML只能應(yīng)用于最新版的瀏覽器，即InternetExplorer4和NetscapeNavigator4。這兩種瀏覽器對(duì)于動(dòng)態(tài)HTML的支持并不相同，所以目前缺少一種編寫dHMTL網(wǎng)頁(yè)的通用方式。這就是動(dòng)態(tài)HTML不能在互聯(lián)網(wǎng)中得到廣泛應(yīng)用的原因。網(wǎng)站開發(fā)者為了使自己的網(wǎng)頁(yè)讓盡量多的人看到，寧可使網(wǎng)頁(yè)的編寫臃腫不堪也不敢使用動(dòng)態(tài)HTML使自己的網(wǎng)頁(yè)具備更高的效率。因?yàn)橛脛?dòng)態(tài)HTML編寫的網(wǎng)頁(yè)在這兩種廣泛使用的瀏覽器中顯示的效果有很大的區(qū)別。我們將學(xué)習(xí)使用串接樣式表編寫網(wǎng)頁(yè)并利用Javascript給網(wǎng)頁(yè)加入動(dòng)畫。如果某些用戶認(rèn)為在網(wǎng)頁(yè)中加入滿天飛的動(dòng)畫實(shí)在是無(wú)益的勞動(dòng)，那么我還要講授一些只有動(dòng)態(tài)HTML才能做到的非常實(shí)用的動(dòng)態(tài)用戶界面。我們將充分結(jié)合我們大腦兩個(gè)半球的優(yōu)勢(shì)編寫動(dòng)態(tài)的事件驅(qū)動(dòng)的動(dòng)畫，這種動(dòng)畫可以根據(jù)用戶的指令進(jìn)行變化，如果這些還不足夠吸引你，我們還將應(yīng)用結(jié)構(gòu)、數(shù)組循環(huán)、對(duì)象引用以及更多的串接樣式表使你擁有編寫可以令任何夢(mèng)想都變成現(xiàn)實(shí)的結(jié)構(gòu)化網(wǎng)頁(yè)編程能力。1.2你需配備的工具坦白的地說(shuō)，動(dòng)態(tài)HMTL不是為初學(xué)者準(zhǔn)備的教程。要引用動(dòng)態(tài)HTML，你必須熟悉3中不同的技術(shù)：HTML、樣式表和JavaScript。動(dòng)態(tài)HTML網(wǎng)頁(yè)實(shí)際上就是這3種技術(shù)的集成。所以第1天的課程只是一堂復(fù)習(xí)課。你的作業(yè)就是要重溫以前所了解的關(guān)于這3種技術(shù)的知識(shí)。不是很難，但你至少要掌握這3種技術(shù)的語(yǔ)法。對(duì)于JavaScript,建議你先閱讀Javascript教程。你應(yīng)該特別注意學(xué)習(xí)一下第2日教程中關(guān)于變量的知識(shí)，第3日教程中文件對(duì)象模塊（DOM）的知識(shí)，第4日教程中的循環(huán)和數(shù)組，以及在表單中通過(guò)引用來(lái)控制對(duì)象的技巧。關(guān)于串接樣式表的內(nèi)容，你可以閱讀5日精通樣式表教程熟悉一下樣式表的語(yǔ)法。你還應(yīng)該閱讀CSS定位一文，學(xué)習(xí)如何利用樣式表布局頁(yè)面。至于HTML，你應(yīng)該熟悉div和span標(biāo)簽。我并不希望你閱讀和記住所有這些內(nèi)容，你只需瀏覽一下，知道所需要的知識(shí)在什么位置可以找到就可以了。1.3這五天的學(xué)習(xí)計(jì)劃這里是本教程所要講授的內(nèi)容：第2日：利用CSS定位生成在兩種瀏覽器都可以瀏覽的網(wǎng)頁(yè)布局，以及如何將文字和圖象疊放在彼此之上。第3日利用你的布局并制作動(dòng)畫效果。第4日用動(dòng)態(tài)HTML建立用戶界面，以及如何隱藏和顯示界面的元素。第5日：更深入地了解動(dòng)態(tài)HTML以及常見的問(wèn)題。明天見。2.1第二天在Nadav的DHTML揭密一文中所述，動(dòng)態(tài)HMTL網(wǎng)頁(yè)利用串接樣式表布局，并利用Javascript控制網(wǎng)頁(yè)元素。實(shí)際并不復(fù)雜或有很多的規(guī)定。我們所需要作的只是要給網(wǎng)頁(yè)加入樣式，能使其運(yùn)動(dòng)，并且在兩種主要的瀏覽器中都能正確顯示。精通我們將用CSS-P布局網(wǎng)頁(yè)，這是學(xué)習(xí)動(dòng)態(tài)HTML的第1步。學(xué)習(xí)完定位元素之后，我們將接著學(xué)習(xí)編寫使其動(dòng)態(tài)顯示的腳本。大多數(shù)用于設(shè)計(jì)和頁(yè)面布局的程序或文件格式必須現(xiàn)生成box，它們的寬度和高度可以改變，它們還能使你控制將對(duì)象疊放在對(duì)象之上。CSS-P的原理與其相似，你先用HTML定義一個(gè)容器（為了便于具備跨平臺(tái)應(yīng)用的兼容性，你最好實(shí)用DIV或SPAN標(biāo)簽），設(shè)置其水平和垂直位置，然后設(shè)定哪個(gè)對(duì)象應(yīng)該疊放在哪個(gè)對(duì)象之上。真的很簡(jiǎn)單，它能象大多數(shù)人（尤其那些利用表格定位和布局的人）希望的那樣讓HTML發(fā)揮功能。你只需以一種不同的思維角度來(lái)思考網(wǎng)頁(yè)的布局，本教程將重點(diǎn)講述一些基本的布局技巧明天我們將利用Javascript控制你的網(wǎng)頁(yè)布局。2.2深入動(dòng)態(tài)HTML中大多數(shù)的內(nèi)容都要用到DIV標(biāo)簽作為容器。(在串接樣式表和CSS定位的規(guī)范草案中規(guī)定可以將任何對(duì)象定位，但Netscape的瀏覽器還不支持這項(xiàng)規(guī)定。所以你必須用DIV標(biāo)簽作為類屬容器），在容器內(nèi)加入對(duì)象然后再定位。我們先為本教程中的范例生成一個(gè)box。htmlheadtitledramatispersonae/titlestyle!-#timposition:absolute;left:10px;top:10px;width:140px;height:91px;-/style/headbodydivid=tim/div/body/html這里是box的顯示結(jié)果（為了辨認(rèn)的方便，我給它加了一個(gè)紅色邊框）現(xiàn)在我們有了一個(gè)空的box，其ID名稱為tim，其位置在距窗口左邊10個(gè)像素，距窗口頂部10個(gè)像素的位置?，F(xiàn)在它還沒(méi)有體現(xiàn)出動(dòng)態(tài)HTML的魅力，所以我們?cè)谶@個(gè)box中填入Tim的圖片，并給它加一點(diǎn)說(shuō)明：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.在3.2版本的HTML的網(wǎng)頁(yè)（即不能支持動(dòng)態(tài)HTML的網(wǎng)頁(yè)）中，你將會(huì)注意到文字一直流到屏幕邊緣之外，而Tim的圖片朝左浮動(dòng)。Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.實(shí)際上是它浮動(dòng)到了本文所在的表格單元的左邊。這是一個(gè)重要的區(qū)別。當(dāng)你將HTML放在一個(gè)已經(jīng)被定位了的DIV之內(nèi)時(shí)，你可以把它看作是放在了一個(gè)表格單元中（或者象在其他出版系統(tǒng)之內(nèi)的制作方法那樣）。在支持HTML3.2以后的版本的網(wǎng)頁(yè)中，你可以看到文字自動(dòng)回行：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.現(xiàn)在這個(gè)DIV標(biāo)簽里已經(jīng)填充了內(nèi)容，讓我們利用CSS-P的LEFT和TOP選項(xiàng)技將其定位。htmlheadtitledramatispersonae/titlestyle!-#timposition:absolute;left:300px;top:10px;width:140px;height:91px;-/style/headbodydivid=tim/div/body/html顯示結(jié)果:Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.2.3相對(duì)和絕對(duì)定位你可能會(huì)注意到在本例中我使用了相對(duì)定位。在相對(duì)定位和絕對(duì)定位中有一個(gè)很微妙但確確實(shí)實(shí)的區(qū)別。當(dāng)你將一個(gè)對(duì)象用絕對(duì)定位指令定位時(shí)，你實(shí)際將其從你的HTML文件流中抽了出來(lái)，將其直接根據(jù)網(wǎng)頁(yè)的左上角的位置進(jìn)行定位。這種情況下各個(gè)對(duì)象有可能互相重疊在一起。相對(duì)定位并不指根據(jù)百分比值或其他某個(gè)元素的位置來(lái)定位這個(gè)元素的位置。它實(shí)際占據(jù)的就是它在這個(gè)HTML文件中的位置，它的定位起點(diǎn)基于HTML頁(yè)所在的位置，這里是一個(gè)例子：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.這兩個(gè)句子中，單詞Webmonkey都定位在距左邊200像素的位置。第1個(gè)句子用的是絕對(duì)定位，第2個(gè)用的是相對(duì)定位。注意相對(duì)定位的句子中空出了相當(dāng)于單詞Webmonkey長(zhǎng)度的空間，而絕對(duì)定位了的句子中沒(méi)有這個(gè)空間，如果我給兩個(gè)句子都加一個(gè)top參數(shù)值，則你會(huì)看到絕對(duì)定位了的句子將飄在文章的頂部，而相對(duì)定位的句子則就在它所在的句子的位置之下：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.現(xiàn)在我們已經(jīng)了解了兩種定位的不同。我們作一個(gè)小練習(xí)。我們用CSS-P作一個(gè)網(wǎng)頁(yè)。這里是該網(wǎng)頁(yè)的屏幕快照。試著做出這個(gè)網(wǎng)頁(yè)，然后我們將制作更復(fù)雜的布局（提示：你可以用這個(gè)屏幕快照中的圖象作為網(wǎng)頁(yè)背景圖象來(lái)幫助你定位。注意將字體采用ComicSansMS）。2.4學(xué)習(xí)分層技術(shù)你可以注意到上面的那個(gè)布局用表格就能很輕易地做到。但是串接樣式表比表格有一項(xiàng)獨(dú)特的優(yōu)勢(shì)：分層。你肯定注意到你無(wú)法用表格將幾幅圖片或文字疊放在一起。一般情況下，如果人們希望實(shí)現(xiàn)這種效果只有制作一幅位圖，在圖片中制作出文字或圖象疊放在一起的效果，然后將圖片放在網(wǎng)頁(yè)中。而利用動(dòng)態(tài)HTML，則可以利用分層順序?qū)B放顯示各個(gè)對(duì)象，例：HereisAaroninfrontofadesk.HereisAaronbehindadesk.在這個(gè)例子中，Aaron在他的桌子后面，Aaron的圖片首先出現(xiàn)在源代碼中：divid=aaronimgsrc=/dhtml/aaron.gif/divdivid=deskimgsrc=/dhtml/extraDesk.gif/div但是如果我們想讓Aaron站在桌子前面，我們可以這樣寫HTML代碼：divid=deskimgsrc=/dhtml/extraDesk.gif/divdivid=aaronimgsrc=/dhtml/aaron.gif/div這種類型的分層在HTML暗示編寫。所以搭建動(dòng)態(tài)HTML網(wǎng)頁(yè)的方法之一就是將各個(gè)對(duì)象按照顯示的前后層次順序排列排在顯示底層的對(duì)象最先列出，而排在顯示最上層的對(duì)象在源代碼順序的最后列出。但是這種方式不一定不出問(wèn)題。很多時(shí)候象在源代碼中的順序和它最后的顯示順序必須沒(méi)有任何關(guān)系。而此時(shí)就需要用到z-indexCSS屬性。這里是重新制作后的例子。這次的HTML標(biāo)識(shí)和一起一樣，但是對(duì)象采用了明示的z-index。Aaronhasaz-indexof2.Thedeskhasaz-indexof1.Aaronandthedeskhaveanimpliedz-index.兩個(gè)例子的HTML都是相同的，但CSS不同。styletype=text/css#aaronposition:absolute;left:8px;top:31px;width:79px;height:73px;z-index:2/stylez-index可以是一個(gè)正值或一個(gè)負(fù)值（帶負(fù)值的元素將位于母體元素的下面），它所造成的顯示效果為：如果一個(gè)對(duì)象的z-index比另一個(gè)元素大，則z-index為1時(shí)的視覺效果和Z-index為2時(shí)的視覺效果的區(qū)別相當(dāng)于1和1000Z之間的區(qū)別。2.5家庭作業(yè)這些定位的基本知識(shí)是你搭建跨平臺(tái)動(dòng)態(tài)HTML的第1步。明天我們將學(xué)習(xí)到動(dòng)態(tài)HTML的精華之處以及目前所受的局限。但是現(xiàn)在，讓我們作一個(gè)家庭作業(yè)。這里是act1,scene1。下載這些文件，然后將其按照屏幕快照的布局安排布局。明天我們還要將屏幕中的圖象制作出動(dòng)畫效果。所以你最好先把今天的作業(yè)完成了，因?yàn)槊魈斓恼n程中我們還要它。明天我們將陶醉在JavaScript的神奇魅力中。3.1第三天今天我們將開始學(xué)習(xí)動(dòng)態(tài)HTML最精彩的部分：動(dòng)態(tài)HTML編程。HTM之所以成功的原因之一在于它提供了在互聯(lián)網(wǎng)上展現(xiàn)網(wǎng)頁(yè)的統(tǒng)一方式。一旦你標(biāo)識(shí)了一個(gè)網(wǎng)頁(yè)，它在任何地方都可以看到。Javascript也是如此。及時(shí)它的版本會(huì)有很多種，但它的核心和語(yǔ)法是統(tǒng)一的，它在支持Javascript的所有瀏覽器中都可以應(yīng)用。CSS也具有統(tǒng)一的語(yǔ)法。在所有的瀏覽器中它的顯示結(jié)果也應(yīng)該是一致的。所以它能幫助你生成跨平臺(tái)風(fēng)格一致的動(dòng)態(tài)網(wǎng)頁(yè)。但是，還有一些小問(wèn)題。在1997中期時(shí)，Netscape和Microsoft都推出了自己的動(dòng)態(tài)HTML瀏覽器，但那時(shí)沒(méi)有一種規(guī)范編程語(yǔ)言同網(wǎng)頁(yè)元素之間的交流的統(tǒng)一規(guī)定。但是在那時(shí)已經(jīng)有了JavaScript同網(wǎng)頁(yè)中的圖象、鏈接和表單元素進(jìn)行交流的規(guī)范。然而這兩家公司對(duì)于如何控制網(wǎng)頁(yè)元素存在不同的見解。Netscape對(duì)JavaScript加入了一系列的對(duì)象，并引入了LAYER標(biāo)簽，伴隨產(chǎn)生的便是它的dHTML理念：或者采用LAYER標(biāo)簽分層的內(nèi)容分層，或者DIV標(biāo)簽的CSS定位，它們可以用Javascript的對(duì)象訪問(wèn)，而且它的屬性(left,top,visibility,和backgroundcolor)可以被控制。但是微軟走得更深入一些。它推出了全新的HTML生成引擎，它不僅能定位任何元素，還能改變對(duì)CSS設(shè)置的任何選項(xiàng)。（例如，你可以改變字體或你的EM標(biāo)簽)，而且，它還完善了文件對(duì)象模塊（DocumentObjectModel），使其能通過(guò)任何IE支持的編程或腳本語(yǔ)言訪問(wèn)。這兩種體制之間的明顯區(qū)別在于其語(yǔ)法。Netscape支持樹形語(yǔ)法：document.layerstopLayer.document.layerssubLayer.document.layersbottom.left而InternetExplorer將所有的HTML對(duì)象都放在一個(gè)水平結(jié)構(gòu)上，使你可以修改也是對(duì)象：bottom.style.left如果你在這種瀏覽器中使用了另一種瀏覽器支持的方法，則瀏覽器會(huì)顯示錯(cuò)誤信息。但是還有許多技術(shù)可以對(duì)這種不兼容性作出變通處理。一旦你掌握了其中的訣竅，你就可以左右逢源，無(wú)所不能。本課中將學(xué)習(xí)如何利用最少量的條件訪問(wèn)文件對(duì)象模塊DOM，然后我們將介紹一個(gè)將對(duì)象在屏幕中移動(dòng)的簡(jiǎn)單Javascript腳本。3.2微軟和網(wǎng)景不同的語(yǔ)法首先我們學(xué)習(xí)為兩種瀏覽器生成不同的動(dòng)態(tài)HTML。我不打算在此列出兩種瀏覽器各自的動(dòng)態(tài)HTML特點(diǎn)，我只列出兩種瀏覽器所支持的相同的動(dòng)態(tài)HTML功能。FunctionNavigatorExplorer改變某個(gè)區(qū)域的內(nèi)容:object.document.open();object.document.writeln();object.document.close();object.innerHTML識(shí)別不同的區(qū)域:根據(jù)母體對(duì)象的左邊定位:object.leftobject.style.left根據(jù)母體對(duì)象的頂部定位:object.topobject.style.top堆棧順序:object.zIndexobject.style.zIndex對(duì)象的可視性:object.visibilityobject.style.visibilityclipping區(qū)域:object.clipobject.style.clip背景圖象:object.backgroundobject.style.backgroundImage背景顏色:object.bgColorobject.style.backgroundColor你可以看到它們之間沒(méi)有完全相同的項(xiàng)目。似乎相同，但是對(duì)對(duì)象使用CSS時(shí)必須制定ID屬性，所以你只能對(duì)圖象、鏈接和表單使用該功能。所以為了編寫腳本，你必須設(shè)定很多條件。聽起來(lái)很痛苦，但其實(shí)還不象你想象的那么糟。3.3使其在兩種瀏覽器中都可用有很多中辦法可以利用Javascript設(shè)定條件。其中辦法是確定用戶所使用的瀏覽器的類型和版本，并據(jù)此作出評(píng)估。但現(xiàn)在我還發(fā)現(xiàn)了更好的解決辦法。瀏覽器類型和版本條件設(shè)定的第1個(gè)問(wèn)題是瀏覽器的改變的問(wèn)題。如果你將瀏覽器版本設(shè)定為InternetExplorer4.0和Netscape4.0，那么等5.0版的瀏覽器發(fā)布時(shí)你的網(wǎng)頁(yè)會(huì)發(fā)生什么情況？或者這兩種新發(fā)布的瀏覽器版本互相兼容，而你的腳本中都沒(méi)有考慮到這些問(wèn)題又會(huì)如何？所以根據(jù)瀏覽器類型和版本設(shè)定條件的方法不可行。更好的方法是根據(jù)功能設(shè)定條件。如果你對(duì)JavaScript比較熟悉的話，你一定知道Javascript的if語(yǔ)句中測(cè)試一個(gè)語(yǔ)句返回的是真true(1)還是假false(0)，然后它將根據(jù)返回的布爾值執(zhí)行一個(gè)語(yǔ)句。通常情況下它被用來(lái)測(cè)試某些變量的條件，例如：if(x=5)setTimeout(doSomething(),500);但是一個(gè)對(duì)象是否存在也可以作為被測(cè)試的條件。如果某個(gè)對(duì)象存在，則返回真，否則返回假。所以為了提供一個(gè)有效的測(cè)試條件，你必須從某個(gè)特定角度來(lái)測(cè)試一個(gè)對(duì)象的代表性質(zhì)以便應(yīng)用動(dòng)態(tài)HMTL。Netscape利用分層運(yùn)行動(dòng)態(tài)HTML。它的運(yùn)行方式同圖象數(shù)組在Navigator中的方式類似。你設(shè)定一個(gè)分層對(duì)象的數(shù)組，象對(duì)圖象的引用那樣設(shè)定引用方式。所以document.layersfoobar則是代表被相對(duì)定位或是絕對(duì)定位了的DIV的對(duì)象(在Netscape模式中，它必須是在你的文件NAME或ID屬性為foobar的一個(gè)絕對(duì)定位或相對(duì)定位了的DIV或SPAN)。然后你就可以設(shè)定上述各種屬性。你還可以用document.foobar來(lái)代表這個(gè)對(duì)象。在InternetExplorer中，則用一種水平的結(jié)構(gòu)來(lái)代表對(duì)象。所以ID或NAME屬性為foobar的DIV就是foobar，所以你可以用foobar.style.left來(lái)訪問(wèn)或設(shè)定這個(gè)對(duì)象的左邊的位置。還有許多種循環(huán)訪問(wèn)一系列對(duì)象的方法（非常有用）。在Explorer的文件對(duì)象模塊（DocumentObjectModel）中，對(duì)象可以代表所有在該對(duì)象之下的對(duì)象（objectobjectobject）。所以foobar.all包含所有包含在foobar之下的HTML標(biāo)簽。無(wú)論什么時(shí)候你都可以找到一個(gè)很好的類屬對(duì)象document.all，因?yàn)樗械木W(wǎng)頁(yè)中都有一個(gè)文件（document），因此它必然有一個(gè)document.all對(duì)象。3.4腳本如何運(yùn)行所以如果你想控制某個(gè)對(duì)象的位置，你應(yīng)該這樣編寫你的JavaScript:scriptlanguage=javascriptfunctionmoveIt()if(document.layers)document.truck.left-=5;if(document.truck.left0)document.truck.left=480elseif(document.all)truck.style.left=parseInt(truck.style.left)5;if(parseInt(truck.style.left)0)truck.style.left=480;if(document.layers)|(document.all)setTimeout(moveIt(),100);/script它的執(zhí)行結(jié)果應(yīng)該是:代碼的含義如下：如果客戶端支持document.layers對(duì)象,將名為truck的對(duì)象層左移5個(gè)位置.如果名為truck的對(duì)象層的位置小于0,則名為truck的對(duì)象層的的left屬性設(shè)置為480。但是，如果客戶端支持document.all對(duì)象,則將名為truck的HTML對(duì)象的樣式選項(xiàng)left的整數(shù)值減去5。如果名為truck的HTML對(duì)象的樣式選項(xiàng)left的整數(shù)值小于0，則將其數(shù)值設(shè)為480。如果客戶端支持document.all或document.layers對(duì)象中的任何一種，等候10秒鐘，然后執(zhí)行函數(shù)moveIt。現(xiàn)在你自己作一下這個(gè)程序。讓拖拉機(jī)在頁(yè)面中移動(dòng)。注意：你應(yīng)該采用行內(nèi)樣式，例：DIVid=truckstyle=position:absolute;left:20;top:20。3.5訪問(wèn)對(duì)象的一個(gè)技巧現(xiàn)在你已經(jīng)可以在頁(yè)面中移動(dòng)對(duì)象了。但是如果你需要將多個(gè)對(duì)象按照特定的順序移動(dòng)或者執(zhí)行多個(gè)事件觸發(fā)的行為時(shí)，不僅的代碼體積會(huì)增加（每次訪問(wèn)一個(gè)對(duì)象時(shí)你都必須使用一次if/then語(yǔ)句），而且每次都必須為某個(gè)行為鍵入document.truck.left是一件很煩人的事。在Netscape模塊中，當(dāng)你嵌入DIV時(shí)，文件對(duì)象模塊的層次結(jié)構(gòu)就會(huì)增加，如下：divid=foodivid=bardivid=sna/div/div/div要訪問(wèn)foo，則必須執(zhí)行document.foo,而要訪問(wèn)bar，則必須執(zhí)行document.foo.document.bar。而要訪問(wèn)sna，則必須執(zhí)行document.foo.document.bar.document.sna。我快要受不了啦啦啦！所以你必須解決引用對(duì)象時(shí)造成的代碼體積膨脹的問(wèn)題，還得避免每次移動(dòng)一個(gè)對(duì)象時(shí)必須設(shè)定條件。但你可以用一個(gè)技巧解決這個(gè)問(wèn)題。任何用JavaScript編寫過(guò)網(wǎng)頁(yè)的人都知道任何打開一個(gè)小窗口：windowID=window.open(name,/);這項(xiàng)指令就可打開一個(gè)小窗口，但是你還可以通過(guò)使用windowID作一個(gè)引用在繼續(xù)控制追趕窗口。例如windowID.location=/就可以改變窗口資源的定位。windowID.close()就可關(guān)閉該窗口。你所做的只是對(duì)一個(gè)Javascript對(duì)象設(shè)置一個(gè)引用。在動(dòng)態(tài)HTML中也可以使用同樣的技巧。你可能會(huì)注意到在上一頁(yè)的圖表中，大多數(shù)定位屬性的語(yǔ)法都很相似。只不過(guò)它們被用在了不同的對(duì)象上。我們可以用一個(gè)JavaScript例程解決上面的問(wèn)題。scriptfunctionsetup()if(document.layers)daTruck=document.truck;elseif(document.all)daTruck=truck.style;/script現(xiàn)在moveIt函數(shù)可以被改為functionmoveIt()daTruck.left=parseInt(daTruck.left)-5;if(parseInt(daTruck.left)0)daTruck.left=480;setTimeout(moveIt(),100);代碼短了一些，對(duì)吧？下面我們將使頁(yè)面這些圖象都動(dòng)起來(lái)。3.6制作互相追趕的動(dòng)畫效果現(xiàn)在你所能控制的屬性已經(jīng)不只是left和top了，當(dāng)然，還有z-index?，F(xiàn)在我們制作圖片互相追趕的效果。functionmoveMonkey(monkey,dir)if(document.all)varwtMonkey=document.all(monkey).style;elseif(document.layers)varwtMonkey=document.monkeyContainer.document.layersmonkey;if(parseInt(wtMonkey.left)150)dir=dir*-1;wtMonkey.zIndex=5-dir;wtMonkey.left=parseInt(wtMonkey.left)+dir;setTimeout(moveMonkey(+monkey+,+dir+),100);圖片的名字被傳遞給函數(shù)，函數(shù)則改變圖片的左邊的定位。然后進(jìn)行標(biāo)準(zhǔn)的功能檢查，為特定的瀏覽器設(shè)定引用參數(shù)。然后它改變z-index，如果圖片移動(dòng)到了桌子的任何一端，則函數(shù)改變圖片移動(dòng)的方向。注意這不是編制類屬JavaScript移動(dòng)例程的唯一方法。你可以隨意添加、減少或編寫自己的例程。下面是今天的家庭作業(yè)。將actI,sceneI作出動(dòng)畫效果。你可以使用上面所提供的代碼或者編寫你自己的代碼。當(dāng)你編寫例程時(shí)注意Netscape嵌入定位對(duì)象的方法。4.1讓我們編寫一些有用的東西如果你認(rèn)真閱讀了本教程并做了留給你的家庭作業(yè)的話，你心中肯定還存在這樣一個(gè)疑問(wèn)：這個(gè)動(dòng)畫是很有趣，但是你做的網(wǎng)站仍然是比較樸實(shí)無(wú)華的那種，所以動(dòng)態(tài)HTML對(duì)你來(lái)說(shuō)可能沒(méi)有太大的價(jià)值。沒(méi)關(guān)系，今天的教程就是針對(duì)你這樣的問(wèn)題制作的。今天我們將建立幾個(gè)用戶界面元素，處理用戶事件，動(dòng)態(tài)改變背景，自動(dòng)變換網(wǎng)頁(yè)內(nèi)容以及顯示或隱藏某些頁(yè)面對(duì)象。所有這些內(nèi)容都有很強(qiáng)的實(shí)用性。你最好能先了解JavaScript語(yǔ)言中關(guān)于鏈接事件的課程，以便對(duì)用戶事件具備初步的了解。在今天的課程中將經(jīng)常用到鏈接事件。4.2下拉菜單腳本讓我們編寫一些我們所熟悉的用戶界面元素下拉菜單，子菜單。這些元素和你現(xiàn)在正在瀏覽的窗口頂部的菜單條很類似。大多數(shù)操作系統(tǒng)都有一個(gè)類屬專用接口工具集，當(dāng)你需要應(yīng)用下拉菜單時(shí)就可調(diào)用該工具集。然后你可以設(shè)定被選項(xiàng)目的的名稱和執(zhí)行的行為。由于HTML不包含這樣的專用接口工具集，所以你必須建立自己的工具集。首先你必須描述它的外觀。我們?cè)诓藛螚l上加入一定的顏色以及描述各項(xiàng)功能的名稱，例如file、edit、view等等。當(dāng)你點(diǎn)擊該文字時(shí)，就會(huì)顯示該菜單項(xiàng)下的子菜單。在子菜單框中點(diǎn)擊相應(yīng)的菜單項(xiàng)目就可觸發(fā)某個(gè)執(zhí)行程序的行為。讓我們?cè)贖TML中編寫這樣的菜單。首先，你需要生成一個(gè)DIV作為頂部的菜單條：divid=menuBar/div現(xiàn)在將該菜單條放在頁(yè)面頂部，加上特定的顏色：styletype=text/css#menuBarposition:absolute;left:0;top:0;width:100%;height:22px;border:1pxsolid#99ffff;background-color:#99ffff;layer-background-color:#99ffff;/style則生成這樣一個(gè)DIV：你可能會(huì)對(duì)最后一條CSS規(guī)范不知所以然，這項(xiàng)是Netscape對(duì)CSS的擴(kuò)展，它指的是絕對(duì)定位了的元素的背景色。由于邊框設(shè)置為border:1pxsolid#99ffff;，所以有必要加入這一條使背景色延伸到DIV的邊框。否則背景色只能在DIV所包含的內(nèi)容底下顯示。4.3使菜單初具規(guī)模下面我們插入一個(gè)菜單目錄。我們將標(biāo)題設(shè)置為Menuitem。styletype=text/css#menuBarposition:absolute;left:0;top:0;width:100%;height:22px;border:1pxsolid#99ffff;background-color:#99ffff;layer-background-color:#99ffff;.daMenuposition:absolute;width:100px;height:22px;border:1pxsolid#99ffff;top:0px/style.divid=menuBar/divdivid=webmonkeyclass=daMenuMenuitem/div顯示結(jié)果如下：MenuItem下面在webmonkey菜單項(xiàng)下加入子菜單：style.moreMenuposition:absolute;width:100px;border:1pxsolidred;background-color:red;layer-background-color:red;top:22px;/style.divid=moreMonkeyclass=moreMenuAaronbrCaptainCursorbrCassandrabrChrisbrCourtneybrJeffbrJoannebrJeanPierrebrKlugbrKristinbrNadavbrTaylorbrThaubrTimbrWendybr/div同其他菜單項(xiàng)結(jié)合后顯示結(jié)果如下：MenuItemAaronCaptainCursorCassandraChrisCourtneyJeffJoanneJeanPierreKlugKristinNadavTaylorThauTimWendy下面我們?yōu)椴藛雾?xiàng)設(shè)定功能。首先要做的是選擇moreMenu類，并將其隱藏。因?yàn)橥ǔＧ闆r下，如果你不點(diǎn)擊菜單項(xiàng)，它不會(huì)顯示子菜單目錄。所以，你應(yīng)該加入下面的代碼：.moreMenuposition:absolute;width:100px;border:1pxsolidred;background-color:red;layer-background-color:red;visibility:hidden;top:22px;現(xiàn)在這個(gè)DIV仍然在頁(yè)面中，但瀏覽器不將它顯示出來(lái)。4.4完成菜單條的制作現(xiàn)在給菜單條加入腳本使其能響應(yīng)鼠標(biāo)的行為并執(zhí)行相應(yīng)的功能。我們利用visibility屬性隱藏子菜單項(xiàng)目并在菜單項(xiàng)目被點(diǎn)擊時(shí)顯示子菜單。處理visibility時(shí)，你會(huì)立刻遇到DOM不兼容的問(wèn)題。Netscape的DOM更多地受其LAYER標(biāo)簽和屬性的影響。所以即使在DOM中你將一個(gè)對(duì)象的visibility屬性設(shè)置為hidden（隱藏），Netscape也會(huì)將其顯示出來(lái)。如果你加入下面這條：if(daMenu.visibility=hidden)你所得到的不是樣式表語(yǔ)法的參數(shù)值，而是LAYERS語(yǔ)法的參數(shù)值。所以如果你設(shè)置document.foo.visibility=visible,則代碼將會(huì)按照你預(yù)想的那樣執(zhí)行，對(duì)象foo在屏幕中可以被看到。如果你用alert(document.foo.visibility)檢查參數(shù)值,則返回的數(shù)值是show。解決辦法是設(shè)置一些變量，用標(biāo)準(zhǔn)的條件并設(shè)定一個(gè)名為visible的變量用于Netscape中的show，在InternetExplorer中則設(shè)置visible。在Netscape中設(shè)置一個(gè)名為hide的變量，在InternetExplorer則用hidden。在相應(yīng)的字符串位置放入這些變量，則問(wèn)題就解決了。scriptif(document.layers)visible=show;hidden=hide;elseif(document.all)visible=visible;hidden=hidden;functionbarTog(menu)if(document.layers)daMenu=document.layersmenu;elseif(document.all)daMenu=document.all(menu).style;if(daMenu.visibility=visible)daMenu.visibility=hidden;elsedaMenu.visibility=visible;lastMenu=daMenu;/scriptbarTog函數(shù)所做的是設(shè)置標(biāo)準(zhǔn)的條件語(yǔ)句，如果在被傳送的變量菜單中設(shè)定的對(duì)象是visible，則隱藏該對(duì)象，否則就顯示該對(duì)象。然后將對(duì)該對(duì)象的引用傳遞給名為lastMenu的全局變量（這樣以來(lái)，以后你可以再關(guān)閉它）。接下來(lái)你要做的就是調(diào)用這個(gè)函數(shù)，所以在菜單條中你將Webmonkey設(shè)定一個(gè)anchor（錨區(qū)），并設(shè)定被點(diǎn)擊是執(zhí)行的行為。divid=webmonkeyclass=daMenuahref=#class=itemAnchoronclick=javascript:barTog(moreMonkey);returnfalse;Webmonkey/a/div這段代碼執(zhí)行barTog函數(shù)，并將應(yīng)該被打開或關(guān)閉的DIV的名稱傳遞給它。顯示結(jié)果如下。4.5使菜單具備相應(yīng)的功能下面要做的是給每個(gè)菜單條設(shè)定一個(gè)行為。你可以設(shè)定任何一種行為，不一定非得是動(dòng)態(tài)HTML。但由于本教程講的是動(dòng)態(tài)HTML，而我們的課題是將如何改變layers的visibility（可視性）屬性。所以我們?yōu)槊恳粋€(gè)菜單項(xiàng)目設(shè)定隱藏和顯示包含相應(yīng)的網(wǎng)猴圖象的層（layer）。scriptfunctionmenuItem(item)if(document.layers)daLast=document.layerslastItem;daItem=document.layersitem;elseif(document.all)daLast=document.all(lastItem).style;daItem=document.all(item).style;daLast.visibility=hidden;daItem.visibility=visible;lastMenu.visibility=hidden;lastItem=item;varlastItem=aaron;/script這段腳本仍然用我們的老朋友條件語(yǔ)句調(diào)用兩個(gè)對(duì)象，現(xiàn)調(diào)用item，然后是最后被打開的lastitem(lastItem的缺省設(shè)置是aaron)，并且該語(yǔ)句還要記憶被打開的最后一個(gè)菜單（我們?cè)赽arTog中設(shè)置的lastMenu）。設(shè)置完所有visibility后還記憶lastItem。下面需要給每個(gè)菜單項(xiàng)目加上相應(yīng)的anchor調(diào)用。ahref=#class=itemAnchoronclick=menuItem(captCursor);returnfalse這條代碼調(diào)用menuItem函數(shù)，并指示其顯示ID為captCursor的DIV?，F(xiàn)在將anchor錨定每個(gè)菜單項(xiàng)目并將每個(gè)DIV指向相應(yīng)的網(wǎng)猴的名稱。現(xiàn)在當(dāng)你從菜單中選擇相應(yīng)的菜單時(shí)就會(huì)顯示相應(yīng)的圖片?，F(xiàn)在你可以制作你自己的菜單并在其中加入自己的菜單項(xiàng)目，隱藏及顯示DIV，并在DIV中加入表單元素。明天的課程中我們將結(jié)合前面所學(xué)的知識(shí)作一個(gè)完整的展示。5.1排錯(cuò)現(xiàn)在，經(jīng)過(guò)四天的動(dòng)態(tài)HTML教程，你已經(jīng)知道如何制作動(dòng)畫和用戶界面。你可以定位對(duì)象，在網(wǎng)頁(yè)中移動(dòng)它們，用程序改變它們的z-index和可視性。你知道如何條件化不同的DOM和寫在Microsoft和Netscape的瀏覽器中都可用的文檔。也許你覺得用手工編碼太辛苦，于是你拋棄了文本編輯器，投入所見即所得的編輯工具的懷抱。但是不管你用哪中工具，你都會(huì)遇到一些問(wèn)題。比如你想真正讓導(dǎo)航條一直放在瀏覽器的右側(cè)。或者用戶訪問(wèn)你的站點(diǎn)時(shí)不停地調(diào)整瀏覽器的大小，于是Netscape用戶會(huì)抱怨所有的樣式信息突然消失（當(dāng)你調(diào)整窗口尺寸時(shí)，Netscape扔掉了所有的樣式信息）?；蛟S，你在制作動(dòng)畫，并把所有的演員放在后臺(tái)，讓他們等著進(jìn)入，但是有的人有一個(gè)非常大的高分辨率顯示器，能看出頁(yè)面邊緣的演員。你在使用動(dòng)態(tài)HTML時(shí)會(huì)遇到所有這些問(wèn)題。教程的最后一天將涉及其中的一些問(wèn)題。5.2放在底部和右面CSS在定位上的缺點(diǎn)是它只有l(wèi)eft和top屬性，但是沒(méi)有bottom或right。這就意味著你只能放一個(gè)對(duì)象在離瀏覽器窗口50個(gè)像素的位置，但是你不能只用CSS就能把對(duì)象放在離瀏覽器窗口右邊50像素的地方。這個(gè)問(wèn)題在CSS2中應(yīng)該能得到解決，樣式表的下一代specification正在出籠；在它被主流瀏覽器支持之前，你只好求助于JavaScript。用JavaScript解決這個(gè)問(wèn)題的最好方式是基于文檔寬度的計(jì)算。兩種4.0瀏覽器都在DOM中包含文檔大小的對(duì)象。所以定位對(duì)象的方式是把窗口的寬度減去對(duì)象的寬度。divid=fooyourcontenthere/divscriptif(document.layers)document.foo.left=window.innerWidth-document.foo.clip.width;elseif(document.all)foo.style.left=document.body.offsetWidth-parseInt(foo.style.width);/script這可以把div定位到屏幕的右邊。這種技術(shù)也可以把對(duì)象定位到窗口底部。兩種瀏覽器都支持的屏幕對(duì)象是：FeatureInternetExplorerNetscapeNavigatorheightofthescreenscreen.heightscreen.heightwidthofthescreenscreen.widthscreen.widthcolordepthofthescreenscreen.colorDepthscreen.colorDepthheightofthewindowdocument.body.offsetHeight*window.innerHeightwidthofthewindowdocument.body.offsetWidth*window.innerWidth*從技術(shù)上講，這是文檔的高度和寬度，不是窗口的，但是大多數(shù)情況下可以把它們看成一件事。5.3Netscape的調(diào)整大小問(wèn)題如果你用的是Netscape，在看這篇教程的時(shí)候，可能要調(diào)整瀏覽器窗口的大小以便達(dá)到較好的顯示效果。這是可能會(huì)突然出現(xiàn)一個(gè)可怕的閃光，然后所有的定位信息都消失了，你的頁(yè)面看起來(lái)象。這是Netscape4.0的一個(gè)bug。有解決辦法嗎？較簡(jiǎn)單的方式是在頁(yè)面上放一個(gè)提示：如果您是Netscape用戶，當(dāng)調(diào)整瀏覽器尺寸時(shí)，需要重新下載頁(yè)面?；蛘呖梢允褂贸绦颍簊criptif(document.layers)window.onResize=reloadIt;functionreloadIt()document.location=document.location;/script這種方法在大多數(shù)情況下管用。（但是，Netscape偶爾會(huì)進(jìn)入重新下載文檔的死循環(huán)。）5.4一定要把樣式加在標(biāo)記中嗎？如果你經(jīng)常訪問(wèn)網(wǎng)猴，你可能知道我們鼓吹在線文檔中結(jié)構(gòu)、表現(xiàn)和行為的分離。你保持你的HTML結(jié)構(gòu)，用CSS進(jìn)行布局，然后用JavaScript做一些事情。盡可能地不要把這三者混在一起。問(wèn)題是，當(dāng)你從文檔的head部分應(yīng)用樣式規(guī)則到對(duì)象時(shí)，在IE中，整個(gè)規(guī)劃會(huì)分離到不同部分。htmlheadtitleDOMexample/titlestyle#fooposition:absolute;left:10px;top:10px/stylescriptfunctionalertIt()alert(foo.style.left);/script/headbodyonload=alertIt()divid=fooThisisthesample/div/body/html你得到一個(gè)空的對(duì)話框，是嗎？你的第一個(gè)反映可能是假定下載過(guò)程中斷了。但是實(shí)際上是IE把這個(gè)整體分離。因?yàn)槿绻悴榭次臋n，對(duì)象foo并沒(méi)有樣式在其中，雖然它有一個(gè)指向樣式表的ID。所以foo的唯一屬性是ID。你可以做一個(gè)實(shí)驗(yàn)，在foo標(biāo)記中加入：divid=foobar=neatThisisthesample/div現(xiàn)在alert(foo.bar)會(huì)返回neat。你看出來(lái)在IE中發(fā)生什么了嗎？標(biāo)記中的任何屬性都在DOM中作為對(duì)象的屬性出現(xiàn)。但是如果它不在對(duì)象內(nèi)，就在DOM中沒(méi)有反映。這就是為什么把樣式加到標(biāo)記中。為了修正這個(gè)問(wèn)題，我們?cè)僖淮问褂肑avaScript的object-as-reference能力。但是不指向HTML對(duì)象，我們?yōu)榘凑誌D為對(duì)象指定樣式表規(guī)則。頁(yè)面的結(jié)果和在你的腳本中的一致，但是不需要把樣式放在標(biāo)記行中。scriptfunctionsetup(myId)if(document.layers)myObj=document.layersmyID;elseif(document.all)for(ss=0;ssdocument.styleSheets.length;ss+)for(sr=0;srdocument.styleSheets(ss).rules.length;sr+)if(document.styleSheets(ss).rules(sr).selectorText=#+myId)myObj=document.styleSheets(ss).rules(sr).style;/script結(jié)果是循環(huán)經(jīng)過(guò)所有的頁(yè)面的樣式表。如果其中一個(gè)與你的對(duì)象的ID匹配，它就作為這個(gè)對(duì)象的別名。你可以象從