A. Гончаров. WEB-ДИЗАЙН. HTML, JavaScript и CSS. Карманный справочник4.5. Объектная структура Web-страницы

4.5. Объектная структура Web-страницы

Операторы и свойства

Свойство value

Данное свойство используется для многих объектов, но определяет или возвращает разные характеристики. Например, оно может определять надпись на кнопке или содержимое текстового элемента формы.
Шаблоны для использования свойства следующие.
Получение свойства элемента:
x = document.имя_элемента.value;
Назначение свойства элемента:
document.имя_элемента.value = x;
Получение свойства элемента формы:
x = document.имя_формы.имя_элемента.value;
Назначение свойства элемента формы:
document.имя_формы.имя_элемента.value = x;

Оператор for...in. Проверка свойств объектов

Оператор for...in позволяет организовать цикл для обращения к свойствам объекта как к элементам массива.
Шаблон.
for (переменная_счетчик in имя_объекта) {
Набор команд }
Предполагается, что в цикле должны выполняться какие-либо действия с объектом.
Пример. Приведенная ниже функция позволяет вывести список свойств указанного объекта и их значения.
<SCRIPT language="javascript">
function object_tester() {
// Вывод свойств объекта
s = "";
s1 = document.fo1.text1.value; // имя объекта
for (var i in eval(s1)) {
s += s1 + "." + i + " = " + eval(s1 + "[i]") + "\n";
document.fo1.ta1.value = s;
}
}
</SCRIPT>
Для того чтобы эта функция могла работать, необходимо включить в тело Web-страницы следующий HTML-код:
<FORM name="fo1">
<INPUT type="button" value="Проверка объекта"
onClick='object_tester()'>
<INPUT type="text" name="text1" size="20">
<BR><BR>
<TEXTAREA name="ta1" rows=50 cols=50>
</TEXTAREA>
</FORM>
На рис. 4.4 показан пример работы функции object_tester() для стандартного объекта window. Этот объект содержит много свойств, но некоторые из них не определены и возвращают значение null. Некоторые «свойства» на самом деле являются объектами (значение [object]) и, следовательно, не могут иметь одно значение.

Рис. 4.4. Вывод списка свойств объекта window

Объекты

Объекты броузера (navigator)

За характеристики броузера отвечает объект navigator. Его свойства можно увидеть, используя функцию object_tester(), приведенную выше. Некоторые свойства используются довольно часто в программах на JavaScript, а некоторые свойства принадлежат определенным программам-броузерам, поэтому использовать их в универсальных Web-страницах нельзя. Некоторые свойства не имеют значений по умолчанию или из-за того, что открытая Web-страница не имеет нужных характеристик. Здесь перечислен набор свойств броузера Internet Explorer 6.0.
navigator.appCodeName = Mozilla — название программы-прототипа для броузера. (Многие броузеры основаны на исходном коде проекта «Mozilla»).
navigator.appName = Microsoft Internet Explorer — полное название броузера (у основного броузера-конкурента это значение Netscape).
navigator.appMinorVersion = ;SP1; — точное указание версии.
navigator.cpuClass = x86 — тип процессора (в данном случае — семейство Pentium). Другие возможные значения:
68K — Motorola 680x0;
Alpha — DEC Alpha;
PPC — Motorola PowerPC;
Other — тип не определен.
navigator.platform = Win32 — тип операционной системы (в данном случае Windows XP). Возможные значения:
HP-UX — HP Unix;
MacPPC — Macintosh/PowerPC;
Mac68X — Macintosh/680x0;
SunOS — Solaris;
Win16 — 16-разрядная Windows;
Win32 — 32-разрядная Windows;
WinCE — Windows CE.
navigator.plugins = — коллекция объектов, помещенных на Web-странице в элементах EMBED (в данном случае таких объектов нет).
navigator.opsProfile = — указатель объекта IHTMLOpsProfile. Данный объект содержит свойства, определенные в программном коде броузера (язык C++).
navigator.userProfile = — значения переменных определенных в профиле пользователя.
navigator.systemLanguage = ru — язык пользовательского интерфейса операционной системы.
navigator.userLanguage = ru — язык пользовательского интерфейса броузера.
navigator.appVersion = 4.0 (compatible; MSIE 6.0; Windows NT 5.1) — версия броузера.
navigator.userAgent = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) — информация о броузере.
navigator.onLine = false — подключен ли в данный момент броузер к Интернету (логическая величина).
navigator.cookieEnabled = true — разрешено ли броузеру использовать cookie (логическая величина).
navigator.mimeTypes = — массив типов MIME (данное свойство реализовано в броузерe Netscape).
Пример 1. Некоторые броузеры не поддерживают определенные конструкции JavaScript. Например, броузеры Netscape ранних версий не могли использовать метод eval(). Ниже приведен пример, в котором программный код, содержащий данный метод, не выполняется для определенных версий броузеров.
<SCRIPT language="javascript">
AgentName = navigator.appName;
AgentVer = parseInt(navigator.appVersion);
if (AgentName == "Netscape" && AgentVer <= 2){
Код, который не должен содержать eval();
}
else {
Код, который может содержать eval();
}
</SCRIPT>
Пример 2. Вывод списка внедренных объектов и содержащих их файлов (использование коллекции plugins как массива).
<SCRIPT language="Javascript">
n = navigator.plugins.length; //сколько их
if ( n > 0) {
for (var i=0; i < n; i++) {
m=i+1; // номер по порядку
document.write("Плагин " + m + " - " +
navigator.plugins[i].name +
" Файл: " + navigator.plugins[i].filename + "<BR>");
}
}
else {
document.write("Плагины не найдены");
}
</SCRIPT>
Данный скрипт поддерживает броузер Netscape. В Windows XP, к примеру, может быть зафиксирован такой набор плагинов:
Плагин 1 - CDT Plug-in Файл: npcdt.dll
Плагин 2 - RealJukebox NS Plugin Файл: nprjplug.dll
Плагин 3 - RealPlayer(tm) G2 LiveConnect-Enabled Plug-In (32-bit) Файл: nppl3260.dll
Плагин 4 - RealOne Player Version Plugin Файл: nprpjplug.dll
Плагин 5 - Mozilla Default Plug-in Файл: npnul32.dll
Плагин 6 - Shockwave Flash Файл: npswf32.dll
Плагин 7 - MetaStream 3 Plugin Файл: npViewpoint.dll
Плагин 8 - HP Peripheral Interrogator Файл: nphppi.dll
Плагин 9 - Adobe Acrobat Файл: nppdf32.dll
Плагин 10 - Microsoft® DRM Файл: npdrmv2.dll
Плагин 11 - Microsoft® DRM Файл: npwmsdrm.dll
Плагин 12 - Windows Media Player Plug-in Dynamic Link Library Файл: npdsplay.dll
Пример 3. В страницах автоматической переадресации используются разные команды в зависимости от используемого броузера и операционной системы. При вычислении условных выражений (переменные usl1 и usl3) используется нестрогое равенство, поэтому из значения соответствующего свойства объекта navigator выбирается только необходимый текстовый фрагмент, по которому можно опознать броузер и операционную систему. При использовании данного кода необходимо изменить команду задания значения переменной new_adres (указать реальный адрес сайта).
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<TITLE>Переадресация</TITLE>
<SCRIPT language="JavaScript">
new_adres = "new-address.htm";
usl1 = navigator.appName == "Microsoft Internet Explorer";
usl2 = parseInt(navigator.appVersion) < 4;
usl3 = navigator.appVersion.platform == "Macintosh";
function change_page() {
if (usl1 && usl2) {
if (usl3) {
document.location.href = new_adres;
}
else {
window.location.href = new_adres;
}
}
else {
document.location.href = new_adres;
}
}
</SCRIPT>
</HEAD>
<BODY onload="change_page()">
<SCRIPT language="JavaScript">
//
</SCRIPT>
</BODY>
</HTML>

Объект window, его методы и свойства

Объект window определяет окно броузера. В программах для указания текущего окна вместо слова window можно использовать слово self. Для указания главного окна в иерархии открытых окон используется слово top. Данный объект характеризуется достаточно большим набором свойств:
location — адрес открытой Web-страницы;
name — имя окна;
screenLeft — отступ (в пикселах) окна от левого края экрана;
screenTop — отступ (в пикселах) окна от верхнего края экрана.
Получить реакцию на изменение свойств можно только в одном случае: при изменении адреса документа. Например, загрузить в окно другую Web-страницу:
window.location = "new_page.htm";
Того же результата можно достичь при помощи команды
top.location.href = "new_page.htm";
В данном случае объект top обозначает окно верхнего уровня. В большинстве случаев это окно с текущей Web-страницей. Такая конструкция, к примеру, позволяет отказаться от текущих фреймов при загрузке новой страницы (не рассчитанной на использование фреймов).
Другие свойства объекта window:
length — количество фреймов в текущем окне;
opener.location — адрес Web-страницы, на которой была выполнена команда открытия текущего окна;
opener.name — имя окна, в котором была выполнена команда открытия текущего окна;
parent.location — адрес «родительской» Web-страницы;
parent.name — имя «родительского» окна;
Для открытия нового окна используется метод open.
Шаблон:
переменная = window.open("адрес_файла", "имя_окна", "параметры");
Пример:
win1 = window.open("page1.htm", "okno1", toolbar=0,
location=0,directories=0,status=0,menubar=0,scrollbars=0,
resizable=0,copyhistory=0,width=400,height=300");
Переменная win1 в этом случае будет содержать данные объекта, характеризующего открытое окно. Свойство win1.location будет возвращать адрес файла page1.htm.
Набор параметров может содержать произвольное количество аргументов, разделенных запятыми (пробелы после запятых не допускаются). Некоторые параметры являются логическими, поэтому для указания необходимого свойства можно задать только имя параметра. Например, для вывода панели инструментов можно указать toolbar=1 или toolbar. Для запрета вывода этой панели необходимо значение toolbar=0. Вместо значений 1 и 0 можно указывать значения yes и no соответственно.
Другие логические параметры:
copyhistory — копирование «истории» старшего окна.
directories — вывод панели с дополнительными кнопками-ссылками на стандартные ресурсы (в разных броузерах они разные);
fullscreen — открытие окна в полноэкранном режиме;
location — вывод строки «Адрес»;
menubar — вывод строки главного меню броузера;
resizable — возможность изменения размеров окна мышью;
scrollbars — разрешение на вывод полос прокрутки (которые появляются в случае необходимости);
status — вывод строки состояния;
Числовые параметры:
width — ширина окна в пикселах;
height — высота окна в пикселах.
Пример. Для открытия окна в полноэкранном режиме можно использовать следующую команду:
window.open("file.htm","","fullscreen,scrollbars");
Для перезагрузки страницы можно использовать метод reload:
window.location.reload();
Для распечатки содержимого окна используется метод print:
window.print();
Перед печатью открывается стандартное окно диалога для выбора принтера.
Для прокрутки содержимого окна к абсолютной позиции с координатами x,y используется следующая команда:
window.scroll(x,y);
Прокрутка на заданное количество пикселов по горизонтали (n) и вертикали (m):
window.scrollBy(n,m);
Передача фокуса окну (выбор окна, что полезно, если окон несколько):
window.focus();
Снятие фокуса с окна:
window.blur();
Для закрытия текущего окна используется метод close:
window.close();
Закрыть текущее окно можно другими равнозначными командами:
self.close();
close();
Конструкция имя_окна.closed возвращает логическое значение, которое определяет, закрыто ли окно с указанным именем. С помощью условного оператора можно проверять, закрыто ли некоторое дополнительное окно.
Свойство status определяет текст, выводимый в строке состояния броузера. Для задания определенного текста можно использовать команду:
window.status = "Текст";
Текст в строке состояния изменяется броузером в процессе работы. Существует текст, выводимый по умолчанию (когда нет других сообщений). Он определяется свойством defaultStatus.
Определить его можно командой:
x = window.defaultStatus;
Задать новый текст «по умолчанию» можно командой:
window.defaultStatus = "Новый текст";
Существует много программ, которые создают динамические эффекты в статус-строке. В качестве примера приведен шаблон Web-страницы с кодом программы, реализующей эффект «бегущей строки».
<HTML>
<HEAD>
<TITLE>Бегущая строка</TITLE>
<SCRIPT language="JavaScript">
stroka="Текст бегущей строки";
statstroka="";
pos = 100; // отступ в знаках
for (schet=0 ; schet < pos ; schet++) {
statstroka += " ";
}
statstroka += stroka;
len = statstroka.length;
nn = 0; // номер первого символа
function beg() {
s = statstroka.substring(nn,nn + pos + 1);
if (s.length == 0) s = " ";
window.status = s; // вывод статус-строки
nn++;
if (nn >= len) nn = 0;
timeout = window.setTimeout("beg()",120);
}
</SCRIPT>
</HEAD>
<BODY onload="beg()">
</BODY>
</HTML>

Объект screen

Объект, отражающий свойства области просмотра окна. Он имеет следующие свойства:
availHeight или height — разрешение экрана по вертикали;
availWidth или width — разрешение экрана по горизонтали;
colorDepth — количество бит данных для одного пиксела (глубина цвета).
Пример.
x = screen.availWidth;

Объект history

Список пройденных страниц в данном окне броузера («история»). Длина списка определяется следующим образом:
x = window.history.length;
Используются также следующие команды:
history.back(); — переход к предыдущей странице,
history.forward(); — переход к следующей странице.
Для создания кнопок, которые позволяют переходить на предыдущую и следующую страницу, можно использовать код:
<FORM name="forma">
<INPUT type="button" value="Назад" name="k1"
onClick="history.back()"> 
<INPUT type="button" value="Вперед" name="k2"
onClick="history.forward()">
</FORM>
Переход на несколько «шагов» осуществляется так:
history.go(n);
Здесь n может принимать положительные или отрицательные целочисленные значения.
Для перезагрузки текущей страницы можно использовать такую команду:
history.go(0);
Возврат на один «шаг» назад:
window.location = history.go(-1);

Объекты document и location

Свойство cookie

Свойство cookie формирует текстовую строку, которая сохраняется на компьютере клиента. Строка содержит пары «переменная-значение» и позволяет использовать эти данные в программном коде (например, определить, открывал ли ранее пользователь данную Web-страницу).
Шаблон для записи:
document.cookie = "имя=значение";
Каждая пара кук записывается отдельной командой, но возвращается строка, в которой все пары разделены точкой с запятой.
Для выяснения, имеет ли документ сохраненные куки, можно использовать условное выражение:
(document.cookie.length > 0)
Для получения куки с определенным именем удобно использовать функцию. Она может быть такой:
function cookie1(imya) {
cook = document.cookie;
stroka = "";
if (cook.length > 0) {
nach = cook.indexOf(imya + "=");
if (nach != -1) {
nach = nach + imya.length + 1;
konech = cook.indexOf(";", nach);
if (konech == -1) {
konech = cook.length;
stroka=unescape(cook.substring(nach, konech));
}
}
}
return stroka;
}
Пример. Записать в куки имя домена, в котором находится сайт, и время открытия Web-страницы (в удобном для чтения формате).
В коде Web-страницы должны быть следующие команды:
vremya = new Date();
svremya = vremya.toLocaleString();
document.cookie = "domen=ru" ;
document.cookie = "vremya=" + svremya ;
Тогда свойство document.cookie возвратит строку:
domen=ru; vremya=19 декабря 2005 г. 22:34:53
Функция cookie1("domen") возвратит значение ru.
Функция cookie1("vremya") возвратит значение 19 декабря 2005 г. 22:34:53.

Методы объекта document

Для очистки окна и открытие нового потока для вывода информации используется метод open. В качестве аргумента метода указывается MIME-тип данных. Броузеры по умолчанию поддерживают код HTML (text/html), возможность использования других типов находится под вопросом.
Пример. Очистка окна и вывод обычного текста в окно броузера:
function new_doc() {
document.open("text/html");
document.write("Новый текст в окне броузера");
document.close();
}
Для того чтобы таким способом вывести в окне новую Web-страницу, необходимо с помощью метода воспроизвести заново структуру гипертекстового документа (начиная с элемента <HTML>). Использование метода open ограничивается тем, что ряд броузеров не сохраняют в памяти значения переменных, а этот метод стирает текущий программный код, поэтому метод write (writeln) должен использовать только строковые константы. Это снижает гибкость программ.
Очистка окна выполняется командой:
document.clear();
Закрыть открытый методом open поток вывода данных можно командой:
document.close();
Для вывода на Web-страницу содержимого (включая HTML-код) используется метод write. Его аргументом является строковая константа или строковое выражение. Например:
document.write.("<А href= 'page1.htm' > Ссылка </A>");
Метод writeln отличается от предыдущего тем, что в выводимом HTML-коде сохраняются символы скрытого форматирования (переводы строки). Такой метод имеет смысл использовать внутри тех элементов, которые поддерживают такие символы (например, внутри элемента PRE).
Для использования методов write и writeln команда JavaScript должна находиться в том месте Web-страницы, где требуется вывод, поэтому внутри элемента BODY иногда необходимо помещать элементы SCRIPT. Для страховки код JavaScript маскируют с помощью комментариев HTML:
<SCRIPT language="javascript">

<SCRIPT>
Для создания именованного элемента A в коде Web-страницы можно использовать метод anchor. Например:
text = "Текст элемента A";
name = "name1"; // имя элемента
document.write(text.anchor(name));
Для создания гиперссылки можно использовать метод link. Например:
text = "Текст ссылки";
url = "http://page1.htm"; // адрес
document.write(text.link(url));

Методы fontcolor и fontsize

Метод fontcolor можно использовать совместно с методом write для задания цвета выводимого текста.
Пример:
<SCRIPT language="JavaScript">
stroka = "Красный текст";
document.write(stroka.fontcolor("red"));
</SCRIPT>
Метод fontsize можно использовать совместно с методом write для задания размера выводимых букв. В качестве аргумента указываются числа от 1 до 7 (по аналогии с атрибутом size элемента FONT)
Пример:
<SCRIPT language="JavaScript">
stroka = "Крупный текст";
document.write(stroka.fontsize(7));
</SCRIPT>
Оба метода можно использовать совместно:
<SCRIPT language="JavaScript">
stroka = "Крупный красный текст";
stroka = stroka.fontcolor("red");
document.write(stroka.fontsize(7));
</SCRIPT>
Данные методы формируют код HTML с использованием элемента FONT и соответствующих атрибутов.

Фреймы. Объект parent

Для программной обработки фреймы должны иметь имена, заданные с помощью атрибута name.
Обращение к свойствам фрейма может осуществляться с помощью конструкции
parent.имя_фрейма.свойство
или с помощью массива frames:
parent.frames[i] (где i - порядковый номер фрейма).
Возможно также указание имени окна для исключения неопределенности:
имя_окна.parent.имя_фрейма.свойство
Объект parent обозначает документ, в котором определена структура фреймов. Объект необходим, если документ одного кадра ссылается на документ другого кадра (по умолчанию используется текущий кадр). Например, чтобы вывести информацию в элемент формы (например, <INPUT type="text" name="t2" ...>), который находится в другом фрейме (пусть его имя будет f2), необходимо использовать конструкцию:
parent.f2.t2.value = значение;

Объект all

Универсальный объект, позволяющий ссылаться на элементы Web-страницы. Необходимо использовать имена элементов (атрибут name). Если элемент не имеет имени, ему присваивается порядковый номер, но использовать в коде программы номер вместо имени (например, document.all.5) нельзя. Возможные шаблоны:
document.all[i] — по номеру элемента в коллекции;
document.all.myForm — ссылка на форму с указанием ее имени;
document.all.knopka11 — ссылка на кнопку с указанием ее имени.
Броузер Internet Explorer позволяет использовать следующий шаблон обращения к свойствам элемента:
document.all("имя_элемента").свойство
Но в этом случае имена элементов должны задаваться при помощи атрибутов id.

Гиперссылки. Коллекции anchors и links

Коллекция anchors представляет собой массив гиперссылок с определенным атрибутом name. Такие элементы могут быть метками (например, <A name="m1">) или обычными ссылками (имеющими атрибут href).
Длину массива можно определить так:
n = document.anchors.length;
Имена элементов A можно получить, обращаясь к элементам массива:
s = document.anchors[i];
Коллекция links тоже относится к элементам A, но это массив адресов гиперссылок. В него попадают элементы A, имеющие атрибут href.
К этому массиву тоже можно обращаться:
n = document.links.length; // длина массива
s = document.links[i]; // один из адресов
Существует ряд свойств гиперссылок, совпадающих со свойствами объекта location (см. выше). Например, свойство hash позволяет выделить из адреса ссылки часть, следующую за знаком #. Шаблоны использования свойства такие:
document.имя_link.hash
document.links[i].hash
Другие свойства:
host — имя домена (или IP-адрес) и номер порта;
hostname — имя домена или IP-адрес;
href — URL Web-страницы;
pathname — путь;
port — номер порта;
protocol — протокол передачи данных
search — часть ссылки после символа «знак вопроса».
Получить информацию о значении атрибута target можно с помощью конструкции:
x = имя_гиперссылки.target;

Рисунки. Коллекция images

Объект document можно считать массивом, в качестве индекса которого выступают имена расположенных на странице элементов.
Если на Web-странице есть элемент IMG с атрибутом name="IMAGE1", то в скриптовой программе можно указать для этого элемента новый графический файл, например:
document["IMAGE1"].src = "file.jpg";
Длину массива можно определить командой
n = document.images.length;
Тестирование свойств определенного рисунка можно выполнить с помощью функции object_tester(). Например, для первого расположенного на странице рисунка следует использовать конструкцию document.images[0].

Объекты и свойства форм

Коллекция forms

Доступ к свойствам можно получить, используя и коллекцию forms, учитывая, что это массив. Например, несложно выполнить перебор элементов массива для получения имен всех форм, изменяя параметр i:
x = document.forms[i].name;
Получив информацию о существовании (имени) некоторой формы, можно получить ее свойства, как было показано выше.
Разные броузеры по-разному формируют объекты форм. Например, броузеры Microsoft создают больше свойств по сравнению с броузерами Netscape, но при отладке бывает полезно использовать и нестандартные свойства и события. Их значения можно получить, используя упомянутую выше функцию px() (см. раздел «Проверка значений отдельных свойств»).

Массив elements

Данный массив содержит объекты, соответствующие элементам внутри формы. К свойствам этих объектов можно обращаться, используя шаблоны:
x = document.имя_формы.elements[i].свойство;
x = document.forms[j].elements[i].свойство;
x = document.имя_формы.elements["имя_элемента"].свойство;
Здесь имя_формы и имя_элемента — значения, задаваемые атрибутами name.

Метод click

Данный метод позволяет имитировать щелчок мышью на элементе формы.
Шаблон:
имя_формы.имя_элемента.click();

Свойство элемента формы type

Свойство повторяет значения атрибута type элемента формы. Например, если в форме f1 некий элемент e1 является скрытым, то выражение document.f1.e1.type возвратит значение hidden.

Метод select

Данный метод позволяет выделить область ввода в элементе формы.
Шаблон:
имя_формы.имя_элемента.select;

Кнопки

Задание текста для кнопки:
document.имя_формы.имя_кнопки.value = "Новый текст";
Задание цвета текста для кнопки:
document.имя_формы.имя_кнопки.style.color = цвет;
Задание цвета поверхности для кнопки:
document.имя_формы.имя_кнопки.style.backgroundColor = цвет;
Задание текстуры (в качестве примера использован файл рисунка r.gif) для поверхности кнопки:
document.имя_формы.имя_кнопки.style.backgroundImage = "url(r.gif)";
Кнопка для очистки всей формы:
<INPUT type="reset" value="Очистить">
То же действие может выполняться командой:
document.имя_формы.reset();
Кнопка для очистки одного поля формы (указываются имена формы и поля). В качестве значения указывается пустая строка (с помощью одиночных кавычек):
<INPUT type="button" value="Очистить"
onClick="forma1.pole1.value=''">
Кнопка для отправки данных формы:
<INPUT type="submit" value="Отправить">
Отправка данных может осуществляться и командой:
document.имя_формы.submit();

Поля ввода

Пример. Если в форме f1 есть текстовый элемент txt1, то записать в него некоторый текст можно командой:
document.f1.txt1.value = "Текст";
Поле хранит данные текстового типа, но в командах присвоения можно использовать и данные других типов (конвертация происходит автоматически).
Если текстовый элемент доступен только для чтения (использован атрибут readonly), его значение все равно можно изменять программным способом.
Получить значение этого элемента можно командой:
x = document.f1.txt1.value;
Фиксировать момент изменения пользователем значения поля (как и других редактируемых элементов форм) можно по событию onChange.
Значение текстового поля по умолчанию (задаваемое атрибутом value) возвращает свойство defaultValue.

Флажки и переключатели

Данные элементы управления принимают логические значения. Состояние флажков и переключателей можно проверять при помощи свойства checked. Это же свойство позволяет программно изменять состояние этих элементов.
Для установки флажка с именем name1 в форме form1 используется команда:
document.form1.name1.checked = true;
Свойства флажка хранит объект checkbox.
Свойства переключателя хранит объект radio.
Если в коде HTML статус логического элемента управления по умолчанию определяет атрибут checked, то в JavaScript используется свойство defaultChecked (которое можно как устанавливать, так и тестировать). Пример:
x = document.form1.name1.defaultChecked;
Пример обработки данных флажков. Допустим, на странице есть форма (для опроса):
<FORM name="f" action="http://xxx.xxx.xx" method="GET">
<INPUT type="text" size="40" name="txt"
value=" Какой вид спорта вам интересен?" readonly><BR>
<INPUT type="checkbox" name="ten"> Теннис<BR>
<INPUT type="checkbox" name="fut"> Футбол<BR>
<INPUT type="checkbox" name="hok"> Хоккей<BR>
<INPUT type="checkbox" name="nik"> Никакой<BR>
<BR>
<INPUT type="reset" value="Очистить">
<INPUT type="button" value="Отправить" onClick="prover()">
</FORM>
Ее вид показан на рис. 4.5. Перед отправкой данных можно провести проверку правильности заполнения анкеты.

Рис. 4.5. Форма с флажками

Это можно сделать с помощью функции, если стандартную кнопку отправки не использовать, а поместить в форму обычную кнопку с определенным событием onClick:
function prover(){
flag = document.f.ten.checked;
flag = flag || document.f.fut.checked;
flag = flag || document.f.hok.checked;
flag1 = document.f.nik.checked;
if (flag && flag1){
alert("Выбирайте внимательно!");
}
if (!flag && !flag1){
alert("Вы ничего не выбрали!");
}
if (flag ^ flag1){
alert("Отправляем!");
document.f.submit();
}
}

Списки

Для программного управления список должен иметь имя (задаваемое атрибутом name). В следующих примерах будут использованы имя формы f1, имя списка list1.
Элементам OPTION соответствуют элементы массива options, с помощью которых можно обращаться к свойствам:
f1.list1. options[i].value — невидимое значение (заданное атрибутом value),
f1.list1. options[i].text — текст, задаваемый кодом HTML,
f1.list1. options[i].name — имя (заданное атрибутом name).
Использовать в подобных командах имя элемента OPTION, заданное атрибутом name, нельзя.
При выборе элемента списка фиксируется событие onChange.
Для определения элемента, выбранного по умолчанию, можно выполнить перебор элементов массива с указанным свойством:
f1.list1.options[i].defaultSelected
Свойство defaultSelected является логическим и возвращает true для элемента OPTION, имеющего атрибут selected.
После того как пользователь выберет элемент списка, элемент можно найти по свойству selected:
f1.list1.options[i].selected
Это свойство тоже возвращает true для одного из элементов.
Кроме того, номер выбранного элемента можно узнать по числовому свойству selectedIndex (см. пример ниже).
Пример. На странице можно создать список со ссылками на другие ресурсы или с адресами переходов в пределах сайта. В секции HEAD страницы необходимо поместить функцию:
<SCRIPT language="javascript">
function Go(adres) {
if (adres != "-") {
top.location = adres;
}
}
</SCRIPT>
В теле страницы необходимо поместить форму (количество ссылок может быть любым):
<FORM action=# method=get target=_blank>
<SELECT name=list1
onChange="Go(this.options[this.selectedIndex].value)"
size=1>
<OPTION name="o1" selected value="-" >
<OPTION name="o2" value="page1.htm" >Страница 1
<OPTION name="o3" value="page2.htm" >Страница 2
</SELECT>
</FORM>
Первый элемент OPTION (не содержащий адреса) необходим для того, чтобы пользователь мог отказаться от выбора гиперссылки.
Данный пример легко модифицировать для других целей: показа рисунков, динамического изменения содержания страницы, вывода справок и т.д.

Объект this

Обозначение текущего элемента. Объект this можно использовать не только для элементов форм, но и многих других элементов HTML, требующих программной обработки. При вызове функции по событию объект this определяет элемент HTML, в котором был определен атрибут события.
Пример. Поле для ввода почтового индекса:
Индекс: <INPUT type = "text" name = "indx"
size = 10 onChange="proverka(this, 100000, 999999, 'Индекс')">
Для обработки события используется функция:
function proverka(obj, n, k, s) {
if ((obj.value < n) || (obj.value > k)){
alert("Поле " + s + " заполнено неправильно!");
}
}
Данную функцию можно использовать для проверки различных числовых значений, находящихся в определенном диапазоне. Функцию легко модифицировать и для проверки данных других типов.

Методы focus и blur

Метод focus() устанавливает фокус для элемента диалога. Чаще всего этот метод используется в формах.
Шаблоны для использования метода:
document.имя_формы.имя_элемента.focus();
document.forms[i].elements[j].focus();
this.focus();
Метод blur() позволяет сделать не выбранным какой-либо элемент диалога, например, в форме. Эту функцию удобно использовать в декоративных целях, потому что круглых и овальных кнопок, создаваемых с помощью рисунков, создается прямоугольная рамка. Также не всем нравится, что рисунки-гиперссылки (элемент IMG внутри элемента A) окружаются пунктирной линией после щелчка мышью. То же самое относится к активным областям на картах (элемент MAP). Такая пунктирная рамка запрещается, если для соответствующего элемента использовать атрибут события onFocus.
Например, для гиперссылки это может выглядеть так:
<A href="файл.htm" onFocus="this.blur()">
<IMG src="файл_рисунка.gif"
alt="всплывающая_подсказка" border=0
width=ширина height=высота >
</A>
В картах для каждого элементе AREA можно определить событие onFocus:
<AREA href="файл.html" onFocus="this.blur()"... >
При этом необходимо учитывать, что без пунктирной рамки, окружающей выбранный элемент, затрудняется диалог, особенно если пользователь не использует мышь. В последнем случае человек вынужден использовать клавиши Tab, Пробел и Enter, а пунктирная рамка, заменяя указатель, отмечает выбранный элемент на экране.

Ошибки программирования и пути их исправления

Ошибки сценариев встречаются довольно часто. Даже при просмотре страниц в Интернете в строке состояния броузера время от времени появляется характерный желтый значок. Бывает, что отладка страниц затягивается из-за того, что трудно найти единственную ошибку. Ниже рассказывается о некоторых распространенных ошибках.
В первую очередь, надо отметить, что броузеры игнорируют некоторые ошибки. Например, отсутствие точки с запятой в конце команды, двойного слеша перед комментарием или использование неверного типа данных.
Некоторые ошибки не препятствуют загрузке страницы (появляется сообщение «выполнено, но с ошибками»). Такая ситуация может, к примеру, возникнуть, если не была определена переменная, использованная в команде. Тогда для устранения ошибки достаточно проверить все вхождения имени переменной в коде страницы.
Некоторые ошибки являются принципиальными. Например, отсутствие круглых скобок для условного выражения в операторе if, хотя с точки зрения синтаксиса языка программирования они не обязательны, в других языках их нет, и некоторые разработчики их по привычке не ставят.
Еще одна причина сбоев — отсутствие необходимой закрывающей скобки (чаще всего фигурной). Здесь надо подсчитать число скобок — количество левых и правых скобок должно совпадать.
Неверное использование индексов. Необходимо помнить, что элементы массивов и позиции символов в строке отсчитываются от нуля.
Использование русских букв (не отличимых по внешнему виду от латинских) в именах переменных. Например, автоматический переключатель раскладки реагирует на одиночную латинскую букву «c», заменяя ее русской «с». Просматривая текст программы в редакторе Блокнот, можно выбрать шрифт, в котором нет русских букв, и обнаружить ошибку.
Безупречно написанный код не будет работать, если на Web-странице не окажется необходимых объектов. Такая ситуация возникает, когда программа JavaScript запускается автоматически, а страница еще не загружена. Броузер обрабатывает программный код в секции HEAD раньше, чем формирует тело страницы BODY. При таком казусе выводится сообщение об отсутствии объекта, хотя в коде HTML этот объект (элемент) определен. Для устранения проблемы соответствующая часть программы должна быть оформлена в виде функции и запущена по событию onLoad элемента BODY. Следует отметить, что определенный код может (или должен) выполняться без учета степени загрузки страницы: задание глобальных переменных, предварительная загрузка рисунков, открытие модальных окон и т.п.
Internet Explorer указывает номер строки, в которой произошла ошибка, но надо учитывать, что если источник ошибки — функция, строка будет указана неправильно (та, где находится вызов функции, а не сбойная команда).
Несмотря на то, что элементы форм могут использоваться автономно, для надежной работы лучше помещать их внутрь элемента FORM. Это позволяет указывать имя формы вместе с именем элемента. Во фрагменте, приведенном ниже, элемент формы нужен только для этой цели:
<FORM name="fo1">
<TEXTAREA name="ta1" rows=50 cols=50> </TEXTAREA>
</FORM>
Заполнить данными этот текстовый элемент можно командой
document.fo1.ta1.value = "Текстовые данные";
Неправильное указание объектов в команде приводит к сообщению «xxxxx null или не является объектом», а неправильное присваивание вызывает сообщение «неправильный тип аргумента».
В определенном месте кода можно установить свой обработчик события, например:
<SCRIPT language="javascript">
function err() {
alert("Ошибка!");
}
window.onerror = err;
</SCRIPT>
В этом случае вместо обычной индикации ошибки будет появляться модальное окно.
Определенную проблему может представлять использование метода write. При просмотре Web-страницы в режиме источника не видны элементы HTML созданные этим методом. Для выяснения, каков на самом деле выводимый код, можно во время отладки использовать строку состояния броузера.
Например, код
txt = "";
name = "name11";
document.write(txt.anchor(name));
создаст в теле Web-страницы невидимый элемент A с именем, который может быть меткой, а команда
window.status = txt.anchor(name);
покажет в строке состояния код HTML этого элемента:
<A NAME=" name11"></A>

Предыдущий раздел | Следующий раздел

4.5. Объектная структура Web-страницы

Операторы и свойства

Свойство value

Оператор for...in. Проверка свойств объектов

Проверка значений отдельных свойств

Объект style

Оператор with

Объекты

Объекты броузера (navigator)

Объект window, его методы и свойства

Объект screen

Объект history

Объекты document и location

Свойство cookie

Методы объекта document

Методы fontcolor и fontsize

Фреймы. Объект parent

Объект all

Гиперссылки. Коллекции anchors и links

Рисунки. Коллекция images

Объекты и свойства форм

Коллекция forms

Массив elements

Метод click

Свойство элемента формы type

Метод select

Кнопки

Поля ввода

Флажки и переключатели

Списки

Объект this

Методы focus и blur

Ошибки программирования и пути их исправления