web-apis.md

⚑ Web APIs:

Web APIs are a set of built-in JavaScript objects that can provide an access to the browser's environment and allow web applications to interact with hardware, network resources, and other parts of the system through the browser.

☴ Overview:

1. Fetch API
2. WebSockets
3. Local Storage
4. Session Storage
5. Geolocation API
6. Canvas API
7. Web Audio API
8. Clipboard API
9. Web camera API
10. Microphone API
11. Handling Cookies
12. Other APIs

✦ Fetch API:

A modern API for making network requests for the data required in JavaScript.

Syntax:

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // Handle the data
  })
  .catch(error => {
    // Handle errors
  });

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

✦ WebSockets:

A protocol for establishing persistent, full-duplex communication channels between a client and a server.

Syntax:

const socket = new WebSocket('ws://example.com:8080');

const socket = new WebSocket('ws://example.com:8080');

socket.onopen = () => {
  console.log('WebSocket connection opened');
};

socket.onmessage = (event) => {
  console.log('Received message:', event.data);
};

socket.onclose = () => {
  console.log('WebSocket connection closed');
};

✦ Local Storage:

It allows to store data locally in the browser for a specific domain.

/* Setting local storage value for specific key  */
localStorage.setItem('key', 'value');
/* Reading local storage for the key */
let value = localStorage.getItem('key');
/* Removing local storage value on the key */
localStorage.removeItem('key');
/* Clearing local storage on the current site */
localStorage.clear();

✦ Session Storage:

It allows to store data locally in the browser for a single session.

/* Setting session storage */
sessionStorage.setItem('cart', JSON.stringify(cart));
/* Reading session storage */
let cart = JSON.parse(sessionStorage.getItem('cart'));

✦ Geolocation API:

It provides access to the user's geographical location.

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  (error) => {
    console.error('Error:', error);
  }
);

✦ Canvas API:

It allows to create 2d graphics on an HTML canvas element.

let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(10, 10, 100, 100);

See More on this Canvas Reference

✦ Web Audio API:

It provides an interface for creating, manipulating, and processing audio data.

Syntax:

let audioContext = new AudioContext();

audioContext.createOscillator().start();

✦ Clipboard API:

It provides access to the user's clipboard.

navigator.clipboard.writeText('Hello, world!');
navigator.clipboard.readText().then(text => console.log(text));

✦ Web camera API:

It provides access to the user's webcam.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    let video = document.getElementById('myVideo');
    video.srcObject = stream;
  })
  .catch(error => {
    console.error('Error:', error);
  });

✦ Microphone API:

It provides access to the user's microphone.

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    let audioContext = new AudioContext();
    let source = audioContext.createMediaStreamSource(stream);
    // ... (process audio data)
  })
  .catch(error => {
    console.error('Error:', error);
  });

✦ Handling Cookies:

Cookies are small pieces of data stored on the user's computer by a web server as same as local storage.

/* Setting Cookies */
document.cookie = 'name=Vel Murugan; expires=Thu, 31 Dec 2024 12:00:00 GMT';
/* Reading Cookies */
let cookies = document.cookie.split(';');

✦ Other APIs:

• Battery Status API: Provides information about the device's battery status.
• Vibration API: Allows the device to vibrate.
• Device Orientation API: Provides information about the device's orientation.
• Device Motion API: Provides information about the device's acceleration and rotation.
• Pointer Lock API: Allows the user to lock the pointer to an element

---

⇪ To Top

❮ Previous Topic

⌂ Goto Home Page