Window and Web APIs

Window and Web APIs

Window Object:

  • The window object is associated to a tab in browser,
  • It has a lot of methods and properties for different purposes,
  • All the methods and properties on "window" object are directly accessible in browser-side javascript code, without importing anything,
  • These methods are also called Browser APIs

Web APIs:

  • There are certain Functions which can be used directly in Javascript code,
  • Are also called as Third party APIs
  • List of all the Web APIs:
    https://developer.mozilla.org/en-US/docs/Web/API

Let's see what all interesting things are possible using different WebAPIs and Window methods

Window and Web APIs

You can grab user's current location,

using:

window.navigator.geolocation.getCurrentPosition

 

If the user is moving, you can code it to send regular location updates at a fixed time interval,

You can store all the location updates, in localStorage as well

Window and Web APIs

You can grab user's file input and show a preview on UI using FileReader:

 

const reader = new FileReader();

Window and Web APIs

You can grab user's audio input and convert it to text using:

window.SpeechRecognition()

 

You can store it to localStorage as well

Window and Web APIs

You can record user's audio input and play it back using:

window.SpeechRecognition(), and localStorage

 

You can store it to localStorage as well

Window and Web APIs

You can grab user's camera input  for image using:

navigator

.mediaDevices
.getUserMedia({
  video: true
})

You can store it to localStorage as well

Window and Web APIs

You can grab user's camera input  for image, show image on UI using <img> tag

navigator

.mediaDevices
.getUserMedia({
  video: true
})

You can store it to localStorage as well

Window and Web APIs

You can grab user's camera input  video and audio using:

navigator

.mediaDevices
.getUserMedia({
  video: true,

  audio: true
})

You can store both audio and video to localStorage as well

Window and Web APIs

You can record user's screen using:

const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true
    });

 

You can store the recorded video to localStorage as well

Window and Web APIs

You can record user's screen along with audio using:

const displayStream = await navigator

.mediaDevices

.getDisplayMedia({ video: true });


audioStream = await navigator

.mediaDevices

.getUserMedia({ audio: true });​

 

You can store the recorded video and audio to localStorage as well

Window and Web APIs

  • Returns a Promise that resolves with a BatteryManager object providing information about the system's battery,
  • Returns the preferred language of the user, usually a two-letter lowercase string such as "en" for English or "fr" for French,
  • Returns a string representing the platform of the browser, such as "Win32" for Windows 32-bit, "MacIntel" for Macintosh Intel CPUs, etc.,
  • Returns the user agent string for the current browser, which can be parsed to obtain information about the browser and the device,
  • Returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. This can help you tailor your content or features based on the user's network speed,
  • Returns a Boolean indicating whether the browser is in online mode or not, allowing you to check if the user has an active internet connection.
navigator.getBattery();
navigator.language
navigator.platform
navigator.userAgent
navigator.connection.effectiveType
navigator.onLine

Window and Web APIs

  • window.innerWidth: Returns the width of the browser's content area (viewport) in pixels, including scrollbars if they are visible.
  • window.innerHeight: Returns the height of the browser's content area (viewport) in pixels, including scrollbars if they are visible.
  • document.documentElement.clientWidth: Returns the width of the viewport in pixels, excluding the scrollbar if present.
  • document.documentElement.clientHeight: Returns the height of the viewport in pixels, excluding the scrollbar if present.
  • window.scrollX or window.pageXOffset: Returns the number of pixels the document has been scrolled horizontally.
  • window.scrollY or window.pageYOffset: Returns the number of pixels the document has been scrolled vertically.

 

  • document.documentElement.scrollTop: Returns the number of pixels the content of an element is scrolled vertically from the top.
  • document.documentElement.scrollHeight: Returns the entire height of the document, including content not visible on the screen due to scrolling.
  • event.clientX: Returns the horizontal coordinate (relative to the viewport) of the mouse pointer when an event is triggered.
  • event.clientY: Returns the vertical coordinate (relative to the viewport) of the mouse pointer when an event is triggered.

Window and Web APIs

  • Few other useful window methods:
// Scroll to the top of the page
window.scrollTo(0, 0);

// Open a new window with specific dimensions
window.open("https://example.com", "_blank", "width=500,height=500"); 

// Close the current window
window.close();

// Go back one page
window.history.back();

// Reload the page
window.location.reload();

// Print the current URL
window.location.href;

Window and Web APIs

  • Few other useful document methods:
// Print the current URL
console.log(document.location.href);
console.log(document.URL);


// document.referrer: Returns the URL of the 
// document that referred the current document.
console.log(document.referrer);


 // Get the current title
console.log(document.title);
 // Set a new title
document.title = "New Title";

// Print the document's root element
// usually the <html> element
console.log(document.documentElement);

 // Print the <head> element
console.log(document.head);

 // Print the <body> element
console.log(document.body);

Window and Web APIs

By Yash Priyam

Window and Web APIs

  • 136

More from Yash Priyam