JavaScript 工作坊

###### 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>  #### 工作坊行前準備 * 第 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  --- ## 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&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen> </iframe> </div>   #### 會後任務請參考投影片的課後挑戰，將「摩羯座」的判斷設計完成！你可以運用任一想法來完成，完成後請在工作坊下方分享： - 你挑戰了哪個想法 - 有沒有設計上遇到的挑戰，如何跨越挑戰 - 你的 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)  <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 連結）喔！期待看到大家完成挑戰！