Введение

Анимация в JavaScript

Заключение

Законченный пример обработки событий

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

addEvent(window, "load", function () { var contactForm = document.getElementById("contact-form"); if (contactForm) { addEvent(contactForm, "submit", function (evt) { var firstName = document.getElementById("first-name"); var lastName = document.getElementById("last-name"); if (firstName && lastName) { if (firstName.value.length === 0 || lastName.value.length === 0) { alert("You have to fill in all fields, please."); evt.preventDefault(); } } }); }});

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

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

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

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

Лекция имеет следующее содержание:

Простой пример: метод угасания желтого цвета
Анимация с помощью библиотек JavaScript
Более сложный пример: перемещение и изменение размера
Переходы CSS
Заключение
Контрольные вопросы