API (программный интерфейс приложения, интерфейс прикладного программирования) (англ. application programming interface, API [эй-пи-ай]) — описание способов (набор классов, процедур, функций, структур или констант), которыми одна компьютерная программа может взаимодействовать с другой программой.

Под API можно понимать любые методы и свойства, которые не относятся непосредственно к конструкциям языка

Каким API пользуются разработчики?

• встроенное в язык
• встроенное в среду исполнения
• предоставляемое дополнительными пакетами
• предоставляемое сторонними сервисами (доступ к которым делается посредством API среды исполнения или дополнительных пакетов)

Единственный способ узнать про API - читать документацию (статьи, книги, смотреть доклады).

Единственный способ научиться пользоваться API - работать с API.

Интерфейсы веб API

Что мы посмотрим:

• работу со страницей (изменение страницы и чтение данных от пользователя)
• сохранение данных
• работу удаленными ресурсами (следующее занятие)

DOM - Document Object Model.

API браузера для работы с веб страницей и ее элементами. Представлено глобальными объектами window, document и API для работы с HTML элементами (создание, удаление, редактирование).

Поиск элементов на странице:

• document.getElementById
• document.getElementsByTagName
• document.getElementsByClassName
• document.querySelector
• document.querySelectoAll

Document API и описание селекторов(1, 2, 3)

Создание и изменение элементов. Два варианта:

• использование innerHTML и работа с элементами как со строкой HTML
• использование document.createElement и работа с элементами как с узлами дерева

Для подписки на события элементов есть 3 варианта:

• addEventListener <-- мы будем использовать вот этот
• onclick="func()"
• el.onclick=func

Пример

Практика

• IndexedDB
• Storage (Local Storage / Session Storage)
• Cookies

DOM Storage полезен для хранения небольшого количества данных, но он менее выгоден для большого числа структурированных данных (тк работает со строками). IndexedDB предоставляет решение для клиентского хранилища большого объема структурированных данных, включая файлы/blobs.

// Пример работы с local storage
const key = "someKey";
const value = "someValue";
localStorage.setItem(key, value);
console.log(localStorage.getItem(key));
localStorage.removeItem(key);
console.log(localStorage.getItem(key)); // null

// ВАЖНО! работает только со строками
const key = "someKey";
const value = 1;
localStorage.setItem(key, value);
console.log(localStorage.getItem(key)); // "1"

// для работы с другими типами данных
// обычно используют сериализацию
const value1 = 1;
const value2 = { name: "Bob" };
localStorage.setItem("value1", JSON.stringify(value1));
localStorage.setItem("value2", JSON.stringify(value2));
console.log(JSON.parse(localStorage.getItem("value1"))); // 1
console.log(JSON.parse(localStorage.getItem("value2"))); // { name: 'Bob' }

Важно помнить, что если значения нет - вы получите null и десериализация сломается. Поэтому перед вызовом parse нужно проверять данные.

Практика

1. Путеводитель по JavaScript Promise для новичков
2. Чистый код на Javascript

1. Чем куки (cookie) отличаются от localStorage ?

2. Как реализовать подписку на клик по кнопке, которая отработает только один раз? ( с примером кода )

3. Что такое KISS, DRY, YAGNI?