---
tags: JS 直播班 - 2022 秋季班
---
###### tags: `簡單`

# 進階 DOM 操作
## 本章節我們要學什麼？

延續基礎 DOM 章節，本次將會考驗同學們完成整套具備實際功能、邏輯更為複雜的產品。

:::success
本章節專注在功能的邏輯實作，僅會提供最基礎的樣式與架構。歡迎同學自行延伸功能、樣式與創造有趣的內容！
:::
:::warning
本章節考驗同學對方法的靈活運用，以下是助教推薦的文章可一邊溫習一邊練習題目。

* [(上週章節) DOM 操作基礎](https://hackmd.io/BCGMk6yYSbWGQXwFZLqGvQ)
* [(Ray) 關於 JavaScript 陣列 20 種操作的方法](https://israynotarray.com/javascript/20190421/1216566123/)
* [(卡斯伯) JavaScript 陣列處理方法](https://www.casper.tw/javascript/2017/06/29/es6-native-array/)
* [(MDN)Object.prototype.hasOwnProperty()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)
* [(Javascript.info)Focus/blur 事件](https://zh.javascript.info/focus-blur)
* [(MDN)表單數據檢驗](https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Form_validation)
:::

## 題目一：無障礙彈跳視窗

<img loading="lazy" src="https://i.imgur.com/ifTpZUJ.gif">

### 請達成以下功能：
- [ ] **(打開) > 當點擊「彈跳視窗按鈕」，打開彈跳視窗**
- [ ] 將焦點 (focus) 放在「OK 按鈕」上，方便鍵盤用戶選取視窗內的選項
- [ ] 避免使用者在打開視窗的狀況下頁面是可滑動的
- [ ] 點擊彈跳視窗以外的區域或點選 OK 來關閉

- [ ] **(關閉) > 當按下「ESC」或點擊「OK 按鈕」，關閉彈跳視窗**
- [ ] 將焦點放在「打開彈跳視窗」按鈕上

### 參考資源
:::spoiler HTML

<div role="dialog" aria-labelledby="dialog_title">
  <div>
    <h2>Dialog Example</h2>
    <p>Here is some demo text</p>
    <button>OK</button>
  </div>
</div>

<button>打開彈跳視窗</button>

:::

:::spoiler CSS

*, *::before, *::after {
  box-sizing: border-box;
}

img {
  display: block;
}

body {
  background: teal;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

button:focus, button:hover {
  outline: 2px solid blue;
  outline-offset: 2px;
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.dialog::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: -1;
}

.dialog--active {
  display: flex;
}

.dialog__window {
  background-color: lightgray;
  padding: 1rem;
}

:::

## 題目二：書籍蒐尋器
<img loading="lazy" src="https://i.imgur.com/BmdPlQl.gif">

### 請達成以下功能：
- [ ] (加載網頁時) > 將預備好的資料注入在網頁上，呈現：「書名 - 介紹」的清單。
- [ ] (用戶輸入時) > 從預備好的資料中搜尋，並過濾所有清單。

### 參考資料
:::spoiler HTML

<form autocomplete="off">
  <div>
    <input type="text" name="searchBook" placeholder="搜尋書籍" required>
    <ul>
    </ul>
  </div>
</form>

<ul>
</ul>

:::

## 題目三：回饋跑馬燈
<img loading="lazy" src="https://i.imgur.com/ZBTpcnW.gif">

### 請達成以下功能：
- [ ] (加載網頁時) > 將預備好的資料注入在網頁上，卡片內容有：圖片、標題、內文。
- [ ] (點擊上一步) > 卡片向前。
- [ ] (點擊下一步) > 卡片向後。
- [ ] (其他) > 當到資料頭、尾便不能再往前、往後
- [ ] (其他) > 請嘗試抽離寫死的邏輯，將「最大卡片數量」與「初始卡片位置」改為可輸入的變數。

### 參考資料
:::info
圖片使用假圖即可，推薦 [Lorem Picsum](https://picsum.photos/)
:::
:::spoiler HTML

<div>
  <div></div>
  <div>
    <button>prev</button>
    <button>next</button>
  </div>
</div>

:::

## 題目四：步驟表單
<img loading="lazy" src="https://i.imgur.com/AUtq91s.gif">

### 請達成以下功能：
- [ ] (加載網頁時) > 將預備好的資料打印在網頁上，呈現：「書名 - 介紹」的清單。
- [ ] (點擊上一步) > 回到上個步驟
- [ ] (點擊下一步) > 驗證後到下個步驟，如是最終步驟，打印提交事件至終端(會以 console.log 呈現在終端機)。
- [ ] (驗證) > 當點擊下一步時驗證當前步驟中的輸入內容是否都和規，如不合規，對焦於不和規的輸入上，並且更改其樣式屬性提醒用戶。

### 參考資料

:::spoiler HTML

<h1>步驟表單</h1>

<form>
  <!-- 01 -->
  <div>
    <h2>步驟一</h2>
    <hr>
    <label>
      電子信箱
      <input type="email" placeholder="請輸入電子信箱" required>
    </label>
    <label>
      密碼
      <input type="password" placeholder="請輸入密碼" required>
    </label>
    <div>
      <button type="button">下一步</button>
    </div>
  </div>

  <!-- 02 -->
  <div>
    <h2>步驟二</h2>
    <hr>
    <label>
      地址
      <input type="text" placeholder="請輸入您的地址" required>
    </label>
    <label>
      城市
      <input type="text" placeholder="請輸入您的城市" required>
    </label>
    <div>
      <button type="button">上一步</button>
      <button type="button">下一步</button>
    </div>
  </div>

  <!-- 03 -->
  <div>
    <h2>步驟三</h2>
    <hr>
    <label>
      名稱
      <input type="text" placeholder="請輸入您的名稱" required>
    </label>
    <label>
      電話
      <input type="phone" placeholder="請輸入您的電話" required>
    </label>
    <div>
      <button type="button" data-prev>上一步</button>
      <button type="button" data-next>下一步</button>
    </div>

  </div>
</form>

:::

## 題目五：心理測驗
<img loading="lazy" src="https://i.imgur.com/Kl4rNo4.gif">

### 請達成以下功能：
- [ ] (開始測驗) > 進入測驗，隱藏介紹卡片，從資料中生成問題與選項
- [ ] (生成問題) > 顯示目前問題長度與目前位置
- [ ] (提交完最後一個問題) > 顯示詢問姓名問題
- [ ] (提交完姓名) > 打印出問題蒐集出來的資料
- [ ] (點擊選項或單選框) > 進入下個步驟並記錄此筆資料(種類、分數)

### 參考資料
:::spoiler HTML

<!-- Intro -->
<div>
  <h1>網頁性格測驗</h1>
  <p>製作網頁是一個多種領域發揮的舞台，助教製作了一款簡易的網頁性格測驗，來測試看看同學們對網頁不同領域的喜好程度～</p>
  <button>開始測驗～</button>
</div>

<!-- Test -->
<div></div>

<!-- Result -->
<div></div>

:::

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


## 提醒區
:::warning
本次作業邏輯更為複雜，如有疑問歡迎到 [每日活動-進階 DOM 操作](https://discord.com/channels/801807326054055996/1038981110937440299) 中發問，助教會上去解惑～
單一作業可以完成就上繳，分為五個 CodePen 來提交，不用塞在同個專案內。
:::

## 作業提交等級

* LV1：解出 5 題，並提交 CodePen
* LV2：設計一個 hackmd，嘗試自己設計 5 題
* LV3：嘗試去做其他學生寫的題目，並 tag 學員回報給他，感謝他的命題，讓自己觀念更好

回報區
---

| Discord | LV | CodePen / 答案 |
|:-----------------------:|:---:|:--------------------------------------------------------------------------------:|
| Rice#8043 | LV1 | [彈跳視窗](https://codepen.io/riecball/pen/rNKxyBx?editors=0111)/[書籍蒐尋](https://codepen.io/riecball/pen/qBKbrLY?editors=1100)/[回饋跑馬燈](https://codepen.io/riecball/pen/QWxyWEB)/[步驟表單](https://codepen.io/riecball/pen/gOKPVNJ?editors=1011)/[心理測驗](https://codepen.io/riecball/pen/YzvyjqN?editors=1011) |
|AuroraC#6539|LV1|[彈跳視窗](https://codepen.io/AuroraC/pen/MWXjLQy)/[書本查詢](https://codepen.io/AuroraC/pen/KKegOGb)/[回饋跑馬燈](https://codepen.io/AuroraC/pen/dyKOJap)/ |
|JackC#0411|LV1|[彈跳視窗](https://codepen.io/key0329/pen/YzvGdjZ)/[書籍蒐尋](https://codepen.io/key0329/pen/abKmMGQ)|
|hannah#2224|LV1|[彈跳視窗](https://codepen.io/hangineer/pen/yLEarXQ?editors=1111)/|
|無名#6427|LV1|[彈跳視窗](https://codepen.io/Nomoney/pen/zYaKJjY)/[書本查詢](https://codepen.io/Nomoney/pen/ExRgdMb)/[回饋跑馬燈](https://codepen.io/Nomoney/pen/jOKMRrx)/[步驟表單](https://codepen.io/Nomoney/pen/qBKaePd)/[心理測驗](https://codepen.io/Nomoney/pen/RwJoNyV)|
|KuoMin#4931|LV1|[彈跳視窗](https://codepen.io/KuoMin/pen/vYrXQRB)/[書籍蒐尋](https://codepen.io/KuoMin/pen/dyKOVGW)/[回饋跑馬燈](https://codepen.io/KuoMin/pen/ExRWaeM)
|圈圈#4060|LV1|[彈跳視窗](https://codepen.io/wjejfczn-the-bold/pen/dyKOYXQ)/[圖書查詢器](https://codepen.io/wjejfczn-the-bold/pen/zYaKMGp)/[回饋跑馬燈](https://codepen.io/wjejfczn-the-bold/pen/jOKVrwy)/[步驟表單](https://codepen.io/wjejfczn-the-bold/pen/yLEVpej)/[心理測驗](https://codepen.io/wjejfczn-the-bold/pen/yLEVwPM)|
|薯餅#3581|LV1|[彈跳視窗](https://codepen.io/ColdingPoTaTo/pen/ExRNwvg)/[書籍搜尋](https://codepen.io/ColdingPoTaTo/pen/JjZbrZy)|
|jimmyFang#9575|LV1|[彈跳視窗](https://codepen.io/pohxiqqo/pen/MWXbqvP?editors=0010)/[書籍搜尋](https://codepen.io/pohxiqqo/pen/BaVpdbw?editors=1011)/[回饋跑馬燈](https://codepen.io/pohxiqqo/pen/QWxpwaM)/[步驟表單](https://codepen.io/pohxiqqo/pen/VwdpLzP)/[心理測驗](https://codepen.io/pohxiqqo/pen/bGKqdJO)|
|yawun#0042|LV1|[彈跳視窗](https://codepen.io/monicalin/pen/NWzREjR)/[書籍搜尋](https://codepen.io/monicalin/pen/GRGjwLq)/[回饋跑馬燈](https://codepen.io/monicalin/pen/RwJGvWQ)/[步驟表單](https://codepen.io/monicalin/pen/Vwdmwmg)/[心理測驗](https://codepen.io/monicalin/pen/NWzbqJW)|
|albee#9121|LV1|[彈跳視窗](https://codepen.io/albee-chang/pen/XWYNGZV?editors=1011)/[書籍搜尋](https://codepen.io/albee-chang/pen/WNyomzx?editors=1011)/[回饋跑馬燈](https://codepen.io/albee-chang/pen/oNyBaXx?editors=0011)/[步驟表單](https://codepen.io/albee-chang/pen/bGKWVKP?editors=1011)/|
|suihsilan#9485|LV1|[彈跳視窗](https://codepen.io/suihsilan/pen/YzvpvWx)/|
|kevin#6131|LV1|[彈跳視窗](https://codepen.io/xlqjezvc-the-encoder/pen/LYrbdOX?editors=1011)/[書籍蒐尋](https://codepen.io/xlqjezvc-the-encoder/pen/MWXpJPJ?editors=1011)/ [回饋跑馬燈](https://codepen.io/xlqjezvc-the-encoder/pen/MWXpxyY?editors=1111)/[步驟表單](https://codepen.io/xlqjezvc-the-encoder/pen/rNKmweV?editors=1111)|
|柔柔#1716|Lv1|[彈跳視窗](https://codepen.io/rouchen/pen/qBKqVML)/[書籍蒐尋](https://codepen.io/rouchen/pen/bGKBarY)/[回饋跑馬燈](https://codepen.io/rouchen/pen/NWzbYEb)/[步驟表單](https://codepen.io/rouchen/pen/OJEbYRE)/[心理測驗](https://codepen.io/rouchen/pen/XWYpMGw)|
|charlottelee849#0366|LV1|[彈跳視窗](https://codepen.io/charlotte-lee/pen/BaVQxKW?editors=0010)/[書籍搜尋](https://codepen.io/charlotte-lee/pen/vYrxEbG?editors=0011)/[回饋跑馬燈](https://codepen.io/charlotte-lee/pen/LYrWVmb?editors=0010)/[步驟表單](https://codepen.io/charlotte-lee/pen/xxzqQzX?editors=0011)
|xherobruce#6825|LV1|[書本查詢](https://codepen.io/winwinbruce/pen/rNKjqeE)|
|Amberhh#2465|LV1|[彈跳視窗](https://codepen.io/Amberhh/pen/YzvGdOV)/[書籍搜尋](https://codepen.io/Amberhh/pen/YzvGBoR?editors=0011)/[回饋跑馬燈](https://codepen.io/Amberhh/pen/JjZbrrN)/[步驟表單](https://codepen.io/Amberhh/pen/zYaNNod)/[心理測驗](https://codepen.io/Amberhh/pen/dyKvyyZ) |
|RJRS#9430|LV0|[彈跳視窗](https://codepen.io/RJRS/pen/oNyZvKG)/[書籍搜尋](https://codepen.io/RJRS/pen/WNyparM)|
|Sentiments#4883|lv1| [彈跳視窗](https://codepen.io/Sentiments/pen/qBKrmVZ)/[書本查詢](https://codepen.io/Sentiments/pen/MWXpmvR)/[回饋跑馬燈](https://codepen.io/Sentiments/pen/PoapmmO)/[步驟表單](https://codepen.io/Sentiments/pen/ExRWmNY?editors=1111) /[心理測驗](https://codepen.io/Sentiments/pen/wvXJdwr)|
| m_m#5493 | Lv1 | [彈跳視窗](https://codepen.io/minnn7716/pen/poKejpy)/[書籍搜尋](https://codepen.io/minnn7716/pen/XWYMyBR)/[回饋跑馬燈](https://codepen.io/minnn7716/pen/VwdpRyx)/[步驟表單](https://codepen.io/minnn7716/pen/NWBqwVj)/[心理測驗](https://codepen.io/minnn7716/pen/yLqYjyP) |
|WEI_RIO#9342|Lv1|[彈跳視窗](https://codepen.io/wei_wu/pen/XWYjOaN?editors=1011)/[書籍蒐尋](https://codepen.io/wei_wu/pen/XWYNqWx)/[回饋跑馬燈](https://codepen.io/wei_wu/pen/NWzdRey)/[步驟表單](https://codepen.io/wei_wu/pen/NWzdpbj)/[心理測驗](https://codepen.io/wei_wu/pen/xxzqrqr)|
|RyanTsai#8906|Lv1|[彈跳視窗](https://codepen.io/linlaose/pen/OJEpYEQ) / [書籍搜尋器](https://codepen.io/linlaose/pen/MWXmVmW)
|mandylai#4055|LV1|[彈跳視窗](https://codepen.io/mandy-lai-2/pen/oNyzQZm)/[書籍蒐尋器](https://codepen.io/mandy-lai-2/pen/wvXzZdp)/[回饋跑馬燈](https://codepen.io/mandy-lai-2/pen/GRGNGVz)/[步驟表單](https://codepen.io/mandy-lai-2/pen/poKRwpN)/[心理測驗](https://codepen.io/mandy-lai-2/pen/bGKqReJ)|
|FiReBrO#0557|LV1|[彈跳視窗](https://codepen.io/firebro42/details/xxzdXyG)/[書籍蒐尋器](https://codepen.io/firebro42/pen/NWzjJWL)|
|Chloe#5422|LV1|[彈跳視窗](https://codepen.io/Ironchloe/pen/XWYRwMo)|
|kenki100#0068|LV1|[彈跳視窗](https://codepen.io/ken100/pen/gOKLOVw)/[書籍蒐尋器](https://codepen.io/ken100/pen/QWxGmGN)/[回饋跑馬燈](https://codepen.io/ken100/pen/vYryOWj)/[步驟表單](https://codepen.io/ken100/pen/YzvpRrg)/[心理測驗](https://codepen.io/ken100/pen/NWzpNmo)|
|yen#5757|LV1|[彈跳視窗](https://codepen.io/TZU-HUANG-YEN/pen/ZERyWgZ?editors=0010)/[書籍蒐尋器](https://codepen.io/TZU-HUANG-YEN/pen/XWYaewO)/[回饋跑馬燈](https://codepen.io/TZU-HUANG-YEN/pen/zYaWaGO?editors=0010)/[步驟表單]/[心理測驗]|
|Paul#7426|LV1|[彈跳視窗](https://codepen.io/paul-1997/pen/NWzMZvZ?editors=1011)/[書籍搜尋器](https://codepen.io/paul-1997/pen/qBKYzeK?editors=1111)/[回饋跑馬燈](https://codepen.io/paul-1997/pen/oNydKeV?editors=1010)/[步驟表單](https://codepen.io/paul-1997/pen/poKKvxd?editors=1011)/[心理測驗](https://codepen.io/paul-1997/pen/JjZBYRK?editors=1011)|
| LHchien33#6232 |LV1|[彈跳視窗](https://codepen.io/lin_chien/pen/ExREKVj)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|LV1|[彈跳視窗](https://codepen.io/Connie-Chien/pen/QWxvYWM)/[書籍搜尋器](https://codepen.io/Connie-Chien/pen/ZERKZKK)/[回饋跑馬燈](https://codepen.io/Connie-Chien/pen/RwJEbWB)/[步驟表單](https://codepen.io/Connie-Chien/pen/GRGPBbj)/[心理測驗](https://codepen.io/Connie-Chien/pen/xxzMrQm)|
|Kimi #9563 |LV1|[第六週刷題1-5](https://codepen.io/kimihu91/pen/wvXJOGR)|
|蓁心 #6229 |LV1|[彈跳視窗](https://codepen.io/tlorfrnl-the-typescripter/pen/ExpyjQB?editors=1010)/[書籍蒐尋器](https://codepen.io/tlorfrnl-the-typescripter/pen/mdjEebM?editors=0011)/[回饋跑馬燈](https://codepen.io/tlorfrnl-the-typescripter/pen/gOjMWpP)|