Разбор сценария

Лабораторная работа №8

Обработка событий в JavaScript.

Http: //www.site-do.ru/js/js3.php

Цель работы

1. Изучить основы обработки событий в JavaScript.

2. Применить полученные знания для написания сценариев на JavaScript и HTML.

Задание для подготовки к работе

Изучить лекционный материал и теоретический материал настоящей лабораторной работы.

Порядок выполнения работы

1. Изучить основы обработки событий в JavaScript.

2. Выполнить приведенные примеры.

3. Выполнить индивидуальное задание по варианту (смотри ниже).

4. Поместить разработанный JS -код сценария на FTP-сервере (обязательно!).

5. Составить электронный отчет о проделанной работе. На титульном листе отчета указать URL для запуска разработанной программы на выполнение.

Содержание отчета

1. Титульный лист.

2. Теоретическая часть.

Обязательно указать номер варианта, текст индивидуального задания, тестовые данные, блок-схему реализации алгоритма решения задачи.

3. Копии экрана, иллюстрирующие работу разработанного сценариев.

4. Код html-страниц, выполненных согласно варианту.

Теоретический материал

Сначала несколько вводных замечаний. События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее " встроены" в HTML-код, а не существуют самостоятельно, как те сценарии, которые мы создали. События являются встроенными, так что они не требуют команд < SCRIPT> и < /SCRIPT>. Сами они являются не сценариями, а скорее небольшими интерфейсами, обеспечивающими взаимодействие между страницей и читателем.

Существует множество событий, с которыми мы со временем познакомимся, но для начала выберем одно из наиболее популярных — onMouseOver (навести курсор мыши).

Сценарий

< A HREF=" https://www.mail.ru"

onMouseOver=" window.status='Почтовая служба';

return true" > Ссылка< /A>

Все это должно быть на одной строке. Здесь он разбит на несколько строк, чтобы облегчить его просмотр.

Результат работы сценария

При наведении курсора мыши на ссылку строка состояния в окне браузера изменится.

Разбор сценария

Вы уже знаете достаточно, чтобы понять смысл написанного. Давайте быстро разберем сценарий и попробуем его как-нибудь изменить.

Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Это понятно? Он используется внутри гиперссылки.

Формат гипертекстовой ссылки остается без изменений. Те же команды и те же двойные кавычки. Обработчик событий onMouseOver ставится сразу же после адреса URL. Видите?

Событие (Event) приводится в действие, когда браузер распознает onMouseOver=" ". Общая схема уже должна быть немного понятна: два элемента, разделенные точкой. До сих пор это означало, что один является объектом, а другой методом. Но в данном случае объектом является window (окно), оно существует; status (статус) представляет собой свойство (property) окна. Это небольшой участок окна, где должен разместиться следующий далее в команде текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой.

После window.status ставится знак равенства =, за которым следует то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на гипертекстовую ссылку.

Пожалуйста, обратите еще раз внимание на точку с запятой в конце командной строки.

Затем следует return true. Эти два слова имеют вполне определенное влияние на то, что произойдет, когда указатель мыши переместится на ссылку. Если они присутствуют, сценарий проверит, есть ли строка состояния. Если проверка будет успешной (true), происходит событие. Обратите внимание, что когда указатель мыши перемещается на ссылку, то текст в строке состояния блокируется. Он больше не изменяется при последующих перемещениях указателя мыши на ссылку. (Если обновить страницу, то можно будет это увидеть).