2012年10月22日 星期一

Dynamic HTML (II)


Dynamic HTML (II)



範例:我們定義了三個訊息,而這些訊息存放在陣列中;只要使用者在 "Click to change" 的按鈕上按一下,這些訊息就會順序的顯示出來。

原始碼:
<script language="javascript">
<!--
  var count = 0;
  var msg = new Array(3);
  msg[0] = 'XML Rules';
  msg[1] = 'XML 加油';
  msg[2] = '學習 XML 超簡單';

  function change() {
    count++;
    count = count % 3;
    document.myform.elements[0].value=msg[count];
  }
// -->
</script>

說明:許多有用的 DHTML 網頁都跟 form 元件的使用有關,在這個範例中,我們 說明 Javascript 如何與 form 元件互動。
  • 範例中,呈現的是一個 form 元件,該元件的原始碼如下:
    <form name="myform">
    <input type="text" value="XML Rules">
    <input type="button" onClick="change();" value="Click to change"/>
    </form>
    
    有幾個地方請特別注意一下:第一個是 form 元件的名稱被命名為 myform; 第二個是 button 元件中,我們定義了一個 onClick 事件;若該事件被觸發,則 瀏覽器執行 change() 函數。
  • 之前提到的 JavaScript Hierarchy 說明了物件的架構,例如 form 裡面的第一個 element,可以以 elements[0] 來代表,同樣的,一個網頁裡的第一個 img 元素,也可以以 document.images[0] 來代表。只是這一類的表達法有可能因為不小心修改了網頁的內容而讓 JavaScript 的程式無法正確執行。
  • 有了以上的說明,我們知道每一次使用者按了一下 "Click to change" 按鈕, 則 form 中的文字欄位內的內容就會改變。form 中的文字欄位元件其實也就是 document.myform.elements[0] 物件,而更改其內容只需要把它的 value 值更改即可。
  • 雖然不少網頁用的標籤是 <button>,但是如果之前的 button 是用
    <button onClick="change();">Cick to change</button>
    
    來完成,則只有 IE 能夠正確的執行,Firefox 卻無法正確執行。





沒有留言:

張貼留言