§ 32. Динамический HTML

Определения и обозначения

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

Объектная модель документа (DOM) — представление HTML-документа в виде дерева объектов, которое создаёт браузер. Каждый элемент, например заголовок или кнопка, становится доступным сценарию объектом. Благодаря DOM программа может находить нужные части страницы и менять их, не переписывая документ целиком.

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

Обработчик события — фрагмент JavaScript-кода, который запускается в ответ на определённое событие. Например, обработчик щелчка может изменить текст заголовка. Он нужен, чтобы связать действие пользователя с конкретным результатом на странице.

Как это устроено

Сначала браузер читает HTML-код и строит по нему DOM — дерево объектов, отражающее структуру документа. Например, абзац внутри основного блока становится объектом, связанным с этим блоком. Такая модель нужна потому, что сценарий не работает с текстовым файлом как с набором символов: он обращается к понятным браузеру объектам. CSS применяется к элементам и задаёт, как они выглядят.

В DHTML у каждой технологии своя роль. HTML описывает, какие элементы есть на странице, поскольку без структуры браузеру нечего было бы отображать. CSS определяет цвет, размеры и другие свойства внешнего вида, отделяя оформление от содержимого. JavaScript задаёт логику и реакцию на действия, а DOM служит способом найти элемент и обратиться к нему. Поэтому динамический эффект получается не из одной команды, а из согласованной работы этих средств.

Интерактивная страница действует по цепочке: браузер показывает документ, происходит событие, запускается связанный с ним обработчик, затем обработчик выполняет нужные действия. Например, при щелчке по кнопке браузер сообщает о событии, а JavaScript-код реагирует на него. Такая последовательность позволяет странице отвечать на действия в подходящий момент, а не выполнять изменение заранее. Если событие не произошло, соответствующий обработчик обычно не запускается.

Чтобы поменять страницу, сценарий сначала находит нужный элемент через DOM, а затем изменяет его содержимое или свойства оформления. Так можно заменить текст абзаца, задать другой цвет или сделать блок видимым. Изменения происходят в текущем документе, который хранится в памяти браузера, поэтому исходный HTML-файл на сервере не переписывается. Повторная загрузка страницы для таких изменений обычно не нужна.

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

Роли средств динамического HTML

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

Разбор задач

После щелчка по кнопке изменить текст заголовка страницы

Нужно связать щелчок с действием, которое заменит содержимое заголовка. Для этого заголовку и кнопке необходимо соответствовать элементам в HTML, а сценарий должен получить доступ к заголовку через DOM. Сначала определим, что именно будет инициировать изменение и какой объект должен измениться.

1. Добавить на страницу заголовок и кнопку, чтобы браузер создал для них элементы DOM. Заголовку задают идентификатор, по которому сценарий сможет его найти.
2. Связать с кнопкой обработчик события щелчка. Это важно, потому что без связи событие произойдёт, но нужный код не запустится.
3. В обработчике найти заголовок по идентификатору и присвоить его текстовому содержимому новую фразу. После щелчка браузер отобразит изменённый текст.

Ответ: при каждом щелчке обработчик находит объект заголовка в DOM и меняет его содержимое без перезагрузки документа. Если заголовок не найден, следует проверить его идентификатор и момент запуска сценария.

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

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

1. Найти нужный абзац в DOM или связать обработчики с его элементом. Это гарантирует, что реагировать будет именно требуемый текст.
2. Для события наведения задать обработчик, который меняет цвет абзаца через его стиль. Выбрать цвет, заметно отличающийся от исходного.
3. Для события ухода задать второй обработчик, восстанавливающий прежний цвет. Затем проверить оба перехода: наведение и уход указателя.

Ответ: цвет меняется, когда указатель оказывается над абзацем, и возвращается к исходному при уходе. Если он не восстанавливается, нужно проверить обработчик ухода и значение цвета, которое он задаёт.

Создать кнопку, которая поочерёдно показывает и скрывает дополнительный блок текста

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

1. Создать кнопку и дополнительный блок, а блоку назначить идентификатор для поиска через DOM. Начальное состояние можно выбрать заранее, например скрытое.
2. При щелчке найти блок и проверить его состояние видимости. Проверка нужна, чтобы обработчик понял, какое действие выполнить следующим.
3. Если блок скрыт, сделать его видимым; если он виден, скрыть его. После каждого щелчка браузер показывает результат, а сценарий снова проверяет состояние при следующем нажатии.

Ответ: один обработчик переключает видимость блока между показанным и скрытым состояниями. Если переключение не работает, проверьте, что обработчик связан с кнопкой, а сценарий находит именно нужный блок.

Типичные ошибки

Считать DHTML отдельным языком программирования. Такое впечатление может возникнуть из-за отдельного названия, но DHTML объединяет HTML, CSS, JavaScript и DOM. Если описываете решение, проверьте, какую роль играет каждый компонент, вместо того чтобы искать «команду DHTML». Тогда станет ясно, что структуру задаёт разметка, а поведение — сценарий.

Путать изменение DOM с изменением исходного HTML-файла. На экране содержимое действительно меняется, поэтому легко решить, что переписался файл сайта. На самом деле сценарий меняет документ в памяти браузера, а серверный файл остаётся прежним. Проверить себя можно, перезагрузив страницу: если новое состояние не сохранено отдельно, исходный вариант обычно появится снова.

Забывать связать обработчик с событием и элементом. Код может быть написан верно, но не запускаться, если не указано, какое событие его вызывает и к какому элементу оно относится. Ошибку допускают, когда рассматривают обработчик отдельно от кнопки или другого объекта. Проверьте, что щелчок, наведение или нужное событие действительно связано с обработчиком на правильном элементе.

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

Связь с другими темами

Для работы с DHTML нужны основы HTML-разметки: без них нельзя создать элементы страницы, к которым будет обращаться сценарий. Знание CSS помогает задавать исходное оформление и понимать, какие свойства можно изменять. Синтаксис JavaScript необходим, чтобы описать обработчики и последовательность действий; без него события не приведут к нужной реакции.

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

Что запомнить

• DHTML — не отдельный язык, а набор взаимодействующих веб-технологий.
• HTML задаёт структуру страницы, CSS — её оформление.
• JavaScript позволяет реагировать на события и менять страницу.
• DOM представляет документ в виде дерева объектов.
• Обработчик выполняется в ответ на связанное с ним событие.
• Изменения DOM обычно происходят в браузере без повторной загрузки страницы.