Проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. С подачи авторов языка С все современные книги по программированию начинаются с примера печати фразы "Hell
Аналогом "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 информационного ресурса, который следует загрузить при переходе по дан
Рис. 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 здесь также не удается, но она используется только для того, чтобы после выбора гипертекстовой ссылки в рабочем поле программы навигатора не появлялось пустой страницы, или не приходилось загружать вновь ста
Размещение кода программы на 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. В данный атрибут помещается только вызов функции, которая будет обраб
Для того, чтобы защитить текст функции от интерпретации браузерами, которые не поддерживают JavaScript, мы поместили код в HTML-комментарий. При этом последняя строка этого комментария должна начинаться как комментарий 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). Вообще говоря, в простом сообщении о типе программного обеспечения большого смысла нет,
Пример 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-интерпретатор. В этот момент будет проверяться условие
Рис.2.2. При загрузке был определен Netscape Navigator в качестве программы-браузера HTML-страниц
Вообще говоря, проверить тип программы просмотра можно на сервере протокола HTTP и передать программе просмотра уже готовую страницу без условной генерации ее содержания. Но это возможно только в том случае, когда автор страницы име
Однако, чаще всего, текст JavaScript-кода размещают в виде описания функций в заголовке документа, что делает использование такого кода более удобным. Связано это с двумя моментами, которые следует учитывать при написании JavaScript-про
Если код размещается в теле документа, то он интерпретируется только в случае переразметки отображаемого документа (загрузка, изменение параметров окна, перезагрузка). Если текст размещен в заголовке, то на него можно сослаться из любог
Вернемся теперь снова к примеру 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>
В данном случае текст условной генерации страницы размещен во внешнем файле. При загрузке страницы этот текст докачивается программой просмотра и исполняется так же, как если бы он размещался в документе. Любопытно, что при просмотре те
Пример 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 универсального локатора ресурсов (URL). В наших примерах мы уже использовали эту схему. Она помогала нам открывать окно-передупрежде
После этого небольшого отступления начнем рассматривать приемы программирования на JavaScript в соответствии с иерархией объектов этого языка, начиная с самого старшего объекта и двигаясь вглубь дерева объектов: от объекта "окно" к элем
Назад | Содержание | Вперед