JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016

"main-heading"
>Привет, мир!

148
Часть II. Продвинутый JavaScript пользователем текст в переменной newHeadingText. И наконец, в строке

присвоили сохраненное в newHeadingText значение свойству innerHTML элемента headingElement.
Открыв этот документ в браузере, вы должны увидеть диалог prompt, как на рис. 9.2.
Рис. 9.2. Наша страничка с диалогом
prompt
Введите в этом диалоге строку «JAVASCRIPT ЭТО ЗДОРОВО» и нажмите «ОК». Заголовок должен тотчас поменяться — как на рис. 9.3.
Рис. 9.3. Наша страничка после смены заголовка
Обращаясь к свойству innerHTML, можно поменять содержимое любого элемента DOM через JavaScript-код.

9. DOM и jQuery
149
Работа с деревом DOM через jQuery
Встроенные в браузер методы DOM всем хороши, но пользоваться ими бывает нелегко, поэтому многие программисты применяют специальную библиотеку под названием jQuery. jQuery — это набор инструментов (в основном функций), которые сильно упрощают работу с DOM-элементами. Подключив эту библиотеку к нашей страничке, мы сможем вызывать ее функции и методы в дополнение к функциям и методам, встроенным в JavaScript и в браузер.
Подключаем jQuery к HTML-странице
Прежде чем воспользоваться библиотекой jQuery, нужно, чтобы браузер ее загрузил, для чего достаточно одной строки HTML-кода:

Обратите внимание, что у тега

Src
— source — источник

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

9. DOM и jQuery
151
внутрь элемента body, сразу перед закрывающим тегом. На рис. 9.4 показано, как будет выглядеть после этого наша страничка.
Рис. 9.4. Наш документ с добавленным элементом
Также appendможно использовать в цикле forдля добавления нескольких элементов:
for
(
var i
=
0;
i
<
3;
i
++
)
{
var hobby
=
prompt
(
"Назови одно из своих хобби!"
);
$
(
"body"
).
append
(
"
"
+
hobby
+
"
"
);
}
Этот цикл повторяется трижды. При каждом повторении создается диалог prompt, запрашивающий у пользователя его хобби, после чего строка с хобби помещается между тегов и передается методу append, который добавляет ее в конец элемента body. Введите этот код в наш документ dom.html и загрузите его в браузер. Результат должен выглядеть как на рис. 9.5.
Рис. 9.5. Элементы, добавленные в цикле
Hobby
— хобби

152
Часть II. Продвинутый JavaScript
Анимация элементов средствами jQuery
На многих сайтах при показе и скрытии частей страницы используется анимация. Например, добавляя на страницу новый параграф с текстом, вы можете сделать так, чтобы он проявлялся постепенно, а не весь целиком сразу.
С помощью jQuery анимировать элементы совсем не сложно. К примеру, чтобы элемент медленно исчезал, мы можем воспользоваться методом fadeOut. Замените содержимое второго элемента script в dom.html на такой код:
$
(
"h1"
).fadeOut(3000);
Чтобы найти все элементы h1, мы использовали функцию $.
Поскольку в dom.html элемент h1 всего один (это заголовок с текстом
«Привет, мир!»), именно его мы и получим в виде jQuery-объекта.
Вызывая для этого объекта метод fadeout(3000), мы запускаем затухание заголовка до полного его исчезновения в течение трех секунд.
(Аргумент fadeOut передается в миллисекундах, то есть тысячных долях секунды, поэтому значение 3000 даст анимацию в три секунды длиной.)
Когда вы перегрузите страницу с этим кодом, вы увидите, как элемент h1 постепенно исчезает.
Цепной вызов и анимация на jQuery
Если вызвать метод jQuery-объекта, этот метод, как правило, вернет первоначальный объект — тот, для которого он и был вызван.
Например,
$("h1") возвращает jQuery-объект со всеми элементами h1, а
$("h1").fadeOut(3000) возвращает все тот же jQuery-объект с элементами h1. Тогда изменить текст заголовка и включить его затухание можно так:
$
(
"h1"
).
text
(
"Этот текст скоро исчезнет"
).fadeOut(3000);
Подобный вызов нескольких методов подряд называют цепным
вызовом.
Можно запустить несколько анимаций одного и того же элемента.
Например, использовать цепной вызов методов fadeOut и fadeIn, чтобы элемент исчез и тут же снова проявился:
$
(
"h1"
).fadeOut(3000).fadeIn(2000);
Fade out
— исчезать
Fade in
— постепенно усиливаться

9. DOM и jQuery
153
Анимация fadeIn заставляет невидимый элемент проявиться. jQuery понимает, что, когда вы делаете цепной вызов двух анимаций, вы, скорее всего, хотите, чтобы они сработали по очереди, одна после другой. В результате элемент h1 будет затухать в течение трех секунд, а затем в течение двух секунд проявляться.
В jQuery есть еще два метода для анимации, похожие на fadeOut и fadeIn, — это slideUp и slideDown.
При вызове slideUp элементы исчезают, уплывая вверх, а при вызове slideDown появляются, опускаясь сверху.
Замените второй элемент script в dom.html на следующий код и перегрузите страницу:
$
(
"h1"
).slideUp(1000).slideDown(1000);
Здесь мы нашли элемент h1, скрыли его с эффектом уплывания вверх в течение одной секунды, а затем показали снова, опустив сверху вниз за одну секунду.
ПОПР ОБУ ЙТЕ !
Мы применяли fadeIn, чтобы показывать невидимые элементы. Но что если вызвать fadeIn для элемента, который уже видим, и что будет с элементом, который следует за элементом, находящимся в процессе анимации?
К примеру, добавьте в dom.html новый элемент p сразу после заголовка.
Используйте slideUp и slideDown, чтобы скрыть и показать элемент h1, и посмотрите, как поведет себя элемент p. А если использовать fadeOut и fadeIn?
Что произойдет, если использовать fadeOut и fadeIn для одного и того же элемента, но без цепного вызова? Например:
$
(
"h1"
).fadeOut(1000);
$
(
"h1"
).fadeIn(1000);
Попробуйте поместить этот код внутрь цикла for, настроенного на пять повторов. Что получится?
Как считаете, что делают jQuery-методы show и hide? Проверьте свои догадки на практике. Как может пригодиться hide, если нужно, чтобы уже видимый элемент постепенно проявился?
Slide up
— здесь
«поднять»
Slide down
— здесь
«опустить»
Show
— показать
Hide
— скрыть

154
Часть II. Продвинутый JavaScript
Что мы узнали
В этой главе мы узнали, как модифицировать HTML-страницы из JavaScript, работая с элементами DOM. Как видите, jQuery дает более мощные способы поиска элементов, а также их изменения и даже анимации. Также мы узнали об HTML-атрибуте id, который позволяет присвоить элементу уникальный идентификатор.
В следующей главе мы выясним, как управлять моментом запуска
JavaScript-кода — допустим, чтобы он выполнялся по таймеру или при нажатии на кнопку. Также мы разберемся, как выполнять фрагмент кода многократно, с паузой между запусками — например, чтобы раз в секунду обновлять показания времени.

УПРА ЖНЕНИЯ
Выполните эти упражнения, чтобы попрактиковаться в использовании jQuery и DOM.
#1. Перечислите своих друзей (и сделайте их лучшими!)
Создайте массив с именами нескольких друзей. В цикле for создайте для каждого имени по одному элементу p и добавьте эти элементы в конец
, вызывая jQuery-метод append.
С помощью jQuery измените текст элемента h1, чтобы вместо "Привет, мир!" там было "Мои друзья". Используйте метод hide и метод fadeIn, чтобы имена плавно возникали на экране.
Теперь измените созданные вами элементы p, добавив после каждого имени слово "лучший!". Подсказка: если найти сразу все элементы p с помощью $("p"), метод append можно вызвать для них всех разом.
#2. Мигающий заголовок
Как с помощью fadeOut и fadeIn сделать так, чтобы заголовок мигнул пять раз с интервалом в секунду? Как сделать это в цикле for? А теперь измените цикл, чтобы заголовок появлялся и исчезал в первый раз за секунду, потом за две, потом за три и т. д.
#3. Отложенная анимация
Для задержки анимации можно воспользоваться методом delay.
С помощью delay, fadeOut и fadeIn заставьте какой-нибудь элемент плавно исчезнуть, а затем, через пять секунд, снова проявиться.
#4. Метод fadeTo()
Поэкспериментируйте с методом fadeTo. Первый его аргумент — число миллисекунд, как и у прочих методов анимации, а второй — число от 0 до 1. Что произойдет, если запустить следующий код?
$
(
"h1"
).fadeTo(2000, 0.5);
Как думаете, что делает второй аргумент? Попробуйте разные его значения в диапазоне от 0 до 1, чтобы выяснить, зачем он нужен.
Delay
— отложить

156 10
И Н Т Е РА К Т И В Н О Е
П Р О Г РА М М И Р О В А Н И Е
До сих пор JavaScript начинал работу сразу же после загрузки страницы, приостанавливаясь лишь при вызове некоторых функций, таких как alert или confi rm. Однако порой не нужно выполнять весь код сразу — что если мы хотим запустить фрагмент кода спустя какое-то время или в ответ на действие пользователя?
В этой главе мы изучим разные способы управлять тем, когда именно выполняется наш код. Это называется интерактивным программирова-
нием. Оно позволяет создавать интерактивные веб-страницы, которые могут изменяться со временем и реагировать на действия пользователей.
Отложенное выполнение кода и setTimeout
Вместо того чтобы вызывать функцию сразу, можно попросить JavaScript сделать это спустя определенное время. Такого рода отложенное выполнение называется запуском по таймеру, и для этого в JavaScript есть функция setTimeout. Данная функция принимает два аргумента
(см. рис. 10.1): функцию, которую надо будет вызвать при срабатывании таймера, и само время ожидания в миллисекундах.
Set timeout
— установить время задержки

157
setTimeout
(func, timeout)
Сколько миллисекунд ждать перед запуском функции
Функция, которую надо выполнить через 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
— отменить задержку

158
Часть II. Продвинутый JavaScript
Отмена действия таймера
После задания отложенного вызова функции с помощью setTimeout может выясниться, что вызывать эту функцию больше не нужно.
Представьте, что вы поставили будильник, чтобы он напомнил вам о домашнем задании, однако в итоге сделали все заранее и теперь хотите отключить будильник. Для отмены действия таймера используется функция clearTimeout c ID таймера
(полученным ранее от setTimeout) в качестве аргумента.
Предположим, вы установили таймер «сделай домашку» следующим образом: var doHomeworkAlarm
=
function
()
{
alert
(
"Эй! Пора делать домашку!"
);
};

var timeoutId
=
setTimeout
(doHomeworkAlarm, 60000);
Функция doHomeworkAlarm создает диалог alert, напоминающий о домашке. Вызов setTimeout(doHomeworkAlarm, 60000) сообщает JavaScript, что функцию doHomeworkAlarm нужно вызвать через 60 000 миллисекунд (то есть 60 секунд). В строке

мы вызвали setTimeout и сохранили ID таймера в новой переменной timeoutID.
Теперь, чтобы отменить действие таймера, достаточно передать его ID функции clearTimeout, вот так:
clearTimeout
(timeoutId);
Теперь setTimeout не будет вызывать функцию doHomeworkAlarm.
Многократный запуск кода и setInterval
Функция setInterval похожа на setTimeout, однако она вызывает переданную ей функцию повторно через определенные промежутки
(интервалы) времени. Скажем, если вы хотите с помощью JavaScript обновлять показания часов, используйте setInterval, чтобы функция обновления вызывалась раз в секунду.
SetInterval принимает два аргумента: функцию и интервал времени в миллисекундах, как показано на рис. 10.2.
Do homework alarm
— здесь будильник
«сделай домашку»
Set interval
— задать интервал

10. Интерактивное программирование
159
setInterval
(func, interval)
Сколько миллисекунд должно пройти между вызовами
Функция, которую нужно вызывать каждые interval миллисекунд
Рис. 10.2. Аргументы
setInterval
Например, так можно раз в секунду выводить в консоль сообщение:

var counter
=
1;

var printMessage
=
function
() { console log
(
"Ты смотришь в консоль уже "
+
counter
+
" сек"
);

counter
++
;
};

var intervalId
=
setInterval
(printMessage, 1000);
Ты смотришь в консоль уже 1 сек
Ты смотришь в консоль уже 2 сек
Ты смотришь в консоль уже 3 сек
Ты смотришь в консоль уже 4 сек
Ты смотришь в консоль уже 5 сек
Ты смотришь в консоль уже 6 сек

clearInterval(intervalId);
В строке

мы создали новую переменную counter и присвоили ей значение 1. С помощью этой переменной мы будем вести учет времени
(в секундах).
В строке

мы создали функцию printMessage, которая выполняет две задачи. Во-первых, она печатает сообщение о том, сколько секунд вы уже смотрите в консоль. Во-вторых, далее в строке

она увеличивает переменную counter.
Затем, в строке

, мы вызвали setInterval, передав ей функцию printMessage и число 1000, что означает «вызывай printMessage каждые
1000 миллисекунд». Так же как setTimeout возвращает ID таймера, setInterval возвращает ID
интервала, который мы сохранили в переменной intervalId. Далее этот ID можно использовать для отмены периодического вызова функции printMessage — что мы и сделали в строке

с помощью функции clearInterval.
Counter
— счетчик
Print message
— напечатать сообщение

160
Часть II. Продвинутый JavaScript
ПОПР ОБУ ЙТЕ !
Измените предыдущий пример так, чтобы сообщение выводилось каждые пять секунд, а не раз в секунду.
Анимация элементов с помощью setInterval
Отложенный вызов через setInterval можно использовать для анимации элементов в браузере. По сути, для этого нужно создать функцию, которая слегка сдвигает элемент, и затем передать ее setInterval, установив небольшое время повтора. При условии, что каждый сдвиг будет достаточно мал и величина интервала тоже, анимация получится очень плавной.
Давайте анимируем положение фрагмента текста в HTMLдокументе, двигая его по горизонтали. Создайте файл interactive.html с таким содержимым: