Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 9 Formulare
|  | 9.1 Überprüfung auf Vollständigkeit
|  |  | 9.1.1 Allgemeiner Aufbau
|  |  | 9.1.2 Texteingabefelder
|  |  | 9.1.3 Radiobuttons
|  |  | 9.1.4 Checkboxen
|  |  | 9.1.5 Auswahllisten
|  |  | 9.1.6 Fehlermeldung ausgeben
|  |  | 9.1.7 Konstruktive Vorschläge
|  | 9.2 Automatische Überprüfung
|  |  | 9.2.1 Texteingabefelder
|  |  | 9.2.2 Radiobuttons
|  |  | 9.2.3 Checkboxen
|  |  | 9.2.4 Auswahllisten
|  |  | 9.2.5 Zusammenfassung
|  | 9.3 Anwendungsmöglichkeiten für Formulare
|  |  | 9.3.1 Währungsrechner
|  |  | 9.3.2 Währungsrechner, Teil 2
|  |  | 9.3.3 Formularfelder für die Textausgabe nutzen
|  |  | 9.3.4 Navigation mit Auswahllisten
|  | 9.4 Anwendungsbeispiel: Fensteroptionen
|  | 9.5 Daten behalten
|  |  | 9.5.1 Das Eingabeformular
|  |  | 9.5.2 Die Ausgabeseite
|  | 9.6 Dynamische Auswahllisten
|  |  | 9.6.1 Ein erster Ansatz
|  |  | 9.6.2 Ein fortgeschrittener Ansatz
|  | 9.7 Überprüfungsfunktionen
|  |  | 9.7.1 Ganze Zahlenwerte
|  |  | 9.7.2 Dezimalzahlen
|  |  | 9.7.3 Telefonnummern
|  |  | 9.7.4 E-Mail-Adressen
|  |  | 9.7.5 In Zahlenwerte umwandeln
|  | 9.8 Reguläre Ausdrücke
|  |  | 9.8.1 Kurzeinführung
|  |  | 9.8.2 Ein Objekt erzeugen
|  |  | 9.8.3 Mit dem Objekt arbeiten
## 9.3 Anwendungsmöglichkeiten für Formulare Neben einer einfachen Überprüfung von Benutzereingaben auf Vollständigkeit können Formulare auch noch anderweitig verwendet werden. In diesem Abschnitt werden einige Anwendungsmöglichkeiten vorgestellt, die Sie vielleicht schon in ähnlicher Form im World Wide Web gesehen haben. Sie können sie direkt auf Ihrer Website einsetzen. ### 9.3.1 Währungsrechner Der Kurs D-Mark/Euro ist ja leider nicht exakt 2:1, so dass ein Umrechner in Zeiten des »Teuro« immer noch ein praktisches Hilfsmittel ist (Marke: »wie billig früher doch alles war«). Das Skript wird folgendermaßen aufgebaut:
| In einem Texteingabefeld gibt der Benutzer den Betrag in einer Währung ein.
| In welche Richtung umgerechnet werden soll, also D-Mark in Euro oder umgekehrt, wird mit Radiobuttons ausgewählt.
| Die Umrechnung wird gestartet, indem eine Schaltfläche angeklickt wird.
| Der umgerechnete Betrag wird in einem neuen Texteingabefeld angezeigt.
Die größte Schwierigkeit besteht darin, die Eingaben des Benutzers eventuell umzuformen. JavaScript verwendet das amerikanische Zahlenformat, und das kennt nur einen Dezimalpunkt, kein Dezimalkomma. Also wird das erste Komma durch einen Punkt ersetzt. Die Umwandlung der Zeichenkette in eine Dezimalzahl geschieht automatisch durch die Multiplikation mit dem bzw. Division durch den amtlichen Umrechnungskurs. Andernfalls könnten Sie die Funktionen eval() oder parseFloat() verwenden.
    <html>
    <head>
    <title>Euro-Rechner</title>
    <script type="text/javascript"><!--
    function umrechnen(f) { //f ist eine Referenz
                            //auf das Formular
       var betrag = f.betrag.value;
       if (betrag.indexOf(",")!=-1) {
          betrag = betrag.substring(0, betrag.indexOf(",")) + "." +
                   betrag.substring(betrag.indexOf(",")+1, betrag.length);
       }
       if (f.umrechnung[0].checked) {
          f.ausgabe.value = betrag / 1.95583;
       } else {
          f.ausgabe.value = 1.95583 * betrag;
       }
    }
    //--></script>
    </head>
    <body>
    <form>
    <input type="text" name="betrag" /><br />
    <input type="radio" name="umrechnung" value="DMEUR" checked="checked" /> DM nach Euro |
    <input type="radio" name="umrechnung" value="EURDM" /> Euro nach DM<br />
    <input type="button" value="Umrechnen!"
    onclick="umrechnen(this.form)" />
    <input type="text" name="ausgabe" />
    </form>
    </body>
    </html>
Hier klicken, um das Bild zu Vergrößern Abbildung 9.4 Der Währungsrechner in Aktion Beachten Sie bei obigem Code den Aufruf umrechnen(this.form). Innerhalb jedes Event-Handlers eines Formularelements bezieht sich this auf das entsprechende Formularelement. Nun haben alle Formularelemente praktischerweise eine Eigenschaft form, die eine Referenz auf das dazugehörige Formular darstellt. Man kann also mit this.form das Formular als Parameter direkt an die Funktion übergeben. ### 9.3.2 Währungsrechner, Teil 2 Der Währungsrechner lässt sich mit relativ wenig Aufwand so erweitern, dass auch der Euro-Kurs anderer Währungen ermittelt werden kann. Insbesondere bei international ausgerichteten Webseiten ist das ein netter Service. Die Idee dahinter ist folgende: Die verschiedenen Währungen stehen alle in einer Auswahlliste. Die beiden Radiobuttons sind mit »nach Euro« und »von Euro« beschriftet. Nach einem Klick auf die Schaltfläche wird zunächst das Umtauschverhältnis zwischen Euro und der ausgewählten Währung ermittelt. Dieser Faktor ist in einem Array abgespeichert worden, so dass der Wert von selectedIndex der Auswahlliste direkt als Array-Index verwendet werden kann. Je nachdem, welcher Radiobutton angeklickt worden ist, wird der eingegebene Betrag entweder durch den Umrechnungsfaktor geteilt oder damit multipliziert.
    <html>
    <head>
    <title>Euro-Rechner Teil 2</title>
    <script type="text/javascript"><!--
    var kurs = new Array();
    kurs[0] = 1.95583;
    kurs[1] = 6.55957;
    kurs[2] = 1937.98450;
    function umrechnen(f) { //f ist eine Referenz
                            //auf das Formular
       var betrag = f.betrag.value;
       if (betrag.indexOf(",")!=-1) {
          betrag = betrag.substring(0, betrag.indexOf(","))
          + "." +
                   betrag.substring(betrag.indexOf(",")+1,
                   betrag.length);
       }
       var faktor = kurs[f.Waehrung.selectedIndex];
       if (f.umrechnung[0].checked) {
          f.ausgabe.value = betrag / faktor;
       } else {
          f.ausgabe.value = faktor * betrag;
       }
    }
    //--></script>
    </head>
    <body>
    <form>
    <input type="text" name="betrag" />
    <select name="Waehrung">
       <option>DM</option>
       <option>Franc</option>
       <option>Lira</option>
    </select>
    <br>
    <input type="radio" name="umrechnung" value="nachEUR" checked="checked" /> nach Euro |
    <input type="radio" name="umrechnung" value="vonEUR" /> von Euro<br />
    <input type="button" value="Umrechnen!" onclick="umrechnen(this.form)" />
    <input type="text" name="ausgabe" />
    </form>
    </body>
    </html>
Natürlich können Sie das Beispiel auch umschreiben, sodass Sie mit dem Euro als Referenzwährung zwischen zwei verschiedenen Währungen umrechnen können. Wenn Sie andere Währungen mit aufnehmen, beispielsweise den US-Dollar, müssen Sie den Kurs möglichst häufig aktualisieren, da er sich permanent ändert. ### 9.3.3 Formularfelder für die Textausgabe nutzen Wenn man Nachrichten für den Benutzer ausgeben will, ist ein Fenster via window.alert() etwas aufdringlich, und auch das Schreiben in die Statuszeile hat seine Nachteile. Ein Texteingabefeld eignet sich hierfür jedoch wunderbar. Zwar sind auch hier die gestalterischen Möglichkeiten eingeschränkt, aber man muss die Nachteile gegeneinander abwägen. Wie der Lese- und Schreibzugriff auf Texteingabefelder vonstatten geht, haben Sie weiter oben in diesem Kapitel gesehen, das ist also kein Problem mehr. Etwas ärgerlich ist es jedoch, wenn der Benutzer denkt, er müsse in dieses Texteingabefeld etwas schreiben. Aus diesem Grund wäre es wünschenswert, wenn man das Feld mit einem Schreibschutz (für den Benutzer) versehen könnte. Modernere Browser bieten dafür ein eigenes HTML-Attribut an, aber im Sinne einer allgemein verträglichen Lösung muss man sich mit JavaScript behelfen. Texteingabefelder kennen den Event-Handler onfocus, der genau dann aktiv wird, wenn der Fokus auf dem Texteingabefeld landet (in der Regel sieht man, dass hineingeklickt wird und der Cursor blinkt). Das Gegenteil vom Erhalten des Fokus heißt auf Englisch »to blur« (dt. »verschwimmen«, »undeutlich werden«), und jedes Texteingabefeld besitzt eine Methode namens blur(), die den Fokus entfernt. Durch folgende Zeile wird der Fokus also genau dann von einem Feld weggenommen, wenn es angeklickt wird. Der Benutzer ist also nicht in der Lage, dem Feld permanent den Fokus zu geben und Eingaben zu tätigen.
    <input type="text" onfocus="this.blur();" />
Beachten Sie unbedingt die Reihenfolge! Das folgende Kommando würde dafür sorgen, dass ein Feld immer den Fokus erhält, und somit eine weitere Navigation oder Benutzung der Website verhindern. Dem Benutzer würde kaum etwas anderes übrig bleiben, als seinen Browser zu schließen.
    <input type="text" onblur="this.focus();" />
Seien Sie ebenfalls vorsichtig, wenn Sie modale Fenster in Verbindung mit onfocus verwenden. Wenn sich ein modales Fenster öffnet, verliert das Texteingabefeld natürlich den Fokus. Es erhält ihn aber wieder, sobald das modale Fenster wieder geschlossen wird. Der folgende Code zwingt den Benutzer wahrscheinlich dazu, den Browser über das System »abzuschießen«, da sich immer wieder ein modales Fenster öffnet:
    <input type="text" onfocus="windows.alert('Die Geister, die ich rief ...');" />
### 9.3.4 Navigation mit Auswahllisten Links benötigen viel Platz. Eine Auswahlliste ist da sehr sparsam, kann hinter dem sparsamen Äußeren jedoch eine Menge Inhalt verbergen. So ist es schon auf vielen Webseiten üblich, in einer Auswahlliste mehrere Navigationsziele anzugeben. Sobald Sie einen Punkt in der Auswahlliste anklicken, wird die entsprechende Seite aufgerufen. Dazu benötigt man einen Event-Handler, der dann aktiv wird, wenn sich die aktuelle Auswahl der Auswahlliste ändert. Dieser Event-Handler heißt onchange und wird von allen Browsern unterstützt. Im unteren Beispiel wird wieder eine Referenz auf das aktuelle Formular an die JavaScript-Funktion übergeben. Die URLs werden in einem Array gespeichert.
    <html>
    <head>
    <title>Navigation mit JavaScript</title>
    <script type="text/javascript"><!--
    var urls = new Array();
    urls[0] = "";  //leere URL für oberste Option
    urls[1] = "http://www.mozilla.com/ ";
    urls[2] = "http://www.microsoft.com/germany";
    urls[3] = "http://www.opera.com/";
    function laden(f) {
       if (f.auswahl.selectedIndex > 0) {
          location.href = urls[f.auswahl.selectedIndex];
       }
    }
    //--></script>
    </head>
    <body>
    <h1>Navigation mit JavaScript</h1>
    <form>
    <select name="auswahl" onchange="laden(this.form)">
       <option>Bitte wählen</option>
       <option>Mozilla</option>
       <option>Microsoft</option>
       <option>Opera</option>
    </select>
    <input type="button" value="Laden" onclick="laden(this.form)" />
    </form>
    </body>
    </html>
Sie wissen ja bereits, wie Sie mit JavaScript allgemein auf Formulardaten zugreifen können. Im weiteren Verlauf dieses Kapitels werden einige fortgeschrittenere Techniken dargestellt, wie man Formulare sinnvoll nutzen kann. Neben neuen Möglichkeiten der Formularüberprüfung lernen Sie hier auch einige Tricks und Kniffe, die in der täglichen Praxis von Nutzen sein können.
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de