Команды и эффекты
Команда 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. Создайте форму, которая будет взаимодействовать с пользователем.
Форма должна иметь три элемента: поле ввода с просьбой ввести имя; два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад; кнопку отправки данных. С каждым элементом должно произойти следующее: При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя». Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя. При нажатии на кнопку должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.
Дата добавления: 2015-04-19; просмотров: 662;