Практическое занятие № 12
Тема: События. Создание обработчиков
событий для разных элементов
Цель работа: получить практические навыки по написанию обработчиков событий
Ход работы
Пусть имеется страница вида (скачать)
Задание 1. Работа с текстовыми полями
На форме для полей с исходными данными ограничим ввод только цифрами. Для поля результата запретим ввод любой информации.
Указания: все поля находятся на форме с name='form1'. Поля для данных имеют name='data'. Поле для результата имеет атрибут name='rez'.
Так как обработчик события будем присваивать без изменения HTML кода, то код скрипта нужно писать после окончания загрузки содержимого окна. Для этого скрипт нужно оформлять так:
Для выполнения задания в код скрипта добавьте фрагмент вида:
Задание 2. Выпадающее вертикальное меню
Написать обработчик для открытия/скрытия пунктов
Указания: меню находится в теге div с id=menu. Название пунктов меню находятся в тегах li, у которых родителем является div#menu. При щелчке на этих пунктах открывается
перечень пунктов подменю, которые находится в теге ul, который является "братом" для текущего li и идет следом за ним.
В тег script добавьте код:
Задание 3. Слайд-шоу
Справа отображаются уменьшенные эскизы рисунков. При наведении на эскиз по центру страницы отображается ее увеличенная копия.
Указания: эскизы находятся в теге div с id='slider'. Основное изображение имеет id='pict'. При наведении на эскиз мышью нужно его свойство src присвоить такому же свойству главного
изображения.
В код скрипта добавьте код:
Задания для самостоятельного выполнения
4. В таблице при щелчке на ячейке меняется ее цвет. При повторном щелчке цвет возвращается в исходное значение.
Указания: вначале получим ссылку на вторую таблицу (первая таблица находится на форме и невидимая). Для таблицы будем проверять элемент, на котором выполнен щелчок. Если щелчок на теге TD, то меняем фон.
5. В таблице при наведении мышью на строку меняется ее цвет. При уходе со строки цвет возвращается в исходное значение.
6. Для кнопки Расчет напишите обработчик, который по щелчку на кнопке рассчитывает сумму первого и второго чисел и записывает в поле Результат.