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

Команда 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; просмотров: 723;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.008 сек.