卡斯伯提供的教學資源:
JavaScript Console 運用技巧 - 8 招讓你除錯更高效
寫 JavaScript 需要檢視運作是否正確時候,都會使用 console.log 來檢視輸出或運算的值,而 console 的運用技巧不僅僅只有將值呈現在開發的 Console 介面中。本篇就來介紹許多 console 語法的實戰運用方法吧! 首先,在此先準備一份等等會用到的物件及陣列作為以下...
VSCode Prettier 整合 ESLint 自動排版
VSCode 中有一個非常不錯的格式化工具,可以透過一個按鍵將雜亂的程式碼排列的整整齊齊,無論是 HTML、CSS、JavaScript 均可以套用。而此工具稱為 “Prettier”,在 VSCode 中也是屬於預設工具,除了預設選項外也能有許多的客製化調整。 而我們在開發的過程中,為了確保團隊...
Vue3 中使用 Event Bus
Vue 2 中要進行跨元件通訊,除了 Vuex 以外的另一個常見手法是 Event Bus,對於小型專案來說 Event Bus 相當方便,僅需要 $on、$emit 兩個語法就能進行跨元件通訊。而 Vue 3 中移除了 $on、$off 等語法,因此 Event Bus 也等同於被移除。 在 Vu...
Async function / Await 深度介紹
非同步在前端的做法不斷的在進行優化調整,先前介紹過 Promise 可以解決非同步過度巢狀的問題,而本篇要介紹的 async function(非同步函式) 及 await 則可以將非同步的程式碼寫成類似同步的形式。 Promise 與 async, awaitPromise 本篇不會詳細介紹,如...
VSCode JS 註解就是你的文件
在使用文字編輯器時,你是否有以下狀況呢? 搞不懂,為什麼文字編輯器總是沒跳提示 函式庫沒有安裝插件就不知道如何輸入 同事或過去自己寫的函式不知道在寫什麼,都要花上許多時間去理解 想要為函式補充註解,但不知道如何著手 那麼你可以試著使用 VSCode,強大的 Intellisense 搞定所有函式...
JS - for 迴圈與 forEach 有什麼不同
過去,當有一個陣列的內容需要依序取值時,都會使用 for... 迴圈(for loop)的形式將值一一取出,原始碼的結構如下:var array = ['小明', '杰倫', '漂亮阿姨', '小美'] for (var...
JS 常見陣列方法 [push(), unshift(), pop(), shift(), splice(), reverse(), concat(), include(), indexOf(), join()]
本篇陣列方法是延伸過去寫的 JavaScript 陣列處理方法,目前的框架主流觀念都是「關注點分離」,框架主要都是負責畫面上的渲染;資料面完全交由給原生的 JS 處理,因此,對於資料處理的語法就需要有更高的掌握度。 熟悉陣列的方法,自然對於處理資料上會更得心應手,而先前的「陣列處理方法」是著重在迴圈...
AJAX 完整解說系列:輕鬆搞懂 HTTP 狀態碼(HTTP Status Code)
AJAX 是前端與後端的介接,當跨越不同的環境時,所有的狀態會越來越難預期,接著就可能會發生錯誤,造成的錯誤狀態可能會如下: 流程與設計不同 資料格式不符合 連線失敗、網路不穩定 程式碼上的錯誤(這就不是本章節要討論的) 錯誤在開發的過程中是非常常見的,只不過我們在開發的過程中容易「忽視錯誤」僅...
AJAX 完整解說系列:使用 Chrome Devtools 檢視請求及回應
從上一篇內容我們介紹到 AJAX 都是由瀏覽器發出請求,伺服器則會依據請求的內容進行回應。所以在這之中的 “請求”、“回應” 都會夾帶著不同資源,供瀏覽器及伺服器進行辨識及運用,所以此篇就針對瀏覽器與伺服器溝通的內容進行說明,帶大家更深入的認識 AJAX。 發出請求到回應的過程示意圖 注意:本...
AJAX 完整解說系列:新增、更新、刪除(POST/PATCH/DELETE)
AJAX 除了 GET 以外,其它幾個常見的請求方法通常都會對資料庫進行操作,尤其是 POST、PUT、PATCH 在發出請求的同時還會有附加資源傳送至伺服器。 雖然相對於 GET 來說僅是多增加了 “資料”,但這個步驟卻讓許多新進的開發者困擾不已,可能是對於 JSON 結構不熟悉、或是對於 AP...