Sanjoy Saha

Dec 25, 2024 • 1 min read • 

JavaScript Web APIs

JavaScript Web APIs

JavaScript Web APIs allow developers to build dynamic and interactive web applications. In this blog I have mentioned 5 JavaScript Web APIs along with examples.


1. Fetch API

The Fetch API is widely used for interacting with RESTful APIs. It enables developers to retrieve or send data asynchronously.

Example: GET Request

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. DOM (Document Object Model) API

The DOM API provides methods to select and modify elements in a webpage.

Example: Changing Text Content

const heading = document.querySelector('h1');
heading.textContent = 'Hello, World!';
heading.style.color = 'blue';

3. Local Storage API

Local Storage is useful for saving user preferences or application data without relying on a server.

Example: Save and Retrieve Data

// Save the data
localStorage.setItem('theme', 'dark');

// Retrieve data
const theme = localStorage.getItem('theme');
console.log(`Selected theme: ${theme}`);

4. Geolocation API

The Geolocation API is used for location-based services like maps or local search results.

Example: Getting the User's Coordinates

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log(`Latitude: ${position.coords.latitude}`);
    console.log(`Longitude: ${position.coords.longitude}`);
  }, error => {
    console.error('Error retrieving location:', error);
  });
} else {
  console.error('Geolocation not supported.');
}

5. Notification API

The Notification API lets your app send desktop like notifications.

Example: Sending a Notification

if (Notification.permission === 'granted') {
  new Notification('Hello!', { body: 'This is your notification.' });
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      new Notification('Hello!', { body: 'This is your notification.' });
    }
  });
}

It Enhances user engagement with timely alerts.


Start experimenting with these APIs.

Join Sanjoy on Peerlist!

Join amazing folks like Sanjoy and thousands of other people in tech.

Create Profile

Join with Sanjoy’s personal invite link.

0

6

0