This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

16.1 Web API Intro

A Web API is a developer's dream.
- It can extend the functionality of the browser
- It can greatly simplify complex functions
- It can provide easy syntax to complex code

What is Web API?

API stands for Application Programming Interface.
A Web API is an application programming interface for the Web.
A Browser API can extend the functionality of a web browser.
A Server API can extend the functionality of a web server.

Browser APIs

All browsers have a set of built-in Web APIs to support complex operations, and to help accessing data.
For example, the Geolocation API can return the coordinates of where the browser is located.

Example: JS Web API - Geolocation API

Get the latitude and longitude of the user's position:

const myElement = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    myElement.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  myElement.innerHTML = "Latitude: " + position.coords.latitude +
  "
Longitude: " + position.coords.longitude;
}

Third Party APIs

Third party APIs are not built into your browser.
To use these APIs, you will have to download the code from the Web.
Examples:
- YouTube API - Allows you to display videos on a web site.
- Twitter API - Allows you to display Tweets on a web site.
- Facebook API - Allows you to display Facebook info on a web site.

JavaScript Fundamentals course home
Module 16. JS Web APIs

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JS Web API - Geolocation API JS Web Storage API Web Storage API - The sessionStorage Object JS Web Worker API - Counting Numbers JS Web Fetch API part 1 JS Web Fetch API part 2 JS Web Fetch API part 3 JS Geolocation API part 1 JS Geolocation API part 2 JS Geolocation API part 3