這篇我們要介紹web API,前一篇我們提到了API接口,那API又是甚麼呢? 全名為API(Application Program Interface),意思是應用程式的接口,就是一個橋梁的概念,用來銜接軟體與軟體之間,而透過web API我們就可以銜接第三方軟體,獲取JSON格式的資料。也可以發送HTTP請求。
Web API最大功能:
那前面講了那麼多,是不是有點抽象呢?譬如說我們今天想要在網站上擁有Google Map的地圖資訊,我們就可以透過去Google的網站查詢API,套用在自己的網頁上,或是中央氣象局的天氣資訊,都可以透過API讓自己的網站更加生動化。
瀏覽器內有內建的web API來讓我們執行操作,舉個經緯度的實際例子操作。
<!DOCTYPE html>
<html>
<body>
<p>按下按鈕取得位置</p>
<button onclick="getLocation()">點擊</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
try {
navigator.geolocation.getCurrentPosition(showPosition);
} catch {
x.innerHTML = err;
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
當按下按鈕時,取得經緯度的位置。而其實還有許多的第三方API供我們去做選擇。
像是youtube API,能夠在網頁上顯示影片,Facebook API,在網頁上顯示Facebook訊息,這些API都是公開的Web API依造不同的需求可以去使用。
那我們今天的教學就到這了!謝謝大家,明天最後一天讓我們一起努力吧。