Новые книги

Как придумать удачный дизайн? И как оценить качество дизайна? На эти вопросы отвечает Чип Кидд – знаменитый книжный дизайнер и один из самых остроумных спикеров ТЕД. В отличие от “просто” искусства, дизайн всегда решает какую-то конкретную проблему. Как сделать максимально понятным дорожный знак? Как нарисовать обложку, которая превратит книгу в бестселлер? Как придумать остроумный и подкупающий рекламный слоган? И как не поддаться соблазну циничной манипуляции, инструментом которой подчас становится дизайн (“Разумеется, это полезный продукт! Смотрите – на упаковке нарисована морковка!”)? К счастью, нам не обязательно быть дизайнерами, чтобы оценить, насколько хорошо дизайн решает проблемы. Ведь это наши проблемы.

В формате pdf A4 сохранен издательский дизайн.
Master Android from first principles and begin the journey toward your own successful Android applications!

Dear Reader,

First, welcome to the world of Android! We’re entering a new era of mobile application development, one marked by open platforms and open source, to take ‘walled gardens’ and make them green houses for any and all to participate in. Android is relatively easy for developers, and I believe that this innovation will help generate a large ecosystem of developers and consumers within a very short time. This means that budding developers such as yourself will have many opportunities to design and build your own applications and you’ll have a huge and hungry customer base.

Second, welcome to the book! Its purpose is to start you on your way with building Android applications, and to help you master the learning curve. Android is already a rich framework, comparable in many ways to the richness Android of desktop Java environments. This means that there is a lot of cool stuff for you to pick up along your journey in order to create the slickest, most useful apps Android you can imagine.

The source code for the code samples in this book is all available from the Apress site, so you can stay as hands-on and practical as you like while I introduce you to the core of Android, and invite you to experiment with the various classes and APIs we’ll be looking at. By the time you’ve finished this book, you’ll be creating your own Android applications and asking yourself what your next great application will be…!

Enjoy!

Mark Murphy

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

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