23.Динамические html страницы. Основные понятия. Возможности.

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

Отличия динамического HTML(DHTML) от статического НTML

Интерактивные средства общения разработчика с посетителями Web-страничек(видеоизображение, звуковое сопровождение, 3D –графика и т.д.)

Изменение вида и содержания Web–страницы пользователем в соответствии с собственными предпочтениями и запросами (смена фонового рисунка, цвета и начертания шрифта, изображения мышки и т.д.)

Ввод пользовательской информации в поля формы (заполнение анкет, покупка товаров, подписка на газеты и журналы.)

Отправка сообщений, пожеланий и комментариев разработчику Web-cайта.

Существует два вида программ для Web-страниц:

Апплет – программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы;

Скрипт – программа, включенная в состав Web-страницы для расширения ее возможностей.

Можно выделить две группы сценариев: клиентские и серверные. Клиентские сценарии выполняются на компьютере-клиенте. Многие браузеры (IE, Opera и т. д.) используют встроенный интерпретатор для выполнения клиентских сценариев.

В каждый HTML-документ может быть внедрена программа, выполняемая на клиентской машине при загрузке документа или в другое время (например, когда активизируется ссылка). Такие программы принято называть клиентскими скриптами (в отличие от серверных скриптов, выполняемых на сервере).

Клиентские скрипты (или сценарии) предоставляют средства усиления интерактивности документов HTML.

Способы встраивания JavaScript кода в страницы сайта:

использование событий (размещение внутри тега HTML-документа);

контейнер <SCRIPT>…</SCRIPT> в теле программы или внутри заголовка;

подключение кода, размещенного в отдельном файле.

Использование событий

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

Существуют следующие категории событий:

стандартные события (могут быть связаны с любым элементом HTML);

события для элементов, получающих фокус ввода;

события, специфические для отдельных элементов.

Стандартные события приведены в таблице 1.

Таблица 1

onclick	Щелчок левой кнопкой мыши по области элемента
ondblcliсk	Двойной щелчок левой кнопкой мыши по области элемента
onmousedown	Левая кнопка мыши нажата, когда указатель находится в области элемента
onmousemove	Указатель мыши перемещается по области элемента
onmouseup	Левая кнопка мыши отпущена, когда указатель находится в области элемента
onmouseover	Указатель мыши входит в пределы области элемента
onmouseout	Указатель мыши выходит за пределы элемента
onkeydown	Нажата и удерживается клавиша на клавиатуре
onkeypress	Нажата и отпущена клавиша на клавиатуре
onkeyup	Отпущена клавиша на клавиатуре
onscroll	Элемент прокручивается

Пример 1:

<H1 onmouseover="this.style.color='red' ">

Эта строка покраснеет</H1>

Ключевое слово this указывает на то, что изменяется стиль элемента, в теге которого определен обработчик события, в данном случае элемент H1.

Пример 2. Увеличение размера картинки при наведении на нее указателя мыши и уменьшении размера при перемещении указателя мыши из области картинки:

<img src="Солнце.JPG" width=20 height=20 onmouseover="this.width=100; this.height=100" onmouseout="this.width=20; this.height=20">

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