# API 是什麼,能吃嗎? * [應用程式介面(英語:Application Programming Interface)](https://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3) ## API 中翻中 * API 就像是[飲料販賣機](https://unsplash.com/photos/8IihQTcvXdY) * 我想喝飲料 (你想要的資料) * 我點選販賣機上的飲料 (你向 API 發出請求(request)) * 飲料掉到取物口 (API 回應(response)給你對應資訊) * 為什麼要有 API? * 使用 API 時,不需花時間理解背後程式邏輯,只需要依 API 說明來操作,它就會回傳你想要的結果 ## 常見 API * [CSS Shake](https://elrumordelaluz.github.io/csshake/) * 我想要一個 hover 晃動效果 * 我載入 CSS CDN,並在指定區塊設定 class * 吃到 CSS 效果並擁有該功能 * [Web API:Leaflet + OpenStreetMap 地圖應用開發](https://codepen.io/liao/pen/gOpOgzg) * 我想要在網頁顯示公司位置 * 我載入 Leaflet 地圖 JS 套件,並引入 OpenStreetMap 開放街圖,並指定對應座標 * 網頁顯示對應地圖服務,但你並不用知道裡面的圖片顯示原理 * [Web API:TDX 觀光 API](https://tdx.transportdata.tw/api-service/swagger) * 我想獲得台灣觀光景點資料 * 我輸入說明文件上的[網址請求](https://ptx.transportdata.tw/MOTC/v2/Tourism/ScenicSpot?$top=30&$format=JSON)方式 * TDX 伺服器回應我對應的 JSON 格式資料 * [範例 Code](https://codepen.io/hexschool/pen/dyRjQRW?editors=1010) * [後端 WEB API:登入註冊 API](https://github.com/hexschool/nodejs_ajax_tutorial) * 我想在平台上註冊會員 * 我在介面上輸入帳號密碼,並藉由介面發出網路請求 * 系統回應我是否註冊成功 * [學生範例程式碼](https://codepen.io/joycheng5432/pen/PojjOYO) ## 推薦 YouTube 影片 * [什麼是 API](https://www.youtube.com/watch?v=zvKadd9Cflc) ## 工商 * [JavaScript 直播班倒數 98 位](https://www.hexschool.com/courses/js-training.html)