Новые книги
Продающее письмо
Одна из самых стимулирующих меня вещей в рекламных письмах (в противоположность прямому взаимодействию с клиентом) - то, что они требует, чтобы Вы думали о потребностях клиента и желаниях заранее. Поскольку Дэн Кеннеди ясно дает понять в этой превосходной книге, что когда Вы овладеваете навыком побуждения потенциального клиента к действию, через продажное письмо, Вы берете всю предварительную работу и помещаете ее в действие — и действительно понимаете продажу товаров и как искусство и как практику. Я сначала узнал о замечательных навыках Дэна, когда мы начали взаимодействовать с ним на тему "информационного ролика" для нашей компании. (Рекламный ролик - по существу 30-секундное продажное письмо, приведенное в чувство по телевидению.) Мы использовали многие из методов, обрисованных в общих чертах в этой книге, чтобы получить сотни тысяч клиентов — и результаты составили более чем $20 миллионов в продажах в первый же год! Как только Вы изучаете основные принципы, описываемые Дэном в этой книге, Вы осознаете себя отмечающим хорошую коммерческую выгоду везде, где бы вы не находились и тут же вспоминаете советы Дэна относительно мотивации потенциальных клиентов. Наблюдаете ли Вы телевизионную рекламу, глядя на почту, на Вашем столе, или даже слушая продавца, Вы будете видеть, что действительно неотразимая коммерческая работа соответствует простым руководящим принципам, описанным в «убойных продажных письмах». Вы будете составлять свои презентации не только на бумаге, но и в повседневной жизни.
Сборник тестов: 1500 вопросов и ответов на знание Android
Книга содержит 30 тестов по 50 вопросов с ответами на знание Android. Книга предназначена для подготовки к экзаменам и собеседованиям.

Приемы программирования на JavaScrip
Версия для печати

 

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 в соответствии с иерархией объектов этого языка, начиная с самого старшего объекта и двигаясь вглубь дерева объектов: от объекта "окно" к элементам формы.

Назад | Содержание | Вперед