###### tags: `學期 2-2` `week3`
[toc]
# 事件與流程設計工作坊

## Before Webinar
### 報名 Week 4 事件與流程設計工作坊！

#### Week 4 事件與流程設計工作坊資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px; font-weight: bold; min-width:450px; width:fit-content;">
<p style="margin-block-start: 0em;">
• 活動時間：3/29 (三) 19:30 - 21:00<br>
• 與會連結：<a href="https://zoom.us/j/89539047360" target="_blank">https://zoom.us/j/89539047360</a><br>
• 會議密碼：834206<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=MWdxM3N1anViNG1rNnQ1aXNkczFvcG40djYgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>

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

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

#### 工作坊 Agenda
* Opening
* 觀念澄清快問快答
* POS 點餐購物車 Demo 詳解
* 工作坊練習 - 延伸功能
* Recap

#### 工作坊行前準備

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

* **參考 [POS 機 3.0 的 Sample Code](https://codepen.io/alpha-camp/pen/LYGaLMa)，理解 POS 機基礎功能與流程，畫出程式碼的流程圖 ，並在這個活動頁的 Comment 區留下你的版本的流程圖**

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

本次工作坊需有的先備技術知識：

- 能夠運用 JavaScript 設計函式並操作 DOM，在使用者觸發特定行為時，運用 DOM API 改變網頁 UI 的狀態

除上述外，本次並無其他的技術要求。不過如果同學在工作坊前，已經跟著 S2 電影清單的教案完成過任一功能，你將會對工作坊中討論的內容感到更容易上手。

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

#### 更多工作坊

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

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

---

### 3/29 事件與流程設計工作坊 - 行前提醒

<!-- 感謝各位同學見諒昨日的活動延期，目前安排最新的1/5 事件與流程設計工作坊時間資訊如下。 -->

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/14047/_____2020-08-27___3.53.13.png"></div>

在下半學期的學習裡，我們整合了之前所學的 JavaScript 技術，做出不同的網頁功能，打造出一個產品專案。

但在專案規模不斷擴大的情境下，如何拆解功能，設計出對應的 DOM 事件與流程變得相當重要。

如果你想知道：

* 到底該怎麼設計 DOM 事件與流程該怎麼起手？
* 除了教案中的搜尋、收藏，其他網站常見的功能，是怎麼動起來的？
* 這次的工作坊，又會打造什麼有趣的案例？

現在就去看看這次工作坊的內容吧 ➡️ [報名 Week 3 事件與流程設計工作坊](https://lighthouse.alphacamp.co/courses/99/units/28550)

<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-2：事件與流程設計工作坊
許多同學在 ORID 中提到，發現自己 DOM 操作的技巧越用越上手，對於函式的設計也更有概念！但也發現專案開始擴大，總還是會有些時候抓不到解構的眉目。

別擔心！今天 19:30 事件與流程設計工作坊，助教講師將將會帶你一步一步上手、拆解思考脈絡。

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
• 活動時間：3/29 (三) 19:30 - 21:00<br>
• 與會連結跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/99/units/28550" target="_blank">事件與流程設計工作坊 活動頁面</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>

---

### 會前更新資訊

#### 已經上線的同學，請先⋯⋯

Step 1 - 打開 Lighthouse 上的活動頁面
Step 2 - 設定 Zoom 視訊軟體
Step 3 - 填寫簽到表 ➡️ https://ac-bootcamp.typeform.com/to/DGA8wo

---

## before webinar start

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

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

<!-- ## 緊急狀況備用公告
### [緊急通知] 11/4 學期 2-2：事件與流程設計工作坊 因臨時狀況改期

[緊急通知]

11/4 19:30 的 [事件與流程設計工作坊](https://lighthouse.alphacamp.co/courses/99/units/26432)，因助教有突發狀況，需要先取消今晚的工作坊。

團隊會再與助教確認改期後的時間，並另行公告工作坊資訊給大家，若有造成困擾還請同學見諒。

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

---

### 【工作坊延期公告】 Week 4 事件與流程設計工作坊，延期擇日再舉辦

各位同學們好，

原訂 12/28 (三) 舉辦的事件與流程設計工作坊，因助教身體不適臨時狀況取消。

工作坊將延至次週舉辦，延期日期將另行公告，若造成困擾還請見諒 🙏

若期待在本週完成工作坊學習內容的同學，可以觀看過去的工作坊影片來掌握學習知識。

感謝各位同學的體諒，祝大家身體健康！

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg">
</div>

也很感謝週四準時上線的同學們！我們下週一再見囉 👋

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
• 活動時間：11/8 (一) 19:30 - 21:00<br>
• 與會連結跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/99/units/26432" target="_blank">事件與流程設計工作坊 活動頁面</a>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg">
</div>

-->

---

## After Webinar
### Week 4 事件與流程設計工作坊 會後精華

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

本次舉辦的事件與流程設計工作坊，目的是為了協助你在思考如何打造出較複雜的功能時，更容易拆解 JavaScript 的步驟並運用工具來完成！

在這次的工作坊中，講師帶領同學們實際練習拆解功能，並與同學們分享思考功能時，可以更加深入的方向。例如：

* **到底為什麼要先拆解功能？**
人的慣性偏好一次到位，也因此我們常常在看到功能，就直接下手撰寫程式碼。這樣的壞處是容易受限於手邊的工具 (你已經知道的語法)，但如果先走過拆解流程，確認要達到的目的，接著你會發現達到目的的方向有許多，也將不再受限於手邊的工具。

* **拆解的第一步：講清楚**
除了寫出使用者流程，也把自己當成是電腦 (程式)，思考「程式的流程」。例如：「使用者點擊加入購物車後」，究竟從資料、畫面、事件，分別有哪些細部動作要執行？

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/813037597?h=fa6837e296&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allowfullscreen></iframe></div>

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

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

##### Sample Code

* [POS 機 - 基礎功能](https://codepen.io/tz5514/pen/PoZXzmG?editors=1011)
* [POS 機 - 延伸功能](https://codepen.io/tz5514/pen/eYJxPRZ)

---

### 3/29 Week 4 事件與流程設計工作坊 - Highlights

本次舉辦的 事件與流程設計工作坊，目的是為了協助你在思考如何打造出較複雜的功能時，更容易拆解 JavaScript 的步驟並運用工具來完成！

在這次的工作坊中，助教帶領同學們實際練習拆解功能，並與同學們分享思考功能時，可以更加深入的方向，讓同學對於專案開發的流程更有概念！

<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22661/_______2023-03-30_110802.png">

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin: 5px 0;">
<div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
可以理解助教的思考邏輯，是很棒的經驗！覺得學費有值得
</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://lighthouse-cdn.alphacamp.co/default/medium_user_photo.jpg">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;word-break:break-word;">張博雅</p>
</div>
</div>

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin: 5px 0;">
<div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
助教的分享非常實用，讓我釐清一些之前寫code時遇到的困難
</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/11089/medium_90967.jpg">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;word-break:break-word;">Winston</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;">
主要的收穫在於助教的規格解構！
</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/10887/medium______.jpg">
<p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Eric</p>
</div>
</div>

現在就去看精彩的會後錄影吧 ➡️ [事件與流程設計工作坊 會後精華](https://lighthouse.alphacamp.co/courses/99/units/28551)

<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>