JavaScript 文档对象
时间：2006-07-14 来源：pascal4123
第 9 章 document object
德嘉書業 / 德嘉資訊科技 (www.takka.com.hk) 作者: 伍新華 Email: [email protected]
9.1 document 的 method
1. document.write( )
2. document.writeln( )
3. document.open( ) 及document.close( )
9.2 document 的 property
9.3 value 的使用
9.4 img 及 images 的 src
9.5 navigator object
document 是指網頁這一個 object, 是 window 下的物件, 標準是用類似以下語法: window.document.bgColor, 但一般會略去 window, 所以變成 document.bgColor, document 有以下多個子物件:
這些子物件會在其他有關地方說明, 這一章主要是說 document 直屬的 method 及 property。
9.1 document 的 method
document 的 method 有 9 個, 但使用的主要是 document.write( )、 document.open( )、 document.close( ), 有時也會用到 document.writeln( ), 筆者不說其他 5 個, 因實用性不大, 又或是 IE 不支援。
1. document.write( )
在 第 1章 已說過 document.write( ) 的使用方式, 這處不重複, 你要留意的是網頁一經載入後, 就不能再用 document.write( ) 將資料寫在當時的網頁上, 請看以下例子。
練習-60 網頁載入後使用 document.write( )
在這練習, 你看到網頁載入時及在完全載入後, 使用 document. write( ) 有什麼分別。
1. 請用瀏覽器開啟示範磁碟中的 write.htm, 這檔案有以下內容:
<html> <head>
</head>
<body bgcolor=bisque text=red> <h1> 示範網頁 </h1> <p>
<form>
<input type=button value="按此看看" onClick="writeMsg( )" >
</form>
</body> </html>
2. 網頁開啟後, 留意 Good Morning 這句在這網頁出現, 請你按 [按此看看] 這按鈕, 留意這會開啟一個新網頁來載入 Happy Birthday 這句, 瀏覽器會給予一個新的暫存檔案名稱給這網頁, 在工具列中按 [上一頁] 或 [Back] 可回到原來的網頁。
在以上例子, Good Morning 這句是在 write.htm 這網頁載入時寫在這網頁上, 網頁完成載入後, 用按鈕的方式啟動 writeMsg( ) 這一個 function, 這 function 內的document.write( ) 不能將文字寫在 write.htm 這網頁中, 而是另開一個網頁 (不是另開一個視窗) 來寫進資料。
2. document.writeln( )
writeln 是 writeline 的簡寫, writeln( ) 與 write( ) 不同的是在寫進的句子後加上一個 [Return] (回位鍵), 但在 HTML 語言, 回位鍵是不會產生作用的 (除了在 <pre> 與 </pre> 這對標籤內), 所以兩者的效果一般會相同, 我們習慣使用 write( ) 而不用 writeln( ), 請看以下例子。
練習-61 write( ) 及writeln( ) 的分別
這練習的網頁有 write( ) 及 writeln( ) 這兩個 method, 你可看到在一般情況下及與 <pre> 一起使用時有什麼不同。
1. 請用瀏覽器開啟示範磁碟中的 writeln.htm, 這檔案有以下內容:
<html> <body bgcolor=bisque text=red> <h1> 示範網頁 </h1> <p>
Here is your present. <p>
<pre>
Here is your breakfast. <p>
Here is your tea.
</pre>
</body> </html>
2. 網頁開啟後, 你應見到以下顯示, 請留意在 <pre> 標籤內 writeln( ) 所產生的空行。
Happy Birthday.
Here is your present.
Good Morning.
Here is your breakfast.
Good Afternoon.
← writeln( ) 在 <pre> 內產生的空行
Here is your tea.
3. document.open( ) 及document.close( )
document.open( ) 是用來在窗格或子視窗開啟一個網頁, 然後用 document.write( ) 將資料寫在這網頁內, 最後用 document.close( ) 來結束這網頁, 請看 練習-13 及 練習-128 的例子。
若略去 document.open( ) 及 document.close( ), 只用 document.write( ) 將資料寫進一個窗格, 在 IE 操作正常, 但在 Netscape 則不能操作, 但若是將資料寫進一個子視窗, Netscape 操作正常, 在 IE 不能操作。為了避免錯誤, 使用 document.write( ) 將資料寫進窗格或子視窗, 都應在前後加上 document.open( ) 及 document.close( ), 例如:
msgWin=window.open("","","width=400,height=200")
msgWin.document.open( )
msgWin.document.write("Good Morning")
msgWin.document.close( )
9.2 document 的 property
document 有以下的 property (附屬品):
| bgColor | 網頁的背景顏色。 |
| fgColor | 網頁的文字顏色。 |
| linkColor | 未用的連結的文字顏色。 |
| alinkColor | 在選擇中的連結 (alink) 的文字顏色。 |
| vlinkColor | 已使用的連結的文字顏色。 |
| lastModified | 網頁的最後存檔日期 (read-only)。 |
| referrer | 轉介過來的 URL (read-only)。 |
| domain | 供應網頁的伺服器的 domain name (read-only)。 |
| URL | 目前網頁的 URL (read-only) (留意: 這字用大寫)。 |
| cookie | 閱讀及設定 cookie。 |
| title | 網頁的 title (read-only)。 |
| anchors | 網頁中 anchors (書籤) 的陣列 (read-only)。 |
| applets | 網頁中 applets的陣列 (read-only)。 |
| embeds | 網頁中 <embed> 的陣列 (read-only)。 |
| forms | 網頁中 form 的陣列 (read-only)。 |
| images | 網頁中圖片的陣列 (read-only)。 |
| layers | 網頁中 layers 的陣列。 |
| links | 網頁中 links (連結) 的陣列 (read-only)。 |
| plugins | 網頁中 plugins 的陣列 (read-only)。 |
在以上名單, 沒有 "read-only" 的可以用 assignment 的方式來改變當時網頁中該附屬品的特性。(請看本書前面多處的說明。)
有 "read-only" 的表示我們可檢查該 property, 但不能改變, 這項功能主要是在一些網頁中作統計用途, 例如你在網頁中放下 referrer、domain 這兩項及設定送出的機制 (要使用 CGI 程式), 觀看者下載你的網頁, 這兩項資料就會送回給你 (在 9.5 的一節會說到另一些觀看者的瀏覽器資料), 你知道這些資料, 就可對觀看者有更多了解, 例如使用哪一類瀏覽器, 使用哪一個 ISP, 從哪一個網頁轉介到你的網頁, 等等。
在以下的例子, 筆者用一個練習, 讓你了解上列的 property 所指的是什麼。
練習-62 document 的 property
這練習有一個名為 doc1.htm 的網頁, 網頁中有一個連結, 是轉去 doc2.htm, 這是示範什麼是 referrer, 跟住在 doc2.htm這網頁, 你看到多個 document properties 的檢查結果。
1. 請用瀏覽器開啟示範磁碟中的 doc1.htm, 這檔案有以下內容:
<html>
<body bgcolor=bisque text=red> <h1> 這是 doc1.htm </h1> <p>
<a href="doc2.htm"> 轉去 doc2.htm </a> <br>
<a href="doc3.htm"> 轉去 doc3.htm </a>
</body> </html>
2. doc1.htm 會引去 doc2.htm, doc2.htm 內有一些圖片、links 及 anchors (書籤), 這只是作示範, 無實際用途, doc2.htm 有以下內容:
<html> <head> <title> 示範 document property </title> </head>
<body bgcolor=oldlace text=blueviolet>
<img src=void > <img src= void > <p>
<a href=""> 連結示範 1 (實際無作用) </a> <br>
<a href=""> 連結示範 2 (實際無作用) </a> <br>
<a href=""> 連結示範 3 (實際無作用) </a>
<a name="demobookmark1"> <a name="demobookmark2">
<form name="test" method=post action="mailto:[email protected]" enctype="text/plain">
<input type="text" name="item1" size=50 > <br>
<input type="text" name="item2" size=50 > <br>
<input type="text" name="item3" size=50 > <br>
<input type="submit" value="送出網址資料" >
</form>
<font size=+1> <hr> 這網頁有以下資料: <blockquote>
</body> </html>
3. doc1.htm 開啟後, 網頁上有一個連結: "轉去 doc2.htm", 請按一下轉去 doc2.htm, 留意在 doc2.htm 網頁中使用 document.write( ) 顯示出來的資料。
4. 請特別留意網頁中以下三項:
document.write("從: " + document.referrer + " 轉過來 <br>")
document.write("Domain 是: " + document.domain + "<br>")
document.write("目前的網址是: " + document.URL + "<br>")
若使用 Netscape, 這三項會有以下顯示 (在你的電腦中, 檔案位置會不同) :
若使用 IE, 在你自己的電腦中, referrer 這一項應該不會有作用 (在網路上才有反應)。
5. 這網頁有三個文字框顯示上述三項資料, 文字框內會有以下顯示:
6. 假若你要看在網上這三項的反應, 請留意以下電郵的一項:
<form name="test" method=post action="mailto:[email protected]" enctype="text/plain">
[email protected] 是筆者的電郵地址, 請你將這一項改為你的電郵地址 (否則資料就會寄了給筆者), 將 doc1.htm 及 doc2.htm 送去你自己的網址, 然後在網上看這兩個檔案, 試驗一下上述按鈕的操作, 看收到的電郵有什麼資料。
9.3 value 的使用
document 下有 form 及 image 兩個常用的 object, 這兩個 object 是附屬 document, 而它們又有自己的 value、length 及 src 三個附屬品, 隨後三節是說這三個附屬品的使用方式。
value 是一個物件的數值, 可用於 document 下的 form 內各物件, 包括:
button checkbox hidden option password radio reset submit text textarea
最常用的是: document.formName.textName.value, 在本書很多地方都有例子, 請看以下例子:
練習-63 顯示及改變 form 內物件的 value
在 form 的設定中, 每個物件我們都可以給予一個預設的 value, 這個練習主要是示範如何使用 assignment 的方式來改變這預設的 value。
1. 請用瀏覽器開啟示範磁碟中的 value.htm, 這檔案有以下內容:
<html> <body bgcolor=oldlace text=blueviolet>
<form name=display>
<input type=text name=Tx value="文字-1"> <br>
<textarea rows=4 cols=30 name=Txarea> 文字-2 </textarea> <br>
<input type=button name=Btn value=" 文字-3 "> <br>
<input type=password name=Pw value="文字-4"> <br>
</form> <p>
<form>
<input type=button value="按鈕 1"
onClick="document.display.Tx.value='new words-1' ">
<input type=button value="按鈕 2"
onClick="document.display.Txarea.value='new words-2' ">
<input type=button value="按鈕 3"
onClick="document.display.Btn.value='new words-3' ">
<input type=button value="按鈕 4"
onClick="document.display.Pw.value='new words-4' ">
</form>
</body> </html>
2. 留意 value=" " 這項資料在 text、textarea、button 及 password 這 4 個物件中的顯示, 你應見 文字-1、文字-2、文字-3及 ****。
3. 網頁下方有 4 個按鈕, 請你每個按一下, 看上述 4 個物件的文字轉變。
1. 本書其他例子主要是以 text (文字框) 來顯示資料, 這處筆者用 button 來解說, 請你留意網頁中這按鈕: , 設定這按鈕是使用以下的一句, value 是指在按鈕上出現的文字:
2. 網頁後方有一個按鈕, 作以下設定:
在這按鈕上按一下, 前面的 document.display.Btn 就會有一個新的 value。
3. 這處你要掌握的概念是一個物件的 value 是可讓我們任意改變的, 在 第10章 的例子, 你看到用 setTimeout( ) 的方法, 可以在 text (文字框) 中顯示不斷改變的資料, 其實我們也可以用 button 來顯示, 請看以下例子。
練習-64 在 button 上顯示跳動的時間
在這練習, 你看到用 button 來顯示資料, 有關 setTimeout( ) 的操作原理, 請看第 10 章。
1. 請用瀏覽器開啟示範磁碟中的 button.htm, 這檔案有以下內容:
<html> <head>
</head>
<body>
<form name=display> 目前時間是:
<input type=button name=timeButton value=" 00:00:00 ">
<p>
<input type=button value="啟動時鐘" onClick="startTime( )">
</form> </body> </html>
2. 網頁開啟後, 你會見到這顯示:
3. 請你按 [啟動時鐘], 在第一個按鈕就會顯示當時的系統時間, 這與第 10 章 說的counter 相似, 分別只是利用文字框或用按鈕顯示資料。
9.4 img 及 images 的 src
src 是 source 的簡寫, 是指物件的來源, 可用於 img (image) 及 layer 兩個 object, 本書不會說及 layer, 所以這一節只會說 img (單獨圖片) 及 images (圖片陣列) 的 src。
1. imageName.src 的使用
在網頁中放下一幅圖片, 是使用以下標籤:
<img src=cat.jpg name=catPic>
這表示圖片來源是使用 cat.jpg 這圖片, 這位置名稱是 catPic。
在插入圖片時, 你給予這位置一個名稱, 隨後就可利用這名稱來轉換圖片, 請看以下例子。
練習-65 用 src 來轉換圖片
在這練習, 你看到如何利用 button 來轉換一個圖片的來源。
1. 請用瀏覽器開啟示範磁碟中的 src.htm, 這檔案有以下內容:
<html> <body bgcolor=oldlace text=blueviolet>
<img src=cat.jpg name=catPic>
<p>
<form>
將圖片轉換成:
<input type=button value="猩猩"
onClick="document.catPic.src='chim.jpg' " >
<input type=button value="鸚鵡"
onClick="document.catPic.src='parrot.jpg' " >
</form>
</body> </html>
2. 網頁開啟後, 你會見到 cat.jpg, 圖片下方有兩個按鈕, 請你試試這兩個按鈕, 看有什麼反應。
在這例子, 這圖片的物件來源是: document.catPic.src, 使用按鈕的方法可轉換這物件, 例如
onClick="document.catPic.src='chim.jpg' "
這實際是一個 assignment, 而這 assignment 是用按鈕及用 onClick 的方法來啟動。
2. images[i].src 的使用
image 是指單獨一幅圖片, 使用 <img> 這標籤, images 是指整個網頁中的圖片排序形成的陣列, 這陣列是自動形成的, 我們不需用 new Array 來指明, 例如上個練習的圖片位置, 可用以下方式來表示:
<html> <body bgcolor=white text=blueviolet>
<img src=cat.jpg >
<p>
<form>
將圖片轉換成:
<input type=button value="猩猩"
onClick="document.images[0].src='chim.jpg' " >
<input type=button value="鸚鵡"
onClick="document.images[0].src='parrot.jpg' " >
</form>
</body> </html>
有關陣列的操作, 請看第 8 章。
3. length 的使用
length 是指數目, 是一個 property, 可用於幾乎全部有數量的物件, 在 Array 的一章已說過 arrayName.length, 這是陣列中的成員數目, 在 練習-62 說過以下有關 document 下各物件的數目:
document.write("書籤數目是: " + document.anchors.length + "<br>")
document.write("表單數目是: " + document.forms.length + "<br>")
document.write("圖片數目是: " + document.images.length + "<br>")
document.write("連結數目是: " + document.links.length + "<br>")
在 String object 的一章會說到 length 可用來計算一句文字的字元數目, 例如 alert("happy".length) , 這會顯示一個 5 字, 表示這字有 5 個字元。
9.5 navigator object
navigator object 可用來檢查觀看者的瀏覽器的一些資料, 例如可分辨瀏覽器是Netscape 或 IE, 與及使用的版本。navigator 有以下的 property:
navigator.appCodeName 這是瀏覽器的產品代號名稱。
navigator.appName 這是瀏覽器的名稱。
navigator.appVersion 這是瀏覽器的版本 (version)。
navigator.language 這是瀏覽器的語系。
navigator.platform 這是操作平台。
navigator.userAgent 這是瀏覽器及操作系統的各項資料。
練習-66 顯示瀏覽器的資料
以下是個簡單示範, 讓你了解上述 6 個 property 有什麼資料顯示。
請你分別用 Netscape 及 IE 開啟示範磁碟中的 navi1.htm, 若你有新舊版本的瀏覽器, 也請用來看看這檔案, 這檔案有以下內容。
<html> <body bgcolor=oldlace>
</body> </html>
請留意上述六項資料在不同瀏覽器中的顯示。
若使用中文版 IE-4 及在中文 Windows-98 來看, 網頁開啟後, 會有以下顯示, 若用 IE-5, MSIE 4.01 會變為 MSIE 5.02, 當然實際要看使用的次版本, 其他資料在這兩個版本都是一樣。
Mozilla
Microsoft Internet Explorer
4.0 (compatible; MSIE 4.01; Windows 98)
undefined
Win32
Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)
若使用 Netscape-4 (英文版) 及在中文 Windows-98來 看, 會有以下資料:
Mozilla
Netscape
4.03 [en] (Win95; I)
en
Win32
Mozilla/4.03 [en] (Win95; I)
在上述的資料, 最有用的是 appName 及 appVersion, 我們可以利用來檢查觀看者的瀏覽器類別及版本, 然後作出反應。
練習-67 檢查瀏覽器及作出反應
在這例子, 你看到網頁在開啟時如何利用 appName 及 appVersion 來檢查瀏覽器, 若瀏覽器是 IE 又或是 Netscape-3 或更舊的版本, 就會發出警告。
1. 請你先用 Netscape 開啟示範磁碟中的 navi2.htm, 這檔案有以下內容:
<html> <body> <h1 align=center> navigator 示範 </h1>
若沒有 alert 對話盒出現, 表示你使用的是 Netscape-4 或更新的版本。
</body> </html>
2. 若使用 Netscape-4 來開啟這網頁, 應不會有 alert 對話盒出現。
3. 請你用 IE 開啟這網頁, 看有什麼效果, 若你有 Netscape-3 或更舊的版本, 請用來試試這網頁。
這網頁相當簡單, 所以筆者不多加解釋, 有關 verNo=parseInt (navigator.appVersion) 這一項, parseInt( ) 是抽出 appVersion 排首的數值, 例如4.03, 然後再變為整數, 所以 verNo 會等於 4。
因為 IE 及 Netscape 有些分岐, 一個網頁在某個瀏覽器操作正常, 但在另一個瀏覽器卻出現異常操作, 所以一些人會為自己的網頁造出兩個版本來適應這兩個瀏覽器, 使用的是以下練習的方法。
練習-68 為 IE 或 Netscape 開啟特定的網頁
在這例子, 你開啟的網頁名為 index.htm, 這網頁開啟時, 會檢查瀏覽器是 IE 或Netscape, 若是 IE, 會轉為載入 index1.htm, 若是 Netscape, 會載入 index2.htm。
1. 今次例子的 index.htm 有以下內容:
<html> <body>
</body> <html>
2. 請你用 Netscape 開啟這 index.htm, 留意載入的會是 index2.htm。
3. 請你再用 IE 來看這 index.htm, 留意載入的會是 index1.htm。
(註: 實際使用這類檢查網頁時, 應該 index.htm 是給一類瀏覽器使用, index1.htm是給另一類使用, 不需用到三個檔案。)
( 第 9 章 完 )
相关阅读 更多 +
