Используя JavaScript, вы можете радикально преобразовать HTML-документы, добавляя функциональность статическим веб-страницам и даже создавая полноценные веб-приложения. По своей сути JavaScript может делать все, что может любой другой язык программирования. Однако, помимо этого, веб-браузеры реализуют несколько веб-API, которые обеспечивают мощную поддержку различных функций.
1 Доступ и изменение HTML с помощью DOM
Все веб-API (интерфейс прикладного программирования) предоставляют код, чтобы вам не пришлось. Они обрабатывают сложные низкоуровневые детали, позволяя разработчикам сосредоточиться на создании своего приложения или добавлении небольших динамических улучшений на свой сайт.
Многие из этих API нацелены на конкретные технологии, такие как сенсорный ввод или уведомления. Однако этот первый API является основополагающим для всего веб-программирования, которое включает в себя документ, например веб-страницу, написанную на HTML.
DOM (Document Object Model) — это стандартное представление веб-страницы, которое JavaScript может использовать для проверки ее содержимого или изменения определенных частей. Оно отражает иерархическую природу HTML и имеет дело с основными концепциями, такими как узлы, элементы, события и текст.
Если вы хотите изменить текст на веб-странице, удалить все абзацы или выделить орфографические ошибки, DOM будет в центре всего этого. Например, вот короткий фрагмент, который изменит цвет каждого абзаца на странице:
document.querySelectorAll(«p»).forEach(function(element) {
элемент.стиль.цвет = «оранжевый»;
});
DOM предоставляет метод Document.querySelectorAll() и свойство HTMLElement.style. Соответственно, они извлекают соответствующие элементы и получают доступ к встроенному CSS.
Вы можете запустить этот фрагмент на любом веб-сайте, используя функцию инструментов разработчика вашего браузера. Это хороший способ проверить, насколько хорошо структурирована веб-страница: если то, что вы ожидаете увидеть в абзацах, не становится оранжевым, в HTML могут быть ошибки.
2. Создавайте и обрабатывайте URL-адреса проще
Некоторые веб-API имеют огромный охват, но другие гораздо более ограничены. Этот API — один из последних. URL API включает удобные методы для работы с URL.
Раньше поддержка URL в веб-программировании на JavaScript была неравномерной, но URL API значительно упростил эту задачу.
пусть addr = новый URL(«https://example.com/this/is/just?an=example»);
console.log(addr.pathname);
console.log(addr.searchParams.get(«an»));
Анализ URL через конструктор Window.URL() возвращает объект со свойствами, представляющими различные части этого URL. К ним относятся такие вещи, как хэш для идентификатора фрагмента, кашель для домена и порта URL-адреса, а также поискПараметры который предоставляет доступ к параметрам запроса.
3. Извлечение веб-контента
Независимо от того, обрабатываете ли вы HREF значения ссылок на странице или управление URL-адресами для удаленных служб, Fetch — это простой и полезный ресурс. API Fetch позволяет вам писать код, который действует как headless-браузер.
Вы можете извлечь удаленный контент и вставить его на страницу или извлечь данные и обработать их. Если сайт предоставляет прогнозы погоды или данные фондового рынка, вы можете использовать Fetch, чтобы извлечь эти данные и интегрировать их с вашим собственным приложением.
Один метод — Window.fetch() — обеспечивает всю функциональность Fetch API. Вот простой пример его использования:
выборка(‘https://jsonplaceholder.typicode.com/todos/1’)
.then (ответ => response.json ())
.then(json => console.log(json))
Если вы запустите это в консоли браузера, он должен вывести сведения об объекте, который вы видите, если перейдете напрямую к https://jsonplaceholder.typicode.com/todos/1. За кулисами Fetch API отправляет запрос на целевой веб-сайт и возвращает ответ вызывающему коду, готовый к дальнейшей обработке.
4. Проверка и изменение истории навигации браузера.
Большая часть работы, связанной с созданием веб-приложений, заключается в преодолении ограничений, налагаемых HTTP. Протокол был разработан для обслуживания отдельных документов, загружаемых и отображаемых через отдельные запросы. Программирование на JavaScript усложняет ситуацию; в частности, веб-приложения могут загрязнять историю браузера и могут сломать кнопку «Назад», если вы не будете осторожны.
Чтобы справиться с этими проблемами, History API позволяет вам перемещаться по истории пользователя и изменять ее. Наиболее практичное использование этой функции — вставлять полезные записи в историю, которые в противном случае были бы проигнорированы. Например, у вас может быть кнопка, которая обновляет ваш документ с помощью JavaScript:
Страница 2
Затем вы можете добавить запись в историю браузера, когда нажатие этой кнопки приведет к обновлению содержимого страницы:
кнопка.addEventListener(«щелчок», функция(ev) {
пусть страница = ev.target.getAttribute(«страница-данных»),
данные = fetch_page(страница);
история.pushState(данные, «», страница);
});
Метод pushState() добавляет запись в историю браузера, дополненную записью данных, которые вы можете получить, если пользователь вернется на эту страницу. В результате ваше веб-приложение может быть гораздо более отзывчивым, избегая ненужных обращений к серверу, но при этом предоставляя полезную историю навигации.
5. Замените файлы cookie хранилищем, доступным через JavaScript
Старый способ хранения состояния в HTTP-запросах заключался в использовании cookie-файлов. Эти небольшие пакеты данных сохранялись на клиенте и передавались на сервер в HTTP-заголовках, но это означало, что JavaScript не мог получить к ним доступ.
Для поддержки аналогичного механизма для JavaScript API Web Storage позволяет сохранять данные, как для текущего сеанса, так и навсегда. Это простая система пар ключ/значение:
localStorage.setItem(«Тема», «Темный»);
…
пусть тема = localStorage.getItem(«Тема»);
Этот API идеально подходит для веб-приложений, которым не нужна серверная функциональность. Вы можете легко обновить статический веб-сайт, сохранив пользовательские настройки или данные о просмотренных страницах.
Значения, которые вы сохраняете с помощью API веб-хранилища, должны быть строками. Чтобы сохранить другие типы данных, вы можете преобразовать их в JSON с помощью JSON.stringify() перед сохранением, а затем вызвать JSON.parse() при загрузке.
6. Узнайте, где ваши пользователи используют геолокацию
Исторически, если вам нужно было работать с физическим местоположением посетителя, вам требовалось собственное приложение. API геолокации предоставляет эту функциональность веб-браузерам, если пользователь дает разрешение.
Детали местоположения могут использоваться по многим причинам: например, для отображения близлежащих магазинов, предоставления контента, специфичного для местоположения, или для определения часового пояса пользователя. Работа с местоположением пользователя так же проста, как вызов метода getCurrentPosition() объекта navigator.geolocation:
navigator.geolocation.getCurrentPosition(успех, ошибка);
Вам нужно будет определить функции ошибки и успеха; последняя получает объект GeolocationPosition со свойством coords. Здесь нет никаких излишеств, поэтому вам нужно будет извлечь информацию, например, страну или часовой пояс, отдельно. Но координаты, которые вы получите, могут быть очень точными, а API прост в использовании.
7 Чтение и запись файлов на локальном диске
Традиционно веб-приложения не могли получить доступ к локальным файлам по соображениям безопасности. Это позор, поскольку это не позволяет работать целому ряду интересных приложений, таких как программы рисования, текстовые редакторы и т. д. К счастью, API файловой системы позволяет это использовать.
асинхронная функция getFile() {
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
console.log(имя.файла + » — это » + тип.файла);
возврат файла;
}
Вы можете использовать полученный объект File для чтения данных из файла, напрямую с диска. Запись — это похожий процесс, включающий метод showSaveFilePicker() и метод FileHandle createWritable().
Используя классы файловой системы, чтение и запись данных теперь в значительной степени прозрачны, что обеспечивает более тесную интеграцию с локальным дисковым хранилищем. Этот API является одним из самых важных для приведения веб-приложений в соответствие с собственными приложениями.
8. Отправляйте полезные и своевременные уведомления
Мобильные приложения стали пионерами в области функций, которые автоматически сообщают пользователям о важных событиях. Это полезно, когда приложение сообщает вам о чем-то, чтобы вам не приходилось искать это самостоятельно.
Однако веб-приложения догоняют. Вы могли видеть, что веб-приложения предлагают свои собственные уведомления, и они включены через API уведомлений.
Рабочий процесс уведомления состоит из нескольких этапов, начиная с запроса разрешения:
Уведомление.запросРазрешения().тогда((результат) => {
console.log(результат);
});
Это важный шаг, который API обеспечивает, поскольку никто не хочет, чтобы веб-сайты создавали уведомления против их воли. Однако с разрешением отправка уведомления довольно проста:
новое Уведомление(«Сделайте что-нибудь важное!»);
Если настройки вашего браузера позволяют, это немедленно покажет уведомление. Для долго работающего веб-приложения, например, сайта социальной сети, вы можете периодически опрашивать новый контент, а затем создавать уведомление, если в ленте появляется соответствующий пост.
9. Рисуем на экране с помощью холста
API Canvas предоставляет низкоуровневые функции для рисования графики в элементе холста. Вы можете использовать это для создания динамических изображений, создания игры или разработки полноценного графического приложения.
Начните с элемента холста на вашей веб-странице:
Имея этот элемент на месте, легко нарисовать прямоугольник:
document.getElementById(«c»).getContext(«2d»).fillRect(10, 10, 100, 60);
Полный API поддерживает множество различных форм, цветов и стилей. Он позволяет рисовать текст, преобразовывать изображения и даже создавать сложные анимации.
10 Поддержка Подключенных Геймпадов
Еще один API, который вас, возможно, удивит: да, веб-приложения могут поддерживать геймпады и другие игровые контроллеры!
Для обнаружения нажатий кнопок вам придется использовать опрос, а не обработку событий, и это может быть менее удобно. Стандартный подход выглядит так:
requestAnimationFrame(updateStatus);
функция updateStatus() {
пусть геймпад = навигатор.getGamepads()[0];
const GAMEPAD_BUTTON_LEFT = 14;
если (геймпад) {
gamepad.buttons.entries().forEach(function (btn) {
если (btn[0] === GAMEPAD_BUTTON_LEFT && btn[1].pressed) {
console.log(«Нажата ЛЕВАЯ»);
}
});
}
requestAnimationFrame(updateStatus);
}
Вам придется иметь дело с назначением кнопок, и этот код может быть довольно сложным, но это того стоит, поскольку позволяет добавить поддержку геймпадов в ваши веб-игры.
Эти веб-API — и многие другие — задокументированы на MDN. Лучший способ узнать о них — попробовать пример кода, например, приведенные выше фрагменты. Поэкспериментируйте в консоли JavaScript вашего браузера и откройте для себя новые типы приложений, которые вы можете создать, используя только HTML, CSS и JavaScript.
