Url-javascript

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

Схема URL – "javascript:..."

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

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

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

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

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

ГИПЕРТЕКСТОВАЯ ССЫЛКА

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

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

Наверх

В данном примере мы создаем функцию 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.

Наверх

Источник: Создание сайтов