Браузерное окружение, BOM
Один JavaScript в поле не воин — у JavaScript есть окружение, которое делает его таким мощным и популярным.
Обновлено 20 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Современный JavaScript используется не только в браузерах. Среда, в которой он запускается, будь то браузер, сервер или что-то ещё, называется окружением.
У разных окружений разные возможности и функциональность. В этой статье рассмотрим браузерное окружение и браузерную модель документа.
Окружение предоставляет языку дополнительные возможности и функции. Браузерное окружение, например, даёт возможность работать со страницами сайтов.
Представление этих дополнительных возможностей и функциональности в виде объектов, к которым у языка есть доступ — это объектная модель.
В случае с браузерным окружением — это объектная модель браузера (Browser Object Model, BOM). Она предоставляет доступ к navigator , location , fetch и другим объектам.
/* BOM | __________________________|______________________________________ | | | | | |navigator screen location fetch history . *//* BOM | __________________________|______________________________________ | | | | | | navigator screen location fetch history . */
navigator
Скопировать ссылку «navigator» Скопировано
Объект navigator содержит информацию о браузере: название, версия, платформа, доступные плагины, доступ к буферу обмена и прочее. Это один из самых больших объектов в окружении.
Так, например, может выглядеть содержимое этого объекта в Safari:
Или, например, так в Chrome:
С помощью этого объекта можно узнать, разрешён ли доступ к кукам, получить доступ к буферу обмена, геолокации, узнать, с какого браузера пользователь смотрит на страницу через user Agent .
Забавный факт: поле user Agent объекта navigator часто используется, чтобы определять, в каком именно браузере пользователь смотрит страницу сайта. Но читать его глазами достаточно трудно, поэтому лучше это дело оставить какому-нибудь парсеру.
В июне 2021 появился более безопасный инструмент для определения браузера — User-Agent Client Hints. Его цель в том, чтобы позволить определять тип браузера, не оставив возможности для сбора данных о пользователях.
Также с помощью navigator можно зарегистрировать Service Worker.
screen
Скопировать ссылку «screen» Скопировано
Объект screen содержит информацию об экране браузера.
width и height указывают ширину и высоту экрана в пикселях соответственно. avail — метрики указывают, сколько ширины и высоты доступно — то есть ширину и высоту с учётом интерфейсных деталей браузера типа полос прокрутки.
pixel Depth указывает количество битов на один пиксель экрана.
location
Скопировать ссылку «location» Скопировано
Объект location даёт возможность узнать, на какой странице мы находимся (какой у неё URL) и перейти на другую страницу программно.
Внутри него есть полезные поля для того, чтобы искать нужную часть адреса.
- href содержит URL целиком, включая в себя полный адрес хоста, страницы и все query-параметры.
- host и hostname указывают имя хоста. Разница между ними в том, что host включает в себя порт. Если бы мы стучались не на [google . com ] ( http : / / google . com ) , а на google . com : 8080 , то host содержал бы значение www . google . com : 8080 , в то время как hostname остался бы тем же.
- pathname указывает путь от корня адреса до текущей страницы.
- search указывает query-параметры, которые находятся в адресной строке, если они есть.
- hash указывает хеш (ID элемента после # ) страницы. Его ещё называют якорем, потому что при переходе на страницу с хешем браузер найдёт элемент с ID, равным этому хешу, и прокрутит страницу к этому элементу.
Если мы хотим изменить адрес и перейти на другую страницу, мы можем указать новый location . href :
location.href = 'https://yandex.ru'location.href = 'https://yandex.ru'
И браузер перейдёт на страницу с адресом https://yandex.ru.
fetch
Скопировать ссылку «fetch» Скопировано
fetch предоставляет возможность работы с сетью, с его помощью можно отправлять запросы на сервер.
fetch('http://example.com/movies.json') .then((response) => return response.json() >) .then((data) => console.log(data) >)fetch('http://example.com/movies.json') .then((response) => return response.json() >) .then((data) => console.log(data) >)
history
Скопировать ссылку «history» Скопировано
history даёт доступ к истории браузера, которая ограничена текущей вкладкой. То есть с её помощью можно перейти на страницу назад, только если мы пришли с неё.
Чтобы перемещаться по истории назад и вперёд, можно использовать методы back ( ) и forward ( ) :
// Перешли на страницу назадhistory.back() // Перешли на страницу вперёд.history.forward()// Перешли на страницу назад history.back() // Перешли на страницу вперёд. history.forward()
Для более точного управления историей рекомендуется использовать push State ( ) и replace State ( ) .
Методы push State ( ) и replace State ( ) принимают три параметра:
- state — любые данные, которые связаны с переходом;
- unused — неиспользуемый параметр, который существует по историческим причинам;
- url (необязательный) — url адрес новой записи в истории.
// state — данные для новой записи в историиconst state = // unused — для совместимости рекомендуется передавать пустую строку:const unused = '' // url — url адрес который будет добавлен в адресную строку:const url = '/another-page/' history.pushState(state, unused, url)// state — данные для новой записи в истории const state = user_id: 5 > // unused — для совместимости рекомендуется передавать пустую строку: const unused = '' // url — url адрес который будет добавлен в адресную строку: const url = '/another-page/' history.pushState(state, unused, url)
Браузер «перейдёт» на страницу /another — page / . Перейдёт не по-настоящему, потому что страница не перезагрузится, а лишь сменит адрес в строке. Это удобно при работе с одностраничными приложениями, когда мы не хотим, чтобы страница перезагружалась.
local Storage , session Storage
Скопировать ссылку «localStorage, sessionStorage» Скопировано
Локальные хранилища используются, чтобы хранить какие-то данные в браузере пользователя.
Они удобны, когда мы не хотим отправлять данные на сервер, потому что они, например, промежуточные, или нужны только на клиенте.
Допустим, у нас есть форма из 5 шагов, и мы хотим, чтобы все введённые данные сохранились, и пользователь, закрыв браузер и через какое-то время вернувшись, мог не набирать их заново.
function saveToStorage(data) try window.localStorage.setItem('some-key', JSON.stringify(data)) > catch alert('Failed to save data to local storage.') >> function loadFromStorage() try return JSON.parse(window.localStorage.getItem('some-key')) > catch alert('Failed to load data from local storage.') >> // Код обработки формы function nextStep() // При переходе сохраняем всё, что введено: saveToStorage(formData)>function saveToStorage(data) try window.localStorage.setItem('some-key', JSON.stringify(data)) > catch alert('Failed to save data to local storage.') > > function loadFromStorage() try return JSON.parse(window.localStorage.getItem('some-key')) > catch alert('Failed to load data from local storage.') > > // Код обработки формы function nextStep() // При переходе сохраняем всё, что введено: saveToStorage(formData) >
Разница между local Storage и session Storage в длительности хранения данных. Данные из session Storage сотрутся, когда пользователь закроет вкладку с приложением. Данные же из local Storage не стираются сами по себе.
На практике
Скопировать ссылку «На практике» Скопировано
Как запустить JS-код
JavaScript — популярный язык программирования с широким спектром применения. Раньше его использовали в основном для интерактивности веб-страницам: например, для анимации или валидации форм. Сейчас же JS используется еще и во многих других областях: разработка серверных, мобильных приложений и так далее.
Из-за широкого спектра применения JavaScript можно запустить несколькими способами:
Через вкладку «Консоль» в браузере
В большинстве современных браузеров уже есть встроенные механизмы JavaScript, поэтому запустить код на JS можно прямо в браузере. Вот, как это сделать:
Шаг 1. Откройте любой браузер (мы будем использовать Google Chrome).
Шаг 2. Откройте инструменты разработчика. Для этого щелкните правой кнопкой мыши на пустой области и выберите пункт «Просмотреть код» (Inspect). Горячая клавиша: F12.
Шаг 3. В инструментах разработчика перейдите на вкладку «Консоль» (Console). Здесь уже можно писать код на JavaScript. Попробуйте ввести console.log(«Hello, world!») и нажмите Enter, чтобы запустить код.
С помощью Node.js
Node — среда выполнения кода JavaScript вне браузера. Вот, как запустить JS с помощью Node.js:
Шаг 1. Установите последнюю версию Node.js.
Шаг 2. Установите IDE или текстовый редактор. Мы будем использовать Visual Studio Code.
Шаг 3. В VS Code перейдите в Файл > Новый файл и напишите код на JS. Сохраните файл с расширением .js. Мы написали программу, которая выводит на экран строку «Hello, world!», поэтому файл будет называться helloworld.js.
Шаг 4. Откройте терминал/командную строку, перейдите к расположению файла (используйте команду cd ). Введите node helloworld.js и нажмите Enter. Вывод появится в терминале.
Примечание. JavaScript-код можно написать и запустить непосредственно в терминале. Для этого просто введите node и нажмите Enter.
С помощью веб-страницы
JavaScript изначально создавали для того, чтобы сделать веб-страницы интерактивными, поэтому JavaScript и HTML идут рука об руку. Вот, как запустить код на JS с помощью веб-страницы:
Шаг 1. Откройте VS Code. Перейдите в Файл > Новый файл. Сохраните файл с расширением .html. У нас это будет main.html.
Шаг 2. Скопируйте doctype, расположенный ниже. Это необходимый для запуска HTML-страницы код. Сохраните скопированный текст в файле.
Шаг 3. Аналогично создайте файл с расширением .js. Напишите в файле следующий JS-код и сохраните его. У нас это будет helloworld.js.
Шаг 4. Вернитесь к файлу main.html и на 11 строке впишите название JS-файла. В нашем случае это будет выглядеть так:
Шаг 5. Откройте main.html с помощью браузера.
Шаг 6. Чтобы проверить, запустился ли ваш JS-код, щелкните правой кнопкой мыши в свободной области, нажмите «Просмотреть код» и перейдите на вкладку «Консоль».
Теперь, когда вы знаете, как запустить JavaScript, приступим к изучению основ JS.
СodeСhick.io — простой и эффективный способ изучения программирования.
2023 © ООО «Алгоритмы и практика»
Урок 7. JavaScript в веб-разработке
Модели BOM и DOM. Навигация по элементам документа. Доступ к узлам и атрибутам страницы. Изменение структуры DOM. Основные браузерные события.
- Объект window
- Объект document — модель DOM
- Объектная модель браузера — BOM
- Подключение скриптов к сайт
- Создадим текстовый элемент и заголовок первого уровня в начале страницы .
- Копирование абзаца и добавление его после секции с заменой текст.
- Замена всех тегов на странице заголовками второго уровня.
- Добавление текста со специальными символами
- Вывод содержимого атрибута «class».
- Изменение классов
- Изменение атрибутов тегов
- Сброс стилей
- Обработка события через свойство тэга.
- Обработка события через выбор элемента в js-файле.
- Обработка события через специальные методы.
- Параметр event функции-обработчика.
- Этапы события (погружение, достижение цели, всплытие).
- Делегирование событий
Язык JavaScript создавался, в первую очередь, для работы с фронтендом, клиентской стороной пользовательского интерфейса. С его помощью HTML и CSS становятся максимально управляемыми, изменяемыми, с гарантией работы практически на всех устройствах.
Сегодня CSS обладает функционалом, способным заменить часть кода JavaScript, но этого все еще недостаточно, да и достигается существенно большими усилиями. JS-скрипты добавляют динамику на веб-страницы, делая их интерфейс предельно эргономичным и удобным для всех типов пользователей.
Возможности JavaScript уже не ограничены только лишь frontеnd’ом , его применяют на серверной стороне, разных платформах и устройствах. Наша задача: рассмотреть этот язык программирования в плане его использования в браузере, на пользовательской стороне.
Чтобы JavaScript получил возможность запуска (в браузере, операционной системе), необходимо предоставить ему определенную функциональность. Ее называют окружением. Окружение позволяет языку программирования получить доступ к своим объектам, функциям, переменным в дополнение к базовым инструментам JavaScript. В частности, браузер «разрешает» управлять web-страницами. Схема браузерного окружения приведена ниже: