Различия между window, screen, document в JavaScript

Быстрый ответ

window — это центр управления операциями JavaScript в браузере. screen — это информационное поле, предоставляющее данные о свойствах экрана пользователя. А document? Это контейнер, вмещающий HTML-содержимое, структуру и элементы веб-страницы, которые мы можем изменить или извлечь. Используйте window чтобы управлять браузером, screen — чтобы получить информацию об экране, а document — для изменения содержимого страницы. 💫

console.log(window.innerHeight); // Высота видимой части окна браузера – наш иллюминатор в мир!
console.log(screen.colorDepth);  // Глубина цвета экрана – сколько оттенков мы можем различить?
console.log(document.URL);       // URL текущего документа – где мы находимся?

В другими словами, window взаимодействует с браузером, screen — с физическими характеристиками дисплея, а document — непосредственно с HTML-содержимым страницы. Эти три составляющие создают гармоничное взаимодействие, похожее на действующую группу в замысловатой научно-фантастической истории.

Каждая деталь важна (призываем внутреннего Шерлока Холмса)

Window: Джентльмен и управляющий браузером

В мире JavaScript, window представлен глобальным объектом, который позволяет управлять браузером. Этот верховный объект предоставляет доступ к:

• Навигационным возможностям: Прямой доступ к localStorage и sessionStorage.
• Управлению временем: Применение таймеров и интервалов через setTimeout() и setInterval().
• Геометрическим параметрам: Определение размеров видимой части окна с помощью innerWidth и innerHeight.

И даже знали ли вы, что каждый IFRAME создает свои собственные объекты window и document? Учитывайте это, работая с разветвленными структурами window.

Подробнее об этом расскажет наш спикер на видео

Document: Легкий доступ к содержимому

"Кто управляет DOM?" — на помощь призывается document. Он выступает ключевым объектом модели DOM и позволяет:

• Работать с DOM: Управлять HTML-элементами с помощью методов типа getElementById().
• Доступ к свойствам веб-страницы: Позволяет получить такие свойства как title и URL, которые характеризуют текущий HTML-документ.

Screen: Фортепиано для работы с техническими параметрами

Хотите узнать больше об экране пользователя? Знакомьтесь с screen! Он раскрывает:

• Технические характеристики: Размеры, глубину цвета и другую информацию о дисплее.
• Максимум возможностей интерфейса: Использование availWidth и availHeight позволит определить, какую область можно использовать для отображения, исключая элементы интерфейса, такие как панель задач.

screen не разгадает все тайны вселенной, но дает отличное представление о пользовательских возможностях!

Краткий справочник: Когда использовать тот или иной объект?

Выбор объекта зависит от поставленной задачи:

• Если вам нужен "глобальный контекст" для ваших переменных и функций, вам пригодится window.

let myTimer = window.setTimeout(() => {
  console.log('Привет, мир! В какой мы временной точке?'); // Будем здороваться в стиле!
}, 2000);

• Разрабатываете приложение, который зависит от размера экрана пользователя? screen готов вам помочь!

if(screen.width > 1080) {
  loadHighResImages(); // Ведь экраны с разрешением менее 1080 пикселей уже неактуальны!
}

• Нужно внести изменения в элементы веб-страницы? Тогда вам обязательно пригодится document!

document.getElementById('welcome').innerText = 'Привет, звездный странник!'; // Знакомьтесь, это простые приветствия в мире JavaScript

Совет: Мир полон событий

window и document становятся основными персонажами при работе с событиями. Обычно window связан с событиями, касающимися пользовательского интерфейса (resize, load и др.), а document применяется для событий DOM (DOMContentLoaded и др).

window.addEventListener('resize', resizeHandler);
document.addEventListener('DOMContentLoaded', domReadyHandler);

Визуализация — увидьте это самостоятельно

Давайте же взглянем на все это наглядно:

🎬 'window' — это **театр** со всеми атрибутами и сценическими условностями.

📺 'screen' — это сам **экран**, на котором проецируются все изображения для зрителей.

📜 'document' — это **сценарий** спектакля, описывающий все действия и реплики актеров.

Вот короткая таблица для наглядности:

| JavaScript Entity  | Театральная аналогия | Роль на веб-странице           |
| ------------------ | -------------------- | ------------------------------ |
| window             | Театр                | Глобальный объект JavaScript   |
| screen             | Экран                | Информация об экране           |
| document           | Сценарий             | Содержимое веб-страницы        |

И помните, 🎬 охватывает всё, включая 📺, который отображает 📜.

Углубляем мастерство: профессиональные советы!

Вьюпорт в сравнении с экраном

Это важное различие помогает правильно подгонять интерфейс под устройства пользователей.

• window.innerWidth/innerHeight: Параметры вьюпорта.
• screen.availWidth/availHeight: Доступные параметры экрана.

IFRAMEs: миниатюрные окна внутри большого окна

Работая с IFRAME, помните, что каждый IFRAME обладает своими window и document.

let iframe = document.getElementById('myframe');
let iframeDocument = iframe.contentWindow.document; // Изучите внутренний мир "внутри" окна!

Станьте истинным детективом данных!

Используйте console.dir() для детального анализа объектов.

console.dir(window); // Исследуйте свойства объекта window!

Полезные материалы

1. Window – Web APIs | MDN – Подробная информация об объекте Window в JavaScript.
2. Screen – Web APIs | MDN – Справочник по объекту Screen.
3. Document – Web APIs | MDN – Перечень возможностей объекта Document.
4. Браузерная среда, спецификации – Обзор браузер свойств JavaScript.
5. Window Screen Object – Объект Screen: основы и примеры использования.
6. В чем различие между window, screen и document в JavaScript? – Разъяснение с примерами на базе сообщества Stack Overflow.