API (программный интерфейс приложения, интерфейс прикладного программирования) (англ. application programming interface, API [эй-пи-ай]) — описание способов (набор классов, процедур, функций, структур или констант), которыми одна компьютерная программа может взаимодействовать с другой программой.
Под API можно понимать любые методы и свойства, которые не относятся непосредственно к конструкциям языка
Каким API пользуются разработчики?
Единственный способ узнать про API - читать документацию (статьи, книги, смотреть доклады).
Единственный способ научиться пользоваться API - работать с API.
Что мы посмотрим:
DOM - Document Object Model.
API браузера для работы с веб страницей и ее элементами. Представлено глобальными объектами window, document и API для работы с HTML элементами (создание, удаление, редактирование).
Поиск элементов на странице:
document.getElementByIddocument.getElementsByTagNamedocument.getElementsByClassNamedocument.querySelectordocument.querySelectoAllDocument API и описание селекторов(1, 2, 3)
Создание и изменение элементов. Два варианта:
innerHTML и работа с элементами как со строкой HTMLdocument.createElement и работа с элементами как с узлами дереваДля подписки на события элементов есть 3 варианта:
addEventListener <-- мы будем использовать вот этотonclick="func()"el.onclick=funcDOM 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 нужно проверять данные.
Чем куки (cookie) отличаются от localStorage ?
Как реализовать подписку на клик по кнопке, которая отработает только один раз? ( с примером кода )
Что такое KISS, DRY, YAGNI?