Ajax в действии

Приложение А Инструменты для профессиональной работы с Ajax 593

Рис. А.12. DOM Inspector (Mozilla) позволяет связывать с элементами DOM сценарии Переменная t a r g e t определяет узел DOM, выбранный в текущий момент; в данном случае это изображение планеты, границу которой мы хотим изменить

режиме с объектом можно связать программный сценарий, щелкнув правой кнопкой мыши на правой панели и выбрав кнопку Evaluate JavaScript. В качестве цели сценария (target) можно указать выбранный в текущий момент элемент DOM, поэтому, например, чтобы окружить этот элемент тонкой синей рамкой, можно ввести в поле команду target .style. border='4px solid blue'.

DOM Inspector также содержит третью панель, расположенную ниже двух описанных. В данной панели можно визуализировать видимое содержимое документа (рис. А. 13). Данная панель появится, если пользователь наберет в поле URL адрес страницы и щелкнет на кнопке inspect, после чего можно будет изучать расположенные рядом абстрактную DOM и видимый документ.

А.4.2. Инспекторы DOM для браузера Internet Explorer

Самой большой проблемой наборов инструментов для браузеров Mozilla является то, что инспекторы DOM не могут использоваться для выявления проблем в Internet Explorer. Впрочем, существует несколько продуктов, предлагающих подобные возможности и для этого браузера. Многие из них являются коммерческими или условно бесплатными, хотя имеется и несколько рабочих бесплатных утилит, например IEDocMon (подробнее о ней речь пойдет ниже — в разделе "Ресурсы1').

Подобно Mozilla DOM Inspector, панель инструментов IEDocMon предлагает простое двухпанельное представление DOM, с деревом слева и подробным представлением узлов справа (рис. А.13).

На этом мы завершаем обсуждение типов инструментов, используемых для разработки Ajax-проектов. Богатым поставщиком инструментов для работы с Ajax является сообщество, сформировавшееся в среде разработчиков расширений для браузера Firefox. В следующем разделе мы кратко опишем, как находить и устанавливать расширения Firefox.

Рис. А.13. Панель инструментов lEDocMon для Internet Explorer предлагает возможности, подобные DOM Inspector (Firefox) и позволяет быстро решать вопросы визуализации с помощью программных

пользовательских интерфейсов

14.3. Средство Safari DOM Inspector для Mac OS X

>раузер Safari для Mac OS X содержит встроенный инспектор DOM, который ызывается через меню отладки. По умолчанию данное меню не активизи- 'Овано. Чтобы активизировать его, запустите приложение Terminal и введи- е строку defaults write com.apple.Safari IncludeDebugMenu 1. В завиимости от ваших прав вам, возможно, придется использовать команду sudo. Госле ее выполнения перезапустите браузер Safari, и меню отладки должно удет появиться.

1.5. Установив расширений Firefox

1ы уже рассматривали два очень полезных расширения Firefox: отладчик ^enkman и сетевой отладчик LiveHTTPHeaders. Вообще, существует множегво расширений для Firefox. некоторые из которых предназначены для Webазработчиков В данном разделе мы кратко рассмотрим процесс установки годуля Firefox, используя в качестве примера расширение Modify Headers.

Расширения Firefox устанавливаются из самого браузера. Прежде все- о необходимо найти страницу загрузки расширения; в данном случае это ttps://addons .mozilla.org/extensions. На рис. А.14 показано, как со границы загрузки расширения Modify Headers можно перейти на основную границу сайта Mozilla Update.

В данном случае требуемая гиперссылка представляет собой большую нопку I n s t a l l Now. После щелчка откроется диалоговое окно с предупреждением об опасности установки неподписанных расширений (рис А.15).

Рис. А.14. Все установленные расширения в браузере Firefox отображаются во всплывак диалоговом окне

Рис. А.15. Расширения Firefox можно устанавливать из Интернета, используя специальный загружаемый архивный формат

Вотличие от обычного JavaScript-кода расширения имеют полный доступ

клокальной файловой системе. Кроме того, следует сказать о подписывании расширений. Теоретически это должно защитить автора от подделок, однако на практике подписываются не все расширения. После установки расширение регистрируется во всплывающем диалоговом окне Extensions (рис. А.16).

Нам осталось только закрыть все открытые окна Firefox (включая инспекторы DOM, отладчики и т.п.) и перезапустить Firefox. Теперь расширение готово к работе и отображается в меню Tools (рис. А.17).

Браузер Firefox поддерживает множество расширений, многие из которых предназначены для Web-разработчиков. Не все расширения можно найти на сайте addons.mozilla.org, но начинать поиск нужного инструмента стоит именно с этого сайта. Процедура установки расширения (в том числе рассмотренного ранее отладчика Venkman) обычно похожа на описанную выше.

198Часть V. Приложения

Киспользованию языка JavaScript приходят различными путями. Одним адо реализовать дополнительные элементы графического интерфейса, друим — написать сложные программы.

Данное приложение — не руководство по JavaScript; существуют многие орошие статьи и книги: которые помогут вам освоить данный язык. Мы ишь излагаем некоторые основные понятия, которые помогут специалистам, ладеющим Java и С#, в написании программ на JavaScript. (Сказанное отноится и к программистам, использующим C++. Однако необходимо заметить, то C + + унаследовал от С излишнюю гибкость, поэтому для специалистов, ривыкших к этому языку, переход к JavaScript будет менее болезненным.) 1сли вы принимали участие в промышленных проектах и полностью овладе- и приемами объектно-ориентированного программирования, то на первых гапах работы с JavaScript, находясь под влиянием Java или С#, вы будете корее бороться с языком, чем работать с ним. Мы испытали это на себе, оэтому считаем своим долгом помочь вам.

Спомощью JavaScript можно выполнять специфические действия, недогупные посредством Java и С#. В некоторых ситуациях особенности даного языка позволят получить требуемые результаты более простым путем ли добиться большей производительности. В любом случае решение о том, тедует ли воспользоваться имеющимися возможностями, остается за вами. ели ранее вы имели дело с такими языками, как Java или C++, мы надеем- I, что данное приложение поможет вам, как несколько лет назад подобная ^формация помогла некоторым из нас.

11. JavaScript — это не Java

акую нагрузку несет на себе имя? В случае Java и JavaScript оно направлено а обеспечение рыночного успеха и мало отражает суть. Язык JavaScript поучил это имя буквально в последнюю минуту перед тем, как быть представзнным широкой публике. Сотрудники отдела маркетинга компании Netscape эедложили его вместо планировавшегося ранее имени livescript. Вопреки южившемуся мнению, JavaScript не принадлежит к семейству языков С. н больше похож на такие функциональные языки, как Scheme и Self; его 1кже можно сравнить с языком Python. Однако в имени JavaScript притствует слово Java, и синтаксические правила для этих языков в чем-то зхожи. В некоторых случаях JavaScript ведет себя подобно Java, а в других гучаях демонстрирует совершенно противоположное поведение.

Эти различия позволяют использовать данные языки разными спосо1ми. а в некоторых случаях дают возможность проделывать в JavaScriptюграммах такие головокружительные трюки, которым позавидует и умуд- ^нный опытом сторонник Lisp.

Если вы опытный программист, то можете воспользоваться предоставгемыми возможностями и получить блестящие результаты, написав лишь сколько сотен строк исходного текста. Если же вы только считаете себя [ытным, а на самом деле ваша квалификация далека от совершенства, вы •гстро "завязнете1' в созданном вами коде.

Приложение Б. Инструменты для профессиональной работы с Ajax 599

Таблица Б.1. Основные различия между Java и JavaScript

базируются на прототипах суперклассов, виртуальных суперклассов или интерфейсов. Тип определяет функциональные возможности объекта.

В JavaScript объект по сути представляет собой ассоциативный массив. Для эмуляции в JavaScript типов, подобных типам Java, используются прототипы, но этим достигается лишь поверхностное сходство

Весь наш предыдущий опыт подтверждает, что в работе следует стремиться к простым решениям. Если вы входите в состав рабочей группы, то стандарты кодирования способствуют таким решениям (конечно, в том случае, когда руководство не возражает против их использования).

Представлять себе различия между языками необходимо также по следующей причине: некоторые из особенностей реализуются браузером, поэтому, понимая происходящее, можно сэкономить много времени и усилий, отлаживая приложение. Зная различия между JavaScript и Java, становится понятно, что сходство между этими языками лишь кажущееся.

Итак, читайте данное приложение и сами составьте представление о том, как в действительности выглядят объекты JavaScript, как они формируются и какие возможности предоставляют разработчику функции JavaScript.

и даже функции. Можно написать программу в виде набора команд, которые будут выполняться в процессе чтения их интерпретатором. Однако по мере усложнения программы обходиться без функций и объектов становится все труднее; не используя их, крайне сложно организовать должным образом свой код.

600 Часть V. Приложения

Создать объект JavaScript проще всего, вызвав встроенный конструктор класса Object.

var myObject=new Object();

В разделе Б.2.2 мы рассмотрим другие подходы и поговорим о том, что >значает ключевое слово new. Первоначально объект myObject — ''пустой'', :.е. он не содержит свойств и методов. Добавить их несложно; рассмотрим, сак это можно сделать.

5.2.1 Формирование объектов

<ак было сказано ранее, объект JavaScript представляет собой ассоциатив1ый массив, содержащий поля и имена. Ключевыми значениями для доступа i элементам массива являются имена. Синтаксис, подобный С, является свое- )бразной "надстройкой" над внутренней реализацией объекта. Существуют г альтернативные средства доступа к свойствам и функциям. Сложный объ- •кт можно создавать шаг за шагом, добавляя по мере необходимости новые

переменные и функции.

Существуют два способа формирования объекта. Первый из них — это >бычное использование JavaScript. Второй способ предполагает применение пециальной системы обозначений, называемой JSON. Начнем рассмотрение подхода, использующего средства JavaScript.

Трименение выражений JavaScript

Три выполнении фрагмента кода может возникнуть необходимость присво- [ть свойству объекта некоторое значение. Свойства объектов JavaScript дотекают чтение и запись, поэтому для присваивания значения можно испольовать обычный оператор =. Добавим свойство к созданному нами простому 'бъекту.

myObject.shoeSize="12";

В обычном объектном языке нам необходимо определить класс и объявить нем свойство shoesize. в противном случае на этапе компиляции будет генерировано сообщение об ошибке. В JavaScript все обстоит по-другому. Лы можем ссылаться на свойства, используя выражения, предназначенные ,ля работы с массивом. В данном случае поступим так лишь для того, чтобы одчеркнуть внутреннюю реализацию объекта.

myObject['shoeSize']="12";

Такая запись плохо подходит для повседневного использования, одна- о в некоторых случаях она может обеспечить определенные преимущества. > частности, работая с объектом как с массивом, мы можем реализовать тражение на этапе выполнения программы. Подробнее этот вопрос мы расмотрим в разделе Б.2.4.

Мы также можем динамически добавить новую функцию к объекту. myObject.speakYourShoeSize=function(){

602 Часть V. Приложения

ми существует сокращенная запись: в квадратных скобках указывается список значений, разделенных запятыми.

myLibrary.books=[predefinedBookl,predefinedBook2,predefinedBook3] ;

При формировании объекта JavaScript мы используем фигурные скобки; каждый элемент массива записывается как пара ключ:значение.

myLibrary.books={

bestseller : predefinedBookl, cookbook : predefinedBook2, spaceFiller : predefinedBook3

};

При любой записи лишние пробелы игнорируются, что позволяет выравнивать идентификаторы так, чтобы упростить восприятие программы. Ключевое значение может содержать пробелы. В этом случае, согласно правилам JSON, оно помещается в кавычки. Например:

"Best Seller" : predefinedBookl,

JSON-записи допускают вложенность. Это позволяет создавать сложные иерархии объектов (ограничением в данном случае является лишь максимально допустимая длина строки).

title : "Turnip Cultivation through the Ages", authors : [

{name: "Jim Brown", age: 9 },

{name: "Dick Turnip", age: 312 }

h

ЬpublicationDate : "long ago"

{

title : "Turnip Cultivation through the Ages, vol. 2", authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : new Date(1605,11,05)

}

]

);

В данном случае для объекта myLibrary заданы три свойства: location представляет собой обычную строку; keywords — это список строк с числовыми индексами; books — список объектов также с числовыми индексами. При этом каждый объект, содержащийся в books, содержит заголовок (строку), дату публикации (в одном случае это JavaScript-объект Date, а в другом — строка) и список авторов (массив). Каждый автор представлен параметрами name и age. JSON предоставляет механизм для формирования требуемой информации за один проход. В других случаях для этого потребовалось бы несколько строк кода (и большая пропускная способность).

Внимательные читатели, вероятно, заметили, что для второй книги мы