---
# System prepended metadata

title: JavaScript 工作坊
tags: [week1, 學期 2-1]

---

###### tags: `學期 2-1` `week1`
[toc]
# JavaScript 工作坊

## Before Webinar
### 報名 Week 1 JavaScript 工作坊！

#### JavaScript 工作坊資訊
<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; max-width:500px; width:fit-content;">
活動時間：02/08 (三) 19:30 - 21:00<br>
• 與會連結：<a href="https://zoom.us/j/87399688503" target="_blank">https://zoom.us/j/87399688503</a><br>
• 會議密碼：416944<br>
<span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，以利工作坊進行</span><br>
<a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NmRmNDFnbTRuZDA3MDA2ZnJoMWc3dnZraGogczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&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:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vRcTn5MYtnznatPMNU6CiwtMp_0eXdHTRfOZzHD9rOYGvM5VRWHoq-LgUqZe-r2WBAdwMeTZjTiLIcV/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
    </iframe>
</div> -->


#### 工作坊行前準備

* 第 1 級準備：完成 [U：學習目標與先修基礎](https://lighthouse.alphacamp.co/courses/98/units/20441) 至 [U：參數與引數](https://lighthouse.alphacamp.co/courses/98/units/20457) 章節閱讀與練習，並了解：
    * 物件、陣列的資料結構
    * 資料處理方法的使用：split、push
    * 函式封裝程式碼的概念
* 第 2 級準備：完成作業 [A：字串處理](https://lighthouse.alphacamp.co/courses/98/assignments/2959)、[A：踢掉黑名單](https://lighthouse.alphacamp.co/courses/98/assignments/2960)（作業會在開課後釋出）
* 第 3 級準備：完成 [A：封裝函式](https://lighthouse.alphacamp.co/courses/98/assignments/2961) 章節閱讀與練習 


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

若在工作坊開始前你無法完成建議內容，<u>仍然可以參與工作坊</u>，因為我們相信藉此可以協助你在未來的四周有個動力滿滿的開始！


#### 行前準備 - 設定視訊工具 Zoom 
在未來所有的學習活動中，AC 團隊、助教會在線上透過 Zoom 這個工具來與同學們互動、練習。
因此請在工作坊前，參考下方投影片，確保你已經「完成註冊與安裝」並「了解 Zoom 的基本使用」，讓你在活動中能夠順暢的跟上助教的腳步。

<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://docs.google.com/presentation/d/e/2PACX-1vRQ2ir_UbkgAaPHwund4EQgzuFNrvNW13PhqdlsR_8ndJvIojPRQPTY_8a7X9KBih3OkiKIU0z_7CQL/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>

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

期待在工作坊看見你的身影！

#### 更多工作坊

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

<div class="further-reading" style="background: #ececec;">
  <div class="further-reading-inner-wrapper">
    <h5>無法參與工作坊怎麼辦？</h5>
    <p>參與工作坊最有價值的即是與助教互動、提問，若無法上線參與，同學還是可以透過下一單元的「會後精華影片」學習工作坊的內容。</p>
    <p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p>
  </div>
</div>

---
## Webinar Update

### 【今晚 7:30 工作坊提醒】學期 2-1：JavaScript 工作坊
#### 【今晚 7:30 工作坊提醒】學期 2-1：JavaScript 工作坊 - Learner

Hi {{user_nickname}}，

學期二的第一週！第一場工作坊就在今天晚上 7:30！

剛開始深入 JavaScript 的你，是否正在跟物件、陣列、函式，還有大量的內建語法工具纏鬥，覺得腦眼昏花呢？

別擔心！今晚的 JavaScript 工作坊，助教講師將會透過實作，帶你一步一步上手、拆解思考脈絡。

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

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

---

### 【今晚 7:30 工作坊提醒】學期 2-1：JavaScript 工作坊
#### 【今晚 7:30 工作坊提醒】學期 2-1：JavaScript 工作坊 - Non-learner

Hi {{user_nickname}}，

學期二的第一週！第一場工作坊就在今天晚上 7:30！

<div id="alert-warning"><p>注意到 {{user_nickname}} 尚未開始本週的學習進度、或是實作練習完成作業</p>

剛開始深入 JavaScript，你將試著處理物件、陣列、函式，還有與大量的內建語法工具，<span style="color: #e52f28;">每週的作業數量和實作練習會比以往多，也可能花費你較多時間</span>，建議你盡快啟動學習，別把進度都放在週末衝刺喔!
</div>

現在開始也不會太晚！

今晚的 JavaScript 工作坊，助教講師將會透過實作，帶你一步一步上手、拆解思考脈絡。

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

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

<style>

div#alert-warning{
    color: #8a6d3b;
    background-color: #fcf8e3;
   border-color: #faebcc;
   padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.9rem;
}
</style>

---
## Before webinar start


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

<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://docs.google.com/presentation/d/e/2PACX-1vQ-IhiUwrxPLU25tb8yakUs5tkoDGweqqEytExq8xyWYo2DAq4gE8vMBsA37mm-ZNz8oZblv_q9cK11/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
    </iframe>
</div> -->


---

## After Webinar
### Week 1 JavaScript 工作坊會後精華

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

本次舉辦的 JavaScript 工作坊，目的是為了協助你在難度、學習時間都提升的課程中有效學習，了解在初次大量接觸 JavaScript 函式庫時的學習方法與上手重點，不會因為被工具海淹沒而迷失。

在這次的工作坊中，助教不僅帶領同學們練習，與同學們分享開發時的小技巧，更詳細的展示每一步構思程式的演化。例如：

- **程式碼不用一步到位**：設計程式時都是一個段落一個段落逐漸成型，先從你最能掌握的部分開始轉謝，例如先寫出條件判斷，再進一步設計資料、迴圈邏輯。當你能夠把每個段落逐漸搭建而成，自然一支完整的程式
- **`return` 跟 `console.log` 怎麼用**：在實作的過程當中，同學們常會遇到不知道應該使用 `console.log` 還是 `return` 回傳 function 的產出，甚至沒有寫 `return` function 也可以動，究竟判斷點在哪呢？
- **重點在理解與內化**：不管是遇到沒用過、不熟練的函式工具，還是沒辦法第一時間想出解法的作業，所以參考課文、官方文件、觀摩同學作業⋯⋯等，都是非常正常的行為。因為面對新事物，我們不太可能一次就學會，你的焦點應該放在每一次的練習、觀摩時，要能「理解」為什麼這麼做，並進一步修正你的思考。


<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/797216601?h=f7617036c3&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"  frameborder="0" allowfullscreen>
    </iframe>
    
</div>

<!-- <span style="font-size:0.9rem; font-style:italic; color:#9B9B9B;">
由於3/10當天工作坊影片存檔遺失，故放上1月班同場工作坊供學員們參考，敬請同學見諒。
</span> -->

<!-- <span style="font-size:0.9rem; font-style:italic; color:#9B9B9B;">
工作坊影片於 00:00-02:26 段落因麥克風收音問題，音訊較不穩定，有部分爆音、雜訊、音量不穩的狀況，敬請同學見諒。
</span> -->

#### 會後任務

請參考投影片的課後挑戰，將「摩羯座」的判斷設計完成！你可以運用任一想法來完成，完成後請在工作坊下方分享：

- 你挑戰了哪個想法
- 有沒有設計上遇到的挑戰，如何跨越挑戰
- 你的 repl.it 連結

如果挑戰過程中遇到卡關，也千萬別害羞，可以大方的提問，讓助教、同學們加入你的思維一起討論！


#### 工作坊參考資料

##### 投影片

<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://docs.google.com/presentation/d/e/2PACX-1vR-mflHY4mNhlT8SW2nhrlYklRqHYvGIEeTIUVo056JTVSFs30Ad8xhjHZyKOZG5wF5YubpVgg7HBgU/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
    </iframe>
</div>


##### Sample code

- [初始程式碼](https://repl.it/@alphacamp/Xue-Qi-2-1JS-Gong-Zuo-Fang-zodiac1Chu-Shi-Cheng-Shi-Ma)
- [基礎寫法](https://repl.it/@alphacamp/Xue-Qi-2-1JS-Gong-Zuo-Fang-zodiac2Ji-Chu-Xie-Fa)
- [用數字處理來簡化](https://repl.it/@alphacamp/Xue-Qi-2-1JS-Gong-Zuo-Fang-zodiac3Yong-Shu-Zi-Chu-Li-Lai-Jian-Hua)
- [用 function 來簡化](https://repl.it/@alphacamp/Xue-Qi-2-1JS-Gong-Zuo-Fang-zodiac4Yong-function-Jian-Hua-1)
- [用 function 來創建資料](https://repl.it/@alphacamp/Xue-Qi-2-1JS-Gong-Zuo-Fang-zodiac5Yong-Han-Shi-Chuang-Jian-Xing-Zuo-Zi-Liao)

##### Other reference

- [與其測量投入時間，不如測量循環次數](https://ithelp.ithome.com.tw/articles/10241235)
- [成長心態 v.s. 定型心態](https://ithelp.ithome.com.tw/articles/10242017)

---

### 02/08 JavaScript 工作坊 - Highlights

本次舉辦的 JavaScript 工作坊，目的是為了協助同學們在難度、學習時間都提升的課程中有效學習，了解在初次大量接觸 JavaScript 函式庫時的學習方法與上手重點。

在這次的工作坊中，助教不僅帶領同學們練習，與同學們分享開發時的小技巧，更詳細的展示每一步構思程式的演化，讓同學大讚不管是技術還是學習方式都有很大的收穫！

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22616/0208_ALPHA-Camp-Javascript_.gif"></div>

<div style="height: 5px;"></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;">
感謝助教、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/11062/medium_S__17031171.jpg">
    <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;word-break:break-word;">Sunny</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;">
   參與工作坊可以再度練習寫程式的邏輯，一步一步地次次優化程式碼是我覺得學到最多的地方!也期待未來自己寫程式的時候也能夠達到極簡化的效率coding
    </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/10940/medium___.jpg">
    <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Lynn
</p>
    </div>
</div>

現在就去看會後錄影吧！ ➡️ [JavaScript 工作坊 - 2023/02 月班會後精華](https://lighthouse.alphacamp.co/courses/98/units/28531)



<!-- ### 【教練的提醒 👀】
恭喜同學首次參加 2-1 學期的線上工作坊！
同學們在工作坊中踴躍互動真的太棒了，請保持這樣的學習態度，持續前進吧！
助教有跟教練回報昨天除了程式的提問外，同學也有其他的好奇疑問。

教練這裡有兩個提醒，希望能幫助同學學習的過程更順利 🥰

**1. 記得加入學期 2-1 10 月班的 Line 群組！**

- 同班同學的取暖小空間可以互相傾訴。有問題時，可以用 LINE 問問看同學，獲得同儕支援（如果你知道其他同學的問題解答，一起互助共享資訊吧！） 💪
- 飛航學習室的資訊也在 LINE 裡可以取得，還有專屬於 2-1 的飛航學習室場次唷，不要錯過運用飛航訓練專心、線上與同學互相討論切磋的機會 🤩

<div style="width: 100%; text-align:center;">
<img style="width: 50%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22303/F1_Invitation__202210_.png"><br>
<span style="font-size:0.95rem; color:#9B9B9B;">請用手機掃描上方 QR code 加入 Line 群組。<br>若無法掃描，可嘗試「用手機」點擊此連結：<a href="https://line.me/ti/g/8z14z9ad_f" target="_blank">https://line.me/ti/g/8z14z9ad_f</a></span>
</div>

**2. 關於 AC 學習進度與體驗**
若有與 AC 學習進度、體驗有關的問題，同學可以參考下方的 Unit 中的說明，或是在相關 Unit 下提問呦！
-  [認識在 ALPHA Camp 的學習旅程地圖](https://lighthouse.alphacamp.co/courses/38/units/28575)
-  [進度班級制](https://lighthouse.alphacamp.co/courses/38/units/6834)
-  [重讀機制](https://lighthouse.alphacamp.co/courses/38/units/28560)

若是比較「個人學習狀況」的諮詢，請直接來信 ac-genie@alphacamp.co 能更快根據你的狀況提供適當的協助喔！


記得 11/ 17(四) 還有一場工作坊，期待在下次見到你喔！ ✨
 -->


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


---
#### Archive

##### 課後挑戰 - 例外處理
Hi 我是學習教練 ChiaAn 👋 
 
很開心在工作坊當中與各位同學互動、一起學習！相信無論你在工作坊開始前準備到哪個階段，在活動結束後都有所收穫！ 

鼓勵大家在吸收工作坊內容後，可以繼續延伸練習，挑戰完成目前星座計算機未完整的功能：判斷摩羯座。

- 基礎任務：運用助教提示的想法 1 ~3 ，嘗試其中一種解法來完成星座計算機。
- 進階任務：練習將想法 1~3 的解法都完成、並思考是否還有其他解法。觀摩同學成果並留言切磋！ 
 
請大家將自己的結果貼此留言區，跟大家分享程式碼（記得附上 repl 連結）喔！ 

期待看到大家完成挑戰！ 

<!-- for 11 月班學生 

### 【工作坊行前準備提醒】學期 2-1：JavaScript 工作坊

Hi {{user_nickname}}，

明天晚上就是工作坊囉！行前準備得還好嗎～（教練內心 os：開始寫作業了沒～）

教練觀察到有許多同學都已經啟動學習了，是第一週很棒的開始！

#### 你是否開始嘗試練習寫作業了呢？
不過教練也觀察到：開始提交作業、進入實作的同學較少，進入學期二，你可能會感受到課程難度變高、看完作業題目後還是不知道該如何下手，別擔心這些都是很正常的！重要的是在面對卡關和挑戰時，大家是如何解決問題的呢？

如果你正在面對寫作業的挑戰、或是有好多疑問不知道該怎麼辦，記得一定要空下明晚的時間，即時參與工作坊，由學習教練和助教來幫助大家一起攻克學期 2-1 💪

#### 除了輸入也要記得輸出唷！
另外也鼓勵大家在工作坊前，空下 1~3 小時的時間，以至少完成 1 份作業為目標（若可以鼓勵大家完成到 A3 !），透過真正開始實作，幫助自己釐清是否有掌握學習的重點，也能夠透過觀摩、獲得助教回饋等管道，讓自己走過[完整的學習循環](https://tw.alphacamp.co/blog/learning-cycle-learning-frequency)！

不過若來不及完成作業也沒有關係，還是可以直接來參與工作坊喔！我們明晚見！

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

-->