Объект Window в JavaScript

Для создания всплывающих окон в JavaScript используется объект Window. У этого объекта существует ещё одна классная функция, о которой мы поговорим ближе к концу статьи. А пока о том, как использовать объект Window в JavaScript по своему прямому назначению.

Конструктора у объекта Window, в том плане, что он закрыт, поэтому окна создаются через метод объекта Window - open():

В данном примере мы создаём окно, в которое будет подгружен сайт: "http://myrusakov.ru", а имя нового окна будет: "My Window". Это простейший вариант создания окна в JavaScript. Однако, у метода open() существует ещё один необязательный параметр, с настройками нового окна:

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

• Width - отвечает за ширину нового окна.
• Height - отвечает за высоту нового окна.
• Menubar - если стоит "yes", то в новом окне будет меню, если стоит "no", то, соответственно, меню не будет.
• Toolbar - отвечает за наличие панели инструментов.
• Location - отвечает за наличие адресной строки в новом окне.
• Scrollbars - отвечает за наличие полос прокрутки.

Теперь переходим к методам, позволяющим управлять объектом Window в JavaScript. Сразу хочется заметить, что глобальное окно (в котором и выполняется наш скрипт) также является экземпляром объекта Window, и именно к нему и будут применены некоторые методы.

А начнём мы с простейших методов - focus() и blur(). Эти методы позволяют навести фокус на окно (focus()) и, наоборот, потерять его (blur()). Если вдруг, кто не знает, то фокус - это когда окно становится активным. Когда окно перестаёт быть активным (переключились на другое окно), то говорят, что окно теряет фокус. В следующем примере демонстрируется использование этих двух методов:

Здесь мы даём фокус нашему окну, потом ставим некую задержку (пока не буду приводить код задержки, чуть попозже, потерпите, пожалуйста), а потом снимаем фокус.

Метод close() позволяет закрыть окно:

Хочется заметить, что данный метод не всегда сработает для глобального окна. А если и сработает, то выдаст предупреждение пользователю о закрытии окна, в котором он может либо подтвердить, либо отклонить закрытие.

Есть ещё и другие методы в объекта Window, которые тоже могут использоваться - это методы back() и forward(). Эти методы заменяют кнопки "Назад" и "Вперёд" в браузере. Иногда это используют, чтобы сайт был более удобен для пользователя (например, сделать кнопки на сайте для возврата на предыдущую страницу). Применение этих методов очевидное и очень простое:

И при заходе на эту страницу пользователь автоматически вернётся назад (при условии, что есть куда возвращаться, конечно). Аналогичный метод и forward(). Но сейчас я хочу, чтобы Вы обратили внимание на то, что мы применили в этот раз метод к глобальному окну, а разработчики нам позволили этот глобальный объект не писать, то есть, например, так:

Очевидно, что если бы применяли метод к объекту Window, который мы создали через open(), то пришлось бы писать его имя, как мы делали раньше.

Теперь перейдём к методам, которые используют очень часто, - таймерам в JavaScript. Есть всего два метода для работы с таймерами. Первый метод - это setTimeout(). Эта функция принимает два параметра: функцию (либо код), которую нужно выполнить, и второй параметр - задержку (в миллисекундах), через которую надо выполнить функцию (либо код). Вот пример:

Если Вы запустите данный скрипт, то через 3 секунды после начала выполнения Вы увидите информационное сообщение. Обратите внимание, что метод setTimeout() применён к глобальному окну, поэтому мы не писали так: "window.setTimeout()". Хотя, конечно, так тоже можно писать, просто разработчики JavaScript предоставили нам сокращённую запись.

Если требуется остановить таймер, то используется метод clearTimeout(), который принимает в качестве параметра идентификатор, полученный при использовании метод setTimeout():

То есть сразу после запуска таймера, мы его останавливаем, соответственно, выражение: "3 + 4" посчитано не будет.

Ключевая особенность метода setTimeout() в том, что он выполняется всего один раз. В нашем примере, он вызвал функцию func() и всё. Больше эта функция вызываться через таймер не будет. А вот для того, чтобы настроить регулярное срабатывание таймера через равные промежутки времени используется метод setInterval():

В данном случае, мы создали глобальную переменную counter, которая показывает, сколько раз была вызвана функция. От неё считается и прошедшее время после начала выполнения скрипта. Также заметьте, что функция func() требует параметр. Этот параметр передаётся в методе setInterval() сразу после параметра с задержкой. Если будет два параметра в функции, то в методе setInterval() также надо будет дописать ещё два передающихся параметра. Такие же правила и для метода setTimeout().

В скрипте после 4-х вызовов функции мы останавливаем непрерывное выполнение таймера.

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