Команды и эффекты

Обработчики событий

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

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

Во-первых, раз это ссылка, то сохраним ту же схему.. Заменим window на document. Для изменения цвета фона объекта, заменим status на bgColor. Необходимо, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.

Вот что у нас получилось...

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

Для того, чтобы два события произошли одновременно, нет необходимости разделять команды точкой с запятой, так как это означает конец.

Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript, происходящие одновременно. Помните, в кавычки ставятся отдельные элементы вроде текста. Раз нам нужно, чтобы обе команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце второй. Таким образом мы показываем браузеру, что все это одно событие. Однако нам еще могут понадобиться одинарные кавычки...

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

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

Команда onClick (на щелчок)

onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onClick.
Чтобы продемонстрировать действие команды, воспользуемся методом alert. Если вы сделали прошлое задание, то знаете, что это такое. Вот еще раз его схема:

alert('текст, который появится в окне')

Таким образом, получаем:

<a href="http://www.narod.ru" onClick="alert('Уже уходите!');">
Жмите сюда</a>

И вот что это нам дает (когда вы нажмете на ссылку, она сработает):

Помните, что внутри одинарных кавычек нельзя употреблять слова с апострофами ', иначе браузер поймет их, как окончание текста, а это не входит в ваши намерения. Ошибка.

Команда onFocus (на фокус)

Это замечательная команда, которая вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox).
Вот пример:

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

Вот что вы получаете (щелкните в поле ввода и посмотрите на строку состояния):

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

Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но вот вам пример. Внизу у меня строка для ввода текста, в которой уже что-то написано. Измените текст и уведите курсор, как если бы вы перешли к следующему предмету в списке.

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

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

Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача — проверка. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.

<form>
<input TYPE="text" size=45
value="Измените текст и щелкните по другой строке"
onChange="window.status='Текст был изменен';">
</form>

Это дает вам следующее...

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

Эта команда работает так же, как и три предыдущие, отмечая, что в поле ввода произошли изменения, — в данном случае был выделен текст.

Команда onSubmit (на отправку)

Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете кнопку Submit (отослать, отправить). Многим очень хочется, чтобы после того, как пользователь нажимает на кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали».

Формат такой:

<form>
<input TYPE="submit"
onSubmit="parent.location='thanksalot.html'";>
</form>

Вот что у вас выходит (щелкайте по кнопке):

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

Команды onLoad и onUnload (на вход и выход)

Задания для практического занятия:

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

Иван рубил дрова,
Варвара топила печь.

2. Скопируйте скрипт на страницу и сохраните ее.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<SCRIPT language=JavaScript>

..t

dothis = new Date()

month = dothis.getMonth()

month = (month * 1) + 1

day = dothis.getDate()

year = dothis.getFullYear()

document.wrte(" ",day,"/",month,"/",year," ")

</SCRIPT>

</BODY>
</HTML>

Загружая страницу, браузер должен выдать вам два сообщения об ошибке. Исправьте их.

Если он заработает, то на странице появится сегодняшняя дата. (Подсказка: возможно, сначала вы получите только одно сообщение. Вторая ошибка появится, когда вы исправите первую.)

3. Напишите скрипт, который поместит на вашу страницу дату, разделенную
дробями /. Приветственный текст должен быть зеленого цвета. Также отметьте, что это вы написали скрипт.

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

alert('текст в окошке')

Подумайте хорошенько, решите, что должно произойти сначала, что потом.

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

Контрольные вопросы

1. Что позволяет вызывать команда onSubmit?

2. В чем суть объектой модели JavaScript?

3. Дайте определение понятию JavaScript?

Дата добавления: 2014-12-24