Web APIs - Introduction
A Web API is a developer's dream.
- It can extend the functionality of the browser
- It can greatly simplify complex functions
- It can provide easy syntax to complex code
What is Web API?
API stands for Application Programming Interface.
A Web API is an application programming interface for the Web.
A Browser API can extend the functionality of a web browser.
A Server API can extend the functionality of a web server.
Browser APIs
All browsers have a set of built-in Web APIs to support complex operations, and to help accessing data.
For example, the Geolocation API can return the coordinates of where the browser is located.
Get the latitude and longitude of the user's position:
const myElement = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
myElement.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
myElement.innerHTML = "Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
Third Party APIs
Third party APIs are not built into your browser.
To use these APIs, you will have to download the code from the Web.
JavaScript Validation API
Constraint Validation DOM Methods
checkValidity() - Returns true if an input element contains valid data.
setCustomValidity() - Sets the validationMessage property of an input element.
The Web History API provides easy methods to access the windows.history object.
The window.history object contains the URLs (Web Sites) visited by the user.
The History back() Method
The back() method loads the previous URL in the windows.history list.
It is the same as clicking the "back arrow" in your browser.
function myFunction() {
window.history.back();
}
The Web Storage API is a simple syntax for storing and retrieving data in the browser. It is very easy to use:
localStorage.setItem("name", "John Doe");
localStorage.getItem("name");
The localStorage Object
The localStorage object provides access to a local storage for a particular Web Site. It allows you to store, read, add, modify, and delete data items for that domain.
The data is stored with no expiration date, and will not be deleted when the browser is closed.
The data will be available for days, weeks, and years.
The setItem() Method
The localStorage.setItem() method stores a data item in a storage.
t takes a name and a value as parameters:
localStorage.setItem("name", "John Doe");
The getItem() Method
The localStorage.getItem() method retrieves a data item from the storage.
It takes a name as parameter:
localStorage.getItem("name");
A web worker is a JavaScript running in the background, without affecting the performance of the page.
What is a Web Worker?
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.
A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
Check Web Worker Support
Before creating a web worker, check whether the user's browser supports it:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Create a Web Worker File
Now, let's create our web worker in an external JavaScript.
Here, we create a script that counts. The script is stored in the "demo_workers.js" file:
let i = 0;
function timedCount() {
i ++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();