Web APIs Introduction

By the end of this lesson, you will be able to identify common browser Web APIs and use JavaScript to read page information, store small data, and request data from a server.

What it is

Web APIs are browser-provided interfaces that JavaScript can call. They are not part of the core JavaScript language; they are features of the browser environment. Core JavaScript gives you variables, functions, arrays, and objects. Web APIs give your code access to things outside the language, such as the current page, the network, storage, and device information.

Common examples include document for the page structure, navigator for browser and connection details, fetch for network requests, and localStorage for simple persistent storage. Related terms include the DOM (Document Object Model), BOM (Browser Object Model), and asynchronous APIs, which return promises instead of immediate values.

Why it matters

• Read browser state: Use navigator to check whether the user is online or what browser is being used.
• Interact with the page: Use document to find elements, change text, or respond to clicks.
• Save small data: Use localStorage to keep simple values between visits.
• Get remote data: Use fetch to request JSON from an API server.
• Build real web apps: Most browser applications combine JavaScript logic with Web APIs to create useful behavior.

Syntax or steps

The smallest useful pattern is: choose the API object, call a method or read a property, and handle the result. For synchronous APIs, the result is available immediately. For asynchronous APIs, such as fetch, the result arrives later through a promise.

// Synchronous: read a property
const online = navigator.onLine;

// Synchronous: store and read a value
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");

// Asynchronous: request data
fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => console.log(data));

Example

Open your browser developer tools console on any web page and run this example. It uses several common Web APIs together.

// Read browser and page information
const pageState = {
  browser: navigator.userAgent,
  online: navigator.onLine,
  title: document.title
};
console.log("Page state:", pageState);

// Store and retrieve a simple value
localStorage.setItem("lastVisit", new Date().toISOString());
const lastVisit = localStorage.getItem("lastVisit");
console.log("Last visit:", lastVisit);

// Request JSON from a public test API
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => {
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }
    return response.json();
  })
  .then(data => console.log("Todo:", data))
  .catch(error => console.error("Fetch failed:", error));

Part by part: navigator.userAgent returns a string describing the browser. document.title reads the current page title. localStorage.setItem saves a string under a key, and localStorage.getItem reads it back. fetch sends a network request and returns a promise. The first .then checks the response status, the second converts JSON text into a JavaScript object, and .catch handles network or parsing errors.

Common mistakes

• Assuming Web APIs are JavaScript language features: fetch and document exist because the browser provides them, not because JavaScript itself defines them.
• Forgetting that fetch is asynchronous: The data is not available immediately after calling fetch. Use .then or await.
• Ignoring response status: A failed HTTP response, such as 404, does not automatically reject the promise. Check response.ok or response.status.
• Storing objects directly in localStorage: localStorage stores strings. Convert objects with JSON.stringify and read them with JSON.parse.

When to use it

Use Web APIs when your JavaScript needs to interact with the browser environment. Use core JavaScript language features when you only need to process data in memory.

Practice

Guided exercise: In the browser console, log navigator.onLine, save your name with localStorage.setItem("name", "YourName"), then read it back with localStorage.getItem("name"). Expected output: true or false, then YourName.

Challenge: Use fetch to request https://jsonplaceholder.typicode.com/users/1 and log the user's name. Expected output is a name such as Leanne Graham. Hint: check response.ok, call response.json(), then use data.name.

Quick check

Question: Why is fetch usually handled with .then or await?

Answer: Because fetch is asynchronous and returns a promise; the response data arrives later, not immediately.

Summary

Web APIs are the bridge between JavaScript and the browser. They let your code read page information, store data, and communicate with servers. Learning to recognize which API you need, and whether it is synchronous or asynchronous, is a core skill for front-end JavaScript.