JavaScript是一種解釋語言，使用它可以使你的網(wǎng)頁制作得更加科學(xué)、生動(dòng)和美觀，人-機(jī)界面更加友好。本章將提供大量的程序?qū)嵗榻BJavaScript的基本概念和應(yīng)用，為讀者進(jìn)一步深入學(xué)習(xí)JavaScript和其他描述性語言打下基礎(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ī)解釋的語言，而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ā)的一種腳本語言(scripting language)，或者稱為描述語言。在HTML基礎(chǔ)上，使用JavaScript可以開發(fā)交互式Web網(wǎng)頁。運(yùn)行用JavaScript編寫的程序需要能支持JavaScript語言的瀏覽器。Netscape公司Navigator 3.0以上版本的瀏覽器都能支持JavaScript程序，微軟公司Internet Explorer 3.0以上版本的瀏覽器基本上支持JavaScript。微軟公司還有她自己開發(fā)的JavaScript，稱為JScript。JavaScript和JScript有許多相似之處。
在介紹過程中，將通過大量的例子來體會(huì)JavaScript的含義，這些例子與HTML緊緊地連在一起，并且可以直接應(yīng)用于網(wǎng)頁制作。由于例子中的每條語句、每個(gè)對(duì)象和每個(gè)符號(hào)等許多細(xì)節(jié)不可能在本書中詳細(xì)闡述。因此，如果需要更深入更詳細(xì)的內(nèi)容，請(qǐng)參看有關(guān)JavaScript語言和HTML語言方面的參考文獻(xiàn)。
19.2 事件與函數(shù)
19.2.1 HTML文檔中嵌入JavaScript
JavaScript程序可直接嵌入到HTML文檔中，如下例所示：
<HTML>
<HEAD> <TITLE>JavaScript入門</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript程序開始 -
document.write("這是JavaScript!")
// - JavaScript結(jié)束 - -->
</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語言中，事件(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所示的頁面。
點(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">
<!-- hide
document.write("JavaScript不是很難學(xué)!<br>");
document.write("這是JavaScript!<br>");
document.write("JavaScript不是很難學(xué)!<br>");
document.write("這是JavaScript!<br>");
document.write("JavaScript不是很難學(xué)!<br>");
document.write("這是JavaScript!<br>");
// -->
</SCRIPT>
</HTML>
這段程序在瀏覽器上將顯示如圖19-03所示的頁面。
圖19-03 演示函數(shù)概念的頁面
完成同樣功能的這段源程序也可以用下面的程序來實(shí)現(xiàn)：
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function myFunction() {
document.write("JavaScript不是很難學(xué)!<br>");
document.write("這是JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// -->
</SCRIPT>
</HTML>
在這段程序中我們定義了一個(gè)函數(shù)：
function myFunction() {
document.write("JavaScript不是很難學(xué)!<br>");
document.write(這是JavaScript!<br>");
}
其中，function是JavaScript函數(shù)的聲明語句，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">
<!-- hide
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="計(jì)算" ONCLICK=" calculation()">
</FORM>
</BODY>
</HTML>
其中，關(guān)鍵字“var”是JavaScript的變量(variable)聲明語句，聲明“x”、“y”和“result”是變量；<INPUT … >這條語句表示，當(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)頁上的所有文素。每個(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.edu.cn/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瀏覽器本身是一個(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所示的頁面。
圖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)頁http://www.xyz.com/page.html，那么location.href就等于這個(gè)網(wǎng)址。
更重要的是你可以給location.href指定新的值。下面的例子就可以把新的網(wǎng)頁加載到窗口上：
<FORM >
<INPUT TYPE="BUTTON" VALUE="中國(guó)教育和科研計(jì)算機(jī)網(wǎng)(CERNET)"
ONCLICK="location.href='../../../www.edu.cn/default.htm'; ">
</FORM>
在瀏覽器上將顯示如圖19-07所示的頁面。
圖19-07 網(wǎng)址對(duì)象的演示頁面
當(dāng)你點(diǎn)擊該按鈕時(shí)就可瀏覽“中國(guó)教育和科研計(jì)算機(jī)網(wǎng)”的主頁。
19.4 幀窗
19.4.1 創(chuàng)建幀窗
也許你瀏覽萬維網(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所示的頁面。
圖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所示的頁面。
圖19-09 創(chuàng)建不同樣式的幀窗
19.4.2 JavaScript和幀窗
前面已經(jīng)介紹，JavaScript以分層結(jié)構(gòu)的方式來組織網(wǎng)頁上的所有文素，對(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)的主頁。
圖19-11所示的網(wǎng)頁是幀窗的一個(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)頁
設(shè)計(jì)這樣的網(wǎng)頁首先需要一個(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">
<!-- hide
function load(url) {
parent.main.location.href= url;
}
// -->
</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>開始頁</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)頁加載到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">
<!-- hide
function openWin1() {
myWin=window.open("21_lecture.html");
}
// -->
</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。
?、?窗口的名稱。“displayWindow”是所有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">
<!--hide
function openWin2() {
myWin=open("21_lecture.html", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");
}
// -->
</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">
<!-- hide
function openWin3() {
myWin= open("", "displayWindow",
"width=500,height=400,status=yes,toolbar=yes,menubar=yes");
//打開文檔準(zhǔn)備后面的輸出
myWin.document.open();
// 創(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>");
// 關(guān)閉文檔而不是窗口
myWin.document.close();
}
// -->
</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">
<!-- hide
function statbar(txt) {
window.status = txt;
}
// -->
</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)頁的URL地址。下面的程序就是一個(gè)這樣的例子。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function statbar(txt) {
window.status = txt;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A 連接 http:/www.edu.cn'; return true;"
onMouseOut="window.status='';">中國(guó)教育和科研計(jì)算機(jī)網(wǎng)(CERNET)</A>
</BODY>
</HTML>
在瀏覽器上將顯示如圖19-12所示的頁面。
圖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">
<!-- hide
function timer() {
setTimeout"alert('從點(diǎn)擊按鈕開始算起時(shí)間已超過3秒鐘!')", 3000);
}
// -->
</SCRIPT>
...
<FORM>
<INPUT type="button" VALUE="定時(shí)器" ONCLICK="timer()">
</FORM>
在瀏覽器上將顯示如圖19-13所示的頁面。
圖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">
<!-- hide
//定義要滾動(dòng)的文本
var scrtxt = "這是JavaScript! " + "這是JavaScript! " + "這是JavaScript!";
var length = scrtxt.length; //文本的長(zhǎng)度
var width = 100; //文本滾動(dòng)框的寬度
var pos = -(width + 2);
function scroll() {
// 在右邊顯示文本，設(shè)置定時(shí)器
pos++; //左移文本一步
var scrollerText = ""; //計(jì)算要顯示的文本
if (pos == length) {
pos = -(width + 2); }
//如果文本還沒有到達(dá)左邊就要添加一些空格，否則就去掉到達(dá)左邊的文本
if (pos < 0) {
for (var i = 1; i <= Math.abs(pos); i++) {
scrollerText = scrollerText + " ";}
scrollerText = scrollerText + scrtxt.substring(0, width - i + 1); }
else {
scrollerText = scrollerText + scrtxt.substring(pos, width + pos); }
window.status = scrollerText; //把文本寫到狀態(tài)欄
setTimeout("scroll()", 100); // 100毫秒之后再調(diào)用函數(shù)
} // -->
</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頁面加載之后立即調(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)頁等。
為了存取日期和時(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">
<!-- hide
now= new Date();
document.write("Time: " + now.getHours() + ":" + now.getMinutes() + "<br>");
document.write("Date: " + (now.getMonth() + 1) + "/" + now.getDate() + "/" +
(now.getYear()));
// -->
</SCRIPT>
[例19.2] 下面是一個(gè)顯示時(shí)鐘的程序：
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
var timeStr, dateStr;
function clock() {
now= new Date();
today= new Date()
//時(shí)間
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timeStr;
// 日期
date= now.getDate();
month= now.getMonth()+1;
month= ((month < 10) ? "0" : "")+ month;
year= now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10) ? "/0" : "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout("clock()",1000);
}
// -->
</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所示的頁面。
圖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">
<!-- hide
colorArray= new Array();
colorArray[0]= "red";
colorArray[1]= "green";
colorArray[2]= "blue";
colorArray[3]= 255;
for (var i= 0; i< 4; i++) {
document.write(colorArray[i] + "<br>");}
// -->
</SCRIPT>
在瀏覽器上將顯示如圖19-15所示的頁面。
圖19-15 數(shù)組對(duì)象演示頁面
19.7.3 數(shù)學(xué)對(duì)象
如果需要數(shù)學(xué)計(jì)算，可以使用JavaScript提供的數(shù)學(xué)對(duì)象(Math object)。例如，要計(jì)算sin(10)，可用下面的程序：
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
var z
var x=10
z=Math.sin(x);
document.write("z= " + z +"<BR>");
// -->
</SCRIPT>
計(jì)算結(jié)果：z= -0.5440211108893698。
如果程序中要使用幾個(gè)Math常數(shù)和處理法，為避免重復(fù)可利用JavaScript的with語句進(jìn)行計(jì)算。例如，要計(jì)算πr2，r×cos(π/6)和r×sin(π/6)，可編寫如下的計(jì)算程序：
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
var a, x, y
var r=10
with (Math) {
a = PI * r * r
x = r * cos(PI)
y = r * sin(PI/2)
}
document.write("a= " + a + "<BR>");
document.write("x= " + x + "<BR>");
document.write("y= " + y);
// -->
</SCRIPT>
在瀏覽器上將顯示如圖19-16所示的頁面。
圖19-16 數(shù)學(xué)對(duì)象演示頁面
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">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("請(qǐng)輸入字符串!")
else alert("Hi "+form.text1.value+"! 下一步!");
}
function test2(form) {
if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1)
alert("無效的電子郵件地址!");
else alert("下一步!");
}
// -->
</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所示的頁面。
圖19-17 檢查用戶輸入信息演示頁面
如果想把瀏覽器上用戶輸入的交易單交給服務(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)頁上的圖像，因此也可以讓用戶創(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頁面上使用最普遍的圖形文件格式之一，使用這種格式制成的動(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)頁上的每一幅圖像都分配一個(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)頁上的第一幅圖像的寬度，寬度的數(shù)值用象素作單位。
如果在一個(gè)Web網(wǎng)頁上有許多圖像，可以給每幅圖像起一個(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)頁的同一個(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幅圖像，可使用下面的語句：
document.myImage.src= hiddenImg[i].src
下面是點(diǎn)擊一次按鈕顯示一幅圖像的完整程序：
<HTML>
<HEAD><TITLE>預(yù)加載圖像</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
hiddenImg = new Array()
for(i = 0; i < 4; i++) {
hiddenImg[i] = new Image()
hiddenImg[i].src = "image" + i + ".gif"
}
ImgNum=0
function animation (){
document.myImage.src= hiddenImg[ImgNum].src;
ImgNum++;
if(ImgNum > 3) {
ImgNum = 0
}
}
// -->
</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">
<!-- hide
delay = 1000
imageNum = 0
//預(yù)先加載動(dòng)畫圖像；該動(dòng)畫由4幅圖像組成。
theImages = new Array()
for(i = 0; i < 4; i++) {
theImages[i] = new Image()
theImages[i].src = "image" + i + ".gif"
}
//動(dòng)畫函數(shù)
function animate() {
document.animation.src = theImages[imageNum].src
imageNum++
if(imageNum > 3) {
imageNum = 0
}
}
//減低幀速率函數(shù)
function slower() {
delay+=100
if(delay > 4000) delay = 4000
}
//提高幀速率函數(shù)
function faster() {
delay-=100
if(delay < 0) delay = 0
}
// -->
</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的動(dòng)畫演示頁面
19.10 層對(duì)象
19.10.1 層對(duì)象的概念
HTML網(wǎng)頁上的層(layer)就像一疊紙中的一張紙。其中，一張紙上寫有文本，在另一張紙上畫有圖畫，在第三張紙上的圖畫周圍寫有一些文字，等等，每一張紙就就是一層。從這個(gè)觀點(diǎn)來看，層就像一個(gè)容器，它可以容納像文本、交易單和圖像這類對(duì)象。如果移動(dòng)某一張紙，這張紙上的所有對(duì)象也就跟著移動(dòng)。把這些“紙”放到HTML頁面上，借助JavaScript的幫助，可以給這些對(duì)象(如圖像)進(jìn)行定位，可以在HTML頁面上移動(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所示的頁面。
圖19-19 層對(duì)象演示頁面
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">
<!-- hide
function showHide() {
if (document.layers["myLayer"].visibility == "show")
document.layers["myLayer"].visibility= "hide"
else document.layers["myLayer"].visibility= "show";
}
// -->
</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">
<!-- hide
var pos=0
var direction
function move() {
if (pos < 0) direction= true;
if (pos > 200) direction= false;
if (direction) pos++
else pos--;
document.layers["myLayer2"].left= pos;
}
// -->
</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)頁加載之后立即產(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">
<!-- hide
var pos=0
var direction
function move() {
if (pos < 0) direction= true;
if (pos > 200) direction= false;
if (direction) pos++
else pos--;
document.layers["myLayer"].left= pos;
}
// -->
</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)的頁面。
圖19-20 層對(duì)象的移動(dòng)演示頁面
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">
<!-- hide
var middleX, middleY, pos;
function start() {
// 獲取圖像尺寸
var width= document.layers["imgLayer"].document.art01.width;
var height= document.layers["imgLayer"].document.art01.height;
//計(jì)算圖像的中點(diǎn)坐標(biāo)
middleX= Math.round(width/2);
middleY= Math.round(height/2);
//開始位置
pos= 0;
//開始顯示!
show();
}
function show() {
// 增加圖像顯示區(qū)
pos+= 2; // 每次增加的大小
document.layers["imgLayer"].clip.left= middleX- pos;
document.layers["imgLayer"].clip.top= middleY- pos;
document.layers["imgLayer"].clip.right= middleX+ pos;
document.layers["imgLayer"].clip.bottom= middleY+ pos;
//檢查整個(gè)圖像是否顯示完畢
if (!((pos > middleX) && (pos > middleY)))
setTimeout("show()", 20);
}
// -->
</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頁面，這也就是意味每一層都有一個(gè)document(文檔)對(duì)象，為了訪問imgLayer層中的圖像對(duì)象就需要訪問這個(gè)document(文檔)對(duì)象。在本例中的圖像對(duì)象是art01。
為便于調(diào)試程序，設(shè)置了一個(gè)開始按鈕。在Communicator瀏覽器上點(diǎn)擊按鈕，執(zhí)行該程序的結(jié)果如圖19-22所示。
圖19-22 JavaScript圖像剪取的演示頁面
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">
<!-- hide
// 開始位置
var pos0= 0;
var pos1= -10;
var pos2= -10;
// 要移動(dòng)?
var move0= true;
var move1= false;
var move2= false;
//方向?
var dir0= false;
var dir1= false;
var dir2= true;
function startStop(which) {
if (which == 0) move0= !move0;
if (which == 1) move1= !move1;
if (which == 2) move2= !move2;
}
function move() {
if (move0) {
// 移動(dòng)parentLayer
if (dir0) pos0--
else pos0++;
if (pos0 < -100) dir0= false;
if (pos0 > 100) dir0= true;
document.layers["parentLayer"].left= 100 + pos0;
}
if (move1) {
//移動(dòng)parentLayer
if (dir1) pos1--
else pos1++;
if (pos1 < -20) dir1= false;
if (pos1 > 20) dir1= true;
document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
}
if (move2) {
//移動(dòng)parentLayer
if (dir2) pos2--
else pos2++;
if (pos2 < -20) dir2= false;
if (pos2 > 20) dir2= true;
document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;
}
}// -->
</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文本嵌套層的演示頁面
[例19.4] 圖像對(duì)象在指定的剪取區(qū)中上下移動(dòng)。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
var pos= 0; //開始位置
var direction= false;
function moveNclip() {
if (pos<-180) direction= true;
if (pos>40) direction= false;
if (direction) pos+= 2
else pos-= 2;
document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;
}
// -->
</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)頁面。
圖19-24 JavaScript圖像嵌套層的演示頁面
19.11 層疊樣式和JavaScript樣式
在為HTML文檔引入樣式(style)之前，Web網(wǎng)頁的作者對(duì)網(wǎng)頁文檔格式的控制很有限。例如，不能設(shè)置網(wǎng)頁的邊界，指定行的高度或者文本的邊框和位置等等。樣式信息可以在HTML文檔中指定，也可以使用外部的樣式單(style sheet)文件。樣式信息可用于單個(gè)文素，也可以用于一組文素。使用樣式可以讓作者指定Web網(wǎng)頁格式的許多屬性，這樣可以使整個(gè)網(wǎng)頁更加美觀，它的風(fēng)格也容易取得一致。
萬維網(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)頁制作</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">
<!--
all.styleN {
color:magenta;
border-width:20px; border-color:cyan;
border-style:ridge;
padding:5%;
}-->
</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 層疊樣式演示頁面
在這個(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 類概念的演示頁面
練習(xí)與思考題
使用HTML編輯器重新輸入本章所示的所有源程序，或者根據(jù)讀者自己的水平有選擇地輸入比較難理解的源程序，自己設(shè)計(jì)程序中沒有提供的HTML文檔、圖和AVI等文件，然后使用Web瀏覽器檢查程序的準(zhǔn)確性。
參考文獻(xiàn)和站點(diǎn)聯(lián)系客服
