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

Show —

догадки на практике. Как может пригодиться hide, если нужно, чтобы уже

показать

видимый элемент постепенно проявился?

Hide — скрыть

9. DOM и jQuery 153

Что мы узнали

В этой главе мы узнали, как модифицировать HTML-страницы

из 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 миллисекунд

setTimeout(func, timeout)

Сколько миллисекунд ждать

перед запуском функции

Рис. 10.1. Аргументы setTimeout

Следующий пример показывает, как открыть диалог alert через

setTimeout.

 var timeUp = function () {

alert("Время вышло!");

};

 setTimeout(timeUp, 3000);

1

В строке  мы создали функцию timeUp, открывающую диа-

лог alert с сообщением "Время вышло!". В строке  мы вызвали

setTimeout с двумя аргументами: функцией, которую нужно запустить

(timeUp), и числом миллисекунд (3000), которые должны пройти перед

ее запуском. По сути, мы говорим: «Подожди три секунды и вызови

timeUp». Сразу после вызова setTimeout(timeUp, 3000) ничего

не произойдет, однако через три секунды сработает функция timeUp,

открыв диалог alert.

Обратите внимание — вызов setTimeout вернул число 1. Это значе-

ние называют идентификатором (ID) таймера, который обозначает этот

конкретный таймер (отложенный вызов функции). Заметим, что возвра-

щаемое setTimeout значение может быть любым числом, ведь это про-

сто идентификатор. Вызовите setTimeout снова, и он вернет другой ID

таймера:

setTimeout(timeUp, 5000);

2

Полученный ID можно передать функции clearTimeout, чтобы Clear timeout —

отменить этот конкретный таймер. Об этом я расскажу ниже.

отменить

задержку

157

Отмена действия таймера

После задания отложенного вызова функции с помощью setTimeout

может выясниться, что вызывать эту функцию больше не нужно.