НОУ ИНТУИТ | Введение в JavaScript. Лекция 4: Программируем свойства окна браузера

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Твой путь к знаниям!

Опубликован: 14.08.2003 | Уровень: для всех | Доступ: платный | ВУЗ: Российский государственный гуманитарный университет

|

Вам нравится? Нравится 218 студентам

| Поделиться |

Поддержать программу

Методы 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(поток).

Дальше >>

Основы web-технологий

Введение в JavaScript

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

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

Метод setTimeout()

Метод clearTimeout()

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

Вопросы и ответы

Студенты

Авторизоваться

Основы web-технологий

Введение в JavaScript

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

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

Метод setTimeout()

Метод clearTimeout()

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

Вопросы и ответы

Студенты