What is HTML?
HTML - HyperText Markup Language
HTML Provides some basic elements to develop a user interface.
What is API?
API - Application Program Interface between two mediums like (computer to computer) or (computer - program).
Let see HTML API
1) Geolocation
Geolocation API helps to get accurate position users.
Geolocation API, you can get user position latitude and longitude.
Geolocation API, you can render the google map based on the position.
In the Geolocation API response, you can get these props.
- coords.latitude
- coords.longitude
- coords.accuracy
- coords.altitude
- coords.altitudeAccuracy
- coords.heading
- coords.speed
- timestamp
Example Code
Map.html
<button onclick="getCurrentPosition()">Get Current Position</button>
<div id="geo-location">
// reponse will render here
</div>{codeBox}
Map.js
var glElement = document.getElementById("geo-location");
function getCurrentPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(printPosition);
} else {
glElement.innerHTML = "Geolocation is not supported by this browser.";
}
}
function printPosition(positionObj) {
glElement.innerHTML =
"Latitude: " + positionObj.coords.latitude + "<br>Longitude: " + positionObj.coords.longitude;
}{codeBox}
2) Drag and Drop
Drag and Drop API helps to drag and drop any HTML elements into any HTML element.
Drag and Drop is one of the most useful features on the user end.
Example Code
<!DOCTYPE html>
<html>
<head>
<style>
#dropArea {
width: 200px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
background: #efefef;
margin-bottom: 30px;
}
#dragElement {
width: 150px;
padding: 20px;
background-color: purple;
color: white;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the Attractive Aurora Text into the Drop Area :</p>
<div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dragElement" draggable="true" ondragstart="drag(event)">
Attractive Aurora
</div>
</body>
</html>{codeBox}
3)Web Storage
Web storage is not like cookies both session & local storage are stored at the client side.
Web Storage is a store the data based on origin, protocol, and domain.
Same-origin or protocol or domain users only can be able to view or edit storage information.
HTML web storage offers two types of object storage methods
- Local Storage
- Session Storage
Local Storage:
Local storage data has no expiration date until you manually clear them.
Local storage data are browser-based you can access them from any tab in the browser of the same origin.
The local storage limit is high compare to others.
Example Code:
Local Storage
// Set Localstorage
localStorage.setItem("name", "attractiveaurora");
// Set Localstorage
localStorage.getItem("name");
// Remove Localstorage
localStorage.removeItem("name");{codeBox}
Session Storage:
Session storage data are browser tab-based.
Session Storage same as local storage, but session storage gets expired when closing the browser tab.
Example Code:
Session Storage
// Set Sessionstorage
sessionStorage.setItem("name", "attractiveaurora");
// Set SessionStorage
sessionStorage.getItem("name");
// Remove SessionStorage
sessionStorage.removeItem("name");{codeBox}
4)Web Worker
Webworks one of the best HTML API perform a background task.
Web worker helps to run or execute your javascript script independently without affecting UI or HTML pages.
You can start, stop, terminate the web worker at any time.
Example Code:
Web work file - timer-webwork.js
function timeUpdater() {
const now = new Date()
postMessage(now);
setInterval("timeUpdater()",1000);
}
timeUpdater();{codeBox}
Web Worker
<html>
<body>
<p>Server Time: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var webWorkerInstance;
function startWorker() {
if (typeof Worker !== "undefined") {
if (typeof webWorkerInstance == "undefined") {
webWorkerInstance = new Worker("timer-webwork.js"); // javascript file which you want run
}
webWorkerInstance.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML =
"Web Worker Not Support.";
}
}
function stopWorker() {
webWorkerInstance.terminate();
webWorkerInstance = undefined;
}
</script>
</body>
</html>{codeBox}
5)SSE
SSE - Server-Sent Events.
SSE helps to update the web page when the server sent new data.
SSE same as a web socket but its a one-way message
Example
SSE File
var sseInstance = new EventSource("demo_sse.php");
sseInstance.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};{codeBox}
Code in PHP (demo_sse.php)
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>{codeBox}
I think this information is helpful to you.
Thanks for reading - Don't Forgot To Share & Comment
Any suggestion or queries please comment, our team will response asps.
You may like this :
Best Chrome Extensions for Front End Developers - Part 2
Best Chrome Extensions for Front End Developers
1xbet korean: Situs Slot Online | Bola88 & Bet365
ReplyDeleteSitus online android 1xbet korean adalah poker online terpercaya หาเงินออนไลน์ yang sudah bandar slot Slot Online Pragmatic Play Indonesia. Slot Online Indonesia. Rating: 95% · 바카라사이트 119,777 votes