Элементы input и textarea

Послание № 13

Таймеры в JS

Функции setTimeout() и setInterval() позволяют зарегистрировать функцию, которая будет вызываться один или более раз через определенные интервалы времени. Это очень важные функции для клиентского JavaScript, и поэтому они были определены как методы объекта Window, несмотря на то что являются универсальными функциями, не выполняющими никаких действий с окном.

Метод setTimeout() объекта Window планирует запуск функции через определенное число миллисекунд. Метод setTimeout() возвращает значение, которое может быть передано методу clearTimeout(), чтобы отменить запланированный ранее запуск функции.

function func() {

alert('Привет');

}

setTimeout(func, 1000);

Метод setInterval() похож на setTimeout(), за исключением того, что он автоматически заново планирует повторное выполнение через указанное количество миллисекунд:

setInterval(updateClock, 60000); // Вы­зы­вать updateClock() че­рез ка­ж­дые 60 сек.

Подобно setTimeout(), метод setInterval() возвращает значение, которое может быть передано методу clearInterval(), чтобы отменить запланированный запуск функции.

По исторически сложившимся причинам в первом аргументе методам setTimeout() и setInterval() допускается передавать строку. В этом случае строка будет интерпретироваться (как с применением функции eval()) через указанный интервал времени.

Спецификация HTML5 (и все броузеры, кроме IE) допускает передавать методам setTimeout() и setInterval() дополнительные аргументы после первых двух. Все эти дополнительные аргументы будут передаваться функции, вызов которой планируется этими методами. Однако если требуется сохранить совместимость с IE, эту возможность использовать не следует. Если методу setTimeout() указать величину интервала 0 миллисекунд, указанная функция будет вызвана не сразу, а «как только такая возможность появится», т. е. как только завершат работу все обработчики событий.

Отмена исполнения clearTimeout

Функция setTimeout возвращает числовой идентификатор таймера timerId, который можно использовать для отмены действия.

Синтаксис:

var timerId = setTimeout(...);

clearTimeout(timerId);

В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.

var timerId = setTimeout(function() { alert(1) }, 1000);

alert(timerId); // число - идентификатор таймера

clearTimeout(timerId);

alert(timerId); // всё ещё число, оно не обнуляется после отмены

Как видно из alert, в браузере идентификатор таймера является обычным числом.

Рабочий пример

Следующий код при запуске станет выводить сообщение каждые две секунды, пока не пройдёт 5 секунд:

// начать повторы с интервалом 2 сек

var timerId = setInterval(function() {

alert("тик");

}, 2000);

// через 5 сек остановить повторы

setTimeout(function() {

clearInterval(timerId);

alert('стоп');

}, 5000);

Работа с формами через JS

Элементы управления, такие как <form>, <input> и другие имеют большое количество своих важных свойств и ссылок.

Выбор формы и её элементов

Формы и элементы, содержащиеся в них, можно выбрать с помощью стандартных методов, таких как getElementById() и getElementsByTagName():

var fields = document.getElementById("address").getElementsByTagName("input");

В броузерах, поддерживающих querySelectorAll(), можно выбрать все радиокнопки или все элементы с одинаковыми именами, присутствующие в форме, как показано ниже:

// Все радиокнопки в форме с атрибутом

id="shipping" document.querySelectorAll('#shipping input[type="radio"]');

// Все радиокнопки с атрибу­том name="method" в форме с атрибутом

id="shipping" document.querySelectorAll('#shipping input[type="radio"][name="method"]');

Еще способ выбрать фору

С установленным атрибутом name или id можно также выбрать другими способами.

с атрибутом name="address" можно выбрать любым из следующих способов:

window.address // Не­на­деж­ный: ста­рай­тесь не ис­поль­зо­вать

document.address // Мо­жет при­ме­нять­ся толь­ко к фор­мам с ат­ри­бу­том name document.forms.address // Яв­ное об­ра­ще­ние к фор­ме с ат­ри­бу­том name или id

document.forms[n] // Не­на­деж­ный: n - по­ряд­ко­вый но­мер фор­мы

Элементы input и textarea

Для большинства типов input значение ставится/читается через свойство value.

input.value = "Новое значение";

textarea.value = "Новый текст";

Важно!

Не используйте textarea.innerHTML потому что оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.

Текущее «отмеченное» состояние для checkbox и radio находится в свойстве checked(true/false).

if (input.checked) {

alert("Чекбокс выбран");

}