WuWac's CrAzY World!

第一週- API&Ajax串接 這學期以API&Ajax串接做開場，難度不高，只是讓我又打開了新世界大門，以前從來沒想過原來不用所有事都要自己做😂。 這週練習了幾個很方便練習的API(Random狗狗照片、Random User、找歌詞)。除了課堂的練習，也讓我萌生了以後也想成為提供API帶給別人方便的開發者。 這週玩得很愉快，除了課堂作業外，Alpha Camp這週又再度舉辦了黑客松。沒想到在分享要做什麼的想法時，現場炸了！😂 比起上次有意識的在想黑客松要刻意練習什麼，這次我是沒怎麼想就直接訂主題。訂完主題後想user story再構圖，後來就是建構需要的資料，查找想要的效果語法用法，最後把程式碼慢慢補完細部調整完成。 這次的主題是月老廟。構想來源是社群裡有人分享去拜月老都沒拖單，我就想疫情期間就別去現場了吧，我們來試試線上拜拜求籤擲茭試手氣😂。 以下是我黑客松弄出來的網頁開發練習 (照片來源是google搜尋到的，籤詩是網上隨意找的各個古詩詞，只是初學者的練習，如有侵權請通知我刪掉) See the Pen sideproject-月老廟 by Naomi ( @wuwachon ) on CodePen . 完成了黑客松的side project，我發現自己對於監聽事件處理更熟悉了，也因為資料有點多，也開始對於怎麼讓程式更簡單易讀這件事有感覺。在開始做之前試圖要找別人建置好的古詩詞API，發現只有簡體版的，又開始研究怎麼簡轉繁。在一系列的查資料、看不懂、再查資料、又看不懂的循環下，最後都沒有採用😂，但對於我想學習後續的課程更有動力了，我就是相信等到後面課程教到我一定就懂。 第二週-  電影清單：前端體驗綜合實作 這週開始建構一個完整的網頁，內容極多。從電影資料的API手把手教一個簡單網夜各個細部功能怎麼建構，包含了一開始的HTML文件、API資料取用、Search功能、Local Storage、Paginator。照著做都不難，就是細節比較多一點。這週算是輕鬆的一週。 到目前為止，跟學期2-1一上來就懷疑人生比起來，這學期有一種由苦到甜的感覺。不僅內容難度不高還特別有成就感做出像模像樣的網頁，大部分的bug幾乎都是拼錯字導致(debug特別痛苦)，但在這學期同學們之間基底深厚度就很明顯看的出來。 很感謝Alpha

 JavaScript特性 - 同步性程式語言 JS其實是種同步性程式語言，和其他程式語言不同，JS在執行時是 照順序 且 一次只做一件事。 在程式執行時，按照順序把程式碼push進stack區執行，執行完畢pop off出stack區，再把下一行程式碼push進stack區執行，直到完成整份文件。 所以當某一行程式碼卡在stack區處理不完的時候，程式執行變得緩慢(後面的程式碼排隊等著)或是卡死(while無限迴圈永遠執行不完)或是直接報錯(堆疊超過系統設定上限，系統直接說不幹了 XD)。所以在寫程式時檢查程式碼有沒有不小心無限迴圈很重要，學習優化程式碼提高程式運行效率的概念也要建立起來。 Callback function Callback function其實就是把函式當作另一個函式的參數，透過另一個函式來呼叫它。當callback同步時，stack區會往上推疊callback function，再由上往下一件一件處理完移出stack區域；那當callback非同步呢？像是AJAX、Event Listener、setTimeOut、...等用法都讓callback function成為非同步。 非同步callback function發生甚麼事？ 以經典的windows.setTimeOut( function() {...}, 毫秒)為例。 程式碼的指令："在經過了多少毫秒後呼叫callback function"。但在實際上當程式執行到windows.setTimeOut( function() {...}, 毫秒)時，理所當然地把這包指令整包丟到stack區，要處理時發現了非同步指令，接著整包指令又被從stack區移除並被丟進webapis區解析要做的動作。 stack區在移除了setTimeOut指令後，繼續把下一行程式碼丟進stack區處理，而webapis區在處理完非同步指令的request後(setTimeOut為例，指令request是等待多少毫秒)把callback function丟進task queue等待，stack區清空後才依序把task queue裡pending的function丟進stack區處理。 有時候會發生："奇怪？不是設定0秒後執行，為什麼延遲了？"的狀況。這就是因為callba