JavaScript Web APIs

Previous Next

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.

Example

Get the latitude and longitude of the user's position:

Try it now

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.

Examples:

YouTube API - Allows you to display videos on a web site.
Twitter API - Allows you to display Tweets on a web site.
Facebook API - Allows you to display Facebook info on a web site.

Practice Excercise Practice now

Web History API

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.

Example

<button onclick="myFunction()">Go Back</button>

<script>
function myFunction() {
window.history.back();
}
</script>

The History go() Method

The go() method loads a specific URL from the history list:

Example

<button onclick="myFunction()">Go Back 2 Pages</button>

<script>
function myFunction() {
window.history.go(-2);
}
</script>

History Object Properties

Property	Description
length	Returns the number of URLs in the history list

History Object Methods

Method	Description
back()	Loads the previous URL in the history list
forward()	Loads the next URL in the history list
go()	Loads a specific URL from the history list

Practice Excercise Practice now

Web Storage API

The Web Storage API is a simple syntax for storing and retrieving data in the browser. It is very easy to use:

Example

localStorage.setItem("name", "John Doe");
localStorage.getItem("name");

Try it now

The Web Storage API is supported in all browsers:

Chrome	IE/Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

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.

It takes a name and a value as parameters:

Example

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:

Example

localStorage.getItem("name");

The sessionStorage Object

The sessionStorage object is identical to the localStorage object.

The difference is that the sessionStorage object stores data for one session.

The data is deleted when the browser is closed.

Example

sessionStorage.getItem("name");

Try it now

The setItem() Method

The sessionStorage.setItem() method stores a data item in a storage.

It takes a name and a value as parameters:

Example

sessionStorage.setItem("name", "John Doe");

The getItem() Method

The sessionStorage.getItem() method retrieves a data item from the storage.

It takes a name as parameter:

Example

sessionStorage.getItem("name");

Storage Object Properties and Methods

Property/Method	Description
key(n)	Returns the name of the nth key in the storage
length	Returns the number of data items stored in the Storage object
getItem(keyname)	Returns the value of the specified key name
setItem(keyname, value)	Adds that key to the storage, or update that key's value if it already exists
removeItem(keyname)	Removes that key from the storage
clear()	Empty all key out of the storage

Related Pages for Web Storage API

Property	Description
window.localStorage	Allows to save key/value pairs in a web browser. Stores the data with no expiration date
window.sessionStorage	Allows to save key/value pairs in a web browser. Stores the data for one session

Practice Excercise Practice now

Web Workers API

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.

Browser Support

The numbers in the table specify the first browser versions that fully support Web Workers:

Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

Web Workers Example

The example below creates a simple web worker that count numbers in the background:

Example

Count numbers:

Try it now

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();

The important part of the code above is the postMessage() method - which is used to post a message back to the HTML page.

Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.

Create a Web Worker Object

Now that we have the web worker file, we need to call it from an HTML page.

The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in "demo_workers.js":

if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}

Then we can send and receive messages from the web worker.

Add an "onmessage" event listener to the web worker.

w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};

When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.

Terminate a Web Worker

When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.

To terminate a web worker, and free browser/computer resources, use the terminate() method:

w.terminate();

Reuse the Web Worker

If you set the worker variable to undefined, after it has been terminated, you can reuse the code:

w = undefined;

Full Web Worker Example Code

We have already seen the Worker code in the .js file. Below is the code for the HTML page:

Example

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Try it now

Web Workers and the DOM

Since web workers are in external files, they do not have access to the following JavaScript objects:

The window object
The document object
The parent object

Practice Excercise Practice now

JavaScript Fetch API

The Fetch API interface allows web browser to make HTTP requests to web servers.

A Fetch API Example

The example below fetches a file and displays the content:

Example

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

Try it now

Since Fetch is based on async and await, the example above might be easier to understand like this:

Example

async function getText(file) {
let x = await fetch(file);
let y = await x.text();
myDisplay(y);
}

Try it now

Or even bettter: Use understandable names instead of x and y:

Example

async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
myDisplay(myText);
}

Try it now

Practice Excercise Practice now

Web Geolocation API

Locate the User's Position

The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.

Using the Geolocation API

The getCurrentPosition() method is used to return the user's position.

The example below returns the latitude and longitude of the user's position:

Example

Try it now

Example explained:

Check if Geolocation is supported
If supported, run the getCurrentPosition() method. If not, display a message to the user
If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition)
The showPosition() function outputs the Latitude and Longitude

The example above is a very basic Geolocation script, with no error handling.

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

Example

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

Try it now

Displaying the Result in a Map

To display the result in a map, you need access to a map service, like Google Maps.

In the example below, the returned latitude and longitude is used to show the location in a Google Map (using a static image):

Example

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Location-specific Information

This page has demonstrated how to show a user's position on a map.

Geolocation is also very useful for location-specific information, like:

Up-to-date local information
Showing Points-of-interest near the user
Turn-by-turn navigation (GPS)

The getCurrentPosition() Method - Return Data

The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy properties are always returned. The other properties are returned if available:

Property	Returns
coords.latitude	The latitude as a decimal number (always returned)
coords.longitude	The longitude as a decimal number (always returned)
coords.accuracy	The accuracy of position (always returned)
coords.altitude	The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy	The altitude accuracy of position (returned if available)
coords.heading	The heading as degrees clockwise from North (returned if available)
coords.speed	The speed in meters per second (returned if available)
timestamp	The date/time of the response (returned if available)

Geolocation Object - Other interesting Methods

The Geolocation object also has other interesting methods:

watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
clearWatch() - Stops the watchPosition() method.

The example below shows the watchPosition() method. You need an accurate GPS device to test this (like smartphone):

Example

Try it now

Practice Excercise Practice now

Previous Next

JavaScript Web APIs

Web APIs - Introduction

What is Web API?

Browser APIs

Example

Third Party APIs

Web History API

The History back() Method

Example

The History go() Method

Example

History Object Properties

History Object Methods

Web Storage API

Example

The localStorage Object

The setItem() Method

Example

The getItem() Method

Example

The sessionStorage Object

Example

The setItem() Method

Example

The getItem() Method

Example

Storage Object Properties and Methods

Related Pages for Web Storage API

Web Workers API

What is a Web Worker?

Browser Support

Web Workers Example

Example

Check Web Worker Support

Create a Web Worker File

Create a Web Worker Object

Terminate a Web Worker

Reuse the Web Worker

Full Web Worker Example Code

Example

Web Workers and the DOM

JavaScript Fetch API

A Fetch API Example

Example

Example

Example

Web Geolocation API

Locate the User's Position

Using the Geolocation API

Example

Handling Errors and Rejections

Example

Displaying the Result in a Map

Example

Location-specific Information

The getCurrentPosition() Method - Return Data

Geolocation Object - Other interesting Methods

Example

COMPANY

Products

OTHERS

Partner