Таймеры setTimeout() и setInterval().
Лабораторная работа №5. События и функции JavaScript
События.
Любое приложение выполняет те или иные действия, откликаясь на различные события. Для того, чтобы скрипт отреагировал на событие – нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют по следующему принципу «on+имя_события». Например, onclick. JavaScript – однопоточный язык, поэтому даже при обработке нескольких событий, возникающих одновременно на элементе, обработчики всегда выполняются последовательно.
Виды кликов-событий:
mousedown – нажатие на кнопку мыши
mouseup – нажатая кнопка отпущена
click – клик мыши левой кнопкой мыши
dbclick – двойной клик левой кнопкой мыши
contextmenu – клик правой кнопкой мыши
События mousedown и mouseup в основном используются, когда идет нажатие на кнопку, перемещение, а потом мышь отпускается. Например, при выделении текста, или переносе объекта.А события click и dblclick в основном нужны для работы с простыми кликами. Клик происходит при последовательных mousedown->mouseup на одном и том же объекте. Если передвинуть мышь куда-то между mousedown и mouseup, то событие click не произойдет. Событие contextmenu возникает при правом клике мышью, и по умолчанию вызывает контекстное меню. Не на всех браузер показ меню можно отключить.
Cводная таблица по возможности отключения родной реакции браузера:
| Левая кнопка | Средняя кнопка | Правая кнопка | |
| Internet Explorer | Да | Да | Да |
| Firefox | Да | Править конфиг | Да |
| Safari Win | Да | Да | Да |
| Opera | Да | Нет | Нет |
|
|
|
Назначить обработчик на конкретное событие можно следующими способами:
1) Через атрибут HTML-тега. Обработчик указывается в виде встроенной записи в атрибуте.
Пример,
<div class= ”cell” id=”1” onclick= “alert (‘Это первая ячейка ’)”> </div>
Такой способ использования обработчиков событий обладает простотой и наглядностью. Однако, когда обработчик занимает более одной строки, читабельность резко падает.
2) Через свойство объекта. Обработчик указывается через свойство on+имя_события соответствующего элемента. Для этого нужно получить элемент и назначить обработчик свойству. Получить элемент можно с использованием стандартных средств поиска элементов: getElementById, getElementByTagName, getElementbyName и т.д.
getElementById – метод объекта document, который возвращает ссылку на элемент, имеющий атрибут id с указанным значением. Если элемент с указанным элементов найден, метод вернет ссылку на этот элемент. Если на странице используется более одного элемента с указанным идентификатором, метод вернет ссылку на первый из них.
Пример, var element = document.getElementById (‘id’);
|
|
|
getElementByTagName – метод, который возвращает список элементов, учитывая имя тега.
Пример, получим все div-элементы:
var element = document.getElementByTagName (‘div’);
getElementsByName – метод, который возвращает все элементы с данным атрибутом name.
Пример, получим все элементы с именем age:
var elements = document.getElementsByName(‘age’);
Пример,
<div class= ”cell” id=”1”> </div>
document.getElementById (‘1’).onclick = function ()
{
alert(‘Это первая ячейка’);
}
В качестве значения аргумента функции onclick может быть вызов собственной функции с указанием параметров.
Функции.
Назначение функций – оптимизация кода, а именно вынесение кода в отдельный блок программы и использование его посредством вызова для текущего элемента при необходимости. Объявление собственной
функции - вначале идет ключевое слово function, после него идет имя функции, а затем список параметров в скобках (функция может и не приминать никакие параметры) и тело функции (код, который выполняется при ее вызове).
function имя_функции (аргумент1, аргумент2 ….. аргументN)
{
//действия;
}
Функция может содержать локальные переменные, то есть они видны только внутри тела функции. Доступ к глобальным переменным возможен как на чтение, так и на запись.
|
|
|
Особенности объявления собственных функций:
· Передаваемые значения копируются в параметры функции и становятся локальными переменными.
· Параметры функции копируются в её локальные переменные.
· Можно объявить новые локальные переменные при помощи var.
· Значение возвращается оператором return ....
· Вызов return тут же прекращает функцию.
· Если return; вызван без значения, или функция завершилась без return, то её результат равен undefined.
Рекурсивные функции.
В теле функции могут быть вызваны другие функции для выполнения подзадач. Частный случай подвызова – когда функция вызывает сама себя. Это называется рекурсией. Рекурсия используется для ситуаций, когда выполнение одной сложной задачи можно представить как некое действие в совокупности с решением той же задачи в более простом варианте.
Стандартные функции JavaScript для работы со случайными числами.
Встроенная функция в JavaScript – Math.random(). Эта функция всегда возвращает число между 0 и 1.
Пример,
var a = Math.random();
document.write (a);
Недостаток использования такой вариации функции заключается в том, что функция создает число в ограниченном промежутке. Расширение диапазона, к примеру, от 0 до 100 будет выглядеть так:
|
|
|
Пример,
var a = Math.random()*100;
document.write (a);
Особенностью использования этой функции заключается в том, что она создает число вещественного типа. Если необходимо сгенерировать целое число, то можно воспользоваться методом округления Math. round ():
Пример,
var a = Math.round (Math.random()*100);
document.write (a);
Существует еще одна функция округления только в меньшую сторону:
Пример,
var a = Math.floor (3.767);
document.write (a);
Результатом выполнения такой функции является число 3.
Для получения случайного целого числа в диапазоне от min до max можно воспользоваться следующей функцией:
function a (min,max)
{
return Math.round (Math.random()*(max-min)+min);
}
Таймеры setTimeout() и setInterval().
Существует две функции отложенного запуска setTimeout() и setInterval(). Отличие этих функций заключается в том, что первая запускает код единожды, вторая – через заданный промежуток времени.
Синтаксис этих функций:
setTimeout (аргумент1, аргумент2);
setInterval (аргумент1, аргумент2);
Обе эти функции в качестве первого аргумента принимают инструкцию, которую необходимо выполнить, в качестве второго – задержка в миллисекундах.
Принцип работы этих функций заключается в том, что делается отметка о необходимости выполнения действий через определенный промежуток времени. При этом скрипт продолжает свою работу, то есть не происходит задержка выполнения кода на указанное количество миллисекунд.
В JavaScript существует две функции для отложенного запуска кода: setInterval () и setTimeout(). Важное отличие этих функций от функций sleep в других языках заключается в том, что sleep приостанавливает выполнение программы на определенный промежуток времени Формат записи этих функций одинаков. Они обе принимают два аргумента.
setInterval (функция, задержка в миллисекудах);
Действия setTimeout и setInterval можно отменить функциями clearTimeout() и clearInterval().
Рассмотрим пример: при наведении мыши на элемент необходимо через две секунды показать сообщение. Однако, если в течении этих двух секунд указатель мыши был убран с элемента, то сообщение показывать не нужно.
<body><div id= "test"></div>
</body>
var tmId;
var t= document.getElementById('test');
t.onmouseover = function (){
tmId=setTimeout (' alert ("Orange block")', 2000);
}t.onmouseout =function () {
clearTimeout(tmId);
} Функции setTiomeout() и setInterval() «делают отметки» о том, что определенный код нужно запустить через какое-то количество миллисекунд, а скрипт продолжает работать. *Выполнение кода происходит не через строго заданный промежуток времени, а не раньше, чем через этот промежуток. Если в нужный момент времени будет выполняться какой-либо код, то интерпретатор дождется его окончания, после чего запустит код по таймеру.
Рассмотрим пример простой анимации, а именно движение оранжевого квадратика по горизонтальной оси. (слева-направо MarginTop,сверху-вниз -marginLeft).
setInterval() будет запускать функцию через указанный промежуток времени. Эта функция вызывается повторно вне зависимости от того, закончилось ли выполнение предыдущей функции или нет. В тех случаях, когда функция громоздкая возможно переполнение стека вызовов, так как функции будут становится в очередь. Минимальное временя, которое можно устанавливать – 4 миллисекунды, при установке значения 0 миллисекунд, то скорее всего это приведет либо к ошибке, либо к другим сбоям.
В различных браузерах эта функция ведет себя по-разному. При сворачивании браузера, где-то анимация будет продолжаться, а где-то будет приостанавливаться.
Пример, рассмотрим реализацию движения оранжевого прямоугольника по экрану с использованием таймера.
Для этого создадим 3 файла: index.html (1), style.css (2), js.js (3)
(1)
(2)
(3)
Создайте проект с произвольным именем и указанными файлами, после запустите и просмотрите результат в браузере.
Задание.
Реализовать падающий снег на фоне леса.
Дата добавления: 2021-05-18; просмотров: 46; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!