Web API Basics

Understanding Web APIs

Web APIs provide programming interfaces that allow webpages to interact with features supplied by web browsers and the devices on which they run.

JavaScript commonly uses Web APIs to perform tasks that go beyond displaying static HTML, such as storing information in the browser, working with browsing history, accessing the clipboard, entering fullscreen mode, or requesting a user's location.

What Is an API?

API stands for Application Programming Interface. An API provides a defined way for one piece of software to interact with features or information provided by another part of a system.

Instead of developers having to create every low-level operation themselves, an API provides properties, methods, events, and other interfaces that code can use to request a particular action.

You can think of an API as an interface between your code and functionality that already exists.

What Is a Web API?

A Web API provides functionality that can be used when developing websites and web applications. Many Web APIs are supplied directly by the browser and are accessed through JavaScript.

For example, browser APIs can provide access to the current document, browsing history, local storage, clipboard, fullscreen display, and geographic location.

Web APIs are not all part of the JavaScript language itself. JavaScript is commonly the programming language used to communicate with browser-provided APIs.

HTML, JavaScript, and Web APIs

HTML creates the structure and content of a webpage, while JavaScript can respond to user actions and communicate with Web APIs to provide additional functionality.

For example, HTML can provide a button:

<button type="button" id="fullscreen-button">Enter Fullscreen</button>

JavaScript can listen for a click on that button and then call the Fullscreen API:

const button = document.querySelector("#fullscreen-button");

button.addEventListener("click", () => {
  document.documentElement.requestFullscreen();
});

The HTML provides the control, JavaScript handles the interaction, and the browser's Fullscreen API performs the fullscreen operation.

Browser APIs

Browser APIs are built into web browsers and expose functionality that webpages can use through supported programming interfaces.

Some APIs interact primarily with the webpage itself, while others provide controlled access to browser or device capabilities.

Third-Party APIs

Not every API used by a website is built into the browser. Third-party APIs are provided by external services and can allow a website to communicate with features or data supplied by another organization.

Examples can include mapping services, payment systems, weather information, social platforms, and other online services.

Third-party APIs often require additional scripts, network requests, API keys, accounts, or authentication. The tutorials in this section concentrate primarily on browser APIs that are part of the web platform.

Accessing a Web API

Many Web APIs are exposed through objects that JavaScript can access. The object used depends on the API and the feature being requested.

For example, the browser's navigator object provides access to several browser capabilities:

navigator.geolocation

The window object represents the browser window and provides access to other browser features:

window.history

Other APIs may be available through document, individual HTML elements, or specialized objects provided by the API.

Methods, Properties, and Events

Web APIs commonly provide methods that perform actions, properties that contain or describe information, and events that report when something has happened.

Individual APIs can contain many interfaces, methods, properties, and events. Learning to use an API therefore involves understanding both what it can do and the particular interface it provides.

Permissions and Security

Some Web APIs can access sensitive information or powerful browser and device capabilities, so browsers place restrictions on how they can be used.

For example, the Geolocation API requires permission before a website can obtain the user's location. Clipboard operations can also be restricted according to browser security requirements and how the user interacts with the page.

Many powerful browser features require a secure context, which normally means the webpage is delivered using HTTPS. These protections help prevent websites from silently accessing sensitive capabilities without appropriate restrictions or user involvement.

Browser Support

Web API support can vary between browsers, browser versions, and devices. An API may be widely supported while a newer method or property within that API has more limited support.

When using an API in a production website, check current browser compatibility and avoid assuming that every visitor has access to exactly the same features.

JavaScript can sometimes check whether a feature exists before attempting to use it.

if ("geolocation" in navigator) {
  // Geolocation API is available.
}

When an important feature is unavailable, provide a reasonable alternative whenever practical.

Web APIs in This Section

The following tutorials introduce several browser APIs that demonstrate different ways a webpage can interact with the browser and user.

Simple Web API Example

The following example uses the Web Storage API to save a small piece of information in the browser.

<button type="button" id="save-button">Save Name</button>
<p id="result"></p>

<script>
const button = document.querySelector("#save-button");
const result = document.querySelector("#result");

button.addEventListener("click", () => {
  localStorage.setItem("name", "Alex");
  result.textContent = "Saved name: " + localStorage.getItem("name");
});
</script>

The button and paragraph are ordinary HTML. JavaScript responds to the button click, while localStorage provides access to the browser's Web Storage API.

Best Practices

• Use Web APIs when they provide functionality that is useful to the webpage rather than adding features simply because an API is available.
• Understand what information or browser capability an API accesses before using it.
• Respect permission requests and avoid requesting sensitive capabilities before they are actually needed.
• Use HTTPS when required by the API and as the normal delivery method for modern websites.
• Check browser support for APIs, methods, properties, and events used by the website.
• Provide reasonable alternatives when an important feature may not be available.
• Handle API errors rather than assuming every operation will succeed.
• Keep HTML responsible for meaningful page structure while using JavaScript and APIs to add behavior.

Summary

Web APIs provide interfaces that allow webpages and web applications to use functionality supplied by browsers and other services. JavaScript commonly communicates with these APIs through objects, methods, properties, and events.

Some APIs work directly with webpage content, while others provide controlled access to browser or device features and may require HTTPS, user interaction, or explicit permission. Next, we will use the Drag & Drop API to make content draggable and respond when it is dropped.