Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Ретро газета в подарок
Архив

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.

 

 

назад
далее
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам