Ник Морган - JavaScript для детей. Самоучитель по программированию

из JavaScript, работая с элементами DOM. Как видите, jQuery дает

более мощные способы поиска элементов, а также их изменения

и даже анимации. Также мы узнали об HTML-атрибуте id, который

позволяет присвоить элементу уникальный идентификатор.

В следующей главе мы выясним, как управлять моментом запуска

JavaScript-кода — допустим, чтобы он выполнялся по таймеру или при

нажатии на кнопку. Также мы разберемся, как выполнять фрагмент

кода многократно, с паузой между запусками — например, чтобы раз

в секунду обновлять показания времени.

154 Часть II. Продвинутый JavaScript

УПРА ЖНЕНИЯ

Выполните эти упражнения, чтобы попрактиковаться в исполь-

зовании jQuery и DOM.

#1. Перечислите своих друзей (и сделайте их лучшими!)

Создайте массив с именами нескольких друзей. В цикле for

создайте для каждого имени по одному элементу p и добавьте

эти элементы в конец , вызывая jQuery-метод append.

С помощью jQuery измените текст элемента h1, чтобы вместо

"Привет, мир!" там было "Мои друзья". Используйте метод

hide и метод fadeIn, чтобы имена плавно возникали на экране.

Теперь измените созданные вами элементы p, добавив после

каждого имени слово "лучший!". Подсказка: если найти сразу

все элементы p с помощью $("p"), метод append можно вызвать

для них всех разом.

#2. Мигающий заголовок

Как с помощью fadeOut и fadeIn сделать так, чтобы заголовок

мигнул пять раз с интервалом в секунду? Как сделать это в цикле

for? А теперь измените цикл, чтобы заголовок появлялся

и исчезал в первый раз за секунду, потом за две, потом за три

и т. д.

#3. Отложенная анимация

Для задержки анимации можно воспользоваться методом delay.

Delay —

С помощью delay, fadeOut и fadeIn заставьте какой-нибудь

отложить

элемент плавно исчезнуть, а затем, через пять секунд, снова

проявиться.

#4. Метод fadeTo()

Поэкспериментируйте с методом fadeTo. Первый его аргу-

мент — число миллисекунд, как и у прочих методов анимации,

а второй — число от 0 до 1. Что произойдет, если запустить сле-

дующий код?

$("h1").fadeTo(2000, 0.5);

Как думаете, что делает второй аргумент? Попробуйте разные

его значения в диапазоне от 0 до 1, чтобы выяснить, зачем он

нужен.

10

И Н Т Е РА К Т И В Н О Е

П Р О Г РА М М И Р О В А Н И Е

До сих пор JavaScript начинал работу сразу же после загрузки страницы,

приостанавливаясь лишь при вызове некоторых функций, таких как

alert или confi rm. Однако порой не нужно выполнять весь код сразу —

что если мы хотим запустить фрагмент кода спустя какое-то время или

в ответ на действие пользователя?

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

выполняется наш код. Это называется интерактивным программирова-

нием . Оно позволяет создавать интерактивные веб-страницы, которые

могут изменяться со временем и реагировать на действия пользователей.

Отложенное выполнение кода и setTimeout

Вместо того чтобы вызывать функцию сразу, можно попросить JavaScript

сделать это спустя определенное время. Такого рода отложенное выпол-

нение называется запуском по таймеру , и для этого в JavaScript есть

Set timeout —

функция setTimeout. Данная функция принимает два аргумента

устано-

(см. рис. 10.1): функцию, которую надо будет вызвать при срабатывании

вить время

таймера, и само время ожидания в миллисекундах.

задержки

156

Функция, которую надо выполнить

через timeout миллисекунд