Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 23388 / 4434 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 4:

Программируем свойства окна браузера

Методы focus() и blur()

Метод focus() применяется для передачи фокуса в окно, с которым он использовался. Передача фокуса полезна как при открытии окна, так и при его закрытии, не говоря уже о случаях, когда нужно выбирать окна. Рассмотрим пример.

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

<HTML>
<HEAD>
<SCRIPT>
function myfocus(a)
{
  myWin = window.open('','example','width=300,height=200');
  // открываем окно и заводим переменную с указателем на него.
  // Если окно с именем 'example' существует, то новое окно не создается,
  // а открывается поток для записи в имеющееся окно с именем 'example'

  if(a==1)
  {
    myWin.document.open(); //открываем поток ввода в уже созданное окно
    myWin.document.write('<H1>Открыли окно в первый раз'); //Пишем в этот поток
  }

  if(a==2)
  {
    myWin.document.open();
    myWin.document.write('<H1>Открыли окно во второй раз');
  }

  if(a==3)
  {
    myWin.focus(); // передаем фокус, а затем выполняем те же действия,
                // что и в предыдущем случае
    myWin.document.open();
    myWin.document.write('<H1>Открыли окно в третий раз');
  }

  myWin.document.write('</H1>');
  myWin.document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<a href="javascript:myfocus(1);">Откроем окно и напишем в него что-то</a>,
<BR><BR>
<a href="javascript:myfocus(2);">напишем в него же что-то другое, но фокус не передадим</a>,
<BR><BR>
<a href="javascript:myfocus(3);">опять что-то напишем в него, но сперва передав ему фокус</a>.
</BODY>
</HTML>
4.1. Передача фокуса в новое окно

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

Чтобы увести фокус из определенного окна myWin, необходимо применить метод myWin.blur(). Например, чтобы увести фокус с текущего окна, где выполняется скрипт, нужно вызвать window.blur(). Эффект будет тот же, как если бы пользователь сам свернул окно нажатием кнопки [-] в правом верхнем углу окна.

Метод setTimeout()

Метод setTimeout() используется для создания нового потока вычислений, исполнение которого откладывается на время (в миллисекундах), указанное вторым аргументом:

idt = setTimeout("JavaScript_код",Time);

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

<HTML><HEAD><SCRIPT>
var Chasy_idut=false;

function myclock()
{
  if(Chasy_idut)
  {
    d = new Date();
    document.f.c.value =
    d.getHours()+':'+
    d.getMinutes()+':'+
    d.getSeconds();
  }
 setTimeout("myclock();",500);
}

function FlipFlag()
{
  Chasy_idut = !Chasy_idut; 
  document.f.b.value = (Chasy_idut)?
   'Остановить' : 'Запустить';
}
</SCRIPT></HEAD>
<BODY onLoad="myclock();">
<FORM NAME=f>
Текущее время:<INPUT NAME=c size=8>
<INPUT TYPE=button name=b VALUE="Запустить"
onClick="FlipFlag();">
</FORM></BODY></HTML>
4.2. Часы с использованием setTimeout()

Обратите внимание, что поток порождается (т.е. вызывается setTimeout() ) всегда, даже в том случае, когда мы остановили показ часов. Если бы он создавался только при значении переменной Chasy_idut = true, то часы бы просто не запустились, так как в самом начале исполнения скрипта мы установили var Chasy_idut = false. Но даже если бы мы установили в начале var Chasy_idut = true, то часы бы запустились при загрузке страницы, а после остановки поток бы исчез, и при последующем нажатии кнопки "Запустить" часы продолжали бы стоять.

Метод clearTimeout()

Метод clearTimeout() позволяет уничтожить поток, вызванный методом setTimeout() . Очевидно, что его применение позволяет более эффективно распределять ресурсы вычислительной установки. Для того чтобы использовать этот метод в примере с часами, нам нужно модифицировать функции и форму:

<HTML><HEAD><SCRIPT>
var Chasy_idut=false;
var potok;

function StartClock()
{
  d = new Date();
  document.f.c.value =
   d.getHours()+':'+
   d.getMinutes()+':'+
   d.getSeconds();
  potok = setTimeout('StartClock();',500);
  Chasy_idut=true;
}

function StopClock()
{
  clearTimeout(potok);
  Chasy_idut=false;
}
</SCRIPT></HEAD><BODY>
<FORM NAME=f>
Текущее время:<INPUT NAME=c size=8>
<INPUT TYPE=button VALUE="Запустить" onClick="if(!Chasy_idut) StartClock();">
<INPUT TYPE=button VALUE="Остановить" onClick="if(Chasy_idut) StopClock();">
</FORM></BODY></HTML>
4.3. Часы с использованием setTimeout() и clearTimeout()

В данном примере для остановки часов используется метод clearTimeout(). При этом, чтобы не порождалось множество потоков, проверяется значение указателя на объект потока.

Методы setInterval() и clearInterval()

В предыдущих примерах для того, чтобы поток запускался снова и снова, мы помещали в функцию в качестве последнего оператора вызов метода setTimeout(). Однако в JavaScript для этих целей имеются специальные методы. Метод setInterval("код_JavaScript",time) выполняет код_JavaScript с периодом раз в time миллисекунд. Возвращаемое значение - ссылка на созданный поток. Чтобы остановить поток, необходимо вызвать метод clearInterval(поток).

Валерий Банатин
Валерий Банатин

function f() { var i=5; k=7; } f(); alert(k);

В примере выдается результат k=7, однако, хоть переменная и не объявлена, она внутри функции, т.е. локальная и не должна быть видима, или вторая и последующие все-таки становятся глобальными?

Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>