HTML. Формы. Валидация (стр. 3 )

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-странице можно менять без перезагрузки всей HTML-страницы. К большому сожалению,
изменить часть текста страницы без использования позиционированных слоев нельзя.

Замечание: начиная с версий 4.0 Microsoft Explorer это стало возможным, но так как здесь речь идет о
классическом JavaScript и его применении к различным объектным моделям только в одной интерпретации,
данную возможность мы рассматривать не будем.

Кроме графики, на странице есть еще несколько встроенных массивов объектов, элементы которых можно изменять.
Один из них — массив гипертекстовых ссылок.

Гипертекстовая ссылка относится к классу объектов URL. К этому классу объектов относятся:

- Location;
- Area;
- Link.

Область применения URL на HTML-страницах гораздо шире этих трех позиций. Чаще всего мы сталкиваемся
с ним при программировании:

- графики (атрибут SRC контейнера IMG);
- форм (атрибут ACTION контейнера FORM);
- ссылок (атрибут HREF контейнера A);
- "чувствительных" картинок (атрибут HREF контейнера AREA).

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

Объект URL

Объект URL

Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим
ссылку на применение атрибута SRC в контейнере IMG:

http://javascript-spravka.ru/help/index.html

Значения свойств

href: http://*****/help/index. html
protocol: http:
hostname: *****
host: *****:80
port: 80
pathname: help/index. html
search:
hash:

Обращение к свойству объекта класса URL выглядит как:

имя_объект_класса_URL.свойство

Например, так:

document. links[0].href
document. location. host
document. links[2].hash

Свойства объекта URL дают программисту возможность менять только часть URL – объекта (гипертекстовой
ссылки, например). Наиболее интересно это выглядит в объекте Location , когда при изменении свойства
происходит перезагрузка документа. Однако и при работе с обычными гипертекстовыми ссылками такая
технология более предпочтительна, чем изменение всего URL целиком.

Здесь следует заметить, что чаще всего все-таки меняют весь URL. Это связано с тем, что такое действие
более понятно с точки зрения HTML-разметки. Ведь у контейнера A нет атрибута PROTOCOL, но зато есть
атрибут HREF

Массивы встроенных гипертекстовых ссылок

Массивы встроенных гипертекстовых ссылок

К встроенным гипертекстовым ссылкам относятся собственно ссылки (<A HREF=...>...</A>) и ссылки
"чувствительных" графических картинок. Они составляют встроенный массив гипертекстовых ссылок
документа (document.links[]).

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

for(i=0;i<document.links.length;i++)
document.write(document.links[i].href+"<BR>");

Список ссылок:

http://www.javascript-spravka.ru/help/index.html
http://www.javascript-spravka.ru/help/terms.html
http://www.javascript-spravka.ru/help/shop.html

Вставим в документ контейнер MAP:

<MAP NAME=test>
<AREA SHAPE=rect COORDS="0,0,0,0"
HREF="javascript:window. alert('Area_Link_1');void(0);">
<AREA SHAPE=rect COORDS="0,0,0,0"
HREF="javascript:window. alert('Area_Link_2');void(0);">
</MAP>

И снова распечатаем массив ссылок:

links[0]:http://www.javascript-spravka.ru/help/index.html
links[1]:http://www.javascript-spravka.ru/help/terms.html
links[2]:http://www.javascript-spravka.ru/help/shop.html
links[3]:javascript:window.alert('Area_Link_1');void(0);
links[4]:javascript:window.alert('Area_Link_2');void(0);

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

Замена атрибута HREF

Замена атрибута HREF

Покажем, как при помощи JavaScript-кода можно управлять свойствами объекта класса Link. Рассмотрим меню
типа "записная книжка":

Конечно, это не настоящая "записная книжка". Поле формы заполняется только при выборе гипертекстовой
ссылки, расположенной над этим полем. Единственная цель данного примера — показать, как изменяется
значение атрибута HREF (оно отображается в поле status окна браузера). Изменение производится посредством
вызова функции:

function line(a)
{
if(a==0)
{
clear();
window.document.o0.src="fio.gif";
window.document.all['lo0'].href='javascript:window.document.f1.fi1.value=""; void(0);';
window.document.o1.src="rpho.gif";
window.document.all['lo1'].href='javascript:window.document.f1.fi2.value=""; void(0);';
window.document.o2.src="hpho.gif";
window.document.all['lo2'].href='javascript:window.document.f1.fi3.value=""; void(0);';
}
.....
}