JavaScript是一種解釋語言，使用它可以使你的網頁制作得更加科學、生動和美觀，人-機界面更加友好。本章將提供大量的程序實例介紹JavaScript的基本概念和應用，為讀者進一步深入學習JavaScript和其他描述性語言打下基礎。
除了19.10節和19.11節中的部分源程序，本章所示的程序都是在Netscape公司的Communicator 4.04瀏覽器和微軟公司的Internet Explorer 3.0以上版本的瀏覽器上運行過的，如果使用Netscape公司和微軟公司較低版本的瀏覽器時，有可能會出現異常。
19.1 簡介
JavaScript不是Java! 由于JavaScript與Java類似，而且它們的名稱也很相似，JavaScript又支持大多數Java表示法和基本的流程控制結構，因此許多人都認為JavaScript就是Java。其實，JavaScript是由客戶機解釋的語言，而Java是從服務機上下載在客戶機上運行的編譯過的字節碼(bytecodes)；JavaScript的對象是在運行時引用的，稱為動態聯編(Dynamic binding)，而Java的對象是編譯時引用的，稱為靜態聯編(Static binding)。
JavaScript是由Netscape公司開發的一種腳本語言(scripting language)，或者稱為描述語言。在HTML基礎上，使用JavaScript可以開發交互式Web網頁。運行用JavaScript編寫的程序需要能支持JavaScript語言的瀏覽器。Netscape公司Navigator 3.0以上版本的瀏覽器都能支持JavaScript程序，微軟公司Internet Explorer 3.0以上版本的瀏覽器基本上支持JavaScript。微軟公司還有她自己開發的JavaScript，稱為JScript。JavaScript和JScript有許多相似之處。
在介紹過程中，將通過大量的例子來體會JavaScript的含義，這些例子與HTML緊緊地連在一起，并且可以直接應用于網頁制作。由于例子中的每條語句、每個對象和每個符號等許多細節不可能在本書中詳細闡述。因此，如果需要更深入更詳細的內容，請參看有關JavaScript語言和HTML語言方面的參考文獻。
19.2 事件與函數
19.2.1 HTML文檔中嵌入JavaScript
JavaScript程序可直接嵌入到HTML文檔中，如下例所示：
<HTML>
<HEAD> <TITLE>JavaScript入門</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript程序開始 -
document.write("這是JavaScript!")
// - 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)是非常重要的事情。絕大部分事件都是由用戶的動作所引發的。如果用戶按鼠標器的按鈕，就產生Click(點擊)事件，如果鼠標器的指針在鏈接上移動，就產生MouseOver事件。在JavaScript中定義有許多事件。要使JavaScript程序能夠響應事件，就需要事件處理程序的幫助。當點擊按鈕時，按鈕可創建一個彈出窗口，我們需要使用的事件處理程序就叫做ONCLICK。如果出現按鈕事件，事件處理程序就告訴計算機做什么工作。例如，下面所示的源程序：
<FORM>
<INPUT TYPE="BUTTON" VALUE="點擊該按鈕" ONCLICK="alert('哈哈！')">
</FORM>
在瀏覽器上將顯示如圖19-01和圖19-02所示的頁面。
點擊該按鈕之后產生→ 
圖19-01 事件概念(一) 圖19-02 事件概念(二)
在這個源程序中，<INPUT>標簽中的TYPE=" BUTTON " VALUE="點擊改按鈕" 這部分產生一個按鈕，ONCLICK="alert('哈哈！')"這部分告訴計算機在有點擊事件出現后要執行alert( ' 哈哈！')程序，alert()將創建一個彈出窗口，括號中指定的是字符串，本例中是'哈哈！'，這是要在窗口上顯示的文字。執行程序的結果是產生一個窗口，并顯示“哈哈!”。
在ONCLICK="alert('哈哈！')"這部分中用了單引號(' ')和雙引號(" ")。這兩種引號都可以使用，次序也可以顛倒，即可寫成ONCLICK='alert("哈哈！") '。
在JavaScript中有許多事件處理程序可用，但不包含所有的事件處理程序。如果需要全面了解，請參看JavaScript的參考手冊。
19.2.3 函數的概念
在JavaScript中，函數(Function)是一個很重要的概念。函數實際上是把幾個命令捆綁在一起的子程序。由于歷史的原因，現在許多中文教科書都把“Function”叫做函數，但其實質是“函數例程”。
假如我們要寫一段重復輸出相同文本三次的程序，下面是一種完成這個功能的源程序：
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
document.write("JavaScript不是很難學!<br>");
document.write("這是JavaScript!<br>");
document.write("JavaScript不是很難學!<br>");
document.write("這是JavaScript!<br>");
document.write("JavaScript不是很難學!<br>");
document.write("這是JavaScript!<br>");
// -->
</SCRIPT>
</HTML>
這段程序在瀏覽器上將顯示如圖19-03所示的頁面。
圖19-03 演示函數概念的頁面
完成同樣功能的這段源程序也可以用下面的程序來實現：
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function myFunction() {
document.write("JavaScript不是很難學!<br>");
document.write("這是JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// -->
</SCRIPT>
</HTML>
在這段程序中我們定義了一個函數：
function myFunction() {
document.write("JavaScript不是很難學!<br>");
document.write(這是JavaScript!<br>");
}
其中，function是JavaScript函數的聲明語句，function后面跟的函數名“myFunction”可以是任意的名字，myFunction函數的命令放在大括號“{ }”中，該函數捆綁了兩個JavaScript的“document.write()”命令，并且可通過函數調用來執行。在這個例子中可以看到，在函數定義下面調用函數myFunction()共3次。
函數也可以與事件處理程序聯用。例如，
<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="計算" ONCLICK=" calculation()">
</FORM>
</BODY>
</HTML>
其中，關鍵字“var”是JavaScript的變量(variable)聲明語句，聲明“x”、“y”和“result”是變量；<INPUT … >這條語句表示，當點擊標有“計算”字樣的BUTTON按鈕時就調用函數calculation()。你可以把這段程序存放在一個名為fuc_test.html文件中，然后用瀏覽器試一試，看計算結果是否等于17。
19.3 層次結構
19.3.1 JavaScript的層次結構
JavaScript以分層結構的方式組織Web網頁上的所有文素。每個文素都被作為一個對象(Object)來看待，稱為“HTML對象”，每個對象都有屬性(Properties)和處理法(methods)。下面是一個簡單的HTML文檔，存放該文檔的文件名假設為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.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 層次結構分析頁面
從JavaScript的功能來看，Web瀏覽器本身是一個窗口對象(window object)，在這個對象中可以加載HTML文檔，例如jstest.html。同樣，JavaScript把jstest.html也看成是一個對象，稱為文檔對象(document object)，它也是JavaScript中的一個非常重要的對象，而且會經常用到它。
在jstest.html這個HTML文檔中，有兩幅圖像(image[0]，image[1])、一個鏈接(links[0])以及一個交易單(form)，交易單中帶有兩個文本域(element[0]，element[1])和一個按鈕(element[3])。它們的結構如圖19-05所示。
圖19-05 JavaScript的層次結構
JavaScript把圖19-05中的每個框都看成是對象。如果要想得到各種不同對象的信息和管理它們，首先我們就要知道這些對象的名稱，其次我們必須要知道如何去存取這些對象。圖19-01為我們給各個對象的命名提供了很大的啟發，就是按照JavaScript的層次結構來命名。據此，可按照從頂向下的路線，第一個對象就被命名為“document”，第一幅圖像被命名為“document.images[0]”，…，第一個交易單中的第一個文本對象被命名為“document.forms[0].elements[0]”，…，document.forms[0].elements[3]。
為了得到各種對象的屬性和可使用的處理法，我們必須要查看有關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="原來的數據"><p>
對象2：
<INPUT TYPE="BUTTON" VALUE="更新數據"
ONCLICK="document.myForm.input.value= '新的數據!'; "> <p>
對象3：
<INPUT TYPE="BUTTON" VALUE="恢復數據"
ONCLICK="document.myForm.input.value= '原來的數據!'; ">
</FORM>
在瀏覽器上將顯示如圖19-06所示的頁面。
圖19-06 對象間的操作
點擊“更新數據”按鈕就對“對象1”進行操作，顯示“新的數據!”。
19.3.2 網址對象
除了window(窗口對象)和document(文檔對象)之外，另一個重要的對象是location(網址對象)。這個對象代表的是要訪問的HTML文檔所在的網絡地址。因此，如果你要訪問網頁http://www.xyz.com/page.html，那么location.href就等于這個網址。
更重要的是你可以給location.href指定新的值。下面的例子就可以把新的網頁加載到窗口上：
<FORM >
<INPUT TYPE="BUTTON" VALUE="中國教育和科研計算機網(CERNET)"
ONCLICK="location.href='../../../www.edu.cn/default.htm'; ">
</FORM>
在瀏覽器上將顯示如圖19-07所示的頁面。
圖19-07 網址對象的演示頁面
當你點擊該按鈕時就可瀏覽“中國教育和科研計算機網”的主頁。
19.4 幀窗
19.4.1 創建幀窗
也許你瀏覽萬維網(Web)時已經注意到，Web瀏覽器窗口被分成兩個或者三個顯示窗口，分別顯示各自的HTML文檔。每個這樣的小窗口稱為frame，可把它譯成“幀窗”。一個常見的問題就是JavaScript如何與幀窗一起工作。
創建幀窗需要使用<frameset>和</frameset>標簽。例如要把Web瀏覽器窗口分成兩個等寬的幀窗，可用下面的程序實現：
<HTML>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="page1.html" NAME="frame1">
<FRAME SRC="page2.html" NAME="frame2">
</FRAMESET>
</HTML>
在瀏覽器上將顯示如圖19-08所示的頁面。
圖19-08 創建幀窗的概念
在這個程序中使用了<frameset>的rows(行)屬性把Web瀏覽器窗口分成上下兩個幀窗，上面的幀窗加載page1.html，下面的幀窗加載page2.html。
如果使用<frameset>的columns(列)屬性，Web瀏覽器窗口就會被縱向分割。此外，瀏覽器窗口的分割還可以嵌套。例如，使用下面的程序可在橫向和縱向對瀏覽器窗口進行分割：
<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 創建不同樣式的幀窗
19.4.2 JavaScript和幀窗
前面已經介紹，JavaScript以分層結構的方式來組織網頁上的所有文素，對幀窗也是如此。為了簡單起見，假設Web瀏覽器窗口被分成frame1和frame2兩個幀窗，在這種情況下的分層結構如圖19-10所示：
圖19-10 兩個幀窗的結構
頂層是browser window(瀏覽器窗口)對象，稱為parent(父窗口)，下層是frame1(幀窗1)和frame2(幀窗2)對象，稱為children(子幀窗)。通過對這些對象進行命名之后在兩個幀窗之間就可以交換信息。例如，用戶在frame1上點擊一個鏈接，本來應該是在frame1顯示的HTML文檔，現在可讓它顯示在frame2上。這樣一來，frame1就可以作為瀏覽目錄，目錄中的每個條目就可以鏈接到許多不同站點的主頁。
圖19-11所示的網頁是幀窗的一個具體應用。在這個應用中，幀窗frame1作為“多媒體技術基礎”作業的目錄項，幀窗frame2用來顯示具體內容。例如，在frame1中點擊“詳細內容”時，在frame2中顯示作業的詳細內容，而幀窗frame1的內容保持不變。
圖19-11 一個幀窗作為瀏覽目錄的網頁
設計這樣的網頁首先需要一個創建frame1和frame2兩個幀窗的程序，在此假設程序名為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>大學本科生基礎課程<BR>
<H2>“多媒體技術基礎”</H2><BR>
作業式樣<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">多媒體技術基礎</A></PRE>
<A HREF="start.html" TARGET="main">作業名稱</A><BR>
<A HREF="javascript:：load('first.html')">內容簡介 </A><BR>
<A HREF="second.html" TARGET="main">影視圖像</A><BR>
<A HREF="third.html" TARGET="_top">作業總結</A><BR>
</BODY>
</HTML>
menu.html文檔涉及如下所示的4個文檔：
① start.html文檔：
<HTML>
<BODY>
<CENTER><U>開始頁</U><BR>
<H2>作業名稱</H2>
… </CENTER>
</BODY>
</HTML>
② first.html文檔：
<HTML>
<BODY>
<CENTER><U>文檔1</U><BR>
<H2>內容簡介</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>學習總結</H2></CENTER>
</BODY>
</HTML>
在menu.html文檔中，需要說明如下幾點：
(1) 使用了一種把新的網頁加載到main幀窗中的不同方法。具體說就是，在“<A HREF="javascript：load('first.html')">內容簡介 </A><BR>”中的鏈接使用了加載函數load()，并且在<A>的屬性HREF＝" "中使用了“javascript：”來把first.html文檔加載到main幀窗中。
(2) JavaScript的加載函數load()定義為：
function load(url) {
parent.main.location.href= url;
}
括號“( )”中的url是傳遞參數的變量，這就意味字符串'first1.html'通過url變量來傳遞。通過變量來傳遞參數是程序設計的一個重要概念。
(3) 其他鏈接使用的是標簽“<A>”的“TARGET”屬性，實際上它不是JavaScript的屬性，而是HTML的屬性。
(4) 在“<A HREF="third.html" TARGET="_top">作業總結</A>”中，“<A>”的屬性“TARGET＝_top”是去掉frame1和frame2幀窗。third.html將顯示在整個瀏覽器窗口中。
(5) 如果瀏覽器窗口分割成frame1、frame2和frame3共三個幀窗，使用JavaScript的load()函數可能會更靈活，此時的load()函數可定義為：
function loadtwo(url1, url2) {
parent.frame1.location.href= url1;
parent.frame2.location.href= url2;
}
然后你可用loadtwo("first.htm", "second.htm") 或者loadtwo("third.htm", "forth.htm")來調用這個函數。
9.5 創建新窗口與建立新文檔
19.5.1 創建新窗口加載HTML文檔
打開一個新的瀏覽器窗口是JavaScript的一個重要特性。創建窗口使用window.open()命令。下面是一個打開新窗口并把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>
運行該程序后在瀏覽器窗口中顯示，點擊該按鈕后就可把你創建的21_lecture.html文檔加載到一個新的瀏覽器窗口，而原來的窗口仍然存在。
19.5.2 window.open()的處理法
在函數window.open中，它的處理法(method)可有3種選擇參數，可以用來指定窗口顯示的內容、窗口的名稱和外觀。這3個參數是：
① 指定要加載的HTML文檔的URL。例如，21_lecture.html。
② 窗口的名稱?！癲isplayWindow”是所有Web瀏覽器都支持的名稱。有些瀏覽器可使用你自己喜歡的名稱，例如“MyWindow”。
?、?一套窗口外觀參數選項(options)。例如，窗口的寬度、高度、滾動框和其他功能。
window.open ()的一般處理法格式為：
newwindow=window.open("mypage.html","mywindow", options)
例如，要把21_lecture.html文檔加載到一個寬度(width)為400象素、高度(height)為300象素的瀏覽器窗口，窗口中沒有狀態(status)欄、沒有工具欄(toolbar)和選單欄(menubar)，創建這種窗口可以寫出如下所示的程序：
<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>
請注意：①在字符串"width=400,height=300,status=no,toolbar=no,menubar=no"中沒有空格字符;②myWin是變量，而不是window的名稱。表19-01列出了可供選擇的參數選項。
表18－01 窗口參數選項
|
窗口屬性 |
yes/no |
|
directories(顯示目錄欄) |
yes/no |
|
height(設置窗口高度) |
象素值 |
|
location(顯示文檔地址框) |
yes/no |
|
menubar(顯示選單欄) |
yes/no |
|
resizable(設置窗口縮放) |
yes/no |
|
scrollbars(設置滾動框) |
yes/no |
|
status(設置狀態欄) |
yes/no |
|
toolbar(設置工具欄) |
yes/no |
|
width(設置窗口寬度) |
象素值 |
19.5.3 創建新窗口與建立新文檔
JavaScript的一個很時髦特性是可以在創建的新窗口中創建HTML文檔以及VRML(Virtual Reality Modeling Language)文檔。下面是創建一個簡單的HTML文檔的程序：
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function openWin3() {
myWin= open("", "displayWindow",
"width=500,height=400,status=yes,toolbar=yes,menubar=yes");
//打開文檔準備后面的輸出
myWin.document.open();
// 創建文檔而不是打開新窗口
myWin.document.write("<HTML><HEAD><TITLE>創建新的HTML文檔");
myWin.document.write("</TITLE></HEAD><BODY>");
myWin.document.write("<CENTER><FONT SIZE=+1>");
myWin.document.write("用JavaScript創建HTML文檔");
myWin.document.write("</FONT></CENTER>");
myWin.document.write("</BODY></HTML>");
// 關閉文檔而不是窗口
myWin.document.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=SUBMIT VALUE="創建新的HTML文檔" ONCLICK="openWin3()">
</FORM>
</BODY>
</HTML>
在這個程序中，函數winOpen3()用來創建一個新的瀏覽器窗口。winOpen3()中的第一個參數是空字符串，這表示JavaScript沒有指定URL，也就是不加載已經編寫好的HTML文檔，而是要創建一個新文檔。
在這個程序中定義了一個變量myWin，借助該變量而不是窗口名(displayWindow)去訪問這個新窗口。在打開這個新窗口之后，通過使用文檔對象(document object)的open()處理法，即通過myWin.document.open()來為后面的輸出作準備。myWin必須放在document.open()之前，以便訪問這個新窗口。下面是使用document.write()處理法創建文檔：
myWin.document.write("<HTML><HEAD><TITLE>創建新的HTML文檔");
myWin.document.write("</TITLE></HEAD><BODY>");
myWin.document.write("<CENTER><FONT SIZE=+1>");
myWin.document.write("用JavaScript創建HTML文檔");
myWin.document.write("</FONT></CENTER>");
myWin.document.write("</BODY></HTML>");
在創建HTML文檔之后需要用myWin.document.close()關閉文檔。
19.6 狀態欄和超時設置
19.6.1 狀態欄設置
JavaScript程序可通過設置窗口的狀態屬性window.status對Web瀏覽器底部的狀態欄進行寫入操作。下面是在狀態欄上寫入“'Hi! 這是狀態欄”和清除狀態的程序：
<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! 這是狀態欄!');">
<INPUT type="button" NAME="erase" VALUE="清除!"
ONCLICK="statbar('');">
</FORM>
</BODY>
</HTML>
在這個程序中創建了有和按鈕的交易單，它們都調用了函數statbar()，而且在括號中指定了字符串“'Hi! 這是狀態欄!”和空字符串。這表明，這些字符串是與函數 statbar()一起傳遞到狀態欄上的，因為在程序中定義該函數名時在括號中使用了“txt”作為變量。在程序設計中，給函數傳遞變量是經常使用的方法，這樣可使函數變得更靈活。
在狀態欄上寫入文字可很方便地為用戶提示狀態信息。例如，當用戶把鼠標器的指針指到帶有鏈接的對象時，在狀態欄上就可以顯示被鏈接網頁的URL地址。下面的程序就是一個這樣的例子。
<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='';">中國教育和科研計算機網(CERNET)</A>
</BODY>
</HTML>
在瀏覽器上將顯示如圖19-12所示的頁面。
圖19-12 狀態欄的設置和顯示
雖然瀏覽器本身的默認設置是當你把鼠標器的指針移到超文本鏈接時，狀態欄上會顯示URL目的地址，但如果要在狀態欄上顯示其他內容時，你就可以使用onMouseOut和onMouseOver事件處理程序來設置。使用這兩個處理程序時必須要使用“return true”。
19.6.2 定時設置
超時設置程序(timeout)也稱定時器(timer)，使用它可讓計算機在超過一定的時間之后執行某種程序。下面是一個當你點擊按鈕之后3秒鐘會彈出一個窗口。
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function timer() {
setTimeout"alert('從點擊按鈕開始算起時間已超過3秒鐘!')", 3000);
}
// -->
</SCRIPT>
...
<FORM>
<INPUT type="button" VALUE="定時器" ONCLICK="timer()">
</FORM>
在瀏覽器上將顯示如圖19-13所示的頁面。
圖19-13 定時設置演示
在這個程序中，setTimeout()是window對象的處理法。setTimeout()中的第一個參數是JavaScript的程序，在這個例子中是"alert('從點擊按鈕開始算起時間已超過3秒鐘!')"，它將顯示一個帶有消息和OK按鈕的對話框；第二個參數是告訴計算機什么時候要執行這個程序，你可以指定定時的時間，時間單位用毫秒。
19.6.3 滾動程序
在了解如何設置狀態欄和定時器之后，我們可看看瀏覽器狀態欄上的滾動文本是如何實現的，這是在因特網上經常都可看到的。實現滾動文本的程序稱為滾動程序(scroller)，下面是它的源程序：
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
//定義要滾動的文本
var scrtxt = "這是JavaScript! " + "這是JavaScript! " + "這是JavaScript!";
var length = scrtxt.length; //文本的長度
var width = 100; //文本滾動框的寬度
var pos = -(width + 2);
function scroll() {
// 在右邊顯示文本，設置定時器
pos++; //左移文本一步
var scrollerText = ""; //計算要顯示的文本
if (pos == length) {
pos = -(width + 2); }
//如果文本還沒有到達左邊就要添加一些空格，否則就去掉到達左邊的文本
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; //把文本寫到狀態欄
setTimeout("scroll()", 100); // 100毫秒之后再調用函數
} // -->
</SCRIPT>
</HEAD>
<BODY onLoad="scroll()">
你的HTML文檔放在這里
</BODY>
</HTML>
函數scroll()的主體部分用來計算文本的哪一部分要被顯示。滾動程序的開始部分是計算和顯示，末尾設置定時器，在100毫秒之后執行scroll()函數。為啟動文本滾動程序，本程序使用了JavaScript的onLoad事件處理程序(event handler)，并放在<BODY>標簽中，這意味在HTML頁面加載之后立即調用函數scroll()。如果讀者要了解本程序的細節，請參考本書提供的JavaScript參考文獻。
19.7 預定義對象
JavaScript可以使用一些預先定義的對象，例如，日期對象(Date object)、數組對象(Array object)和數學對象(Math object)等等。
19.7.1 時間對象
顧名思義，日期對象讓你處理日期和時間，例如，計算到放假還有多少天，或者把實際的時間加到你的網頁等。
為了存取日期和時間，JavaScript定義了Date對象，并且可使用new操作符讓程序員創建用戶自定義的對象。例如，創建一個名為“today”的對象，
today= new Date()
使用日期對象時要注意到：①如果在創建這個對象時不指定確定的日期和時間，執行這條程序時就使用當前的日期和時間，②日期對象提供了一些處理法，例如，getHours(), setHours(), getMinutes(), setMinutes(), getMonth()和setMonth()等等。③日期對象不代表時刻在變化的時鐘。
為了設置日期和時間，可使用稱為“日期構造程序(Date constructor)”的Date()處理法。例如，
today= new Date(2000, 0, 1, 0, 0, 5)
將創建一個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">
<!-- 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] 下面是一個顯示時鐘的程序：
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
var timeStr, dateStr;
function clock() {
now= new Date();
today= new Date()
//時間
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">
時間:<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 數組對象
數組對象(Array object)或者稱為陣列對象是JavaScript的核心對象之一。我們可以設想，如果要存儲100個不同的名稱，就要定義100個不同的變量并且為它們指定不同的名稱，這是相當費事的。如果使用JavaScript的Array對象，就可以使用一個名稱(例如，myArray)和一個號碼(例如，0，1，…)來存取它們，因為數組是可以被看成由許多變量捆綁在一起的。使用JavaScript的數組構造程序new Array()可以創建一個新的數組，然后就可以給這個數組中的每個變量賦值。例如，
<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 數組對象演示頁面
19.7.3 數學對象
如果需要數學計算，可以使用JavaScript提供的數學對象(Math object)。例如，要計算sin(10)，可用下面的程序：
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
var z
var x=10
z=Math.sin(x);
document.write("z= " + z +"<BR>");
// -->
</SCRIPT>
計算結果：z= -0.5440211108893698。
如果程序中要使用幾個Math常數和處理法，為避免重復可利用JavaScript的with語句進行計算。例如，要計算πr2，r×cos(π/6)和r×sin(π/6)，可編寫如下的計算程序：
<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 數學對象演示頁面
19.8 確認輸入
在訪問因特網上的站點時，經常會遇到要求用戶填寫許多表交易單(form)，或者稱為表單。交易單的輸入經常要送到服務器(server)，或者通過電子郵件送到某個賬號。如果要驗證用戶輸入的信息是否有效可使用JavaScript程序。例如，使用下面的程序可檢查你輸入的姓名和電子郵件地址是否符合規范。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("請輸入字符串!")
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="檢驗" 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 檢查用戶輸入信息演示頁面
如果想把瀏覽器上用戶輸入的交易單交給服務器處理，就需要使用公共網關接口CGI(Common Gateway Interface)程序。CGI是服務器(例如，HTTP服務器)和資源(例如，數據庫)之間的通信規范。
19.9 JavaScript動畫
19.9.1 圖像對象
JavaScript定義了圖像對象(Image object)，通過圖像對象的屬性和處理法可以改變Web網頁上的圖像，因此也可以讓用戶創建JavaScript型的動畫。
JavaScript動畫是通過重復設置圖像的src屬性來實現的。這種動畫比GIF動畫慢，即每秒鐘顯示的圖像的幀數比較少。GIF (Graphics Interchange Format，圖形文件交換格式)是Web頁面上使用最普遍的圖形文件格式之一，使用這種格式制成的動畫存放在一個文件中，而JavaScript動畫的每一幀圖像是單獨的一個文件，即一個對象，而且每個文件都要通過網絡加載，即要和主機連接然后傳輸圖像數據，這就很費時間，因此就顯得比較慢。盡管如此，在網絡上還是得到廣泛的應用。
在JavaScript中，所有圖像可以通過圖像數組(Array)來表示，這個數組稱為images(圖像)，這是document(文檔對象)的屬性。網頁上的每一幅圖像都分配一個號碼，第一幅圖像為“0”號，第二幅圖像為“1”號，…。因此，document.images[0] 就表示第一幅圖像，依此類推。在HTML文檔中，每一幅圖像都被認為是一個圖像對象(Image object)。一個圖像對象有一些許多屬性可通過JavaScript來存取，例如，圖像的高度和寬度，對齊方式等等。而document.images[0].width就表示Web網頁上的第一幅圖像的寬度，寬度的數值用象素作單位。
如果在一個Web網頁上有許多圖像，可以給每幅圖像起一個不同的名稱，這就比人去記憶每一幅圖像的編號要容易些。如果用下面的標簽聲明一幅圖像，
<IMG SRC="img.gif" name="myImage" WIDTH=100 HEIGHT=100>
你就可以通過document.myImage或者document.images["myImage"]來尋找這幅圖像。
19.9.2 加載和更新圖像
如果我們要在網頁的同一個位置上改變顯示的圖像，就需要使用Image(圖像)對象的SRC屬性。我們已經知道，在HTML的<IMG>標簽中，SRC代表的是圖像的URL地址，因此在使用JavaScript時就可以把新的圖像地址賦予給已經加載顯示過的圖像地址，這樣新的圖像就可以代替舊的圖像。例如，
<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 預加載圖像
由于在因特網上傳輸圖像很費時間，在演示動畫時很可能會導致動畫不連續，令人難以接收，因此可考慮使用預先下載圖像的方案。為此需要創建一個圖像數組和新的圖像對象，如下所示(本例的動畫由4幅圖組成)：
hiddenImg = new Array() //構造一個圖像數組
for(i = 0; i < 4; i++) { //預加載圖像
hiddenImg[i] = new Image() //構造新的圖像對象
hiddenImg[i].src = "image" + i + ".gif" //圖像的URL地址
}
其中，hiddenImg [i]= new Image()的含義是使用圖像構造程序new Image()來創建一個名為“hiddenImg”的新圖像對象；hiddenImg[i].src = "image" + i + ".gif"的含義是通過hiddenImg對象來表示圖像的地址。我們已經知道，給SRC屬性賦予一個新地址，就意味著迫使Web瀏覽器加載這個地址所指示的圖像。因此，當執行這行程序時，就加載第 i 幅圖像imagei.gif。正如對象名hiddenImg(隱藏圖像)的含義，在Web瀏覽器完成加載之后，這些圖像是不顯示的，僅僅是存放在內存中為以后使用。為了顯示這幅圖像，例如顯示第i幅圖像，可使用下面的語句：
document.myImage.src= hiddenImg[i].src
下面是點擊一次按鈕顯示一幅圖像的完整程序：
<HTML>
<HEAD><TITLE>預加載圖像</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動畫程序舉例
以上介紹了JavaScript動畫的基本原理，下面給出一個顯示動畫的程序供參考。
<HTML>
<HEAD><TITLE>JavaScript的動畫入門 </TITLE></HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
delay = 1000
imageNum = 0
//預先加載動畫圖像；該動畫由4幅圖像組成。
theImages = new Array()
for(i = 0; i < 4; i++) {
theImages[i] = new Image()
theImages[i].src = "image" + i + ".gif"
}
//動畫函數
function animate() {
document.animation.src = theImages[imageNum].src
imageNum++
if(imageNum > 3) {
imageNum = 0
}
}
//減低幀速率函數
function slower() {
delay+=100
if(delay > 4000) delay = 4000
}
//提高幀速率函數
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的動畫演示頁面
19.10 層對象
19.10.1 層對象的概念
HTML網頁上的層(layer)就像一疊紙中的一張紙。其中，一張紙上寫有文本，在另一張紙上畫有圖畫，在第三張紙上的圖畫周圍寫有一些文字，等等，每一張紙就就是一層。從這個觀點來看，層就像一個容器，它可以容納像文本、交易單和圖像這類對象。如果移動某一張紙，這張紙上的所有對象也就跟著移動。把這些“紙”放到HTML頁面上，借助JavaScript的幫助，可以給這些對象(如圖像)進行定位，可以在HTML頁面上移動它們，也可以隱藏對象。每一張紙可以有透明的部分，猶如在紙上挖一個洞，下一層的對象就可顯示出來。
目前，只有Netscape公司的Communicator瀏覽器支持層對象。
19.10.2 創建層對象
創建層對象需要使用<LAYER>或者<ILAYER>標簽。<LAYER>用于HTML的內容定位，稱為層標簽。被定位的內容可以相互疊加，可以是透明的或者是不透明的，可以是可見的也可以是不可見的。層標簽也可以嵌套使用。<LAYER>用來指定內容絕對位置，<ILAYER>用來指定內容的相對位置。如果沒有指定位置，層將顯示在瀏覽器窗口的左上角。層的一些可用屬性如表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"
定義新創建的層要在哪一層上面
below="layerName"
定義新創建的層要在哪一層下面
Visibility=show|hide|inherit
層的可視性
bgcolor="rgbColor"
背景顏色
background="imageURL"
背景圖像
例如，要創建兩個層對象，第一層放圖像，第二層上放文本，而且文本要顯示在圖像上，可以使用下面的程序實現：
<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，它也表示層的出現次序。最高索引號的層將顯示在最頂層。
運行這個程序后在瀏覽器上將顯示如圖19-19所示的頁面。
圖19-19 層對象演示頁面
19.10.3 層與JavaScript
通過JavaScript可以訪問層。訪問某層的首要條件是要知道層在JavaScript中的表示方法。其中一種比較好的方法是給每一層起一個名字。如果用下面的方法來命名層，
<LAYER ... NAME=myLayer>
……
</LAYER>
我們就可以通過document.layers["myLayer"]來訪問這層。按照Netscape公司提供的文檔，也可以寫成document.myLayer。
此外，我們也可以通過整數索引號來訪問層。為了訪問最低層，可以使用document.layers[0]。但要注意，整數索引號與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">
<!-- 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 層對象的移動
利用層的left(左)和top(頂)屬性，可以給層對象賦予新的數值，從而產生移動的效果。下面就是產生這種效果的一個程序：
<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文檔中的一層”就會在瀏覽器窗口上周而復始地左右移動。
在這個程序中，使用<ILAYER> … </ILAYER>標簽創建了一個稱為myLayer2的層；為了在網頁加載之后立即產生“這是HTML文檔中的一層”的移動效果，在<body>標簽中使用了ONLOAD事件處理程序中的處理法setInterval( )，這是JavaScript 1.2的新處理法，使用它可以定時調用函數。ONLOAD="setInterval('move()', 20)"表示每隔20毫秒調用一次move()函數，用它來設置層的位置。
此外，層不僅可以疊加。而且在疊層上的對象也可以移動。下面所示的程序就可以使“這是HTML文檔中的一層”對象在圖對象的上面左右移動：
<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> 文字顯示在圖像層上左右移動</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屬性的前兩個參數定義左上角的坐標，后兩個參數定義右下角的坐標，如圖19-21所示。
圖19-21 圖像對象的剪取
通過改變對象層的clip.left, clip.top, clip.right和clip.bottom屬性，也就是賦予新的象素值，剪取圖像將發生變化。下面的程序將動態地演示剪取的圖像：
<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;
//計算圖像的中點坐標
middleX= Math.round(width/2);
middleY= Math.round(height/2);
//開始位置
pos= 0;
//開始顯示!
show();
}
function show() {
// 增加圖像顯示區
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;
//檢查整個圖像是否顯示完畢
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>部分的按鈕用來調用函數start()。該函數在計算開始顯示點之后就調用函數show()。函數show()的最后設置定時器，在整幅圖像沒有顯示完之前，每隔20毫秒調用一次函數show()，直到整幅圖顯示完畢。請注意，在函數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。
為便于調試程序，設置了一個開始按鈕。在Communicator瀏覽器上點擊按鈕，執行該程序的結果如圖19-22所示。
圖19-22 JavaScript圖像剪取的演示頁面
19.10.6 嵌套層
我們已經知道一層可以包含幾個不同的對象。一層也可以包含其他的層，這就叫做層的嵌套。它的用途可以通過下面的兩個例子來體會。
[例19.3] 一個稱為父層(parentLayer)的包含兩個子層1(layer1)和層2(layer2)，在<BODY>部分還有3個按鈕，這些按鈕用來啟動/停止層的移動。在Communicator瀏覽器中可以看到，parentLayer的移動會帶動其他兩個層一起移動，而layer1或者layer2的移動則不會影響其他層的移動。它的源程序如下所示：
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
// 開始位置
var pos0= 0;
var pos1= -10;
var pos2= -10;
// 要移動?
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) {
// 移動parentLayer
if (dir0) pos0--
else pos0++;
if (pos0 < -100) dir0= false;
if (pos0 > 100) dir0= true;
document.layers["parentLayer"].left= 100 + pos0;
}
if (move1) {
//移動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) {
//移動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="移動/停止父層" ONCLICK="startStop(0);">
<INPUT type="button" VALUE="移動/停止第一層" ONCLICK="startStop(1);">
<INPUT type="button" VALUE="移動/停止第二層" ONCLICK="startStop(2);">
</FORM>
</BODY>
</HTML>
在這個程序中可以看到，在parentLayer內部定義了兩個層，這就是嵌套層。這些層的訪問是通過JavaScript的函數function move()實現的：
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內。在Communicator瀏覽器上將顯示如圖19-23所示的移動文本。
圖19-23 JavaScript文本嵌套層的演示頁面
[例19.4] 圖像對象在指定的剪取區中上下移動。
<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所示的上下滾動頁面。
圖19-24 JavaScript圖像嵌套層的演示頁面
19.11 層疊樣式和JavaScript樣式
在為HTML文檔引入樣式(style)之前，Web網頁的作者對網頁文檔格式的控制很有限。例如，不能設置網頁的邊界，指定行的高度或者文本的邊框和位置等等。樣式信息可以在HTML文檔中指定，也可以使用外部的樣式單(style sheet)文件。樣式信息可用于單個文素，也可以用于一組文素。使用樣式可以讓作者指定Web網頁格式的許多屬性，這樣可以使整個網頁更加美觀，它的風格也容易取得一致。
萬維網協會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">網頁制作</H3>
<p>編寫HTML文檔是每個大學生都要具備的基本技能
</BODY>
</HTML>
[例19.7] 下面的源程序用來創建一個樣式類(style class)并把它應用到使用<LAYER>創建的層[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>請使用這是一個色彩豐富的層</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>大學生的素質</H2>
近來對大學生的素質進行了調查…
<H2 CLASS=Students>調查結果分析</H2>
…
</BODY>
</HTML>
在這個程序中，“大學生的素質”和“調查結果分析”是屬于同一類。在Communicator瀏覽器上的輸出如圖19-26所示。
圖19-26 類概念的演示頁面
練習與思考題
使用HTML編輯器重新輸入本章所示的所有源程序，或者根據讀者自己的水平有選擇地輸入比較難理解的源程序，自己設計程序中沒有提供的HTML文檔、圖和AVI等文件，然后使用Web瀏覽器檢查程序的準確性。
參考文獻和站點
