Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The most important APIs in HTML5?
API is also known as "Application Programming Interface." It is a collection of definitions, tools, and protocols that enables interaction and communication across various software programs. Developers can engage with a service, library, or platform without having to understand all the techniques of how it operates since APIs define the methods and data structures they can utilize.
APIs are essential for the development of software because they let programmers use the features and services offered by other software components to create more complex applications. They advance modularity and collaboration amongst various software systems. Let’s dive into the article to learn more about APIs in HTML5.
HTML drag and drop API
Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.
Example
In the following example, we are running the script to create a drag-and-drop.
<!DOCTYPE HTML>
<html>
<head>
<style>
#tutorial {
width: 200px;
height: 69px;
padding: 9px;
border: 2px solid #DE3163;
}
body {
font-family: verdana;
background-color: #D5F5E3;
color: #DE3163;
}
</style>
</head>
<body>
<h2>Drag and Drop the image in the box</h2>
<img id="drag1" src="https://www.tutorialspoint.com/cg/images/logo.png" draggable="true" ondragstart="tutorial2(event)" width="200" height="70">
<br>
<br>
<br>
<div id="tutorial" ondrop="tutorial3(event)" ondragover="tutorial1(event)"></div>
<script>
function tutorial1(x) {
x.preventDefault();
}
function tutorial2(x) {
x.dataTransfer.setData("tp", x.target.id);
}
function tutorial3(x) {
x.preventDefault();
var result = x.dataTransfer.getData("tp");
x.target.appendChild(document.getElementById(result));
}
</script>
</body>
</html>
When we execute the above script, it will generate an output consisting of the image and div box along with text on the webpage. When the user starts to drag the image, the drag event gets triggered, and when he leaves the image in the box, the drop event gets triggered.
HTML webstorage API
Web applications can store data locally in the user's browser using web storage. Application data had to be kept in cookies and sent along with every server request prior to HTML5. Large volumes of data can be kept locally without degrading the functionality of a website using web storage, which is more secure.
In contrast to cookies, there is no information transfer to the server and the storage capacity is much higher (at least 5MB). Storage on the web is per origin (per domain and protocol). The same data can be stored and accessed by all pages coming from one origin. HTML web storage provides two objects for storing data on the client.
Window.localstorage − No expiration for the stored data.
Window.sessionstorage − data will be stored for certain kind of session.
Example
Following is the example where we are going to use localstroge to store our data in the web without expiration.
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">Click</button>
<br />
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = "Welcome To Tutorialspoint" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
On running the above code, the output window will pop up, displaying the input field along with a click button on the webpage. When the user enters the text in the input field and clicks the button. The text gets stored in local storage.
HTML geolocation API
One of the greatest HTML5 APIs for determining a user's geographic location for a web application is geolocation. With HTML5, you can now browse to the visitor's current website's latitude and longitude coordinates. These coordinates can be recorded by JavaScript and transmitted to the server, allowing the website to display your current position.
The majority of geolocation services use internal GPS devices, network routing addresses such IP addresses, RFID, WIFI, and MAC addresses, or combinations of these to determine the user's location.
Syntax
Following is the syntax for the HTML geolocation
var loc = navigator.geolocation
Example
Let’s look at the following example, where we are going to get the current location of the user.
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
font-family: verdana;
background-color: #E8DAEF;
color: #DE3163;
}
</style>
</head>
<body>
<div id="tutorial">
<h2>TUTORIALSPOINT</h2>
<button type="button" onclick="mytutorial()"> Click to get Location </button>
</div>
<script>
var x = document.getElementById("tutorial");
var y = navigator.geolocation;
function mytutorial() {
if (y) y.getCurrentPosition(mytutorial1);
else x.innerHTML = "does " + "not support the Geolocation API.";
}
function mytutorial1(a) {
x.innerHTML = "Latitude: " + a.coords.latitude + " < br > Longitude: " +
a.coords.longitude;
}
</script>
</body>
</html>
When we execute the above code, it will generate an output consisting of the text along with a click button on the webpage. When the user clicks the button, it will ask for permission to get their location. After getting permission, it will display their current location on the webpage.
15 Views
