JavaScript. Взаимодействие с пользователем.

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

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

В JS можно вызывать функцию спустя какое-то время, а не сразу. Для этого есть функция setTimeout.

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

Всплывающее окно появляется не сразу, а с задержкой в 3 секунды. Цифра, которая появляется при вызове функции показывает ID (идентификатор) таймера.

Многократный запуск кода и setInterval

Функция setInterval вызывает функцию повторно через определенные промежутки времени. Скажем, если вы хотите через определенные промежутки времени обновлять показания часов, используйте setInterval.

пример вывода в консоль сообщения каждую секунду

Анимация элементов с помощью setInterval

Отложенный вызов через setInterval можно использовать для анимации элементов в браузере. По сути, нам нужно создать функцию, которая слегка сдвигает элемент, и затем передать её setInterval, установив небольшое время повтора. При условии, что каждый сдвиг будет очень мал и величина интервала тоже, анимация получится очень плавной.

Воспользуемся редактором html (Sublime).

При выполнении данного фрагмента кода вы увидите, как «Привет, мир» будет плавно перемещаться налево, а затем, при достижении значение 200, будет возвращен в исходное состояние и процедура повториться заново.

$ («head») — используется нами для поиска элемента с id = head.

Попробуйте увеличить расстояние и скорость перемещения фразы по странице.

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

Вызов функции может быть обусловлен не только запуском по времени, но и действиями пользователя., например по клику мышки, или клавиши клавиатуры, или просто движение мышки, вообще по любым действиям пользователя на странице.

Когда пользователь кликает в браузере — возникает событие click. С помощью jQuery ничего не стоит задать этому событию обработчик. Перепишем предыдущий пример:

Цифры, которые вы видите после слова Клик! обозначают координаты клика. В веб-браузере, нулевая позиция х и у находится в левом верхнем углу.

Событие mouseMove

Событие mouseMove возникает всякий раз при перемещении мышки. Наберите следующий код.

 

Откройте страницу и посмотрите что получится.

Задания.

  1. Измените код таким образом, чтобы заголовок следовал не за мышкой, а за кликами мышки.
  2. Измените анимацию перемещения заголовка h1, чтобы он двигался по квадрату размерами 200*200.
  3. Остановите анимацию из задания 2 по клику мышки.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Анти-спам: выполните заданиеWordPress CAPTCHA