HTML5 APIs & Browser Features

HTML5 APIs & Browser Features

HTML5 APIs are browser-provided interfaces that allow web applications to access advanced capabilities such as local storage, device location, graphics, background processing, network communication and browser history.

HTML provides the structure of a webpage, while browser APIs allow JavaScript to interact with browser features and device capabilities.

1. What is an API?

API stands for Application Programming Interface.

An API provides a defined way for one software component to communicate with another.

In web development, browser APIs allow JavaScript programs to communicate with browser functionality.

Simple Example

navigator.geolocation.getCurrentPosition(
    function(position) {
        console.log(position.coords.latitude);
        console.log(position.coords.longitude);
    }
);

Here, JavaScript uses the browser's Geolocation API.

2. Important HTML5 and Browser APIs

3. Web Storage API

The Web Storage API allows web applications to store key-value data in the browser.

The two main storage mechanisms are:

• localStorage
• sessionStorage

4. localStorage

localStorage stores data that remains available across browser sessions until it is removed.

Store Data

localStorage.setItem(
    "username",
    "Alex"
);

Read Data

const username =
    localStorage.getItem("username");

console.log(username);

Remove One Item

localStorage.removeItem("username");

Clear Storage

localStorage.clear();

5. sessionStorage

sessionStorage stores data for the current browser tab/session.

sessionStorage.setItem(
    "theme",
    "dark"
);

const theme =
    sessionStorage.getItem("theme");

console.log(theme);

6. Geolocation API

The Geolocation API allows a webpage to request the user's geographic location.

The browser requires user permission before providing location information.

Example

navigator.geolocation.getCurrentPosition(
    function(position) {

        console.log(
            "Latitude:",
            position.coords.latitude
        );

        console.log(
            "Longitude:",
            position.coords.longitude
        );

    },
    function(error) {

        console.log(
            "Unable to get location."
        );

    }
);

7. Canvas API

The <canvas> element provides a drawable area that JavaScript can use to create graphics.

<canvas
    id="drawingArea"
    width="400"
    height="200">

    Your browser does not support canvas.

</canvas>

Drawing with JavaScript

const canvas =
    document.getElementById("drawingArea");

const ctx =
    canvas.getContext("2d");

ctx.fillRect(
    50,
    40,
    150,
    80
);

Canvas can be used for games, diagrams, visualizations, drawing applications and other graphics-based interfaces.

8. Canvas vs SVG

9. HTML Drag and Drop API

HTML provides attributes and events that can be used to implement drag-and-drop interactions.

Draggable Element

<div
    id="item"
    draggable="true">

    Drag Me

</div>

JavaScript

const item =
    document.getElementById("item");

item.addEventListener(
    "dragstart",
    function(event) {

        event.dataTransfer.setData(
            "text/plain",
            "item"
        );

    }
);

Common drag-and-drop events include dragstart, dragover and drop.

10. Web Workers

A Web Worker allows JavaScript code to run in a background thread, helping keep the main page responsive during computationally intensive tasks.

main.js

const worker =
    new Worker("worker.js");

worker.postMessage(100);

worker.onmessage =
    function(event) {

        console.log(
            "Result:",
            event.data
        );

    };

worker.js

self.onmessage =
    function(event) {

        const result =
            event.data * event.data;

        self.postMessage(result);

    };

11. Fetch API

The Fetch API provides a modern interface for making HTTP requests.

GET Request

fetch("/api/courses")
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        console.log(data);
    })
    .catch(function(error) {
        console.error(error);
    });

Using async/await

async function loadCourses() {

    try {

        const response =
            await fetch("/api/courses");

        const data =
            await response.json();

        console.log(data);

    } catch (error) {

        console.error(error);

    }

}

12. Fetch API — POST Request

fetch("/api/courses", {

    method: "POST",

    headers: {
        "Content-Type": "application/json"
    },

    body: JSON.stringify({
        title: "HTML",
        level: "Beginner"
    })

})
.then(function(response) {
    return response.json();
})
.then(function(data) {
    console.log(data);
});

The method specifies the HTTP method, headers provide metadata and body contains the request data.

13. WebSocket API

The WebSocket API provides persistent, two-way communication between a client and server.

const socket =
    new WebSocket(
        "wss://example.com/socket"
    );

socket.onopen =
    function() {

        socket.send(
            "Hello Server"
        );

    };

socket.onmessage =
    function(event) {

        console.log(
            "Server:",
            event.data
        );

    };

WebSockets are useful for applications requiring real-time communication.

14. History API

The History API allows JavaScript to manipulate the browser's session history without necessarily performing a complete page navigation.

pushState()

history.pushState(
    {},
    "",
    "/courses/html"
);

replaceState()

history.replaceState(
    {},
    "",
    "/courses/css"
);

Back

history.back();

The History API is important in applications that manage navigation dynamically, including many single-page applications.

15. Notifications API

The Notifications API can display notifications outside the webpage interface, subject to browser support and user permission.

Notification.requestPermission()
    .then(function(permission) {

        if (permission === "granted") {

            new Notification(
                "Course Update",
                {
                    body:
                        "A new HTML lesson is available."
                }
            );

        }

    });

16. Fullscreen API

The Fullscreen API allows an element to request fullscreen presentation.

const video =
    document.getElementById("video");

video.requestFullscreen();

Fullscreen behavior is subject to browser security and user interaction requirements.

17. Clipboard API

The Clipboard API provides programmatic access to clipboard operations in supported contexts.

async function copyText() {

    await navigator.clipboard.writeText(
        "HTML is the standard markup language."
    );

}

Clipboard operations can be restricted by browser security policies and permissions.

18. Media Capture

The MediaDevices API can request access to devices such as cameras and microphones, subject to permissions.

navigator.mediaDevices
    .getUserMedia({
        video: true,
        audio: true
    })
    .then(function(stream) {

        console.log(
            "Media stream available."
        );

    })
    .catch(function(error) {

        console.error(error);

    });

19. Online and Offline Detection

Browsers expose information about the network connectivity state through navigator.onLine and related events.

if (navigator.onLine) {

    console.log("Online");

} else {

    console.log("Offline");

}

Applications can also listen for connectivity-related events.

window.addEventListener(
    "online",
    function() {
        console.log("Connection restored.");
    }
);

window.addEventListener(
    "offline",
    function() {
        console.log("Connection lost.");
    }
);

20. Custom Data Attributes

HTML allows developers to store custom data using data-* attributes.

<button
    id="courseButton"
    data-course-id="101"
    data-level="beginner">

    HTML Course

</button>

Access Using JavaScript

const button =
    document.getElementById("courseButton");

console.log(
    button.dataset.courseId
);

console.log(
    button.dataset.level
);

Custom data attributes are useful for storing small pieces of application-specific information associated with an element.

21. requestAnimationFrame()

requestAnimationFrame() allows JavaScript to schedule animation updates in a way designed for browser rendering.

function animate() {

    // Update animation state here.

    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

It is commonly used for smooth browser-based animations.

22. Feature Detection

Browser capabilities can vary. A web application can test whether a particular API exists before using it.

if ("geolocation" in navigator) {

    console.log(
        "Geolocation is available."
    );

} else {

    console.log(
        "Geolocation is not available."
    );

}

23. Browser API Security and Permissions

Browser APIs that access sensitive capabilities are subject to security restrictions.

24. Practical Project — Browser Feature Dashboard

Create a small webpage that demonstrates several browser APIs.

Required Features

1. Save a username using localStorage.
2. Display the saved username when the page loads.
3. Display the user's location after permission is granted.
4. Provide a canvas drawing area.
5. Fetch sample data from a web API.
6. Display online/offline status.
7. Provide a notification button.

Advanced Challenge

Add a Web Worker that performs a computationally intensive calculation without blocking the main interface.

25. Interview Questions

26. Exam Questions

localStorage.setItem(
    "course",
    "HTML"
);

const course =
    localStorage.getItem("course");

console.log(course);

27. Common Mistakes