Chapter 9: HTML APIs (Geolocation, Drag & Drop, etc.)

9.1 Introduction to HTML APIs

HTML provides built-in APIs that allow web pages to interact with browsers and devices. Some common APIs include:

9.2 Geolocation API

The Geolocation API allows web pages to access the user's location (with permission). It is commonly used in maps and location-based applications.

Example:

    <button onclick="getLocation()">Get Location</button>
    <p id="location"></p>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    document.getElementById("location").innerHTML =
                        "Latitude: " + position.coords.latitude + 
                        "<br>Longitude: " + position.coords.longitude;
                });
            } else {
                document.getElementById("location").innerHTML = "Geolocation is not supported.";
            }
        }
    </script>

9.3 Drag and Drop API

The Drag and Drop API allows users to drag elements and drop them into another location.

Example:

    <div id="dragElement" draggable="true" ondragstart="drag(event)">Drag Me</div>
    <div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:200px; height:100px; border:1px solid black;">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>

9.4 Clipboard API

The Clipboard API allows users to copy and paste content.

Example:

    <input type="text" value="Copy this text" id="copyText">
    <button onclick="copyToClipboard()">Copy</button>

    <script>
        function copyToClipboard() {
            var copyText = document.getElementById("copyText");
            copyText.select();
            document.execCommand("copy");
            alert("Copied: " + copyText.value);
        }
    </script>

9.5 Web Workers API

The Web Workers API allows JavaScript to run in the background without affecting the UI.

Example:

    <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 not supported.";
            }
        }
    </script>

9.6 Summary

In this chapter, we covered:

Next Chapter: HTML Web Storage