---
robots: noindex, nofollow
tags: JavaScript
---

# JavaScript 基礎課程 (8)

## 上週問題回答
- Go Live 之後看不到畫面
- 刪除以下檔案：
- `/javascript-basics/src/index.html`
- `/javascript-basics/src/styles.css`
- `/javascript-basics/src/scripts.js`（可刪可不刪）
- 改動元素順序對選擇元素的影響？
- 為什麼要特地用 JavaScript 隱藏元素，而不是直接在 HTML 隱藏起來？

## 上次上課提要
- 操縱 HTML
- `document.querySelector()`
- `document.querySelectorAll()`

---

### Truthy & Falsy values（真值、假值）
當值被放到像是 if 的小括號這種判斷 `true` 或 `false` 的地方判斷時，JavaScript 會自動幫你把傳入的值轉換成 `boolean`。被自動轉換成 `true` 的值稱為 truthy values，反之被轉換成 `false` 的值稱為 falsy values。

#### Falsy values
https://developer.mozilla.org/en-US/docs/Glossary/Falsy

#### Truthy values
不是 falsy 的都是 truthy。

### 知道這個對我們有什麼用？
可簡化一些寫法，某些時候能讓程式碼更好讀。例如：

function callName(name) {
  // Before
  if (name !== undefined) {
    console.log(name);
  }

  // After
  if (name) {
    console.log(name);
  }
}

callName('John'); // John
callName();

let element = document.querySelector('.header');

// Before
if (element !== null) {
  element.style.display = 'none';
}

// After
if (element) {
  element.style.display = 'none';
}

### 缺點
某些情況要特別小心，例如牽扯到數字、空字串、物件屬性時：

function countMoney(person) {
  if (person.name && person.money) {
    console.log(`${person.name}有 ${person.money} 元`);
  }
}

let ming = {
  name: '小明',
  money: 1000,
};
countMoney(ming); // '小明有 1000 元'

let arthur = {
  name: '亞瑟'
  money: 0,
};
countMoney(arthur); // ❓

let unknownUser = {
  name: '',
  money: 99999,
};
countMoney(unknownUser); // ❓

---

## 小組討論時間
請各組花些時間到[這個網站](https://which-one-is-correct.netlify.app)玩玩看，討論並記錄：
- 你們觀察到哪些功能？
- 請按照你們覺得各功能對這個網站的重要程度依序排列（最重要 -> 最不重要）
- 你們還會想加上哪些功能？

P.S. 盡量把功能切小一點

討論完後各組推派一人分享。

---

### 第一組

#### 發現功能
1. 點擊按鈕（滑鼠移過有hover）
2. 跳窗顯示選項錯誤（點擊旁邊或ok的按鈕可讓跳窗回到hidden的狀態）
3. 按過按鈕不可以再按（按鍵呈現disable狀態）
4. 再次點擊按鈕後跳窗顯示選項正確
5. 點擊正確按鈕後 其他錯誤按鍵還能再點擊
6. 有文字提示使用者要幹嘛
7. 靜止的浮標跟錯誤按鈕的顏色變灰同時出現

#### 重要功能
1. 隨機生成正確和錯誤按鈕
2. 彈出正確或錯誤視窗
3. 有文字提示使用者要幹嘛

#### 不重要功能
1. 點擊正確按鈕後 其他錯誤按鍵還能再點擊
2. 靜止的浮標跟錯誤按鈕的顏色變灰同時出現

#### 想增加的功能
1. 重整頁面（再選一輪）的按鈕 - 刷新按鈕
2. 點擊正確按鈕後其他按鍵不可以再點擊
3. 點擊正確/錯誤有聲音回饋
4. 點擊到正確按鈕後可以告訴使用者幸運指數
5. 錯誤按鈕按過不用Disable
6. 成功找到之後其他按鈕可以Disable

### 第二組

#### 發現功能
- 變換每次正確按鈕的位置
- 每次按下按鈕會有跳窗
- 錯誤的選項按過就不能重複點選
- 錯誤按鈕顏色會變淡
- 跳窗可以按「ok」也可以按灰階畫面來關掉

#### 最重要 >>> 最不重要
- 按下按鈕會有跳窗（最重要）
- 錯誤的選項按過後會變淡且不能重複點選
- 跳窗可以按「ok」也可以按灰階畫面來關掉
- 重新整理會重設正確的選項（最不重要）

#### 想增加的功能
- 重新整理按鈕
- 按鈕變可愛
- 把button的字拿掉，換成符號或選項

### 第三組

#### 發現功能
1. 顯示資訊（題目、選項）
2. 提供點選
3. 會跳出提示框顯示正確與否
4. 錯誤的選項不能重複點選（正確的可以重複點選）
5. 每局隨機選定四個按鈕中哪個按鈕為正確
6. 點過的會用不同顏色顯示

#### 功能重要程度排序
選項內容承上，(2)>(1)>(3)>(6)>(5)>(4)

#### 想新增的功能
可新增：主題（非純粹的功能）、獎勵（積分或排名）、重新啟動、註冊累積分數、點錯的按鈕以顏色表示，不要以彈窗、增加圖示、可以自由設定要幾個選項等等

### 第四組

#### 觀察到的功能
1. 可以互動的按鈕
2. 跳出視窗
3. 滑鼠碰到按鈕時會變色hover
4. 選擇錯誤的按鈕顏色變淡且不能再點選
5. 隨機的正確答案
6. Which one is correct?

#### 重要程度
(1)>(2)>(5)>(6)>(3)>(4)
原因:主要互動功能>判斷對否>持續性>理解功能>知道按鈕可使用>知道錯誤答案

#### 可以新增的功能
-充新整理的按鈕replay
-音效
-計分功能
-答案後成功or失敗動態圖案(獲得成就感)
-動態背景增加趣味性

### 第五組

#### 發現功能
A. 點擊
B. HOVER
C. 彈跳視窗
D. 如果正確之後，還可以一直點按鈕。
E. 如果出現OOPS，按鈕就不能點。
F. 重整後，正確的按鈕會隨機變換。
G. 關閉彈出式視窗。
H. 提示功能，把游標放在問號會出現一個提示
(根據正確答案會出現不同的提示)

#### 重要程度
(A-C-G-B-H-F-E-D)
最重要-點擊跳出彈窗。
最不重要-正確之後還可以一直點。

#### 新增功能
- 點到對的可以再玩一次。
- 計算點對幾次的功能。

---

## 監聽事件
使用者在瀏覽網頁時會觸發很多事件，例如滑鼠點擊、鍵盤點擊、視窗大小改變、畫面捲動、網頁載入完成⋯⋯等都會觸發事件。我們可以用 JavaScript 監聽某種事件，之後當監聽的事件觸發時，我們就能做出對應的動作。

### 綁定監聽事件的語法

element.addEventListener('eventName', functionToCall);

## 監聽滑鼠點擊事件

// 定義要做的事
function tellMeWhenUserClicks() {
  console.log('The user just clicked!')
}

// 先選到我要的元素
let button = document.querySelector('.button');

if (button) {
  // 幫它加上監聽器
  button.addEventListener('click', tellMeWhenUserClicks);
}

https://developer.mozilla.org/zh-TW/docs/Web/API/Element/click_event

## 作業
:::danger
期限：**5/30（週日）23:59**
:::

### 1. 程式練習
- 完成下述進度：
- 只留第一個按鈕，其他註解掉
- 第一個按鈕按下後，跳出彈窗且顯示卡片（正確卡或錯誤卡皆可）
- 單獨將 `which-one-is-correct` 資料夾上傳到 Netlify 後，繳交網站連結到 [monday.com](https://gsstw.monday.com/boards/1074623203/)
- 此為小組作業，鼓勵每個人都寫，但小組裡只要任一人有交即可

### 2. 透過 Slack 發問
- 可問：
- 上課的內容
- 跟 JavaScript 有關的問題
- 看不懂的 ESLint 錯誤訊息
- 寫作業或課堂練習時遇到的困難
- 程式類的問題請附上程式碼或錯誤訊息
- 行數少的話，直接用 Slack 的 code block 功能附上
- 行數多的話請貼到 CodePen 再附上連結
- 跟別人問一樣的問題也沒關係，總之習慣發問就對了

---

<div style="display: flex; justify-content: space-between;">
<a href="https://hackmd.io/@gsscsid/javascript-basics-7">⬅️&nbsp;JavaScript 基礎入門課程 (7)</a>
</div>