Встроенный отладчик Dreamweaver

Чтобы вызвать встроенный в Dreamweaver отладчик JavaScript-кода, нажмите комбинацию клавиш ALT + F12 или CTRL + ALT + F12. Первая комбинация запускает отладку в первичном Web-обозревателе, а вторая – во вторичном. (О первичном и вторичном Web-обозревателях см. главу 2.) Также вы можете выбрать нужный пункт в подменю Debug in Browser меню File или меню кнопки Preview/Debug in Browser инструментария документа. После этого нажмите кнопку ОК в нескольких появившихся на экране окнах-предупреждениях, чтобы собственно запустить отладчик. И подождите некоторое время, пока все это загрузится и запустится.

Внимание
Для того чтобы запустить отладчик Dreamweaver, вы должны иметь на своем компьютере установленную виртуальную машину Java фирмы Microsoft. Будьте внимательны: в составе Windows XP эта виртуальная машина не поставляется – вам самим придется загружать ее с сайта этой фирмы.

После загрузки и запуска отладчика Dreamweaver выведет небольшое предупреждение с кнопкой ОК и флажком Don't show me this message again. Это предупреждение предлагает вам установить точки останова и запустить отладку. Закройте это окно, нажав ОК; вы можете перед этим включить флажок Don't show me this message again, если больше не хотите его видеть.

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

Программный код, отображаемый в верхней половине окна отладчика, пронумерован по строкам. Номера строк отображаются на серой полосе, тянущейся вдоль левого края всей верхней половины. Строка, которая в данный момент должна быть выполнена, помечена маленькой желтой стрелкой, направленной вправо.

Теперь мы должны, как предлагает Dreamweaver, установить точки останова и запустить отладку. Давайте так и сделаем.

Чтобы установить точку останова, поставьте текстовый курсор на нужной строке программного кода (кода JavaScript, а не HTML) и нажмите клавишу F7. Вы также можете выбрать пункт Set/Remove Breakpoint в контекстном меню или нажать одноименную кнопку инструментария отладчика. Точка останова обозначается специальным маркером – небольшим красным кружком, стоящим на серой полосе с номерами строк напротив соответствующей строки кода.

Если вы случайно ошиблись и поставили точку останова не там, поставьте на строке, где стоит точка останова, текстовый курсор и снова нажмите клавишу F7, кнопку Set/Remove Breakpoint или пункт в контекстном меню. Вы также можете убрать одновременно все точки останова в коде, нажав кнопку Remove All Breakpoints или выбрав в контекстном меню одноименный пункт.

Расставив точки останова, можно запускать код на выполнение. Для этого нажмите кнопку Run инструментария отладчика или клавишу F8. Кнопка Stop Debugging позволит вам отключить отладчик и продолжить выполнение JavaScript-кода без него.

Когда Web-сценарий выполняется из-под отладчика, его быстродействие невелико, особенно на маломощных компьютерах. Это происходит потому, что отладчик перехватывает и проверяет каждое выражение, выполняемое интерпретатором. Поэтому, чтобы увидеть реальное быстродействие вашего кода, "прогоните" его впоследствии без отладчика.

Дойдя до ближайшей установленной вами точки останова, выполнение кода временно прервется. Маркер точки останова в этом случае примет такой вид. Чтобы запустить его дальше, нажмите кнопку Run инструментария отладчика или клавишу F8.

Вы также можете использовать кнопки Step Over, Step Into и Step Out инструментария отладчика для пошагового выполнения кода, выражение за выражением.

Нажатие кнопки Step Over или клавиши F9 вызывает простой переход на следующее выражение.

Кнопка Step Into (нажатие клавиши F10) аналогична Step Over за одним исключением. Если следующее выражение программного кода является вызовом функции, то далее начнет выполняться первое выражение кода функции, т. е. вы как бы "зайдете" в функцию. Имейте в виду, что "зайти" таким образом можно только в функции, созданные самим программистом.

Кнопка Step Out (нажатие клавиши F11) действует только тогда, когда выполняется код какой-либо функции. При ее нажатии выполняется весь код функции, и очередная остановка происходит на выражении, следующим за вызовом этой функции, т. е. кнопка Step Out позволит вам "выйти" из функции.

Теперь обратимся к списку переменных, находящемуся в нижней части окна отладчика. Вы видите, что этот список, как и многие списки Dreamweaver, представляет собой таблицу, состоящую из двух колонок. В первой колонке – Variable Name – отображается имя переменной или свойства, а во второй – Value – его значение. Вы можете выделить любую строку в списке и выполнить над ней некоторые действия.

Над самим списком находятся две кнопки со знаками "плюс" и "минус". Их назначение уже должно быть вам понятно. Кнопка со знаком "плюс" добавляет новую строку в список, после чего вам останется ввести в добавленную строку имя нужной переменной или нужного свойства и нажать клавишу Enter. Кнопка со знаком "минус" позволит вам удалить выделенную в списке строку. Как видите, все очень удобно, за исключением того, что, как вы уже заметили, русские буквы опять отображаются некорректно.

Также вы можете изменить имя переменной (свойства) или его значение. Для этого выберите нужную строку в списке и щелкните мышью по значению в колонке Variable Name или Value. После этого введите новое имя или значение в появившееся в строке поле ввода и нажмите клавишу Enter.

Чтобы закончить отладку, либо закройте окно отладчика и окно Web-обозревателя, либо нажмите кнопку Stop Debugging. В первом случае выполнение всех сценариев будет прервано, а сам Web-обозреватель – выгружен, а во втором – выполнение продолжится без отладчика.

Альтернативные технологии

О недостатках Web-сценариев и их преодолении было написано в главе 12. Здесь же можно только кое-что добавить. А именно, опишем две альтернативные технологии, которые можно применять вместо сценариев для расширения функциональности Web-страниц.

Прежде всего, давайте вспомним недостатки Web-сценариев, написанных на интерпретируемых языках. Таких недостатков два, и оба они могут быть критичными во многих случаях, когда Web-дизайнеру понадобится расширить функциональность своих страниц.

1. Невысокое быстродействие интерпретируемого программного кода.

2. "Открытость", т. е. легкочитаемость, интерпретируемого кода.

Оба эти недостатка являются следствием самой природы языка JavaScript и никак не решаются. Единственное: их можно обойти, не создавая слишком сложных сценариев и не реализуя в них ноу-хау. И, если вам все же придется создавать сложные сценарии, содержащие какие-либо уникальные и, не дай бог, патентованные разработки, обратите внимание на альтернативные Web-сценариям технологии.

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

Первая технология вам уже знакома – это элементы ActiveX, рассмотренные нами в главе 4, посвященной графическим изображениям и вообще внедренным элементам. Напомним, что это такое.

Элементы ActiveX были разработаны как общий стандарт компонентов для использования в различных приложениях, Web-страницах и в качестве расширений самой операционной системы Windows. Эта технология представляет собой дальнейшее развитие технологии COM (Component Object Model – объектная модель компонентов), позволяющей встраивать одни программы (так называемые СОМ-серверы) в другие (СОМ-клиенты или СОМ-контейнеры). Элемент ActiveX представляет собой библиотеку DLL, содержащую сервер СОМ; как всякий СОМ-сервер, он регистрируется в особом разделе Реестра Windows, чтобы его смогли найти клиенты.

Элемент ActiveX помещается на Web-страницу с помощью парного тега <OBJECT>…</OBJECT>. Внутри этого тега пишутся определения свойств элемента, выполненные с помощью набора одинарных тегов <PARAM>. Подробнее о работе с элементами ActiveX в среде Dreamweaver см. главу 4.

Элементы ActiveX создаются на компилируемых языках программирования, поэтому реализованный у них код работает очень быстро и почти не поддается "взлому". Распространяются они по Сети в виде дистрибутивных файлов, представляющих собой файл-архив, содержащий все необходимые для работы элемента ActiveX файлы. Как правило, Web-обозреватель, если нужный ему элемент ActiveX на компьютере не установлен, сам загружает его дистрибутивный файл, руководствуясь значениями атрибутов тега <OBJECT>.

Недостатками элементов ActiveX являются привязанность к операционной системе Windows и невысокая безопасность. Как утверждают знатоки, злоумышленнику ничего не стоит написать вредоносный элемент ActiveX и внедрить его на внешне безобидную Web-страницу. После того как этот элемент будет загружен на компьютер жертвы, он сможет натворить там много бед. Однако о конкретных примерах таких атак на клиентские компьютеры автору пока что ничего не известно. И все же, элементы ActiveX нашли достаточно ограниченное применение, в основном, в корпоративных интрасетях, построенных на платформе Windows.

Вторая технология, о которой обязательно нужно рассказать и которая в наши дни, кажется, завоевала популярность, – это апплеты Java. Апплеты (калька с англ, applet – буквально, "приложеньице") – это аналоги элементов ActiveX, но написанные на языке программирования Java и не привязанные к какой-либо компьютерной платформе. По большому счету, они похожи на элементы ActiveX за несколькими исключениями, которые сейчас будут перечислены.

Прежде всего, программный код апплетов Java выполняется не самим процессором компьютера, а интерпретатором (так называемой виртуальной машиной) Java. Этот особый программный код, называемый байт-кодом, не является командами центрального процессора. Он порождается компилятором Java, который как бы компилирует программу "не до конца". Такие "недокомпилированные" программы выполняются значительно быстрее, чем исходный код JavaScript, но все же несколько медленнее, чем программы, откомпилированные "до конца", в "родные" команды процессора. С другой стороны, программы в байт-коде не привязаны к конкретному процессору, а значит, к конкретной компьютерной платформе, поэтому могут быть выполнены где угодно. Эта платформонезависимость и обусловила большую популярность Java-апплетов по сравнению с элементами ActiveX.

Далее, интерпретатор Java-кода организует для апплетов своего рода "компьютер в компьютере", "внутри" которого они и исполняются. (Поэтому интерпретатор Java и называют виртуальной, "кажущейся" машиной.) "В реальный компьютер" апплеты "выбраться" оттуда не могут; благодаря этому даже вредоносный Java-апплет, созданный с явно преступными целями, не может серьезно набедокурить – интерпретатор его просто остановит, предупредив об этом пользователя.

Апплеты Java помещаются на страницу с помощью парного тега <APPLET>… </APPLET>. Как и у тега <OBJECT>, внутри него находятся определения свойств апплета, выполненные с помощью набора одинарных тегов <PARAM>.

Чтобы поместить на страницу апплет Java, работая в Dreamweaver, вы можете нажать кнопку Applet, находящуюся на вкладке Media панели объектов. Также вы можете выбрать пункт Applet подменю Media меню Insert. После этого на экране появится диалоговое окно Select File, где вы должны будете задать имя файла, содержащего код апплета (так называемый файл класса апплета Java). Помещенный на страницу апплет выглядит так.

Вид редактора свойств при выбранном апплете Java. Мы рассмотрим подробно только те параметры, которые характерны именно для апплета. А таких параметров всего два.

В поле ввода Code задается имя файла класса, реализующего данный апплет. Вы можете также щелкнуть по значку папки справа от поля ввода и выбрать нужный файл в диалоговом окне Select File. Также вы можете выбрать пункт Code контекстного меню апплета.

Файл класса Java может содержаться как на вашем компьютере, так и на удаленном Web-сервере. Во втором случае Web-обозреватель скопирует файл класса и все файлы, необходимые для его работы, на компьютер клиента и поместит их в специальную папку. В дальнейшем, если этот же ап-плет понадобится снова, он будет загружать его оттуда вместо того, чтобы снова "тянуть" по Сети.

В поле ввода Base вводится папка Web-сервера, где находится файл класса, реализующего апплет, и все необходимые для его работы файлы. Если вы пользовались диалоговым окном Select File для выбора файла класса, Dreamweaver сам подставит в поле ввода Base нужное значение.

Остальные параметры (и соответствующие им элементы управления редактора свойств) сходны с параметрами элемента ActiveX, описанного в главе 4.

Где же можно найти нужные элементы ActiveX и апплеты Java? Во-первых, вы можете сами их написать. Но для этого придется изучить либо Java, либо один из компилируемых языков программирования (C++, Pascal и т. п.). Во-вторых, вы можете поискать бесплатные или условно-бесплатные элементы ActiveX или апплеты, выложенные на специальных сайтах-архивах для общего использования. (Кстати, существуют аналогичные архивы и для JavaScript-сценариев.) В-третьих, вы можете их купить или заказать другому программисту.

В любом случае, ответ на вечный вопрос "где достать?" выходит за рамки этой книги.

Что дальше?

Ох, сколько всего можно сотворить на обычной Web-странице! Просто глаза разбегаются…

Кстати, насчет глаз… То, что делалось до этого, в большинстве случаев затрагивает внешний вид наших страничек (форматы текста, таблицы, дизайн, изображения, анимации, сценарии…). А в следующей главе мы затронем нечто такое, что "невооруженным" глазом не видно. Это "нечто" позволит нам нанести завершающие штрихи на наше Web-творение.

Итак, просим любить и жаловать: метатеги и серверные директивы!