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

百眼通 2014-09-29

展開全文

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

19.1 簡介

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

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>
　　在這個例子中，我們可看到在<HEAD> … </HEAD> 之間插入了一個新的標簽：<SCRIPT> … </SCRIPT>，而<SCRIPT LANGUAGE="JavaScript">用來告訴瀏覽器這是用JavaScript編寫的程序。HTML的注釋標簽用來告訴瀏覽器不要顯示注釋

19.2.2 事件的概念

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

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

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

19.2.3 函數(shù)的概念

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

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

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

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

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

　　JavaScript以分層結(jié)構(gòu)的方式組織Web網(wǎng)頁上的所有文素。每個文素都被作為一個對象(Object)來看待，稱為“HTML對象”，每個對象都有屬性(Properties)和處理法(methods)。下面是一個簡單的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="請按此按鈕" NAME="myButton" ONCLICK="location.href='../../../www./default.htm'; ">
　　　　</FORM><P>
　　　　<CENTER>
　　　　<IMG SRC="image(1).gif" WIDTH=400 HEIGHT=10><BR><BR>
　　　　<A >我的主頁</A>
　　　　</CENTER>
　　　</BODY>
　　</HTML>
　　在瀏覽器上將顯示如圖19-04所示的頁面。

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

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

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

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

圖19-06 對象間的操作

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

19.3.2 網(wǎng)址對象

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

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

　　當(dāng)你點擊該按鈕時就可瀏覽“中國教育和科研計算機網(wǎng)”的主頁。

19.4 幀窗

19.4.1 創(chuàng)建幀窗

　　也許你瀏覽萬維網(wǎng)(Web)時已經(jīng)注意到，Web瀏覽器窗口被分成兩個或者三個顯示窗口，分別顯示各自的HTML文檔。每個這樣的小窗口稱為frame，可把它譯成“幀窗”。一個常見的問題就是JavaScript如何與幀窗一起工作。
　　創(chuàng)建幀窗需要使用<frameset>和</frameset>標簽。例如要把Web瀏覽器窗口分成兩個等寬的幀窗，可用下面的程序?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所示的頁面。

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

　　在這個程序中使用了<frameset>的rows(行)屬性把Web瀏覽器窗口分成上下兩個幀窗，上面的幀窗加載page1.html，下面的幀窗加載page2.html。
　　如果使用<frameset>的columns(列)屬性，Web瀏覽器窗口就會被縱向分割。此外，瀏覽器窗口的分割還可以嵌套。例如，使用下面的程序可在橫向和縱向?qū)g覽器窗口進行分割：
　　<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所示的頁面。

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

19.4.2 JavaScript和幀窗

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

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

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

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

　　設(shè)計這樣的網(wǎng)頁首先需要一個創(chuàng)建frame1和frame2兩個幀窗的程序，在此假設(shè)程序名為jstest02.html，這個程序可寫成：
　　<HTML>
　　　<FRAMESET COLS="25%,75%">
　　　　<FRAME SRC="menu.html" NAME="menu">
　　　　<FRAME SRC="homework.html" NAME="main">
　　　</FRAMESET>
　　</HTML>
　　在這個程序中，把frame1命名為menu，開始時顯示menu.html文檔；把frame2命名為main，開始時顯示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)容簡介 </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個文檔：
　　① start.html文檔：
　　<HTML>
　　　<BODY>
　　　　<CENTER><U>開始頁</U><BR>
　　　　<H2>作業(yè)名稱</H2>
　　　　… </CENTER>
　　　</BODY>
　　</HTML>
　　② first.html文檔：
　　<HTML>
　　　<BODY>
　　　　<CENTER><U>文檔1</U><BR>
　　　　<H2>內(nèi)容簡介</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文檔中，需要說明如下幾點：
　　(1) 使用了一種把新的網(wǎng)頁加載到main幀窗中的不同方法。具體說就是，在“<A HREF="javascript：load('first.html')">內(nèi)容簡介 </A><BR>”中的鏈接使用了加載函數(shù)load()，并且在<A>的屬性HREF＝" "中使用了“javascript：”來把first.html文檔加載到main幀窗中。
　　(2) JavaScript的加載函數(shù)load()定義為：
　　function load(url) {
　　　parent.main.location.href= url;
　　}
　　括號“( )”中的url是傳遞參數(shù)的變量，這就意味字符串'first1.html'通過url變量來傳遞。通過變量來傳遞參數(shù)是程序設(shè)計的一個重要概念。
　　(3) 其他鏈接使用的是標簽“<A>”的“TARGET”屬性，實際上它不是JavaScript的屬性，而是HTML的屬性。
　　(4) 在“<A HREF="third.html" TARGET="_top">作業(yè)總結(jié)</A>”中，“<A>”的屬性“TARGET＝_top”是去掉frame1和frame2幀窗。third.html將顯示在整個瀏覽器窗口中。
　　(5) 如果瀏覽器窗口分割成frame1、frame2和frame3共三個幀窗，使用JavaScript的load()函數(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)用這個函數(shù)。

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

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

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

19.5.2 window.open()的處理法

在函數(shù)window.open中，它的處理法(method)可有3種選擇參數(shù)，可以用來指定窗口顯示的內(nèi)容、窗口的名稱和外觀。這3個參數(shù)是：
　　① 指定要加載的HTML文檔的URL。例如，21_lecture.html。
　　② 窗口的名稱?！癲isplayWindow”是所有Web瀏覽器都支持的名稱。有些瀏覽器可使用你自己喜歡的名稱，例如“MyWindow”。
　?、?一套窗口外觀參數(shù)選項(options)。例如，窗口的寬度、高度、滾動框和其他功能。
　　window.open ()的一般處理法格式為：
　　　newwindow=window.open("mypage.html","mywindow", options)
　　例如，要把21_lecture.html文檔加載到一個寬度(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>
　　請注意：①在字符串"width=400,height=300,status=no,toolbar=no,menubar=no"中沒有空格字符;②myWin是變量，而不是window的名稱。表19-01列出了可供選擇的參數(shù)選項。

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

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

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

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

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

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

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

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

19.6.2 定時設(shè)置

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

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

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

19.6.3 滾動程序

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

19.7 預(yù)定義對象

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

19.7.1 時間對象

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

圖19-14 時鐘顯示

19.7.2 數(shù)組對象

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

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

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

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

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

19.8 確認輸入

在訪問因特網(wǎng)上的站點時，經(jīng)常會遇到要求用戶填寫許多表交易單(form)，或者稱為表單。交易單的輸入經(jīng)常要送到服務(wù)器(server)，或者通過電子郵件送到某個賬號。如果要驗證用戶輸入的信息是否有效可使用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="檢驗" ONCLICK="test1(this.form)">
　　　　　<P>輸入你的郵件地址:<BR>
　　　　　<INPUT TYPE="text" NAME="text2">
　　　　　<INPUT type="button" NAME="button2" VALUE="檢驗" ONCLICK="test2(this.form)">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在瀏覽器上將顯示如圖19-17所示的頁面。

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

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

19.9 JavaScript動畫

19.9.1 圖像對象

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

19.9.2 加載和更新圖像

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

以上介紹了JavaScript動畫的基本原理，下面給出一個顯示動畫的程序供參考。
　　<HTML>
　　　<HEAD><TITLE>JavaScript的動畫入門 </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所示的頁面。

　 … …
圖19-18 JavaScript的動畫演示頁面

19.10 層對象

19.10.1 層對象的概念

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

19.10.2 創(chuàng)建層對象

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

表19-02 層對象的屬性

屬性

說明

name="layerName"

層的名稱

left=xPosition

距離左上角的水平位置

top=yPosition

距離左上角的垂直位置

z-index=layerIndex

層索引號

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"

背景圖像

　　例如，要創(chuàng)建兩個層對象，第一層放圖像，第二層上放文本，而且文本要顯示在圖像上，可以使用下面的程序?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>
　　在這個程序中使用了層的索引屬性Z-INDEX，它也表示層的出現(xiàn)次序。最高索引號的層將顯示在最頂層。
　　運行這個程序后在瀏覽器上將顯示如圖19-19所示的頁面。

圖19-19 層對象演示頁面

19.10.3 層與JavaScript

通過JavaScript可以訪問層。訪問某層的首要條件是要知道層在JavaScript中的表示方法。其中一種比較好的方法是給每一層起一個名字。如果用下面的方法來命名層，
　　<LAYER ... NAME=myLayer>
　　　……
　　</LAYER>
　　我們就可以通過document.layers["myLayer"]來訪問這層。按照Netscape公司提供的文檔，也可以寫成document.myLayer。
　　此外，我們也可以通過整數(shù)索引號來訪問層。為了訪問最低層，可以使用document.layers[0]。但要注意，整數(shù)索引號與z-index不等同。例如，layer1的Z-INDEX＝15，layer2的Z-INDEX＝50，要訪問layer1和layer2就要通過document.layers[0]和document.layers[1]來訪問，而不是通過document.layers[17]和document.layers[100]來訪問。
　　層有好幾個屬性，可以使用JavaScript來改變這些屬性。下面是一個顯示和隱藏層的例子，點擊該程序生成的按鈕就可顯示和隱藏“這是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 層對象的移動

利用層的left(左)和top(頂)屬性，可以給層對象賦予新的數(shù)值，從而產(chǎn)生移動的效果。下面就是產(chǎn)生這種效果的一個程序：
　　<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文檔中的一層”就會在瀏覽器窗口上周而復(fù)始地左右移動。
　　在這個程序中，使用<ILAYER> … </ILAYER>標簽創(chuàng)建了一個稱為myLayer2的層；為了在網(wǎng)頁加載之后立即產(chǎn)生“這是HTML文檔中的一層”的移動效果，在<body>標簽中使用了ONLOAD事件處理程序中的處理法setInterval( )，這是JavaScript 1.2的新處理法，使用它可以定時調(diào)用函數(shù)。ONLOAD="setInterval('move()', 20)"表示每隔20毫秒調(diào)用一次move()函數(shù)，用它來設(shè)置層的位置。
　　此外，層不僅可以疊加。而且在疊層上的對象也可以移動。下面所示的程序就可以使“這是HTML文檔中的一層”對象在圖對象的上面左右移動：
　　<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> 文字顯示在圖像層上左右移動</FONT>
　　　　</LAYER>
　　　</BODY>
　　</HTML>
　　在Netscape公司的Communicator瀏覽器上將顯示如圖19-20所示的左右移動的頁面。

圖19-20 層對象的移動演示頁面

19.10.5 圖像的剪取

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

圖19-21 圖像對象的剪取

通過改變對象層的clip.left, clip.top, clip.right和clip.bottom屬性，也就是賦予新的象素值，剪取圖像將發(fā)生變化。下面的程序?qū)討B(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ù)在計算開始顯示點之后就調(diào)用函數(shù)show()。函數(shù)show()的最后設(shè)置定時器，在整幅圖像沒有顯示完之前，每隔20毫秒調(diào)用一次函數(shù)show()，直到整幅圖顯示完畢。請注意，在函數(shù)start()中獲取圖像尺寸的程序：
　　　var width= document.layers["imgLayer"].document.art01.width;
　　　var height= document.layers["imgLayer"].document.art01.height;
　　通過document.layers["imgLayer"]可以訪問稱為imgLayer的層對象，但為什么在document.layers["imgLayer"]之后還要使用document(文檔)？這是因為每一層都含有它自己的HTML頁面，這也就是意味每一層都有一個document(文檔)對象，為了訪問imgLayer層中的圖像對象就需要訪問這個document(文檔)對象。在本例中的圖像對象是art01。
　　為便于調(diào)試程序，設(shè)置了一個開始按鈕。在Communicator瀏覽器上點擊按鈕，執(zhí)行該程序的結(jié)果如圖19-22所示。

圖19-22 JavaScript圖像剪取的演示頁面

19.10.6 嵌套層

我們已經(jīng)知道一層可以包含幾個不同的對象。一層也可以包含其他的層，這就叫做層的嵌套。它的用途可以通過下面的兩個例子來體會。
　　[例19.3] 一個稱為父層(parentLayer)的包含兩個子層1(layer1)和層2(layer2)，在<BODY>部分還有3個按鈕，這些按鈕用來啟動/停止層的移動。在Communicator瀏覽器中可以看到，parentLayer的移動會帶動其他兩個層一起移動，而layer1或者layer2的移動則不會影響其他層的移動。它的源程序如下所示：
　　<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="移動/停止父層" ONCLICK="startStop(0);">
　　　　　<INPUT type="button" VALUE="移動/停止第一層" ONCLICK="startStop(1);">
　　　　　<INPUT type="button" VALUE="移動/停止第二層" ONCLICK="startStop(2);">
　　　　</FORM>
　　　</BODY>
　　</HTML>
　　在這個程序中可以看到，在parentLayer內(nèi)部定義了兩個層，這就是嵌套層。這些層的訪問是通過JavaScript的函數(shù)function move()實現(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"]，因為它們是在parentLayer內(nèi)。在Communicator瀏覽器上將顯示如圖19-23所示的移動文本。

圖19-23 JavaScript文本嵌套層的演示頁面

[例19.4] 圖像對象在指定的剪取區(qū)中上下移動。
　　<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所示的上下滾動頁面。

圖19-24 JavaScript圖像嵌套層的演示頁面

19.11 層疊樣式和JavaScript樣式

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

圖19-25 層疊樣式演示頁面

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

圖19-26 類概念的演示頁面

練習(xí)與思考題

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

參考文獻和站點