Що робить Web API у браузері?

JavaScriptJunior~3 хв читання

Що таке Web API

Web API (Web Application Programming Interface) - це набір вбудованих можливостей, які надає браузер, щоб JavaScript міг взаємодіяти з оточенням: вікнами, документом, мережею, користувачем, пристроями тощо.

Ці API не є частиною самої мови JavaScript, а частиною браузера (або середовища виконання, наприклад Node.js).

Приклад найпростішого Web API

javascript

console.log(window.innerWidth);
alert('Привіт!');
document.body.style.background = 'lightblue';

Тут:

window - об'єкт браузера (Web API для керування вікном);
alert() - метод Web API для показу діалогу;
document - Web API для роботи з DOM (сторінкою).

Усі ці об'єкти не входять до стандарту JS (ECMAScript), але надаються браузером, щоб JavaScript міг працювати з вебсторінкою.

JavaScript і Web API: хто за що відповідає

Компонент	Звідки	За що відповідає
JavaScript (ECMAScript)	Мова	Логіка, обчислення, структури даних
Web API (браузер)	Середовище (Chrome, Firefox тощо)	Робота з мережею, DOM, подіями, таймерами
Event Loop	Механізм середовища	Керує виконанням коду і чергами подій

Як це працює насправді

Коли ти викликаєш, наприклад:

javascript

setTimeout(() => console.log('Пізніше'), 1000);

setTimeout - це Web API, який надає браузер.
Браузер відлічує час окремо від основного потоку JS.
Коли таймер спливає, Web API відправляє завдання в чергу макрозадач.
Event Loop забирає її і передає назад у JavaScript.
JS виконує колбек.

Тобто JS делегує роботу браузеру через Web API.

Основні групи Web API

1. DOM API - робота з HTML-документом

Дозволяє читати і змінювати структуру сторінки.

javascript

document.querySelector('h1').textContent = 'Привіт, світ!';

document, Element, Node, classList, style, dataset тощо.

2. Network API - робота з мережею

Дозволяє робити HTTP-запити і працювати з відповідями.

javascript

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

fetch, XMLHttpRequest, WebSocket, EventSource.

3. Timers API - відкладені дії

javascript

setTimeout(() => console.log('Через секунду'), 1000);
setInterval(() => console.log('Щосекунди'), 1000);

setTimeout, setInterval, clearTimeout, clearInterval.

4. Storage API - зберігання даних у браузері

javascript

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

localStorage, sessionStorage, IndexedDB, CacheStorage.

5. Multimedia & Graphics API

Робота з камерою, мікрофоном, звуком і відео:

javascript

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

Робота з графікою:

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 - визначення місцезнаходження;
Battery API, Clipboard API, Vibration API;
Sensor APIs - доступ до акселерометра, гіроскопа тощо.

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 - система подій

Дозволяє слухати дії користувача і реакції системи.

javascript

button.addEventListener('click', () => console.log('Клік!'));

Події миші, клавіатури, мережі, видимості, завантаження тощо.

Як Web API взаємодіє з Event Loop

JavaScript викликає API (наприклад, fetch, setTimeout).
Виклик іде в браузерний Web API.
Коли завдання готове (відповідь прийшла, таймер спрацював), Web API кладе callback у чергу завдань.
Event Loop запускає callback, коли стек викликів вільний.

Тобто Web API - це як "робітники" браузера, а JS - це "менеджер", який дає їм завдання.

Проста аналогія

JavaScript - це шеф-кухар, а Web API - це кухня з технікою і помічниками.

JS видає завдання (постав чайник, спечи пиріг), а Web API все робить і повідомляє, коли готово. JS не чекає, а продовжує готувати інші страви.

Підсумок

Компонент	Що робить
Web API	Набір функцій і об'єктів, які надає браузер
Не частина JavaScript	Реалізовані в рушії браузера (Chrome - Blink, Firefox - Gecko)
Взаємодія	Через `window`, `document`, `navigator`, `fetch`, `setTimeout` та ін.
Працюють асинхронно	Ставлять колбеки в чергу Event Loop
Головна мета	Дати JS доступ до можливостей браузера і пристрою

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.