P.23 JS 是一種語言，但同時也是 web 開發的工具。所以你必須知道 JS 如何與 browser 互動。所以接下來會介紹 DOM 與 JS 操作 HTML。JS 已經有一些年紀了，所以決大多數的 browser（IE、FX、Opera、Safari、Chrome）在執行 JS 的運作方式都相同。當然啦，如果仔細鑽研的話，還是有一卡車不同的地方。不過，普遍來說，browser 們還是嘗試用同樣的方式運作。嵌入頁面的 ECMAScript 語法、以及 DOM 的結構或多或少地趨向一致，這是好事，不然 JS 開發會非常難學。 DOMCH1 已經介紹了 DOM 的概念，不過現在要更深入到細節，這樣你才能了解 script 的運作原理。DOM 提供 object 的表示法來操作所有 element 與頁面的 layout。技術上來說，browser 不需要 DOM 也可以呈現一個頁面，不過如果藥用 JS 來存取頁面上的資訊，就需要 DOM。在過去的歲月裡，browser 實做 DOM 的方式都不太相同，但這幾年在 W3C 的努力下，已經建立出標準（http://www.w3.org/DOM）。 P.24 一個沒有內文、僅有最基本結構的 HTML 文件會長得像這樣： <html><head></head><body></body></html><html> 表示接下來會是 HTML 的內容，接著的 <head> 內會有這分文件的一些資訊，例如 title、搜尋關鍵字、以及其他與內容無關的 meta data。layout 與內文是放在後頭的 <body> 中。在 JS 中，你可以用一個 global 的 object document 來存取 DOM。例如：要存取 body 這個 element 就用 document.body、而要用字串的方式存取 <body> 內的 HTML 就用 document.body.innerHTML。這就是 DOM 的能耐，只要你把頁面想像成一個階層式的 object model，它就可以轉變成 JS 中的 object。把上述的程式碼轉成 object 階層圖，就會是：  為了教學目的，我們加上 <h1> 這個 element：<html><head></head><body> <h1>Hello World</h1></body></html>重新把上面的程式碼轉換成下面這張圖：  p.25 SCRIPT element<script> 是一個 HTML 的 element，可以用下列兩種方式將 JS 嵌入到網頁中：
下面這張表包括了這個 element 普遍支援的 attribute；
p.26 下面是 script 直接寫在網頁上的範例： <html><head></head> <body> <h1>Hello World</h1> <script type="text/javascript"> alert('PS is 87 monkey!); </script> </body> </html>如果是用外部檔案，那會長得像這樣： <html><head> <script src="/js/script.js" type="text/javascript"></script></head><body></body></html>你可以把程式碼放在 <head> 或 <body> 裡頭。通常如果用 src 來引用外部 script，我們就會放在 <head> 當中。如果你擔心下載外部 script 會拖慢頁面載入的速度，那你可以改放在 </body> 前。用 src 將 JavaScript 嵌入頁面有很多優點，其一是程式碼會被存入 cache。正常來說，當 browser 下載過一次後就會存在儲存裝置內，下次有需要時就可以直接拿來用——也就是說，不用每次載入頁面時都再下載一次 script。對於特大的 script 而言，這可以大幅改善頁面載入效能。多年來，browser 會支援其中一種 script 格式，而語言之間的差異很少。M$ 甚至支援另一種叫做 VBScript 的 script 語言。上頭已經教過如何強制指定 browser 用哪種語言來解讀 script 的方法。現在所有先進的 browser 會預設語言是 JavaScript（預設相容於 ES3） p.27 |
JS 程式設計師參考書 >