iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0

API是甚麼?

這篇我們要介紹web API,前一篇我們提到了API接口,那API又是甚麼呢? 全名為API(Application Program Interface),意思是應用程式的接口,就是一個橋梁的概念,用來銜接軟體與軟體之間,而透過web API我們就可以銜接第三方軟體,獲取JSON格式的資料。也可以發送HTTP請求。

Web API最大功能:

  • 擴展網站的功能。
  • 將複雜的功能極簡化。
  • 將複雜的程式碼提供簡單的語法。

那前面講了那麼多,是不是有點抽象呢?譬如說我們今天想要在網站上擁有Google Map的地圖資訊,我們就可以透過去Google的網站查詢API,套用在自己的網頁上,或是中央氣象局的天氣資訊,都可以透過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依造不同的需求可以去使用。

那我們今天的教學就到這了!謝謝大家,明天最後一天讓我們一起努力吧。


上一篇
Day28 Javascript Ajax 介紹
下一篇
Day30 Javascript Fetch API
系列文
Javascripts惡補小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言