Client-side web APIs

When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. 

Prerequisites

To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series (First steps, Building blocks, and JavaScript objects). Those modules involve quite a lot of simple API usage anyway, as it is difficult to write client-side JavaScript examples that do anything useful without them! Here we go up a level, assuming knowledge of the core JavaScript language and exploring common Web APIs in a bit more detail.

Basic knowledge of HTML and CSS would also be useful.

Guides

Introduction to web APIs

First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.

Manipulating documents

When writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the Document object. In this article we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.

Fetching data from the server

Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page. This seemingly small detail has had a huge impact on the performance and behaviour of sites, so in this article we''ll explain the concept, and look at technologies that make it possible, such as XMLHttpRequest and the Fetch API.

Third party APIs

The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs, and shows some typical uses of the latter.

Drawing graphics

The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (SVG) language, to APIs for drawing on HTML <canvas> elements, (see The Canvas API and WebGL). Ths article provides an introduction to canvas, and further resources to allow you to learn more.

Video and audio APIs

HTML5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.

Device APIs

Modern web-browsing devices have many features that are useful for web apps to take advantage of, for example accessing the device's location data so you plot your position on a map, or telling the user that a useful update is available via system notifications or vibration hardware. This article looks at what is available, and goes through a few common use cases.

Client-side storage APIs

Most modern web browsers come with the ability to store structured data on the client-side, which is very useful if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. This article looks at the available options.