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

4 min read

這是由六角學院在 Udemy 推出的:JavaScript 題目篇 - 新手 JS 地下城,所出的題目。裡面有各種有趣的題型可以練習,如果是剛接觸前端的捧油們可以在這裡面找一些題目來練練手。也可以在練習過後爬爬其他人所分享的製作方法,多方比較過後一定會有所成長的!

題目說明

  • 【特定技術】需使用 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 就讓各位捧油們當作參考囉!有任何指教都歡迎在下方留言告訴我。

請我喝杯咖啡

如果這裡的內容有幫助到你的話,一杯咖啡就是對我最大的鼓勵。

請我喝杯咖啡