###### tags: `學期 2-1` `week3`
[TOC]
# DOM 基礎元素上手工作坊

## Before Webinar
### 報名 Week 3 DOM 基礎元素上手工作坊！

#### 線上工作坊是什麼

在線上工作坊中，除了助教講解概念、帶領同學打造小程式，你也會和助教以及同學們一起動手練習和討論。透過工作坊設計的活動，你將與同學們一起練習，協助你應用、激盪、內化你的學習。

現在就登記線上工作坊，和同學們一起學習吧！

#### Week 3 DOM 基礎元素上手工作坊資訊

<div style="background: #ececec; padding: 15px; border-radius: 10px; font-weight: bold; width:fit-content;">
<p>
• 活動時間：02/23 (四) 19:30 - 21:00 <br>
• 與會連結：<a href="https://zoom.us/j/84240309146" target="_blank">https://zoom.us/j/84240309146</a><br>
• 會議密碼：464049<br>
<span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，避免無法加入會議</span>
</p>
<a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=MTcwdmN2b211bjJ2ZzhvMDR0ZDRsZGltc3IgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>

透過這次的線上工作坊，你將：

* 跟著助教練習在不改動 HTML 的情況下，如何運用 DOM 元素操作、修改畫面
* 與同學一起挑戰用 DOM 操作，來玩井字遊戲

<img style="width:80%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/12902/tic_tac_toe.gif" alt="Tic-tac-toe">

<div style="padding:3px;"></div>

#### 工作坊 Agenda
* DOM 基本觀念
* 助教操作示範
* 換你來挑戰！
* 經驗分享 & QA

#### 工作坊行前準備

為了確保你學習成效，我們建議你在參與工作坊前先完成：

* 最基本準備：
* 完成 [U:瀏覽器渲染流程與 DOM](https://lighthouse.alphacamp.co/courses/98/units/20502) - [A: 客製化名片模板：抽換節點內容](https://lighthouse.alphacamp.co/courses/98/assignments/2974)
* 完成 [Chrome安裝](https://www.google.com/intl/zh-TW/chrome/) 與 [Codepen](https://codepen.io/) 註冊
* 第二階段準備：完成 [U:遍歷 DOM 節點](https://lighthouse.alphacamp.co/courses/98/units/20509)-[A:找出得分王](https://lighthouse.alphacamp.co/courses/98/assignments/2975)
* 第三階段準備：完成 [U:運用 Template Literal 渲染動態網頁](https://lighthouse.alphacamp.co/courses/98/units/20513)

為確保你的最大學習效果，請你以第 2 級準備為目標，不過最少要完成第 1 級準備。

由於工作坊的行前準備內容於下週一才開放，因此請希望能在與會前好好準備的同學在下週預留至少 3-5 小時進行準備。

<div style="padding:3px;"></div>

##### 來不及準備怎麼辦？

倘若你在工作坊開始前無法完成建議內容，<u>你還是可以參與工作坊</u>，我們也相當鼓勵你上線參與，因為這將可以協助你在前端開發的成長。

同時，在工作坊中千萬不要吝嗇於提問，甚至在動手練習的環節中，可以大方地與助教、同學分享練習成品！

#### 更多工作坊

同學若想查詢更多工作坊活動，可以到 [學習活動日程](https://lighthouse.alphacamp.co/courses/98/units/20405) 單元確認喔！

<div class="further-reading" style="background: #ececec;">
<div class="further-reading-inner-wrapper">
<h5>無法參與工作坊怎麼辦？</h5>
<p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p>
<p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p>
</div>
</div>

<!-- https://assets-lighthouse.alphacamp.co/uploads/image/file/10447/AW7cKzO6aq.gif -->

---

### 02/23 Week 3 DOM 基本元素上手工作坊 - 行前提醒

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10454/event_announcment_banner.001.jpeg"></div>

在第二週 網頁切版技巧與工具 課程後，緊接著第三週將繼續延伸第一週 JavaScript Function 內容，與 HTML 結構結合。

為了協助同學們學習，我們也準備了 「DOM 基本元素上手工作坊」。
這次的工作坊將會有豐富的線上互動與程式碼討論，想把握機會和助教交流、和同學們一起動手挑戰井字遊戲的朋友，務必準時上線參與哦！

如果你想知道

* 究竟 JavaScript 是如何運用 DOM 元素？
* 這次的 DOM 線上工作坊又有什麼有趣的挑戰？

現在就去看看這次工作坊的內容吧 ➡️ [Week 3 DOM 基本元素上手工作坊](https://lighthouse.alphacamp.co/courses/98/units/28532)

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---

## Webinar Update
### 【今晚 7:30 工作坊提醒】學期 2-1：DOM 基礎元素工作坊
學期 2-1 第三週，我們踏入了 DOM 的世界。

第一次將運用 JavaScript 來操作介面，難免會有點懵懵懂懂，模模糊糊的感覺。

別擔心！今天晚上 7:30 DOM 基礎元素上手 工作坊，助教將會透過井字遊戲，帶我們更加深入理解 DOM 元素的使用！

這次的工作坊將會有豐富的線上互動與程式碼討論，想把握機會和助教交流、和同學們一起動手挑戰井字遊戲的朋友，務必準時上線參與哦！

別忘記做行前準備，幫助自己更好吸收哦！我們晚上見！

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
• 活動時間：02/23 (四) 19:30 - 21:00<br>
• 與會連結跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/98/units/28532" target="_blank"> DOM 基礎元素上手 活動頁面</a>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---
## Before webinar start

<!-- ##### 投影片

<div style="position: relative;width:100%;height:0;padding-bottom: 55%;"><iframe style="position:absolute;top:0;left:0;width:90%;height:90%" src="
https://docs.google.com/presentation/d/e/2PACX-1vQycbjujwsW6b3PrxdIKoBrR8vFb2bx3JyPhXXBM60jag1eyNn4hJ_hc8h23mRINSq3Gu3S0XzZwaOC/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>

##### 活動中會使用到的連結
共同筆記區：
[2022.09.08 DOM 基礎元素工作坊使用 - Google Docs](https://docs.google.com/document/d/1odnQp2QkI9q1RpIouj04E6TiyrYClrRmQGoc90H0BwA/edit#)

Table 版 https://codepen.io/Wells7778/pen/ZEGBNLK
Div 版 https://codepen.io/Wells7778/pen/LYVboLJ -->

---

## After Webinar
### Week 3 DOM 基本元素上手工作坊 會後精華
<span style="color:#E52F28; font-size: 0.9rem;">會後精華為提供無法上線同學會後學習，請同學還是務必以即時參與工作坊為主，結束後再看此單元作為複習唷！</span>

本次舉辦的 DOM 基本元素上手工作坊，目的是為了協助你熟悉如何運用 JavaScipt 透過 DOM API 讓網頁動起來！

在這次的工作坊中，助教不僅帶領同學們練習，分享在練習 DOM 操作時的應著重的學習焦點，也與同學們分享了開發時的一些小撇步：

* **首要建立 "從 HTML 轉為 DOM 節點" 的概念**：在了解了 HTML 如何在畫面上呈現網頁內容後，下一步是將 HTML 結構轉為「樹狀」的節點結構，這將會協助你思考如何運用 DOM API 選取到你要的元素
* **querySelector 裡面要放的東西，越精準越好**：現行作業、教案的程式碼相較實務上來的短很多，因此我們可能使用一些常用的 HTML tag，如：h3、div，能選到想要選取的內容。但在實務上網頁通常 HTML 代碼是很長的，因此在設計上、選取上，會運用多個 class, tag 的組合，更精準的選取

<div style="position: relative;width:100%;height:0;padding-bottom: 55%;">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/801825575?h=f79a90d021&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

#### 工作坊參考資料
##### 投影片

<div style="position: relative;width:100%;height:0;padding-bottom: 55%;"><iframe style="position:absolute;top:0;left:0;width:90%;height:90%" src="https://docs.google.com/presentation/d/e/2PACX-1vRWyXNUH2SSfNPbHHzgoC1WK_JJALsmX6tGzKyPNrr636qVXViomJHqn4tddenerTTJ0bewZt9_UXoL/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>

##### Sample Code (開始練習前記得 Fork)

* [井字遊戲 - table](https://codepen.io/Wells7778/pen/ZEGBNLK)
* [井字遊戲 - div](https://codepen.io/Wells7778/pen/LYVboLJ)
* [井字遊戲 - 同學活動使用](https://docs.google.com/document/d/1odnQp2QkI9q1RpIouj04E6TiyrYClrRmQGoc90H0BwA/edit?usp=sharing)
* [名片 Template](https://codepen.io/alpha-camp/pen/yGPJJO/)

<!-- ##### Other reference
* [Callback 在 EventListener 的運作](https://medium.com/tds-note/callback-%E5%9C%A8-evenlistener-%E7%9A%84%E9%81%8B%E4%BD%9C-7eca3e014043) -->

---

### 02/23 DOM 基本元素上手工作坊 - Highlights

本次舉辦的 DOM 基本元素上手工作坊，目的是為了協助你熟悉如何運用 JavaScipt 選出特定 DOM 節點 ！

在這次的工作坊中，講師帶領同學們練習了 [A: 客製化名片模板：抽換節點內容](https://lighthouse.alphacamp.co/courses/98/assignments/2974)，也透過井字遊戲讓同學們在互動中，思考很多選取節點的寫法，讓同學們在之後的學習更有信心！

<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22627/20230223_F2-1_DOM_Webinar.png">

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;">
<div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
謝謝 AC 的教導，學習例子很實用！也很有趣！ </div>
<div style="width: 18%; display:flex; align-items: center; padding: 2% 0;">
<img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/10796/medium_0252EA70-3A65-4087-A3E5-A4E05BE62ED5.jpeg">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;word-break:break-word;">Jessy</p>
</div>
</div>

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;">
<div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center; line-height:21px;">
經過助教的講解，更了解DOM的操作及應用 </div>
<div style="width: 18%; display:flex; align-items: center; padding: 2% 0;">
<img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/11073/medium____.jpg">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Alan</p>
</div>
</div>

現在就去看會後錄影吧！ ➡️ [DOM 基本元素上手工作坊 - 2023/02 月班會後精華](https://lighthouse.alphacamp.co/courses/98/units/28533)

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>