Monster JavaScript 紀錄一：project 1~8

小費計算/ 人名招呼 / 時間招呼/ 擲硬幣遊戲/ 猜拳遊戲/ 擲骰子比大小/ 音檔播放 /打字速度測驗

和 javascript30 類似的課程，約 50 個迷你projects 畫面設計上比較陽春一點，但是有不少JS有趣的運用，而且難度和複雜度會逐漸增加，很適合作為練習和學習的對象。另外講師滿認真的會整理課程的pdf筆記，在此紀錄一些語法和技巧。

課程來源 → JavaScript 50+ projects and applications Monster JavaScript

1. Tip calculator

簡易小費計算機，獲取 input 的值並進行運算、顯示於畫面上。

• 使用 toFixed() 與 Math.round()取小數後第幾位

tip = cost*.15.toFixed(2)

2. Welcome messages Customized JavaScript messages

輸入使用者姓名並顯示姓名的招呼語，與小費計算機一樣的概念。

3. Dynamically changing by time welcome message

根據不同的時間產生不同的樣式與文字招呼訊息。

• 使用 setAttribute 創建新的屬性樣式，另有 getAttribute 和removeAttribute 的延伸運用。

output.setAttribute(“style”,”width: 200px;height: 100px;color: white;text-align: center;”)

• new Date() 獲取時間

const date = new Date();
let cur = date.getHours();

• 選取 dom 後運用.style 改變既有樣式

output.style.backgroundColor = “black”

4. Coin Toss Application -heads or tails

擲硬幣遊戲，若與電腦相同則使用者勝利，不同則反之。

• 使用陣列集中管理性質相近的多項數值，很基本但時常忘記。

const score = [0, 0]; //使用者與電腦的初始分數

• 使用 querySelectorAll 大量處理同一動作（例如監聽），再利用 e.target之類的方式取得 textContent 或 dataset 等個別化的資料

document.querySelectorAll(‘button’)
btns.forEach(btn => btn.addEventListener(‘click’, toss))
let playGuess = e.target.textContent;

• 取亂數與對應選項的方法：設定好選項陣列，並使用 Math.random() 取得0=~<1的數值，乘上陣列長度，再用 Math.floor() 去掉小數。

const coinArray = [‘Heads’, “Tails”]
let compterToss = Math.floor(Math.random() * 2); // 得到0或1的數值
let compterGuess = coinArray[compterToss]
 // 隨機取coinArray[0]或coinArray[1]

5. Rock Paper Scissors Game

剪刀石頭布

• 取亂數與對應選項的另一個方法：利用亂數的範圍取選項。

let computerSelection = Math.random();
if (computerSelection < 0.34) {
 computerSelection = “Rock”
 } else if (computerSelection <= 0.67) {
 computerSelection = “Paper”
 } else {
 computerSelection = “Scissors”
 };

6. Ultimate Dice Game

擲骰子比大小。

• 骰子的圖像視覺化：將骰子切成九宮格，再依篩出來的點數填色

const dice = [
  [5], //一點
  [1, 9], //二點
  [1, 5, 9], //三點
  [1, 3, 7, 9], //四點
  [1, 3, 5, 7, 9], //五點
  [1, 3, 4, 6, 7, 9]]; //六點
//隨機擲出的點數
let diceArray = dice[num - 1];
//製出9個透明點
for (i = 1; i < 10; i++) {
let span = document.createElement("span");
span.setAttribute("class", "dot")
//使用 includes 判斷，而如果擲出該點就將骰子塗黑
if (diceArray.includes(i)) {
span.classList.add("black")}
div.appendChild(span)}

• 節點的操作：使用的是 appendChild 而非 innerHTML 直接覆蓋掉 tag 內的內容，所以要先移除舊的節點再出入新節點避免圖像一直增加。

JS常見DOM節點操作

//骰子結果 template 字串
let holder = builder(num)
//若節點已在就移除
if (el.children[0]) {
   el.children[0].remove()}
//並加入新節點
el.appendChild(holder);

7. Play audio files, sounds with JavaScript

音檔播放器。

• 用 JS 寫初始 html：createElement() 新增div、 setAttribute() 加入class屬性、textContent 新增文字、appendChild() 插入

// 初始設定
const myArray = ["lion", "cougar", "bark"];
document.addEventListener("DOMContentLoaded", init);
function init() {
  myArray.forEach(animal => {
// 製作 html 的按鈕
  let div = document.createElement(“div”);
  div.setAttribute(“class”, `animal ${animal}`)
  div.textContent = animal;
// 監聽
  div.addEventListener(“click”, function () {})
// 插入節點
  document.body.appendChild(div)
})};

• 音檔播放：new Audio() ，利用.play()播放，並有src, currentTime, duration, paused, muted,volum 等屬性供操作

let sound1 = new Audio(`sound/${name}.mp3`); //中間放路徑
sound1.play()

8. JavaScript Dynamic Typing Test

打字速度測驗，以中文而言大概是行不通的程度..

• 計算間格時間：new Date().getTime()/ Date.now() ，並相減，出來的時間會是毫秒，記得/1000

取得 timestamp 的方法

let date = new Date();
endTime = date.getTime();
startTime = date.getTime();
// 結果會是毫秒
let totalTime = ((endTime — startTime) / 1000);

• 比對兩個句子詞句是否相等

// str1是預設文字，str2是使用者輸入的
function compareWords(str1, str2) {
// 先將句子字串拆成陣列
let words1 = str1.split(“ “);
let words2 = str2.split(“ “);

// loop預設文字，將其index帶入輸入者的陣列。如果比對下是一樣的，就增加次數
words1.forEach((item, i) => {
  if (item === words2[i]) { }})}