Teil von  SELFPHP
Professional CronJob-Service

Suche

International PHP Conference


WebTech Conference


:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: SELFPHP Forum ::

Fragen rund um die Themen PHP?
In über 130.000 Beiträgen finden Sie sicher die passende Antwort!  

 
PHP Summit


Software Architecture Summit


:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 
HTML5 Days


JavaScript Days


:: Qozido ::

Die Bilderverwaltung mit Logbuch für Taucher und Schnorchler.   

 
 
Clientseitige Webprogrammierung

Eigenschaften zur Laufzeit setzen und auslesen

Beachten Sie bitte den folgenden Code:

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

Eingabe_des_Besuchers = document.getElementById("Besuchereingabe").value;

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:

<input name="Button1" type="button" value="Schaltfläche" onclick="Schaltflaeche_wurde_geklickt()"/>

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.



Seite 23 von 28 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28



Copyright © 2010
Microsoft Deutschland GmbH
Alle Rechte vorbehalten.

 Microsoft Deutschland GmbH
 




:: Premium-Partner ::

Webhosting/Serverlösungen

Pixel X weitere Premium-Partner
 

:: SELFPHP Sponsor ::

Kaspersky Labs GmbH weitere Sponsoren
 

:: Buchempfehlung ::

Einführung in XHTML, CSS und Webdesign

Einführung in XHTML, CSS und Webdesign zur Buchempfehlung
 

:: Anbieterverzeichnis ::

Webhosting/Serverlösungen

Suchen Sie den für Sie passenden IT-Dienstleister für Ihr Webhosting-Paket oder Ihre Serverlösung?

Sie sind nur ein paar Klicks davon entfernt!


 

Ausgewählter Tipp im Bereich PHP-Skripte


Dateien und Verzeichnisse mit TAR/Gzip komprimieren

Weitere interessante Beispiele aus dem SELFPHP Kochbuch finden Sie im Bereich PHP-Skripte
 

SELFPHP Code Snippet


Christi Himmelfahrt für ein bestimmtes Jahr ermitteln

Weitere interessante Code Snippets finden Sie auf SELFPHP im Bereich PHP Code Snippets
 
© 2001-2014 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt