var Eingabe_des_Besuchers;
Eingabe_des_Besuchers = document.getElementById("Besuchereingabe").value;
alert(Eingabe_des_Besuchers);
Die erste Zeile hält nichts Neues bereit. Dort wird eine Variable namens Eingabe_des_Besuchers definiert. Interessanter ist schon die zweite Zeile. Dort wird der zuvor definierten Variablen etwas zugewiesen. Dabei handelt es sich um den Wert, der von einer internen JavaScript-Funktion namens getElementById zurückgegeben wird.
Bevor Sie erfahren, welchen Zweck diese Funktion erfüllt, schauen wir uns an, wie sie aufgerufen wird. Wie bereits früher in diesem Kapitel im Abschnitt »JavaScript-Grundlagen« erwähnt wurde, ist JavaScript objektorientiert. Fast alle Befehle, die Sie im JavaScript-Code nutzen, beziehen sich auf ein bestimmtes Objekt. In der Zeile
ist document ein Objekt, das das Dokument repräsentiert, in dem sich der JavaScript-Code befindet. Dies ist natürlich die aktuelle Webseite mit dem Textfeld und der Schaltfläche. Diese beiden Elemente sind ebenfalls Objekte, die bestimmte Eigenschaften besitzen. Um mit JavaScript-Code auf diese Eigenschaften zugreifen zu können, müssen Sie gemäß der Objekthierarchie ein Konstrukt verwenden, das die folgende Struktur aufweist:
GewünschtesObjekt.Eigenschaftsname
Genau dies tun Sie mithilfe der getElementById-Funktion, der Sie die ID des Elements übergeben, auf dessen Eigenschaften Sie zugreifen möchten. Der Code
document.getElementById("Besuchereingabe").value
bewirkt somit, dass der Browser im aktuellen Dokument (document) überprüft, ob es ein Element
mit der ID Besuchereingabe gibt [getElementByID("Besuchereingabe")]. In diesem Fall wird der Wert zurückgegeben, der der Eigenschaft value zugewiesen ist. Und dieser Wert wird in der Variablen Eingabe_des_Besuchers gespeichert. Das Element mit der ID Besuchereingabe ist das von Ihnen eingefügte Textfeld, und die value-Eigenschaft dieses Elements repräsentiert den Text innerhalb des Textfeldes, also die Eingabe des Besuchers.
Die Zeile
alert(Eingabe_des_Besuchers);
sorgt schließlich dafür, dass der Inhalt der Variablen (der vom Besucher eingegebene Text) in einem Dialogfeld angezeigt wird.
An diesem Code erkennen Sie, dass Sie Eigenschaftswerte nicht nur setzen, sondern auch auslesen können, und dass dies auch während der Ausführung des Skripts (zur Laufzeit) möglich ist. Wollten Sie den Wert der Eigenschaft value zur Laufzeit setzen, müssten Sie die folgende Anweisung verwenden:
document.getElementById("Besuchereingabe").value = "Text, der im Textfeld erscheinen soll.";
Die Ereignisdefinition
Nun müssen Sie dem Browser noch mitteilen, dass die Funktion Schaltflaeche_wurde_geklickt ausgeführt werden soll, wenn ein Besucher die Schaltfläche betätigt. Wechseln Sie dazu wieder zur Entwurfsansicht, und markieren Sie die Schaltfläche.
Im Aufgabenbereich Tageigenschaften werden jetzt wieder alle Attribute (Eigenschaften) des Schaltflächenelements angezeigt. Wenn Sie den Aufgabenbereich weiter nach unten blättern, werden Sie jedoch feststellen, dass dort ebenfalls Ereignisnamen aufgeführt sind. Sollte der Knoten Ereignisse geschlossen sein, klicken Sie auf das Pluszeichen davor, um ihn zu öffnen, sodass darunter alle Ereignisse aufgelistet werden, die für das markierte Element zur Verfügung stehen. Die Abbildung 9.18 zeigt dies.
Abbildung 9.18 Der Aufgabenbereich Tageigenschaften führt
nicht nur die Attribute auf, sondern auch die Ereignisse, die für
das markierte Element zur Verfügung stehen
Klicken Sie in das Feld rechts neben onclick, und geben Sie den folgenden Text ein (schließen Sie die Eingabe mit der Return-Taste ab):
Schaltflaeche_wurde_geklickt()
Wenn Sie nun zur Codeansicht und zu der Zeile wechseln, in der sich das Tag für die Schaltfläche befindet, werden Sie feststellen, dass Expression Web 2 die Zeile aufgrund Ihrer Einstellung im Aufgabenbereich Tageigenschaften wie folgt verändert hat:
Dem Tag wurde der Code onclick="Schaltflaeche_wurde_geklickt()" hinzugefügt. Das Schlüsselwort onclick ist der Name eines Ereignisses (der Besucher klickt auf die Schaltfläche). Wenn dieser Name innerhalb der Definition der Schaltfläche angegeben wird, weiß der Browser, dass eine Reaktion auf das Ereignis erfolgen soll. Wie Sie darauf reagieren möchten, legen Sie hinter dem Gleichheitszeichen fest, das onclick folgt. Dort ist in Anführungszeichen der Name der Funktion aufgeführt, die Sie zuvor programmiert haben. Der Browser weiß somit, dass die in der Funktion Schaltflaeche_wurde_geklickt enthaltenen Anweisungen ausgeführt werden sollen, wenn ein Besucher auf die Schaltfläche klickt.
SELFPHP
SELFPHP OHG, info@selfphp.de, Impressum, Kontakt