Рассмотрим пример двух вариантов использования события 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 |