---
title: Веб-APIs на стороні клієнта
slug: Learn/JavaScript/Client-side_web_APIs
translation_of: Learn/JavaScript/Client-side_web_APIs
---
<div>{{LearnSidebar}}</div>

<div>При написанні клієнтського JavaScript для веб-сайтів або додатків, ви досить скоро зустрінитесь з Інтерфейсами для Програмування Додатків (APIs). APIs є функціями програмування, що надають можливість маніпулювання різними аспектами браузера та операційної системи, на якій працює сайт, або обробки даних з інших веб-сайтів або службю. У цьому модулі ми розглянемо, що таке API, і як використовувати деякі з найбільш поширених API, які ви часто зустрічаєте в процесі розробки.</div>

<h2 id="Prerequisites">Prerequisites</h2>

<p>Щоб даний модуль був максимально корисним, ми рекомендуємо вам пройти попередні JavaScript модулі у серії (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, та <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Дані модулі, як правило, передбачають просте використання API, тому що зачасту досить важко писати приклади клієнтського JavaScript без них. Для даної інструкції ми припустимо, що ви ознайомлені з основами мови JavaScript, та вивчимо загальні Web APIs більш детально.</p>

<p>Базові знання <a href="/en-US/docs/Learn/HTML">HTML</a> та <a href="/en-US/docs/Learn/CSS">CSS</a> також будуть корисними.</p>

<div class="note">
<p><strong>Note</strong>: If you are working on a device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt>
 <dd>Перш за все, ми почнемо з розгляду APIs з високого рівня - що вони собою представляють, як вони працюють, як використовувати їх у власному коді та яку вони мають структуру? Ми також розглянемо, що таке різні основні класи APIs та як вони використовуються.</dd>
</dl>

<dl>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt>
 <dd>При написанні веб-сторінок і додатків однією з найпоширеніших речей, яку ви захочете зробити це маніпуляція веб-документами. Зазвичай це робиться за допомогою об'єктної моделі документа (DOM), набору API для керування HTML та інформацією про стиль, яка використовує об'єкт {{domxref ("Document")}}. У цій статті ми детально розглянемо, як використовувати DOM, а також деякі інші цікаві API, які можуть змінити ваше середовище цікавими способами.</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt>
 <dd>Іншим дуже поширеним завданням на сучасних веб-сайтах і додатках є отримання окремих елементів даних з сервера для оновлення розділів веб-сторінки без необхідності завантажувати абсолютно нову сторінку. Ця, здавалося б, невелика деталь мала величезний вплив на продуктивність і поведінку сайтів. У цій статті ми пояснимо концепцію і розглянемо технології, які роблять це можливим, наприклад, {{domxref ("XMLHttpRequest")}} і <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt>
 <dd>APIs, які ми розглянули є вбудованими в браузер, але не всі APIs є частиною браузерів. Багато великих веб-сайтів і служб, таких як Google Maps, Twitter, Facebook, PayPal тощо, надають API, що дозволяють розробникам використовувати свої дані (наприклад, показувати ваш Twitter  у вашому блозі) або послуги (наприклад, показувати індивідуально налаштовані Google Maps на вашому сайті або використання логіна Facebook для входу в систему користувачів. У цій статті розглядаються відмінності між API браузера та APIs третьої сторони і показано деякі типові використання останнього.</dd>
</dl>

<dl>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt>
 <dd>Браузер містить деякі дуже потужні засоби графічного програмування, від мови масштабованої векторної графіки (<a href="/en-US/docs/Web/SVG">SVG</a>), до APIs для малювання елементів HTML {{htmlelement ("canvas")}} (див. <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> та <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ця стаття містить вступ до Canvas API, а також додаткові ресурси, які дозволять вам дізнатися більше.</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt>
 <dd>HTML5 поставляється з елементами для вбудовування мультимедійних даних у документи - {{htmlelement ("відео")}} і {{htmlelement ("аудіо")}} - які, в свою чергу, мають власні APIs для керування відтворенням, пошуком і т.д. Дана стаття демонструє, як виконувати звичайні завдання, наприклад, створювати власні елементи керування відтворенням.</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt>
 <dd>Сучасні веб-браузери мають ряд різних технологій, які дозволяють зберігати дані, пов'язані з веб-сайтами, і отримувати їх у разі необхідності, дозволяючи зберігати дані на довгий термін, зберігати сайти в автономному режимі та багато іншого. У цій статті пояснюються основи як це все працює.</dd>
</dl>