Для создания всплывающих окон в JavaScript используется объект Window . У этого объекта существует ещё одна классная функция, о которой мы поговорим ближе к концу статьи. А пока о том, как использовать объект Window в JavaScript по своему прямому назначению.
Для создания всплывающих окон в JavaScript используется объект Window. У этого объекта существует ещё одна классная функция, о которой мы поговорим ближе к концу статьи. А пока о том, как использовать объект Window в JavaScript по своему прямому назначению.
Конструктора у объекта Window, в том плане, что он закрыт, поэтому окна создаются через метод объекта Window - open():
var win = window.open("http://myrusakov.ru", "My Window");var win = window.open("http://myrusakov.ru", "My Window", "width=400,height=500,menubar=yes,toolbar=no,location=yes,scrollbars=yes");Обратите внимание на то, что этот параметр имеет очень жёсткие условия в плане синтаксиса: никаких пробелов быть вообще не должно. А именно эту ошибку чаще всего и допускают. Теперь о параметрах:
- Width - отвечает за ширину нового окна.
- Height - отвечает за высоту нового окна.
- Menubar - если стоит "yes", то в новом окне будет меню, если стоит "no", то, соответственно, меню не будет.
- Toolbar - отвечает за наличие панели инструментов.
- Location - отвечает за наличие адресной строки в новом окне.
- Scrollbars - отвечает за наличие полос прокрутки.
Теперь переходим к методам, позволяющим управлять объектом Window в JavaScript. Сразу хочется заметить, что глобальное окно (в котором и выполняется наш скрипт) также является экземпляром объекта Window, и именно к нему и будут применены некоторые методы.
А начнём мы с простейших методов - focus() и blur(). Эти методы позволяют навести фокус на окно (focus()) и, наоборот, потерять его (blur()). Если вдруг, кто не знает, то фокус - это когда окно становится активным. Когда окно перестаёт быть активным (переключились на другое окно), то говорят, что окно теряет фокус. В следующем примере демонстрируется использование этих двух методов:
win.focus();
//Некая задержка
win.blur();Здесь мы даём фокус нашему окну, потом ставим некую задержку (пока не буду приводить код задержки, чуть попозже, потерпите, пожалуйста), а потом снимаем фокус.
Метод close() позволяет закрыть окно:
win.close();Хочется заметить, что данный метод не всегда сработает для глобального окна. А если и сработает, то выдаст предупреждение пользователю о закрытии окна, в котором он может либо подтвердить, либо отклонить закрытие.
Есть ещё и другие методы в объекта Window, которые тоже могут использоваться - это методы back() и forward(). Эти методы заменяют кнопки "Назад" и "Вперёд" в браузере. Иногда это используют, чтобы сайт был более удобен для пользователя (например, сделать кнопки на сайте для возврата на предыдущую страницу). Применение этих методов очевидное и очень простое:
window.back();И при заходе на эту страницу пользователь автоматически вернётся назад (при условии, что есть куда возвращаться, конечно). Аналогичный метод и forward(). Но сейчас я хочу, чтобы Вы обратили внимание на то, что мы применили в этот раз метод к глобальному окну, а разработчики нам позволили этот глобальный объект не писать, то есть, например, так:
back();Очевидно, что если бы применяли метод к объекту Window, который мы создали через open(), то пришлось бы писать его имя, как мы делали раньше.
Теперь перейдём к методам, которые используют очень часто, - таймерам в JavaScript. Есть всего два метода для работы с таймерами. Первый метод - это setTimeout(). Эта функция принимает два параметра: функцию (либо код), которую нужно выполнить, и второй параметр - задержку (в миллисекундах), через которую надо выполнить функцию (либо код). Вот пример:
setTimeout(func, 3000);
function func () {
alert("Прошло 3 секунды");
}Если Вы запустите данный скрипт, то через 3 секунды после начала выполнения Вы увидите информационное сообщение. Обратите внимание, что метод setTimeout() применён к глобальному окну, поэтому мы не писали так: "window.setTimeout()". Хотя, конечно, так тоже можно писать, просто разработчики JavaScript предоставили нам сокращённую запись.
Если требуется остановить таймер, то используется метод clearTimeout(), который принимает в качестве параметра идентификатор, полученный при использовании метод setTimeout():
var id = setTimeout("3 + 4", 5000);
clearTimeout(id);То есть сразу после запуска таймера, мы его останавливаем, соответственно, выражение: "3 + 4" посчитано не будет.
Ключевая особенность метода setTimeout() в том, что он выполняется всего один раз. В нашем примере, он вызвал функцию func() и всё. Больше эта функция вызываться через таймер не будет. А вот для того, чтобы настроить регулярное срабатывание таймера через равные промежутки времени используется метод setInterval():
var counter = 0;
var id = setInterval(func, 5000, "Tommy");
function func(name) {
counter++;
alert(name + ", уже прошло " + (counter * 5) + " секунд!");
if (counter == 4) clearInterval(id);
}В данном случае, мы создали глобальную переменную counter, которая показывает, сколько раз была вызвана функция. От неё считается и прошедшее время после начала выполнения скрипта. Также заметьте, что функция func() требует параметр. Этот параметр передаётся в методе setInterval() сразу после параметра с задержкой. Если будет два параметра в функции, то в методе setInterval() также надо будет дописать ещё два передающихся параметра. Такие же правила и для метода setTimeout().
В скрипте после 4-х вызовов функции мы останавливаем непрерывное выполнение таймера.
Вот и все методы объекта Window, который используется очень часто, хотя бы потому что этот объект является глобальным, и именно к нему мы в следующих статья будем обращаться, только не к самому объекту Window, а уже к его свойствам, которые сами являются крупнейшими объектами в JavaScript.
