Техника Web-дизайна для студента
Основные понятия объектного программирования
Язык программирования JavaScript относится к языкам объектного программирования. Основными понятиями таких языков являются: объект, свойство и метод. Программный объект должен иметь уникальное имя, он может обладать определенными свойствами, которые в программе могут изменяться, и над ним могут производиться определенные действия. Действия над объектами производятся с помощью методов — программ небольшого объема, написанных разработчиками языка.
В частности, объектами могут быть HTML-метки, а их свойствами — параметры этих меток. В листинге 8.3. приведен пример программного изменения содержимого текстового поля. В функции pri () объектом является текстовое поле, уникальное имя которого Т1 задано в параметре name метки <input>. В качестве свойства метки используется параметр value. Изменить свойство метки в программе можно следующим образом:
Имя_метки. параметр="значение"
Следует заметить, что метка <input> находится внутри формы F1, поэтому изменение свойств объектов формы является исключением из общего правила и требует указания также имени формы, что и сделано в функции PR1(). Кроме того, особенностью использования элементов формы является наличие параметра name. В других метках использование этого параметра может не предусматриваться, поэтому в этих случаях для задания уникального имени метки следует использовать параметр id.
Рассмотрим следующий пример (листинг 8.5).
Листинг 8.5. Пример изменения свойства объекта, имя которого задано параметром ID
<HTML>
<HEAD>
<TITLE>
Программирование на JavaScript </TITLE>
<SCRIPT> function PRO
Picl. src="2.jpg" </SCRIPT>
</HEAD>
<BODY>
<IMG ID=Picl src=l. jpg onClick=PR()>
</BODY>
</HTML>
В этом документе единственным объектом является рисунок с уникальным именем Picl. В функции изменяется свойство этого объекта src, значением которого является имя файла рисунка. Таким образом, при вызове функции pro файл рисунка 1 .jpg будет заменен файлом 2.jpg и можно буцет наблюдать замену одного рисунка другим. Произойдет же это событие после щелчка мышью по рисунку, так как параметр onciick установлен в метке <img>. В метке <img> также используется параметр id, значение которого определяет имя рисунка. Следует обратить внимание на то, что в программе значение свойства обязательно должно заключаться в кавычки.
Изменение свойств каскадной таблицы стилей имеет следующую особенность:
Имя_объекта. style. свойство="значение"
Свойства каскадной таблицы стилей, содержащие дефис, записываются следующим образом. Дефис удаляется, а часть свойства после дефиса присоединяется к предшествующей части с большой буквы. В качестве примера рассмотрим следующий документ (листинг 8.6).
Листинг 8.6. Пример изменения свойств каскадной таблицы стилей
<HTML>
<HEAD>
<Т1ТЪЕ>Программирование на JavaScript</TITLE>
<SCRIPT>
Function PR1()
PI. style. fontSize="24pt"
PI. style. color="blue"
PI. style. backgroundColor="magenta"
}
Function PR2()
{
PI. style. backgroundColor="green"
PI. style. fontSize="20 pt"
}
</SCRIPT>
</HEAD>
<BODY>
<P id=Pl style="BACKGROUND-COLOR: yellow; font-size: 16pt"
Onclick=PRl() onmouseout=PR2()>
Это абзац, щелчком мыши по которому изменяется размер шрифта до 24 pt, цвет шрифта на синий, цвет фона на пурпурный, а перемещением курсора за пределы абзаца изменяется цвет фона на зеленый, а размер шрифта до 20 pt.
</Р>
</BODY>
</HTML>
События, которые вызывают на выполнения функции pri () и PR2 ( ), и действия этих функций описаны в тексте документа. Остается лишь добавить, что здесь объектом является абзац с уникальным именем Р1. В метке абзаца <Р> с помощью свойств каскадной таблицы стилей задаются начальный размер текста и цвет фона. Начальный цвет текста по умолчанию будет черным. Возвращение к начальным характеристикам текста после вызова любой из функций в данном случае возможно только после повторной загрузки документа.
