Explain API’s Available in HTML5
Last Updated :
31 Aug, 2022
API stands for Application Programming Interface. An API is a set of pre-built programs that can be used with the help of JavaScript. APIs are used to implement already written code to fulfill the needs of the project you are working on.
Let us discuss some useful and popular APIs provided by HTML5.
Note: In all the code examples mentioned below, the “myScript.js” file contains the following code.
Javascript
var count = 0;
function countGFG() {
count += 1;
postMessage("Welcome to GeeksforGeeks! (" + count + ")");
setTimeout("countGFG()", 1000);
}
countGFG();
|
HTML Geolocation API: The Geolocation API is used to get the current location of the user or the page visitor. It will show the user’s location only if the user allows it to do so, as it compromises the security and privacy of the user.
Syntax:
var loc = navigator.geolocation;
Methods available in Geolocation API:
- getCurrentPosition() Method: The getCurrentPosition() method returns an object with properties such as latitude, longitude, accuracy, altitude etc.
- watchPosition() Method: This method will return the current position of the user as well as the updated location when the position of the user changes or the user travels from one location to another location.
- clearWatch() Method: This method will stop the watchPosition() method to not tracing the user anymore.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>HTML Geolocation API</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeeks!</h3>
<button type="button" onclick="geoLoc()">
Get Location
</button>
</div>
<script>
var container = document.getElementById("container");
var pos = navigator.geolocation;
function geoLoc() {
if (pos)
pos.getCurrentPosition(getLoc);
else
container.innerHTML = "Your browser does "
+ "not support the Geolocation API.";
}
function getLoc(loc) {
container.innerHTML = "Latitude: "
+ loc.coords.latitude +
"<br>Longitude: " +
loc.coords.longitude;
}
</script>
</body>
</html>
|
Output:
HTML Drag and Drop API: Drag and Drop is a common feature nowadays, where you can drag an item from one place and drop it in another.
Syntax: To use drag and drop first you have to make the element draggable as shown below:
<div draggable="true">
//content of the element
</div>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>HTML Geolocation API</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#drop {
height: 105px;
width: 105px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeeks!</h3>
<p>Drag image into the container</p>
<div id="drop" ondrop="dropItem(event)"
ondragover="droppable(event)"></div>
<img src=
alt="GeeksforGeeks" id="image"
draggable="true" ondragstart="dragItem(event)"
height="100px" width="100px">
</div>
<script>
function droppable(e) {
e.preventDefault();
}
function dragItem(e) {
e.dataTransfer.setData("text", e.target.id);
}
function dropItem(e) {
e.preventDefault();
var content = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(content));
}
</script>
</body>
</html>
|
Output:
HTML Web Storage API: HTML web storage API is used to store the data on the web browser. Early, the data was stored in the form of cookies that can store a small amount of data and can-not transferred further to the server. But, HTML5 introduces us to the Web Storage API that can store large data as compared to cookies and can be transferred to the server. Using this API for storing data is more secure than using cookies.
Web storage API provides us with two objects to work with:
- window.sessionStorage: This object temporarily stores the data on the web browser such that if the browser is refreshed or closed the data stored will be lost.
- window.localStorage: localStorage permanently stores the data on the browser with no expiration such that will not be lost even if the browser is refreshed.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>HTML Web Storage API</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#btnDiv {
width: 20vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.btn {
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h2 id="heading"></h2>
<h3 id="desc"></h3>
<div id="btnDiv">
<button class="btn" onclick="getContent()">
Get stored Data
</button>
<button class="btn" onclick="remContent()">
Remove stored Data
</button>
</div>
</div>
<script>
var head = document.getElementById('heading');
var desc = document.getElementById("desc");
function getContent() {
if (typeof (Storage) !== "undefined") {
// setItem() will set store the passed attribute
// and value in localStorage
localStorage.setItem('heading', 'Welcome to GeeksforGeek!');
localStorage.setItem('description',
'A computer science portal for Geeks.');
// This is the way of accessing the items
// stored in the storage
head.innerText = localStorage.heading;
desc.innerText = localStorage.description;
}
else {
head.innerText =
"Your browser does not support web storage API.";
}
}
function remContent() {
// removeItem() will remove the passed attribute
// and value from localStorage.
localStorage.removeItem('heading');
localStorage.removeItem('description');
head.innerText = localStorage.heading;
desc.innerText = localStorage.description;
}
</script>
</body>
</html>
|
Output:
HTML Web Worker API: Generally, when the JavaScript is uploading for the page, the page got stuck until uploading gets finished. The Web worker API helps us to upload the JavaScript without affecting the performance of the page. It helps to run JavaScript run in the background independent of other scripts.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>HTML Web Storage API</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#btnDiv {
width: 20vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.btn {
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h2 id="heading"></h2>
<div id="btnDiv">
<button class="btn" onclick="getJS()">
Start executing JS
</button>
<button class="btn" onclick="remJS()">
Stop executing JS
</button>
</div>
</div>
<script>
var myWorker;
var head = document.getElementById('heading');
function getJS() {
// Below condition will checks for
// the browser support.
if (typeof (Worker) !== "undefined") {
// The condition below will checks for
// existence of the worker
if (typeof (myWorker) == "undefined") {
myWorker = new Worker("myScript.js");
// Above line Will create a worker that will
// execute the code of myscript.js file
}
// onmessage event triggers a function
// with the data stored in external js file
myWorker.onmessage = function (props) {
head.innerText = props.data;
}
}
else {
head.innerText =
"Your browser does not support web storage API.";
}
}
function remJS() {
// Terminate() will terminate the current worker
myWorker.terminate();
myWorker = undefined;
}
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...