JavaScript--物件－羅朝淇的部落格

物件是什麼呢？

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

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

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

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

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

物件的表示方式

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

第一步：找出該物件的名稱，名稱是很重要的。
要找出一個物件的名稱，主要有兩個步驟：

找出該物件的 HTML 標記裏 name 屬性的值，而這個值就是該物件的名稱了。例如有一個表單，它的 HTML 碼如下：
<form name="my_form">
<input type="text" name="my_name" value="Your name here">
</form>
這個表單物件的名稱就是 my_form ，而表單內的文字輸入物件的名稱就是 my_name 了。

如果那個物件是唯一的 (Unique)，而且它根本沒有 HTML 標記，那就用該物件在圖一的名稱。例如 document ，因為一個瀏覽器視窗或窗柜只能有一頁，所以 document 是唯一的，我們就用 document 作為 document 物件的名稱。例如 navigator (瀏覽器物件)，一個瀏覽器視窗只能屬於該個瀏覽器，因此我們就用 navigator 作為 netvigator 物件的名稱。

第二步：找出該物件的所有包含者名稱
只要參考圖一，便很易找出某個物件的包含者名稱。在某些情況下，你無須找出某些包含者的名稱，例如在某一頁內的 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="silver" ，這句會把該頁的背景顏色轉為銀色。
表示方式：

Object_name.property

其實屬性就好像一個變數 (Variable)，不同之處在於屬性是連繫著物件的。變數會在之後的篇章詳述。

現在大家應該對方法和屬性有初步的概念了，讓我介紹一下常用 document 的方法和屬性吧：
Document 物件

方法屬性

write() bgColor

writeln() fgColor

lastModified

title

URL

writeln() 和 write() 的功能一樣，唯一不同的地方就是 write() 會在句尾加入斷行符號 (Carrier Return)，目的是使寫出來的東西在普通文字編輯器中 (如 Notepad) 易於閱讀，也方便列印。但在螢幕上的效果基本上是一樣的，因為 HTML 格式內的斷行符號一般會被忽略。

例子： document 的屬性：

<html>
<head><title> The Second Example: Method and Property</title>
<script>

</script>
</head>
<body>
<h2> The Second Example: 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>

<html> <head><title> The Second Example: Method and Property</title> <script language="JavaScript">  </script> </head> <body> <h2> The Second Example: 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.fgColor = "gold" 和 document.bgColor = "black"

這兩句會將背景顏色轉成黑色，將文字顏色轉成金色。想改變物件屬性的內容，只須把它當作變數，再用等號 (=) 指定它的內容便可。

羅朝淇

羅朝淇的部落格

羅朝淇發表在痞客邦留言(0) 人氣()

E-mail轉寄

羅朝淇的部落格

歡迎光臨羅朝淇在痞客邦的小天地