Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
Глава 3.
JavaScript
  13.   Назначение и применение JavaScri...
  14.   Программируем свойства окна брау...
  15.   Программируем формы
  16.   Программируем графику
  17.   Программируем гипертекстовые пер...
  18.   Программируем "за кадром"
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 3. JavaScript версия для печати: HTML, PDF
Лекция #18: Программируем "за кадром" Страницы: « 1 2 3 4 5 6 7 вопросы »

Управление фокусом

Фокус — это характеристика текущего окна, фрейма или поля формы. В каждом из разделов, описывающем программирование этих объектов, мы, так или иначе, касаемся вопроса фокуса. Под фокусом понимают возможность активизации свойств и методов объекта. Например, окно в фокусе, если оно является текущим, т.е. лежит поверх всех других окон и исполняются его методы или можно получить доступ к его свойствам.

В данном разделе мы рассмотрим управление фокусом в

  • окнах;
  • фреймах;
  • полях формы.

Следует сразу заметить, что фреймы — это тоже объекты класса Window, и многие решения, разработанные для окон, справедливы и для фреймов.

Управляем фокусом в окнах

Для управления фокусом у объекта класса "окно" существует два метода: focus() и blur(). Первый передает фокус в окно, в то время как второй фокус из окна убирает. Рассмотрим простой пример:

function hide_window()
{
wid=window.open("","test","width=400,height=200");
wid.opener.focus();
wid.document.open();
... wid.document.close();
}

В данном примере новое окно открывается и сразу теряет фокус; прячется за основным окном-родителем. Если при первичном нажатии на кнопку оно еще всплывает и только после этого прячется, то при повторном нажатии пользователь не видит появления нового окна, так как оно уже открыто и меняется только его содержимое.

Для того чтобы этого не происходило, нужно после открытия передавать фокус на новое окно:

function visible_window()
{
wid=window.open("","test","width=400,height=200");
wid.focus();
wid.document.open();
... wid.document.close();
}

Если теперь нажимать попеременно кнопки "Скрытое окно" и "Видимое окно", окно будет то появляться, то исчезать. При этом новых окон не появляется, так как с одним и тем же именем может быть открыто только одно окно.

Невидимое окно может доставить пользователю неприятности, из которых самая безобидная — отсутствие реакции на его действия. Код просто записывается в невидимое окно. Но ведь в скрытом окне можно что-нибудь и запустить. Для этого стоит только проверить, существует ли данное окно или нет, и если оно есть и не в фокусе, то активизировать в нем какую-нибудь программу.

Для реализации такого сценария достаточно использовать метод окна onblur(). Его можно также задать в контейнере BODY в качестве обработчика события onBlur, но в этом случае он видим пользователю. Мы воспользуемся этим методом "в лоб":

window.onblur = new Function("window.defaultStatus = 'Background started...';");
window.onfocus = new Function("window.defaultStatus = 'Document:Done';");

Обратите внимание на поле статуса браузера. Оно демонстрирует возможность выполнения функции в фоновом режиме. Кроме того, onblur() в этом виде не отрабатывает в Internet Explorer. Причина кроется в прототипе объекта и возможности его переназначения программистом.

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

Управление фокусом во фреймах

Фрейм — это такое же окно, как и само окно браузера. Точнее — это объект того же класса. К нему применимы те же методы, что и к обычному объекту "окно":

var flag=1;
function clock()
{
if(flag==0)
{
d=new Date();
s=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
window.document.forms[0].elements[0].value=s;
}
setTimeout('clock();',100);
}
window.onblur = new Function('this.flag = 1;');
window.onfocus = new Function('this.flag = 0;');
window.onload = clock;

Данный фрагмент кода размещен в каждом из двух фреймов, которые отображаются в примере. А их именно два. Просто ширина границы набора фреймов установлена в 0. Если окно примера разделить мысленно пополам и "кликнуть" мышью в одну из половин, то пойдут часы в этой половине. Если теперь переместиться в другой фрейм и "кликнуть" мышью в нем, то часы пойдут в поле формы этого фрейма, а в другом фрейме остановятся.

Фокус в полях формы

Управление фокусом в полях формы, кроме этого раздела, описано еще и в разделе "Текст в полях ввода". Здесь мы рассматриваем этот вопрос в контексте общего применения методов blur() и focus(). Эти методы определены для любого поля формы, а не только для полей ввода. Рассмотрим простой пример.

Попробуйте изменить в этой форме значение любого из полей. Вряд ли это вам удастся. Обработчик события Focus (onFocus) уводит фокус из поля на произвольное место страницы.

Перейти к следующей странице »
версия для печати: HTML, PDF
Страницы: « 1 2 3 4 5 6 7 вопросы »
  Основные понятия
Типы данных, модель безопасности, прототипы, объекты, функции, процедуры, обмен данными, счетчики.
 
  Информация о лекции
В этой лекции рассматриваются приемы программирвания на JavaScript, невидимые для читателей HTML-страниц. Рассматриваются принципы работы счетчиков посещаемости, работы с механизмом cookie и многое другое.
 
  Информация о главе
Глава 3. JavaScript
Курс посвящен изучению языка программирования JavaScrip. Главное внимание уделяется логике разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
Dynamic HTML
Айзекс С., BHV-Санкт-Петербург.
Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
Коржинский С.Н., КноРус.
Практические занятия по HTML. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »