Jquery событие потери фокуса. События фокуса
Рассмотрим пример двух вариантов использования события onload в javascript:
Пример: По загрузке документа поместить в текстовое поле сообщение «Добрый день!» (запускать функцию)
Выполнение:
Скрипт:
function printText() { document.getElementById ("txt1" ) .value = "Добрый день!" ; } |
function printText() { document.getElementById("txt1").value = "Добрый день!"; }
HTML-код:
Таким образом, при загрузке веб-страницы браузером произойдет вызов функции printText() , которая выведет в текстовое окно текст «Добрый день!»
Скрипт:
window.onload = function () { document.getElementById ("txt1" ) .value = "Добрый день!" ; } |
window.onload= function() { document.getElementById("txt1").value = "Добрый день!"; }
В данном случае код полностью реализован в скрипте. Результат будет аналогичен.
Задание js11_1.
- Добавьте форму в документ и расположите в форме текстовое поле.
- Добавьте обработчики событий onload и onunload для тега body .
- Отождествите событие onload с отображением сообщения в текстовом поле «Здравствуйте» , а событие onunload - с отображением предупреждающего диалогового окна «До свидания!» (последнее будет работать только в браузере IE).
- Опишите скрипты сначала с использованием функций, а затем в виде значений атрибутов событий
Выполнение данного задания к уроку доступно на видео:
Теперь выполним задание. Внимательно ознакомьтесь с постановкой задачи и ее детализацией, а затем перейдите к поэтапному выполнению задания.
Задание js11_2.
Постановка задачи:
На странице представлены изображения кресел, которые могут быть либо занятыми, либо пустыми (атрибут тега alt=yes || no), и кнопка для поиска свободного места.
Щелчок по кнопке осуществляет поиск пустого места. Если таковое имеется – к соответствующему изображению добавлять рамку.
HTML-код:
Детализация задания:
Создать три функции:
- функция инициализации мест initSeats() ; (занято: alt=no либо свободно: alt=yes); запуск функции по загрузке страницы;
- функция отображения состояния мест showSeatStatus(num) ; запускается по щелчку на изображении с сидением и выдает сообщение «свободно» или «занято»
- функция поиска свободных мест findSeats() ; выделяет изображения со свободными местами рамкой
По загрузке страницы должна запускаться функция, где происходит:
- привязка функции findSeats() к событию onclick кнопки;
- привязка событий onclick к изображениям кресел;
- вызов функции инициализации кресел.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | //инициализация мест function initSeats() { ... .alt = "yes" ; ... .alt = "no" ; ... ... } // функция отображения состояния мест: занято или свободно function showSeatStatus(num) { if (...("seat" + num) .alt == "yes" ) { alert ("свободно" ) } else { alert ("занято" ) } } // Поиск свободных мест среди всех возможных function findSeats() { var i = 0 ; // Проверяем, свободно ли текущее место for (i; i |