Основы Java Script

onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Red

<BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"

onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Green

<BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"

onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Blue

<TABLE>

<TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Create Page"

onClick="btnClick(this.form);"></TD>

<TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"

onClick="resetRCHBox();"></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

5.7 Список select

С помощью оператора <SELECT> вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора <SELECT> приведен ниже:

<SELECT NAME="Имя_списка_select"

SIZE="Размер_списка"

MULTIPLE

onBlur="Обработчик_события"

onChange="Обработчик_события"

onFocus="Обработчик_события">

<OPTION VALUE="Значение" SELECTED> Текст

<OPTION VALUE="Значение"> Текст

...

<OPTION> Текст

</SELECT>

Все параметры оператора <SELECT> необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка. Параметр SIZE задает размер видимой части списка в строках. Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора. Для определения элементов списка предназначен оператор <OPTION>. Оператор <OPTION> может иметь два параметра - VALUE и SELECTED. Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы. После оператора <OPTION> следует текст, отображаемый в строках списка.

5.7.1 Свойства объекта select

Ниже перечислены свойства объекта select, доступные сценарию JavaScript:

Таблица 6

Свойство	Описание
length	Количество элементов (строк) в списке
name	Значение параметра NAME
options	Массив объектов options, соответствующих элементам массива, заданным при помощи оператора <OPTION>
selectedIndex	Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов)

Одним из свойств списка select является массив options. В этом массиве хранятся элементы списка, определенные оператором <OPTION>. Каждый элемент такого массива есть ни что иное как объект со следующим набором свойств:

Таблица 7

Свойство	Описание
defaultSelected	Отражает состояние параметра SELECTED
index	Порядковый номер (индекс) элемента списка
length	Количество элементов в выбранном объекте
name	Значение параметра NAME
selected	С помощью свойства selected сценарий JavaScript может выбрать данный элемент
selectedIndex	Номер выбранного элемента
text	Текст, указанный после оператора <OPTION>
value	Значение параметра VALUE

5.7.2 Методы объекта select

Для объекта select определено два метода, не имеющих параметров, - focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй - отобрать этот фокус у списка.

5.7.3 Обработчики событий, связанные с объектом select

Как видно из формата оператора <SELECT>, рассмотренного выше, для списка вы можете определить три обработчика события: onFocus, onBlur и onChange. События onFocus и onBlur возникают, когда список получает и теряет фокус ввода, соответственно. Что же касается события onChange, то оно создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.

5.8 Пример сценария, работающего со списком

При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем. В данном примере рассматривается два списка. Первый из них предназначен для выбора цвета, а второй - размера некоторого предмета (в данном случае не имеет значение, какого именно). Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка.

Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.

Листинг 5.3

<HTML>

<HEAD>

<TITLE>Работа со списками</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function Complete()

{

var szElement="";

szElement="Цвет: " +

Sel.ColorList.options[Sel.ColorList.selectedIndex].value +

" (" + Sel.ColorList.selectedIndex + ")" +

"\nРазмер: " +

Sel.SizeList.options[Sel.SizeList.selectedIndex].value +

" (" + Sel.SizeList.selectedIndex + ")";

alert(szElement);

}

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<H1>Работа со списками</H1>

<FORM NAME="Sel">

<P>Выберите цвет:<P>

<SELECT NAME="ColorList">

<OPTION VALUE=Черный SELECTED> Черный

<OPTION VALUE=Белый> Белый

<OPTION VALUE=Красный> Красный

<OPTION VALUE=Оранжевый> Оранжевый

<OPTION VALUE=Желтый> Желтый

<OPTION VALUE=Зеленый> Зеленый

<OPTION VALUE=Голубой> Голубой

<OPTION VALUE=Синий> Синий

<OPTION VALUE=Фиолетовый> Фиолетовый

</SELECT>

<P>Выберите размер:<P>

<SELECT NAME="SizeList" SIZE=3>

<OPTION VALUE=Стандартный SELECTED> Стандартный

<OPTION VALUE=Большой> Большой

<OPTION VALUE=Средний> Средний

<OPTION VALUE=Маленький> Маленький

<OPTION VALUE=Очень_маленький> Очень маленький

</SELECT>

<P>

<TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

5.9 Однострочное поле text

Наиболее часто в формах, размещенных на страницах серверов Web, встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор <INPUT> с параметром TYPE, равным значению "text":

<INPUT TYPE="text"

NAME="Имя_поля_text"

VALUE="Значение"

SIZE=Размер_поля

onBlur="Обработчик_события"

onChange="Обработчик_события"

onFocus="Обработчик_события"

onSelect="Обработчик_события">

Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

5.9.1 Свойства объекта text

Сценариям JavaScript доступны три свойства поля редактирования как объекта класса text:

Таблица 7

Свойство	Описание
defaultValue	Отражает состояние параметра VALUE
name	Значение параметра NAME
value	Текущее содержимое поля редактирования

Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Заметим, что изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.

5.9.2 Методы объекта text

Для объекта text определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

5.9.3 Обработчики событий объекта text

Обработчики событий вызываются в следующих случаях:

Таблица 8

Обработчик	Когда вызывается
onFocus	Вызывается, когда поле редактирования получает фокус ввода
onBlur	Вызывается, когда поле редактирования теряет фокус ввода
onChange	При изменении содержимого поля редактирования
onSelect	При выделении содержимого поля редактирования

5.10 Пример - проверка анкеты

Методику работы с текстовыми полями в сценариях JavaScript рассмотрим на примере документа HTML с формой для ввода анкеты.

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

Листинг 5.4

<HTML>

<HEAD>

<TITLE>Работа с текстовыми полями</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function Complete()

{

var szElement="";

szElement="Фамилия: " + Sel.family.value +

"\nИмя: " + Sel.Name.value +

"\nТелефон: " + Sel.PhoneNumber.value +

"\nВозраст: " + Sel.Age.value;

alert(szElement);

}

function CheckAge(age)

{

if(age < 18)

return "0";

else

return age;

}

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<H1>Заполните анкету</H1>

<FORM NAME="Sel">

<TABLE>

<TR><TD><B>Фамилия:</B></TD><TD><INPUT TYPE="text"

NAME="family"

onChange="this.value=this.value.toUpperCase()"

SIZE="20" ></TD></TR>

<TR><TD><B>Имя:</B></TD><TD><INPUT TYPE="text"

NAME="Name" SIZE="20"></TD></TR>

<TR><TD><B>Телефон:</B></TD><TD><INPUT TYPE="text"

NAME="PhoneNumber" SIZE="10"></TD></TR>

<TR><TD><B>Возраст:</B></TD><TD><INPUT TYPE="text"

NAME="Age" VALUE="18" SIZE="4"

onChange="this.value=CheckAge(this.value)"

onFocus="this.select()"

></TD></TR>

<P>

<TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

5.11 Многострочное поле textarea

В тех случаях, когда редактируемый текст должен занимать несколько строк, в форме между операторами <TEXTAREA> и </TEXTAREA> располагают многострочное текстовое поле:

<TEXTAREA

NAME="Имя_поля_textarea"

ROWS="Количество_строк"

COLS="Количество_столбцов"

WRAP="Режим_свертки_текста"

onBlur="Обработчик_события"

onChange="Обработчик_события"

onFocus="Обработчик_события"

onSelect="Обработчик_события">

. . .

Отображаемый текст

. . .

</TEXTAREA>

Здесь с помощью параметра NAME вы должны указать имя поля. Оно нужно для того чтобы сценарий JavaScript мог обращаться к свойствам и методам этого поля. Параметры ROWS и COLS определяют видимый размер многострочного поля редактирования, задавая, соответственно, количество строк и столбцов (количество символов, которые могут поместиться в одной строке). Параметр WRAP задает способ свертки текста и может иметь одно из трех следующих значений:

Таблица 8

Значение	Способ свертки текста
off	Свертка выключена, строки отображаются так, как вводятся
virtual	Строки сворачиваются только при отображении в окне редактирования, но передаются расширению сервера Web и сценарию JavaScript точно в таком виде, в котором вводятся
physical	При свертке в передаваемый текст записываются символы новой строки

5.11.1Методы объекта textarea

Для объекта textarea определены такие же методы, что и для объекта text. Это методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого многострочного поля редактирования.

5.11.2 Обработчики событий объекта textarea

Обработчики событий вызываются в следующих случаях:

Таблица 9

Обработчик	Когда вызывается
onFocus	Вызывается, когда поле редактирования получает фокус ввода
onBlur	Вызывается, когда поле редактирования теряет фокус ввода
onChange	При изменении содержимого поля редактирования
onSelect	При выделении содержимого поля редактирования

5.12 Пример сценария, заполняющего поле textarea

Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.

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

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

Листинг 5.5

<HTML>

<HEAD>

<TITLE>Работа с многострочным текстовым полем</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var szOK = "Спасибо!\nВаша программа работает без ошибок.";

var szTrouble = "К сожалению, с вашей программой у нас возникли проблемы.";

var szProbList = "\nСерийный номер программы: ХХХХХХ\nДата покупки: ХХ-ХХ-ХХ";

function getDate()

{

var szDate = "";

szDate = new Date();

return szDate.toLocaleString() + "\n";

}

function chkRadio(form,value)

{

if(value == "Thanks")

Sel.Comment.value = getDate() + szOK;

else

Sel.Comment.value = getDate() + szTrouble + szProbList;

}

function init()

{

Sel.Comment.value = getDate() + szOK;

}

function Complete()

{

szMsg = Sel.Comment.value;

alert(szMsg);

}

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<H1>Пришлите ваш отзыв</H1>

<FORM NAME="Sel">

<P><INPUT TYPE="radio" NAME="TextSelect" CHECKED VALUE="Thanks"

onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Благодарность

<BR><INPUT TYPE="radio" NAME="TextSelect" VALUE="Trouble"

onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Проблемы

<P><TEXTAREA NAME="Comment"

ROWS="8" COLS="40" WRAP="physical">

</TEXTAREA>

<P><INPUT TYPE="button" VALUE="Complete" onClick="Complete();">

</FORM>

<SCRIPT LANGUAGE="JavaScript">

<!--

init();

// -->

</SCRIPT>

</BODY>

</HTML>

5.13 Однострочное поле password

Для ввода такой информации, как пароли, в формах размещают однострочные поля редактирования типа password:

<INPUT TYPE="password"

NAME="Имя_поля_text"

VALUE="Значение"

SIZE=Размер_поля>

Для поля password можно указать параметры NAME, VALUE и SIZE. Заметим, что это поле не может иметь обработчики событий.

Параметр NAME позволяет задать имя поля, которое необходимо для обращения к свойствам объекта password, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Поле password похоже на поле text, рассмотренное ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.

5.13.1 Свойства объекта password

Сценариям JavaScript доступны три свойства поля редактирования password:

Таблица 10

Свойство	Описание
defaultValue	Отражает состояние параметра VALUE
name	Значение параметра NAME
value	Текущее содержимое поля редактирования

Так же, как и для поля text, сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Изменяя содержимое свойства value, сценарий может изменить содержимое поля редактирования типа password.

5.13.2 Методы объекта password

Для объекта password определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

5.14 Пример - ввод идентификатора и пароля

В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.

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

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

Листинг 5.6

<HTML>

<HEAD>

<TITLE>Ввод и проверка пароля</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function Complete()

{

if(Sel.pwd.value != Sel.pwd1.value)

alert("Ошибка при вводе пароля\nПопробуйте еще раз");

else

{

var szId="";

var szPwd="";

szId = Sel.id.value;

szPwd = Sel.pwd.value;

alert("Регистрация выполнена:\n" + "ID=" +

szId + "\nPassword=" + szPwd);

}

}

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<H1>Регистрация</H1>

<FORM NAME="Sel">

<TABLE>

<TR><TD><B>Идентификатор:</B></TD><TD><INPUT TYPE="text"

NAME="id" onChange="this.value=this.value.toUpperCase()"

SIZE="20" ></TD></TR>

<TR><TD><B>Пароль:</B></TD><TD><INPUT TYPE="password"

NAME="pwd" SIZE="20"></TD></TR>

<TR><TD><B>Проверка пароля:</B></TD><TD><INPUT TYPE="password"

NAME="pwd1" SIZE="20"></TD></TR>

</TABLE>

<P>

<TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

6. Работа с графическими изображениями

Для того, чтобы встроить растровое изображение в документ HTML, необходимо использовать оператор <IMG>. Общий вид этого оператора показан ниже:

<IMG SRC="Адрес_файла_изображения"

NAME="Имя_изображения"

. . .

WIDTH="Ширина"

HEIGHT="Высота">

Параметры оператора <IMG> определяют адрес файла с изображением, выравнивание текста, расположенного возле изображения, размеры изображения, альтернативный текст и так далее. К графическим изображениям, размещенным в документе HTML, можно обращаться как к элементам массива document.images (первое изображение адресуется как document.images[0]). Однако в большинстве случаев удобнее пользоваться именами изображений, определенными параметром NAME оператора <IMG>.

Таблица 11

Свойство	Описание
border	Ширина рамки в пикселах вокруг изображения
complete	Сод. булево знач., которое указ., загружен рис. в браузер или нет (true - загружен, false - нет)
height	Высота изображения в пикселах или процентах от размера окна (ячейки таблицы)
hspace	Ширина свободного прост. в пикселах, отделяющее изображение от текста по горизонтали
src	Адрес URL файла с растровым графическим изображением
vspace	Ширина свободного прост. в пикселах, отделяющее изображение от текста по вертикали
width	Ширина изображения в пикселах или процентах от размера окна (ячейки таблицы)

С объектом image связано три события:

Таблица 12

Событие	Описание
onAbort	Возникает при прерывании загрузки рисунка (при нажатии клавиши [Esc] или активизации новой гиперсвязи, в то время, когда рисунок загружается)
onError	Событие, связанное с ошибкой загрузки рисунка (когда невозможно найти рисунок по указанному адресу URL)
onLoad	Событие, возникающее в начале загрузки рисунка

6.1 Динамическая замена растровых изображений

Одна из наиболее интересных возможностей, доступных при использовании сценариев JavaScript, заключается в динамической замене графических изображений, указанных в параметре SRC оператора <IMG>. Например, в следующей строке сценария JavaScript указано, что изображение с именем btn1 должно иметь адрес URL pic/aurap.gif:

document.btn1.src="pic/aurap.gif"

Что произойдет при выполнении приведенной выше строки сценария? Область, выделенная в окне браузера для растрового изображения btn1 будет заполнена изображением pic/aurap.gif. Если до этого там было другое изображение, оно будет заменено на новое.

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

Пусть в документе HTML находятся две графические ссылки. Сделаем так, чтобы при наведении на эти ссылки курсора мыши происходила "подсветка" изображения. Для этого надо заготовить по две картинки на каждую из графических ссылок и установить обработчики событий onMouseOver и onMouseOut для соответствующих тэгов <A>.

Листинг 6.1

<HTML>

<BODY>

<P>

<CENTER>

<A HREF="disket.htm"

onMouseOver="document.btn1.src='img12.jpg'"

onMouseOut="document.btn1.src='img11.jpg'"><IMG

SRC="img11.jpg" NAME = "btn1" BORDER=0></A>

<A HREF="book.htm"

onMouseOver="document.btn2.src='img22.jpg'"

onMouseOut="document.btn2.src='img21.jpg'"><IMG

SRC="img21.jpg" NAME = "btn2" BORDER=0></A>

</CENTER>

</BODY>

</HTML>

В данном примере для оператора ссылки <A> определены обработчики событий onMouseOver и onMouseOut:

onMouseOver="document.btn1.src='img12.jpg'"

onMouseOut="document.btn1.src='img11.jpg'"

Когда курсор мыши оказывается над ссылкой (то есть над графическим изображением ссылки), управление получает обработчик события onMouseOver. Этот обработчик загружает изображение img12.jpg, где исходная картинка "посвечивается". После того как пользователь убирает курсор мыши с поверхности кнопки, в дело включается обработчик события onMouseOut. Он восстанавливает исходное изображение, указанное в параметре SRC оператора <IMG>.

6.2 Ожидание загрузки всех изображений

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

Решением проблемы является упреждающая загрузка изображений. Для этого в программе создаются переменные (возможно, массив), содержащие объекты Image. В эти переменные производится упреждающая загрузка. Например:

hiddenImg= new Image();

hiddenImg.src= "img3.gif";

В первой строке создается новый объект Image. Вторая строка инициирует загрузку изображения img3.gif и сохранение его в переменной hiddenImg. После загрузки изображения, управление передается следующей строке сценария.

Чтобы вызвать изображение на экран, можно воспользоваться командой:

document.myImage.src= hiddenImg.src;

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

Листинг 6.2

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

hiddenImg11= new Image();

hiddenImg12= new Image();

hiddenImg21= new Image();

hiddenImg22= new Image();

hiddenImg11.src= "img11.jpg";

hiddenImg12.src= "img12.jpg";

hiddenImg21.src= "img21.jpg";

hiddenImg22.src= "img22.jpg";

//-->

</SCRIPT>

</HEAD>

<BODY>

<P>

<CENTER>

<A HREF="disket.htm"

onMouseOver="document.btn1.src=hiddenImg12.src"

onMouseOut="document.btn1.src=hiddenImg11.src"><IMG

SRC="img11.jpg" NAME = "btn1" BORDER=0></A>

<A HREF="book.htm"

onMouseOver="document.btn2.src=hiddenImg22.src"

onMouseOut="document.btn2.src=hiddenImg21.src"><IMG

SRC="img21.jpg" NAME = "btn2" BORDER=0></A>

</CENTER>

</BODY>

</HTML>

7. Основы Dynamic HTML (DHTML)

Как известно, наибольшими возможностями по оформлению внешнего вида документов HTML обладают каскадные таблицы стилей (CSS). Через каскадные таблицы стилей доступно управление как всеми основными оформительскими параметрами стандартного HTML, так и многими дополнительными параметрами.

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

Из сценария JavaScript имеется возможность динамического управления всеми стилевыми свойствами объектов документа HTML (в том числе и слоев), что позволяет получить на странице самые разнообразные эффекты, такие, как меняющиеся под курсором мыши цвета и шрифты, скроллинг текста и графики, выпадающие меню, перемещение объектов и так далее.

Такое взаимодействие документов HTML, каскадных таблиц стилей и сценариев JavaScript называтеся динамическим HTML (DHTML). При помощи DHTML разработчики могут писать сценарии, меняющие расположение и содержание Web-страниц без необходимости генерации новых страниц или их загрузки с сервера.

7.1 Слои

Для создания слоев следует использовать тег <DIV> или <SPAN>. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент <DIV>. При размещении текста внутри параграфа применяется тег <SPAN>.

Ниже приведен фрагмент html-кода, использующий слои для создания эффекта наложения одного текстового фрагмента на другой:

Листинг 7.1

<html>

<body>

Слой 1 наверху

<div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div>

<div style="position:relative; top:-55; left:5; color:orange; font-size:80px;

z-index:1">Слой 2</div>

Слой 2 наверху

<div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div>

<div style="position:relative; top:-55; left:5; color:orange; font-size:80px;

z-index:4">Слой 2</div>

</body>

</html>

Тип позиционирования слоя определяется параметром position, положение элемента - двумя координатами top и left, а порядок слоя значением z-index.

7.2 Позиционирование слоя

Свойство position может принимать одно из трех значений: static (статическое), absolute (абсолютное) и relative (относительное). Параметр static по умолчанию не оказывает никакого влияния на расположение слоев.

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

Кроме тегов <DIV> и <SPAN> абсолютное позиционирование поддерживают следующие элементы: <APPLET>, <INPUT>, <BUTTON>, <OBJECT>, <SELECT>, <FIELDSET>, <IFRAME>, <TABLE>, <IMG>, <TEXTAREA>.

Параметр position: relative используется для смещения слоя относительно родительского элемента. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.

7.3 Положение слоя

В то время как свойство position указывает тип системы координат, параметры top и left определяют точную позицию слоя. Значения этих параметров могут определяться в процентном отношении или пикселах, принимать положительные и отрицательные величины. Это дает возможность размещать контент выше или ниже на странице независимо от физической позиции кода HTML. То есть, в верхней части страницы можно поместить слой, который описан внизу HTML-документа.

7.4 Свойство z-index

Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index (Рис. 7.1).

Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.

Рис. 7.1. Слои и их z-индексы.

В Листинг 7.1 показано использование параметра z-index для изменения положения слоев относительно друг друга.

7.4.1 Свойство visibility

Для отображения или скрытия слоя используется параметр visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет.

Например, скрытый блок текста можно оформить следующим образом:

<div style="visibility: hidden">Спрятанный слой</div>

7.5 Динамическое управление слоями

Сценарии JavaScript позволяют динамически управлять параметрами установленных слоев. Это позволяет получить такие эффекты, как скрытие и отображение слоя, изменение порядка отображения, перемещение слоя в окне браузера. Все эти эффекты достигаются с помощью изменения соответствующих стилевых параметров установленных слоев.

Для обращения к слоям из сценариев JavaScript, удобнее всего каждому слою дать собственное имя при помощи параметра id. Например:

<div id="div1">

...

</div>

Для того, чтобы скрыть отображение слоя div1, можно использовать следующую команду:

div1.style.visibility='hidden';

Для повторного обображения слоя следует выполнить следующее присвоение:

div1.style.visibility='visible';

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

Листинг 7.2

<HTML>

<HEAD>

<STYLE type="text/css">

div {

position: absolute;

top: 20;

left: 160;

visibility: hidden;

}

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function show_d(d)

{

div1.style.visibility='hidden';

div2.style.visibility='hidden';

div3.style.visibility='hidden';

div4.style.visibility='hidden';

div5.style.visibility='hidden';

d.style.visibility='visible';

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<a href="javascript:void(0)" onClick="show_d(div1);">показать слой 1</a><br>

<a href="javascript:void(0)" onClick="show_d(div2);">показать слой 2</a><br>

<a href="javascript:void(0)" onClick="show_d(div3);">показать слой 3</a><br>

<a href="javascript:void(0)" onClick="show_d(div4);">показать слой 4</a><br>

<a href="javascript:void(0)" onClick="show_d(div5);">показать слой 5</a><br>

<div id="div1">

<h3>Слой номер один</h3>

Некоторый текст, на слое расположенный. Его можно скрыть и показать. Текст может содержать несколько строк.

</div>

<div id="div2">

<h3>Слой номер два</h3>

Содержит свой текст. Если показывается, то текст на других слоях не виден.

</div>

<div id="div3">

<h3>Слой номер три</h3>

Тоже текст.

При работе со слоями надо следить, чтобы текст одного слоя не "выглядывал" из-под другого слоя при самых различных размерах окна браузера и используемых шрифтах.

</div>

<div id="div4">

<h3>Слой номер четыре</h3>

Здесь нет текста.

</div>

<div id="div5">

<h3>Слой номер пять</h3>

И тут тем более нет.

</div>

</BODY>

</HTML>

Размещено на Allbest.ru