系列文章
Day21. 如何使用 MutationObserver API 追蹤 DOM 的變化 I
在 Web API 中看到 Observer 單字的，多半都跟監聽、觀察有關，今天要介紹的 Mutation Observer API 就是其中一樣，他可以監聽...
Day22. 如何使用 MutationObserver API 追蹤 DOM 的變化 II
今天一樣是接續上篇，分享幾個實際使用 MutationObserver API 的情境。 監控要動態載入的內容 我們使用 AJSX 時，常常會需要等內容載入後，...
Day23. 深入了解 Intersection Observer API 與其應用 I
今天要分享的是 Intersection Observer API，同樣是 Web Observer 家族 XD，他是用來觀察 DOM 元素與可視區域 (vie...
Day24. 深入了解 Intersection Observer API 與其應用 II
除了前面一在提到的 Lazy Load 和 Infinity Scroll 外，還有其他好玩的應用，簡單跟大家分享幾個我常在用的 根據使用者行為觸發事件 我們可...
Day25. 另一種儲存資料的方式：IndexedDB API
說到儲存資料，大家第一個會想到的，應該都是 LocalStorage 或 SessionStorage 吧。 但如果今天要處理更複雜的資料查詢，或是需要管理更多...
Day26. 使用 IndexedDB API 做一個筆記儲存功能
上一篇文章有提過，相比 localStorage，IndexedDB 的優勢是不限制儲存的資料量，也能處理大量的結構化資料，因此例如圖像儲存、文件管理 ...等...
Day27. 使用 JavaScript 操作動畫的 Web Animations API
以往我比較常用 CSS animation 來做動畫，但其實 JavaScript 也有一個 Web Animations API 可以操作 CSS 動畫和 S...
Day28. 使用 Web Animations API 製作打散文字的動畫效果
這篇文章，想跟大家分享用滑鼠互動的動畫效果，這是一個滑鼠移入後，會將文字打散，滑鼠移出後會還原文字的動畫效果，以下是範例： 製作打散文字的動畫效果 首先在 h...
Day29. 使用 Screen Capture API 取得你的螢幕畫面
以往要取得網站的螢幕畫面，都需要安裝額外的軟體或套件，但隨著 HTML5 愈來愈強大，這樣的操作也變得愈來愈簡單。 今天要介紹的是 Screen Capture...
Day30. 使用 Web Cryptography API 提高網頁應用的安全性
現在的網路應用服務愈來愈多，每個服務幾乎都要加入會員以及取得各種個人資料，也因此數據的安全性也愈發重要。我們可以使用 Web Cryptography API...