Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее

Url-javascript

«Url-javascript» – девятый урок учебника JavaScript. В этом уроке мы узнаем, что такое схема URL – «javascript:…» и с чем ее едят.

Схема URL – «javascript:…»

Поверхностно о существовании этой схемы вы узнали еще в одном из первых уроков нашего учебника. Данная схема позволяет перепрограммировать стандартные действия, выполняемые браузером при активации гипертекстовой ссылки.

Теперь мы остановимся на ней более подробно.

При помощи схемы Url-javascript можно перехватывать не только стандартные гипертекстовые ссылки, но и атрибутaction у html форм:

<A HREF=»javascript:…;»>…</A>

<FORM ACTION=»javascript:…»>

Для большей наглядности приведем простейший пример перепрограммирования гипертекстового перехода:

<A HREF=»javascript:window.alert( ‘JS успешно перехватил гипертекстовый переход’);void(0);»>
ГИПЕРТЕКСТОВАЯ ССЫЛКА
</A>
ГИПЕРТЕКСТОВАЯ ССЫЛКА

Как вы видите, при нажатии на ссылку вместо стандартного гипертекстового перехода выполняются JavaScript команды.

Теперь рассмотрим интересный пример, позволяющий нам изменять изображение:

<script>
var flag=0;
function newimage()
{
if(flag==0)
{
document.i1.src=»../img/dog.gif»;
flag=1;
}
else
{
document.i1.src=»../img/cat.gif»;
flag=0;
}
}
</script>
<A HREF=»javascript:newimage();void(0);»>
<IMG SRC=../img/cat.gif NAME=i1 width=»100″ height=»99″ BORDER=0> </A>
Котёнок

В данном примере мы создаем функцию newimage(), которая позволяет изменить изображение.

Изначально создается переменная flag, равная 0. При вызове функции newimage() производится проверка значения переменной flag на равенство 0 и если условие выполняется, то объекту с идентификатором i1 (наше изображение) присваивается адрес изображения с собакой и переменная flag приравнивается к 1. Если условие не выполняется, то этому же объекту присваивается адрес изображения с котом и переменная flag приравнивается к 0.

Ну а далее следует наше изображение, которое является изображением–ссылкой. При нажатии пользователя на него JavaScript перехватывает управление у браузера и вызывает функцию newimage(), которая и изменяет изображение.

Как я уже говорил выше, перехватить можно не только действия, выполняемые браузером при гипертекстовых переходах, но и но и атрибут action у html форм:

<FORM NAME=f action=»javascript:window.alert( document.f.fi0.value);void(0);» METHOD=post>
Введите текст:
<INPUT NAME=fi0 SIZE=20 MAXLENGTH=20>
</FORM>
Введите текст:

В этом примере создается простейшая форма, состоящая из одного единственного текстового поля. После нажатия на клавишу Enter управление переходит к атрибуту action, но тут вступает в игру JS. И вместо стандартного вызова обработчика по URL адресу выполняются JavaScript команды. А именно происходит вызов окна с предупреждением, содержащего введенный в текстовое поле текст.


В этом уроке мы научились использовать схему URL – «javascript:…», позволяющую нам производить достаточно интересные манипуляции над самыми обыкновенными событиями. Мы в очередной раз убедились, насколько гибок JS относительно управления поведением браузера.

JavaScript действительно является мощнейшим существующим инструментом для создания динамически изменяющихся сайтов, позволяющих перейти на абсолютно новый уровень диалога с пользователями.

В следующем уроке мы обсудим очень интересную тему, позволяющую придать вашим сайтам дополнительной привлекательности – работа с графикой в JS.