Персональный сайт Валерия Штырова

    Урок четвёртый
  События (event) и обработчики событий (event handler)
   Команда onMouseOver (навести мышь).

  " Концепция
    Мы обсудили объекты и методы. (существительные и сказуемые) Теперь приступим к событиям (events). Сначала разрешите мне кое-что пояснить (или запутать). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно, как те скрипты, которые мы с вами разбирали. Они входят в структуру документа НТМL, не требуя команд . Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем. События — это то, что происходит. Они добавят динамики вашему сайту. Увидев их, посетители скажут: «Ух ты!», а сочинять длинные скрипты совсем не нужно. Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — 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 есть изменяемое свойство (изменяемая часть. Что-то в роде: колесо машины = строка состояния window) status, значит, можно изменить и другие свойства окна. Это верно, но не будем торопиться Займемся пока окном и его строкой состояния.

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

   Ссылка

   Анализ скрипта:

<A HREF="http://www.newmail.ru"

onMouseOver="window.status='Бесплатный хостинг'; получается, что часть window.status='Бесплатный хостинг' - это запись в строке состояния. Форма "window.status=' текст'

return true">Ссылка</A> return true- проверка наличия записи в строку состояния. уберем запись в строку состояния. В результате в строке состояния получим адрес при наведении мыши. Уберем проверку. Получим то же. Уберем событие, связанное с мышью. То же. заменим true на false Получим адрес. Т.о. запись высвечивается только при true

   Части скрипта <A HREF="http://www.newmail.ru" и </A> - обычная гиперссылка. Но в первой части нет закрывающей скобки, поскольку имеется продолжение onMouseOver="window.status='Бесплатный хостинг';
return true"> Мы видели, что двойные кавычки в адресе открылись и закрылись. Мы имеем тэг А. Я привык к тому, что он связывается со ссылкой. Но нет закрывающей скобки. Вторая часть выражения напоминает схему style="font-weigth:bold; font-size=12pt". В целом структура выражения соответствует <p align="center" style="font-weigth:bold; font-size=12pt"> Т.о. с А связываются две операции: ссылка и событие. Наведение курсора на объект - одно событие, нажатие на кн. мыши - второе.

   "Другие свойства Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны иметь свойства. Как насчет цвета фона? Это же свойство, верно? В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр. В JavaScript он пишется bgColor. Подумаем, как создать ссылку. которая изменяла бы фон страницы с помощью обработчика onMouseOver.
   Во-первых, раз это ссылка, то сохраним ту же схему, которой сегодня уже пользовались.
   Что мы меняем, окно или нашего старого приятеля, документ? Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
   Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
   Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
   Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой" Заменим true на false.

    Не щелкать

    Не щелкать

Шаблоны событий (нведение курсора на объект)

Наведение мыши
Ссылка Без return
Ссылка c return true
Ссылка c return false

<A HREF="http://www.newmail.ru" onMouseOver="window.status='Бесплатный хостинг'; return true">Ссылка</A>
При наведении мыши на ссылку в строке состояния показывается её адрес. Практическое определение терминов: что изменяется при наведении мыши?- строка состояния. Значит, statusозначает строку состояния. Работу return в зависимости от его значений и наличия его самого проверить наведением курсора на объект

Не щелкать мышью, только наводить курсор

<a href="http://www.newmail.ru" onMouseOver="document.bgColor='green'; return true">Не щелкать...</a>
Запись двух команд наведения мышью осуществляется через запятую
Не щелкать мышью
<a href="http://www.newmail.ru" onMouseOver="document.bgColor='334775', onMouseOver=window.status='Бесплатная почта'; return true">Не щелкать</a>

метод предупреждение = alert('текст в окошке')
ссылка
<a href="http://www.newmail.ru" onMouseOver="alert('Не моги')">ссылка</a>

Cобытие "щелчок" onClick
Жмите сюда
<a href="http://www.jsp.newmail.ru" onClick="alert('Уже уходите!');">Жмите сюда</a>
alert - Задерживает выполнение

Команда onFocus (на фокус). Текст в строке состояния

<form>
<input type="text" size="30" onFocus="window.status='Текст в строке состояния';">
</form>

Команда onBlur (на потерю фокуса)

<form>
<input type="text" size="45" value="Впишите свое имя и щелкните по другой строке"
onBlur="alert('Вы изменили ответ — уверены, что он правильный?');">
</form>

Команда onChange (на изменение)

Команда onSelect (на выделение)

Команда onSubmit (на отправку)
parent.location — это стандартная схема ссылки на другую страницу. Можно подумать, что parent (источник) — это объект, а location (местонахождение) — метод. Неверно. В данном случае parent является свойством окна браузера, а location — объектом, который появится в этом окне. То есть для ясности просто имейте в виду, что parent.location='' означает ссылку

Команды onLoad и onUnload (на вход и выход)
Обе они помещаются внутри строки HTML . Они вызывают событие, когда страница открывается или закрывается, то есть когда вы уходите со страницы.

Задача: создать форму, которая будет взаимодействовать с пользователем.
Форма должна иметь три элемента:
• поле ввода с просьбой ввести имя;
• два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад;
• кнопку отправки данных.
С каждым элементом должно произойти следующее:
• При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя».
• Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя.
• При нажатии на кнопку должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.

Во всяком деле важно преобразование существующего параллельно в последовательность действий. При этом часто выполненное действие определяет частные стороны, связанные с ним .

Подготовка шаблонов: 1. Шаблон форма <form></form> 2. Шаблон поля <input type="text" name="A" value="B" style="font:10pt" size="12" maxlength="12"> 3. Поля для флажков <input type="checkbox" name="A" checked=""/> 4. Кнопка отправки данных <input type="submit" name="имя" value="отправить" > 5. Шаблон onClick <input type="checkbox" size="30" onFocus="window.status='Текст в строке состояния';"> 6. onClick="alert('текст');"

Форма
<form>
<input type="text" name="A" value="Введите ваше имя" style="font:8pt" size="25" maxlength="25"onFocus="window.status='Впишите сюда своё имя';">
<p><input type="text" name="A" value="Вам больше нравится мороженое" style="font:10pt" size="40" maxlength="40">
<input type="checkbox" name="B" onClick="window.status='Вы выбрали мороженое';" />  <input type="text" name="A" value="или шоколад?" style="font:10pt" size="19" maxlength="19">  
<input type="checkbox" name="B1" value="ON" onClick="window.status='Вы выбрали шоколад';"/></p>
<p>
<input type="submit" name="имя" value="отправить" onClick="alert('Благодарим за участие в опросе');" >
</p>
</form>