JavaScript的物件、方法與屬性

物件 (Object) ：物件到底是什麼呢？
JavaScript 是物件導向程式語言，簡單來說即是瀏覽器內的任何東西都視作物件，而每個物件又可能包含 (contain) 其它物件。大家可以用十秒時間想一想你的瀏覽器內有些什麼東西，如果想到的話可以再想想這些東西又包含了什麼其它的東西。

為了讓大家清楚JavaScript的物件架構，在這一部份課程會針對以下圖片來說明物件：

JavaScript 物件層次圖 (JavaScript Object Hierarchy)
來源： Netscape JavaScript Reference

上圖是Netscape JavaScript Reference網站內一幅JavaScript的物件層次圖，每個長方形代表一個物件，長方形內的文字表示該物件的名稱 (Name)，連繫長方形的線表示了物件與物件之間的層次關係。

最高層次的物件有兩個：window和navigator。我們首先看看window，它包含了 document物件，即是說window是document的包含者 (Container)，再看看document，它包含了Form, Applet, Plugin...等物件，即是說document是Form, Applet, Plugin...等物件的包含者。

最高層次的物件Window包含了四個物件：
· Document 物件: 代表一個網頁的所有內容。
· Frame 物件: 代表視窗框架。
· History 物件: 代表瀏覽過的網頁的列表。
· Location 物件: 代表網頁的URL資訊。

以document為例，document是指網頁這一個物件，是位於window下層的物件，標準的語法應是：window.document.bgColor，但一般會略去window，所以變成：document.bgColor。 而document之下則有：form, layer, link, image, area, anchor, applet, plugin多個子物件。

物件的表示方式：
那我們應該要如何使用正確的方式來指定或引用文件當中的目標物件呢？這時我們就要注意一下物件的層次。我們就使用下面的例子來說明物件的層次。
例如在一間「學校」裡頭，有許多間的「教室」，而「教室」裡有許多位「學生」。在其中我們可以將「學校」當成是一個瀏覽的視窗，「教室」則可以將它視為一張張的網頁，而「學生」可將它當作是網頁中的某個物件。
例如教育部長要下令讓該「學校」裡某間「教室」中名叫「PETER」的學生做某個「動作」，這時我們就要注意以由上而下的順序，將「學生」「PETER」叫出來作「動作」，而且須將各部份之間用句點「 . 」連結之︰
　學校.教室.學生.PETER
教育部長可以命令「學生」「PETER」做他能做的動作：
　學校.教室.學生.PETER.動作()
「PETER」需要教育部長來下令做怎樣動作。
　學校.教室.學生.PETER.動作(唱歌)

如以JAVASCRIPT程式碼表示略如下例：
window.document.write("The URL of this document is : " + document.URL + "<br>");
由以上我們可發現到，指定物件或引用物件的方式是由大到小或由上到下的指定或引用方式，而這種方式我們可以稱之為「物件的順序層次」，在網頁中也是以這種相同的方式來分層次的。在 JavaScript 中，物件的作用域越小，對物件位置的假設就越多(因為我們所引用的物件也多)，對客戶端 JavaScript 而言，其作用域最大是不會超過瀏覽器的。

如果現在已經知道哪個物件包含哪個物件，那麼要如何表示它們呢？想表示某個物件，主要步驟有三個：

第一步：找出該物件的名稱，名稱是很重要的。要找出一個物件的名稱，主要有兩個步驟：
１．找出該物件的HTML標記裏name屬性的值，而這個值就是該物件的名稱了。
下例為一個表單的HTML碼：
<form name="my_form">
<input type="text" name="my_name" value="Your name here">
</form>
這個表單物件的名稱就是my_form，而表單內的文字輸入物件的名稱就是my_name了。
２．如果知道該物件是唯一的 (Unique)，而且它根本沒有HTML標記可以運用，那就查查看在上圖JavaScript物件層次圖內是否有該物件的名稱。例如 document，因為通常在一個瀏覽器視窗內只能開啟一頁網頁，所以document是唯一的，我們就用document作為document物件的名稱。再舉例如 navigator(瀏覽器物件)，一個瀏覽器視窗只能屬於該瀏覽器，因此我們就用navigator作為netvigator物件的名稱。

第二步：找出該物件的所有包含者名稱
只要參考上圖JavaScript物件層次圖，便很易找出某個物件的包含者名稱。在某些情況下，你無須找出某些包含者的名稱，例如在某一頁內的JavaScript想使用該頁的物件，你就不須要找出那一頁所在的視窗或窗柜物件的名稱；但如果你想在某頁使用另一個視窗或窗柜物件，那就必須找出那個物件的名稱了。


第三步：在物件和它的所有必須的包含者之間用一點 (.) 連貫起來
這個步驟更加容易，例如你想表示文字輸入物件，名稱是my_name，它是在一個表單內，表單名稱是my_form，假設使用這個物件的JavaScript與這個物件的HTML碼是在同一頁，因此不須要找出視窗的名字。其表示方式如下（按層次由上往下包含）：
document.my_form.myname

大家可能會問，既然它們是在同一頁，那麼document也不須要寫吧，只是寫 my_form.myname不就行了嗎？ 理論上好像是對的，在IE和Opera測試過這種寫法，它們也支援並無問題，但不知為何在Netscape就是會產生錯誤，所以這裏建議大家不要漏去document。


方法與屬性：
相信大家已經有了物件的概念了，但有了一個物件，可以做些什麼呢？ 答案就是要運用個個不同物件所擁有的相關方法和屬性了。

方法 (Method)：
用來做一些與該物件有關的動作，例如 document.write( )，write是document的方法，所以這一句會在document上寫入一些東西。
表示方式：
　Object_name.method( )
方法必須有左括號和右括號 ( )，而括號內是用來輸入參數的。當方法沒有參數時，也應在尾部加入左括號和右括號 ( )，以表示它是一個方法，而括號內不用寫任何東西。
其實方法就好像一個函數 (Function)，不同之處在於方法是連繫著物件的。函數會在之後的篇章詳述。

屬性 (Property)：
用來取得該物件的屬性或資訊，也可以設定某些屬性的內容。例如document.bgColor ，bgColor 是document的屬性，所以這一句的內容就是該 document的背景顏色，你也可以設定它的內容來改變背景顏色，例如document.bgColor="red"，這段程式碼會把該頁的背景顏色轉為紅色。
表示方式：
　Object_name.property
其實屬性就好像一個變數 (Variable)，不同之處在於屬性是連繫著物件的。
應該對方法和屬性有初步的概念了吧？那現在便可介紹一下常用的document方法和屬性了：

Document 物件
方法	屬性
write( )	bgColor 網頁的背景顏色。 fgColor 網頁的文字顏色。 linkColor 未用的連結的文字顏色。 alinkColor 在選擇中的連結 (alink) 的文字顏色。 vlinkColor 已使用的連結的文字顏色。 　 　 lastModified 網頁的最後存檔日期 (read-only)。 URL 目前網頁的 URL (read-only) (留意: 這字用大寫)。 cookie 閱讀及設定 cookie。 title 網頁的 title (read-only)。

writeln( ) 和 write( ) 的功能一樣， 唯一不同的地方就是 write() 會在句尾加入斷行符號 (Carrier Return)，目的是使寫出來的東西在普通文字編輯器中(如 Notepad)易於閱讀，也方便列印。但在螢幕上顯示出來的效果基本上是一樣的 (除了在 <pre> 與 </pre> 這對標籤內)，所以兩者的效果一般會相同，我們習慣使用 write( ) 而不用 writeln( )，只因為在HTML格式內的斷行符號一般會被忽略掉的。

Document的Form子物件及其元件
子物件	元件
form	button, checkbox, hidden, option, password, radio, reset, submit, text, textarea

程式範例（Document的Form子物件及其部份元件應用）：
<form name="form1" method="post" action="samp03.html" enctype="multipart/form-data">
<table width="400" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="38%" bgcolor="#CCCCCC">
input type="text"
</td>
<td width="62%" bgcolor="#eeeeee">
<input type="text" name="textfield" value="http://">
</td>
</tr>
<tr>
<td width="38%" bgcolor="#CCCCCC">
input type="radio"
</td>
<td width="62%" bgcolor="#eeeeee">
<input type="radio" name="radiobutton" value="radiobutton">
男
<input type="radio" name="radiobutton" value="radiobutton">
女　
</td>
</tr>
<tr>
<td width="38%" bgcolor="#CCCCCC">
input type="checkbox"
</td>
<td width="62%" bgcolor="#eeeeee">
<input type="checkbox" name="checkbox" value="checkbox">
A
<input type="checkbox" name="checkbox2" value="checkbox">
B
<input type="checkbox" name="checkbox3" value="checkbox">
C
</td>
</tr>
<tr>
<td width="38%" bgcolor="#CCCCCC">
input type="submit"
</td>
<td width="62%" bgcolor="#eeeeee">
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
<tr>
<td width="38%" bgcolor="#CCCCCC">
select
</td>
<td width="62%" bgcolor="#eeeeee">
<select name="select">
<option>YAHOO</option>
<option>HINET</option>
<option>SEEDNET</option>
</select>
</td>
</tr>
</table>
</form>

程式範例：
<html>
<head><title>Object,Method and Property</title>
<script>
<!--
document.write("The URL of this document is : " + document.URL + "<br>");
document.write("Date of last modified :" + document.lastModified + "<br>");
document.write("Document Title: " + document.title + "<br>");
document.write("The background color is " + document.bgColor
+ " and the text color is " + document.fgColor);
document.fgColor = "yellow"
document.bgColor = "black"
//-->
</script>
</head>
<body>
<h2>Object,Method and Property </h2>
The text and background color have been changed
because I modified the content of document.fgColor
and document.bgColor .
</body>
</html>

程式說明：
"The URL of this document is : " + document.URL + "<br>"
這是write的一個參數，而這個參數是一個字串，它有三個部份，分別是 "The URL of this document is : " , document.URL 和 "<br>" ， 它們之間都有個加號 (+)， 是用來將那三個部份組合成一個更長的字串，然後這個字串就作為write的參數了。(字串前後必須用雙引號括起來)
document.URL不用雙引號括著，因為我們要顯示document.URL的內容，而不是 document.URL這段字串。


註：　document.write("The background color is " + document.bgColor
　+ " and the text color is " + document.fgColor);

當你發覺一句字串太長時，可以往下一行寫，而分割(斷行)的位置可以在加號的左右，如果在其它位置分割(斷行)程式碼可能會造成程式執行錯誤或無法執行。

document.bgColor = "black"及document.fgColor = "yellow"
這兩句分別為將背景顏色設定成黑色，將文字顏色(前景)設定成黃色。若想改變物件屬性的內容，只須把它當作變數，再用等號 (=) 指定它的內容便可。
（bgColor=Background Color, fgColor=Foreground Color）
字串文字(String Literals)內使用特殊字元：字串或者字元須以雙引號「"」或者單引號「'」括住。如果想在雙引號或者單引號之內所括住的字串裡面，還想使用雙引號或者單引號的話，則應寫成　\"　或　\'　。
例如： 　　"ABCDEFG"　　'ABCDEFG'　　"12345"　　'12345'　　"Ｉam \"Superman\""　　'alert(\'Wrong!!\')'

在字串中使用的特殊字元(Using Special Characters in Strings)列表：

\b	倒退字元
\f	欄位
\n	換行
\r	歸位
\t	定位
\v	垂直定位
\\	反斜線
\"	雙引號
\'	單引號
\nnn	以 8 進位數字指定字元， nnn 的值為 0 到 377 ，例如 \251 是一個 copyright 的符號 ©。
\xnn	以 16 進位數字指定字元， nn 的值為 00 到 FF ，例如 \xA9 是一個 copyright 的符號 ©。
\unnnn	以 16 進位 unicode 數字指定字元，例如 \u00A9 是一個 copyright 的符號 ©。