от левого края экрана, сдвигая его вправо.

Метод offset принимает объект, который может содержать свойство

left для задания смещения от левого края или свойство top для сме-

щения от верха страницы. В данном случае мы выбрали свойство left

и присвоили ему значение переменной leftOffset. Если бы требовалось

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

значение. Скажем, вызов $("#heading").offset({ left: 100 }) поме-

стит заголовок на расстоянии 100 пикселей от левого края страницы.

В строке  мы увеличили leftOffset на 1. Чтобы убедиться, что

заголовок не уполз слишком далеко, в строке  выполняется проверка —

leftOffset больше 200? Если это так, сбрасываем значение до 0. Наконец,

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

функцию moveHeading и число 30 (что означает 30 миллисекунд).

Этот код вызывает moveHeading каждые 30 миллисекунд, то есть

примерно 33 раза в секунду. При каждом вызове moveHeading пере-

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

используется, чтобы задать положение заголовка. Поскольку функция

вызывается периодически, а leftOffset каждый раз увеличивается

на 1, заголовок плавно движется по странице, смещаясь на 1 пиксель

каждые 30 миллисекунд.

ПОПР ОБУ ЙТЕ !

Вы можете ускорить анимацию, увеличив приращение leftOffset в функции

moveHeading либо уменьшив время между вызовами moveHeading.

Как удвоить скорость движения заголовка? Попробуйте двумя способами.

Чем отличаются результаты?

10. Интерактивное программирование 161

Реакция на действия пользователя

Как мы выяснили, один из способов управления временем запуска

кода — применение функций setTimeout и setInterval, которые

вызывают функцию через фиксированный промежуток времени. Другой

способ — выполнять код при определенных действиях пользователя,

таких как клик мышкой, нажатие клавиши или просто перемещение

мышки. Тогда пользователи смогут взаимодействовать с вашей странич-

кой, получая соответствующий отклик.

Каждый раз, когда вы совершаете действие — кликаете, вводите текст

или двигаете мышку, — в браузере возникает нечто под названием событие .

Это способ, которым браузер сообщает «случилось вот это». На события

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

ром это событие происходит. Добавляя обработчик, вы говорите JavaScript:

«Если произойдет это событие, вызови эту функцию». Например, если вы

хотите вызывать функцию при клике по заголовку, добавьте к элементу

заголовка обработчик события. Сейчас мы разберемся, как это делается.

Реакция на клики

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

Click — клик

click . С помощью jQuery ничего не стоит задать этому событию обработ-

чик. Откройте созданный ранее файл interactive.html , выберите File

Save As, чтобы сохранить его под именем clicks.html , и замените содержи-

мое второго элемента script таким кодом:

Click handler —

 var clickHandler = function (event) {

обработчик

 console.log("Клик! " + event.pageX + " " + event.pageY);

клика

};

 $("h1").click(clickHandler);

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

аргументом event. При ее вызове в аргументе event будет передан объ-

ект, содержащий информацию о событии, например о том, в каком месте

был сделан клик. В строке , в коде функции-обработчика, мы исполь-

зовали console.log для вывода свойств pageX и pageY объекта event.

Эти свойства хранят x- и y- координаты события — иными словами, они

сообщают, где именно на странице произошел клик.

Наконец, в строке  мы активировали обработчик кликов. Код

$("h1") находит элемент h1, а вызов $("h1").click(clickHandler)

означает: «В случае клика по элементу h1 вызови функцию clickHandler

и передай ей объект события». В данном случае обработчик извлекает

из объекта event информацию об x- и y- координатах клика.

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

Перезагрузите нашу модифицированную страницу

в браузере и кликните по элементу заголовка. При каждом

клике в консоли должна появиться новая строка, как пока-

зано ниже. Каждая из строк оканчивается двумя числами:

x - и y -координатами клика.

Клик! 88 43

Клик! 63 53

Клик! 24 53

Клик! 121 46

Клик! 93 55

Клик! 103 48

0

3

5

0

x

КООРД ИНАТЫ В БРАУЗЕРЕ

В веб-браузере, как и в большинстве других сред

2

графического программирования, нулевая пози-

(3, 2)

ция x - и y -координат находится в верхнем левом

углу экрана. По мере роста x -координаты точка

смещается к правому краю страницы, а по мере

5

роста y -координаты — к низу страницы (рис. 10.3).

y

Рис. 10.3. Система координат

в браузере, показан клик

в координатах (3, 2)

Событие mousemove

Событие mousemove возникает всякий раз при перемещении мышки. Mouse move —

Создайте файл с именем mousemove.html и введите туда следующий код:

перемещение

мышки

Перемещение мышки

Привет, мир!

 $("html").mousemove(function (event) {

 $("#heading").offset({

10. Интерактивное программирование 163

left: event.pageX,