Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить Web API у браузері?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Web API (Web Application Programming Interface)** - це набір вбудованих можливостей, які надає браузер, щоб JavaScript міг взаємодіяти з оточенням: вікнами, документом, мережею, користувачем, пристроями тощо. **Ключове:** ці API не є частиною самої мови JavaScript, а частиною браузера (або середовища виконання, наприклад Node.js).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке 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); ``` 1. `setTimeout` - це **Web API**, який надає браузер. 2. Браузер відлічує час окремо від основного потоку JS. 3. Коли таймер спливає, **Web API** відправляє завдання в **чергу макрозадач**. 4. Event Loop забирає її і передає назад у JavaScript. 5. 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 1. JavaScript викликає API (наприклад, `fetch`, `setTimeout`). 2. Виклик **іде в браузерний Web API**. 3. Коли завдання готове (відповідь прийшла, таймер спрацював), Web API кладе **callback** у чергу завдань. 4. 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 доступ до можливостей браузера і пристрою |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.