Html provides several APIs (Application Programming Interfaces) that allow web developers to enhance the functionality and interactivity of their web pages. Here’s a brief overview of some commonly used APIs:
Html Geolocation API
- The Geolocation API allows you to retrieve the geographic location (latitude and longitude) of the device running the web browser. This information can be used to provide location-aware services.
- javascript Example Code:
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude: " + position.coords.latitude +
", Longitude: " + position.coords.longitude);
});
} else {
console.log("Geolocation is not supported by this browser.");
}
Html Drag and Drop API
- The Drag and Drop API allows you to implement drag-and-drop functionality in your web pages. It provides events and methods to handle dragging and dropping of elements.
- Html Example Code:
<div id="dragTarget" draggable="true">Drag me!</div>
<script>
var dragTarget = document.getElementById('dragTarget');
dragTarget.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', 'Dragged item');
});
dragTarget.addEventListener('dragend', function(e) {
console.log('Item dropped');
});
</script>
Html Web Storage (LocalStorage and SessionStorage)
- The Web Storage API allows you to store key-value pairs locally in a user's browser. There are two types of storage: localStorage (persistent storage until explicitly deleted) and sessionStorage (storage for a session, deleted when the page session ends).
- javascript Example Code:
// Store data in localStorage
localStorage.setItem('username', 'John');
// Retrieve data from localStorage
var username = localStorage.getItem('username');
console.log('Username:', username);
// Clear data from localStorage
localStorage.removeItem('username');
Html Web Workers API
- The Web Workers API allows you to run scripts in the background (in separate threads) to handle computationally intensive tasks without blocking the main UI thread. This helps improve the responsiveness of web applications.
- javascript Example Code:
// Create a new worker
var worker = new Worker('worker.js');
// Send data to worker
worker.postMessage({ message: 'Hello' });
// Receive data from worker
worker.onmessage = function(event) {
console.log('Received message from worker:', event.data);
};
// Close worker
worker.terminate();
All Code In Single File:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML APIs Example</title>
<style>
#dragTarget {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
cursor: move;
}
</style>
</head>
<body>
<h2>HTML APIs Example</h2>
<!-- Geolocation API Example -->
<button onclick="getLocation()">Get Location</button>
<p id="location"></p>
<!-- Drag and Drop API Example -->
<div id="dragTarget" draggable="true">Drag me!</div>
<!-- Web Storage API Example -->
<input type="text" id="usernameInput" placeholder="Enter username">
<button onclick="saveUsername()">Save Username</button>
<button onclick="loadUsername()">Load Username</button>
<p id="usernameDisplay"></p>
<!-- Web Workers API Example -->
<p>Open your browser console to see messages from Web Worker:</p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
// Geolocation API
function getLocation() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
var locationDisplay = document.getElementById('location');
locationDisplay.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
});
} else {
alert("Geolocation is not supported by this browser.");
}
}
// Drag and Drop API
var dragTarget = document.getElementById('dragTarget');
dragTarget.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', 'Dragged item');
});
dragTarget.addEventListener('dragend', function(e) {
console.log('Item dropped');
});
// Web Storage API
function saveUsername() {
var usernameInput = document.getElementById('usernameInput').value;
localStorage.setItem('username', usernameInput);
console.log('Username saved:', usernameInput);
}
function loadUsername() {
var savedUsername = localStorage.getItem('username');
var usernameDisplay = document.getElementById('usernameDisplay');
if (savedUsername) {
usernameDisplay.innerHTML = "Stored Username: " + savedUsername;
} else {
usernameDisplay.innerHTML = "No username stored.";
}
}
// Web Workers API
var worker;
function startWorker() {
worker = new Worker('worker.js');
worker.postMessage({ message: 'Hello' });
worker.onmessage = function(event) {
console.log('Received message from worker:', event.data);
};
}
function stopWorker() {
worker.terminate();
console.log('Worker terminated.');
}
</script>
</body>
</html>
No comments:
Post a Comment