theretalk.ru

    Главная      
Программирование
Самоучители:

Атрибут onClick - активизация гиперсвязей

Атрибут onClick может использоваться в следующих тегах HTML:
  • <a herf=URL onClick="expr | function()">. . .</a>
  • <input.type="checkbox" onClick="expr | function()">
  • <input.type="radio" onClick="expr | function()">
  • <input.type="reset" onClick="expr | function()">
  • <input.type="submit" onClick="expr | function()">
  • <input.type="button" onClick="expr | function()">
    Операторы языка JavaScript, заданные в атрибуте onClick, выполняются при щелчке мыши на таких объектах как гиперсвязь, кнопка перезагрузки формы или контрольный переключатель. Для контрольных переключателей и селекторных кнопок событие Click возникает не только при выборе элемента, но и при разблокировании.
Разберем пример использования атрибута onClick для кнопок, определенных тегами <input type="button"> в контейнере <form> . . . </form>:

  

<script language="JavaScript">
<!--
function but1() {
alert("Вы нажали первую кнопку");
}
function but2() {
alert("Вы нажали вторую кнопку");
}
//-->
</script>

<form>
<input type="button" value="Первая кнопка" onClick="but1()">
<input type="button" value="Вторая кнопка" onClick="but2()">
</form>

    Когда ползователь щелкает мышью по кнопке, вызывается либо функция but1(), либо but2(). При этом с помощью метода alert() на экран выводится соответствующее сообщение. (я часто применяю метод alert() так, как с помощью его очень удобно демонстрировать работу той или иной программы)

    Разберем использование события onClick например для контрольных переключателей. Обработка этого события здесь выполняется как при включении, так и при выключении контрольных переключателей. Для проверки состояния переключателей следует использовать свойство checked, которое содержит значение true, если переключатель включен. Рассмотрим пример:
Переключатель 1
Переключатель 2
<script language="JavaScript">
<!--
function chk1(f) {
if (f.checked)
alert("Первый переключатель включен");
else
alert("Первый переключатель отключен");
}
function chk2(f) {
if (f.checked)
alert("Второй переключатель включен");
else
alert("Второй переключатель отключен");
}
//-->
</script>
<form name="chkform">
<input type="checkbox" checked name="c1" onClick="chk1(this.form.c1)"> Переключатель 1 <BR>
<input type="checkbox" name="c2" onClick="chk2(this.form.c2)"> Переключатель 2
</form>
после передачи значения this.form.c1 или this.form.c2 в соответствующие функции. Проверяется свойство checked контрольного переключателя, переданного функции, и в зависимости от значения свойства checked срабатывает метод alert().
Обычно подобный подход применяется для сложного ввода каких-то данных, и в зависимости от установленного "флажка" предлагается заполнять соответствующие поля форм или переместить фокус в одно из полей, так как данные отслеживаются еще при вводе текущей формы.


Подтверждение активизации гиперсвязи

    Гиперссылка обычно всегда срабатывает по клику мыши, но иногда нужно, чтобы пользователь был уверен, что хочет перейти по ссылке в следующий документ. Для этого существует метод confirm(), который отображает на экране окно сообщения с кнопками "Ok" и "Cancel". Для перехвата события в теге <a href= ... > мы применим событие onClick. рассмотим пример:



<a href="http://docs.h10.ru" onClick="return confirm('Вы действительно хотите перейти по ссылке?')">
http://docs.h10.ru
</a>

при клике на ссылке выйдет окно для подтверждения активизации ссылки. Также такой подход можно применить и для отработки других функций, например функция запроса пароля.

Интернет и сети
Самоучители:
Статьи:

theretalk.ru 2007-2008 г.

Rambler's Top100


на www.altavista.ru