1. Geolocation API:
The Geolocation API allows web applications to access the device's geographical location, providing information such as latitude, longitude, and altitude. This enables developers to create location-aware web applications, such as mapping services, weather forecasts, and location-based services.
How to Use Geolocation API:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
}
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation Example</title>
</head>
<body>
<button onclick="getLocation()">Get Location</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("demo").innerHTML = "Latitude: " + latitude + "<br>Longitude: " + longitude;
}
</script>
</body>
</html>
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
}
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation Example</title>
</head>
<body>
<button onclick="getLocation()">Get Location</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("demo").innerHTML = "Latitude: " + latitude + "<br>Longitude: " + longitude;
}
</script>
</body>
</html>
2. Local Storage API:
The Local Storage API allows web applications to store key-value pairs locally within the user's browser, persisting even after the browser is closed. This enables developers to create offline-capable web applications, store user preferences, and cache data for improved performance.
How to Use Local Storage API:
// Set item in local storage
localStorage.setItem("key", "value");
// Get item from local storage
var value = localStorage.getItem("key");
// Remove item from local storage
localStorage.removeItem("key");
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local Storage Example</title>
</head>
<body>
<input type="text" id="inputText">
<button onclick="saveData()">Save Data</button>
<button onclick="retrieveData()">Retrieve Data</button>
<p id="output"></p>
<script>
function saveData() {
var data = document.getElementById("inputText").value;
localStorage.setItem("userData", data);
}
function retrieveData() {
var data = localStorage.getItem("userData");
document.getElementById("output").innerHTML = "Stored Data: " + data;
}
</script>
</body>
</html>
localStorage.setItem("key", "value");
// Get item from local storage
var value = localStorage.getItem("key");
// Remove item from local storage
localStorage.removeItem("key");
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local Storage Example</title>
</head>
<body>
<input type="text" id="inputText">
<button onclick="saveData()">Save Data</button>
<button onclick="retrieveData()">Retrieve Data</button>
<p id="output"></p>
<script>
function saveData() {
var data = document.getElementById("inputText").value;
localStorage.setItem("userData", data);
}
function retrieveData() {
var data = localStorage.getItem("userData");
document.getElementById("output").innerHTML = "Stored Data: " + data;
}
</script>
</body>
</html>
3. Web Workers API:
The Web Workers API allows web applications to run JavaScript code in background threads, separate from the main execution thread. This enables developers to perform CPU-intensive tasks, such as data processing and calculations, without blocking the user interface or affecting performance.
How to Use Web Workers API:
// Create a new worker
var worker = new Worker("worker.js");
// Send message to worker
worker.postMessage("Message to worker");
// Receive message from worker
worker.onmessage = function(event) {
console.log("Message from worker: " + event.data);
};
// Terminate worker
worker.terminate();
Example:
worker.js:
javascript
Copy code
// Worker code
self.onmessage = function(event) {
var message = event.data;
console.log("Message received in worker: " + message);
var result = "Processed: " + message.toUpperCase();
self.postMessage(result);
};
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Workers Example</title>
</head>
<body>
<button onclick="startWorker()">Start Worker</button>
<script>
var worker;
function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(worker) == "undefined") {
worker = new Worker("worker.js");
worker.onmessage = function(event) {
console.log("Message from worker: " + event.data);
};
}
worker.postMessage("Hello World!");
} else {
console.log("Web Workers are not supported by this browser.");
}
}
</script>
</body>
</html>
Benefits of HTML5 APIs:
- Enhanced Functionality: HTML5 APIs provide access to device capabilities and functionalities that were previously unavailable to web applications, enabling developers to create richer and more interactive experiences.
- Improved Performance: APIs like Local Storage and Web Workers enable developers to optimize performance by storing data locally and offloading CPU-intensive tasks to background threads, respectively.
- Enhanced User Experience: Geolocation API allows developers to create location-aware applications, while Local Storage API enables seamless offline experiences, enhancing overall user satisfaction.
- Increased Productivity: By leveraging HTML5 APIs, developers can streamline development workflows, reduce development time, and deliver feature-rich web applications more efficiently.
Practice Excercise Practice now