物件模型與資料型態


文件物件模型
前言
傳統上，HTML文件是"靜態的"，換言之，文件的內容不會在執行的過程中更改。如果要有新的內容， 那只有重新修改HTML文件然後再執行。雖然有些人可以應用微軟的ActiveX 控制元件或是Java Applet 來做一些動態 的網頁內容，但這些方式通常都是有其限制的，而且必須額外下載一些元件才能做到。 在1996年微軟和另一家叫SoftQuad的公司提出了所謂的"文件物件模型"的規劃書給WWW Consortium(W3C)， 在這份規劃書之中詳述了一種方法，可以讓瀏灠器透過一種標準的機制來取用HTML文件中的內容。在1998年W3C協會 正式發表了Document Object Model Level 1 的規格書。 而目前微軟公司的Explorer Dynamic HTML Object Model 可說是此一規格的實現。 在Explorer的DOM 裡面定義的東西可以參考一下附錄。

物件與標籤
從前面的參考附錄中，你可以發現幾乎所的物件都有對應到一個HTML的標籤，而物件的屬性也是對應到標籤的性 質。而整個HTML文件之中，可以說是一些標籤的"包含"關係。例如下面的敘述:
<P> <B> <I> Hello </I> </B> </P>

是<P> ... </P> 標籤包含<B> ... </B>標籤， 再包含<I> ... </I>標籤。 這種包含的關係對應到物件模型的話，就是一個P 物件衍生一個B 物件，再衍生一個I 物件的關係。

物件的定義
每個網頁中的物件都被完整的定義在物件模型中，而物件是物件模型之中最基本的單位。
一個物件包含了屬性(Properties)、事件(Events)、方法(Methods)及集合(Collections)。分別說明如下：

在前幾週介紹CSS的內容中，有提到ID及CLASS，那就是一個使用物件的好例子。
例如：ID="id_define"就是呼叫id_define這個物件，這就是物件導向的觀念。

物件階層
物件模型以階層的方式定義所有物件，最高階層的物件是window物件，它代表目前顯示網頁的Explorer或Frame。

繼承：
如果一個網頁上的元件包含另外一個元件時，被包含的元件在物件模型之中所代表的意義是一個 物件包含的一個子物件(subobject)，用物件導向的術語來說，就是繼承。

函式(Function)
函式簡單來說就是一群擁有名稱的程式碼，我們只要呼叫函式名稱，就可以執行那一段程式，使得同一段程式可以重複使用。
例如下面這個例子，是一個名為Welcome的函式，它會在被呼叫到的時候顯示一個警告對話方塊。

    Function Welcome()
    {
        alert("Welcome to JScript World !")
    }

Welcome這個函式可以在任何時候透過它的名稱被呼叫。例如下面這個例子，在程式開啟完之後執行它。

    <BODY onLoad=Welcome()>
    <P>本程式在載入完成之後，會有一個警示畫面產生。</P>
    </BODY>

  • 參數(Arguments)：
    參數放在函式後面的括弧中，它提供了一種可將資料傳遞給函式的方法。您可以利用逗號將參數隔開，一次傳送多個資料給函式。

    練習一：參數使用範例： 


        <HTML>
    <HEAD>
    <TITLE> 輕鬆一下 </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--//
      function changeIt(target,newText)
      {
          oldText=target.value
          target.value=newText
          alert("The button that read '"+oldText+"' now reads '"+newText+"'.")
      }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>

    <FORM>
      <INPUT TYPE="button" VALUE="Btn1" onclick="changeIt(this,'One')"><BR>
      <INPUT TYPE="button" VALUE="Btn2" onclick="changeIt(this,'Two')"><BR>
      <INPUT TYPE="button" VALUE="Btn3" onclick="changeIt(this,'Three')"><BR>
    </FORM>

    </BODY>
    </HTML>

    看練習一執行的結果：



  • 傳回值(Returns)：
    參數是用來將資料傳給函式，而傳回值則可以讓我們得到函式執行的結果。

    練習二：傳回值使用範例： 


        <HTML>
    <HEAD>
    <TITLE> 輕鬆一下 </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--//
      function rndNum(maxNum)
      {
          num=Math.random()    //產生一個0與1之間的亂數
          num=num*maxNum
          num=Math.ceil(num)   //取一個不超過num值的整數
          return num
      }
      function tellUser(specifiedNum)
      {
          alert(rndNum(specifiedNum))
      }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>

    Type a number in the area below, and then click Calculate.<BR>
    The page will generate a random number between 1 and the number you entered.<BR>

    <FORM>
      <TEXTAREA NAME="TextNum">10
      </TEXTAREA><BR>
      <INPUT TYPE="button" VALUE="Calculate" onclick="tellUser(TextNum.value)">
    </FORM>

    </BODY>
    </HTML>

    看練習二執行的結果：




    • 到下一頁