Mit Formularen arbeiten(1/4)

Inhaltsüberprüfung von Formularen (2/4)

Statements (3/4)

Arrays (4/4)

Cookies (4/4)

Interessante Links zu JavaScript

JavaScript Workshop Teil 1

Tips - Übersicht

Mit JavaScript lässt sich mehr machen als simple Uhren in der Statusbar oder Textticker. In diesem Workshop, der auf den Grundlagen des ersten Teils im letzten Heft aufbaut, zeigen wir Ihnen, wie sie Ihre Seiten animieren und eine einfache Datenbank in JavaScript entwickeln können.

Im ersten Teil dieses Workshops haben wir die Grundlagen von JavaScript behandelt. Dabei sind wir auf das Konzept dieser einfachen Scriptsprache eingegangen und haben die grundlegenden Programmiermöglichkeiten mit Objekten und Methoden, Events und ihren Handlers sowie die Funktionen eingeführt. Im vorliegenden zweiten Teil sollen diese Grundlagen vertieft und, auf ihnen aufbauend, zu komplexeren Scripts vorgestossen werden. Die in Teil 1 dieses Workshops angekündigte Behandlung der neuen Features von Navigator 4.0 – Layer und JavaScript Style Sheets – mussten wir leider auf eine spätere Ausgabe verschieben. Wir werden darauf zurückkommen, sobald die finale Version des Browsers erhältlich ist.

Auch in diesem zweiten Teil wird in den Beispielen der Einfachheit halber auf die normalen HTML-Tags sowie auf die <SCRIPT>-Tags verzichtet, wenn sie für das Verständnis nicht notwendig sind. Die kompletten, in HTML-Seiten integrierten Beispiele finden Sie wie gewohnt in Windows Guide Online. Vergessen Sie auch hier nicht, dass nur Übung den Meister macht. Schauen Sie sich die Beispiel-Scripts an und versuchen Sie sie nachzuvollziehen und an Ihre eigenen Bedürfnisse anzupassen.

Mit Formularen arbeiten
Als Web-Surfer haben Sie bestimmt schon mit Formularen zu tun gehabt, als Webmaster gehört für Sie der Umgang mit Formularen oder einzelnen Formularelementen wahrscheinlich zur täglichen Arbeit. Normalerweise gibt man in ein Formular eine Information ein und drückt den Senden-Knopf, um den Inhalt an den Server zu schicken.

JavaScript bietet nun im Umgang mit Formularen verschiedene Vorteile. So können die Inhalte direkt im Browser – ohne Umweg über den Server – auf ihre Gültigkeit überprüft werden oder die einzelnen Elemente können zusammen interagieren. Beispielsweise ist es möglich, auf einer Seite, die ein Bestellformular mit diversen kostenpflichtigen Optionen anbietet, als Zusatzleistung auch den jeweils gerade aktuellen Gesamtpreis anzuzeigen, abhängig von den ausgewählten Extras und Produkten. Bevor der Browser die Bestellung dann an den Server übermittelt, kann er noch schnell überprüfen, ob alle notwendigen Felder ausgefüllt sind und grob abchecken, ob die Inhalte Sinn machen.

Grundsätzlich besteht zwischen normalen HTML-Formularen und solchen, die mit JS erweitert sind, nur ein wesentlicher Unterschied: JS-Formulare beinhalten einen oder mehrere Event Handler, die Aktionen aufrufen und für nicht JS-fähige Browser unsichtbar sind. Damit lassen sich dieselben Formulare für jeden Browser verwenden. Ausserdem sollte in einem JS-Formular jedes Element einen Namen haben.

Jedes Formular in einer Web-Seite wird von JS als Eintrag in forms[x] gespeichert, wobei x für das erste Formular eines Dokuments gleich 0 ist, das zweite Formular ist gleich 1 etc. Innerhalb der <FORM>-Tags befinden sich die einzelnen Elemente des Formulars, beispielsweise die Radiobuttons und Textfelder. Diese Elemente werden in elements[x] gespeichert.

Zum Beispiel haben Sie in Ihrer Web-Seite folgendes Formular:

Dieses Formular beinhaltet zwei Elemente: Eine Checkbox und einen Button. Da es das erste Formular in Ihrer Seite ist, werden seine Elemente also folgendermassen adressiert:

• document.forms[0].elements[0] (alternativ document.myform.info) für die Checkbox

• document.forms[0].elements[1] (alternativ document.myform.back) für den Button

Die alternative Adressierung beruft sich auf die Namen, die den einzelnen Elementen als Eigenschaft zugewiesen werden können.

Jedes Objekt, das in einem Formular vorkommen kann, hat seine speziellen Eigenschaften, Methoden und Event-Handlers. Die Eigenschaften kennen Sie bereits, es sind dieselben, die Sie in HTML benutzen. Buttons, Radiobuttons und Checkboxen kennen nur den Event-Handler onClick. Interessanter wird die Sache bei den Textfeldern. Diese kennen die drei Methoden focus(), blur() und select(), mit denen ein Textfeld ausgewählt oder verlassen und der ganze Inhalt ausgewählt werden kann, sowie die event handler on

Focus, onBlur, onChange und onSelect. Ein Beispiel, was man mit Textfeldern machen kann, haben wir mit dem Text-Ticker schon in Teil 1 dieses Workshops behandelt. Sie finden es in einer erweiterten Form in Windows Guide Online.

Auch der Form-Tag selber hat Eigenschaften, wobei von diesen insbesondere das ACTION-Attribut von praktischem Nutzen ist. Damit ist es beispielsweise möglich, je nach User-Eingabe auf eine andere Seite zu verweisen:

In ein Formular wird eine Checkbox integriert, in der der Besucher angeben kann, ob er bereits Abonnent des Windows Guide ist. Falls er das Kästchen aktiviert, wird er zur Homepage des WG geführt, wenn nicht, macht er einen Umweg über das Online-Aboformular.

Nächste Seite | Tips