Проще всего начать изучение программирования на
каком-либо языке с простых примеров, которые читатель может немедленно
проверить. С подачи авторов языка С все современные книги по
программированию начинаются с примера печати фразы "Hello world" в
разных ее проявлениях ("Hello Java", "Hello Perl" и т.п.). Для
JavaScript точного аналога такого подхода найти нельзя. Но мы попробуем
проиллюстрировать на простых примерах основные приемы программирования.
Аналогом "Hello world" можно считать выдачу
сообщения в отдельном окне, которое порождается при нажатии на
гипертекстовую ссылку:
Пример 2.9. Программа выдачи простого предупреждения при выборе гипертекстовой ссылки. Схема URL - JavaScript
<HTML>
<HEAD>
<title>Самый первый пример JavaScript</title>
</HEAD>
<BODY>
<center>
<h1>Мой первый пример JavaScript</h1>
<hr>
</center>
В текст этого документа внедрена гипертекстовая
ссылка
<a href="javascript:window.alert(
'Do you speak English?')">
"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.
Рис. 2.1. Выполнение скрипта при выборе гипертекстовой ссылки
Добиться такого же эффекта можно и другим
способом, не прибегая к новой схеме URL. Для этой цели можно
использовать событие, которое генерируется программой-навигатором при
выборе гипертекстовой ссылки - Click.
Пример 2.10. Программа выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки
<HTML>
<HEAD>
<title>Самый первый пример JavaScript</title>
</HEAD>
<BODY>
<center>
<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>
<script language="JavaScript">
<!-- Start the text of programme
function question()
{
window.alert("Do you speak English?");
}
// -->
</script>
</HEAD>
<BODY>
<center>
<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>
<center>
<form name=kuku>
<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>
<script language=JavaScript>
<!--
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 будет выдано еще и
окно предупреждения.
Рис.2.2. При загрузке был определен Netscape Navigator в качестве программы-браузера HTML-страниц
Вообще говоря, проверить тип программы
просмотра можно на сервере протокола 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 language=JavaScript src=netscape.jsc>
</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 в соответствии с
иерархией объектов этого языка, начиная с самого старшего объекта и
двигаясь вглубь дерева объектов: от объекта "окно" к элементам формы.
Назад | Содержание | Вперед | 
(0) голосов | Категория: