新手 JS 地下城 - 1F 九九乘法表 Multiplication Chart
這是由六角學院在 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 就讓各位捧油們當作參考囉!有任何指教都歡迎在下方留言告訴我。
請我喝杯咖啡
如果這裡的內容有幫助到你的話,一杯咖啡就是對我最大的鼓勵。