Объект Window

  




  

Прием в авторские монографии до 20 марта 2016 г.

Рассмотрим объект window. Как было сказано ранее, данный объект представляет текущее окно Web-обозревателя. Все команды начинаются с наивысшего объекта window (окно браузера), и идут по нисходящей. Окна и рамки (frames) принадлежат объекту window. Их не нужно перечислять, если только их не больше одного. Top, self, parent и frames — "встроенные" имена для окон. Акцентировать внимания на них мы не стоит, просто необходимо знать, что они существуют.

Теперь остановимся на некоторых моментах использования свойств и методов окон.

Прежде всего рассмотрим метод open. Он позволяет Web-дизайнеру открыть на экране дополнительное окно Web-обозревателя и поместить в него какую-нибудь страницу – это очень полезное средство для разработки сложных многостраничных сайтов.

Пример _1. <body>
<script>
var win;
win=window.open("null.html","mywin")
</script>
</body>

При выполнении данного скрипта, будет создано новое окно, в которое будет загружен документ с адресом указанным в первом параметре (файл из текущей директории с именем Null.html), и этому документу присвоили имя Mywin. Данный метод вернул ссылку на вновь созданное окно (в Win), благодаря которой мы можем работать далее с этим окном.

Win.left=300;

Данный метод позволяет использовать дополнительные возможности при открытии нового окна, которые мы рассмотри немного позднее.

Когда созданное окно окажется ненужным, его можно закрыть при помощи метода close. Свойство closed позволит в дальнейшем проверить закрыто ли это окно (например, если его закроет пользователь).

Рассмотрим пример:

Пример_2: <script language="JavaScript">
function opWind()
{myWin=window.open('win2.html',"wind1","width=200,height=100,resizable=no,scrollbars=no,menubar=no");}
</script>
<input type="button" value="Открыть окно" onClick="opWind()">
<input type="button" value="Закрыть окно" onClick="myWin.close()">

При нажатии на кнопку «Открыть окно» будет открыто новое окно, в которое будет загружен документ Win2.html – окно получит имя wind1. В данном методе open были также использованы дополнительные параметры:

width=200 – указывает, что созданное окно имеет ширину 200 пикселей;

heght=100 - созданное окно имеет высоту 100 пикселей;

resizable = no - запрещено изменение размеров окна;

scrollbars=no – отсутствует прокрутка;

menubar = no – отсутствует строка состояния.

Обратиться к вновь созданному окну можно используя ссылку с именем mywin, которую возвратил нам метод open. Именно благодаря ей, мы можем закрыть созданное окно, просто указав метод close (данный метод вызывается при нажатии кнопки «Закрыть окно»).

Чтобы закрыть окно, из «самого себя», например, используя кнопку в данном окне, необходимо также использовать метод close, но уже указав в качестве родительского объекта само окно, т.е.

WINDOW.CLOSE

или

SELF.CLOSE

Следующее свойство, которое следует упомянуть - свойство status, которое позволяет поместить произвольный текст в строку состояния.

WINDOW.STATUS = «ЭТО СТРОКА СОСТОЯНИЯ»

После выполнения данного скрипта, в строке состояния будет отображён соответствующиё текст.

Чтобы снова восстановить текст по умолчанию, достаточно использовать свойство defaultstatus:

window.status = window.defaultstatus

Пример_3 <script language="JavaScript">
function statbar(txt)
{ window.status = txt;}
function default1()
{ window.status = window.defaultStatus;}
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Писать"
onClick="statbar('Привет! Это окно состояния');">
<input type="button" name="erase" value="Стереть"
onClick="default1()">
</form>

При нажатии на кнопку «Писать» вызывается функция statbar с текстовым параметром. В данной функции происходит присваивание данного текстового параметра свойству status объекта window, в результате чего этот текст будет отображён в строке состояния. Нажатие кнопки стереть – вызывает функцию, которая с помощью метода defaultstatus восстанавливает значения по умолчанию.

Для ведения примитивного диалога с пользователем можно использовать три специальных метода:

Alert() - используется для вывода окна предупреждения с заданным текстом и кнопкой ОК;

Confirm() – отображает окно сообщение с текстом и кнопками ОК и Отмена. Если нажата OK – возвращается true, иначе false.

Promt() – позволяет запросить у пользователя какие-либо данные. Он выводит диалоговое окно, с полем вода и кнопками OK и Отмена. В качестве параметра принимается текст приглашения и необязательный параметр - текст по умолчанию, отображаемый в поле ввода.

Приведём простой пример, который демонстрирует работу данных методов.

Пример_ 4 <ul>
<li><a href="javascript:window.alert
('Внимание!!! Для продолжения нажмите ОК.')
">Метод Alert.</a>
<li><a href="javascript:window.status
=window.confirm('Укажите ответ Yes, Cancel .');void(0);
">Метод Confirm.</a>
<li><a href="javascript:window.status
=window.prompt('Укажите здесь текстовую строку :','');void(0);
">Метод Prompt.</a>
</ul>

После каждого нажатия на гиперссылку, вызывается соответствующий метод, который возвращает параметр (вид параметра зависит от метода) в виде текста в строку состояния. Поэтому легко убедиться, что, например, при нажатии кнопки No, будет возвращено false.

Одним из часто используемых методов объекта window также является метод scrollby(), который позволяет прокручивать содержимое окна на определённое количество точек.

SCROLLBY(X,Y);

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

Приведём пример:

Пример_5 … [<a href="javascript:
for(i=0;i<190;i++)
{window.scrollBy(0,10)};">
Прокрутить текст</a>]

Данные строки определяют гиперссылку, при нажатии на которую, активируется скрипт, выполняющий следующее:

запускается цикл от 0 до 190 , в котором каждый раз выполняется прокрутка окна на 10 пикселей вниз.

Таким образом, прокрутка будет выполнена 190 раз, и текст окажется прокручен на 10*190=1900 пикселей.

Аналогично можно осуществить прокрутку текста вверх: … <a href="javascript:
for(i=0;i<95;i++)
{window.scrollBy(0,-20)};">
Прокрутить вверх</a>]

Заметим, что здесь цикл выполняется всего 95 раз, но прокрутка осуществляется вверх (на это указывает отрицательное значение параметра) на 20 пикселей, так, что в сумме прокрутка будет осуществлена также на 1900 пикселей, но это создаст эффект более быстрого прокручивания текста.
Очень важными и часто используемыми методами объекта window являются методы управления интервалами времени: setInterval, setTimeout, clearInterval и clearTimeout.
Window.setInterval(“Выражение”|| Функция, “Интервал”, “[Язык]”) ;
Метод принимает три параметра. Первый из них задаёт либо имя функции, либо текст выражения, которое будет выполняться каждый раз по истечении заданного времени. Второй параметр задаёт само это время в миллисекундах. Необязательный третий параметр задаёт скриптовый язык, на котором написано выражение или функция. Метод возвращает указатель на созданный интервальный таймер. Именно этот указатель указывается в качестве параметра при вызове метода clearInterval(указатель на интервальный таймер), который уничтожает данный интервальный таймер.
Window.setTimeout(“Выражение”|| Функция, “Интервал”, “[Язык]”);
Метод принимает три параметра. Первый из них задаёт либо имя функции, либо текст выражения, которое выполнится по истечении заданного времени. Второй параметр задаёт само это время в миллисекундах. Необязательный третий параметр задаёт скриптовый язык, на котором написано выражение или функция. Метод возвращает указатель на созданный тайм-аут. Именно этот указатель указывается в качестве параметра при вызове метода clearTimeout(указатель на тайм-аут), который уничтожает данный тайм-аут.
На первый взгляд методы setInterval и setTimeout работают одинаково, но есть существенное отличие, которое заключается в том, что при создании объекта тайм-аут (Window.setTimeout) выражение или функция будет выполнена единожды по истечении времени. В то же время, при создании объекта интервального таймера выражение (функция) будет вызываться каждый раз по истечении времени, пока данный интервальный таймер не будет уничтожен с помощью метода clearInterval.
Рассмотрим пример.
Пример_6 … <script>
function timer()
{ tim=setTimeout("alert('Время, установленное setTimeout вышло')", 3000);}
function timer1()
{ tim1=setInterval("alert('Время, установленное setInterval вышло')", 3000);}
<script>

ри вызове функции Timer() создаётся тайм-аут с временным промежутком в 3000 миллисекунд (3 секунды), который по истечении указного времени выполнит строку, указанную в качестве первого параметра, т.е. выдаст сообщение о том, что время истекло. Заметим, что данное действие будет выполнено единожды.

Если будет осуществлён вызов функции Timer1() – то будет создан интервальный таймер с тем же временным промежутком, выполняющий ту же строку (вывод окна-сообщения). Но в отличие от первого варианта, данное окно – сообщение будет выводиться каждый раз по истечении промежутка времени в три секунды. Для прекращения вывода данного сообщения необходимо выполнить уничтожение данного интервального таймера с помощью метода, clearInterval(). function timer1_1()
{ clearInterval(tim1);}

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

Рассмотрим пример, где используется и прокрутка и интервальный таймер:

Пример_7 … i=0;
function my_scroll()
{i++
window.scrollBy(0,10);
if (i==20) clearInterval(time); }
function start()
{ time=setInterval("my_scroll()",500); }

При щелчке на гиперссылке, вызывающей функцию Start(), создаётся интервальный таймер, который каждый раз по истечении времени будет запускать функцию My_scroll(). Данная функция прокручивает текст на 10 пикселей вниз, увеличивает переменную на 1, и проверяет, если i равно 20, то уничтожается таймер с именем Time. Таким образом, через каждые 500 млс, будет осуществляться прокрутка текста на 10 пикселей, после 20 раз, прокрутка будет остановлена, путём уничтожения интервального таймера, который её вызывал.

Если страница состоит из фреймов, то всегда существует родительское окно верхнего уровня. Чтобы получить доступ к этому объекту необходимо использовать свойство Top объекта window, которое вернёт ссылку на главное окно браузера. Если же текущий объект window (окно со страницей) не содержит фреймов, то будет возвращена ссылка на само это окно.

Рассмотрим ещё один часто используемый метод объекта window, который позволяет перемещать окно на экране.

Window.moveBy (x,y)

Данный метод перемещает окно Web-обозревателя на заданное количество пикселей. Метод принимает два параметра, задающие в пикселах горизонтальное и вертикальное смещения окна соответственно. Рассмотрим пример:

Пример _8 <script>
function boom(n)
{for (i=10; i>0;i--)
{for (j=n;j>0;j--)
{window.moveBy(0,i);
window.moveBy(i,0);
window.moveBy(0,-i);
window.moveBy(-i,0);}}}
</script>

В данном примере при вызове функции boom с параметром n происходит следующее: открывается цикл, который изменяет переменную I от 10 до 0 с шагом, затем следует выполнение цикла n-раз, в котором происходит перемещение окна вниз, влево, вверх и вправо на i пикселей. Т.е. сначала n раз происходит перемещение по указанному квадрату на 10 пикселей, затем окно 10 раз перемещается также по квадрату на 9 единиц и так далее с уменьшением параметра перемещения (от 10 до 0). Такой процесс перемещения окна создаёт эффект тряски с затуханием.

Рассмотрим теперь событие и метод связанный с изменением размера окна. Для указания размеров окна необходимо использовать метод

resizeTo (x,y)

Метод принимает два параметра: задающие в пикселях значение ширины и высоты окна соответственно.

Например, если в скрипте указать следующую строку,

window.resizeTo(800,600);

то окно будет изменено до размеров 800 на 600 пикселей. Таким образом, если у пользователя установлено разрешение экрана 800 х 600 пикселей, то окно будет занимать весь экран. Если же разрешение экрана больше, то изменённое до таких размеров окно, будет занимать только часть экрана.

  

Rambler's Top100

  

Кравец Вера Владимировна
Главный редактор
vkravets@vsi.ru
vkravets@naukapro.ru

  
Кравец Вера Владимировна
vkravets@naukapro.ru

Спасибо за проявленный интерес!
Все права защищены. Copyright © 2006-2020. Вера Кравец.