Wenn Sie in der Toolbox unter der Kategorie Formularsteuerelemente einen Doppelklick auf dem nebenstehend abgebildeten Symbol ausführen, wird eine erweiterte Schaltfläche in das HTML-Dokument an der Position der Einfügemarke eingefügt.
Erweiterte Schaltflächen erfüllen denselben Zweck wie gewöhnliche Schaltflächen. Die Beschriftung einer erweiterten Schaltfläche kann jedoch aus HTML-Inhalten bestehen. Dies bedeutet, dass Sie den Beschriftungstext wie gewöhnlichen Webseitentext formatieren können.
Um den von Expression Web 2 vorgegebenen Beschriftungstext einer erweiterten Schaltfläche (der Schaltfläche lautet) zu ändern, führen Sie einen Doppelklick darauf aus. Danach können Sie einen eigenen Text eingeben und diesen wie gewohnt markieren und mit den gewünschten Formatierungen auszeichnen.
Um die Größe einer erweiterten Schaltfläche zu ändern, klicken Sie mit der linken Maustaste darauf. Die Schaltfläche wird dadurch nicht markiert, sondern die Einfügemarke blinkt innerhalb der Beschriftung, sodass Sie diese ändern können. Da die Schaltfläche nicht markiert ist, fehlen auch die gewohnten Ziehpunkte zur Größenänderung. Damit diese angezeigt werden, bewegen Sie den Mauszeiger auf den rechten oder unteren Rand der Schaltfläche. Sobald die Punkte zu sehen sind, können Sie sie mit der Maus greifen, um die Größe der Schaltfläche zu ändern.
Ausgeblendete Eingabefelder
Wenn Sie in der Toolbox unter der Kategorie Formularsteuerelemente einen Doppelklick auf dem nebenstehend abgebildeten Symbol ausführen, wird ein ausgeblendetes Eingabefeld in das HTML-Dokument an der Position der Einfügemarke eingefügt.
Die Besucher können dieses Feld nicht sehen und seinen Wert nicht verändern. Es dient somit ausschließlich rein internen Zwecken. Es kann beispielsweise vom JavaScript-Code verwendet werden, um bestimmte Werte zwischenzuspeichern, die für die Verarbeitung notwendig sind.
Ereignisse
Die letzten Abschnitte haben die wichtigsten Formularfelder vorgestellt, die Sie über die Toolbox von Expression Web 2 in ein HTML-Dokument einfügen können. Sie wissen jedoch nicht, wie Sie diese Objekte in Ihren JavaScripts nutzen können. Wie lesen Sie z.B. ein Textfeld aus, oder wie erfahren Sie, welche Option ein Besucher aus einem Listenfeld oder einer Optionsfeldgruppe ausgewählt hat?
Bevor Sie diese Informationen ermitteln können, müssen Sie zunächst wissen, ob der Besucher bereits eine Auswahl oder Eingabe vorgenommen hat. Sie ordnen auf dem HTML-Dokument deshalb in der Regel eine Schaltfläche zusammen mit den Elementen an, die für die Optionsauswahl oder Eingabe erforderlich sind. Wenn der Besucher alle Einstellungen vorgenommen hat, zeigt er dies an, indem er auf die Schaltfläche klickt. Doch wie erfahren Sie, ob eine Schaltfläche auf Ihrer Webseite angeklickt wurde? Und wie reagieren Sie mit JavaScript-Anweisungen auf dieses Ereignis?
Wenn ein Besucher auf einer Webseite auf eine Schaltfläche klickt, einen Eintrag aus einem Listenfeld auswählt, ein Optionsfeld oder Kontrollkästchen aktiviert oder deaktiviert und etwas in ein Textfeld eingibt, registriert dies der Browser, indem die Webseite angezeigt wird. Der Browser prüft dann, ob Sie mit einem Skript auf dieses Ereignis reagieren möchten. Dazu müssen Sie innerhalb der Definition des Objekts, für das das Ereignis ausgelöst wurde, eine JavaScript-Funktion angeben, deren Anweisungen als Reaktion auf das Ereignis ausgeführt werden sollen.
Dazu ein einfaches Beispiel. Erstellen Sie bitte mit Expression Web 2 eine neue HTML-Webseite, und fügen Sie dieser ein einzeiliges Textfeld vom Typ Eingabe (Text) und eine Schaltfläche vom Typ Eingabe (Schaltfläche) hinzu. Markieren Sie das Textfeld, und weisen Sie ihm die eindeutige ID Besuchereingabe zu, indem Sie im Aufgabenbereich Tageigenschaften die id-Eigenschaft des Textfeldes auf Besuchereingabe setzen. Ihr HTML-Dokument sollte nun wie die in Abbildung 9.17 dargestellte Webseite aufgebaut sein.
Abbildung 9.17 Ein einfaches HTML-Dokument mit einem Textfeld und einer Schaltfläche
Wechseln Sie nun zur Codeansicht, indem Sie auf den entsprechenden Registerreiter im unteren linken Bereich des Arbeitsbereichs klicken. Sie werden zuerst eine Funktion schreiben, die Sie Schaltflaeche_wurde_geklickt nennen. Die Anweisungen dieser Funktion sollen später ausgeführt werden, wenn ein Besucher auf die Schaltfläche klickt. In der Funktion soll der Inhalt des Textfeldes in einem Meldungsfeld angezeigt werden.
Bewegen Sie die Einfügemarke vor das abschließende Tag </head>, fügen Sie mit der Return-Taste eine leere Zeile ein, setzen Sie die Einfügemarke in diese Zeile, und geben Sie den folgenden Skriptblock ein:
<script language="javascript" type="text/javascript">
<!--
function Schaltflaeche_wurde_geklickt() {
var Eingabe_des_Besuchers;
Eingabe_des_Besuchers = document.getElementById("Besuchereingabe").value;
alert(Eingabe_des_Besuchers);
}
//-->
</script>
SELFPHP
SELFPHP OHG, info@selfphp.de, Impressum, Kontakt