2.13. Приемы программирования на JavaScript Проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. С подачи авторов языка С все современные книги по программированию начинаются с примера печати фразы "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 РІ соответствии СЃ иерархией объектов этого языка, начиная СЃ самого старшего объекта Рё двигаясь вглубь дерева объектов: РѕС‚ объекта "РѕРєРЅРѕ" Рє элементам формы.
|