"heading"
>Привет, мир!
10. Интерактивное программирование161 leftOffset = 0; } }; setInterval (moveHeading, 30); Открыв наш документ в браузере, вы увидите, как элемент заголовка плавно сдвигается вправо, пока не пройдет расстояние в 200 пикселей. Затем он резко вернется на свое место, и все начнется снова. Разберемся, как это работает. В строке мы создали переменную leftOffset (отступ слева), которой далее воспользуемся для задания позиции заголовка «Привет, мир!». Ее начальное значение — 0. Это значит, что заголовок начнет свое движение с левого края страницы. Далее в строке мы создали функцию moveHeading, чтобы вызывать ее через setInterval. В коде moveHeading, в строке , мы используем $("#heading") для поиска элемента с id "heading" (это элемент h1) и вызываем метод offset, чтобы задать смещение заголовка от левого края экрана, сдвигая его вправо. Метод 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. Как удвоить скорость движения заголовка? Попробуйте двумя способами. Чем отличаются результаты? 162 Часть II. Продвинутый JavaScript Реакция на действия пользователяКак мы выяснили, один из способов управления временем запуска кода — применение функций setTimeout и setInterval, которые вызывают функцию через фиксированный промежуток времени. Другой способ — выполнять код при определенных действиях пользователя, таких как клик мышкой, нажатие клавиши или просто перемещение мышки. Тогда пользователи смогут взаимодействовать с вашей страничкой, получая соответствующий отклик. Каждый раз, когда вы совершаете действие — кликаете, вводите текст или двигаете мышку, — в браузере возникает нечто под названием событие. Это способ, которым браузер сообщает «случилось вот это». На события можно подписываться, добавляя обработчик события к элементу, в котором это событие происходит. Добавляя обработчик, вы говорите JavaScript: «Если произойдет это событие, вызови эту функцию». Например, если вы хотите вызывать функцию при клике по заголовку, добавьте к элементу заголовка обработчик события. Сейчас мы разберемся, как это делается. Реакция на клики Когда пользователь кликает по элементу в браузере, возникает событие click. С помощью jQuery ничего не стоит задать этому событию обработчик. Откройте созданный ранее файл interactive.html, выберите File Save As, чтобы сохранить его под именем clicks.html, и замените содержимое второго элемента script таким кодом: 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-координатах клика. Click handler — обработчик клика Click — клик 10. Интерактивное программирование 163 Перезагрузите нашу модифицированную страницу в браузере и кликните по элементу заголовка. При каждом клике в консоли должна появиться новая строка, как показано ниже. Каждая из строк оканчивается двумя числами: x- и y-координатами клика. Клик! 88 43 Клик! 63 53 Клик! 24 53 Клик! 121 46 Клик! 93 55 Клик! 103 48 КООРД ИНАТЫ В БРАУЗЕРЕ В веб-браузере, как и в большинстве других сред графического программирования, нулевая позиция x- и y-координат находится в верхнем левом углу экрана. По мере роста x-координаты точка смещается к правому краю страницы, а по мере роста y-координаты — к низу страницы (рис. 10.3). Событие mousemove Событие mousemove возникает всякий раз при перемещении мышки. Создайте файл с именем mousemove.html и введите туда следующий код:
 перейти в каталог файлов
| 
Скачать 5.87 Mb.