JavaScript

   


物件 (Object)


物件

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

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

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

js_tutorial_fig1.gif (7505 bytes)

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

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

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

物件的表示方式

現在知道哪個物件包含哪個物件, 那麼如何表示它們呢?

想表示某個物件, 主要步驟有三個:

  1. 第一步: 找出該物件的名稱, 名稱是很重要的。

    要找出一個物件的名稱, 主要有兩個步驟:

    1. 找出該物件的 HTML 標記 name 屬性的值, 而這個值就是該物件的名稱了。 例如有一個表單, 它的 HTML 碼如下:
      <form name="my_form">
         <input type="text" name="my_name" value="Your name here">
      </form>

      這個表單物件的名稱就是 my_form , 而表單內的文字輸入物件的名稱就是 my_name 了。

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

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

  3. 第三步: 在物件和它的所有必須的包含者之間用一點 (.) 連貫起來

    這步更加容易, 例如你想表示文字輸入物件, 名稱是 my_name , 它是在一個表單內, 名稱是 my_form , 我假設使用這個物件的 JavaScript 與這個物件的 HTML 碼是在同一頁, 因此我不須要找出視窗的名字。 表示方式如下:

    document.my_form.myname

大家可能會問, 既然它們是在同一頁, 那麼 document 也不須要寫吧, 只是寫 my_form.myname 不就行了嗎? 理倫上好像是對的, 我在 IE 和 Opera 測試過這種寫法, 它們也支援, 但不知何解 Netscape 會產生錯誤, 所以這堳媊酗j家不要漏去 document , 如果你怕打太多字也不用擔心, 之後的篇章會教大家如何運用變數, 令自己不用打這麼多字。

方法與屬性

相信大家已經有了物件的概念了, 但有了一個物件, 可以做些什麼呢? 答: 就是運用它的方法屬性了:

  • 方法 (Method):

    用來做一些與該物件有關的動作, 例如 document.write()writedocument 的方法, 所以這一句會在 document 寫入一些東西。

    表示方式:

    Object_name.method()

    方法必須有左括號和右括號 (), 而括號內是用來輸入參數的。 當方法沒有參數時, 也應在尾部加入括號, 以表示它是一個方法, 而括號內不用寫任何東西。

    其實方法就好像一個函數 (Function), 不同之處在於方法是連繫著物件的。 函數會在之後的篇章詳述。

  • 屬性 (Property):

    用來取得該物件的屬性或資訊, 也可以設定某些屬性的內容。 例如 document.bgColorbgColordocument 的屬性, 所以這一句的內容就是該個 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 的屬性:

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

<script>
<!--
document.write("Document URL : " + 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> 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"

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







[到頁頂] [首頁] [速查表]