網頁標題： 物件 (Object)
　
﹗﹗﹗觀看留言：此文章已經有1則留言 ﹗﹗﹗


JavaScript 初階教學

http://taiwantc.com/js/js_tut_a2.htm

物件 (Object)

物件
物件的表示方式
方法與屬性

物件
大家在第一篇中的 Hello, World 例子中初次接觸到 document 物件， 但物件是什麼呢？

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 

　 title 

　 lastModified 

　 URL

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

例子： document 的屬性：




[/code]

執行

程式說明：

"The URL of this document is : " + document.URL + "
" 這是 write 的一個參數， 而這個參數是一個字串， 它有三個部份， 分別是 "The URL of this document is : " ,　document.URL　和　 "
"　， 它們之間都有個加號 (+)， 是用來將那三個部份組合成一個更長的字串， 然後這個字串就作為 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"
這兩句會將背景顏色轉成黑色， 將文字顏色轉成金色。 想改變物件屬性的內容， 只須把它當作變數， 再用等號 (=) 指定它的內容便可。

回 · 我的 js 筆記蒐集 這一篇文章封面
本文張貼者：校校鴿〔張貼時間：民國100年5月24日（星期二）10點01分〕 | 寫信給校校鴿

部落格首頁

學習的故鄉首頁
本站公告：〔您越需要我們，我們就越有創意〕 本站說明書：〔發現故鄉還有改進的地方，請來信告訴原丁們〕
觀察應用學習點數 ：〔咱的故鄉有您的參與，會使我們有更大的發揮空間，展現更豐富精彩的學習畫面〕 〔期待藉由無障礙網頁設計，能讓視障小朋友更愛看書、更愛寫作且更愛學習〕：盲用電腦「心得分享」
〔為了讓我們有乾淨的學習環境，請勿任意在本站散播商業廣告與不合法文件或聯結〕：本站宣示