新手 JS 地下城 - 1F 九九乘法表 Multiplication Chart

題目說明

• 【特定技術】需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印出。
• 需使用 HTML、CSS、JS 技術
• 介面需與設計稿一致

HTML / JavaScript

我給自己一點點小小的限制，一來是為了讓自己對 js 的使用更熟悉，一種是...自虐：

• 盡量挑戰使用 Vanilla JS
• 盡可能不用 ES6 的方法

HTML 部分

<main class="multiplyBox">
 <section class="multiplyTitle">
  <div class="hr"></div>
  <h1>
   <div class="title">九九乘法表</div>
   <div class="subTitle">MULTIPLICATION CHART</div>
  </h1>
  <div class="hr"></div>
 </section>
 <section class="multiplyItem" data-num="2" data-star="1" data-end="9"></section>
 <section class="multiplyItem" data-num="3" data-star="1" data-end="9"></section>
 <section class="multiplyItem" data-num="4" data-star="1" data-end="9"></section>
 <section class="multiplyItem" data-num="5" data-star="1" data-end="9"></section>
 <section class="multiplyItem" data-num="6" data-star="1" data-end="9"></section>
 <section class="multiplyItem" data-num="7" data-star="1" data-end="9"></section>
 <section class="multiplyItem" data-num="8" data-star="1" data-end="9"></section>
 <section class="multiplyItem" data-num="9" data-star="1" data-end="9"></section>
</main>

JS 部分

(function () {
 'use strict';
 var item = Array.apply(null, document.getElementsByClassName('multiplyItem'));
 for (var i = 0, l = item.length; i < l; i++){
  var obj = item[i],
   title = document.createElement('h2'),
   itemBox = document.createElement('div'),
   multiplicand = obj.dataset.num,
   numStar = obj.dataset.star,
   numEnd = obj.dataset.end;
  
  itemBox.classList.add('itemBox');
  title.innerText = multiplicand;
  itemBox.appendChild(title);

  for (; numStar <= numEnd; numStar++){
   var listItem = document.createElement('div');
   listItem.classList.add('listItem');
   listItem.innerText = multiplicand + '×' + numStar + '=' + multiplicand*numStar;
   itemBox.appendChild(listItem);
  }

  obj.appendChild(itemBox);
 };
})()

這邊大概兩件事提出來分享

for 迴圈

for (; numStar <= numEnd; numStar++){
 /* code */
}

for 迴圈很多教學都會這樣寫：for (var i = 0 ; i < j; i++)，但後來更傾向這樣理解：for ([初始表達式]; [條件式]; [遞增表達式])。

• 初始表達式 迴圈的初始化，可省略，通常會在這裡宣告變數，但因為該範例在一開始就設定好變數，所以就不再另外 var 一個變數了。
• 條件式 判斷裡面的條件為 true 才執行，直到為 false 結束。如果不設定則默認為 true
• 遞增表達式 每執行一圈迴圈，就執行一次。

陣列(array)與類陣列(array-like)

document.getElementsByClassName('multiplyItem')

document.getElementsByClassName('multiplyItem') 所取得的資料行別為 HTMLCollection 雖然跟陣列 (Array) 很像，但並沒有支援像是 forEach 等功能，所以在處裡上會用 Array.apply(null, document.getElementsByClassName('multiplyItem')) 的方式將其轉換為陣列在進行操作。

類似的問題也出現在 document.querySelectorAll 裡面，他取出來為 NodeList，一樣有部分陣列的功能不支援，雖然 NodeList 在 Chrome 上支援 forEach，但在 ie11 中 NodeList 的原型鍊中就沒有該功能，使用上要留意一下。

結語

css 部分就沒有特別放上來，可以到 github 上參考，連結我就放在這裡囉： https://mini-ghost.github.io/JSunderground/01/public/

以上就是針對 新手 JS 地下城 - 1F 九九乘法表 Multiplication Chart 的分享。有興趣的可以到 Udemy 找來看看，會有蠻多收穫的。

九九乘法表 Multiplication Chart 這個題目作為一系列新手題目的熱身再適合不過了。所謂迴圈寫得好，程式沒煩惱！掌握迴圈的應用基本上就掌握了一半以上的程式基礎了。所以上面的 JavaScript Code 就讓各位捧油們當作參考囉！有任何指教都歡迎在下方留言告訴我。