APIs Available in HTML5

Introduction

The full form of API is the Application Programming interface. An API is a collection of pre-built programs that can be used with the help of JavaScript. With the help of API, we can implement already-written code to fulfill the needs of the project you are working on.

Now, we are going to discuss some useful and popular APIs provided by HTML5.

Let's see a javascript code:

var count = 0;
function countFunction() {
               count += 1;
               postMessage("Welcome to JavaTpoint! (" + count + ")");
               setTimeout("countFunction()", 1000);
}

countFunction();

HTML Geolocation API

With the help of geolocation API, we can get the current location of the user or the page visitor. Also, with the help of this API, we can see the user's location only if the user allows it to do so, as it compromises the security and privacy of the user.

Syntax:

Methods available in Geolocation API:

There are so many methods available in the geolocation API. These are as follows.

1. getCurrentPosition() Method:

This method helps us obtain the object with properties such as latitude, longitude, accuracy, and altitude.

2. watchPosition() Method:

With the help of this method, we can get the current position of the user as well as the updated location when the position of the user changes or the user travels from one location to another location.

3. clearWatch() Method:

with the help of this method, we can stop the watchPosition() method from tracing the user anymore.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Geolocation API</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lover,</h1>
    <h3>Welcome to JavaTpoint!</h3>
    <button type="button" onclick="geoLoc()">
      Get Location
    </button>
  </div>
  <script>
    var container = document.getElementById("container");
    var pos = navigator.geolocation;
     
    function geoLoc() {
      if (pos)
        pos.getCurrentPosition(getLoc);
      else
        container.innerHTML = "Your browser does "
          + "not support the Geolocation API.";
    }

    function getLoc(loc) {
      container.innerHTML = "Latitude: " 
        + loc.coords.latitude +
        "<br>Longitude: " + 
        loc.coords.longitude;
    }
  </script>
</body>
</html>

Output:

When the user clicks on the get location button, then we get the below output.

Explanation:

In the above code, we have implemented the logic so that we get the current latitude and longitude of the user.

HTML Drag and Drop API

This is the most common feature nowadays. With the help of this feature, we can drag an item from one place and drop it in another.

Syntax:

With the help of the below syntax, we can make the element draggable as shown below:

<div draggable="true">
    //content of the element
</div>

Let's see an example and understand this properly.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Geolocation API</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #drop {
      height: 105px;
      width: 105px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lover,</h1>
    <h3>Welcome to javaTpoint!</h3>
     

<p>Drag image into the container</p>


    <div id="drop" ondrop="dropItem(event)"
      ondragover="droppable(event)"></div>

    <img src=
"./JTP logo.png"
      alt="javaTpoint" id="image"
      draggable="true" ondragstart="dragItem(event)"
      height="100px" width="100px">
  </div>

  <script>
    function droppable(e) {
      e.preventDefault();
    }

    function dragItem(e) {
      e.dataTransfer.setData("text", e.target.id);
    }

    function dropItem(e) {
      e.preventDefault();
      var content = e.dataTransfer.getData("text");
      e.target.appendChild(document.getElementById(content));
    }
  </script>
</body>
</html>

Output:

After dragging the image, we can get the below output:

HTML Web Storage API

With the help of HTML Web Storage API, we can store the data on the web browser. In earlier days, we can store the data in the form of cookies that can store a small amount of data and cannot transfer it further to the server. But when HTML 5 comes into the picture, with the help of the HTML web storage API, we can store large amounts of data compared to cookies and transfer them to the server. Using this API for storing data is more secure than using cookies.

There are two objects available in the HTML web storage API. These are as follows:

1. sessionStorage:

With the help of this object, we can temporarily store the data on the web browser such that if the browser is refreshed or closed, the data stored will be lost.

2. localStorage:

With the help of this object, we can store the data permanently on the browser with no expiration so that it will not be lost even if the browser is refreshed.

Let us understand this by taking an example.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #btnDiv {
      width: 20vw;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }

    .btn {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lovers,</h1>
    <h2 id="heading"></h2>
    <h3 id="desc"></h3>
    <div id="btnDiv">
      <button class="btn" onclick="getContent()">
        Get stored Data
      </button>
       
      <button class="btn" onclick="remContent()">
        Remove stored Data
      </button>
    </div>
  </div>
  <script>
    var head = document.getElementById('heading');
    var desc = document.getElementById("desc");
    function getContent() {
      if (typeof (Storage) !== "undefined") {

        // setItem() will set store the passed attribute
        // and value in localStorage
        localStorage.setItem('heading', 'Welcome to JavaTpoint!');
        localStorage.setItem('description',
          'A computer science portal for JTP Lovers.');
         
        // This is the way of accessing the items 
        // stored in the storage 
        head.innerText = localStorage.heading;
        desc.innerText = localStorage.description;
      }
      else {
        head.innerText = 
          "Your browser does not support web storage API.";
      }
    }

    function remContent() {

      // removeItem() will remove the passed attribute
      // and value from localStorage.
      localStorage.removeItem('heading');
      localStorage.removeItem('description');
      head.innerText = localStorage.heading;
      desc.innerText = localStorage.description;
    }
  </script>
</body>
</html>

Output:

When we click on the get stored data, then the message will be displayed as per the below output.

When we click on Remove Stored Data, then the message will be removed as per the output below.

HTML Web Worker API

When we try to upload a page, the page gets stuck until uploading is finished. But with the help of Web Worker API, we can upload the JavaScript without affecting the performance of the page. It helps to run JavaScript in the background independent of other scripts.

Let us understand this by taking an example.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #btnDiv {
      width: 20vw;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }

    .btn {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lovers,</h1>
    <h2 id="heading"></h2>
    <div id="btnDiv">
      <button class="btn" onclick="getJS()">
        Start executing JS
      </button>
      <button class="btn" onclick="remJS()">
        Stop executing JS
      </button>
    </div>
  </div>
  <script>
    var myWorker;
    var head = document.getElementById('heading');
    function getJS() {

      // Below condition will check for
      // the browser support.
      if (typeof (Worker) !== "undefined") {
         
        // The condition below will check for
        // existence of the worker
        if (typeof (myWorker) == "undefined") {
          myWorker = new Worker("myScript.js");
          // Above line Will create a worker that will 
          // execute the code of myscript.js file
        }

        // onmessage event triggers a function 
        // with the data stored in the external js file
        myWorker.onmessage = function (props) {
          head.innerText = props.data;
        }
      }
      else {
        head.innerText = 
          "Your browser does not support web storage API.";
      }
    }

    function remJS() {

      // Terminate() will terminate the current worker
      myWorker.terminate();
      myWorker = undefined;
    }
  </script>
</body>
</html>

Output:

Basic APIs in HTML5

Let's see some more basic APIs available in HTML5.

1. Ambient Light API:

This API allows us to get information about the ambient light levels detected by a device's light sensor.

2. Battery Status API:

With the help of this API, we can get information about the battery status of the device.

3. Canvas 2D Context:

With the help of this API, we can draw and manipulate the graphics in a browser.

4. Clipboard API:

This API allows us to access the operating system's copy, cut, and paste functionality.

5. Contacts:

With the help of this API, we can access the user's contacts repository in the web browser.

6. Drag and Drop:

With the help of this API, we can drag and drop items within and between browser windows.

7. File API:

With the help of this API, we can Provide programs with secure access to the device's file system.

8. Forms:

With the help of this API, we can Give programs access to the new data types defined in HTML5.

9. Fullscreen API:

This API allows us to control the use of the user's full screen for web pages without the browser user interface.

10. Gamepad API:

With the help of this API, we can provide support input from USB gamepad controllers.

11. Geolocation:

With the help of this API, we can Provide web applications with access to geographical location data about the user's device.

12. getUserMedia/Stream API:

This API allows us to provide access to external device data (such as webcam videos).

13. History API:

With the help of this API, we can Allow programs to manipulate the browser history.

14. HTML Microdata:

With the help of this API, we can Provide a way to annotate content with computer-readable labels.

15. Indexed database:

With the help of this API, we can Create a simple client-side database system in the web browser.

16. Internationalization API:

With the help of this API, we can provide access to locale-sensitive formatting and string comparison.

17. Offline apps:

With the help of this API, we can Allow programmers to make web apps available in offline mode.

18. Proximity API:

With the help of this API, we can Provide information about the distance between a device and an object.

19. Screen Orientation:

With the help of this API, we can read the screen orientation state (portrait or landscape) and give programmers the ability to know when it changes and lock it in place.

20. Selection:

With the help of this API, we can Support selecting elements in JavaScript using CSS-style selectors.

21. Server-sent events:

With the help of this API, we can Allow the server to push data to the browser without the browser needing to request it.

22. User Timing API:

With the help of this API, we can Give programmers access to high-precision timestamps to measure the performance of applications.

23. Vibration API:

With the help of this API, we can Allow access to the vibration functionality of the device.

24. Web Audio API:

With the help of this API, we can use API for processing and synthesizing audio.

25. Web messaging:

With the help of this API, we can Allow browser windows to communicate with each other across different origins.

26. Web Speech API:

With the help of this API, we can Provide speech input and text-to-speech output features.

27. Web storage:

With the help of this API, we can Allow the storage of key-value pairs in the browser.

28. Web socket:

With the help of this API, we can Open an interactive communication session between the browser and server.

29. Web Workers:

With the help of this API, we can Allow JavaScript to execute scripts in the background.

30. XMLHttpRequest2:

With the help of this API, we can improve XMLHttpRequest to eliminate the need to work around the same-origin policy errors and to make XMLHttpRequest work with the new features of HTML5.

Next TopicBrackets around HTML Tags

← prev next →