Замена атрибута href

Выше мы перечислили свойства объекта классаURL. Теперь покажем, как при помощи JavaScript-кода можно этими свойствами управлять.

Пример 6.1 (кликните, чтобы открыть его в новом окне; посмотреть исходный HTML-код можно, нажав правой кнопкой мыши и выбрав соответствующий пункт).

Рассмотрим меню типа "записная книжка". Конечно, это не настоящая записная книжка. Поле формы заполняется только при выборе гипертекстовой ссылки, расположенной над этим полем. Единственная цель данного примера - показать, как изменяется значение атрибута HREF(оно отображается в поле status окна браузера при наведении указателя мыши на ссылку). В этом примере изменение свойства href у ссылок производится точно так же, как изменение свойства src у картинок и свойства value у полей ввода в форме:

document.links[i+3].href = ...

document.images[i+3].src = ...

document.f.elements[i].value = ...

На нашей странице имеется 6 ссылок, 6 картинок и 3 поля ввода. Первые три ссылки и картинки (с номерами 0,1,2) всегда неизменны. Последние же три ссылки и картинки (т.е. с номерами 3,4,5) мы меняем вышеприведенными операторами (поэтому в них индекс i+3, где i=0,1,2 ). Как вы видите, мы меняем значение href целиком. Однако URL можно менять и частично.

Изменение части url

Гипертекстовая ссылка - это объект класса URL, у которого помимо свойства href есть и другие, соответствующие частям URL, и их тоже можно менять. Проиллюстрируем эту возможность. Допустим, у нас имеется ссылка:

<A HREF="http://www.intuit.ru/department/internet/js/">Курс по JavaScript</A>

Проверьте, что значение свойства document.links[0].pathname сейчас равно "department/internet/js/ ". Применим оператор:

document.links[0].pathname="news/"

Теперь эта ссылка указывает на адрес http://www.intuit.ru/news/.

События MouseOver и MouseOut

Эти два события позволяют совершать действия при наведении или уводе курсора мыши на объекты, например, обесцвечивать и проявлять картинки, менять содержимое поляstatus и т.п. Применительно к гипертекстовым ссылкам, первое событие генерируется браузером, если курсор мыши находится над ссылкой, а второе - когда он покидает ссылку.

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

<A HREF="javascript:ShowMenu(0);void(0);">...</A>

открывавшие подменю, когда пользователь кликал по ссылке, на строчки вида:

<td><a href="javascript:void(0);" onMouseOver="ShowMenu(0);">...</A>

открывающие подменю при наведении указателя мыши на пункт меню верхнего уровня. Выражения " javascript:void(0); " мы оставили в атрибуте HREF, чтобы ничего не происходило, если пользователь случайно кликнет по пункту меню верхнего уровня.

Пример 6.3. В предыдущем примере нам не требовалось совершать какие-то действия при уводе указателя мыши с пункта меню. Теперь рассмотрим пример, когда это требуется, и для этого мы будем использовать обработчик события onMouseOut. При наведении указателя мыши на ссылку мы будем подменять картинку, а при уводе указателя мыши с картинки - восстанавливать ее. В исходном HTML-документе это будет выглядеть следующим образом:

<A HREF="javascript:void(0);"

onMouseOver="document.pic1.src='pic1.gif';"

onMouseOut="document.pic1.src='pic1_.gif';">

<IMG NAME=pic1 src=pic1_.gif BORDER=0></A>

Как уже рассказывалось в лекции 4, при возникновении события MouseOver у гиперссылки браузер показывает URL этой ссылки в поле статуса, а при возникновении события MouseOut восстанавливает в поле статуса прежнюю надпись. Перехватить первое событие (например, отменить вывод URL в строке статуса) можно, указав в его обработчике return true. Перехватить второе событие невозможно.

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

URL-схема "JavaScript:"

Для программирования гипертекстовых переходов в спецификацию URL разработчики JavaScript ввели, по аналогии с URL-схемами http, ftp и т.п., отдельную URL-схемуjavascript. Она уже упоминалась во вводной лекции при обсуждении вопроса о том, куда можно поместить JavaScript-программу в HTML-документе. Здесь мы рассмотрим ее подробнее.

Схема URL javascript: используется следующим образом:

<A HREF="JavaScript:код_программы">...</A>

<FORM ACTION="JavaScript:код_программы" ...> ... </FORM>

Рассмотрим пример гипертекстовой ссылки, в URL которой использована схемаjavascript:

<A HREF="javascript:alert('Спасибо!');">Кликните</A>

Как видим, если кликнуть по ссылке, то вместо перехода по какому-либо адресу просто появляется окно предупреждения.

В общем случае, после " javascript:" может стоять произвольная программа JavaScript. Что в этом случае будет происходить, если кликнуть такую ссылку? Ответ следующий: сначала JavaScript-программа будет исполнена, в результате чего будет вычислено еезначение (которым всегда считается значение последнего оператора в программе). Затем, если это значение неопределено ( undefined ), то далее ничего не произойдет; если же полученное значение определено, то на экран будет выведена HTML-страница с этим результатом (преобразованным в строку и воспринятым как HTML-документ, который в том числе может содержать и HTML-тэги).

В примере выше метод alert() не возвращает никакого значения, поэтому после появления окна предупреждения более ничего не происходит. Рассмотрим другие примеры. Кликнув по ссылке

<A HREF="javascript: 2+8; 5+7;">ссылка</A>

мы получим страницу, на которой написан результат последнего выражения 12 (первое выражение 2+8, конечно, тоже будет вычислено, но его результат никуда не пойдет). Если же кликнуть по такой ссылке:

<A HREF="javascript: '<HTML><BODY><H1>Ready!<H1></BODY></HTML>';">Кликните</A>

то в окне браузера откроется страница, исходный HTML-код которой есть <HTML><BODY><H1>Ready!<H1></BODY></HTML>. Если нужно, чтобы при клике по ссылке просто выполнились какие-то действия и более ничего не происходило (в частности, не происходил переход к какой-либо другой странице), то в конце программы можно поместить оператор void(0) либо void(выражение). Эта функция вычисляет переданное в нее выражение и не возвращает никакого значения. Пример:

<A HREF="javascript: document.bgColor='green'; void(0);">Кликните</A>

Если кликнуть по такой ссылке, то изменится цвет фона, и больше ничего не произойдет. Без void(0) нам бы открылась web-страница со словом green.

Все сказанное справедливо и для использования URL-схемы " javascript:" в атрибутеACTION контейнера <FORM>, за одним нюансом: в этом случае необходимо, чтобы в качестве метода доступа был указан METHOD="POST". Дело в том, что при использовании метода GET при отправке данных формы (т.е. при возникновении события Submit ) к адресу URL, указанному в атрибуте ACTION, добавляется строка " ?имя=значение&имя=значение&...", составленная из имен и значений элементов формы. Конечно же, такое выражение не является корректной JavaScript-программой, и браузеры могут выдавать сообщения об ошибке (а могут и не выдавать, а просто не выполнять программу). Пример:

<FORM NAME=f METHOD=post

ACTION="javascript:alert('Длина строки = '+document.f.e.value.length);">

<INPUT NAME=e>

<INPUT TYPE=submit VALUE="Длина">

</FORM>

Если ввести любую строку в поле ввода и нажать кнопку, то будет выведена длина строки. Этот пример был создан лишь для демонстрации URL-схемы " javascript:"; он весьма искусственный, т.к. в данном случае более уместно было бы использовать обработчик события onClick или onSubmit. Об этом и других применениях JavaScript в обработке форм рассказывается в лекции, посвященной программированию форм.