多媒體技術(shù)教程（林福宗）第19章使用JavaScript

百眼通 2014-09-29

展開全文

　　JavaScript是一種解釋語(yǔ)言，使用它可以使你的網(wǎng)頁(yè)制作得更加科學(xué)、生動(dòng)和美觀，人-機(jī)界面更加友好。本章將提供大量的程序?qū)嵗榻BJavaScript的基本概念和應(yīng)用，為讀者進(jìn)一步深入學(xué)習(xí)JavaScript和其他描述性語(yǔ)言打下基礎(chǔ)。
　　除了19.10節(jié)和19.11節(jié)中的部分源程序，本章所示的程序都是在Netscape公司的Communicator 4.04瀏覽器和微軟公司的Internet Explorer 3.0以上版本的瀏覽器上運(yùn)行過的，如果使用Netscape公司和微軟公司較低版本的瀏覽器時(shí)，有可能會(huì)出現(xiàn)異常。

19.1 簡(jiǎn)介

　　JavaScript不是Java! 由于JavaScript與Java類似，而且它們的名稱也很相似，JavaScript又支持大多數(shù)Java表示法和基本的流程控制結(jié)構(gòu)，因此許多人都認(rèn)為JavaScript就是Java。其實(shí)，JavaScript是由客戶機(jī)解釋的語(yǔ)言，而Java是從服務(wù)機(jī)上下載在客戶機(jī)上運(yùn)行的編譯過的字節(jié)碼(bytecodes)；JavaScript的對(duì)象是在運(yùn)行時(shí)引用的，稱為動(dòng)態(tài)聯(lián)編(Dynamic binding)，而Java的對(duì)象是編譯時(shí)引用的，稱為靜態(tài)聯(lián)編(Static binding)。
　　JavaScript是由Netscape公司開發(fā)的一種腳本語(yǔ)言(scripting language)，或者稱為描述語(yǔ)言。在HTML基礎(chǔ)上，使用JavaScript可以開發(fā)交互式Web網(wǎng)頁(yè)。運(yùn)行用JavaScript編寫的程序需要能支持JavaScript語(yǔ)言的瀏覽器。Netscape公司Navigator 3.0以上版本的瀏覽器都能支持JavaScript程序，微軟公司Internet Explorer 3.0以上版本的瀏覽器基本上支持JavaScript。微軟公司還有她自己開發(fā)的JavaScript，稱為JScript。JavaScript和JScript有許多相似之處。
　　在介紹過程中，將通過大量的例子來體會(huì)JavaScript的含義，這些例子與HTML緊緊地連在一起，并且可以直接應(yīng)用于網(wǎng)頁(yè)制作。由于例子中的每條語(yǔ)句、每個(gè)對(duì)象和每個(gè)符號(hào)等許多細(xì)節(jié)不可能在本書中詳細(xì)闡述。因此，如果需要更深入更詳細(xì)的內(nèi)容，請(qǐng)參看有關(guān)JavaScript語(yǔ)言和HTML語(yǔ)言方面的參考文獻(xiàn)。

19.2 事件與函數(shù)

19.2.1 HTML文檔中嵌入JavaScript

JavaScript程序可直接嵌入到HTML文檔中，如下例所示：
　　<HTML>
　　　<HEAD> <TITLE>JavaScript入門</TITLE>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<P>這是JavaScript程序</P>
　　　</BODY>
　　</HTML>
　　在這個(gè)例子中，我們可看到在<HEAD> … </HEAD> 之間插入了一個(gè)新的標(biāo)簽：<SCRIPT> … </SCRIPT>，而<SCRIPT LANGUAGE="JavaScript">用來告訴瀏覽器這是用JavaScript編寫的程序。HTML的注釋標(biāo)簽用來告訴瀏覽器不要顯示注釋

19.2.2 事件的概念

　　在JavaScript語(yǔ)言中，事件(events)和事件處理程序(event handlers)是非常重要的事情。絕大部分事件都是由用戶的動(dòng)作所引發(fā)的。如果用戶按鼠標(biāo)器的按鈕，就產(chǎn)生Click(點(diǎn)擊)事件，如果鼠標(biāo)器的指針在鏈接上移動(dòng)，就產(chǎn)生MouseOver事件。在JavaScript中定義有許多事件。要使JavaScript程序能夠響應(yīng)事件，就需要事件處理程序的幫助。當(dāng)點(diǎn)擊按鈕時(shí)，按鈕可創(chuàng)建一個(gè)彈出窗口，我們需要使用的事件處理程序就叫做ONCLICK。如果出現(xiàn)按鈕事件，事件處理程序就告訴計(jì)算機(jī)做什么工作。例如，下面所示的源程序：
　　<FORM>
　　　<INPUT TYPE="BUTTON" VALUE="點(diǎn)擊該按鈕" ONCLICK="alert('哈哈！')">
　　</FORM>
　　在瀏覽器上將顯示如圖19-01和圖19-02所示的頁(yè)面。

　點(diǎn)擊該按鈕之后產(chǎn)生→
圖19-01 事件概念(一)　　　　　　　　　　　　圖19-02 事件概念(二)

　　在這個(gè)源程序中，<INPUT>標(biāo)簽中的TYPE=" BUTTON " VALUE="點(diǎn)擊改按鈕" 這部分產(chǎn)生一個(gè)按鈕，ONCLICK="alert('哈哈！')"這部分告訴計(jì)算機(jī)在有點(diǎn)擊事件出現(xiàn)后要執(zhí)行alert( ' 哈哈！')程序，alert()將創(chuàng)建一個(gè)彈出窗口，括號(hào)中指定的是字符串，本例中是'哈哈！'，這是要在窗口上顯示的文字。執(zhí)行程序的結(jié)果是產(chǎn)生一個(gè)窗口，并顯示“哈哈!”。
　　在ONCLICK="alert('哈哈！')"這部分中用了單引號(hào)(' ')和雙引號(hào)(" ")。這兩種引號(hào)都可以使用，次序也可以顛倒，即可寫成ONCLICK='alert("哈哈！") '。
　　在JavaScript中有許多事件處理程序可用，但不包含所有的事件處理程序。如果需要全面了解，請(qǐng)參看JavaScript的參考手冊(cè)。

19.2.3 函數(shù)的概念

在JavaScript中，函數(shù)(Function)是一個(gè)很重要的概念。函數(shù)實(shí)際上是把幾個(gè)命令捆綁在一起的子程序。由于歷史的原因，現(xiàn)在許多中文教科書都把“Function”叫做函數(shù)，但其實(shí)質(zhì)是“函數(shù)例程”。
　　假如我們要寫一段重復(fù)輸出相同文本三次的程序，下面是一種完成這個(gè)功能的源程序：
　　<HTML>
　　　<SCRIPT LANGUAGE="JavaScript">
　　　
　　　</SCRIPT>
　　</HTML>
　　這段程序在瀏覽器上將顯示如圖19-03所示的頁(yè)面。

圖19-03 演示函數(shù)概念的頁(yè)面

完成同樣功能的這段源程序也可以用下面的程序來實(shí)現(xiàn)：
　　<HTML>
　　　<SCRIPT LANGUAGE="JavaScript">
　　　
　　　</SCRIPT>
　　</HTML>
　　在這段程序中我們定義了一個(gè)函數(shù)：
　　function myFunction() {
　　　document.write("JavaScript不是很難學(xué)!<br>");
　　　document.write(這是JavaScript!<br>");
　　}
　　其中，function是JavaScript函數(shù)的聲明語(yǔ)句，function后面跟的函數(shù)名“myFunction”可以是任意的名字，myFunction函數(shù)的命令放在大括號(hào)“{ }”中，該函數(shù)捆綁了兩個(gè)JavaScript的“document.write()”命令，并且可通過函數(shù)調(diào)用來執(zhí)行。在這個(gè)例子中可以看到，在函數(shù)定義下面調(diào)用函數(shù)myFunction()共3次。
　　函數(shù)也可以與事件處理程序聯(lián)用。例如，
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<FORM>
　　　　　<INPUT TYPE="BUTTON" VALUE="計(jì)算" ONCLICK=" calculation()">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　其中，關(guān)鍵字“var”是JavaScript的變量(variable)聲明語(yǔ)句，聲明“x”、“y”和“result”是變量；<INPUT … >這條語(yǔ)句表示，當(dāng)點(diǎn)擊標(biāo)有“計(jì)算”字樣的BUTTON按鈕時(shí)就調(diào)用函數(shù)calculation()。你可以把這段程序存放在一個(gè)名為fuc_test.html文件中，然后用瀏覽器試一試，看計(jì)算結(jié)果是否等于17。

19.3 層次結(jié)構(gòu)

19.3.1 JavaScript的層次結(jié)構(gòu)

　　JavaScript以分層結(jié)構(gòu)的方式組織Web網(wǎng)頁(yè)上的所有文素。每個(gè)文素都被作為一個(gè)對(duì)象(Object)來看待，稱為“HTML對(duì)象”，每個(gè)對(duì)象都有屬性(Properties)和處理法(methods)。下面是一個(gè)簡(jiǎn)單的HTML文檔，存放該文檔的文件名假設(shè)為jstest.html：
　　<HTML>
　　　<HEAD>
　　　</HEAD>
　　　<BODY BGCOLOR="#FFFFFF">
　　　　<CENTER><IMG SRC="image(0).gif" WIDTH=126 HEIGHT=115>
　　　　</CENTER><P>
　　　　<FORM ID="MyForm">
　　　　　姓名:
　　　　　<INPUT TYPE="TEXT" NAME="name" VALUE=""><BR><BR>
　　　　　email:　<INPUT TYPE="TEXT" NAME="email" VALUE=""><BR><BR>
　　　　　<INPUT TYPE="BUTTON" VALUE="請(qǐng)按此按鈕" NAME="myButton" ONCLICK="location.href='../../../www./default.htm'; ">
　　　　</FORM><P>
　　　　<CENTER>
　　　　<IMG SRC="image(1).gif" WIDTH=400 HEIGHT=10><BR><BR>
　　　　<A >我的主頁(yè)</A>
　　　　</CENTER>
　　　</BODY>
　　</HTML>
　　在瀏覽器上將顯示如圖19-04所示的頁(yè)面。

圖19-04 層次結(jié)構(gòu)分析頁(yè)面

　　從JavaScript的功能來看，Web瀏覽器本身是一個(gè)窗口對(duì)象(window object)，在這個(gè)對(duì)象中可以加載HTML文檔，例如jstest.html。同樣，JavaScript把jstest.html也看成是一個(gè)對(duì)象，稱為文檔對(duì)象(document object)，它也是JavaScript中的一個(gè)非常重要的對(duì)象，而且會(huì)經(jīng)常用到它。
　　在jstest.html這個(gè)HTML文檔中，有兩幅圖像(image[0]，image[1])、一個(gè)鏈接(links[0])以及一個(gè)交易單(form)，交易單中帶有兩個(gè)文本域(element[0]，element[1])和一個(gè)按鈕(element[3])。它們的結(jié)構(gòu)如圖19-05所示。

圖19-05 JavaScript的層次結(jié)構(gòu)

　　JavaScript把圖19-05中的每個(gè)框都看成是對(duì)象。如果要想得到各種不同對(duì)象的信息和管理它們，首先我們就要知道這些對(duì)象的名稱，其次我們必須要知道如何去存取這些對(duì)象。圖19-01為我們給各個(gè)對(duì)象的命名提供了很大的啟發(fā)，就是按照J(rèn)avaScript的層次結(jié)構(gòu)來命名。據(jù)此，可按照從頂向下的路線，第一個(gè)對(duì)象就被命名為“document”，第一幅圖像被命名為“document.images[0]”，…，第一個(gè)交易單中的第一個(gè)文本對(duì)象被命名為“document.forms[0].elements[0]”，…，document.forms[0].elements[3]。
　　為了得到各種對(duì)象的屬性和可使用的處理法，我們必須要查看有關(guān)JavaScript的文獻(xiàn)(請(qǐng)看參考文獻(xiàn)：JavaScript參考手冊(cè))。例如，我們查看“text”(文本)對(duì)象時(shí)，可以看到它有很多屬性(property)和可使用的處理法(method)。其中的一個(gè)屬性是值(value)，這個(gè)值是輸入到這個(gè)對(duì)象的文本，于是我們就可使用下面的格式存取對(duì)象的值：
　　　name= document.forms[0].elements[0].value;
　　我們可把forms[0]的名稱命名為"myForm"，于是“input”對(duì)象1的名稱就可寫成"document.myForm.input"，它的屬性是value，而“對(duì)象2”和“對(duì)象3”就可對(duì)“對(duì)象1”進(jìn)行操作。例如，
　　<FORM name="myForm">
　　　對(duì)象1：
　　　<INPUT TYPE="TEXT" NAME="input" VALUE="原來的數(shù)據(jù)"><p>
　　　對(duì)象2：
　　　<INPUT TYPE="BUTTON" VALUE="更新數(shù)據(jù)"
　　　　ONCLICK="document.myForm.input.value= '新的數(shù)據(jù)!'; "> <p>
　　　對(duì)象3：
　　　<INPUT TYPE="BUTTON" VALUE="恢復(fù)數(shù)據(jù)"
　　　　ONCLICK="document.myForm.input.value= '原來的數(shù)據(jù)!'; ">
　　</FORM>
　　在瀏覽器上將顯示如圖19-06所示的頁(yè)面。

圖19-06 對(duì)象間的操作

　　點(diǎn)擊“更新數(shù)據(jù)”按鈕就對(duì)“對(duì)象1”進(jìn)行操作，顯示“新的數(shù)據(jù)!”。

19.3.2 網(wǎng)址對(duì)象

　　除了window(窗口對(duì)象)和document(文檔對(duì)象)之外，另一個(gè)重要的對(duì)象是location(網(wǎng)址對(duì)象)。這個(gè)對(duì)象代表的是要訪問的HTML文檔所在的網(wǎng)絡(luò)地址。因此，如果你要訪問網(wǎng)頁(yè)http://www./page.html，那么location.href就等于這個(gè)網(wǎng)址。
　　更重要的是你可以給location.href指定新的值。下面的例子就可以把新的網(wǎng)頁(yè)加載到窗口上：
　　<FORM >
　　　<INPUT TYPE="BUTTON" VALUE="中國(guó)教育和科研計(jì)算機(jī)網(wǎng)(CERNET)"
　　　　ONCLICK="location.href='../../../www./default.htm'; ">
　　</FORM>
　　在瀏覽器上將顯示如圖19-07所示的頁(yè)面。

圖19-07 網(wǎng)址對(duì)象的演示頁(yè)面

　　當(dāng)你點(diǎn)擊該按鈕時(shí)就可瀏覽“中國(guó)教育和科研計(jì)算機(jī)網(wǎng)”的主頁(yè)。

19.4 幀窗

19.4.1 創(chuàng)建幀窗

　　也許你瀏覽萬(wàn)維網(wǎng)(Web)時(shí)已經(jīng)注意到，Web瀏覽器窗口被分成兩個(gè)或者三個(gè)顯示窗口，分別顯示各自的HTML文檔。每個(gè)這樣的小窗口稱為frame，可把它譯成“幀窗”。一個(gè)常見的問題就是JavaScript如何與幀窗一起工作。
　　創(chuàng)建幀窗需要使用<frameset>和</frameset>標(biāo)簽。例如要把Web瀏覽器窗口分成兩個(gè)等寬的幀窗，可用下面的程序?qū)崿F(xiàn)：
　　<HTML>
　　　<FRAMESET ROWS="50%,50%">
　　　<FRAME SRC="page1.html" NAME="frame1">
　　　<FRAME SRC="page2.html" NAME="frame2">
　　　</FRAMESET>
　　</HTML>
　　在瀏覽器上將顯示如圖19-08所示的頁(yè)面。

圖19-08 創(chuàng)建幀窗的概念

　　在這個(gè)程序中使用了<frameset>的rows(行)屬性把Web瀏覽器窗口分成上下兩個(gè)幀窗，上面的幀窗加載page1.html，下面的幀窗加載page2.html。
　　如果使用<frameset>的columns(列)屬性，Web瀏覽器窗口就會(huì)被縱向分割。此外，瀏覽器窗口的分割還可以嵌套。例如，使用下面的程序可在橫向和縱向?qū)g覽器窗口進(jìn)行分割：
　　<FRAMESET ROWS="50%,50%">
　　　<FRAMESET COLS="50%,50%">
　　　　<FRAME SRC="page1.html">
　　　　<FRAME SRC="page2.html">
　　　</FRAMESET>
　　　<FRAMESET COLS="33%,33%,33%">
　　　　<FRAME SRC="page3.html">
　　　　<FRAME SRC="page4.html">
　　　　<FRAME SRC="page5.html">
　　　</FRAMESET>
　　</FRAMESET>
　　在瀏覽器上將顯示如圖19-09所示的頁(yè)面。

圖19-09 創(chuàng)建不同樣式的幀窗

19.4.2 JavaScript和幀窗

　　前面已經(jīng)介紹，JavaScript以分層結(jié)構(gòu)的方式來組織網(wǎng)頁(yè)上的所有文素，對(duì)幀窗也是如此。為了簡(jiǎn)單起見，假設(shè)Web瀏覽器窗口被分成frame1和frame2兩個(gè)幀窗，在這種情況下的分層結(jié)構(gòu)如圖19-10所示：

圖19-10 兩個(gè)幀窗的結(jié)構(gòu)

　　頂層是browser window(瀏覽器窗口)對(duì)象，稱為parent(父窗口)，下層是frame1(幀窗1)和frame2(幀窗2)對(duì)象，稱為children(子幀窗)。通過對(duì)這些對(duì)象進(jìn)行命名之后在兩個(gè)幀窗之間就可以交換信息。例如，用戶在frame1上點(diǎn)擊一個(gè)鏈接，本來應(yīng)該是在frame1顯示的HTML文檔，現(xiàn)在可讓它顯示在frame2上。這樣一來，frame1就可以作為瀏覽目錄，目錄中的每個(gè)條目就可以鏈接到許多不同站點(diǎn)的主頁(yè)。
　　圖19-11所示的網(wǎng)頁(yè)是幀窗的一個(gè)具體應(yīng)用。在這個(gè)應(yīng)用中，幀窗frame1作為“多媒體技術(shù)基礎(chǔ)”作業(yè)的目錄項(xiàng)，幀窗frame2用來顯示具體內(nèi)容。例如，在frame1中點(diǎn)擊“詳細(xì)內(nèi)容”時(shí)，在frame2中顯示作業(yè)的詳細(xì)內(nèi)容，而幀窗frame1的內(nèi)容保持不變。

圖19-11 一個(gè)幀窗作為瀏覽目錄的網(wǎng)頁(yè)

　　設(shè)計(jì)這樣的網(wǎng)頁(yè)首先需要一個(gè)創(chuàng)建frame1和frame2兩個(gè)幀窗的程序，在此假設(shè)程序名為jstest02.html，這個(gè)程序可寫成：
　　<HTML>
　　　<FRAMESET COLS="25%,75%">
　　　　<FRAME SRC="menu.html" NAME="menu">
　　　　<FRAME SRC="homework.html" NAME="main">
　　　</FRAMESET>
　　</HTML>
　　在這個(gè)程序中，把frame1命名為menu，開始時(shí)顯示menu.html文檔；把frame2命名為main，開始時(shí)顯示homework.html文檔。

homework.html：
　　<HTML>
　　　<HEAD></HEAD>
　　　<BODY>
　　　　<CENTER>大學(xué)本科生基礎(chǔ)課程<BR>
　　　　<H2>“多媒體技術(shù)基礎(chǔ)”</H2><BR>
　　　　作業(yè)式樣<BR>
　　　　(僅供參考)<BR>
　　　　</CENTER>
　　　</BODY>
　　</HTML>
　　menu.html：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<PRE> <A HREF="homework.html" TARGET="main">多媒體技術(shù)基礎(chǔ)</A></PRE>
　　　　　　　<A HREF="start.html" TARGET="main">作業(yè)名稱</A><BR>
　　　　　　　<A HREF="javascript:：load('first.html')">內(nèi)容簡(jiǎn)介 </A><BR>
　　　　　　　<A HREF="second.html" TARGET="main">影視圖像</A><BR>
　　　　　　　<A HREF="third.html" TARGET="_top">作業(yè)總結(jié)</A><BR>
　　　</BODY>
　　</HTML>
　　menu.html文檔涉及如下所示的4個(gè)文檔：
　　① start.html文檔：
　　<HTML>
　　　<BODY>
　　　　<CENTER><U>開始頁(yè)</U><BR>
　　　　<H2>作業(yè)名稱</H2>
　　　　… </CENTER>
　　　</BODY>
　　</HTML>
　　② first.html文檔：
　　<HTML>
　　　<BODY>
　　　　<CENTER><U>文檔1</U><BR>
　　　　<H2>內(nèi)容簡(jiǎn)介</H2></CENTER>
　　　</BODY>
　　</HTML>
　　③ second.html:
　　<HTML>
　　　<BODY>
　　　　<CENTER><U>文檔2</U><BR>
　　　　<H2>影視片段</H2></CENTER>
　　　</BODY>
　　</HTML>
　　④ third.html:
　　<HTML>
　　　<BODY>
　　　　<CENTER><U>文檔3</U><BR>
　　　　<H2>學(xué)習(xí)總結(jié)</H2></CENTER>
　　　</BODY>
　　</HTML>
　　在menu.html文檔中，需要說明如下幾點(diǎn)：
　　(1) 使用了一種把新的網(wǎng)頁(yè)加載到main幀窗中的不同方法。具體說就是，在“<A HREF="javascript：load('first.html')">內(nèi)容簡(jiǎn)介 </A><BR>”中的鏈接使用了加載函數(shù)load()，并且在<A>的屬性HREF＝" "中使用了“javascript：”來把first.html文檔加載到main幀窗中。
　　(2) JavaScript的加載函數(shù)load()定義為：
　　function load(url) {
　　　parent.main.location.href= url;
　　}
　　括號(hào)“( )”中的url是傳遞參數(shù)的變量，這就意味字符串'first1.html'通過url變量來傳遞。通過變量來傳遞參數(shù)是程序設(shè)計(jì)的一個(gè)重要概念。
　　(3) 其他鏈接使用的是標(biāo)簽“<A>”的“TARGET”屬性，實(shí)際上它不是JavaScript的屬性，而是HTML的屬性。
　　(4) 在“<A HREF="third.html" TARGET="_top">作業(yè)總結(jié)</A>”中，“<A>”的屬性“TARGET＝_top”是去掉frame1和frame2幀窗。third.html將顯示在整個(gè)瀏覽器窗口中。
　　(5) 如果瀏覽器窗口分割成frame1、frame2和frame3共三個(gè)幀窗，使用JavaScript的load()函數(shù)可能會(huì)更靈活，此時(shí)的load()函數(shù)可定義為：
　　function loadtwo(url1, url2) {
　　　parent.frame1.location.href= url1;
　　　parent.frame2.location.href= url2;
　　}
　　然后你可用loadtwo("first.htm", "second.htm") 或者loadtwo("third.htm", "forth.htm")來調(diào)用這個(gè)函數(shù)。

9.5 創(chuàng)建新窗口與建立新文檔

19.5.1 創(chuàng)建新窗口加載HTML文檔

打開一個(gè)新的瀏覽器窗口是JavaScript的一個(gè)重要特性。創(chuàng)建窗口使用window.open()命令。下面是一個(gè)打開新窗口并把HTML文檔(例如21_lecture.html)加載到新窗口的程序：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<FORM>
　　　　　<INPUT TYPE=SUBMIT VALUE="打開新窗口+新文檔" ONCLICK="openWin1()">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　運(yùn)行該程序后在瀏覽器窗口中顯示，點(diǎn)擊該按鈕后就可把你創(chuàng)建的21_lecture.html文檔加載到一個(gè)新的瀏覽器窗口，而原來的窗口仍然存在。

19.5.2 window.open()的處理法

在函數(shù)window.open中，它的處理法(method)可有3種選擇參數(shù)，可以用來指定窗口顯示的內(nèi)容、窗口的名稱和外觀。這3個(gè)參數(shù)是：
　?、?指定要加載的HTML文檔的URL。例如，21_lecture.html。
　　② 窗口的名稱?！癲isplayWindow”是所有Web瀏覽器都支持的名稱。有些瀏覽器可使用你自己喜歡的名稱，例如“MyWindow”。
　?、?一套窗口外觀參數(shù)選項(xiàng)(options)。例如，窗口的寬度、高度、滾動(dòng)框和其他功能。
　　window.open ()的一般處理法格式為：
　　　newwindow=window.open("mypage.html","mywindow", options)
　　例如，要把21_lecture.html文檔加載到一個(gè)寬度(width)為400象素、高度(height)為300象素的瀏覽器窗口，窗口中沒有狀態(tài)(status)欄、沒有工具欄(toolbar)和選單欄(menubar)，創(chuàng)建這種窗口可以寫出如下所示的程序：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<FORM>
　　　　　<INPUT TYPE=SUBMIT VALUE="打開指定新窗口" ONCLICK="openWin2()">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　請(qǐng)注意：①在字符串"width=400,height=300,status=no,toolbar=no,menubar=no"中沒有空格字符;②myWin是變量，而不是window的名稱。表19-01列出了可供選擇的參數(shù)選項(xiàng)。

表18－01 窗口參數(shù)選項(xiàng)

窗口屬性	yes/no
directories(顯示目錄欄)	yes/no
height(設(shè)置窗口高度)	象素值
location(顯示文檔地址框)	yes/no
menubar(顯示選單欄)	yes/no
resizable(設(shè)置窗口縮放)	yes/no
scrollbars(設(shè)置滾動(dòng)框)	yes/no
status(設(shè)置狀態(tài)欄)	yes/no
toolbar(設(shè)置工具欄)	yes/no
width(設(shè)置窗口寬度)	象素值

19.5.3 創(chuàng)建新窗口與建立新文檔

JavaScript的一個(gè)很時(shí)髦特性是可以在創(chuàng)建的新窗口中創(chuàng)建HTML文檔以及VRML(Virtual Reality Modeling Language)文檔。下面是創(chuàng)建一個(gè)簡(jiǎn)單的HTML文檔的程序：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<FORM>
　　　　　<INPUT TYPE=SUBMIT VALUE="創(chuàng)建新的HTML文檔" ONCLICK="openWin3()">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在這個(gè)程序中，函數(shù)winOpen3()用來創(chuàng)建一個(gè)新的瀏覽器窗口。winOpen3()中的第一個(gè)參數(shù)是空字符串，這表示JavaScript沒有指定URL，也就是不加載已經(jīng)編寫好的HTML文檔，而是要?jiǎng)?chuàng)建一個(gè)新文檔。
　　在這個(gè)程序中定義了一個(gè)變量myWin，借助該變量而不是窗口名(displayWindow)去訪問這個(gè)新窗口。在打開這個(gè)新窗口之后，通過使用文檔對(duì)象(document object)的open()處理法，即通過myWin.document.open()來為后面的輸出作準(zhǔn)備。myWin必須放在document.open()之前，以便訪問這個(gè)新窗口。下面是使用document.write()處理法創(chuàng)建文檔：
　　myWin.document.write("<HTML><HEAD><TITLE>創(chuàng)建新的HTML文檔");
　　myWin.document.write("</TITLE></HEAD><BODY>");
　　myWin.document.write("<CENTER><FONT SIZE=+1>");
　　myWin.document.write("用JavaScript創(chuàng)建HTML文檔");
　　myWin.document.write("</FONT></CENTER>");
　　myWin.document.write("</BODY></HTML>");
　　在創(chuàng)建HTML文檔之后需要用myWin.document.close()關(guān)閉文檔。

19.6 狀態(tài)欄和超時(shí)設(shè)置

19.6.1 狀態(tài)欄設(shè)置

JavaScript程序可通過設(shè)置窗口的狀態(tài)屬性window.status對(duì)Web瀏覽器底部的狀態(tài)欄進(jìn)行寫入操作。下面是在狀態(tài)欄上寫入“'Hi! 這是狀態(tài)欄”和清除狀態(tài)的程序：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<FORM>
　　　　　<INPUT type="button" NAME="look" VALUE="寫入!"
　　　　　　ONCLICK="statbar('Hi! 這是狀態(tài)欄!');">
　　　　　<INPUT type="button" NAME="erase" VALUE="清除!"
　　　　　　ONCLICK="statbar('');">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在這個(gè)程序中創(chuàng)建了有和按鈕的交易單，它們都調(diào)用了函數(shù)statbar()，而且在括號(hào)中指定了字符串“'Hi! 這是狀態(tài)欄!”和空字符串。這表明，這些字符串是與函數(shù) statbar()一起傳遞到狀態(tài)欄上的，因?yàn)樵诔绦蛑卸x該函數(shù)名時(shí)在括號(hào)中使用了“txt”作為變量。在程序設(shè)計(jì)中，給函數(shù)傳遞變量是經(jīng)常使用的方法，這樣可使函數(shù)變得更靈活。
　　在狀態(tài)欄上寫入文字可很方便地為用戶提示狀態(tài)信息。例如，當(dāng)用戶把鼠標(biāo)器的指針指到帶有鏈接的對(duì)象時(shí)，在狀態(tài)欄上就可以顯示被鏈接網(wǎng)頁(yè)的URL地址。下面的程序就是一個(gè)這樣的例子。
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<A HREF="http://www."
　　　　　onMouseOver="window.status='連接 http:/www.'; return true;"
　　　　　onMouseOut="window.status='';">中國(guó)教育和科研計(jì)算機(jī)網(wǎng)(CERNET)</A>
　　　</BODY>
　　</HTML>
　　在瀏覽器上將顯示如圖19-12所示的頁(yè)面。

圖19-12 狀態(tài)欄的設(shè)置和顯示

　　雖然瀏覽器本身的默認(rèn)設(shè)置是當(dāng)你把鼠標(biāo)器的指針移到超文本鏈接時(shí)，狀態(tài)欄上會(huì)顯示URL目的地址，但如果要在狀態(tài)欄上顯示其他內(nèi)容時(shí)，你就可以使用onMouseOut和onMouseOver事件處理程序來設(shè)置。使用這兩個(gè)處理程序時(shí)必須要使用“return true”。

19.6.2 定時(shí)設(shè)置

超時(shí)設(shè)置程序(timeout)也稱定時(shí)器(timer)，使用它可讓計(jì)算機(jī)在超過一定的時(shí)間之后執(zhí)行某種程序。下面是一個(gè)當(dāng)你點(diǎn)擊按鈕之后3秒鐘會(huì)彈出一個(gè)窗口。
　　<SCRIPT LANGUAGE="JavaScript">
　　　
　　</SCRIPT>
　　...
　　<FORM>
　　　<INPUT type="button" VALUE="定時(shí)器" ONCLICK="timer()">
　　</FORM>
　　在瀏覽器上將顯示如圖19-13所示的頁(yè)面。

圖19-13 定時(shí)設(shè)置演示

　　在這個(gè)程序中，setTimeout()是window對(duì)象的處理法。setTimeout()中的第一個(gè)參數(shù)是JavaScript的程序，在這個(gè)例子中是"alert('從點(diǎn)擊按鈕開始算起時(shí)間已超過3秒鐘!')"，它將顯示一個(gè)帶有消息和OK按鈕的對(duì)話框；第二個(gè)參數(shù)是告訴計(jì)算機(jī)什么時(shí)候要執(zhí)行這個(gè)程序，你可以指定定時(shí)的時(shí)間，時(shí)間單位用毫秒。

19.6.3 滾動(dòng)程序

在了解如何設(shè)置狀態(tài)欄和定時(shí)器之后，我們可看看瀏覽器狀態(tài)欄上的滾動(dòng)文本是如何實(shí)現(xiàn)的，這是在因特網(wǎng)上經(jīng)常都可看到的。實(shí)現(xiàn)滾動(dòng)文本的程序稱為滾動(dòng)程序(scroller)，下面是它的源程序：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　<BODY onLoad="scroll()">
　　　你的HTML文檔放在這里
　　</BODY>
　　</HTML>
　　函數(shù)scroll()的主體部分用來計(jì)算文本的哪一部分要被顯示。滾動(dòng)程序的開始部分是計(jì)算和顯示，末尾設(shè)置定時(shí)器，在100毫秒之后執(zhí)行scroll()函數(shù)。為啟動(dòng)文本滾動(dòng)程序，本程序使用了JavaScript的onLoad事件處理程序(event handler)，并放在<BODY>標(biāo)簽中，這意味在HTML頁(yè)面加載之后立即調(diào)用函數(shù)scroll()。如果讀者要了解本程序的細(xì)節(jié)，請(qǐng)參考本書提供的JavaScript參考文獻(xiàn)。

19.7 預(yù)定義對(duì)象

　　JavaScript可以使用一些預(yù)先定義的對(duì)象，例如，日期對(duì)象(Date object)、數(shù)組對(duì)象(Array object)和數(shù)學(xué)對(duì)象(Math object)等等。

19.7.1 時(shí)間對(duì)象

顧名思義，日期對(duì)象讓你處理日期和時(shí)間，例如，計(jì)算到放假還有多少天，或者把實(shí)際的時(shí)間加到你的網(wǎng)頁(yè)等。
　　為了存取日期和時(shí)間，JavaScript定義了Date對(duì)象，并且可使用new操作符讓程序員創(chuàng)建用戶自定義的對(duì)象。例如，創(chuàng)建一個(gè)名為“today”的對(duì)象，
　　　today= new Date()
　　使用日期對(duì)象時(shí)要注意到：①如果在創(chuàng)建這個(gè)對(duì)象時(shí)不指定確定的日期和時(shí)間，執(zhí)行這條程序時(shí)就使用當(dāng)前的日期和時(shí)間，②日期對(duì)象提供了一些處理法，例如，getHours(), setHours(), getMinutes(), setMinutes(), getMonth()和setMonth()等等。③日期對(duì)象不代表時(shí)刻在變化的時(shí)鐘。
　　為了設(shè)置日期和時(shí)間，可使用稱為“日期構(gòu)造程序(Date constructor)”的Date()處理法。例如，
　　　today= new Date(2000, 0, 1, 0, 0, 5)
　　將創(chuàng)建一個(gè)today的日期對(duì)象，它表示2000年1月1日零點(diǎn)零分5秒(0:0:5)。要注意的是，1月要使用“0”而不是使用“1”來表示，2月使用“1”表示。它的一般形式是：
　　　Date(year, month, day, hours, minutes, seconds)
　　[例19.1]下面是一個(gè)輸出實(shí)際日期的程序：
　　<SCRIPT LANGUAGE="JavaScript">
　　　
　　</SCRIPT>
　　[例19.2] 下面是一個(gè)顯示時(shí)鐘的程序：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY ONLOAD="clock()">
　　　　<FORM name="clock">
　　　　　時(shí)間:<INPUT TYPE="text" NAME="time" SIZE="8" VALUE=""><BR>
　　　　　日期:<INPUT TYPE="text" NAME="date" SIZE="8" VALUE="">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在瀏覽器上將顯示如圖19-14所示的頁(yè)面。

圖19-14 時(shí)鐘顯示

19.7.2 數(shù)組對(duì)象

數(shù)組對(duì)象(Array object)或者稱為陣列對(duì)象是JavaScript的核心對(duì)象之一。我們可以設(shè)想，如果要存儲(chǔ)100個(gè)不同的名稱，就要定義100個(gè)不同的變量并且為它們指定不同的名稱，這是相當(dāng)費(fèi)事的。如果使用JavaScript的Array對(duì)象，就可以使用一個(gè)名稱(例如，myArray)和一個(gè)號(hào)碼(例如，0，1，…)來存取它們，因?yàn)閿?shù)組是可以被看成由許多變量捆綁在一起的。使用JavaScript的數(shù)組構(gòu)造程序new Array()可以創(chuàng)建一個(gè)新的數(shù)組，然后就可以給這個(gè)數(shù)組中的每個(gè)變量賦值。例如，
　　<SCRIPT LANGUAGE="JavaScript">
　　　
　　</SCRIPT>
　　在瀏覽器上將顯示如圖19-15所示的頁(yè)面。

圖19-15 數(shù)組對(duì)象演示頁(yè)面

19.7.3 數(shù)學(xué)對(duì)象

如果需要數(shù)學(xué)計(jì)算，可以使用JavaScript提供的數(shù)學(xué)對(duì)象(Math object)。例如，要計(jì)算sin(10)，可用下面的程序：
　　<SCRIPT LANGUAGE="JavaScript">
　　　
　　</SCRIPT>
　　計(jì)算結(jié)果：z= -0.5440211108893698。
　　如果程序中要使用幾個(gè)Math常數(shù)和處理法，為避免重復(fù)可利用JavaScript的with語(yǔ)句進(jìn)行計(jì)算。例如，要計(jì)算πr²，r×cos(π/6)和r×sin(π/6)，可編寫如下的計(jì)算程序：
　　<SCRIPT LANGUAGE="JavaScript">
　　　
　　</SCRIPT>
　　在瀏覽器上將顯示如圖19-16所示的頁(yè)面。

圖19-16 數(shù)學(xué)對(duì)象演示頁(yè)面

19.8 確認(rèn)輸入

在訪問因特網(wǎng)上的站點(diǎn)時(shí)，經(jīng)常會(huì)遇到要求用戶填寫許多表交易單(form)，或者稱為表單。交易單的輸入經(jīng)常要送到服務(wù)器(server)，或者通過電子郵件送到某個(gè)賬號(hào)。如果要驗(yàn)證用戶輸入的信息是否有效可使用JavaScript程序。例如，使用下面的程序可檢查你輸入的姓名和電子郵件地址是否符合規(guī)范。
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<FORM name="first">
　　　　　輸入你的姓名:<BR>
　　　　　<INPUT TYPE="text" NAME="text1">
　　　　　<INPUT type="button" NAME="button1" VALUE="檢驗(yàn)" ONCLICK="test1(this.form)">
　　　　　<P>輸入你的郵件地址:<BR>
　　　　　<INPUT TYPE="text" NAME="text2">
　　　　　<INPUT type="button" NAME="button2" VALUE="檢驗(yàn)" ONCLICK="test2(this.form)">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在瀏覽器上將顯示如圖19-17所示的頁(yè)面。

圖19-17 檢查用戶輸入信息演示頁(yè)面

　　如果想把瀏覽器上用戶輸入的交易單交給服務(wù)器處理，就需要使用公共網(wǎng)關(guān)接口CGI(Common Gateway Interface)程序。CGI是服務(wù)器(例如，HTTP服務(wù)器)和資源(例如，數(shù)據(jù)庫(kù))之間的通信規(guī)范。

19.9 JavaScript動(dòng)畫

19.9.1 圖像對(duì)象

　　JavaScript定義了圖像對(duì)象(Image object)，通過圖像對(duì)象的屬性和處理法可以改變Web網(wǎng)頁(yè)上的圖像，因此也可以讓用戶創(chuàng)建JavaScript型的動(dòng)畫。
　　JavaScript動(dòng)畫是通過重復(fù)設(shè)置圖像的src屬性來實(shí)現(xiàn)的。這種動(dòng)畫比GIF動(dòng)畫慢，即每秒鐘顯示的圖像的幀數(shù)比較少。GIF (Graphics Interchange Format，圖形文件交換格式)是Web頁(yè)面上使用最普遍的圖形文件格式之一，使用這種格式制成的動(dòng)畫存放在一個(gè)文件中，而JavaScript動(dòng)畫的每一幀圖像是單獨(dú)的一個(gè)文件，即一個(gè)對(duì)象，而且每個(gè)文件都要通過網(wǎng)絡(luò)加載，即要和主機(jī)連接然后傳輸圖像數(shù)據(jù)，這就很費(fèi)時(shí)間，因此就顯得比較慢。盡管如此，在網(wǎng)絡(luò)上還是得到廣泛的應(yīng)用。
　　在JavaScript中，所有圖像可以通過圖像數(shù)組(Array)來表示，這個(gè)數(shù)組稱為images(圖像)，這是document(文檔對(duì)象)的屬性。網(wǎng)頁(yè)上的每一幅圖像都分配一個(gè)號(hào)碼，第一幅圖像為“0”號(hào)，第二幅圖像為“1”號(hào)，…。因此，document.images[0] 就表示第一幅圖像，依此類推。在HTML文檔中，每一幅圖像都被認(rèn)為是一個(gè)圖像對(duì)象(Image object)。一個(gè)圖像對(duì)象有一些許多屬性可通過JavaScript來存取，例如，圖像的高度和寬度，對(duì)齊方式等等。而document.images[0].width就表示W(wǎng)eb網(wǎng)頁(yè)上的第一幅圖像的寬度，寬度的數(shù)值用象素作單位。
　　如果在一個(gè)Web網(wǎng)頁(yè)上有許多圖像，可以給每幅圖像起一個(gè)不同的名稱，這就比人去記憶每一幅圖像的編號(hào)要容易些。如果用下面的標(biāo)簽聲明一幅圖像，
　　<IMG SRC="img.gif" name="myImage" WIDTH=100 HEIGHT=100>
　　你就可以通過document.myImage或者document.images["myImage"]來尋找這幅圖像。

19.9.2 加載和更新圖像

　　如果我們要在網(wǎng)頁(yè)的同一個(gè)位置上改變顯示的圖像，就需要使用Image(圖像)對(duì)象的SRC屬性。我們已經(jīng)知道，在HTML的<IMG>標(biāo)簽中，SRC代表的是圖像的URL地址，因此在使用JavaScript時(shí)就可以把新的圖像地址賦予給已經(jīng)加載顯示過的圖像地址，這樣新的圖像就可以代替舊的圖像。例如，
　　<BODY>
　　　<IMG SRC="image1.gif" name="myImage" WIDTH=100 HEIGHT=100>
　　　<INPUT type=button VALUE="改變圖像" ONCLICK="document.myImage.src='image2.gif'">
　　</BODY>
　　第一條程序是加載image1.gif(圖像1)，它的名稱定義為myImage(我的圖像)；第二條程序是用新的圖像image2.gif(圖像2)代替老的圖像image1.gif(圖像1)。

19.9.3 預(yù)加載圖像

由于在因特網(wǎng)上傳輸圖像很費(fèi)時(shí)間，在演示動(dòng)畫時(shí)很可能會(huì)導(dǎo)致動(dòng)畫不連續(xù)，令人難以接收，因此可考慮使用預(yù)先下載圖像的方案。為此需要?jiǎng)?chuàng)建一個(gè)圖像數(shù)組和新的圖像對(duì)象，如下所示(本例的動(dòng)畫由4幅圖組成)：
　　hiddenImg = new Array() //構(gòu)造一個(gè)圖像數(shù)組
　　for(i = 0; i < 4; i++) { //預(yù)加載圖像
　　　hiddenImg[i] = new Image() //構(gòu)造新的圖像對(duì)象
　　　hiddenImg[i].src = "image" + i + ".gif" //圖像的URL地址
　　}
　　其中，hiddenImg [i]= new Image()的含義是使用圖像構(gòu)造程序new Image()來創(chuàng)建一個(gè)名為“hiddenImg”的新圖像對(duì)象；hiddenImg[i].src = "image" + i + ".gif"的含義是通過hiddenImg對(duì)象來表示圖像的地址。我們已經(jīng)知道，給SRC屬性賦予一個(gè)新地址，就意味著迫使Web瀏覽器加載這個(gè)地址所指示的圖像。因此，當(dāng)執(zhí)行這行程序時(shí)，就加載第 i 幅圖像imagei.gif。正如對(duì)象名hiddenImg(隱藏圖像)的含義，在Web瀏覽器完成加載之后，這些圖像是不顯示的，僅僅是存放在內(nèi)存中為以后使用。為了顯示這幅圖像，例如顯示第i幅圖像，可使用下面的語(yǔ)句：
　　document.myImage.src= hiddenImg[i].src
　　下面是點(diǎn)擊一次按鈕顯示一幅圖像的完整程序：
　　<HTML>
　　　<HEAD><TITLE>預(yù)加載圖像</TITLE>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<IMG SRC="image1.gif" name="myImage" WIDTH=123 HEIGHT=112>
　　　　<FORM>
　　　　　<INPUT type="button" VALUE="顯示一幅圖像" ONCLICK="animation ()">
　　　　</FORM>
　　　</BODY>
　　</HTML>

19.9.4 JavaScript動(dòng)畫程序舉例

以上介紹了JavaScript動(dòng)畫的基本原理，下面給出一個(gè)顯示動(dòng)畫的程序供參考。
　　<HTML>
　　　<HEAD><TITLE>JavaScript的動(dòng)畫入門 </TITLE></HEAD>
　　　<SCRIPT LANGUAGE="JavaScript">
　　　　
　　　</SCRIPT>
　　　<BODY BGCOLOR="white">
　　　　<IMG SRC="image0.gif" name="animation" HEIGHT="112" WIDTH="123" ALT="[Animation]"
　　　　　ONLOAD="setTimeout('animate()', delay)" BORDER="2" HSPACE="15">
　　　　<FORM>
　　　　　<INPUT TYPE="button" VALUE="減低幀速" ONCLICK="slower()">
　　　　　<INPUT TYPE="button" VALUE="提高幀速" ONCLICK="faster()">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在瀏覽器上將顯示如圖19-18所示的頁(yè)面。

　 … …
圖19-18 JavaScript的動(dòng)畫演示頁(yè)面

19.10 層對(duì)象

19.10.1 層對(duì)象的概念

　　HTML網(wǎng)頁(yè)上的層(layer)就像一疊紙中的一張紙。其中，一張紙上寫有文本，在另一張紙上畫有圖畫，在第三張紙上的圖畫周圍寫有一些文字，等等，每一張紙就就是一層。從這個(gè)觀點(diǎn)來看，層就像一個(gè)容器，它可以容納像文本、交易單和圖像這類對(duì)象。如果移動(dòng)某一張紙，這張紙上的所有對(duì)象也就跟著移動(dòng)。把這些“紙”放到HTML頁(yè)面上，借助JavaScript的幫助，可以給這些對(duì)象(如圖像)進(jìn)行定位，可以在HTML頁(yè)面上移動(dòng)它們，也可以隱藏對(duì)象。每一張紙可以有透明的部分，猶如在紙上挖一個(gè)洞，下一層的對(duì)象就可顯示出來。
　　目前，只有Netscape公司的Communicator瀏覽器支持層對(duì)象。

19.10.2 創(chuàng)建層對(duì)象

　　創(chuàng)建層對(duì)象需要使用<LAYER>或者<ILAYER>標(biāo)簽。<LAYER>用于HTML的內(nèi)容定位，稱為層標(biāo)簽。被定位的內(nèi)容可以相互疊加，可以是透明的或者是不透明的，可以是可見的也可以是不可見的。層標(biāo)簽也可以嵌套使用。<LAYER>用來指定內(nèi)容絕對(duì)位置，<ILAYER>用來指定內(nèi)容的相對(duì)位置。如果沒有指定位置，層將顯示在瀏覽器窗口的左上角。層的一些可用屬性如表19-02所示。

表19-02 層對(duì)象的屬性

屬性

說明

name="layerName"

層的名稱

left=xPosition

距離左上角的水平位置

top=yPosition

距離左上角的垂直位置

z-index=layerIndex

層索引號(hào)

width=layerWidth

層的寬度(以象素為單位)

clip="x1_offset, y1_offset,
x2_offset, y2_offset"

定義層的顯示寬度

above="layerName"

定義新創(chuàng)建的層要在哪一層上面

below="layerName"

定義新創(chuàng)建的層要在哪一層下面

Visibility=show|hide|inherit

層的可視性

bgcolor="rgbColor"

背景顏色

background="imageURL"

背景圖像

　　例如，要?jiǎng)?chuàng)建兩個(gè)層對(duì)象，第一層放圖像，第二層上放文本，而且文本要顯示在圖像上，可以使用下面的程序?qū)崿F(xiàn)：
　　<HTML>
　　　<LAYER ID=pic Z-INDEX=0 LEFT=50 TOP=10>
　　　　<IMG SRC="red.gif" WIDTH=108 HEIGHT=103>
　　　</LAYER>
　　　<LAYER ID=txt01 Z-INDEX=1 LEFT=50 TOP=10>
　　　　<FONT SIZE=+2> <I> <FONT COLOR="#00FFFF">這是文字層</FONT> </I> </FONT>
　　　</LAYER>
　　</HTML>
　　在這個(gè)程序中使用了層的索引屬性Z-INDEX，它也表示層的出現(xiàn)次序。最高索引號(hào)的層將顯示在最頂層。
　　運(yùn)行這個(gè)程序后在瀏覽器上將顯示如圖19-19所示的頁(yè)面。

圖19-19 層對(duì)象演示頁(yè)面

19.10.3 層與JavaScript

通過JavaScript可以訪問層。訪問某層的首要條件是要知道層在JavaScript中的表示方法。其中一種比較好的方法是給每一層起一個(gè)名字。如果用下面的方法來命名層，
　　<LAYER ... NAME=myLayer>
　　　……
　　</LAYER>
　　我們就可以通過document.layers["myLayer"]來訪問這層。按照Netscape公司提供的文檔，也可以寫成document.myLayer。
　　此外，我們也可以通過整數(shù)索引號(hào)來訪問層。為了訪問最低層，可以使用document.layers[0]。但要注意，整數(shù)索引號(hào)與z-index不等同。例如，layer1的Z-INDEX＝15，layer2的Z-INDEX＝50，要訪問layer1和layer2就要通過document.layers[0]和document.layers[1]來訪問，而不是通過document.layers[17]和document.layers[100]來訪問。
　　層有好幾個(gè)屬性，可以使用JavaScript來改變這些屬性。下面是一個(gè)顯示和隱藏層的例子，點(diǎn)擊該程序生成的按鈕就可顯示和隱藏“這是HTML文檔中的一層”文本層。它的源程序如下：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<ILAYER ID=myLayer VISIBILITY=show>
　　　　　<FONT SIZE=+1 COLOR="#0000ff"><I>這是HTML文檔中的一層</I></FONT>
　　　　</ILAYER>
　　　　<FORM>
　　　　　<INPUT type="button" VALUE="顯示/隱藏層" ONCLICK="showHide()">
　　　　</FORM>
　　　</BODY>
　　</HTML>

19.10.4 層對(duì)象的移動(dòng)

利用層的left(左)和top(頂)屬性，可以給層對(duì)象賦予新的數(shù)值，從而產(chǎn)生移動(dòng)的效果。下面就是產(chǎn)生這種效果的一個(gè)程序：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY ONLOAD="setInterval('move()', 20)">
　　　　<ILAYER ID=myLayer2 LEFT=0>
　　　　　<FONT SIZE=+1 COLOR="#0000ff"><I>這是HTML文檔中的一層</I></FONT></ILAYER>
　　　</BODY>
　　</HTML>
　　該程序加載之后，“這是HTML文檔中的一層”就會(huì)在瀏覽器窗口上周而復(fù)始地左右移動(dòng)。
　　在這個(gè)程序中，使用<ILAYER> … </ILAYER>標(biāo)簽創(chuàng)建了一個(gè)稱為myLayer2的層；為了在網(wǎng)頁(yè)加載之后立即產(chǎn)生“這是HTML文檔中的一層”的移動(dòng)效果，在<body>標(biāo)簽中使用了ONLOAD事件處理程序中的處理法setInterval( )，這是JavaScript 1.2的新處理法，使用它可以定時(shí)調(diào)用函數(shù)。ONLOAD="setInterval('move()', 20)"表示每隔20毫秒調(diào)用一次move()函數(shù)，用它來設(shè)置層的位置。
　　此外，層不僅可以疊加。而且在疊層上的對(duì)象也可以移動(dòng)。下面所示的程序就可以使“這是HTML文檔中的一層”對(duì)象在圖對(duì)象的上面左右移動(dòng)：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY ONLOAD="setInterval('move()', 20)">
　　　　<ILAYER ID=pic Z-INDEX=0 LEFT=60 TOP=10 HEIGHT=108 WIDTH=103>
　　　　　<IMG SRC="red.gif" WIDTH=108 HEIGHT=103 >
　　　　</ILAYER>
　　　　<ILAYER ID=myLayer Z-INDEX=1 LEFT=0 TOP=-60 >
　　　　　<FONT SIZE=+2 COLOR="#0000ff"><I>這是HTML文檔中的一層</I></FONT></ILAYER>
　　　　<LAYER ID=txt Z-INDEX=2 LEFT=50 TOP=120>
　　　　　<FONT SIZE=+1> 文字顯示在圖像層上左右移動(dòng)</FONT>
　　　　</LAYER>
　　　</BODY>
　　</HTML>
　　在Netscape公司的Communicator瀏覽器上將顯示如圖19-20所示的左右移動(dòng)的頁(yè)面。

圖19-20 層對(duì)象的移動(dòng)演示頁(yè)面

19.10.5 圖像的剪取

　　使用HTML的屬性可以定義層上哪一矩形部分可以被顯示出來，這個(gè)功能稱為圖像對(duì)象剪取(clipping)。例如，使用下面的程序可以僅僅顯示圖像的一部分，而其余部分不顯示。
　　<ILAYER LEFT=0 TOP=0 CLIP="20,25,110,120">
　　　　<IMG SRC="art01.jpg" WIDTH=404 HEIGHT=212>
　　</ILAYER>
　　在這個(gè)程序中，整幅圖像的尺寸是404×212象素，顯示部分為90×95象素。在HTML的標(biāo)簽<ILAYER> … <ILAYER>之間，CLIP屬性的前兩個(gè)參數(shù)定義左上角的坐標(biāo)，后兩個(gè)參數(shù)定義右下角的坐標(biāo)，如圖19-21所示。

圖19-21 圖像對(duì)象的剪取

通過改變對(duì)象層的clip.left, clip.top, clip.right和clip.bottom屬性，也就是賦予新的象素值，剪取圖像將發(fā)生變化。下面的程序?qū)?dòng)態(tài)地演示剪取的圖像：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY>
　　　　<ILAYER ID="imgLayer" CLIP="0,0,0,0">
　　　　　<IMG name="art01" SRC="art01.jpg" WIDTH=404 HEIGHT=212>
　　　　</ILAYER>
　　　　<FORM>
　　　　　按此按鈕開始顯示圖像：<INPUT type=button VALUE="開始" ONCLICK="start()">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　<BODY>部分的按鈕用來調(diào)用函數(shù)start()。該函數(shù)在計(jì)算開始顯示點(diǎn)之后就調(diào)用函數(shù)show()。函數(shù)show()的最后設(shè)置定時(shí)器，在整幅圖像沒有顯示完之前，每隔20毫秒調(diào)用一次函數(shù)show()，直到整幅圖顯示完畢。請(qǐng)注意，在函數(shù)start()中獲取圖像尺寸的程序：
　　　var width= document.layers["imgLayer"].document.art01.width;
　　　var height= document.layers["imgLayer"].document.art01.height;
　　通過document.layers["imgLayer"]可以訪問稱為imgLayer的層對(duì)象，但為什么在document.layers["imgLayer"]之后還要使用document(文檔)？這是因?yàn)槊恳粚佣己兴约旱腍TML頁(yè)面，這也就是意味每一層都有一個(gè)document(文檔)對(duì)象，為了訪問imgLayer層中的圖像對(duì)象就需要訪問這個(gè)document(文檔)對(duì)象。在本例中的圖像對(duì)象是art01。
　　為便于調(diào)試程序，設(shè)置了一個(gè)開始按鈕。在Communicator瀏覽器上點(diǎn)擊按鈕，執(zhí)行該程序的結(jié)果如圖19-22所示。

圖19-22 JavaScript圖像剪取的演示頁(yè)面

19.10.6 嵌套層

我們已經(jīng)知道一層可以包含幾個(gè)不同的對(duì)象。一層也可以包含其他的層，這就叫做層的嵌套。它的用途可以通過下面的兩個(gè)例子來體會(huì)。
　　[例19.3] 一個(gè)稱為父層(parentLayer)的包含兩個(gè)子層1(layer1)和層2(layer2)，在<BODY>部分還有3個(gè)按鈕，這些按鈕用來啟動(dòng)/停止層的移動(dòng)。在Communicator瀏覽器中可以看到，parentLayer的移動(dòng)會(huì)帶動(dòng)其他兩個(gè)層一起移動(dòng)，而layer1或者layer2的移動(dòng)則不會(huì)影響其他層的移動(dòng)。它的源程序如下所示：
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY ONLOAD="setInterval('move()', 20)">
　　　　<ILAYER ID=parentLayer LEFT=100 TOP=10>
　　　　　<LAYER ID=layer1 Z-INDEX=0 LEFT=0 TOP=-10>
　　　　　　這是第一層(first layer)
　　　　　</LAYER>
　　　　　<LAYER ID=layer2 Z-INDEX=1 LEFT=200 TOP=-10>
　　　　　　這是第二層(second layer)
　　　　　</LAYER>
　　　　　<BR><BR>
　　　　　　這是父層(parent layer)
　　　　</ILAYER>
　　　　<FORM>
　　　　　<INPUT type="button" VALUE="移動(dòng)/停止父層" ONCLICK="startStop(0);">
　　　　　<INPUT type="button" VALUE="移動(dòng)/停止第一層" ONCLICK="startStop(1);">
　　　　　<INPUT type="button" VALUE="移動(dòng)/停止第二層" ONCLICK="startStop(2);">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在這個(gè)程序中可以看到，在parentLayer內(nèi)部定義了兩個(gè)層，這就是嵌套層。這些層的訪問是通過JavaScript的函數(shù)function move()實(shí)現(xiàn)的：
　　document.layers["parentLayer"].left= 100 + pos0;
　　…
　　document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
　　…
　　document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;
　　要注意的是，訪問layer1和layer2嵌套層不能僅僅用document.layers["layer1"]或者用document.layers["layer2"]，因?yàn)樗鼈兪窃趐arentLayer內(nèi)。在Communicator瀏覽器上將顯示如圖19-23所示的移動(dòng)文本。

圖19-23 JavaScript文本嵌套層的演示頁(yè)面

[例19.4] 圖像對(duì)象在指定的剪取區(qū)中上下移動(dòng)。
　　<HTML>
　　　<HEAD>
　　　　<SCRIPT LANGUAGE="JavaScript">
　　　　　
　　　　</SCRIPT>
　　　</HEAD>
　　　<BODY ONLOAD="setInterval('moveNclip()', 20);">
　　　　<ILAYER ID="clippingLayer" Z-INDEX=0 CLIP="25,25 320,125" TOP=0 LEFT=0>
　　　　　<ILAYER ID="imgLayer" TOP=0 LEFT=0>
　　　　　　<IMG ID=art01 SRC="art01.jpg" WIDTH=404 HEIGHT=212>
　　　　　</ILAYER>
　　　　</ILAYER>
　　　</BODY>
　　</HTML>
　　在Communicator瀏覽器上將顯示如圖19-24所示的上下滾動(dòng)頁(yè)面。

圖19-24 JavaScript圖像嵌套層的演示頁(yè)面

19.11 層疊樣式和JavaScript樣式

在為HTML文檔引入樣式(style)之前，Web網(wǎng)頁(yè)的作者對(duì)網(wǎng)頁(yè)文檔格式的控制很有限。例如，不能設(shè)置網(wǎng)頁(yè)的邊界，指定行的高度或者文本的邊框和位置等等。樣式信息可以在HTML文檔中指定，也可以使用外部的樣式單(style sheet)文件。樣式信息可用于單個(gè)文素，也可以用于一組文素。使用樣式可以讓作者指定Web網(wǎng)頁(yè)格式的許多屬性，這樣可以使整個(gè)網(wǎng)頁(yè)更加美觀，它的風(fēng)格也容易取得一致。
　　萬(wàn)維網(wǎng)協(xié)會(huì)W3C(World Wide Web Consortium)于1996年12月提出了稱為層疊樣式單版本1(Cascading Style Sheets, level 1，CSS1)推薦標(biāo)準(zhǔn)。該標(biāo)準(zhǔn)在HTML中使用<STYLE>和</STYLE>標(biāo)簽來指定樣式。
　　[例19.5] 使用CSS1樣式定義標(biāo)題1(H1)的顏色為紅色，源程序如下：
　　<HTML>
　　　<HEAD>
　　　　<TITLE>層疊樣式單版本</TITLE>
　　　　<STYLE TYPE="text/css">
　　　　　H1 { color: red}
　　　　</STYLE>
　　　</HEAD>
　　　<BODY>
　　　　<H1>大字標(biāo)題是紅色</H1>
　　　　<P STYLE="color: blue">而這個(gè)段落的文字是藍(lán)色的
　　　</BODY>
　　</HTML>
　　在<STYLE TYPE="text/css">中定義了樣式的類型，表示文字用css樣式。使用JavaScript編寫樣式時(shí)，要用<STYLE TYPE="text/JavaScript">。
　　[例19.6] 使用JavaScript定義段落中的文字字號(hào)為14磅，距離左邊距為200磅，字的顏色為紅色，標(biāo)題3(H3)的字體顏色為藍(lán)色。源程序如下：
　　<HTML>
　　　<HEAD>
　　　　<TITLE> type_Document_Title_here </TITLE>
　　　　<STYLE TYPE = "text/javascript">
　　　　　tags.P.fontSize = "14pt";
　　　　　tags.P.marginLeft = "200pt";
　　　　　tags.P.color = "red";
　　　　　tags.H3.color = "blue";
　　　　</STYLE>
　　　</HEAD>
　　　<BODY>
　　　　<H3 ALIGN="CENTER">網(wǎng)頁(yè)制作</H3>
　　　　<p>編寫HTML文檔是每個(gè)大學(xué)生都要具備的基本技能
　　　</BODY>
　　</HTML>
　　[例19.7] 下面的源程序用來創(chuàng)建一個(gè)樣式類(style class)并把它應(yīng)用到使用<LAYER>創(chuàng)建的層[1]。
　　<HTML>
　　　<HEAD>
　　　　<TITLE>層疊樣式單</TITLE>
　　　　<STYLE TYPE="text/css">
　　　　　
　　　　</STYLE>
　　　</HEAD>
　　　<BODY BGCOLOR=white>
　　　　<LAYER ID=layerN TOP=10 LEFT=20 BGCOLOR="#FFFFCC" CLASS=styleN>
　　　　　<H1 ALIGN="CENTER">Layer N </H1>
　　　　　<P>請(qǐng)使用這是一個(gè)色彩豐富的層</P>
　　　　</LAYER>
　　　</BODY>
　　</HTML>
　　在Communicator瀏覽器上的輸出如圖19-25所示。

圖19-25 層疊樣式演示頁(yè)面

　　在這個(gè)例子中用到了CLASS=styleN，其中的CLASS稱為“類”。這是HTML新添加的一個(gè)屬性，表示在<BODY>和</BODY>之間所有的文檔元素都可以被分成類，在樣式單中這些類可以被尋址。下面的例子進(jìn)一步說明了類的概念
　　<HTML>
　　　<HEAD>
　　　　<TITLE>Title</TITLE>
　　　　<STYLE TYPE="text/css">
　　　　　H2.Students { color: blue }
　　　　</STYLE>
　　　</HEAD>
　　　<BODY>
　　　　<H2 CLASS=Students>大學(xué)生的素質(zhì)</H2>
　　　　近來對(duì)大學(xué)生的素質(zhì)進(jìn)行了調(diào)查…
　　　　<H2 CLASS=Students>調(diào)查結(jié)果分析</H2>
　　　　…
　　　</BODY>
　　</HTML>
　　在這個(gè)程序中，“大學(xué)生的素質(zhì)”和“調(diào)查結(jié)果分析”是屬于同一類。在Communicator瀏覽器上的輸出如圖19-26所示。

圖19-26 類概念的演示頁(yè)面

練習(xí)與思考題

　　使用HTML編輯器重新輸入本章所示的所有源程序，或者根據(jù)讀者自己的水平有選擇地輸入比較難理解的源程序，自己設(shè)計(jì)程序中沒有提供的HTML文檔、圖和AVI等文件，然后使用Web瀏覽器檢查程序的準(zhǔn)確性。

參考文獻(xiàn)和站點(diǎn)

http://developer./docs/manuals/communicator/jsguide4/index.htm (瀏覽日期：1998年11月)
http://developer./docs/manuals/communicator/jsref/index.htm (瀏覽日期：1998年11月)
http://www./javatour/framehol.htm (瀏覽日期：1999年2月6日)

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：百眼通 > 《04多媒體（辦公）技術(shù)-108》

舉報(bào)/認(rèn)領(lǐng)