---
# System prepended metadata

title: API 是什麼，能吃嗎？

---

# 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)