【零基礎】簡易JavaScript！學寫港鐵到站時間網頁 #5-什麼是API？

輕鬆學會JS、HTML 5、CSS 3、Bootstrap、Async Await

Panda Man

Feb 6, 2021

API（Application Programming Interface），中文是「應用程式介面」，是指前端和後端的溝通協定/接口。

正常人聽到之後，根本也不會明白是什麼。

但如果你有看過左邊的米線/車仔麵點餐紙，或到過「譚仔」吃東西，你就很快明白API 是什麼。

API＝譚仔米線

假設你去譚仔吃東西，坐下後就有阿姐給你餐牌，如果你很想吃墨丸米線，你不會直接衝進廚房，然後看見「勿演」就拿來吃吧！

正常的你會按照餐牌，向譚仔阿姐說你要什麼餸、什麼湯底和辣度、飲品是什麼。API 其實跟餐牌一樣。

API 由數據庫或伺服器據擁有人一方撰寫，就像餐廳寫餐牌一樣。你可以叫什麼、如何叫，也是對方規定。

即使你估到數據庫有什麼資料，但API沒有，你也不能提取。就像明明廚房有雞蛋，餐廳不寫進餐牌你就不能叫一樣。

API 格式

點餐紙來來去去不是圈就是剔，API也一樣，有十分流行而且固定的格式。

其中一種叫Query。API以網址形式組成，並主要包括 ? = & 這三個符號，在日常網址中也常見。

上面的例子是「列車實時資訊」真實API，第一個欄目是line，即哪條列車線，選擇是機場快線的代號AEL，第二欄是sta，指車站，選擇是香港站HOK。

API 的格式是在data.gov.hk 找到，通常API 都會附上一份資料文件specification 或documentation ，讓使用人了解如何擷取資料。

「列車實時資訊」真實API

港鐵實時資料網頁：https://data.gov.hk/tc-data/dataset/mtr-data2-nexttrain-data
下面有一欄寫着「補充資料 : 港鐵實時列車服務資訊API規範文件（只提供英文版）」

你可以看到，文件內有列明有什麼選項可供選擇（下圖紅圈），還標明是不是必須填寫，API 網址Resource URL是什麼。第二頁還有例子，以及它會回的資料格式長怎樣。

[教學] JavaScript！學寫港鐵到站時間網頁系列

#1-安裝VS Code (前往）
#2-Chrome開發者工具 (前往）
#3-連結HTML、JS及CSS檔(前往)
#4-利用JS更改HTML(前往)

作者的話 (可以略過)「我要控制科技，而不是被科技控制我！」感謝您看我的文章。
我原本是一個新聞記者，但年近30，開始感到迷惘。
於是報讀了Coding Bootcamp，3個多月成功轉職「軟件工程師」。很多朋友問我到底難不難？
我嘗試運用記者經驗，將問題深入淺出，簡短地讓沒有經驗的你，感受一下Programming適不適合自己。另一個目的，我希望累積教學經驗。
日後有手足要幫忙，我可以幫到。
即使沒有財力開公司請人，也希望授之以漁。
所以有問題請留言，我也希望知道自己哪裏講得不夠好。▲▲香港 時代▲▲