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.