JavaScript способен полностью преобразить любой HTML-документ — оживить даже самый простой сайт или создать полноценное веб-приложение. По сути, JavaScript умеет всё, что и любой другой язык программирования, но браузеры предоставляют особые Web API, которые дают доступ к мощным функциям и значительно облегчают жизнь.
1 Доступ к HTML и его изменение с помощью DOM
Web API (интерфейс программирования приложений) — это готовые инструменты, которые избавляют вас от рутины и позволяют сосредоточиться на создании функционала и улучшении сайта.
Зачем нужны интерфейсы в объектно-ориентированном программировании?
В языках как Java и C# интерфейсы помогают стандартизировать методы и расширяют возможности полиморфизма при работе с классами.
Некоторые API ориентированы на конкретные задачи — например, управление сенсорным вводом или уведомлениями. Но в основе любой работы с веб-документом лежит DOM.
DOM (Document Object Model) — это стандартное представление структуры веб-страницы, которое JavaScript использует для просмотра и изменения её содержимого. Он отражает иерархию HTML-элементов — узлы, события, текст и прочее.
Если нужно изменить текст на странице, удалить все параграфы или выделить ошибки — всё это делается через DOM. Например, вот простой код, который поменяет цвет всех параграфов на странице:
DOM предоставляет методы, такие как Document.querySelectorAll(), чтобы выбрать нужные элементы, и свойство HTMLElement.style, чтобы менять их стили.
Этот код можно запустить в консоли любого браузера, чтобы проверить, насколько правильно сформирована страница: если параграфы не изменят цвет — скорее всего, в HTML есть ошибки.
2 Легко создавайте и редактируйте URL
Есть сложные API, а есть простые и полезные — например, URL API. Он предлагает удобные методы для работы с адресами ссылок.
Раньше работать с URL в JavaScript было неудобно, но URL API значительно упростил парсинг и изменение адресов.
С помощью конструктора Window.URL() создаётся объект с понятными свойствами для разных частей адреса — например, hash для якоря, host с доменом и портом, а searchParams позволяет управлять параметрами запроса.
3 Загружайте данные из интернета с Fetch
Будь то ссылки на странице или запросы к удалённым сервисам — Fetch API позволяет просто получать данные из сети.
Fetch помогает запросить внешний контент и вставить его на страницу или обработать. Если сайт показывает прогноз погоды или курсы валют, ваш код сможет забрать эти данные и встроить в своё приложение.
Вся работа сводится к одному методу — Window.fetch(). Вот простой пример:
Если запустить этот код в консоли браузера, вы получите объект с данными от сайта https://jsonplaceholder.typicode.com/todos/1. По сути, Fetch отправляет запрос и возвращает ответ для дальнейшей обработки.
4 Управляйте историей навигации браузера
При создании веб-приложений важно учитывать, что HTTP изначально заточен на загрузку отдельных страниц по запросу. JavaScript же позволяет делать динамичные интерфейсы, что иногда мешает правильной работе кнопки «назад» и запутывает историю просмотров.
History API даёт возможность читать и менять историю посещений, помогая делать сайты и приложения более удобными. Например, можно обновлять страницу с помощью JavaScript-кнопки и добавлять новые записи в историю без перезагрузки:
Метод pushState() добавляет новую запись в историю с данными, которые можно получить, если пользователь вернётся к этой странице. Это делает веб-приложение более отзывчивым, снижая нагрузку на сервер, при этом сохраняя привычную навигацию.
5 Хранилища для JavaScript вместо cookies
Раньше, чтобы сохранить состояние между HTTP-запросами, использовали cookies — маленькие данные в заголовках, которые JavaScript напрямую не мог читать.
Web Storage API даёт возможность сохранять данные прямо из JavaScript — на время текущей сессии или навсегда. Это простое хранилище в формате ключ-значение:
Такой подход отлично подходит для веб-приложений без бэкенда. Можно сохранять настройки пользователя или списки просмотренных страниц на простых сайтах.
В хранилище можно записывать только строки, но при необходимости объекты легко сериализуются в JSON через JSON.stringify() при сохранении и восстанавливаются через JSON.parse() при загрузке.
6 Определяйте местоположение пользователя с Geolocation
Раньше точное определение геопозиции было прерогативой только нативных приложений, но Geolocation API теперь даёт такую возможность веб-браузерам — при согласии пользователя.
Координаты используют, чтобы показывать ближайшие магазины, адаптировать контент или определять часовой пояс. Для этого вызывается метод getCurrentPosition() объекта navigator.geolocation:
Потребуются функции для обработки успеха и ошибок. В ответ приходит объект с координатами. Хотя информация о стране или временной зоне напрямую не возвращается, координаты обычно достаточно точные, а API очень прост в использовании.
7 Читайте и сохраняйте файлы прямо на диске
Раньше веб-приложения не могли работать с локальными файлами из соображений безопасности, поэтому создать, например, графический редактор или текстовый процессор в браузере было почти невозможно. Но File System API многое изменил.
Теперь вы можете открыть файл с диска, прочитать его содержимое и сохранить изменения с помощью методов showSaveFilePicker() и createWritable().
File System API сделали работу с локальными файлами почти такой же удобной, как в настольных программах.
8 Отправляйте полезные и своевременные уведомления
Мобильные приложения давно умеют уведомлять пользователей о важных событиях, чтобы не приходилось постоянно проверять. Теперь и веб-приложения могут делать то же самое с помощью Notifications API.
5 функций уведомлений Android, которые сделают вашу жизнь проще
Эффективные и простые уведомления.
Начинается всё с запроса разрешения у пользователя:
Этот шаг обязателен — никто не хочет спам с сайтов без своего согласия. После разрешения отправить уведомление очень просто:
Если браузер позволяет, уведомление появится сразу. Для долгоживущих приложений, например соцсетей, можно регулярно запрашивать новые данные и предупреждать пользователя об обновлениях.
9 Рисуйте прямо на экране с Canvas
Canvas API предоставляет низкоуровневые инструменты для рисования графики в элементе canvas. Его используют для динамических изображений, игр и сложных графических приложений.
Добавьте на страницу элемент canvas:
С его помощью легко нарисовать, например, прямоугольник:
API поддерживает разные фигуры, цвета и стили, а также работу с текстом, изображениями и анимациями.
Я попробовал создать игру с ChatGPT — вот что из этого вышло
Создавать игру сложно, но может ли ChatGPT помочь? Правда в том, что всё равно придётся программировать.
10 Поддержка игровых контроллеров
Ещё один неожиданный API: веб-приложения могут работать с геймпадами и игровыми контроллерами!
Обработка нажатий происходит через опрос устройств (polling), а не события, что не всегда удобно. Вот базовый пример такого подхода:
Придётся учитывать раскладки кнопок, так что код усложнится, но для веб-игр поддержка геймпадов — серьёзный плюс.
Идеальный игровой контроллер вышел в 2021 году — почему я до сих пор его обожаю
Подключается к чему угодно и остаётся актуальным очень долго.
Эти и многие другие Web API подробно описаны в документации MDN. Лучший способ изучить их — запускать примеры из этого обзора в консоли браузера и экспериментировать. Комбинируя HTML, CSS и JavaScript, вы сможете создавать самые разные веб-приложения с потрясающими возможностями.
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Вы также можете найти наши материалы в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru