《HTML5 精要剖析》- 1.6.4 操作網頁元素/利用 JavaScript 迴圈語法存取標籤

2012-03-26

4526
0
HTML5

這一篇同樣延續前幾篇的議題，並且透過 JavaScript 迴圈語法進行操作…如果有過任何程式設計的經驗這一篇的內容相對是簡單的 ~~完成這一篇的討論，我們要跟 HTML5 最基礎的部份說再見了，當然，這其中還有相當多的細節要討論，不過由於 BLOG 線上貼文並不容易組織完整的課程知識，因此細節部份我們還會在往後開專屬的網頁進一發展這些課程內容，甚至以紙本出版，下一篇，我們很快的要進入 HTML5 的語意標籤，朝向成為一位合格的 HTML5 應用程式開發人員努力，請繼續跟上腳步吧。XD

我們透過索引值逐一取出JavaScript 調用querySelectorAll() 所取得的標籤，由於畫面並不複雜，同時標籤的數量不多，因此這種方式並沒有什麼不妥，但是一旦網頁的設計複雜度提高，標籤的數量大幅增加，甚至某些標籤於網頁瀏覽操作的過程中被動態產生，在這種情形下，逐一透過索引取得標籤不是一種好的作法，我們可以選擇利用迴圈來達到相同的目的。

所謂的迴圈，是針對某段程式碼進行一定次數的重覆執行運算，考慮先前在「加法運算器」中所執行的內容清除程式碼：


function clearText() {
    var inputs = document.querySelectorAll('.valuestyle ');
    inputs[0].value = '';
    inputs[1].value = '';
    inputs[2].value = '';
}

其中執行了三次相同的value 屬性設定，將一個空字串指定給它，除了索引值之外，這三行程式碼基本上是完全相同的，因此我們可以將其修改如下：


inputs[i].value = '';

其中的i 是一個變數，我們要作的是，每一個改變 i 的值，然後重新執行一次，就可以達到我們要的目的，而這種運算需要for 迴圈語法。

for 是一個關鍵字，透過一個代表計數器的變數，記錄一段程式碼重覆執行的次數，然後逐次執行並且增加計數器的值，直到計數器到達迴圈所要執行的次數為止最典型的語法型式如下：


for(i=0;i<3;i++){

    //執行程式碼

}

for 關鍵字緊接著後續的小括弧裏面，定義計數器變數與迴圈執行次數的條件式，而條件式以; 分隔成三段：

第一段條件式設定計數變數 i 的初始值，你可以任意指定其它的變數名稱來取代 i。

第二段條件式則是在每一次迴圈執行完畢之後，檢查計數器變數 I 的值，如果小於3 則再一次執行其中的程式碼。

最後一段則於每一次要再重新執行其中的程式碼時，將變數i 加1 。

接下來的大弧中則配置要重覆執行的程式碼。

要注意的是，其中無論小括弧中的條件式或是大括弧中要執行的程式碼，無論是計數器變數的名稱或是條件式，都可以根據自己的需求進行彈性調整設計。

瞭解迴圈的語法原理，現在我們回到加法運算器，將其調整如下：


function clearText() {
    var inputs = document.querySelectorAll('.valuestyle');
    for (i = 0; i < 3; i++) {
        inputs[i].value = '';
    }
}

現在你可以重新瀏覽網頁，並且針對其進行操作，會得到相同的效果。

for 迴圈有兩種型式，如果執行的程式內容是針對陣列的內容進行讀取，可以利用此種型式的語法比較簡潔，語法格式如下：


for(key in a){

    //執行程式碼

}

小括弧的程式碼，意思是逐一取出a 陣列中的索引值key ，而在大括弧中，我們就可以進一步以底下的程式碼依序取出a 陣列中的元素，


a[key]

而當陣列中所有的key 被取出之後，這個迴圈就會結束。

由於加法運算器中，JavaScript 調用的 querySelectorAll() 回傳的是一個陣列，因此可以透過此語法來作存取，因此修改另外一個版本如下：


function clearText() {
    var inputs = document.querySelectorAll('.valuestyle');
    for (key in inputs) {
        inputs[key].value = '';
    }
}

其中將key 當作索引值傳入 inputs ，因此可以得到相同的效果。

除了這兩種型式的for 迴圈，JavaScript 還有其它型式的迴圈，後續的章節中將會有進一步的說明。

完成這一篇的討論，我們要跟 HTML5 最基礎的部份說再見了，當然，這其中還有相當多的細節要討論，不過由於 BLOG 線上貼文並不容易組織完整的課程知識，因此細節部份我們還會在往後開專屬的網頁進一發展這些課程內容，甚至以紙本出版，下一篇，我們很快的要進入 HTML5 的語意標籤，朝向成為一位合格的 HTML5 應用程式開發人員努力，請繼續跟上腳步吧。XD

回首頁