Suggest an edit

Improve this article

Refine the answer for “What does the Web API do in the browser?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What is the Web API

> **Web API (Web Application Programming Interface)** -
> a set of built-in capabilities provided by the **browser**
> so that JavaScript can interact with its environment:
> windows, the document, the network, the user, devices, and so on.

These APIs **are not part of the JavaScript language itself**,
but **part of the browser** (or a runtime environment, such as Node.js).

---

## Example of the simplest Web API

```javascript
console.log(window.innerWidth);
alert('Hello!');
document.body.style.background = 'lightblue';
```

Here:

- `window` is a browser object (a Web API for controlling the window);
- `alert()` is a Web API method for showing a dialog;
- `document` is a Web API for working with the DOM (the page).

None of these objects **are part of the JS standard (ECMAScript)**,
but they are provided by the browser so JavaScript can work with the web page.

---

## JavaScript and the Web API: who is responsible for what

| Component | Where it comes from | What it's responsible for |
|---|---|---|
| **JavaScript (ECMAScript)** | The language | Logic, computation, data structures |
| **Web API (browser)** | The environment (Chrome, Firefox, etc.) | Networking, the DOM, events, timers |
| **Event Loop** | A mechanism of the environment | Manages code execution and event queues |

---

## How it actually works

When you call, for example:

```javascript
setTimeout(() => console.log('Later'), 1000);
```

1. `setTimeout` is a **Web API** provided by the browser.
2. The browser counts down the time separately from the main JS thread.
3. When the timer expires, the **Web API** puts the task in the **macrotask queue**.
4. The Event Loop picks it up and hands it back to JavaScript.
5. JS runs the callback.

In other words, JS delegates the work to the browser through the Web API.

---

## Main groups of Web APIs

### 1. DOM API: working with the HTML document

Lets you read and modify the structure of the page.

```javascript
document.querySelector('h1').textContent = 'Hello, world!';
```

`document`, `Element`, `Node`, `classList`, `style`, `dataset`, and so on.

---

### 2. Network API: working with the network

Lets you make HTTP requests and work with responses.

```javascript
fetch('https://api.github.com/users/octocat')
  .then(res => res.json())
  .then(console.log);
```

`fetch`, `XMLHttpRequest`, `WebSocket`, `EventSource`.

---

### 3. Timers API: deferred actions

```javascript
setTimeout(() => console.log('After a second'), 1000);
setInterval(() => console.log('Every second'), 1000);
```

`setTimeout`, `setInterval`, `clearTimeout`, `clearInterval`.

---

### 4. Storage API: storing data in the browser

```javascript
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));
```

`localStorage`, `sessionStorage`, `IndexedDB`, `CacheStorage`.

---

### 5. Multimedia & Graphics API

- Working with the camera, microphone, audio, and video:

```javascript
navigator.mediaDevices.getUserMedia({ video: true });
```

- Working with graphics:

```javascript
const ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 100);
```

`Canvas API`, `WebGL`, `MediaStream`, `Web Audio API`.

---

### 6. Device & Hardware API

- `Geolocation API`: determining location;
- `Battery API`, `Clipboard API`, `Vibration API`;
- `Sensor APIs`: access to the accelerometer, gyroscope, and so on.

```javascript
navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords));
```

---

### 7. Security & Identity API

- `Credential Management`
- `WebAuthn`
- `Permissions API`
- `Notification API`

```javascript
Notification.requestPermission().then(console.log);
```

---

### 8. Events API: the event system

Lets you listen for user actions and system reactions.

```javascript
button.addEventListener('click', () => console.log('Click!'));
```

Mouse, keyboard, network, visibility, loading events, and so on.

---

## How the Web API interacts with the Event Loop

1. JavaScript calls an API (for example, `fetch`, `setTimeout`).
2. The call **goes into the browser's Web API**.
3. When the task is ready (the response arrives, the timer fires), the Web API puts a **callback** into the task queue.
4. The Event Loop runs the callback once the call stack is free.

In other words, the Web API is like the browser's "workers",
and JS is the "manager" that hands them assignments.

---

## A simple analogy

> JavaScript is the **head chef**,
> and the Web API is the **kitchen with equipment and assistants**.
>
> JS hands out tasks (put the kettle on, bake a pie),
> and the Web API does the work and reports back when it's done.
> JS does not wait, it keeps cooking other dishes.

---

## Summary

| Component | What it does |
|---|---|
| **Web API** | A set of functions and objects provided by the browser |
| **Not part of JavaScript** | Implemented in the browser engine (Chrome: Blink, Firefox: Gecko) |
| **Interaction** | Through `window`, `document`, `navigator`, `fetch`, `setTimeout`, and others |
| **Run asynchronously** | Put callbacks into the Event Loop queue |
| **Main purpose** | Give JS access to the browser's and device's capabilities |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts773 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.