HTML APIs

Worked examples are fully visible. Check-yourself items are study aids you can reveal one at a time.

HTML5 introduced a variety of APIs (Application Programming Interfaces) that provide powerful ways to build dynamic, interactive, and efficient web applications. These APIs allow you to access and manipulate the browser environment, handle data storage, run background scripts, and more. Let’s explore some of the key HTML APIs: Geolocation API, Drag and Drop API, Web Storage API, Web Workers API, and Server-Sent Events (SSE).

The Geolocation API allows you to get the geographical location of the user’s device, making it possible to offer location-based services like maps, weather updates, and local content.

Basic Usage:

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation Example</title>
</head>
<body>
    <button onclick="getLocation()">Get My Location</button>
    <p id="location"></p>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                document.getElementById('location').innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            document.getElementById('location').innerHTML =
                "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>
</body>
</html>

Explanation:

navigator.geolocation: Checks if geolocation is available in the browser.
getCurrentPosition(): Attempts to get the user’s current location.
showPosition(): Called on success; displays latitude and longitude.
showError(): Called on failure; handles possible errors (e.g., permission denied).

The Drag and Drop API enables elements on a webpage to be draggable, enhancing user interactivity by allowing users to move elements around.

Basic Usage:

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
    <style>
        #drag1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            border: 2px solid #000;
        }

        #dropzone {
            width: 200px;
            height: 200px;
            background-color: lightgray;
            border: 2px dashed #000;
        }
    </style>
</head>
<body>
    <div id="drag1" draggable="true" ondragstart="drag(event)">Drag me</div>
    <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>

    <script>
        function allowDrop(event) {
            event.preventDefault();
        }

        function drag(event) {
            event.dataTransfer.setData("text", event.target.id);
        }

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

Explanation:

draggable="true": Makes the element draggable.
ondragstart: Called when the dragging starts.
ondragover: Allows dropping by preventing the default behavior.
ondrop: Called when the element is dropped into the target.

The Web Storage API provides a way to store data on the client side, available in two forms: localStorage and sessionStorage.

localStorage: Stores data with no expiration time. Data persists even after the browser is closed and reopened.
sessionStorage: Stores data for the duration of the page session (until the browser tab is closed).

Basic Usage of `localStorage`:

<!DOCTYPE html>
<html>
<head>
    <title>Web Storage Example</title>
</head>
<body>
    <input type="text" id="nameInput" placeholder="Enter your name">
    <button onclick="saveName()">Save Name</button>
    <button onclick="getName()">Get Name</button>
    <p id="display"></p>

    <script>
        function saveName() {
            var name = document.getElementById('nameInput').value;
            localStorage.setItem('name', name);
            alert('Name saved to localStorage.');
        }

        function getName() {
            var name = localStorage.getItem('name');
            if (name) {
                document.getElementById('display').innerHTML = 'Stored Name: ' + name;
            } else {
                document.getElementById('display').innerHTML = 'No name found in localStorage.';
            }
        }
    </script>
</body>
</html>

Explanation:

localStorage.setItem(): Stores the data.
localStorage.getItem(): Retrieves the stored data.

The Web Workers API allows you to run JavaScript code in the background, separate from the main execution thread. This improves performance by offloading complex operations.

Basic Usage:

HTML File:

<!DOCTYPE html>
<html>
<head>
    <title>Web Workers Example</title>
</head>
<body>
    <button onclick="startWorker()">Start Worker</button>
    <p id="result"></p>

    <script>
        var worker;
        function startWorker() {
            if (typeof(Worker) !== "undefined") {
                if (typeof(worker) == "undefined") {
                    worker = new Worker("worker.js");
                }
                worker.onmessage = function(event) {
                    document.getElementById('result').innerHTML = event.data;
                };
            } else {
                document.getElementById('result').innerHTML = "Web Workers are not supported in your browser.";
            }
        }
    </script>
</body>
</html>

worker.js File:

var i = 0;
function count() {
    i++;
    postMessage(i);
    setTimeout(count, 1000);
}
count();

Explanation:

new Worker("worker.js"): Creates a new worker running the specified JavaScript file.
postMessage(): Sends data from the worker to the main script.
onmessage: Handles messages received from the worker.

Server-Sent Events (SSE) allow a server to push real-time updates to a web page over a single HTTP connection. This is useful for applications like live feeds, notifications, and real-time data updates.

Basic Usage:

HTML File:

<div id="result"></div>

<script>
  if (typeof(EventSource) !== "undefined") {
    var source = new EventSource("server-sent-events.php");
    source.onmessage = function(event) {
      document.getElementById("result").innerHTML += event.data + "<br>";
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
  }
</script>

server.php File (Server Side):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('H:i:s');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Explanation:

EventSource: Creates a new connection to receive updates from the server.
onmessage: Handles messages sent from the server.
Server Side (PHP): Sends data as an event stream using appropriate headers.

End of lesson.

Back to HTML

HTML APIs

Overview

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Basic Usage of `localStorage`:

Web Workers API

Server-Sent Events (SSE)

Summary

HTML APIs

Overview

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Basic Usage of localStorage:

Web Workers API

Server-Sent Events (SSE)

Summary

Basic Usage of `localStorage`: