JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

}

Глава 15 демонстрирует, как с помощью JavaScript можно управлять HTML-элементами, которые определяют содержимое веб-страниц. Глава 16 «Каскадные таблицы стилей» демонстрирует, как с помощью JavaScript можно управлять каскадными таблицами стилей CSS, определяющими представление содержимого. Чаще всего для этой цели используется атрибут HTML-элементов style или class:

function hide(e, reflow) { // Скрывает элемент e, изменяя его стиль

if (reflow) {// Если 2-й аргумент true,

e.style.display = "none" // скрыть элемент и использовать

} // занимаемое им место

else { // Иначе

e.style.visibility = "hidden"// сделать е невидимым, но оставить

} // занимаемое им место пустым

}

function highlight(е) { // Выделяет е, устанавливая класс CSS

// Просто добавляет или переопределяет HTML-атрибут class.

// Предполагается, что таблица стилей CSS уже содержит определение класса "hilite"

if (!е.className)

e.className = "hilite";

else

e.className += " hilite";

}

JavaScript позволяет не только управлять содержимым и оформлением HTML-документов в броузерах, но и определять поведение этих документов с помощью обработчиков событий. Обработчик событий - это функция JavaScript, которая регистрируется в броузере и вызывается броузером, когда возникает событие определенного типа. Таким событием может быть щелчок мышью или нажатие клавиши (или какое-то движение двумя пальцами на экране смартфона). Обработчик события может также вызываться броузером по окончании загрузки документа, при изменении размеров окна броузера или при вводе данных в элемент HTML-формы. Глава 17 «Обработка событий» описывает, как определять и регистрировать обработчики событий и как вызываются эти обработчики при появлении событий.

Простейший способ объявления обработчиков событий заключается в использовании HTML-атрибутов, имена которых начинаются с приставки «оп». Обработчик «onclick» особенно удобен при создании простых тестовых программ. Предположим, что вы сохранили функции debug и hide, представленные выше, в файлах с именами debug.js и hide.js. В этом случае можно было бы написать простой тестовый HTML-файл, использующий элементы <button> с атрибутами onclick, определяющими обработчики событий:

<script src="debug.js"></script>

<script src="hide. js"x/script>

Hello

<button onclick="hide(this,true); debug('hide button 1'); ">Hide1</button>

<button onclick="hide(this); debug('hide button 2');">Hide2</button>

World

Ниже приводится еще один пример программного кода на клиентском JavaScript, использующего механизм событий. Он регистрирует обработчик очень важного события «load» и дополнительно демонстрирует более сложный способ регистрации обработчика события «click»:

// Событие "load" возбуждается, когда документ будет полностью загружен.

// Обычно мы вынуждены ждать этого события, прежде чем можно будет запустить

// наш программный код JavaScript.

window.onload = function { // Запустит функцию после загрузки документа

// Отыскать все теги <img> в документе

var images = document.getElementsByTagName("img");

// Обойти их все в цикле, добавить к каждому обработчик события "click",