Overview of HTML Web APIs

HTML Web APIs extend the functionality of web browsers, enabling rich interactive experiences:

Using HTML5 Geolocation API

Get the user's current position:

<button id="getLocation" class="btn btn-primary">Get My Location</button>
<div id="locationOutput"></div>

<script>
document.getElementById('getLocation').addEventListener('click', () => {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const output = document.getElementById('locationOutput');
                output.innerHTML = `
                    Latitude: ${position.coords.latitude}<br>
                    Longitude: ${position.coords.longitude}<br>
                    Accuracy: ${position.coords.accuracy} meters
                `;
            },
            (error) => {
                console.error('Error getting location:', error);
                alert('Error getting location: ' + error.message);
            }
        );
    } else {
        alert('Geolocation is not supported by this browser.');
    }
});
</script>

Geolocation methods:

• getCurrentPosition() - One-time position request
• watchPosition() - Continuously monitor position
• clearWatch() - Stop watching position

Drag and Drop with HTML

Basic drag and drop implementation:

<div id="dragItem" draggable="true" 
     style="width: 100px; height: 100px; background-color: #f0f;">
    Drag Me
</div>

<div id="dropZone" 
     style="width: 200px; height: 200px; border: 2px dashed #000; margin-top: 20px;">
    Drop Here
</div>

<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');

// Drag events for the draggable element
dragItem.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
    e.target.style.opacity = '0.4';
});

dragItem.addEventListener('dragend', (e) => {
    e.target.style.opacity = '1';
});

// Drop events for the drop zone
dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.target.style.border = '2px dashed #0f0';
});

dropZone.addEventListener('dragleave', (e) => {
    e.target.style.border = '2px dashed #000';
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(id);
    e.target.appendChild(draggedElement);
    e.target.style.border = '2px dashed #000';
});
</script>

Essential drag and drop events:

Introduction to Web Storage (localStorage & sessionStorage)

Web Storage provides simple key-value storage:

// Store data
localStorage.setItem('username', 'john_doe');

// Retrieve data
const user = localStorage.getItem('username');

// Remove data
localStorage.removeItem('username');

// Clear all
localStorage.clear();

// Store data
sessionStorage.setItem('tempData', 'value');

// Retrieve data
const temp = sessionStorage.getItem('tempData');

Running Scripts in Background with Web Workers

Web Workers allow JavaScript to run in background threads:

// main.js
const worker = new Worker('worker.js');

// Send message to worker
worker.postMessage('Start processing');

// Receive message from worker
worker.onmessage = (e) => {
    console.log('Message from worker:', e.data);
};

// Handle errors
worker.onerror = (error) => {
    console.error('Worker error:', error);
};

// worker.js
self.onmessage = (e) => {
    console.log('Message from main:', e.data);
    
    // Simulate intensive task
    const result = doComplexCalculation();
    
    // Send result back
    self.postMessage(result);
};

function doComplexCalculation() {
    // Some CPU-intensive work
    return 'Calculation result';
}

Key points about Web Workers:

• Run in separate global context
• No DOM access
• Communicate via message passing
• Perfect for CPU-intensive tasks

Server-Sent Events (SSE) with HTML

SSE enables one-way real-time updates from server to client:

// Client-side JavaScript
const eventSource = new EventSource('sse-endpoint');

// Handle messages
eventSource.onmessage = (e) => {
    console.log('New message:', e.data);
    document.getElementById('updates').innerHTML += e.data + '<br>';
};

// Handle specific event types
eventSource.addEventListener('statusUpdate', (e) => {
    console.log('Status update:', e.data);
});

// Handle errors
eventSource.onerror = () => {
    console.error('EventSource failed.');
};

// Server-side (Node.js example)
app.get('/sse-endpoint', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });
    
    // Send message every second
    const interval = setInterval(() => {
        res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);
    
    // Clean up on client disconnect
    req.on('close', () => {
        clearInterval(interval);
    });
});

SSE vs WebSockets: