Объект Window в JavaScript находится на вершине иерархии BOM. Он является родителем всех объектов, которые мы создаем, как напрямую через JavaScript, так и косвенно через DOM.
Объект окна просто представляет собой окно веб-браузера (или фрейм внутри окна), отображающее HTML-документ.
HTML-документ может содержать панель инструментов, меню, саму страницу и множество других объектов.
Все основные веб-браузеры поддерживают объект window, содержащий глобальные переменные, функции и объекты JavaScript. Они автоматически являются членами объекта window.
Создание объекта Window в JavaScript
Веб-браузер автоматически создает экземпляр окна.
Когда веб-браузер загружает веб-страницу с кодом JavaScript, он автоматически создает множество объектов JavaScript, которые предоставляют доступ к веб-страницам и элементам HTML, которые он содержит. Мы используем эти объекты для обновления и взаимодействия с загруженной веб-страницей.
Если HTML-документ содержит несколько фреймов или iframe, браузер создает дополнительные объекты окна для каждого фрейма в одном HTML-документе.
На самом деле фреймы делят веб-страницу на «дочерние» окна, поэтому каждый фрейм содержит свою собственную иерархию объектов браузера.
Обратите внимание, что окно — это объект браузера, а не объект JavaScript, как String, Array, Date и т. д. Это объекты JavaScript.
Объектная модель браузера (BOM) в JavaScript
Объектная модель браузера, или просто BOM, — это функция веб-браузера, которая позволяет нам получать доступ к окну браузера. Этот доступ позволяет нам манипулировать самим окном, не влияя на содержимое HTML-документа.
Используя BOM, мы можем перемещать окно браузера, изменять текст или стиль строки состояния, а также выполнять ряд других функций.
Мы можем организовать объектную модель браузера как иерархию. Единственный объект, который имеет верхнюю позицию в BOM, — это объект окна. В то время как все остальные объекты содержатся внутри объекта окна.
Они не имеют определенного порядка в иерархии. Посмотрите на иерархию на рисунке ниже.
Свойства объекта Window в JavaScript
Объект Window предоставляет набор свойств в JavaScript, которые мы можем применять для управления окном веб-браузера. Они следующие:
1. name: это свойство задает или возвращает имя окна.
2. frames: это свойство представляет собой массив, включающий все объекты фреймов, содержащиеся в объекте окна.
3. length: Это свойство представляет собой количество кадров, содержащихся в окне.
4. closed: Это свойство определяет, закрыто ли окно. Оно возвращает true, если окно браузера или вкладка закрыты.
5. document: это свойство представляет объект, который ссылается на текущий документ, отображаемый в окне.
6. parent: Это свойство представляет собой синоним, который идентифицирует окно, содержащее определенное окно.
7. self: это свойство представляет собой синоним, который идентифицирует текущее окно, на которое ссылаются.
Доступ к свойствам и методам окна
Общий синтаксис для доступа к свойствам и методам окна выглядит следующим образом:
window.propertyName; window.methodName([parameters]); Например: window.name; // возвращает имя окна window.close(); // закрывает окно браузера или вкладку
Методы объекта Window
Объект JavaScript window предоставляет несколько методов, которые мы можем применять для управления окном веб-браузера.
1. alert(): Этот метод отображает диалоговое окно оповещения, содержащее сообщение и кнопку OK. Одна кнопка OK позволяет нам отклонить оповещение. Общий синтаксис:
alert(message);
В этом синтаксисе message — это текст, который мы передаем как параметр и который отображается в диалоговом окне. Давайте рассмотрим пример, в котором мы отобразим диалоговое окно оповещения. В нем есть сообщение и кнопка OK.
<script>
function msg() {
alert("This is an Alert box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
Когда вы запустите этот код скрипта, на экране браузера появится кнопка click. Когда вы нажмете на кнопку, в веб-браузере появится диалоговое окно, содержащее сообщение и кнопку OK.
2. confirmed(): Этот метод отображает диалоговое окно подтверждения, содержащее сообщение с двумя кнопками OK и Cancel. Общий синтаксис выглядит следующим образом:
confirm(message);
Здесь message — это текст, который мы передаем как параметр, который будет отображаться в диалоговом окне. Более того, он возвращает значение true, если пользователь нажимает кнопку OK. Если пользователь нажимает кнопку Cancel, он возвращает значение false.
В следующем примере кода показано использование метода confirmed().
<script>
let ans = window.confirm("Click on any button below");
if(ans) {
alert("You clicked on OK button");
} else {
alert("You clicked on Cancel button");
}
</script>
В этом примере программы вы получите два разных окна оповещения в зависимости от действий пользователя в диалоговом окне подтверждения(). Если вы нажмете кнопку ОК, появится сообщение «Вы нажали кнопку ОК».
3. prompt(): Этот метод отображает диалоговое окно для пользователя и предлагает ему ввести некоторые данные в текстовое поле. Две кнопки OK и Cancel позволяют пользователю закрыть диалоговое окно с двумя противоположными ожиданиями:
- принятие ввода, введенного в диалоговом окне
- отмена всей операции
Общий синтаксис этого метода следующий:
prompt(message, default_input);
Этот метод содержит два параметра: первый — сообщение, которое будет отображено, а второй — вводимые по умолчанию данные в текстовом поле.
Когда пользователь нажимает кнопку OK, этот метод возвращает строковое значение введенной записи. В противном случае он возвращает значение null, если пользователь нажимает кнопку Cancel.
Давайте рассмотрим пример на основе метода prompt().
<script>
let age = prompt("How old are you?", "Please type your current age");
if(age >= 18) {
alert("You are eligible for the vote");
} else {
alert("You are not eligible for the vote");
}
</script>
4. open(): Этот метод открывает новое окно. Давайте создадим программу JavaScript, в которой мы будем отображать содержимое в новом окне.
<script>
function msg() {
open("http://html-templates.info");
}
msg();
</script>
5. close(): этот метод закрывает текущее окно или вкладку.
Работа с тайм-аутами в JavaScript
6. setTimeout(): Этот метод обеспечивает эффективный способ выполнения определенного кода после указанного периода времени. Здесь Timeout сообщает браузеру, когда должен быть выполнен определенный код.
Метод setTimeout() выполняет указанный код после указанного количества миллисекунд. Общий синтаксис для определения этого метода:
setTimeout("JavaScript code or function", milliseconds);
Этот метод принимает два аргумента: код для выполнения и количество миллисекунд (1 секунда = 1000 миллисекунд) ожидания перед его выполнением.
Первый аргумент может быть либо кодом JavaScript, либо именем функции. Рассмотрим следующие строки кода, которые отображают оповещение через 2 секунды.
setTimeout("alert('Happy birthday!')", 2000);
setTimeout(function() { alert('Happy birthday!'); }, 2000);
Давайте рассмотрим пример программы, в которой метод window.setTimeout() отобразит диалоговое окно предупреждения через 5 секунд.
<script>
function msg() {
alert("Happy birthday to you!");
}
setTimeout("msg()", 2000);
</script>
В этом примере мы вызвали метод setTimeout() для выполнения обработки по тайм-ауту, указанному функцией «msg()», через 5 секунд (5000 миллисекунд).
Метод setTimeout() создает числовой идентификатор тайм-аута (т.е. идентификатор таймера), который совпадает с идентификатором процесса в операционной системе. Этот числовой идентификатор идентифицирует функцию msg().
Обычно мы присваиваем его переменной, как показано в следующем примере.
var timer = setTimeout("msg()", 5000);
Чтобы отменить оставшийся таймаут, используйте clearTimeout(ID) и передайте идентификатор таймаута для отмены таймера. Посмотрите на код.
clearTimeout(timer);
Этот оператор очищает тайм-аут, идентифицированный «timer». Он предотвращает вызов msg() после истечения периода тайм-аута.
Посмотрите на следующий пример кода.
<script>
function msg() {
alert("Happy birthday to you!");
}
var timer = setTimeout("msg()", 5000);
function clearTimer() {
clearTimeout(timer);
alert("Good job done");
}
clearTimer();
</script>
Давайте рассмотрим еще один пример программы, основанной на методе setTimeout().
<script>
// Create a counter variable and a timer variable.
var num = 0, timer;
function timeout() {
if(num == 3)
{
alert("Good job done");
window.clearTimeout(timer);
}
else {
alert("Happy birthday to you!");
timer = window.setTimeout("timeout()", 1000);
}
num++;
}
timeout();
</script>
В этом уроке вы изучили объект окна в JavaScript и его полезные методы с множеством примеров программ. Надеюсь, вы поняли основные концепции всех методов объекта окна в JavaScript.
