Программирование на стороне клиента.
В своих первых попытках повысить интерактивность HTML Web-страниц разработчики обратились к сценариям (scripting), добавляя функциональность путем комбинирования языка программирования с HTML. В результате зачастую получается странный гибрид кода и тегов, что вынуждает разработчиков вернуться к текстовым редакторам. Был введен специальный тег <SCRIPT>, который определяет раздел кода на Web-странице. Код из листинга 1.3 при помощи VBScript создает пример, выводящий приветствие «Hello, World!».
Листинг 1.3. Код на VBScript, выводящий «Hello, World!».
<HTML><HEAD> <META HTTP-EQUIV="Content-Type content=text/html, charset=windows-1251"> <TITLE>Yet Another Hello, World! Example</TITLE> <SCRIPT LANGUAGE="VBScript”> <!-- Sub cmdClickMe_OnClick() MsgBox "Hello, World!" End Sub --> </SCRIPT> </HEAD> <BODY BGCOLOR= WHITE > <FORM> <INPUT TYPE= BUTTON NAME= cmdClickMe VALUE="Click Me!”> </FORM></BODY></HTML>
VBScript представляет собой язык описания сценариев, в основе которого лежит Visual Basic for Applications (VBA), популярный язык, применяемый, например, в Microsoft Office 97. VBScript — это не полная версия VBA, а скорее его подмножество, которое сохраняет многие ключевые возможности VBA, но в то же время не реализует те, которые сделали бы его чересчур громоздким и небезопасным. Так, VBScript не поддерживает типы данных: все переменные объявляются как Variant.
Как и его старший брат, VBA, язык VBScript управляется событиями. Это означает, что написанный Вами код выполняется в ответ на событие (event), возникшее в результате взаимодействия пользователя с графическим интерфейсом (graphical user interface, GUI). В нашем случае GUI представляет собой Web-страницу. Так, в приведенном выше примере, когда пользователь взаимодействует с GUI, нажимая кнопку «Click Me!», это действие вызывает событие OnClick. Это событие, в свою очередь, обрабатывается кодом на VBScript, организованным в виде процедуры обработки события. Имена таких процедур имеют вид ИмяЭлементаУправления_ИмяСобытия, представляя собой произвольные комбинации из имен элементов управления и событий.
Хотя сценарии и представляют собой шаг вперед в развитии интерактивности, у них есть и определенные ограничения. Например, не все программы просмотра распознают и обрабатывают сценарии, а те, которые это делают, используют разные языки. Главным образом это касается Netscape Navigator, который не распознает VBScript, однако работает с JavaScript — языком описания сценариев, первоначально разработанным для Netscape Navigator. По функциональности JavaScript очень похож на VBScript, но по синтаксису эти языки сильно различаются. В отличие от VBScript, JavaScript не поддерживает концепцию процедур обработки событий. Все процедуры в JavaScript — это функции, вызываемые при помощи атрибутов событий, расположенных в HTML-теге. JavaScript-версия предыдущего примера на VBScript представлена в листинге 1.4.
Листинг 1.4. Код на JavaScript, выводящий «Hello, World!».
<HTML><HEAD>
<META HTTP-EQUIV="Content-Type" content="text/html;charset=windows-1251">
<TITLE>JavaScript Hello, World! Example</TITLE>
<SCRIPT LANGUAGE="JavaScript"> <!--
function clickme() {
alert("Hello, World!");
return true; }
-->
</SCRIPT>
</HEAD><BODY BGCOLOR="WHITE">
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdClickMe"
VALUE="ClickMe!" OnClick="var rtn=clickme();">
</FORM> </BODY> </HTML>Плохо не только то, что поддержка сценариев различается в разных программах просмотра, но и то, что сценарии не обеспечивают всей развитой функциональности, которой ожидают от языка программисты. Сценарии предоставляют подмножество тех языковых возможно¬стей, которые обычно используют разработчики: базовые структуры и операторы — циклы и ветвления. По сути, сценарии годятся только для проверки корректности введенных данных перед отсылкой формы на сервер.
Как только к возможностям программ просмотра добавляются сценарии, возрастает сложность клиентской платформы. Очевидно также, что раз отсутствует универсальный язык описания сценариев, то теряются все разрекламированные преимущества платформенной независимости Web. Для многих Web-мастеров и разработчиков постоянная война между программами просмотра за преобладание на рынке создает необходимость поддерживать две версии Web-узла: для Microsoft Internet Explorer и для Netscape Navigator.
Компоненты ActiveX. По мере совершенствования технологии программ просмотра зависи¬мость от платформы усилилась — она была привнесена компонентами ActiveX, технологией, основанной на СОМ — модели многокомпонентных объектов Microsoft (Component Object Model). Компоненты ActiveX варьируются от причудливых элементов управления, таких как движки (spinners), до невизуальных компонентов, обеспечивающих доступ к базам данных или электронной почте. Подобные компоненты делают страницы в Internet Explorer более функциональными и привлекательными, но практически бесполезными в среде, не поддерживающей ActiveX, например, в Netscape Navigator.
Компонент ActiveX добавляется в Web-страницу при помощи тега <OBJECT>, однозначно определяющего компонент для программы просмотра. Приведенный ниже код, используя тег <OBJECT>, помещает на Web-страницу элемент управления ActiveX — метку (label).
<OBJECT ID="Label1" WIDTH=291 HEIGHT=41 CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
CODEBASE="http://www.microsoft.com/activex/controls/FM20.DLL">
<PARAM NAME="ForeColor" VALUE="65408">
<PARAM NAME="VariousPropertyBits" VALUE="276824091">
<PARAM NAME="Caption" VALUE="Щелкни меня!">
<PARAM NAME="Size" VALUE="7691;1094">
<PARAM NAME="SpecialEffect" VALUE="1">
<PARAM NAME="FontEffects" VALUE="1073741827">
<PARAM NAME="FontHeight" VALUE="480">
<PARAM NAME="FontCharSet" VALUE="204">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>Значения GUID в любой операционной системе хранятся в реестре — централизованной базе данных, которая отвечает за поддержание информации о программных объектах, используемых приложениями. Когда Internet Explorer обнаруживает тег <OBJECT>, он обращается к реестру и ищет там GUID, совпадающий со значением атрибута CLASSID. Когда такой GUID найден, из реестра выбирается дополнительная информация, позволяющая отыскать файл, который соответствует данному элементу управления ActiveX.
В теге <OBJECT> можно выделить несколько ключевых составных частей, которые определяют, как именно компонент ActiveX будет размещен на странице. Атрибут ID задает имя элемента управления, посредством которого ко всем его свойствам, методам и событиям можно будет получить доступ из текста сценария.
CLASSID представляет собой буквенно-цифровой код, который однозначно идентифицирует данный компонент ActiveX среди всех остальных. Этот код, известный как глобально уникальный идентификатор (Globally Unique Identifier, GUID), не использует больше ни один компонент ActiveX. При помощи GUID Internet Explorer однозначно определяет требуемый компонент и создает его на странице. Если нужный элемент управления ActiveX на клиентской машине отсутствует, Internet Explorer обращается к атрибуту CODEBASE за информацией о том, где находится этот элемент на сервере. Следуя этой информации, файлы данного элемента управления загружаются с сервера, и элемент устанавливается на клиентской машине. Теперь Internet Explorer может свободно работать с ним.
Доступ к компонентам ActiveX посредством тега <OBJECT> не ограничивается элементами управления. Этот тег может активизировать произвольный компонент ActiveX, в том числе и те компоненты, которые можно написать на языках Visual Basic, C++ и Microsoft FoxPro. В сущности, вы легко можете расширить функциональность, доступную клиенту, написав свои собственные компоненты ActiveX и загрузив их в программу просмотра. Следует, правда, помнить, что Internet Explorer по умолчанию не загружает и не выполняет компоненты без цифровой подписи разработчика.
Окончательное обеспечение компонента данными происходит через тег <PARAM>, имеющий атрибуты NAME и VALUE, при помощи которых задаются начальные значения свойств данного компонента, когда он впервые создается на Web-странице. После того, как начальные значения установлены, значения свойств легко изменить во время выполнения из текста сценария.
<SCRIPT LANGUAGE="VBScript"><!--
Sub Label1_DblClick(Cancel)
Label1.Font.Weight=24
Label1.Caption="Щелкни снова!"
end sub
Sub Label1_Click()
Label1.AutoSize = false
Label1.Font.Weight = 30
Label1.Caption="Еще два раза!!!!!"
Label1.SpecialEffect=1
end sub
-->
</SCRIPT>Документы ActiveX. Visual Basic, начиная с версии 5.0, позволяет, помимо элементов управления ActiveX, создавать документы ActiveX. Документы ActiveX представляют собой программные объекты, которые могут загружаться и работать внутри ActiveX-контейнера, такого как Internet Explorer. Документы ActiveX позволяют разработчикам на Visual Basic немедленно применить свой опыт работы на Visual Basic для создания приложений для Интернета. Что самое существенное, документы ActiveX предоставляют доступ к большей части ключевых возможностей Visual Basic в загружаемом формате.
Java. Не будем забывать и о Java! Этот язык очень быстро приобрел популярность, и его поддерживают как Internet Explorer, так и Netscape Navigator. Апплеты, разработанные на Java при помощи таких средств, как Microsoft J++, во многом напоминают компоненты ActiveX: это самодостаточные, загружаемые фрагменты Web-страницы. Так же, как и у компонентов ActiveX, у апплетов имеется свой особый тег — <APPLET>, который дает программе просмотра указание загрузить код на Java и выполнить его. Нижеследующий код исполняет апплет на Web-странице:
<APPLET CODE=”DBLBULB.CLASS” HEIGHT=35 WIDTH=26> </APPLET>
Атрибут CODE тега <APPLET> идентифицирует исходный код апплета Java практически так же, как атрибут CODEBASE определяет источник для компонента ActiveX. У апплетов могут также быть теги <PARAM>, задающие начальные значения. Во многих случаях апплеты представляют собой функциональные эквиваленты элементов управления ActiveX. Во всяком случае, языки описания сценариев могут обращаться к открытым функциям апплетов точно так же, как они обращаются к методам компонентов ActiveX.
Dynamic HTML. Да, различия между платформами не облегчают жизнь Web-разработчи¬кам. В версии Internet Explorer 4.0 Microsoft добавила к клиентской функциональности еще одну особенность — Dynamic (динамический) HTML, который позволяет посредством сценариев программно изменять теги. Это необычайно мощное средство. Код из листинга 1.5 при помощи VBScript определяет, когда указатель мыши находится поверх какого-то участка текста Web-страницы, и изменяет размер и цвет текста.
Листинг 1.5. Dynamic HTML.
<HTML><HEAD>
<META HTTP-EQUIV="Content-Type"content="text/html;charset=windows-1251">
<TITLE>Dynamic HTML</TITLE>
<SCRIPT LANGUAGE="VBScript">
Function MyFont_OnMouseOver()
MyFont.Color = "Red"
MyFont.Size = "5"
End Function
Function MyFont_OnMouseOut()
MyFont.Color = "Blue"
MyFont.Size = "4"
End Function
</SCRIPT> </HEAD>
<BODY BGCOLOR="WHITE">
<FONT ID="MyFont" FACE="ARIAL" SIZE="4" COLOR="BLUE">
Эй, укажи-ка сюда мышкой!
</BODY></HTML>В Dynamic HTML определяется набор событий, которые можно ассоциировать с тегами HTML. Это расширяет парадигму VBScript управляемости событиями на все элементы Web-страницы — теги HTML, элементы управления ActiveX; даже программа просмотра сама по себе обладает определенными событиями. Если у вас еще сохранились сомнения в необходимости глубокого владения HTML для эффективного создания Web-страниц, то предыдущий пример должен вас убедить. В нем текст на VBScript динамически изменяет атрибуты COLOR и SIZE тега <FONT> при обнаружении определенных действий с мышью. Подобный код нельзя написать, не зная в точности, что представляет собой тег <FONT>, и не понимая смысла атрибутов COLOR и SIZE. Так что прощайте, графические редакторы!
Dynamic HTML заметно увеличивает мощность Web-клиента и его интерактивность, причем не только за счет динамического стиля манипулирования, но и другими средствами. Так, он умеет располагать элементы на Web-странице. Вы можете, например, изменить изображение, просто изменив атрибуты тега <IMG>. Для изменения содержимого страницы вы можете также добавлять или удалять теги. И наконец, Internet Explorer 4.0 поддерживает привязку данных (data binding) к полям формы. Это означает, что данные из базы данных на сервере могут быть напрямую связаны с полем формы в программе просмотра Web, и тем самым будут мгновенно редактироваться и обновляться. Все это делает Dynamic HTML мощным орудием, достойным вашего внимания. Но не забывайте одну важную вещь: в настоящее время Dynamic HTML доступен только для Internet Explorer.
Похожие записи
No user прокомментировали сообщение
Оставить комментарий