|
網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。
一、屬性控制
屬性是用來標識一個對象或是一組對象的狀態，比如Radio的Checked表示的是當前單選按鈕是否被選中。
如果我們選中一個單選按鈕時想顯示一個文本框，即 “當選中單選按鈕時顯示文本框”,但大多數情況下我們并不是這樣處理，更多的是通過：
事件(onclick, onkeydown,…) ---> 判斷當前狀態(Checked是否為True) ---> 調用相應的Function(顯示或隱藏文本框)
這樣的處理方法非常被動，我們要為每一個事件加上相同的代碼來實現最終的目的，很有可能的是在Coding過程中的忽略的某些事件(比如onkeypress, onkeydown等)，并且程序的擴展性不強。
對于一個屬性，特別是狀態屬性來說，它應當起到的是一個命令的作用，就像是CEO告訴你現在要去做什么，但這件事如何去做，用什么方法去做，這應當由你自己去決定。
因此，對于屬性的操作應該盡量是
控制器：事件或其它Function ---> 設置屬性
處理器：屬性改變時 ---> 調用處理器(判斷屬性的狀態，做出相應的處理)
通過屬性為分界線，我們把它分為了控制和處理兩個部分，這樣在整個屬性處理流程中靈活性會增加很多。
那我們應該如何來實現這樣的想法呢？
１． onpropertychange
<html><head><script language="javascript">function changeBox(status){textbox.style.display = status ? "" : "none"}</script><script language="javascript" for="test" event="onpropertychange">var propName = event.propertyNamevar propValue = this[propName]switch(propName){case "checked":changeBox(propValue)break;}</script></head><body><input type="radio" id="test" name="radio" checked="true" /><input type="radio" name="radio" /><input id="textbox" /></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
２． Htc
在HTC中實現很容易，Microsoft已經做好了相應的接口，直接使用property元素的get和put方法就行了。
３． 自定義
我們需要做一個屬性控制器就能做到這一點，如：
function controlAttribute(對象，屬性，設置的值)
{
對象.屬性 = 設置的值
調用對象.綁定在屬性變化事件的函數(屬性)
}
所有的屬性設置通過屬性控制器去執行，這樣就能做到和onpropertychange或是HTC一樣的效果了。 二、局部屬性
在某些時候可能幾個元素同時只使用一個屬性，比如select中的option，在大多數情況中他們只可能有一個selected為True，其余的都為Flase，那么我們可以把它看做在這一組的option中只有一個selected，在HTML代碼中我們也是這樣表示的。
所以就需要一個在局部區域使用的屬性來標識，它就像是一個令牌一樣可以在不同的元素這間移動，這就確保了屬性的唯一性，并且若是想改變屬性的狀態時，你不須要考慮這個屬性在哪一個元素上，直接改變屬性的狀態。
下面我們看一下例子，由于IE6的在DOM支持上的不完善，所以寫這個程序過程中有一些附加的代碼，如要通過一個全局的TR變量記錄屬性所在的對象名稱(DOM中可以通過 屬性.parentNode 得到)等
<script>function findParentObj(obj, strTagName, strId){ while ( obj && !(!strTagName
obj.tagName == strTagName) && (!strId
obj.id == strId) ) obj = obj.parentElement return obj}var oTRbgColorOver = document.createAttribute("bgColor")bgColorOver.nodeValue = "red"bgColorOut = document.createAttribute("bgColor")bgColorOut.nodeValue = "transparent"function highlight(obj) { if (oTR) { oTR.removeAttributeNode(bgColorOver) oTR.setAttributeNode(bgColorOut) oTR.removeAttributeNode(bgColorOut) } oTR = findParentObj(event.srcElement, "TR") if (oTR) oTR.setAttributeNode(bgColorOver)}</script><table border="1" bgcolor="#FFFFFF" onclick="highlight(this)" onmouseover="highlight(this)"><tr> <td>序</td> <td>單位編碼</td> <td>單位名稱</td></tr><tr> <td><input type=text value=01></td> <td><input type=text value=DW001></td> <td><input type=text value=微軟公司></td></tr> <tr> <td><input type=text value=02></td> <td><input type=text value=DW002></td> <td><input type=text value=英特公司></td></tr> <tr> <td><input type=text value=03></td> <td><input type=text value=DW003></td> <td><input type=text value=中國公司></td></tr> </table>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。
|
