Windows js что это

Обновлено: 08.01.2025

Немного об объекте window я уже рассказывал вот здесь. В этой статье расскажу ещё немного.

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

Основная задача браузера состоит в отображении HTML-страницы в окне. В клиентском языке JavaScript объект Document представляет HTML-документ, а объект Window - окно (или отдельный фрейм), в котором отображается этот документ. В клиентском JavaScript оба этих объекта важны. Однако объект Window более важен, потому что при программировании на стороне клиента это глобальный объект.

Объект Window определяет несколько свойств и методов, позволяющих управлять окном браузера. Он также определяет свойства, ссылающиеся на другие важные объекты, такие как свойство document объекта Document .

Кроме того, объект Window имеет два свойства для ссылки на себя - window и self . Любая из этих глобальных переменных может использоваться для ссылки непосредственно на объект Window .

Так как объект Window - это глобальный объект, все глобальные переменные определяются как свойства окна (то есть при объявлении глобальных переменных в сценарии на HTML-странице вы на самом деле создаёте свойства объекта window ). Две строки в примере ниже по сути выполняют одно и то же действие:

В первой строке мы объявляем и инициализируем глобальную переменную, а во второй - создаём новое свойство объекта Window .

Однако во второй строке по сути мы просто присваиваем значение уже объявленной глобальной переменной. И если мы сделаем так:

то оба раза будет выведено число 200.

Объект Window представляет окно браузера (или фрейм внутри окна: для клиентского JavaScript окна верхнего уровня и фреймы, можно сказать, одно и то же).

Можно создать программу на JavaScript, работающую с несколькими окнами (или фреймами). Каждое окно программы имеет уникальный объект Window и определяет уникальное содержимое исполняемого кода клиентского JavaScript.

То есть глобальная переменная, объявленная в одном окне, не является глобальной в другом окне. Однако JavaScript-код второго окна может обращаться к глобальной переменной первого фрейма, хотя эта возможность нередко ограничивается в целях безопасности.

Объект Window - это ключевой объект в клиентском JavaScript. Через него доступны все остальные объекты. Например, любой объект Window содержит свойство document , ссылающееся на связанный с окном объект Document , и свойство location , ссылающееся на связанный с окном объект Location .

И когда мы пишем, например:

то мы можем себе позволить это только потому, что браузер понимает такую сокращённую запись. А полная запись вообще-то должна выглядеть так:

window.document.write('Строка');

Объект Window также содержит массив frames[] , ссылающийся на объекты Window , представляющие фреймы исходного окна. То есть document представляет объект Document текущего окна, а frames[2].document ссылается на объект Document третьего дочернего фрейма текущего окна.

Объект Document (и другие объекты клиентского JavaScript) имеют также свойства, которые позволяют ссылаться на другие объекты. Например, в каждом объекте Document имеется массив forms[] , содержащий объекты Form , которые представляют любые присутствующие в документе HTML-формы. О формах я уже рассказывал здесь.

То есть объект Window - это глобальный объект в начале цепочки областей видимости, и все клиентские объекты в JavaScript доступны как свойства других объектов. Это значит, что имеется иерархия JavaScript-объектов, в корне которой находится объект Window (см. рис.):

Если рисунок плохо видно - щёлкните по нему, чтобы открыть в новой вкладке. Если всё-равно плохо видно, то напишу словами:

Текущее окно:

self, window, parent, top - разные объекты Window
navigator - объект Navigator
frames[] - массив объектов Window
location - объект Location
history - объект History

document - объект Document:

forms[] - массив объектов Form:

elements[] - массив объектов элементов форм:

Input

Select :

options[] - массив объектов Option

Объект Window имеет множество свойств, методов и обработчиков событий. Да и вообще это довольно обширный и важный вопрос в программировании на JavaScript. Охватить его целиком в одной статье невозможно.

Поэтому краткое знакомство на этом закончим, а если хотите знать больше, то вам сюда:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- Что такое BOM?

Объектная модель браузера (Brower Object Model - BOM) включает свойства (property), методы (method) предоставленные браузером, чтобы JavaScript мог взаимодействовать с браузером.

Имеются много браузеров как Firefox, Chrome, IE, Opera. Каждый браузер имеет свой собственный стандарт, поэтому BOM немного разные для каждого браузера. Не имеется официального стандарта для BOM. К счастью, новые браузеры постепенно начинают поддерживать широко распространенные стандарты использования.

Рассмотрим способ получения информации ширины и высоты окна браузера, чтобы увидеть разницу между браузерами:

window.innerWidth поддерживается браузерами Firefox, Chrome, Opera, IE 9+ но не поддерживается браузером IE 8 (Или старее), и вам нужно использовать document.documentElement.clientWidth или document.body.clientWidth.

2- Объект window

Объект window является самым важным объектом в BOM, он представляет окно браузера и поддерживается всеми браузерами. Все глобальные (global) объекты Javascript, глобальные функции, глобальные переменные являются членами объекта window.

Например, document является глобальным объектом, он является свойством (property) объекта window, вы можете получить к нему доступ через синтаксис window.document или просто document.

Функция alert("something") является глобальной функцией (global), он является членом объекта window. Поэтому вы можете использовать его следующими способами:

Если вы создаете глобальную переменную, или глобальную функцию, то они являются членами объекта window. Смотрите пример:

3- Позиция, размер.

Свойства (property) для определения размера, позиции . окна браузера:

Свойство	Read Only	Описание
window.innerHeight	Y	Получает высоту области содержимого окна браузера. Или это и есть высота вертикальной полосы прокрутки (Если имеется вертикальная полоса прокрутки).
window.innerWidth	Y	Получает ширину области содержимого окна браузера. Или это и есть ширина горизонтальной полосы прокрутки (Если имеется горизонтальная полоса прокрутки).
window.outerHeight	Y	Получает высоту за пределами окна браузера.
window.outerWidth	Y	Получает ширину за пределами окна браузера.
window.screenX window.screenLeft	Y	Оба данных свойства (property) возвращают горизонтальное расстояние от левой границы окна просмотра браузера пользователя до левой части экрана.
window.screenY window.screenTop	Y	Оба данных свойства (property) возвращают горизонтальное расстояние от верхней границы окна просмотра браузера пользователя до верхней части экрана.
window.scrollX window.pageXOffset	Y	Возвращает количество pixel, которые document уже прокрутил по горизонтали.
window.scrollY window.pageYOffset	Y	Возвращает количество pixel, которые document уже прокрутил по вертикали.

Данные методы помогают изменить размер, позицию. окна браузера:

4- window.status

Свойтсво (property) status объекта window помогает вам содержимое текста, отображаемого в строке статуса (В самом низу браузера). Но по причинам безопасности, почти все браузеры отключают данное свойство для JavaScript. Но если пользователь хочет, он может включить (enable) данное свойство для JavaScript, войдя в "Опции" браузера.

Перед тем как нажать на ссылку, пользователь обычно двигает мышь на поверхность ссылки, чтобы просмотреть адрес той ссылки отображенной в строке статуса(status bar), и нажимает на ту ссылку, только когда чувствует, что она безопасна. Некоторые website могут воспользоваться window.status чтобы отобразить поддельное содержание.

5- Window, Frame

Объект window — глобальный объект, обладающий свойствами, относящимися к текущему документу DOM — тому, что находится во вкладке браузера.

Он включает в себя конструкторы, значения свойств и методы для манипулирования текущей вкладкой браузера, например, открытие и закрытие всплывающих окон и т.д.

В этой статье мы рассмотрим свойства объекта window.document , в том числе свойства visibilityState , childElementCount и firstElementChild .

visibilityState — это свойство, доступное т о лько для чтения, возвращающее статус видимости объекта document — контекст, в котором элемент видим. Полезно знать, виден ли документ в фоновом режиме или на невидимой вкладке, или же загружен для предварительного отображения. Это свойство строки, принимающее следующие значения:

Напишем следующий код, чтобы посмотреть видимость вкладки браузера:

childElementCount — это числовое свойство, доступное только для чтения, возвращающее многоразрядное число без знака, которое отображает количество дочерних элементов заданного элемента. Например, при запуске:

мы получим 1, так как единственный дочерний элемент document — это html элемент.

Чтобы получить дочерние элементы document , используем свойство children — свойство, доступное только для чтения, возвращающее подобный массиву объект HTMLCollection со всеми дочерними элементами объекта document с момента его вызова. Например, у нас есть следующий HTML код:

Мы можем перебрать значения объекта HTMLCollection с помощью цикла for. of , как в следующем коде:

в первой строке console.log . Во второй строке console.log получим следующий вывод:

В третьей строке получим:

Так как мы получаем свойство children из объекта document , элемент html будет единственным дочерним элементом, следовательно у нас будет только один объект children .

firstElementChild — свойство, доступное только для чтения, возвращающее первый дочерний элемент document . Так как дочерний элемент один — это html элемент — он и будет возвращен. Он обладает свойствами объекта Element и, соответственно, свойствами HTML элемента. Если дочерних элементов нет, вернется null . Объект Element также обладает следующими свойствами:

attributes — свойство, доступное только для чтения; возвращает объект NamedNodeMap , в котором перечислены все атрибуты связанные с HTML элементом.
classList — свойство, доступное только для чтения, содержащее список атрибутов класса.
className — свойство, доступное только для чтения. Содержит класс элемента.
clientHeight — свойство, доступное только для чтения, представляющее внутреннюю высоту элемента.
clientLeft —свойство, доступное только для чтения, представляющее ширину левой границы элемента.
clientTop —свойство, доступное только для чтения, представляющее высоту верхней границы элемента.
clientWidth — свойство, доступное только для чтения, представляющее внутреннюю границу элемента.
computedName —свойство, доступное только для чтения, содержит метку открытия доступа.
computedRole — свойство, доступное только для чтения, с ролью ARIA, применяемой к конкретному элементу.
id — строка, содержащая ID элемента.
innerHTML — строка, содержащая HTML разметку содержимого элемента.
localName — свойство, доступное только для чтения, содержащее локальную часть подходящего имени элемента.
namespaceURI —свойство, доступное только для чтения, содержащее пространство имен URL элемента, или null , если пространство имен отсутствует.
nextElementSibling — свойство, доступное только для чтения, содержащее объект Element , отображающий следующий за текущим элемент или null в отсутствие такового.
outerHTML — строка, отображающая разметку элемента, включая содержимое. Также это свойство можно настроить так, чтобы оно заменяло содержимое элемента на HTML, присвоенный этому свойству.
part — содержит идентификаторы частей, установленных атрибутом part .
prefix — свойство строки, доступное только для чтения, содержащее префикс пространства имен элемента или null , если префикс не задан.
previousElementSibling — свойство, доступное только для чтения, содержащее объект Element , отображающий предыдущий элемент или null в отсутствие такового.
scrollHeight — числовое свойство, доступное только для чтения, отображающее высоту прокрутки элемента.
scrollLeft — числовое свойство, отображающее смещение прокрутки элемента влево; может быть геттером или сеттером.
scroolLeftMax — числовое свойство, доступное только для чтения, отображающее максимально возможное для элемента смещение прокрутки влево.
scrollTop — числовое свойство, содержащее количество пикселей вверху документа, который прокручивается вертикально.
scrollTopMax — свойство, доступное только для чтения, содержащее максимально возможное для элемента смещение прокрутки вверх.
scrollWidth — числовое свойство, доступное только для чтения, отображающее ширину прокрутки элемента.
shadowRoot — свойство, доступное только для чтения, отображающее открытый теневой корень, размещенный в элементе или null в отсутствие теневого корня.
openOrClosedShadowRoot — свойство, доступное только для чтения для веб-расширений с теневым корнем, размещенных в элементе независимо от статуса.
slot — имя слота теневого DOM, в который вставлен элемент.
tabStop — логическое свойство, отображающее, может ли элемент получить фокус ввода при нажатии кнопки табуляции.
tagName — свойство, доступное только для чтения, со строкой, содержащей имя тэга заданного элемента.

Например, используя следующий код:

получим что-то вроде:

Индивидуальные свойства объекта HTMLElement можно получить так:

Затем мы должны получить ширину левой границы html элемента — это 0 — и получить HTML-содержимое документа, логированное в двух последних журналах консоли.

С объектом document мы получаем несколько удобных свойств, позволяющих нам получать элементы документа. Свойство visibilityState позволяет узнать, видима вкладка браузера или нет.

Свойство childElementCount отображает количество дочерних элементов объекта документа, которое должно равняться 1, так как единственным дочерним элементом объекта является html элемент.

Свойство firstElementChild выдает первый дочерний элемент объекта документа, который должен быть html элементом, так как является единственным дочерним элементом документа.

window — это глобальный объект предоставляемый браузером, внутри которого содержатся все встроенные в браузерный JavaScript функции и свойства. Каждый раз, когда мы вызываем глобальные функции, такие как alert() или prompt() , браузер ищет их в объекте window . То есть в действительности происходит вызов window.alert() . То же самое относится и ко всем остальным функциям используемым напрямую, без импортов:

window . globalProperty = ' Global variables are evil ' ;

Установка свойства в window автоматически делает это свойство доступным из любой точки кода в браузере. Другими словами так создаются глобальные переменные. Такие переменные создают массу проблем при разработке. Непонятно откуда они берутся и кто и как их меняет. На глобальные переменные нельзя полагаться, они ненадёжны. В любой момент любая часть кода может поменять их, что часто приводит к ошибкам в работе.

Более того, на страницах сайтов практически всегда подключаются скрипты, которые между собой никак не связаны. Это могут быть различные счётчики аналитических систем, маркетинговые инструменты и тому подобное. Все они имеют доступ к одному и тому же window . Это значит, что установка каких-то свойств в window в одном скрипте может случайно сломать работу другого скрипта, который использует такое же глобальное свойство.

В хорошо написанном коде объект window напрямую никогда не встречается. Однако знать про его существование важно для понимания того, как функционирует JavaScript в браузере.

Объектная модель браузера (BOM, Browser Object Model)

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

Предоставляет информацию о браузере, такую как версия, название, используемая локаль, доступные права, подключенные плагины.

Позволяет управлять адресной строкой. Например, вот так можно инициировать загрузку другой страницы:

С помощью этого объекта можно перемещаться по истории переходов, а также формировать её в тех ситуациях, когда не происходит реального перехода по страницам.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

Читайте также: