проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. с подачи авторов языка с все современные книги по программированию начинаются с примера печати фразы "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) с атрибутом обработки события.