Previous Page TOC Index Next Page See Page

24

Web-Anwendungen mit VBScript und ActiveX entwickeln

Überblick

Visual Basic Scripting Edition (kurz VBScript) ist eine sehr einfache Sprache von Microsoft, mit der attraktive, lebhafte Inhalte in Web-Pages eingefügt werden. Sie können Skripte beispielsweise mit einem Formular verbinden, so daß die Formularverarbeitung direkt auf der Clientseite durchgeführt wird. Das bedeutet, daß keine serverseitige Verarbeitung erforderlich ist. Sie können Spiele in eine Web-Page einfügen. Die Möglichkeiten sind schier endlos. Sehen Sie sich ein paar VBScript-Beispiele an folgender Adresse an, um einen Einblick in die Vielfalt zu bekommen: http://www.microsoft.com/vbscript .

Und als ob das noch nicht genug wäre, können Sie auch ActiveX-Objekte in Web-Pages einfügen. ActiveX-Objekte sind OLE-Steuerungen, die Sie mit Ihrer Web-Page verteilen können. Sie werden mit speziellen Tags in eine Page eingefügt.

In diesem Kapitel wird beschrieben, wie phantastische Web-Pages mit VBScript- und ActiveX-Objekten erstellt werden können. Erwarten Sie aber keinen Lehrgang in Visual Basic. Auch die VBScript-Schlüsselwörter werden nicht behandelt. Dies würde Zweck und Umfang dieses Buches sprengen.


Auf der Buch-CD finden Sie eine Beschreibung der VBScript-Sprache.


Eine umfassende Abhandlung von VBScript und ActiveX finden Sie in Fachbüchern, z. B. ActiveX – Technik, Konzepte, Beispiele (ISBN 3-8272-5207-5) und Special Edition – VBScript (ISBN 3-8272-1011-9).

Was ist VBScript?

VBScript ist eine einfache Sprache. Wenn Sie mit Visual Basic oder Visual Basic for Applications vertraut sind, wissen Sie, wie Web-Pages mit HTML geschrieben werden und erlernen VBScript im Nu. Aber auch wenn Visual Basic für Sie völlig neu ist, gelingt Ihnen anhand der Beispiele dieses Kapitels sicherlich ein schneller Einstieg.

Einige Dinge muß man über VBScript allerdings wissen, weil man im Gegensatz zu Visual Basic alles selbst machen muß. Es gibt keine VBScript-Entwicklungsumgebung, folglich müssen Sie mit einem Texteditor, dem ActiveX-Steuerfeld und dem Internet Explorer arbeiten. Auch die Organisation der Skripte ist etwas schwieriger, weil kein integrierter Editor vorhanden ist. Kurz: Sie müssen einige Grundlagen von VBScript lernen, um damit zurechtzukommen.


Sie können die komplette VBScript-Dokumentation von Microsofts Web-Site unter http://www.microsoft.com/vbscript herunterladen.

Was man braucht

Alles, was Sie zum Anzeigen von Web-Pages brauchen, die VBScript beinhalten, ist ein skriptfähiger Browser, z. B. Internet Explorer 3.0 oder höher (siehe Kapitel 17). Sie brauchen keine besondere Software und Sie müssen keine ActiveX-Objekte im voraus herunterladen, weil die meisten davon bereits im Internet Explorer enthalten sind.

Der Internet Explorer ist selbstverständlich der erste Browser, der VBScript unterstützt. Da die relevanten Standardisierungsausschüsse (W3C) ActiveX und VBScript übernehmen wollen, können Sie davon ausgehen, daß diese Technologien bald auch von anderen Browsern unterstützt werden. In der Zwischenzeit haben weitsichtige Anbieter, z. B. NCompass Labs ( http://www.ncompasslabs.com ), bereits Plug-Ins zur Unterstützung von VBScript- und ActiveX-Objekten in Netscape entwickelt. Man kann mit Sicherheit davon ausgehen, daß sich VBScript im Internet verbreiten wird.


Eine Demoversion von NCompass Labs finden Sie auf der Buch-CD.

Was man wissen muß

Falls Sie wissen, wie man mit Visual Basic Programme schreibt, sind Sie einen guten Schritt voraus. Kennen Sie sich andererseits gut mit HTML aus, haben aber keinen Schimmer von Visual Basic, ist das ebenfalls kein Grund zur Panik. Auf der Buch-CD finden Sie ein Lernprogramm über die VBScript-Sprache. Außerdem können Sie sich bei Microsofts Web-Site umsehen ( http://www.microsoft.com/vbscript ).

Arbeiten mit Text- und HTML-Editoren

Erwarten Sie keine ausgewachsene Entwicklungsumgebung wie in Visual Basic, keinen Form-Editor und keinen Debugger. Eine Ausnahme bildet das ActiveX-Steuerfeld, über das Sie später mehr erfahren. Was also benutzen Sie, um Skripte zu bearbeiten? Notepad – und das ist kein Scherz. Sie können jeden beliebigen Texteditor benutzen. Ich habe Notepad für die meisten hier enthaltenen Beispiele verwendet.

Heute ist es nicht mehr nötig, Web-Pages manuell auszulegen. Sie brauchen einen HTML-Editor, um Web-Pages zu erstellen. Den besten, den ich in den Händen gehabt habe, ist Microsoft FrontPage (siehe Kapitel 23). Sie können FrontPage auf dem Markt beziehen, er ist aber in Microsoft Office 7.0 enthalten. So oder so ist FrontPage ein ausgezeichneter HTML-Editor mit einer Benutzeroberfläche, die an Microsoft Word erinnert.


Ich wäre keinesfalls überrascht, wenn VBScript künftig in Microsoft FrontPage unterstützt wird.

Arbeiten mit ActiveX-Objekten

VBScript ist ein nützliches Tool, um Formulare zu erstellen. Sie können ein Formular prüfen, bevor Sie es an den Server senden. Sie können auch vorgegebene Daten in das Formular eingeben. Und Sie können sicherstellen, daß Elemente im Formular interagieren.

Nach einer Weile werden Formulare langweilig, insbesondere, wenn man an all die schönen ActiveX-Objekte denkt, die nur darauf warten, in Web-Pages eingefügt zu werden. Sie können alle Arten von verrückten Labels in Ihre Page einfügen. So können Sie mit einem Timer-Objekt beispielsweise eine Web-Page periodisch aktualisieren. Sie können ein rollendes Marquee einfügen, das wie ein Ticker mit beliebigen Informationen quer über den Bildschirm läuft. Die Liste ist endlos lang.

Der Internet Explorer enthält bereits einige Steuerungen, die Sie folglich nicht mehr herunterladen müssen. Nachfolgend eine Zusammenstellung:


Die im Internet Explorer enthaltenen Objekte können frei verwendet und verteilt werden. Bei vielen Objekten von Drittanbietern muß eine Nutzungsgebühr entrichtet werden. Vor allen Dingen können Sie aber ohne entsprechende Lizenz das ActiveX-Steuerfeld nicht benutzen, um Tags für diese Objekte in eine Web-Page einzufügen.

Das ActiveX-Steuerfeld

Das ActiveX-Steuerfeld ist das einzige Element, das einer Entwicklungsumgebung nahe kommt. Es bewirkt zwei Dinge. Erstens können Sie damit Objekte in HTML-Dateien einfügen, ohne sich um das HTML-Format kümmern zu müssen. Zweitens können Sie die sogenannte Layout-Steuerung benutzen, um ein Objekt irgendwo in Ihre Web-Page einzufügen. Sie haben eine umfassende zweidimensionale Kontrolle über die Anordnung der Objekte. Angenehm fällt am ActiveX-Steuerfeld auf, daß es visuell ist. Man glotzt nicht auf HTML-Tags, sondern sieht die Objekte, wie sie später in der Web-Page erscheinen.

Außerdem können Sie die Eigenschaften von Objekten ändern. Ein Beispiel einer Layout-Steuerung mit ein paar Objekten sehen Sie in Abbildung 24.1.

Zusätzlich zu den Objekten im Internet Explorer sind im Steuerfeld weitere enthalten, die Sie in Web-Pages benutzen können. Diese Objekte sollten aber in der Layout-Steuerung benutzt werden. Sie kennen die meisten von Windows 95, z. B. Schaltflächen, Bildlaufleisten, Drehfelder, Textfelder, Anklickbereiche, Options- und Kontrollfelder, Listenfelder usw.

Wie es funktioniert

Zunächst muß festgehalten werden, daß ActiveX und VBScript nicht das gleiche sind (siehe Tabelle 24.1).

Tabelle 24.1: Scripting-Teile

ActiveX Scripting

Die Technologie, die es einem Programm wie dem Internet Explorer ermöglicht, Skriptsprachen wie VBScript oder JavaScript zu unterstützen.

VBScript Engine

Die Technologie, die VBScript von einer Web-Seite interpretiert, kompiliert und ausführt.

Abbildung 24.1: Das ActiveX-Steuerfeld schmeckt ein bißchen nach Form-Editor von Visual Basic, man kann aber nicht alle Objekte visuell editieren

siehe Abbildung

ActiveX fungiert als »Mittelsmann«, den beispielsweise der Internet Explorer benutzt, um mit der VBScript-Sprache zu kommunizieren. Es befreit den Browser davon, zu viel über eine bestimmte Skriptsprache zu wissen. Das hat den Vorteil, daß Sie verschiedene Skriptsprachen (VBScript, JavaScript oder eines Tages vielleicht sogar »CobolScript«) in den Browser einbinden können. Außerdem können sich Browser-Entwickler auf das konzentrieren, was sie am besten können, anstatt sich mit einer Skriptsprache befassen zu müssen.

Skripte in Web-Pages einbetten

Skripte werden mit Tags in eine HTML-Datei eingebettet, ähnlich wie andere Elemente. Skripte werden zwischen die Tags <SCRIPT> und </SCRIPT> gesetzt (siehe Listing 24.1).

Listing 24.1: Was der Browser beim Parsing macht

<SCRIPT LANGUAGE="VBScript">
<!--
Alert "Howdy from Texas" ' Evaluated & executed when the page is loaded

Sub Pause ' Evaluated and stashed away for later use
MsgBox "Click on OK to Continue"
End Sub
-->
</SCRIPT>

Was das alles bedeutet, ist im Augenblick nicht wichtig. Wichtig ist, was der Browser mit dem Skript anfängt. Wird eine Web-Page, die Skripte enthält, in den Browser geladen, werden sofort alle <SCRIPT>-Tags ausgewertet. Alles, was in diesen Blöcken steht, wird erfaßt und an die Skriptsprache weitergeleitet.

Die Skriptsprache sieht sich die Skriptblöcke durch und sucht nach Subprozeduren und Variablen außerhalb einer Subprozedur (globale Variablen). Sie kompiliert diese Blöcke und stapelt ihre Namen in einer internen Tabelle zur späteren Verwendung. Wird die Subprozedur später aufgerufen, holt sich die Skriptsprache die Prozedur aus der Tabelle und führt den entsprechenden Code aus.

Sie sehen in Listing 24.1, daß Anweisungen außerhalb einer Subprozedur eingegeben werden können. Die Skriptsprache führt Anweisungen, die außerhalb einer Subprozedur stehen, sofort aus. Das nennt man sofortige Ausführung. Microsoft nennt Skripte, die der Browser sofort ausführt, Inline-Skripte.


Sie sollten beim Schreiben von Skripten Microsofts Codekonventionen beachten. Das sind Richtlinien für die Benennung von Variablen und Prozeduren und für die Formatierung der Skripte in HTML. Über Microsofts Codekonventionen erfahren Sie mehr bei http://www.microsoft.com/vbscript/us/vbstutor/vbscodingconventions.htm .

Die Grenzen von VBScript

VBScript hat seine Grenzen, die nachfolgend beschrieben werden:

Skripte in einer HTML-Datei organisieren

Microsofts Codekonventionen sagen nicht genug über die Organisation von Skripten in HTML-Dateien aus. Ich versuche, diese Lücke mit einigen Vorschlägen zu schließen.

In jedem der folgenden Abschnitte gebe ich Vorschläge, wo die verschiedenen Skriptarten in HTML-Dateien eingefügt werden können. Das sind aber nur Anregungen. Fühlen Sie sich frei, alles umzudrehen. Den Vorschlag in Zusammenhang mit dem HEAD-Block sollten Sie aber einhalten. Da geht es um Hilfsprozeduren im HEAD-Block einer HTML-Datei.

Inline-Skripte

Machen Sie sich darauf gefaßt, daß Sie eine Menge Inline-Skripte in Ihre Web-Pages einfügen werden. Inline-Skripte sind Anweisungsblöcke, die außerhalb einer normalen Prozedur geschrieben werden. Der Browser führt sie in der Reihenfolge aus, in der er sie findet, wenn er die Page öffnet.

Sie können an beliebigen Stellen in einer HTML-Datei Inline-Skripte einfügen. Möchten Sie die HTML-Datei um dynamischen Inhalt erweitern, setzen Sie ein Skript genau an die betreffende Stelle. Listing 24.2 ist ein Beispiel eines solchen Skripts. Es fordert zur Eingabe des Namens auf und fügt in die HTML-Datei eine Begrüßung ein.

Listing 24.2: Inline-Skripte in einer HTML-Datei organisieren

<HTML>
This is static content on the Web page.<BR>

<SCRIPT LANGUAGE="VBScript">
<!--
strName = InputBox( "What is your name?" )
Document.Write "Howdy " & strName &
". This is dynamic content on the Web page.<BR>"
-->
</SCRIPT>

This is more static content on the Web page.
</HTML>

In Abbildung 24.2 sehen Sie, wie diese HTML-Datei im Internet Explorer aussieht.

Abbildung 24.2: Die erste und letzte Zeile sind statischer Text der HTML-Datei, während die mittlere Zeile mit einem Skript erstellter dynamischer Text ist

siehe Abbildung

Skripte in den <HEAD>-Block einfügen

Viele Skripte enthalten Prozeduren, die eine unterstützende Rolle spielen. Wenn Sie eine Web-Page erstellen, die den Durchschnittsumsatz von vier Vertriebsgebieten anzeigt, verwenden Sie beispielsweise die Funktion GetAverageSale, die dann einmal für die Umsatzzahlen der einzelnen Gebiete aufgerufen wird. Wenn Sie eine Handvoll Anweisungen haben, die Sie an verschiedenen Stellen benutzen können, können Sie sie in eine Prozedur einbinden und nach Namen von den verschiedenen Stellen aufrufen.

Die meisten Skripte, die Prozeduren enthalten, sollte man in den HEAD-Block der HTML-Datei einfügen. Das hat zwei Gründe. Erstens werden die Skripte durch die Organisation am Anfang der HTML-Datei vom Page-Inhalt getrennt. Sie können die Skripte schneller finden. Zweitens werden Skripte beim Laden der Web-Page in den Browser von oben nach unten ausgewertet. Skripte, die sich weit unten in der HTML-Datei befinden, werden eventuell nicht richtig ausgeführt. Deshalb sollten zuerst alle allgemeinen Prozeduren vor den Inline-Skripten definiert werden.

In Listing 24.3 habe ich die Funktion GetAverageSale im HEAD-Tag der HTML-Datei definiert. Ich habe sie vor ihrer Benutzung definiert, daher ist ihr Name für das später in der Datei folgende Inline-Skript verfügbar. Hätte ich sie nach ihrer Verwendung im Inline-Skript definiert, würde ich beim Laden der Web-Page eine Fehlermeldung erhalten. Beachten Sie auch, daß ich die globale Variable sstrUserName ebenfalls im HEAD-Abschnitt definiert habe. Dadurch ist sichergestellt, daß die globale Variable in jedem Inline-Skript verfügbar ist.

Listing 24.3: Prozeduren in einer HTML-Datei organisieren

<HTML>
<HEAD>

<SCRIPT LANGUAGE="VBScript">
<!--
Dim sstrUserName
Function GetAverageSale( sngTotalSales, intSalesQty )
GetAverageSale = sngTotalSales / intSalesQty
End Function
-->
</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="VBScript">
<!--
MsgBox "Hello " & sstrUserName
MsgBox "Average sale is " & GetAverageSale( 1000, 20 )
-->
</SCRIPT>

</BODY>
</HTML>
Ereignisprozeduren organisieren

Sind Sie den Argumenten im vorherigen Abschnitt gefolgt, würden Sie Ereignisprozeduren für Formulare in den HEAD-Abschnitt der HTML-Datei einfügen. Sie können alle Ereignisprozeduren eines Formulars in einen einzelnen <SCRIPT>-Block stellen, so daß sie alle als globales Skript vorhanden sind.

Sie können sich Ihr Leben aber vereinfachen, wenn Sie das nicht machen. Setzen Sie Ereignisprozeduren aus zwei Gründen in den <FORM>-Block:

Listing 24.4 ist ein Beispiel einer HTML-Datei, die ein Formular enthält. Sie sehen auch ein Skript, das eine Ereignisprozedur für die Schaltfläche Hello im <FORM>-Block enthält. Dieses Beispiel zeigt nicht nur die Vorteile auf, Ereignisprozeduren in der Nähe der betreffenden Formulare aufzubewahren, sondern macht auch deutlich, daß der Name des Formulars nicht angegeben werden muß, um auf darin enthaltene Elemente zuzugreifen.

Listing 24.4: Ereignisprozeduren für ein Formular Ereignisprozeduren fuer Formulareorganisieren

<HTML>
<FORM NAME="Myform">
Name:
<INPUT NAME="MyName" TYPE="TEXT" >
<INPUT NAME="Hello" TYPE="BUTTON" VALUE="Hello">

<SCRIPT LANGUAGE="VBScript">
<!--
Sub Hello_OnClick
MsgBox "Hello " & MyName.Value
End Sub
-->
</SCRIPT>
</FORM>
</HTML>
Skripte in Rahmen organisieren

Wie Sie bereits wissen, können Sie das Browser-Fenster in kleinere Abschnitte unterteilen, die man Rahmen nennt. Das gesamte Browser-Fenster enthält eine HTML-Datei und in jedem Rahmen befindet sich eine andere HTML-Datei. Betrachten Sie einmal folgende HTML-Datei:

<HTML>
<FRAMESET COLS="10%,90%">
<FRAME NAME="Left" SRC="left.html">
<FRAME NAME="Right" SRC="right.html">
</FRAMESET>
</HTML>

Dieses Beispiel ist eine Web-Page mit zwei Rahmen. Im linken Rahmen befindet sich die HTML-Datei left.html und im rechten ebenfalls eine HTML-Datei namens right.html. Bei dieser Anordnung fragt man sich, wo man seine Skripte abstellt. Das kommt ganz darauf an. Wichtige Überlegungen sind dabei, daß 1. die HTML-Datei der obersten Ebene immer verfügbar ist, und 2. die HTML-Dateien in den einzelnen Rahmen eventuell nicht immer verfügbar sind.

Brauchen Sie also Zugang zu einem Skript (Prozeduren oder globale Variablen) die ganze Zeit über aus jedem Rahmen heraus, sollten Sie es in die oberste HTML-Datei stellen, und zwar so:

<HTML>
<SCRIPT LANGUAGE="VBScript">
<!--
Dim strYourName
Sub DisplayName
MsgBox strYourName
End Sub
-->
</SCRIPT>
<FRAMESET COLS="10%,90%">
<FRAME NAME="Left" SRC="left.html">
<FRAME NAME="Right" SRC="right.html">
</FRAMESET>
</HTML>

In diesem Fall erhalten Sie Zugang zu der globalen Variablen strYourName aus der HTML-Datei aller Rahmen. Sie können aus der HTML-Datei jedes Rahmens auch DisplayName aufrufen. Das erreichen Sie durch den Präfix top im Namen, um VBScript mitzuteilen, daß Sie sich auf die HTML-Datei der obersten Ebene beziehen. Nachfolgend ein Beispiel, in dem strYourName auf Jerry von left.html gesetzt wurde:

top.strYourName = "Jerry"

Web-Pages (ActiveX) auf einem Server unterbringen

Abgesehen von den eigentlichen Werkzeugen, die Sie brauchen, um mit VBScript Web-Pages zu erstellen, benötigen Sie eine Stelle, um Ihre Web-Pages unterzubringen. Ja, Sie können VBScript-Pages zum persönlichen Zeitvertreib schreiben, aber wozu soll das gut sein? Sie möchten der Welt doch zeigen, was Sie können. Also brauchen Sie Zugang zu einem Web-Server, auf dem Sie Ihre Web-Pages und die in Ihren Web-Pages benutzten ActiveX-Steuerungen abstellen können.

Viele Internet-Provider bieten nur wenig Web-Platz kostenlos. Falls das nicht mehr als 1 Mbyte ist, kommen Sie damit eventuell nicht aus, wenn einmal alle Pages, Bilder und Steuerungen eingebunden sind.

Wie Ereignisse in einer Web-Page funktionieren

Windows sendet Nachrichten an ein Objekt, um es wissen zu lassen, daß etwas geschehen ist, z. B. Mausklicks. In VBScript gibt es keine Möglichkeit, solche Nachrichten zu empfangen. Und auch wenn das möglich wäre, würde das Objekt die Nachricht lange vor Ihnen erhalten. Wie also weiß Ihr Skript, daß mit dem Objekt etwas passiert ist?

In VBScript erzeugt ein Objekt Ereignisse als Reaktion auf die Nachrichten, die es erhält. Wenn Sie auf ein Objekt klicken, sendet Windows eine Nachricht an das Objekt, in dem ihm mitgeteilt wurde, daß man darauf geklickt hat. Das Objekt veranlaßt seinerseits das Ereignis »Klick«, und der Browser sucht nach einer speziellen VBScript-Prozedur, um das Ereignis abzuarbeiten.

Wie weiß der Browser, welche Ereignisprozedur die richtige ist? Er sucht nach einer Prozedur, deren Name mit dem Namen des Objekts beginnt, dem ein Unterstrich (_) folgt, und der mit dem Namen des Ereignisses, z. B. OnClick, endet. Den Namen der einzelnen Objekte geben Sie in der HTML-Datei an, und für jeden Objekttyp gibt es vordefinierte Ereignisnamen, über die Sie später in diesem Kapitel noch Näheres erfahren.

Ereignisprozedur demonstrieren

Wir sehen uns jetzt Listing 24.5 an. Das <INPUT>-Tag im HEAD enthält die Prozedur btnButton-OnClick. Auf der Grundlage der Namenskonvention, die ich eingangs erwähnt habe, können Sie sich schon vorstellen, daß das eine Ereignisprozedur für ein Objekt namens Button ist, d. h. eine Schaltfläche, die Klickereignisse handhabt. In der Meldung wird lediglich die Anweisung erteilt, die Schaltfläche anzuklicken. Sehen Sie sich das Formular im Körper (BODY) der HTML-Datei an. Es enthält ein einziges Element, das ich Button genannt und für das ich das NAME-Attribut des <INPUT>-Tags benutzt habe. Die Kombination dieses Namens mit dem Namen des Ereignisses bewirkt, daß der Browser erkennt, daß er die Ereignisprozedur btnButtonOnClick jedesmal ausführen muß, wenn die Schaltfläche angeklickt wird.

Listing 24.5: Beispiel einer Ereignisprozedur

<HTML>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub btnButton_onClick
MsgBox "Ouch! You clicked on me."
End Sub
-->
</SCRIPT>

<FORM><INPUT NAME="btnButton" TYPE="BUTTON" VALUE="Click Me"></FORM>
</HTML>

Inline-Ereignishandler verwenden

VBScript ist sehr flexibel. Sie haben gerade gelernt, wie ein Ereignis anhand einer Ereignisprozedur abgearbeitet wird. Sie können Ereignisse aber auch anders handhaben. Sie brauchen beispielsweise keine getrennte Prozedur für ein Ereignis zu erstellen, sondern verwenden sie als Attribut im Tag des Elements. Ich zeige das in Listing 24.6 auf.

Listing 24.6: Verwenden eines Inline-Ereignishandlers

<HTML>
<FORM>
<INPUT NAME="btnButton" TYPE="BUTTON" VALUE="Click Me"
OnClick="MsgBox "Ouch! You clicked on me."' LANGUAGE="VBScript">
</FORM>
</HTML>

Haben Sie bemerkt, daß in diesem Beispiel nirgends ein <SCRIPT>-Tag vorkommt? Sehen Sie sich das Tag <INPUT> genauer an. Es enthält ein Attribut, das ein Skript ist, und trägt den Namen des Ereignisses OnClick. Wenn die Schaltfläche das Ereignis OnClick auslöst, wird alles ausgeführt, was zwischen den einfachen Anführungszeichen (') steht. Beachten Sie hier, daß das eine der berühmten Ausnahmen von der Regel ist. Der Wert des Attributs eines Ereignisses steht zwischen einfachen Anführungszeichen, im Gegensatz zu anderen Attributen, die zwischen doppelten Anführungszeichen (") stehen. Sie können mehrere Anweisungen in das Attribut eines Ereignisses setzen. In diesem Fall trennen Sie die Anweisungen durch einen Doppelpunkt (:), z. B.:

OnClick='MsgBox "Hello World" : MsgBox "Hello Again"'

Das Attribut LANGUAGE spezifiziert die Sprache, die Sie für das Inline-Skript verwenden. Sie könnten genausogut JavaScript anstelle von VBScript benutzen. Geben Sie in der HTML-Datei keine Sprache an, legt der Browser automatisch JavaScript zugrunde.


Sie brauchen die Sprache in einer HTML-Datei nur einmal zu definieren. Der Browser greift standardmäßig auf die zuletzt in der HTML-Datei benutzte Sprache zurück. Das heißt, Sie können z. B. <SCRIPT LANGUAGE="VBSCRIPT"></SCRIPT> am Anfang der HTML-Datei eingeben und brauchen sich dann um die Sprache nicht mehr zu kümmern. Der Rest des Skripts basiert auf VBScript.

Einige Ereignisse geben Argumente an die Ereignishandler ab. Wie handhaben Sie Argumente bei einem Inline-Ereignis? Hier ein Beispiel:

MouseMove(shift, button, x, y)='window.status="The mouse is at " & x & "," & y'

Die FOR/EVENT-Attribute

Hier gleich noch eine Methode, um in VBScript Ereignisse zu handhaben. Möchten Sie keine Ereignisprozedur und auch keinen Inline-Ereignishandler benutzen, können Sie das <SCRIPT>-Tag selbst verwenden. Dafür brauchen Sie die Attribute FOR und EVENT. Mit diesen Attributen können Sie ein Skript mit jedem benannten Objekt in der HTML-Datei und jedem Ereignis des betreffenden Objekts verbinden. Sehen Sie sich Listing 24.7 an.

Listing 24.7: Verwenden der Attribute FOR und EVENT

<HTML>
<SCRIPT LANGUAGE="VBScript" FOR="btnButton" EVENT="OnClick">
<!--
MsgBox "Ouch! You clicked on me. "
-->
</SCRIPT>
<FORM><INPUT NAME="btnButton" TYPE="BUTTON" VALUE="Click Me"></FORM>
</HTML>

Diese Datei definiert die Schaltfläche genauso wie in Listing 24.6. Der Unterschied liegt daran, daß in dieser HTML-Datei keine Ereignisprozedur vorhanden ist. Sehen Sie sich das Tag <SCRIPT> aber einmal genauer an. Es enthält die Attribute FOR und EVENT, die das Objekt und das mit diesem Skript verbundene Ereignis definieren. for="btnButton" event="OnClick" bedeutet, daß jede Anweisung dieses Skripts ausgeführt wird, wenn ein Objekt namens Button das Ereignis OnClick auslöst.

Manche Ereignisse geben Argumente an die Ereignishandler ab. Wie kann man Argumente benutzen, wenn man das Ereignis mit der Syntax FOR/EVENT definiert? Hier die Lösung:

<SCRIPT LANGUAGE="VBScript" FOR="btnButton"
EVENT="MouseMove(shift, button, x, y)">

Das darin eingebundene Skript kann jeden Parameter nutzen, den es vom Ereignis MouseMove erhält.

Gewöhnliche Ereignisse handhaben

Falls Sie ein VB-Programmierer sind, werden Sie sich über die begrenzte Anzahl von Ereignissen, die für die Objekte auf einer Web-Page verfügbar sind, wundern. Man muß Ereignisse wie DblClick, DragDrop, DragOver, MouseDown, MouseUp usw. einfach nicht handhaben. Sie sind in diesem Zusammenhang nicht sinnvoll. Das heißt, daß etwa ein Dutzend Ereignisse, z. B. OnClick, MouseMove oder onMouseOver usw. übrigbleiben. Ereignisse für Tastaturen gibt es nicht.

Jedes ActiveX-Objekt definiert seine Ereignisse selbst. Informationen über die genauen Ereignisse finden Sie in der Dokumentation zu den Objekten. Einige Objekte werden hier aber in Verbindung mit den Beispielen beschrieben.

Maus-Ereignisse

Fast alle Objekte für eine Web-Page lösen Maus-Ereignisse aus. Am häufigsten werden folgende verwendet:

Status-Ereignisse

Viele Elemente, z. B. Textfelder oder Schaltflächen, unterstützen Ereignisse, die mitteilen, wenn sich ihr Status ändert. Diese Ereignisse sind u. a.:


Achten Sie darauf, daß Sie keine kaskadierenden Ereignisse erstellen. Dadurch würde Ihre Ereignisprozedur verursachen, daß das gleiche Ereignis immer wieder ausgelöst wird. Früher oder später stürzt das Skript ab.

Das Skriptmodell

Das Skriptmodell von Microsoft bietet eine Vielfalt von webspezifischen Objekten für Skripte. Sie können den Web-Browser und die Web-Page manipulieren. Microsofts Modell ist mit dem von JavaScript kompatibel. Der einzige Unterschied besteht darin, daß jede ActiveX-Skriptsprache das Modell im Microsoft Internet Explorer benutzt, darunter auch JavaScript und VBScript. Wir überlassen die schwierigen Sachen einfach Microsoft, einverstanden?

In diesem Kapitel erhalten Sie einen Einblick in das Skriptmodell (siehe Abbildung 24.3). Ich beschreibe die Objekte, die Sie in dem Modell sehen, sowie die Beziehung zwischen den Objekten und wie auf Eigenschaften, Methoden und Ereignisse der Objekte zugegriffen wird.

Abbildung 24.3: Ein schattiertes Feld bedeutet, daß das Objekt einmal oder mehrmals existieren kann, z. B. kann es mehrere Rahmen in einem Fenster geben

siehe Abbildung

Fenster-Objekte

Ein Fenster-Objekt ist immer die oberste Ebene. Das wird deutlich, wenn Sie das Modell mit dem in Bezug bringen, was Sie am Bildschirm sehen. Zuerst sieht man das Browser-Fenster. Dann erscheint im Browser-Fenster ein Dokument, dann ein Formular in einem Dokument usw. Ein Fenster-Objekt enthält eine Vielzahl von Eigenschaften, Methoden und Ereignissen. Tabelle 24.2 bietet eine Kurzübersicht.

Tabelle 24.2: Eigenschaften, Methoden und Ereignisse von Fenster-Objekten

Eigenschaften

Methoden

Ereignisse

name

alert

onLoad

parent

confirm

onUnload

self

prompt


top

open


location

close


defaultStatus

setTimeout


status

clearTimeout


frames

navigator


history



navigator



document



Jedes Fenster enthält weitere Objekte, z. B. eine History, einen Navigator, eine Adresse, Skripts und ein Dokument. Daneben kann es auch einen oder mehrere Rahmen enthalten. Auf jedes dieser Objekte können Sie über die entsprechenden Eigenschaften zugreifen (siehe Tabelle 24.3).

Tabelle 24.3: Zugriff auf Fenster-Objekte

Um darauf zuzugreifen,

benutzen Sie diese Eigenschaft:

FRAME

FRAMES

HISTORY

HISTORY

NAVIGATOR

NAVIGATOR

LOCATION

LOCATION

SCRIPT

PROCEDURE

DOCUMENT

DOCUMENT

Als allgemeine Regel gilt, daß Sie auf Eigenschaften mit Namen im Plural, z. B. FRAMES, mit einem Array zugreifen. Wie viele Objekte sich im Array befinden, ist an der Eigenschaft LENGTH erkennbar, z. B.:

window.frames.length

Jedes Element des Arrays stellt ein einzelnes Objekt dieses Typs dar. Um beispielsweise auf den zweiten Rahmen eines Fensters zuzugreifen, benutzen Sie folgende Syntax (die Zählung beginnt mit 0):

window.frames(1)


Sie müssen nicht die Form window.name benutzen, um auf die Eigenschaften oder Methoden eines Fensters zuzugreifen, weil das Fensterobjekt immer im Bereich ist. name allein genügt. Das bedeutet, daß die Namen der Eigenschaften und Methoden von Fensterobjekten reservierte Wörter sind. Sie können aber für Variablennamen benutzt werden.

Rahmen-Objekte

Ein Fenster kann wahlweise einen oder mehrere Rahmen beinhalten. Das hängt davon ab, ob Sie in Ihrer Web-Page das Tag <FRAMESET> benutzen. Falls Sie es verwenden, enthält das Array FRAMES ein Element für jeden definierten Rahmen, beginnend mit 0. Folgender Skriptteil holt sich den Namen der einzelnen Rahmen des Fensters:

For intI = 0 to frames.length – 1
strName = frames(intI).name
Next

Sie können einen Rahmen auch mit Namen benutzen, falls Sie ihn im Tag <FRAME> benannt haben. Betrachten Sie dieses Beispiel:

<FRAME NAME="Body" SRC=" http://www.myserver.com/body.html ">

Auf diesen Namen können Sie wie folgt zugreifen:

strName = Body.name

Das FRAME-Objekt führt keine weiteren Eigenschaften, Methoden oder Ereignisse ein. Der Grund liegt daran, daß jedes FRAME-Objekt eigentlich ein Fensterobjekt ist. Sie verwenden daher die gleichen Eigenschaften, Methoden und Ereignisse, die in Tabelle 24.2 aufgeführt sind.

Wichtig ist hier, wie Sie auf Rahmen zugreifen. Das heißt, wenn Sie einen Rahmen namens body definieren, der einen Rahmen namens TopBody enthält, der wiederum den Rahmen ReallySmallFrame enthält, können Sie die Eigenschaften von ReallySmallFrame wie folgt ansprechen:

Top.Body.TopBody.ReallySmallFrame.name

Was passiert hier? Stellen Sie sich für einen Augenblick einen Rahmen als Fenster vor, dann wird die Sache klarer. Sie haben beispielsweise ein Fenster namens Top, das ein Fenster namens Body enthält, das ein Fenster namens TopBody enthält, das ein Fenster namens ReallySmallFrame enthält.

Sie können auf die einzelnen Rahmen auch mit dem Array FRAMES der einzelnen Rahmen zugreifen. Nehmen wir an, daß jeder der obigen Rahmen der erste Rahmen in einer HTML-Datei ist, dann könnten Sie wie folgt darauf zugreifen:

Top.frames(0).frames(0).frames(0).name

Wäre ReallySmallFrame der zweite Rahmen in TopBody, würden Sie statt dessen wie folgt darauf zugreifen:

Top.frames(0).frames(0).frames(1).name

History-Objekte

Jedes Fenster hat ein History-Objekt mit dem Verlauf des Fensters. Das heißt, es enthält eine Liste jeder Web-Page, die bereits darin angezeigt wurde. Die Eigenschaften sind in Tabelle 24.4 aufgeführt.

Tabelle 24.4: Eigenschaften und Methoden von History-Objekten

Eigenschaften

Methoden

LENGTH

FORWARD


BACK


GO

Navigator-Objekte

Jedes Fenster enthält ein Navigator-Objekt, das Informationen über den Web-Browser aufnimmt. Die Eigenschaften sind wie folgt:

appCodeName
appName
AppVersion
userAgent

Location-Objekte

Jedes Fenster enthält ein Location-Objekt, das den URL der aktuellen Web-Page definiert. Die Eigenschaften sind wie folgt:

href
protocol
host
hostname
pathname
port
search
hash

Skript-Objekte

Skripte leben im Fenster-Objekt, ungeachtet der Tatsache, daß sie im Dokument-Objekt definiert werden. Das Modell speichert sie im Fenster-Objekt. Jedes Skript-Objekt ist an sich der Name einer Prozedur, d. h. Subprozedur oder Funktion.

Wenn Sie mit Skripten in Rahmen arbeiten, erhalten Sie schnellen, einfachen Zugriff auf die Prozeduren des Fensters, indem Sie den Namen des Fensters in Verbindung mit dem Namen der Prozedur verwenden. Schreiben Sie z. B. ein Skript in einem tief eingebetteten Rahmen, können Sie im Fenster der obersten Ebene wie folgt darauf zugreifen:

top.MyProcedure()

Sie können auf Skripte in anderen Rahmen zugreifen, indem Sie den Namen des Rahmens oder des Elternschlüsselwortes verwenden. Um auf ein Skript im zweiten Rahmen unter dem aktuellen Fenster zuzugreifen, benutzen Sie diese Anweisung:

frame(1).MyProcedure()

Um auf ein Skript im Elternrahmen zuzugreifen, geben Sie diese Anweisung ein:

parent.MyProcedure()

Dokument-Objekte

Das nächstwichtige Objekt im Modell ist das Dokument-Objekt. Es stellt die eigentliche Web-Page dar, die im Fenster angezeigt wird, einschließlich Text, Links, Formularen usw. Ein Dokument-Objekt enthält eine Vielzahl von Eigenschaften und Methoden. Tabelle 24.5 enthält eine Übersicht.

Tabelle 24.5: Eigenschaften und Methoden von Dokument-Objekten

Eigenschaften

Methoden

linkColor

write

aLinkColor

writeLn

vLinkColor

close

bgColor

clear

fgColor

open

anchors


links


forms


location


lastModified


title


cookie


referrer


Jedes Dokument enthält eine Reihe weiterer Objekte, darunter Links, Anker und Formulare. Sie können auf diese Objekte mit den entsprechenden Eigenschaften zugreifen (siehe Tabelle 24.6).

Tabelle 24.6: Zugriff auf Dokument-Objekte

Um darauf zuzugreifen,

benutzen Sie folgende Eigenschaft:

Link

links

Anchor

anchors

Form

forms

Wie Sie bereits gelernt haben, können Sie auf Eigenschaften mit Namen im Plural, z. B. FORMS, mit einem Array zugreifen. Wie viele Objekte sich im Array befinden, ist an der Eigenschaft LENGTH erkennbar, z. B.:

document.forms.length

Jedes Element des Arrays stellt ein einzelnes Objekt dieses Typs dar. Um beispielsweise auf das erste Link eines Dokuments zuzugreifen, benutzen Sie folgende Syntax (die Zählung beginnt mit 0):

document.forms(0)

Da Skripte zum Bereich des Fensters, nicht zu dem des Dokuments gehören, müssen Sie auf die Eigenschaften und Methoden eines Dokuments nach Namen zugreifen, z. B.:

document.name

Im Gegensatz zu WINDOW können Sie den Teil DOCUMENT der Eigenschaften und Methoden eines Fenster-Objekts nicht fallenlassen. Sie können aber auf Formulare und Objekte ohne Verwendung des Dokuments zugreifen.

Link-Objekte

Die Eigenschaft LINK eines Dokuments ist ein Nur-Lesen-Array, bestehend aus Link-Objekten. Links werden in einer Web-Page mit den Tags <A HREF=URL> und </A> definiert. Sie können darauf wie auf andere Arrays zugreifen, aber nicht nach Namen. Das folgende Beispiel ist das dritte Link im Dokument:

document.links(2)

Die Eigenschaften und Ereignisse von Link-Objekten stehen in Tabelle 24.7.

Tabelle 24.7: Eigenschaften und Ereignisse von Link-Objekten

Eigenschaften

Ereignisse

href

mouseMove

protocol

onMouseOver

host

onClick

hostname


port


pathname


search


hash


target


Anker-Objekte

Die Eigenschaft ANCHOR eines Dokuments ist ein Nur-Lesen-Array, bestehend aus Anker-Objekten. Anker werden in einer Web-Page mit den Tags <A NAME=NAME> und </A> definiert. Sie können darauf wie auf andere Arrays zugreifen, aber nicht nach Namen. Das folgende Beispiel ist der dritte Anker im Dokument:

document.anchors(2)

Die einzige Eigenschaft von Anker-Objekten ist NAME.

Formular-Objekte

Ein Dokument-Objekt kann eines oder mehrere Formular-Objekte enthalten, je nachdem, ob Sie das Tag <FORM> in Ihrer Web-Page benutzt haben. Haben Sie in Ihrer Web-Page Formulare benutzt, zeigt document.forms.length die Anzahl der auf der Page befindlichen Formulare an. Das folgende Skript holt den Namen der einzelnen Formulare in das Fenster:

For intI = 0 to document.forms.length – 1
strName = frames(intI).name
Next

Wenn Sie das Formular im Tag <FORM> benennen, können Sie es auch nach Namen benutzen, z. B.:

<FORM NAME="MyForm">

Auf dieses Formular können Sie namentlich wie folgt zugreifen:

strName = document.MyForm.name

Die Eigenschaften, Methoden und Ereignisse von Formular-Objekten stehen in Tabelle 24.8.

Tabelle 24.8: Eigenschaften, Methoden und Ereignisse von Formular-Objekten

Eigenschaften

Methoden

Ereignisse

action

submit

onSubmit

encoding



method



target



elements



hidden



Das Formular-Objekt enthält als einziges Zusatzobjekt das Element-Objekt. Sie können mit dem Array ELEMENTS darauf zugreifen.

Sie müssen explizit die Syntax document.form benutzen, um auf ein Formular zuzugreifen, weil Formular- und Objektdokumente nicht im gleichen Bereich liegen. Denken Sie daran, daß Skripte zum Fenster und Formulare zum Dokument gehören.

Sie können aber Skripte in ein Formular-Objekt einfügen. In diesem Fall brauchen Sie die Methode document nicht anzuwenden, um auf das Formular zuzugreifen. Sie geben lediglich den Namen des Formulars ein. Das folgende Beispiel ist ein Skript, das in ein Formular-Objekt eingebettet wurde:

<FORM NAME="MyForm">
<INPUT NAME="txtName" TYPE="TEXT" SIZE="40">
<INPUT NAME="btnFill" TYPE="BUTTON" VALUE="Fill">
<SCRIPT FOR="btnFill" EVENT="onClick">
<!--
txtName.value = "Jerry"
-->
</SCRIPT>

Möchten Sie auf Elemente eines Formulars außerhalb des Tags <FORM> zugreifen, müssen Sie die Eigenschaft voll definieren, z. B.:

document.MyForm.txtName.value

Element-Objekte

Ein Formular enthält eines oder mehrere Elemente bzw. Steuerungen. Dazu zählen Schaltflächen, Text- und Listenfelder. Sie greifen auf die einzelnen Elemente über das Array ELEMENTS zu. Das folgende Skript holt den Namen der einzelnen Elemente eines Formulars:

For intI = 0 to document.MyForm.elements.length – 1
strName = document.MyForm.elements(intI)
Next

Sie können ein Element auch mit seinem Namen holen, wenn Sie es im Tag <INPUT> benannt haben, z. B.:

<INPUT NAME="btnDone" TYPE="BUTTON" VALUE="Done">

Auf den aktuellen Wert dieses Rahmens können Sie wie folgt mit Namen zugreifen:

strCaption = document.MyForm.btnDone.value

Tabelle 24.9 listet die Eigenschaften, Methoden und Ereignisse von Element-Objekten auf.

Tabelle 24.9: Eigenschaften, Methoden und Ereignisse von Element-Objekten

Eigenschaften

Methoden

Ereignisse

form

click

onClick

name

focus

onFocus

value

blur

onBlur

defaultValue

select

onChange

checked

removeItem

onSelect

defaultChecked

addItem


enabled

clear


listCount



multiSelect



listIndex



length



options



selectedIndex



Form-Ereignisse

Sie wissen bereits, daß Objekte in einer Web-Page Ereignisse auslösen, wenn ein Eingriff erforderlich ist. Eine Schaltfläche löst das Ereignis onClick aus, wenn der Benutzer darauf klickt. Ein Textfeld löst das Ereignis onChange aus, wenn der Benutzer den Inhalt ändert.

Die meisten, wenn nicht alle Skripte hängen mit Ereignissen zusammen. Das sind Ereignishandler. Ereignisse sind mehr oder weniger die einzige Möglichkeit, um das Skript nach dem Laden der Web-Page auszuführen. Sie sind die einzige Möglichkeit, durch die Sie mit den Objekten der Page interagieren können.

onClick-Ereignisse

Die meisten Elemente, die Sie in ein Formular einfügen können, unterstützen das Ereignis onClick. Dazu zählen Schaltflächen, Optionsfelder und Textfelder. Ein Element löst immer dann das Ereignis onClick aus, wenn der Benutzer auf das Element klickt. In manchen Fällen löst ein Element dieses Ereignis aus, wenn der Benutzer einen Eintrag in einer Liste wählt.

Listing 23.8 ist ein Formular, das den Inhalt von txtName anzeigt, wenn der Benutzer auf die Schaltfläche btnDisplay klickt. Dieses Beispiel zeigt auch auf, wie die Werte eines Elements gelesen werden. btnDisplay onClick liest den Wert aus dem Textfeld txtName. Beachten Sie die Definition value. Sie müssen den Namen der Eigenschaft, die den Wert enthält, explizit angeben. Falls Sie Programmierer sind und mit Visual Basic arbeiten, ist das vielleicht etwas gewohnheitsbedürftig (bei mir war das zumindest der Fall), weil man daran gewöhnt ist, die Vorgabeeigenschaft eines Objekts zu benutzen, die normalerweise der Wert ist.

Listing 24.8: Handhabung des Ereignisses onClick

<HTML>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub btnDisplay_onClick
alert "Hi " & MyForm.txtName.value
End Sub
-->
</SCRIPT>
<FORM NAME="MyForm">
<INPUT TYPE=TEXT VALUE="Jerry" SIZE=40 NAME="txtName">
<INPUT TYPE=BUTTON VALUE="Display" NAME="btnDisplay">
</FORM>
</HTML>

onFocus-Ereignisse

Listing 24.9 zeigt auf, wie das Ereignis onFocus für ein Element definiert wird. Ein Element löst dieses Ereignis immer dann aus, wenn der Benutzer den Fokus an eine Steuerung abgibt. Der Benutzer kann das, indem er die [_ÿ]-Taste drückt oder mit der Maus auf die Steuerung klickt.

Listing 24.9: Handhabung des Ereignisses onFocus

<HTML>
<TITLE>Howdy</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub txtName_onFocus
status = "Type your first name in this field"
End Sub
-->
</SCRIPT>

<FORM NAME="MyForm">
<INPUT TYPE=TEXT VALUE="Jerry" SIZE=40 NAME="txtName">
<INPUT TYPE=BUTTON VALUE="Display" NAME="btnDisplay" onClick="alert 'Hi ' & txtName.value">
</FORM>
</HTML>

onBlur-Ereignisse

Ein Element löst das Ereignis onBlur aus, wenn das Element den Fokus verliert. Ein Element kann den Fokus verlieren, weil der Benutzer die [_ÿ]-Taste gedrückt hat, um ein anderes Element zu wählen, oder er hat mit der Maus auf ein anderes Element geklickt.

Listing 24.10 ist ein Beispiel der Definition dieses Ereignisses. Bei diesem Beispiel wird lediglich die Statuszeile geleert. Sie können das Ereignis onBlur benutzen, um eine Verarbeitung in letzter Minute zu realisieren, bevor das Element den Fokus verliert.

Listing 24.10: Handhabung des Ereignisses onBlur

<HTML>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub txtName_onFocus
status = "Type your first name in this field"
End Sub

Sub txtName_onBlur
status = ""
End Sub
-->
</SCRIPT>

<FORM NAME="MyForm">
<INPUT TYPE=TEXT VALUE="Jerry" SIZE=40 NAME="txtName">
<INPUT TYPE=BUTTON VALUE="Display" NAME="btnDisplay" onClick="alert 'Hi ' & txtName.value">
</FORM>
</HTML>

onChange-Ereignisse

In Listing 24.11 ist ersichtlich, wie das Ereignis onChange definiert wird. Ein Element löst dieses Ereignis aus, wenn der Benutzer den Inhalt des Elements ändert.

Listing 24.11: Handhabung des Ereignisses onChange

<HTML>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub txtName_onChange
alert "You changed the field"
End Sub
-->
</SCRIPT>

<FORM NAME="MyForm">
<INPUT TYPE=TEXT VALUE="Jerry" SIZE=40 NAME="txtName">
<INPUT TYPE=BUTTON VALUE="Display" NAME="btnDisplay" onClick="alert 'Hi ' & txtName.value">
</FORM>
</HTML>

Elementwerte setzen und holen

Ein Formular nutzt reichlich wenig, wenn Sie damit nicht Werte von Elementen setzen und holen können. Bei den meisten Elementen wird der Wert mit der Eigenschaft value entnommen, z. B.:

alert MyForm.txtName.Value

Sie können den Wert eines Elements auch setzen, indem Sie seinem Wert eine Zeichenkette zuordnen, z. B.:

MyForm.txtName.value = "jerry"

ActiveX-Objekte hinzufügen

Im vorherigen Abschnitt haben Sie gelernt, wie Sie in VBScript mit Formularen und Elementen interagieren. Damit haben Sie eine Basis, um gute Web-Pages zu entwickeln, die Formulare für Benutzereingaben enthalten.

Für echte Interaktion brauchen Sie aber ActiveX-Objekte (ich benutze die Begriffe »Objekt« und »Steuerung« gleichbedeutend). Verstehen Sie mich nicht falsch: Formulare sind ausgezeichnet. ActiveX-Objekte bringen eben einfach mehr Aktion in eine Web-Page und bieten Ihnen viel Flexibilität.

Objekte manuell hinzufügen

Die meisten Dinge können auf zwei Arten durchgeführt werden: umständlich und einfach. Den Umgang mit ActiveX-Objekten lernt man wie viele Dinge auf die schwierigere Art. Genau das machen wir in diesem Abschnitt. Wir fügen ActiveX-Objekte in eine Web-Page ein und setzen die Eigenschaften eines Objekts mit HTML-Tags.

Das <OBJECT>-Tag

Um Steuerungen in ein Formular einzufügen, benutzen Sie das Tag <INPUT>. Es weist den Browser an, an der betreffenden Stelle eine Steuerung einzufügen und gibt ihm ausreichend Informationen über das betreffende Objekt. Sie können den Browser z. B. mit folgendem Tag anweisen, daß eine Schaltfläche zu verwenden ist:

<INPUT NAME="btnButton" TYPE="BUTTON" VALUE="Click Me">

Das Tag <OBJECT> bewirkt das gleiche, d. h. es liefert dem Browser Informationen über das in die Web-Page einzufügende Objekt. Hier ein Beispiel mit dem Tag <OBJECT>:

<OBJECT CLASSID="clsid:Number" ID=Label WIDTH=Width HEIGHT=Number>

Die Syntax von <OBJECT> ist allerdings etwas schwieriger als die von <INPUT>. Erstens hat es kein TYPE-Attribute, um den Steuerungstyp zu setzen. Statt dessen verwenden Sie das Attribut CLASSID. Auf diese Weise identifiziert Ihr Computer ActiveX-Objekte. Dieses Attribut ist eine seltsam aussehende 16 Byte große hexadezimale Zahl, z. B.:

FE3A6742-0214-0617-1019-001044830612
Im Fachbuch Special Edition – Using the Windows 95 Registry von Que wird CLASSID ausführlich beschrieben.

Das Tag <OBJECT> hat auch ein ID-Attribut, das wie das Attribut NAME des Tags ELEMENT funktioniert. Es gibt der betreffenden Instanz des Objekts einen Namen, den Sie in Ihren Skripten verwenden können. Wahlweise können Sie <OBJECT> mit den Tags <WIDTH> und <HEIGHT> verwenden, um die genaue Größe des Objekts in der Web-Page zu definieren. Nachfolgend ein komplettes <OBJECT>-Tag:

<OBJECT CLASSID="clsid:FE3A6742-0214-0617-1019-001044830612" ID=MyControl WIDTH=250 HEIGHT=100>

Das <PARAM>-Tag

Dieses Tag wird benutzt, um die einzelnen Eigenschaften eines ActiveX-Objekts zu definieren. In Visual Basic können Sie das Eigenschaftenregister einer Steuerung benutzen. Wenn Sie ein Objekt in eine HTML-Datei manuell einfügen, müssen Sie aber das Tag <PARAM> benutzen. Das Format dieses Tags ist einfach:

<PARAM NAME=PropertyName VALUE=PropertyValue>

Das Attribut NAME bezeichnet den Namen der definierten Eigenschaft. Das Attribut VALUE ist der eigentliche Wert der Zeichenkette, auf den Sie die Eigenschaft setzen wollen. Sie können wie folgt eine Eigenschaft namens ENABLED auf FALSE setzen:

<PARAM NAME="Enabled" VALUE=<False">

Label in einer Web-Page verwenden

In Visual-Basic-Programmen werden Label benutzt, um die Labels einfuegenFormulare eines Programms mit Text zu beschreiben. Sie können aber Text schon in der HTML-Datei eingeben, wozu in aller Welt sollten dann Label dienen? Der einzige Grund ist Flexibilität. Mit einem ActiveX-Label haben Sie mehr Möglichkeiten, als nur die Größe, Schriftart und teilweise auch die Position zu definieren.

Um ein Label-Objekt in eine HTML-Datei einzufügen, definieren Sie in der Datei an der gewünschten Stelle folgende Tags:

<HTML>
<OBJECT ID="lblMyLabel" CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" WIDTH="250" HEIGHT="100">
<PARAM NAME="Caption" VALUE="This is my label.">
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4">
</OBJECT>
</HTML>

Sie können die Attribute ID, HEIGHT und WIDTH des Tags <OBJECT> nach Belieben ändern. Das Attribut CLASSID müssen Sie aber genau in der hier aufgezeigten Weise eingeben.

Mit jedem <PARAM>-Tag wird eine bestimmte Eigenschaft des Objekts definiert, in diesem Fall Caption (Überschrift), Angle (Winkel) und Alignment (Ausrichtung). Das Label-Objekt hat noch viele weitere Eigenschaften, die Sie ändern können. In Listing 24.12 sehen Sie ein Beispiel einer HTML-Datei mit dem obigen Label-Objekt. Mit diesem ActiveX-Label werden grundlegende Eigenschaften gesetzt, Sie können aber auch die Schaltflächen Rotate und Align benutzen, um das Label auf der Seite so auszurichten wie in Abbildung 24.4.

Listing 24.12: Definieren eines Labels für eine Web-Page

<HTML>
<OBJECT ID="lblMyLabel" CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
WIDTH="500" HEIGHT="250">
<PARAM NAME="Caption" VALUE="This is my label.">
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4">
</OBJECT>

<FORM NAME="MyForm">
<INPUT NAME="btnRotate" TYPE="BUTTON" VALUE="Rotate">
<INPUT NAME="btnMove" TYPE="BUTTON" VALUE="Move">
<SCRIPT LANGUAGE="VBScript">
<!--
Sub btnRotate_onClick
lblMyLabel.Angle = (lblMyLabel.Angle + -5) Mod 360
End Sub

Sub btnMove_onClick
lblMyLabel.Alignment = (lblMyLabel.Alignment + 1) Mod 9
lblMyLabel.Caption = "This is my Label (" & lblMyLabel.Alignment & ")."
End Sub
-->
</SCRIPT>
</FORM>
</HTML>

Abbildung 24.4: Wohin die einzelnen Ausrichtungen das Label führen, erfahren Sie durch Anklicken der Schaltfläche Move

siehe Abbildung

Popup-Menü in einer Web-Page einfügen

Haben Sie schon einmal eine Web-Page gesehen, in Popup-Menue einfuegender irgendwo ein Menü herausspringt? Ich meine nicht das Kontextmenü im Internet Explorer, das erscheint, wenn man mit der rechten Popup-Menue einfuegenMaustaste auf etwas klickt. Ich spreche von einem Menü, das die Web-Page erzeugt. Das können Sie mit dem ActiveX-Objekt Popup Menu.

Listing 24.13 definiert ein Popup-Menü in einer HTML-Datei. Das Tag <OBJECT> für diese Steuerung setzt das ID-Attribut auf mnuPopup. Ich habe die Attribute WIDTH und HEIGHT in diesem Beispiel auf Null gesetzt, damit das Objekt nicht ungebührlich Platz auf der Page belegt. Das Menü soll ja nur auf Kommando erscheinen.

Die einzelnen Menüoptionen werden mit dem Tag <PARAM> eingefügt. Wie üblich werden die Eigenschaften mit dem Attribut NAME benannt. Für die Werte der Eigenschaften verwenden Sie das Attribut VALUE. Die Eigenschaften der Menüoptionen beginnen mit Menuitem[0]. Die Menüoptionen müssen in der richtigen Reihenfolge eingegeben werden. Falls Sie eine Menüoption entfernen, vergessen Sie nicht, die restlichen neu durchzunumerieren.

Listing 24.13: Definieren eines Popup-Menüs für eine Popup-Menue definierenWeb-Page

<HTML>
<OBJECT ID="mnuPopup" WIDTH=0 HEIGHT=0 CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2">
<PARAM NAME="Menuitem[0] " VALUE="First Item">
<PARAM NAME="Menuitem[1] " VALUE="Second Item">
<PARAM NAME="Menuitem[2] " VALUE="Third Item">
<PARAM NAME="Menuitem[3] " VALUE="Fourth Item">
<PARAM NAME="Menuitem[4] " VALUE="Fifth Item">
<PARAM NAME="Menuitem[5] " VALUE="Sixth Item">
</OBJECT>

<SCRIPT LANGUAGE="VBScript">
<!--
Sub mnuPopup_Click( intItem )
alert "You clicked on item #" & intItem
End Sub
Sub btn_onClick
mnuPopup.PopUp
End Sub
-->
</SCRIPT>
<INPUT NAME="btn" TYPE="BUTTON" VALUE="Click me">
</HTML>

Das Skript am Ende des Listings zeigt auf, wie das Menü angezeigt und das Klickereignis abgearbeitet wird. Irgendwie muß ja festgelegt werden, daß das Menü angezeigt werden soll. Das erreichen Sie mit der Ereignisprozedur für Schaltflächen. Die Popup-Methode des Menüs wird aufgerufen, um das Menü an der aktuellen Mausposition anzuzeigen. Wie das im wirklichen Leben aussieht, sehen Sie in Abbildung 24.5. Das einzige Argument für die Ereignisprozedur ist die Anzahl der Menüoptionen, die der Benutzer ausgewählt hat, beginnend mit 1.

Abbildung 24.5: Das Popup-Menü von Listing 24.13 im Browser-Fenster

siehe Abbildung

Objekte über das ActiveX-Steuerfeld hinzufügen

Wir haben die umständliche Methode zum Einfügen von ActiveX-Objekten durchgezogen und wenden uns nun der einfachen zu. Mit dem ActiveX-Steuerfeld brauchen Sie nur auf die Stelle zu zeigen, an der ein Objekt eingefügt werden soll. Dann weisen Sie das Steuerfeld an, das Objekt einzufügen und definieren die Eigenschaften des Objekts. Einfacher geht's wirklich nicht.


Wenn Sie das Steuerfeld noch nicht installiert haben, können Sie es von Microsofts WebSite unter http://www.microsoft.com/intdev/author/cpad/download.htm herunterladen.

Das Steuerfeld bietet drei primäre Funktionen für VBScript-Entwickler:


Das ActiveX-Steuerfeld enthält die komplette VBScript- und HTML-Referenz. Wählen Sie Hilfe im Hauptmenü des Steuerfeldes, dann wählen Sie VBScript Reference bzw. HTML Reference.

So funktioniert das Steuerfeld

In Abbildung 24.6 sehen Sie das Steuerfeld-Fenster mit einer HTML-Datei. Sie können beliebig viele HTML-Dateien im Steuerfeld öffnen, weil es eine MDI-Anwendung ist. Über das Fenster-Menü wechseln Sie zwischen den Fenstern.

Abbildung 24.6: Im Editorfenster erscheint der Inhalt der HTML-Datei

siehe Abbildung

1) Objektsymbol 2) Skriptsymbol

Im oberen Teil der HTML-Datei befindet sich ein Objekt. Sie sehen das Tag <OBJECT> in der Datei. Außerdem sehen Sie das Objektsymbol am Rand des Editorfensters. Klicken Sie auf dieses Symbol, um das danebenliegende Objekt in das Editorfenster zu holen. Unter dem Objekt befindet sich ein Skript. Das Skriptsymbol erscheint ebenfalls am Rand des Editorfensters. Klicken Sie auf dieses Symbol, können Sie das Skript mit dem Skriptassistenten bearbeiten.

Sie können im Editorfenster jeden beliebigen Text und beispielsweise Formulare in die Datei eingeben. Außerdem können Sie Tags für Überschriften, Listen usw. einfügen. Falls Sie sich selbst strafen wollen, können Sie im Editorfenster auch Objekte in den HTML-Code eintippen. Angesichts der Funktionen, die Sie im nächsten Abschnitt kennenlernen, rate ich Ihnen davon aber ab.

Objekte in eine HTML-Datei einfügen

Sie können ein Objekt in eine HTML-Datei auf die einfache ActiveX-Objekte einfuegenArt einfügen. Setzen Sie den Mauszeiger an die Stelle, an der das Objekt einzufügen ist, wählen Sie Insert ActiveX Control und Sie erhalten das Dialogfenster von Abbildung 24.7. In diesem Dialogfenster können Sie ein Objekt aus denen auswählen, die auf Ihrem Rechner verfügbar sind.

Abbildung 24.7: Die nutzbaren ActiveX-Steuerungen haben Bezeichnungen wie Microsoft ActiveX Irgendwas oder Forms 2.0 Nochwas; Objekte mit der Namensendung Ctl dürfen Sie nicht benutzen

siehe Abbildung

Wählen Sie das gewünschte Objekt und klicken Sie auf OK. Das Steuerfeld öffnet den Objekteditor und das Eigenschaftenregister für das Objekt (siehe Abbildung 24.8). In diesem Dialogfenster können Sie alle Eigenschaften des Objekts ändern.

Diese Art der Verwendung von Objekten nennt man Design-Time, weil man an diesem Punkt das Aussehen der Web-Page entwirft. Im Gegensatz dazu verwendet der Endbenutzer die Objekte in der Run-Time, weil das die Zeit ist, in der all die schönen Sachen ablaufen. Für viele Objekte brauchen Sie eine Nutzungslizenz. Alle in diesem Kapitel verwendeten Objektbeispiele zählen aber nicht dazu. Sie alle stammen aus dem Internet Explorer.

Abbildung 24.8: In diesem Register können die Eigenschaften von Objekten geändert werden

siehe Abbildung

Haben Sie alle Eigenschaften nach Wunsch geändert, klicken Sie auf die Schließen-Schaltfläche (die mit dem X), um beide Fenster zu schließen. Anschließend fügt das Steuerfeld die Tags <OBJECT> und <PARAM> in die HTML-Datei ein, was bedeutet, daß sie auf die geänderten Eigenschaften aktualisiert wird.


Das Steuerfeld hat eine ganz eigene nervige Art, die Tags <OBJECT> und <PARAM> zu formatieren. Um Chaos zu vermeiden, formatiere ich alle Tags durchgängig auf diese Art.

Skripts mit dem Skriptassistenten bearbeiten

Vermissen Sie etwa nicht die integrierte Entwicklungsumgebung von Visual Basic? Ich schon. Doch auch wenn Sie nie mit Visual Basic gearbeitet haben, erwarten Sie vielleicht mehr als bisher beschrieben wurde.

1) Hier ändern Sie ihren Wert 2) hier wählen Sie eine Eigenschaft

Ja, da ist schon noch was: der Skriptassistent des Steuerfeldes. Dieses Ding »Assistent« zu nennen, ist ein bißchen irreführend, weil er sich nicht so präsentiert wie alle anderen Assistenten in Windows 95. Er bietet eine harmonische Oberfläche zum Editieren der Ereignisse von Objekten in der HTML-Datei. Er gestattet das sogar auf zwei Arten:


Falls Sie nicht sicher sind, welche Eigenschaften, Methoden und Ereignisse ein bestimmtes Objekt Ihrer HTML-Datei unterstützt, klicken Sie auf die Schaltfläche Skriptassistent in der Symbolleiste und wählen Sie das Objekt im linken Ausschnitt, dann werden dessen Ereignisse angezeigt. Wenn Sie das Objekt im rechten Ausschnitt wählen, erscheinen seine Eigenschaften und Methoden.
Die Listen-Ansicht

In der Listen-Ansicht des Skriptassistenten können Sie einen Ereignishandler auf die denkbar einfachste Art editieren. Klicken Sie auf die Schaltfläche Skriptassistent in der Symbolleiste, dann klicken Sie auf die Schaltfläche List View unten im Fenster. Als nächstes erscheint das in Abbildung 24.9 dargestellte Fenster.

Abbildung 24.9: Die Listen-Ansicht des Skriptassistenten

siehe Abbildung

1) Ereignisse 2) Eigenschaften und Methoden 3) mit dem gewählten Ereignis verknüpfte Aktionen

Und so funktioniert das alles:

Die Code-Ansicht

Sagt Ihnen eine traditionelle Programmierumgebung ganz im Stil des ungebrochenen Optimismus mehr zu, können Sie in der Code-Ansicht des Skriptassistenten arbeiten. Der einzige Unterschied zur Listen-Ansicht besteht darin, daß im unteren Fensterausschnitt keine Liste mit den angeknüpften Ereignissen und Aktionen erscheint. Statt dessen sehen Sie den Code.

Klicken Sie auf die Schaltfläche Skriptassistent in der Symbolleiste, dann klicken Sie auf die Schaltfläche Code View unten im Fenster. Als nächstes erscheint das in Abbildung 24.10 dargestellte Fenster.

Abbildung 24.10: Die Code-Ansicht des Skriptassistenten

siehe Abbildung

Im unteren Bereich können Sie Aktionen eingeben wie in der Listen-Ansicht. In dieser Ansicht gibt es aber die Schaltfläche Insert Action nicht. Statt dessen doppelklicken Sie auf die Aktion im rechten Ausschnitt.

Den Code können Sie auf jede beliebige Weise überarbeiten. Sie können Argumente für die einzelnen Methoden sowie Bedingungs- und Schleifenanweisungen einfügen. Gefällt Ihnen, was Sie da sehen, klicken Sie auf OK, um den Skriptassistenten zu schließen.


Lassen Sie den Web-Browser mit der Web-Page, die Sie gerade bearbeiten, laufen. So können Sie zwischen den zwei Fenstern wechseln, um die Page zwischendurch zu aktualisieren und die Ergebnisse zu prüfen.

⌐ 1997 Que
Ein Imprint des Markt&Technik Buch- und Software- Verlag GmbH
Elektronische Fassung des Titels: Special Edition: Internet, ISBN: 3-8272-1003-8

Previous Page Page Top TOC Index Next Page See Page