Простейшие динамические эффекты на JavaScript

JavaScript позволяет разрабатывать различные динамические эффекты, которые могут преобразовать внешний вид сайта, обеспечить простоту и удобство навигации по сайту, сократить время, количество движений и кликов пользователю сайта. В общем, может существенно преобразовать сайт в лучшую сторону.
Для того чтобы сделать сайт на JavaScript реагирующий на действия пользователя, нужно как-то в сценариях JavaScript следить за действиями пользователя. Отслеживать действия пользователя позволяют обработчики событий. Обработчики событий следят за действиями пользователя, и при возникновении какого-либо события, соответствующий обработчик события вызывает привязанный к нему код JavaScript. Например, есть кнопка в форме HTML-документа и при клике пользователем на эту кнопку браузер вызовет обработчик события, отвечающий за клик по элементу страницы - onClick, и если к этому обработчику события привязан код JavaScript, то он будет выполнен.
Для наглядности давайте выполним очень интересный и нужный эффект: при клике пользователем по определенному тексту, ниже будет появляться какой-либо текст (например, подробное описание или дополнительная информация).
Как уже я говорил выше, за щелчок по элементу веб-страницы следит обработчик события onClick. Проще всего его привязать прямо к необходимому тегу, указав его в качестве атрибута и передав ему код JavaScript, который должен быть выполнен при вызове этого обработчика. Обработчики событий можно указывать большинству тегов, мы выберем тег SPAN:

В этом примере обработчику события передана функция, хотя в общем случае можно передавать любой код JavaScript. Функцию мы напишем далее. Текст, который должен появиться будет находиться в блоке div и сделаем его первоначально невидимым. Для этого воспользуемся стилевым свойством display, которому зададим значение none. При клике по тексту заключенному в теге SPAN, будем менять значение свойства display: либо none на block, либо block на none. На данном этапе получим

С помощью идентификатора id="info_text" в последующем найдем нужный нам блок div. Теперь можно написать функцию clickText()

В функции вроде все просто, только прокомментирую, что в переменную obj_div помещается объект блока div, со свойствами которого и работаем. Теперь можно написать результирующий код, добавив немного оформления:

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

 

Реакция на наведение курсора мыши

 

Для того чтобы реализовать реакцию сценария JavaScript на наведение на какой-либо элемент HTML-документа, нужно воспользоваться обработчиками событий:

• onMouseOver - обрабатывает событие: пользователь передвинул указатель мыши на элемент;
  
• onMouseOut - обрабатывает событие: пользователь убрал указатель мыши с элемента.

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

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

В этом примере мы использовали оператор this, который содержит объект текущего элемента. В нашем случае оператор this содержит объект блока div, поэтому мы смело использовали его для изменения свойств. Использование оператора this значительно облегчает написание скриптов, так как получить доступ к объекту не составляет особого труда, делает код компактнее. Сравните с предыдущим примером, где для получения объекта необходимого блока div использовали конструкцию document.getElementById(идентификатор), предварительно указав идентификатор в атрибуте Id для нужного блока div.

 

Динамическое отображение текста страницы

 

Есть еще большое количество обработчиков событий, о которых мы еще поговорим на страницах этого сайта, теперь давайте рассмотрим способы изменения содержимого (текста) страницы. Для подобных целей удобно использовать свойства элемента innerHTML и innerText. Эти два свойства доступны как для чтения, так и для записи. Рассмотрим работу с ними подробнее на следующем примере: пусть при наведении курсора мыши на блок с текстом, текст меняется.
Для отслеживания событий наведение курсора на элемент и увода с элемента будем использовать уже знакомые нам обработчики событий onMouseOver и onMouseOut.

При наведении курсора мыши на блок будет выполняться функция newText(), которая заменит текст в блоке и некоторые свойства. При уводе курсора с элемента будет вызываться функция, которая отменит все изменения.

Изменить текст в элементе, можно изменив значение свойства innerHTML или innerText соответствующего объекта. Если надо определить объект по идентификатору, то можно записать следующим образом

Свойства innerHTML отличается от innerText, тем, что при использовании свойства innerHTML можно использовать теги HTML (то есть будет текст форматироваться тегами при выводе на экран), а при использовании innerText теги будут отображены как обычный текст (и естественно текст не будет форматироваться тегами). Но также нужно учитывать, что свойство innerText не поддерживается браузером Mozilla Firefox.
С помощью рассмотренных нами простых способов создания динамических эффектов, можно создавать более сложные манипуляции и эффекты с содержимым страницы.