Выше мы перечислили свойства объекта классаURL. Теперь покажем, как при помощи JavaScript-кода можно этими свойствами управлять.
Пример 6.1 (кликните, чтобы открыть его в новом окне; посмотреть исходный HTML-код можно, нажав правой кнопкой мыши и выбрав соответствующий пункт).
Рассмотрим меню типа "записная книжка". Конечно, это не настоящая записная книжка. Поле формы заполняется только при выборе гипертекстовой ссылки, расположенной над этим полем. Единственная цель данного примера - показать, как изменяется значение атрибута HREF(оно отображается в поле status окна браузера при наведении указателя мыши на ссылку). В этом примере изменение свойства href у ссылок производится точно так же, как изменение свойства src у картинок и свойства value у полей ввода в форме:
На нашей странице имеется 6 ссылок, 6 картинок и 3 поля ввода. Первые три ссылки и картинки (с номерами 0,1,2) всегда неизменны. Последние же три ссылки и картинки (т.е. с номерами 3,4,5) мы меняем вышеприведенными операторами (поэтому в них индекс i+3, где i=0,1,2 ). Как вы видите, мы меняем значение href целиком. Однако 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/.
Эти два события позволяют совершать действия при наведении или уводе курсора мыши на объекты, например, обесцвечивать и проявлять картинки, менять содержимое поляstatus и т.п. Применительно к гипертекстовым ссылкам, первое событие генерируется браузером, если курсор мыши находится над ссылкой, а второе - когда он покидает ссылку.
Пример 6.2. Рассмотрим пример с записной книжкой, но теперь для появления подменю будем использовать обработчик события onMouseOver. Для этого достаточно заменить строчки вида:
<A HREF="javascript:ShowMenu(0);void(0);">...</A>
открывавшие подменю, когда пользователь кликал по ссылке, на строчки вида:
открывающие подменю при наведении указателя мыши на пункт меню верхнего уровня. Выражения " javascript:void(0); " мы оставили в атрибуте HREF, чтобы ничего не происходило, если пользователь случайно кликнет по пункту меню верхнего уровня.
Пример 6.3. В предыдущем примере нам не требовалось совершать какие-то действия при уводе указателя мыши с пункта меню. Теперь рассмотрим пример, когда это требуется, и для этого мы будем использовать обработчик события onMouseOut. При наведении указателя мыши на ссылку мы будем подменять картинку, а при уводе указателя мыши с картинки - восстанавливать ее. В исходном HTML-документе это будет выглядеть следующим образом:
Как уже рассказывалось в лекции 4, при возникновении события MouseOver у гиперссылки браузер показывает URL этой ссылки в поле статуса, а при возникновении события MouseOut восстанавливает в поле статуса прежнюю надпись. Перехватить первое событие (например, отменить вывод URL в строке статуса) можно, указав в его обработчике return true. Перехватить второе событие невозможно.
Примечание. В настоящее время обработчики событий onMouseOver и onMouseOutработают уже не только с гипертекстовыми ссылками, но и с изображениями, полями ввода, таблицами, их строками и ячейками, кнопками и другими HTML-элементами.
URL-схема "JavaScript:"
Для программирования гипертекстовых переходов в спецификацию URL разработчики JavaScript ввели, по аналогии с URL-схемами http, ftp и т.п., отдельную URL-схемуjavascript. Она уже упоминалась во вводной лекции при обсуждении вопроса о том, куда можно поместить JavaScript-программу в HTML-документе. Здесь мы рассмотрим ее подробнее.
Схема URL javascript: используется следующим образом:
Как видим, если кликнуть по ссылке, то вместо перехода по какому-либо адресу просто появляется окно предупреждения.
В общем случае, после " javascript:" может стоять произвольная программа JavaScript. Что в этом случае будет происходить, если кликнуть такую ссылку? Ответ следующий: сначала JavaScript-программа будет исполнена, в результате чего будет вычислено еезначение (которым всегда считается значение последнего оператора в программе). Затем, если это значение неопределено ( undefined ), то далее ничего не произойдет; если же полученное значение определено, то на экран будет выведена HTML-страница с этим результатом (преобразованным в строку и воспринятым как HTML-документ, который в том числе может содержать и HTML-тэги).
В примере выше метод alert() не возвращает никакого значения, поэтому после появления окна предупреждения более ничего не происходит. Рассмотрим другие примеры. Кликнув по ссылке
<A HREF="javascript: 2+8; 5+7;">ссылка</A>
мы получим страницу, на которой написан результат последнего выражения 12 (первое выражение 2+8, конечно, тоже будет вычислено, но его результат никуда не пойдет). Если же кликнуть по такой ссылке:
то в окне браузера откроется страница, исходный HTML-код которой есть <HTML><BODY><H1>Ready!<H1></BODY></HTML>. Если нужно, чтобы при клике по ссылке просто выполнились какие-то действия и более ничего не происходило (в частности, не происходил переход к какой-либо другой странице), то в конце программы можно поместить оператор void(0) либо void(выражение). Эта функция вычисляет переданное в нее выражение и не возвращает никакого значения. Пример:
Если кликнуть по такой ссылке, то изменится цвет фона, и больше ничего не произойдет. Без void(0) нам бы открылась web-страница со словом green.
Все сказанное справедливо и для использования URL-схемы " javascript:" в атрибутеACTION контейнера <FORM>, за одним нюансом: в этом случае необходимо, чтобы в качестве метода доступа был указан METHOD="POST". Дело в том, что при использовании метода GET при отправке данных формы (т.е. при возникновении события Submit ) к адресу URL, указанному в атрибуте ACTION, добавляется строка " ?имя=значение&имя=значение&...", составленная из имен и значений элементов формы. Конечно же, такое выражение не является корректной JavaScript-программой, и браузеры могут выдавать сообщения об ошибке (а могут и не выдавать, а просто не выполнять программу). Пример:
Если ввести любую строку в поле ввода и нажать кнопку, то будет выведена длина строки. Этот пример был создан лишь для демонстрации URL-схемы " javascript:"; он весьма искусственный, т.к. в данном случае более уместно было бы использовать обработчик события onClick или onSubmit. Об этом и других применениях JavaScript в обработке форм рассказывается в лекции, посвященной программированию форм.
