Задание
Создать 4 таблицы стилей которые определяли бы внешний вид следующих тэгов:
<P>, <Table>, <H1>, <I>;
<div>, <hr>, <p>, <b>, <H6>;
<Ul>, <li>, <Table>, <U>;
<td>, <tr>, <I>, <b>, <h1>;
<b>,<tr>, <h2>, <h3>;
<body>, <font>,<s>.
В описании каждого тэга необходимо использовать не менее 5 свойств.
Лабораторная работа №7 обработчик событий
Цели работы:
познакомить с обработчиком событий;
научиться работать с обработчиком событий Dhtml;
изменить страницу "menu.htm".
Теоретический раздел
Обработчик событий
Обработчики событий - мощный инструмент языка JavaScript. Реагируя на определенные действия пользователя, сценарий может проверять пользовательский ввод и незамедлительно реагировать на него без лишних обращений к серверу, поскольку действие пользователя в HTML-странице ограничено перемещениями мыши и вводом данных в поля форм.
onBlur |
срабатывает при потери фокуса объектом |
onChange |
срабатывает при изменении содержимого объекта |
onClick |
срабатывает при щелчке |
onFocus |
срабатывает при получении фокуса объектом |
onLoad |
срабатывает после завершения загрузки страницы |
onMouseOver |
срабатывает при наведении мыши на объект |
onSelect |
срабатывает при выделении текста |
onSubmit |
срабатывает после передачи данных формы |
onUnload |
срабатывает после закрытии страницы |
onBlur. Событие наступает в тот момент, когда элемент формы select, text или textarea теряет фокус.
<INPUT TYPE="elementType" onBlur="function">
Пример: |
<INPUT TYPE="textarea" VALUE="" NAME="feedback" onBlur="alert(Элемент потерял фокус)"> |
Примечания: Событие потери фокуса (blur) может использоваться для проверки корректности ввода данных пользователем. Этот обработчик события отличается от обработчика onChange, который вызывается только в случае изменения значения поля.
onChange. Событие наступает, когда такие элементы формы, как select, text, textarea, модифицируются до потери фокуса ввода.
<INPUT TYPE="elementType" onChange="function">
Пример: |
<INPUT TYPE="text" VALUE="поменять" NAME="state" onChange="alert('Вы поменяли значение на '+this.value)"> |
Примечания: Этот обработчик особенно полезен для проверки корректности ввода данных пользователем.
onClick. Вызывается после щелчка левой кнопкой мыши на объекте.
<INPUT TYPE="elementType" onClick="function">
Пример: |
<FORM NAME="overtime"> Имя <INPUT TYPE="text" VALUE="" NAME="name" SIZE=10> Фамилия: <INPUT TYPE="text" VALUE="" NAME="family" SIZE=10> <INPUT TYPE="button" VALUE="Coinpute" NAME="computeWage" onClick="alert('Здравствуй '+document.overtime.family.value+' '+document.overtime.name.value)"> </FORM> |
Примечания: Обработчик onClick придает широкую функциональность кнопкам формы и другим объектам на странице. Кнопки могут использоваться для проверки корректности ввода данных пользователем перед посылкой на сервер или для вычисления результатов в форме или в выражении. Щелчок на переключателе или флажке позволяет переключиться на обработку другой информации. Следующий пример посылает содержимое формы с именем "overtime" функции howRich.
onFocus. Событие происходит в тот момент, когда элемент формы получает фокус ввода с клавиатуры (при использовании клавиши табуляции) или при щелчке мыши !!! Выделение содержимого поля приводит к возникновению события select.
<INPUT TYPE="inputType" onFocus="function">
Пример: |
<INPUT TYPE="textarea" VALUE="" NAME="t1" onFocus="alert(Элемент получил фокус)"> |
Примечания: Элемент формы получает фокус в тот момент, когда пользова-тель переходит к этому элементу формы с помощью клавиши Tab или щелчка мыши. Выделение символов внутри поля приводит к вызову обработчика события onSelect. Одним из применений обработчика onFocus является вывод на экран всплывающей подсказки, когда элемент выбирается в первый раз.
onLoad. Вызывается, когда загрузка документа в окно или в кадр закончена.
<BODY onLoad="function">
<FRAMESET onLoad="function">
Пример: |
<html> <head> <title>Untitled Document</title> <meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" text="#000000" onLoad="alert('Загрузка завершена')"> Пример на onLoad </body> </html> |
Примечания: Событие onLoad возникает в тот момент, когда браузер заканчивает загрузку окна или всех кадров внутри тега <FRAMESET>.
onMouseOver. Событие происходит, когда указатель мыши помещается над гиперссылкой.
<А HREF="URL" onMouseOver="function">linktext</A>
Пример: |
<html> <head> <title>Untitled Document</title> <meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" text="#000000" onLoad="alert('Загрузка завершена')"> Пример на onLoad </body> </html> |
Пример: |
<h1 onMouseOver="alert('Спасибо')">Наведи на меня</h1> |
Примечания: Обработчик onMouseOver вызывается в тот момент, когда пользователь помещает указатель мыши над объектом link.
Для взаимодействия со свойствами status или defaultStatus обработчик события должен возвращать true.
onSelect. Обработчик события onSelect вызывается в тот момент, когда выделен текст внутри элемента формы.
<INPUT TYPE="textType" onSelect="function">
Пример: |
<INPUT TYPE="text" onSelect="alert('Эй перестань')" value="выдели меня"> |
Начало формы
Конец формы
Примечания: Событие select вызывается выбором части или всего текста в объектах text или textarea.
onSubmit. Событие происходит в момент щелчка мышью на кнопке Submit для посылки данных формы на сервер.
<TAG onSubmit="function">
Примечания: Обработчик события onSubmit запускается в момент отправки пользователем данных формы на сервер. Любое отличное от false возвращаемое значение, в том числе пропуск оператора return, приводит к отправке данных на сервер. Для получения более ясного кода рекомендуется вставлять оператор return в обоих случаях.
<FORM onSubmit="feedbackSubmit()"> ...элементы формы... </FORM> function feedbackSubmit () { ...сроки кода... if (!validData) { return true } else { return false; } } |
onUnload. Событие возникает, когда пользователь выходит из документа.
<BODY onUnload="function">
<FRAMESET onUnload="function">
Пример: |
<html> <head> <title>Untitled Document</title> <meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" text="#000000" onUnload="alert('Вы уверены, что хотите покинуть страницу')"> Пример на onUnload </body> </html> |
Примечания: Когда несколько событий unload включено в иерархию кадров, порядок операций - от дочернего к родительскому.
Например, событие unload включено в два документа и родительский тег <FRAMESET>, который загрузил их. Когда дочерний документ изменяется, его событие unload обрабатывается, но событие unload тега <FRAMESET> не происходит. Когда пользователь выбирает опцию, заменяющую родительский документ на новый источник, событие unload самого верхнего уровня будет обработано.