經過昨天的範例分析應該也能較為熟悉JavaScript的使用方式，今天除了抓取網頁元素並提供修改外，同時也會應用for迴圈的部分，本日要說明的範例為九九乘法表。

透過for迴圈功能製作九九乘法表

相信在亞洲國家出生的孩子，應該都在小學時背過九九乘法表吧？九九乘法表是從2至9相乘之後取得計算結果的彙整，每一行算式都有被乘數與乘數還有計算結果（乘積）三個部分，簡單可以簡化成以下算式：

被乘數(A)*乘數(B)=計算結果（乘積）(A*B)

任務一：處理被乘數(A)

九九乘法表中，被乘數的範圍只有從2至9，然後從2開始逐1計算。因此我們可以開始for迴圈撰寫JavaScript的語法。首先我們先在HTML製造一個乘法的div：

<div class="multi"></div>

沒有看錯，就只需要創造一個div，之後就透過JavaScript將計算結果倒進去這個div中。接著要開始透過JavaScript語法製作被乘數的迴圈，相關說明已經加在備註中：

const cardContainer = document.querySelector('.multi'); 
//製造一個變數cardContaniner，透過篩選器抓取multi這個class

for (let i = 2; i < 10; i++) {
  cardContainer.innerHTML += multiCardHTML(i);
}
//創造一個for迴圈，初始條件為i=2，表示i從2開始運作；
//判斷條件為i<10，迴圈會執行到i不符合條件為止；
//i++為更新條件，每次迴圈運作會+1開始運算。
//cardContainer.innerHTML += multiCardHTML(i);為要運作的程式碼，每一個迴圈都會產生cardContainer.innerHTML + multiCardHTML(i); 的結果，就是會將該結果加在multi這個div中，但這邊尚未定義multiCardHTML()這個程式。

任務二：將計算結果(AxB)呈現在網頁中，並處理乘數(B)

由於在處理被乘數(A)時，有抓了一個function：multiCardHTML(i)，這邊就要開始定義這個multiCardHTML(i)：

function multiCardHTML (num) {
  rawHTML = `<div class="card"><div class="num-container"><span class="number-title">${num}</span>`;
// 函式multiCardHTML有一個參數num，抓取被乘數部份的i，就是這邊的num為任務一中的i；
// rawHTML 為一些HTML語法的內容。

  for (let i = 1; i < 10; i++) {
    rawHTML += `<span>${num} x ${i} = ${num * i}</span>`;
  }
// for迴圈，該迴圈初始條件為1；判斷條件為i<10；更新條件為i++，每次迴圈運作會自動+1；程式運作截至目前為止會產生rawHTML+ <span>${num} x ${i} = ${num * i}</span>的結果。
 
     rawHTML += '</div></div>'; 
// 程式會再加上</div></div>，
每跑一次迴圈會產生<div class="card"><div class="num-container"><span class="number-title">${num}</span><span>${num} x ${i} = ${num * i}</span></div></div>加到HTML之中。

    return rawHTML;
// 回到第一個rawHTML=再次運作。
}

for迴圈的基本架構

從上面的範例不難得知，for迴圈大概可以分成三個部份，可以簡單理解成以下結構：

for( 初始值/初始條件; 條件判斷; 一次結束時的變化){
	要跑的程式
}

該範例透過JavaScript做到的事

其實整個範例就只是透過JavaScript抓取網頁中的指定位置，然後在指定位置加上HTML的語法而已，同時有for迴圈運算結果的HTML語法也在其中。詳情可參考以下範例連結：
https://codepen.io/hamagawa76/pen/WNJjXgJ

是不是很簡單！明天會簡要說明常見的JavaScript的文件物件模型(DOM)與應用，我們明天見囉！