iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

可愛又迷人的 Web API 系列

在現代網頁開發中,Web API 為我們提供了強大且靈活的工具來實現許多功能,從基本的 DOM 操作到複雜的數據處理,幾乎都能靠 Web API 幫我們解決。

如果還沒聽過或使用過 Web API 的朋友,希望這個系列文章能帶你認識與體會 Web API 的好,一起來使用 Web API 吧!

鐵人鍊成 | 共 31 篇文章 | 36 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1. 用 Geolocation API 取得與追蹤使用者地理位置

Geolocation API 是 HTML5 Web API 中的一個強大功能,他可以讓網頁存取使用者裝置的地理位置,但安心的是 Web API 很重隱私,我...

2024-09-09 ‧ 由 MUKIwu 分享
DAY 2

Day2. 用 Geolocation API 實作車子導航追蹤

今天要跟大家分享的是一個功能強大且好用的 Leaflet Routing Machine 套件,他能在 Leaflet 地圖中增加路線規劃的功能,我們可以在地圖...

2024-09-10 ‧ 由 MUKIwu 分享
DAY 3

Day3. 用 Drag and Drop API 拖曳網頁元素

我曾經在公司後台開發一個儀表板功能,使用者可以拖拉想要的圖表元件,並將元件移動、放大以排版。這個功能有用到 HTML5 的 Drag and Drop API,...

2024-09-11 ‧ 由 MUKIwu 分享
DAY 4

Day4. 認識 History API:SPA 的關鍵技術之一

在現代框架的單頁應用 (Single Page Application, SPA) 中,其中一個技術是在不重整頁面的情況下,讓使用者感受到順暢的頁面過渡效果,這...

2024-09-12 ‧ 由 MUKIwu 分享
DAY 5

Day5. 探索 Fullscreen API:從基礎到應用場景

Fullscreen API 可以將網頁切換成全螢幕,這個 API 提供了一組方法和屬性,使得網頁可以在使用者的裝置上以全螢幕顯示,提供更沉浸式的體驗。通常用於...

2024-09-13 ‧ 由 MUKIwu 分享
DAY 6

Day6. 使用 Web Notifications API 幫網站加入通知功能

現在開發網站的訴求,已經從單向變成雙向,使用者不僅是單純「看」網站,還能與網站進行互動。而今天要介紹的 Web Notifications API,就是一個可以...

2024-09-14 ‧ 由 MUKIwu 分享
DAY 7

Day7. Web Notifications API 搭配 Service Workers 發送通知

在上一篇文章中,我們介紹了 Web Notification API 的基本用法。然而在實際應用中,僅僅依靠前端觸發通知是遠遠不夠的。為了建立一個功能完整、實用...

2024-09-15 ‧ 由 MUKIwu 分享
DAY 8

Day8. Web Notifications API 結合 Google Cloud 的應用

Web Notifications API 的介紹來到了第三篇,也是最後一篇,我們一開始跟大家介紹 Web Notifications API 的基本功能,再來...

2024-09-16 ‧ 由 MUKIwu 分享
DAY 9

Day9. File API 介紹與實際應用

大家應該都碰過處理文件的需求,不管是上傳圖片、讀取電腦的文件或是從網站下載文件... 等,多少都已經和 File API 打過交道了。今天想跟大家分享的是 Fi...

2024-09-17 ‧ 由 MUKIwu 分享
DAY 10

Day10. 用 Battery Status API 打造節能模式的網站

Battery Status API 是個蠻有趣的應用,我們可以透過這個 API 取得使用者裝置的電池資訊,並顯示在網頁上,這些資訊包括電池充電狀態、電量百分比...

2024-09-18 ‧ 由 MUKIwu 分享