# Browser APIs
# What is an API?
API stands for Application Programming Interface. They are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.
As a real-world example, think about the electricity supply in your house or apartment. If you want to use an appliance, you plug it into a plug socket and it works. You don't try to wire it directly into the power supply. To do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.
In the same way, if you want to say, program some 3D graphics, it is a lot easier to do it using an API written in a higher-level language such as JavaScript or Python, rather than try to directly write low-level code (say C or C++) that directly controls the computer's GPU or other graphics functions.
# Browser APIs
Browser APIs are APIs that are built into the browser and provide native features that can also be used in a web app. These can also be called web APIs.
With the use of web APIs, we can easily implement certain features with fewer lines of code, such as:
- Making network requests
- Managing client-side storage
- Retrieving device media streams, etc.
# Common Browser APIs
In particular, the most common categories of browser APIs you'll use are:
# Manipulating document structure
The most obvious example is the DOM API (opens new window), which allows you to manipulate HTML and CSS — creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page or some new content displayed, for example, that's the DOM in action. Find out more about these types of API in Manipulating documents.
# Fetch data from the server
These are capable of making HTTP requests to a web server. The response can be in JSON, plain text, or XML format. The Fetch API (opens new window) is a modern replacement for XHR. It was introduced in browsers recently to make asynchronous HTTP requests easier.
# Drawing and manipulating graphics
The most popular ones are Canvas (opens new window) and WebGL (opens new window), which allow you to programmatically update the pixel data contained in an HTML canvas element to create 2D and 3D scenes. For example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the Canvas API, or create a complex 3D scene with lighting and textures using WebGL. Such APIs are often combined with APIs for creating animation loops (such as window.requestAnimationFrame()) and others to make constantly updating scenes like cartoons and games.
# Audio and Video
Like HTMLMediaElement, the Web Audio API (opens new window), and WebRTC (opens new window) allow you to do really interesting things with multimedia such as creating custom UI controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas or displayed on someone else's computer in a web conference, or adding effects to audio tracks.
# Client-side storage
Store data on the client-side, so you can create an app that will save its state between page loads, and perhaps even work when the device is offline. There are several options available, e.g. simple name/value storage with the Web Storage API (opens new window), and more complex database storage with the IndexedDB API (opens new window).
# Device
Device APIs enable you to interact with device hardware: for example, accessing the device GPS to find the user's position using the Geolocation API (opens new window).