各種內建物件的詳細介紹請參考
除了內建的物件外，瀏覽器 (broswer) 另外會建置文建物件模型，也就是 HTML DOM ，這可讓我們可以把 HTML 的元素都當成物件來操作。 HTML DOM 主要有以下這幾個
- document
- element
- event
- window
各種 HTML DOM 的詳細介紹請參考
我們之前用 document 的 write() 將字串 (string) 寫到瀏覽器中，當然， document 不只是可以做這些事情，幾乎所有跟 HTML 文件有關的都可以用 document ，例如下面的 HTML 文件，我們在 <script> 標籤中設計一個 run() 函數
<html>
<head>
<title>docuemnt Demo</title>
<script>
function run() {
var d = document.getElementById("display");
d.style.color = "red";
d.style.fontSize = "x-large";
}
</script>
</head>
<body>
<div id="display" onclick="run()">something happened</div>
</body>
</html>
<!-- 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：documentdemo.html
功能：示範 JavaScript 程式
作者：張凱慶
時間：西元 2012 年 12 月 -->run() 函數準備運用在 id 屬性為 display 的 HTML 元素上，利用 HTML 元素的事件處理屬性 onclick 設定執行 run() ，因此點擊 <div> 的範圍就會執行 run()
<div id="display" onclick="run(this)">something happened</div>
各種 HTML 元素的事件處理屬性的詳細介紹請參考
我們仔細來看看 run() 的定義
function run() {
var d = document.getElementById("display");
d.style.color = "red";
d.style.fontSize = "x-large";
}首先， run() 的工作是利用 document 的 getElementById() 方法取得 id 屬性為 display 的 HTML 元素，這會讓變數 d 取得 <div> 的元素物件，也就是上面提到的 element 。接下來便是利用元素物件的 style 屬性重新設定文字顏色與字型尺寸。
各種樣式設定屬性 style 的詳細介紹請參考
這例子很簡單，我們先開啟 documentdemo.html 吧
用滑鼠點一下 something happened 的地方，文字顏色與大小就立刻改變了
我們可以看到真正的工作是由元素物件來做的，此例透過 document 取得元素物件，當然我們也可以直接以元素物件當參數 (parameter) 傳遞給 run() ，例如
<html>
<head>
<title>docuemnt Demo</title>
<script>
function run(d) {
d.style.color = "red";
d.style.fontSize = "x-large";
}
</script>
</head>
<body>
<div id="display" onclick="run(this)">something happened</div>
</body>
</html>
<!-- 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：documentdemo2.html
功能：示範 JavaScript 程式
作者：張凱慶
時間：西元 2012 年 12 月 -->這裡在呼叫 run() 時增加 this 當參數，然後 run() 的定義裡增加參數 d ，也刪掉 document 的部份，因為參數 d 就直接是元素物件了。
使用 HTML DOM 可以讓網頁有動態效果，無論是新增或刪除 HTML 元素都可由 HTML DOM 來達成，這也是學習 JavaScript 重要的一部份，在我們接下來的部份也有很多地方會用到。
下面我們來想想怎麼樣製作密碼表，先來看看儲存密碼表的陣列 (array) 吧！
| 中英文術語對照 | |
|---|---|
| 物件 | object |
| 瀏覽器 | broswer |
| 字串 | string |
| 參數 | parameter |
| 陣列 | array |
您可以繼續參考
網頁軟體開發
相關目錄
回 JavaScript 入門指南
回 JavaScript 教材
回首頁
參考資料
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects
http://www.w3schools.com/JS/js_htmldom.asp
http://www.tutorialspoint.com/javascript/javascript_html_dom.htm
沒有留言:
張貼留言