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

---

Познакомимся с событиями (events). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно. Они входят в структуру документа НТМL, не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем. События — это то, что происходит. Они добавят динамики сайту. Среди разнообразных обработчиков событий для начала выберем один, самый популярный, — onMouseOver (навести мышь).

Скрипт

<A HREF="http://www.newmail.ru" onMouseOver="window.status='Бесплатный хостинг'; return true">Ссылка</A>

Примечание: Все это должно быть на одной строке.

Результат на ВЕБ-странице

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

Разбор скрипта

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

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

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

Другие свойства

Другие объекты также имеют свойства. К примеру цвет фона. В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только необходимо соблюдать регистр. В JavaScript он пишется bgColor. Можно предложить создать ссылку, которая изменяла бы фон страницы с помощью обработчика onMouseOver.

1. Так как это ссылка, то можно сохранить ту же схему, которую уже импользовали.

2. Заменим window на document.

3. Заменим status на bgColor.

4. Заменим его цветом.

5. Необходимо чтобы новый цвет оставался независимо от того, сколько раз будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.

Результат.

<a href="http://www.newmail.ru" onMouseOver="document.bgColor='white'; return true">Не щелкать</a>

Мы хотим, чтобы два события произошли одновременно, поэтому не будем разделять команды точкой с запятой, так как это означает конец. Нужно написать две команды onMouseOver.

Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript, происходящие одновременно.

Раз нам нужно, чтобы обе команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце второй. Таким образом, мы показываем браузеру, что все это одно событие.

Вернем документу первоначальный цвет...

                <a href="http://www.newmail.ru" onMouseOver="document.bgColor='334775', onMouseOver=window.status='Бесплатная почта'; return true">Не щелкать</a>
                

Задание

Новый метод, alert() (предупредить) вызывает небольшое диалоговое окно с текстом и кнопкой OK. Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку. Вот формат команды: alert('текст в окошке')