Практическое введение в программирование на JavaScript (стр. 6 )

2.13. Приемы программирования на JavaScript

Проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. С подачи авторов языка С все современные книги по программированию начинаются с примера печати фразы "Hello world" в разных ее проявлениях ("Hello Java", "Hello Perl" и т. п.). Для JavaScript точного аналога такого подхода найти нельзя. Но мы попробуем проиллюстрировать на простых примерах основные приемы программирования.

Аналогом "Hello world" можно считать выдачу сообщения в отдельном окне, которое порождается при нажатии на гипертекстовую ссылку:

Пример 2.9. Программа выдачи простого предупреждения при выборе гипертекстовой ссылки. Схема URL - JavaScript

<HTML>

<HEAD>

<title>Самый первый пример JavaScript</title>

</HEAD>

<BODY>

<h1>Мой первый пример JavaScript</h1>

<hr>

</center>

В текст этого документа внедрена гипертекстовая ссылка

"Don`t click here"

</a>.

Любопытно, что будет, если все-таки выбрать?

</BODY>

</HTML>

В данном примере среди текста документа расположена гипертекстовая ссылка "Don`t click here". Если ее выбрать при просмотре (кликнуть мышкой), то на экране появится окно-предупреждение с вопросом: "Do you speak English?".

Генерация этого окна осуществляется специальным методом window. alert, который выполняется при выборе гипертекстовой ссылки. Если быть более точным, то в качестве URL информационного ресурса, который следует загрузить при переходе по данной гипертекстовой ссылке, используется схема JavaScript - расширение спецификации URI для программирования сценариев просмотра гипертекстовых документов World Wide Web. В этом случае выполнение JavaScript-программы происходит при выборе гипертекстовой ссылки, а сам код программы записан как URL.

НЕ нашли? Не то? Что вы ищете?

Добиться такого же эффекта можно и другим способом, не прибегая к новой схеме URL. Для этой цели можно использовать событие, которое генерируется программой-навигатором при выборе гипертекстовой ссылки - Click.

Пример 2.10. Программа выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки

<HTML>

<HEAD>

<title>Самый первый пример JavaScript</title>

</HEAD>

<BODY>

<h1>Мой первый пример JavaScript</h1>

<hr>

</center>

В текст этого документа внедрена гипертекстовая ссылка

<a href="javascript:void(0)" onClick="window. alert('Do you speak

English?')">"Don`t click here"</a>. Любопытно, что будет,

если все-таки выбрать?

</BODY>

</HTML>

Обойтись без новой схемы URL здесь также не удается, но она используется только для того, чтобы после выбора гипертекстовой ссылки в рабочем поле программы навигатора не появлялось пустой страницы, или не приходилось загружать вновь старую страницу. Для обработки события используется конструкция onClick, которая реализует обращение к обработчику (handler) данного события, который в свою очередь вызывает выполнение кода, записанного вслед за onClick.

Размещение кода программы на JavaScript непосредственно в тагах HTML является обычным делом, но не всегда бывает удобным. Наиболее часто JavaScript-код выносят в специальный HTML-контейнер SCRIPT(</script>.....</script>). Для того, чтобы продемонстрировать применение этого подхода, видоизменим наш пример следующим образом:

Пример 2.11. Применение контейнера SCRIPT для размещение JavaScript-кода

<HTML>

<HEAD>

<title>Самый первый пример JavaScript</title>

<!-- Start the text of programme

function question()

{

window. alert("Do you speak English?");

}

// -->

</script>

</HEAD>

<BODY>

<h1>Мой первый пример JavaScript</h1>

<hr>

</center>

В текст этого документа внедрена гипертекстовая ссылка

<a href="javascript:void(0)" onClick="question()">"Don`t click

here"</a>. Любопытно, что будет, если все-таки выбрать?

</BODY>

</HTML>

Данный пример развивает применение JavaScript-кода для обработки события Click. Но только в этом случае мы не размещаем весь код обработки события в атрибуте onClick. В данный атрибут помещается только вызов функции, которая будет обрабатывать это событие. Само тело функции размещено в заголовке HTML-документа внутри тагов <script...> и </script>

Для того, чтобы защитить текст функции от интерпретации браузерами, которые не поддерживают JavaScript, мы поместили код в HTML-комментарий. При этом последняя строка этого комментария должна начинаться как комментарий JavaScript, чтобы браузер, понимающий JavaScript, не интерпретировал ее как часть JavaScript-кода.

Различные браузеры поддерживают разные версии JavaScript, что накладывает определенные ограничения при написании сценариев JavaScript. Для того, чтобы максимально адаптировать свою программу к конкретному типу программного обеспечения, часто включают проверку версии и имени программы-браузера в JavaScript.

Пример 2.12. Получение типа программы просмотра HTML-страниц

<HTML>

<HEAD>

<title>Test of Browser name</title>

</HEAD>

<BODY>

<h1 align=center>Проверка имени типа браузера;</h1>

<hr>

Для того, чтобы получить имя вашей программы просмотра

выберите кнопку "Browser"<br>

<input type=button name=browser value=Browser

onClick="window. alert(window. navigator. appName)">

</form>

</BODY>

</HTML>

Данная программа в точности повторяет пример 2.10, но в окне предупреждения выдает имя программы просмотра HTML-страниц (window. navigator. appName). Вообще говоря, в простом сообщении о типе программного обеспечения большого смысла нет, но если вставить проверку данного имени в текст HTML-страницы и реализовать условную компиляцию страницы, то тогда обращение к данной конструкции JavaScript будет оправданным:

Пример 2.13. Условная генерация текста страницы по типу программы просмотра

<HTML>

<HEAD>

<title>Test of Browser name</title>

</HEAD>

<BODY>

<h1 align=center>Проверка имени типа браузера</h1>

<hr>

<!--

if(window. navigator. appName == "Netscape")

{

document. write("<br><center><font color=steelblue size=+5>");

document. write("У вас хороший навигатор.");

document. write("</font></center>");

}

else

{

document. write("<font color=red size=+3>Необходим Netscape Navigator

версии 3.0 и выше.</font>");

window. alert("Down load new version of your browser now.");

}

// -->

</script>

</BODY>

</HTML>

В данном примере текст JаvaScript-программы размещен непосредственно в теле документа. При его загрузке, когда HTML-интерпретатор доходит до контейнера SCRIPT, вызывается JavaScript-интерпретатор. В этот момент будет проверяться условие, которое содержится в операторе if. В зависимости от результата проверки этого условия остальной текст страницы примет тот или иной вид в зависимости от типа программы просмотра. При просмотре данного документа программой отличной от Netscape Navigator будет выдано еще и окно предупреждения.

Вообще говоря, проверить тип программы просмотра можно на сервере протокола HTTP и передать программе просмотра уже готовую страницу без условной генерации ее содержания. Но это возможно только в том случае, когда автор страницы имеет возможность программировать на машине где установлен сервер и имеет возможность администрировать этот сервер. В ряде случаев, когда место под Website арендуется и в договоре аренды нет пункта, обеспечивающего управление ресурсами сервера, в этом случае программы с условной генерацией содержания страниц бывают чрезвычайно полезными. Другой случай - это работа в локальном режиме без сервера. Здесь JavaScript является единственным средством управления просмотром. Существует еще ряд случаев, когда применение контейнера SCRIPT в теле документа является вполне оправданным, но на них мы остановимся позже в контексте решения конкретных задач управления сценариями просмотра.

Однако, чаще всего, текст JavaScript-кода размещают в виде описания функций в заголовке документа, что делает использование такого кода более удобным. Связано это с двумя моментами, которые следует учитывать при написании JavaScript-программ: область действия описания программы (из каких частей документа или страницы она видна, а следовательно, на нее можно сослаться как на функцию, и принципы интерпретации кода при просмотре документа.

Если код размещается в теле документа, то он интерпретируется только в случае переразметки отображаемого документа (загрузка, изменение параметров окна, перезагрузка). Если текст размещен в заголовке, то на него можно сослаться из любого места документа, а точнее из любого обработчика событий, которые указываются как атрибуты HTML-тагов.

Вернемся теперь снова к примеру 2.13, но только разместим теперь код JavaScript не в тексте документа, а в отдельном файле:

Пример 2.14. Размещение скрипта в отдельном файле (netscape. jsc)

<HTML>

<HEAD>

<title>Test of Browser name</title>

</HEAD>

<BODY>

<h1 align=center>Проверка имени типа браузера</h1>

<hr>

</script>

</BODY>

</HTML>

В данном случае текст условной генерации страницы размещен во внешнем файле. При загрузке страницы этот текст докачивается программой просмотра и исполняется так же, как если бы он размещался в документе. Любопытно, что при просмотре текста документа через опцию "View Source" текст скрипта не отображается, что дает возможность скрыть его содержание от пользователя. В самом файле, который содержит конструкции JavaScript, HTML-таги не используются:

Пример 2.15. Содержание файла netscape. jsc, ссылка на который установлена в атрибуте SCR тага <SCRIPT > из примера 6

if(window. navigator. appName == "Netscape")

{

document. write("<br><center><font color=steelblue size=+5>");

document. write("У вас хороший навигатор.");

document. write("</font></center>");

}

else

{

document. write("<font color=red size=+3>Необходим Netscape Navigator

версии 3.0 и выше.</font>");

window. alert("Down load new version of your browser now.");

}

На этом можно закончить вступительную часть, посвященную примерам JavaScript-кода, и перейти к более планомерному изложению приемов программирования на JavaScript, если бы не одно "но". Дело в том, что любой автор, который собирается излагать программирование на JavaScript, встречается с проблемой постепенного наращивания сложности примеров. Материал надо начинать излагать "от печки", но вот этой самой печки нет. Все программы на JavaScript (Client-site JavaScript) - это в той или иной мере программы обработки событий, которые связаны с теми или иными информационными объектами. Без изучения этих объектов нельзя начинать ничего программировать.

Однако, существует лазейка в этом заколдованном круге, которой мы и воспользуемся. Это схема JavaScript универсального локатора ресурсов (URL). В наших примерах мы уже использовали эту схему. Она помогала нам открывать окно-передупреждение при выборе гипертекстовой ссылки (пример 2.10) и избегать перезагрузки страниц (пример 2.11). Мы будем пользоваться этой схемой вызова JavaScript-кода до тех пор, пока не появится в нашем рассмотрении объект (контейнер HTML) с атрибутом обработки события.

После этого небольшого отступления начнем рассматривать приемы программирования на JavaScript в соответствии с иерархией объектов этого языка, начиная с самого старшего объекта и двигаясь вглубь дерева объектов: от объекта "окно" к элементам формы

2.14. Примеры манипулирования окнами

Как это не покажется странным, но в наших простых примерах мы уже начали манипулировать окнами. Открытие окна-пердупреждения - это операция над объектом "окно". Определим свойства объекта "окно", методы изменения этих свойств и события, которые могут быть связаны с объектом типа "окно". При этом мы не ставим перед собой задачи описания всех известных в JavaScript свойств, методов и событий, связанных с объектами этого класса. Определим только те, которые понадобятся в наших примерах.

Методы

Методы позволяют нам создать на экране видимое окно, закрыть окно и проделать с ним другие операции. С методом window. alert мы уже знакомы. Методы window. confirm и window. prompt используются для получения ответов от пользователя:

Пример 2.16. Использование методов Alert, Prompt, Confirm

<HTML>

<HEAD>

<title>Window simple example</title>

</HEAD>

<BODY>

<h1>Simple window methods</h1>

<hr>

</center>

<ul>

<li><a href="javascript:window. alert('Attention!!! press the button to continue.')">Метод Alert.</a>

<li><a href="javascript:window. status=window. confirm('Answer yes or no.');void(0);">Метод Confirm.</a>

<li><a href="javascript:window. status=window. prompt('Type string here:','');void(0);">Метод Prompt.</a>

</ul>

</BODY>

</HTML>

В данном примере при вызове метода confirm появляется окно с просьбой подтверждения некоторого действия, при использовании метода prompt - окно с приглашением ввести информацию в поле ввода. В двух последних случаях если не указать функции void(0), произойдет замещение текста HTML-документа на значение, которое возвращают эти два метода. Если внимательно смотреть за полем окна навигатора, в котором отображается информация о загрузке документов, то там можно будет увидеть возвращаемые значения, т. к. они присваиваются свойству status текущего окна, которое связано именно с этим полем, и которому можно присваивать значения, и, следовательно, эти значения будут отображаться в этом поле.

Однако, следует признать, что рассмотренные выше методы используются крайне редко. А тем более в приведенном здесь контексте, поэтому поспешим рассмотреть методы открытия и закрытия окна.

Открыть окно можно используя метод open:

Пример 2.17. Метод window. open

<HTML>

<HEAD>

<title>Window simple example</title>

</HEAD>

<BODY>

<h1>Open window methods</h1>

<hr>

</center>

Если выбрать гипертекстовую ссылку

<a href="javascript:window. open('simple8.htm','example','scrollbars,

resizable, width=300,height=200');void(0);">Открыть окно</a>, то

будет открыто новое окно. Чаще всего этот прием используют

при создании контекстно зависимых меню.

</BODY>

</HTML>

В данном случае при выборе гипертекстовой ссылки будет открыто окно шириной 300 пикселей и высотой 200 пикселей, в окне не будет никаких стандартных меню навигатора, и в окно будет загружен документ simple8.html. Метод open позволяет также определить области прокрутки, наличие или отсутствие стандартных меню навигатора и возможность изменения размеров окна. Последняя возможность зависит от платформы на которой исполняется скрипт.

Документ simple8.htm в свою очередь содержит код, который позволяет закрыть окно, открытое в примере 2.17:

Пример 2.18. Закрыть текущее окно

<HTML>

<HEAD>

<title>Window simple example</title>

</HEAD>

<BODY>

<h1>Close window methods</h1>

<hr>

</center>

Если выбрать гипертекстовую ссылку

Закрыть окно</a>, то

данное окно будет закрыто.

</BODY>

</HTML>

В данном примере в качестве гипертекстовой ссылки используется ссылка на метод widow. close(), который закрывает текущее окно. На применении методов open и close построен принцип построения help. По методу open открывается окно подсказки. В него загружают текст документа-подсказки с заранее заготовленной ссылкой на закрытие окна. При выборе этой ссылки окно подсказки закрывается, и пользователь продолжает работать с основным окном навигатора.

Рассмотрим еще один метод, связанный с окном - метод scroll. Данный метод позволяет организовать прокрутку текста в окне.

Пример 2.19. Прокрутка текста в окне навигатора

<HTML>

<HEAD>

<title>Scroll text</title>

</HEAD>

<BODY>

<h1>Прокрутка текста в окне навигатора</h1>

<hr>

[<a href="javascript:for(i=0;i<80;i++)

{window. scroll(0,i*10)};void(0);">Прокрутить текст</a>]

<hr>

</center>

Вообще говоря, проверить тип программы просмотра можно на сервере

протокола HTTP и передать программе просмотра уже готовую страницу

без условной генерации ее

...

<hr>

<center>[<a href=#top>Вернуться в начало</a>]</center>

</BODY>

</HTML>

От метода прокрутки мы перейдем теперь к методу, который позволит нам прокручивать документ более равномерно - это метод setTimeout. Большинству пользователей Web он знаком по бегущим строкам в поле статуса программы-навигатора. Метод setTimeout позволяет отложить выполнение функции, которая указывается в качестве аргумента на определенное количество миллисекунд. Системы прокрутки в этом случае рекурсивно вызывают свое выполнение через этот метод и тем самым порождают бесконечный цикл прокрутки.

Пример 2.20. Прокрутка текста по таймеру

<HTML>

<HEAD>

<title>Scroll text</title>

<!--

i=0;flag=0;start_stop=0;

function my_scroll()

{

if(start_stop==1)

{

window. scroll(0,i*10);

if(flag==0) i++;

if(flag==1) i--;

if(i>80) {i=80;flag=1;}

if(i<0) {i=0;flag=0;}

}

setTimeout("my_scroll()",500);

}

function kuku()

{

if(start_stop == 0)

{

start_stop =1;

}

else

{

start_stop =0;

}

// -->

</script>

</HEAD>

<h1>Прокрутка текста в окне навигатора</h1>

<hr>

[<a href="javascript:kuku();void(0);">Запустить/Остановить</a>]

<hr>

</center>

Вообще говоря, проверить тип программы просмотра можно на сервере

протокола HTTP и передать программе просмотра уже готовую страницу

без условной генерации ее

...

<hr>

<center>[<a href=#top>Вернуться в начало</a>]</center>

</BODY>

</HTML>

В данном примере мы не стали писать текст программ в самих гипертекстовых ссылках и вынесли его в заголовок документа. В данном случае это облегчает чтение текста и отладку программы. Текст прокручивается через каждые 500 миллисекунд, что делает прокрутку более плавной. В примере мы впервые применили событие onLoad. Это событие запускает процесс выполнения нашей функции. Прокрутка текста осуществляется в двух направлениях: сначала снизу вверх, а по достижении конца документа сверху вниз.

Следует подробно остановиться на особенностях исполнения метода setTimeout. Особенно в части запуска и останова процедуры прокрутки. Рассматривать алгоритм ее исполнения лучше всего в контексте многопоточных или многозадачных систем. Функция my_scroll - это отдельный процесс (поток), который исполняется программой-навигатором. В момент, когда интерпретатор навигатора встречает метод setTimeout, он создает новый процесс (поток), эквивалентный функции my_scroll, и откладывает его исполнение на 500 миллисекунд. После этого он продолжает выполнять текущий процесс (поток). В нашем случае вызов метода setTimeout - это последняя команда функции my_scroll, поэтому после нее ничего не выполняется, а сам процесс или поток, связанный с текущей функцией my_scroll после обработки setTimeout уничтожается. Однако, новый процесс (поток) уже создан в памяти и ждет начала своего исполнения.

В нашем примере новый процесс поток порождается всякий раз, как интерпретатор достигает метода setTimeout, а уничтожается, когда интерпретатор доходит до последнего оператора этого потока. Такой алгоритм выполнения заставляет расположить вызов setTimeout за пределами блока проверки условий скроллинга. Если мы расположим его внутри, то при останове скроллинга новый процесс не будет порожден, а это значит, что и кода, который будет реагировать на флаг скроллинга после останова, не будет существовать, т. е. запустить скроллинг не будет никакой возможности. Именно по этой причине функция my_scroll начинает исполняться сразу после загрузки документа по событию onLoad, но т. к. флаг скроллинга 0, то прокрутки текста не происходит. Процесс порождается все время, пока страница загружена в текущее окно навигатора.

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

2.15. Гипертекстовые ссылки и картинки

Гипертекстовые ссылки и картинки - это свойства объекта "документ", который в свою очередь является частью объекта "окно". И гипертекстовые ссылки, и картинки составляют встроенные массивы, к которым можно обращаться по индексу. Рассмотрим несколько примеров программирования массивов гипертекстовых ссылок и картинок.

Просмотр фотографий образцов через список гипертекстовых ссылок

Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки определено событие onSelect. Для того, чтобы не происходил переход к другой странице, а выполнялась только обработка события, в поле href необходимо определить вызов JavaScript. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пример 2.21. Изменение картинки через гипертекстовую ссылку

<HTML>

<HEAD>

<TITLE>HTTPD\HTDOCS\JAVASCR\EXAMPLE1</TITLE>

<!-- Защитили текст скрипта от старых браузеров

function l_image(a)

{

document. images[1].src=a

}

// -->

</SCRIPT>

</HEAD>

<H1>

<FONT COLOR="#000099">Просмотр фотографий образцов</FONT>

</H1>

<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>

</CAPTION>

<TR>

<TD>

<UL>

<LI><A HREF="javascript:l_image('freeze. gif')">Холодильник</A> </LI>

<LI><A HREF="javascript:l_image('dust. gif')">Пылесосы</LI>

<LI><A HREF="javascript:l_image('toster. gif')">Тостер</LI>

<LI><A HREF="javascript:l_image('cook. gif')">Варочный стол</LI>

<LI><A HREF="javascript:l_image('oven. gif')">Духовка</LI>

<LI><A HREF="javascript:l_image('wash. gif')">Стиральная машина</LI>

<LI><A HREF="javascript:l_image('dishwash. gif')">Посудомоечная машина</LI>

</UL>

</TD>

</TR>

</TABLE>

</center>

</BODY>

</HTML>

В данном примере при выборе гипертекстовой ссылки происходит вызов функции l_image(), которая изменяет значение атрибута SRC в контейнере IMG. Таким образом, можно организовать просмотр различных товаров в одном единственном графическом окне.

Изменение картинки путем выбора предмета из списка.

Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещается выпадающее меню выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. При выборе альтернативы из меню происходит событие onChange, которое вызывает функцию l_image. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пример 2.22. Выбор картинки из списка

...

<!-- Защитили текст скрипта от старых браузеров

pictures = new Array()

for(i=0;i<8;i++)

{

pictures[i] = new Image()

if(i==0) pictures[i].src = "freeze. gif"

if(i==1) pictures[i].src = "dust. gif"

if(i==2) pictures[i].src = "toster. gif"

if(i==3) pictures[i].src = "cook. gif"

if(i==4) pictures[i].src = "oven. gif"

if(i==5) pictures[i].src = "wash. gif"

if(i==6) pictures[i].src = "dishwash. gif"

}

function l_image()

{

document. images[1].src = pictures[document. form1.item. selectedIndex].src

}

// -->

</SCRIPT>

[ На начало страницы ]

Фрагмент HTML-разметки с вызовом функции изменения картинки:

<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>

</CAPTION>

<TR>

<th>

<option>Холодильник

<option selected>Пылесос

<option>Тостер

<option>Варочный стол

<option>Духовка

<option>Cтиральная машина

<option>Посудомоечная машина

</select>

</form>

</th>

</tr>

<tr>

</TR>

</TABLE>

[ <a href=#top>На начало страницы</a> ]

<HR>

</center>

В данном примере картинка выбирается как элемент списка. При этом происходит событие onChange, и по нему определяют, какой именно элемент был отобран.

Листание картинок и их автоматический просмотр

Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещаются три кнопки управления просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй ячейке размещаются картинки, выбранные путем листания. Листание осуществляется кнопками "Вперед" и "Назад". Возможен и другой вариант выбора картинки, когда система сама через некоторый промежуток времени периодически меняет картинки. Для этого следует сначала запустить автоматическую смену картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет показана нужная картинка, остановить автоматическое листание, снова нажав на кнопку "Старт/Стоп". Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пример 2.23. Листание и прокрутка картинок

<!-- Защитили текст скрипта от старых браузеров

pictures = new Array()

for(i=0;i<8;i++)

{

pictures[i] = new Image()

if(i==0) pictures[i].src = "freeze. gif"

if(i==1) pictures[i].src = "dust. gif"

if(i==2) pictures[i].src = "toster. gif"

if(i==3) pictures[i].src = "cook. gif"

if(i==4) pictures[i].src = "oven. gif"

if(i==5) pictures[i].src = "wash. gif"

if(i==6) pictures[i].src = "dishwash. gif"

}

n=0;

flag=0;

function next_image()

{

if(flag==0)

{

n++;if(n>6) n=0;

document. images[1].src = pictures[n].src

}

function back_image()

{

if(flag==0)

{

n--;if(n<0) n=6;

document. images[1].src = pictures[n].src

}

function scroll_image()

{

if(flag==1)

{

n++;if(n>6) n=0;

document. images[1].src = pictures[n].src

}

setTimeout("scroll_image()",1500);

}

function start_stop()

{

if(flag==0)

{

flag=1

}

else

{

flag=0

}

// -->

</SCRIPT>

[ На начало страницы ]

<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>

</CAPTION>

<TR>

<th>

<input name=ss type=button value="Старт/Стоп"

onClick=start_stop()>

</form>

</th>

</tr>

<tr>

</TR>

</TABLE>

В этом примере мы используем те же средства, что использовали и для организации скроллинга. Алгоритм останова и запуска прокрутки тот же, что и при скроллинге окна.

Пример использования client-site imagemap

В данном примере мы хотим показать возможность изменения картинки imagemap с одновременным изменением гипертекстовых ссылок, связанных с этой картинкой. Такая возможность существует только в том случае, если все картинки, которые мы хотим использовать в качестве imagemap, имеют одинаковую компоновку. Мы реализуем просмотр вариантов в виде горизонтального меню в верхней строке таблицы и imagemap - в нижней строке таблицы, т. к. наша картинка имеет формат ландшафта.

Пример 2.24. Динамический imagemap

<!-- Защитили текст скрипта от старых браузеров

function print_form(a)

{

document. form1.kuku. value = a

}

function set_image(a)

{

if(a == "bosh")

{

document. form1.kuku. value= "Техника фирмы Bosh."

document. links[5].href = "javascript:print_form(\'Refregarator: Bosh-10245(-24C;Remote Control)\')"

document. links[6].href = "javascript:print_form(\'Aero-Filter: Bosh-1212(Steel Filter)\')"

document. links[7].href = "javascript:print_form(\'Oven: Bosh-3432(Варочный стол + духовка)\')"

document. links[8].href = "javascript:print_form(\'Wash mashine: Bosh-2343(Dry Mode)\')"

document. links[9].href = "javascript:print_form(\'Dish wash machine: Bosh-DW-44\')"

document. links[10].href = "javascript:print_form(\'Water pipe: Bosh(Steel + Ceramic)\')"

}

if(a == "Indesit")

{

document. form1.kuku. value= "Техника фирмы Indesit."

document. links[5].href = "javascript:print_form(\'Indesit-105(-18C)\')"

document. links[6].href = "javascript:print_form(\'Indesit-101(Steel Filter)\')"

document. links[7].href = "javascript:print_form(\'Indesit-3432(Варочный стол + духовка)\')"

document. links[8].href = "javascript:print_form(\'Indesit-343(Wash only)\')"

document. links[9].href = "javascript:print_form(\'Indesit-DWR-Safe\')"

document. links[10].href = "javascript:print_form(\'No in the frame\')"

}

if(a == "candy")

{

document. form1.kuku. value= "Техника фирмы Candy."

document. links[5].href = "javascript:print_form(\'Candy-122(-24C;Hidden model)\')"

document. links[6].href = "javascript:print_form(\'Candy-12(Steel Filter + Carbone Filter)\')"

document. links[7].href = "javascript:print_form(\'Candy(Варочный стол + духовка)\')"

document. links[8].href = "javascript:print_form(\'Candy-343(Dry Mode)\')"

document. links[9].href = "javascript:print_form(\'Candy-DWR Elite\')"

document. links[10].href = "javascript:print_form(\'Candy(Ceramic)\')"

}

document. images[1].src= a+".gif"

}

// -->

</SCRIPT>

[ На начало страницы ]

</map>

<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>

</CAPTION>

<TR>

<TH>

</th>

<th>

<a href="javascript:set_image('idezit')">Indesit</a>

</th>

<th>

<a href="javascript:set_image('candy')">Candy</a>

</th>

</TR>

<TR>

</TR>

</TABLE>

В данном примере меняются не только картинки, но и стеки гипертекстовых ссылок под ними. Для каждой новой картинки определяются свои собственные гипертекстовые ссылки

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6

Практическое введение в программирование на JavaScript (стр. 6 )

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы