learn2kode.in

Menu

JavaScript Tutorial

Menu

What Are JavaScript Web APIs?

JavaScript Web APIs are built-in browser features that allow JavaScript to interact with the browser, system hardware, and external services. They are not part of core JavaScript, but are provided by the browser environment to extend JavaScript’s capabilities.

Why JavaScript Web APIs Are Important

Web APIs allow you to:

  • Fetch data from servers (APIs)
  • Store data in the browser
  • Access user location
  • Work with files, media, and hardware
  • Build modern, interactive web applications

Without Web APIs, JavaScript would be limited to basic logic only.

How JavaScript Web APIs Work
  • JavaScript calls a Web API
  • The browser handles the task
  • The result is returned to JavaScript
  • JavaScript updates the UI

This is why Web APIs often work asynchronously.

Common JavaScript Web APIs (Beginner-Friendly)

Fetch API

The Fetch API is used to make HTTP requests (GET, POST, etc.).

Copy Text 
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Used for:

  • Calling REST APIs
  • Loading dynamic data
Local Storage API

Stores data permanently in the browser.

Copy Text 
localStorage.setItem("username", "Learn2Kode");
let name = localStorage.getItem("username");
  • Data remains even after browser restart
Session Storage API

Stores data for the current session only.

Copy Text 
sessionStorage.setItem("token", "12345");
  • Data is cleared when the tab is closed
Geolocation API

Used to get the user’s location (with permission).

Copy Text 
navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude);
  console.log(position.coords.longitude);
});
  • Requires HTTPS and user consent
DOM API (Brief Reminder)

The DOM itself is a Web API that allows JavaScript to manipulate HTML.

Copy Text 
document.getElementById("title").textContent = "Hello Web APIs";
Timer APIs

Provided by the browser for delays and intervals.

Copy Text 
setTimeout(() => {
  console.log("Executed after 2 seconds");
}, 2000);

JavaScript Web APIs vs Core JavaScript

Feature Core JavaScript Web APIs
Provided by ECMAScript Browser
Examples Variables, loops Fetch, DOM, Storage
Async support Limited Strong

When to Use JavaScript Web APIs

Use Web APIs when you need to:

  • Communicate with servers
  • Store client-side data
  • Access browser features
  • Improve user experience

Best Practices for Using Web APIs

  • Always handle errors
  • Use HTTPS for secure APIs
  • Ask user permission clearly
  • Avoid blocking the main thread
  • Use async/await for readability
JavaScript Async / Await
JavaScript Fetch API