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.6 Dynamische Auswahllisten In Kapitel 11 werden Sie ein Beispiel mit einer grafischen Navigation finden. Dort gibt es mehrere Kategorien, die aufgrund einer Mausbewegung ausklappen und Unterpunkte freigeben. Dies lässt sich sehr platzsparend auch in einem Formular realisieren. Es ist insbesondere möglich, via JavaScript einzelne Punkte in den Auswahllisten zu ändern, zu löschen und neue Punkte hinzuzufügen. ### 9.6.1 Ein erster Ansatz Wie Sie wissen, werden die einzelnen Optionen einer Auswahlliste im Array options gespeichert. Jede einzelne dieser Optionen hat die Eigenschaft text, die den im Browser angezeigten Text angibt. Das ist an sich kein Problem, aber nicht alle Kategorien haben die gleiche Anzahl von Unterpunkten. Da jedoch die einzelnen Optionen in einem Array gespeichert werden, liegt es nahe, die Eigenschaft length dieses Arrays zu ändern. Einen ersten Ansatz für die Navigation finden Sie im folgenden Listing. Die linke Auswahlliste enthält die Kategorien, und wenn eine davon ausgewählt wird (Event-Handler: onchange), werden die Untermenüpunkte in der rechten Auswahlliste angezeigt. Sobald dort ein Punkt ausgewählt wird, kann die entsprechende Webseite geladen werden. Wie im Beispiel aus Kapitel 11 stehen die wichtigen Variablen – in diesem Falle die URLs und die Namen der einzelnen Menüpunkte – am Anfang des Skripts in globalen Variablen, damit sie einfach angepasst werden können.
    <html>
    <head>
    <title>Navigation mit Auswahllisten – Teil 1</title>
    <script type="text/javascript"><!--
    // *** globale Variablen
    var urls = new Array(
       new Array(""),
       new Array("", "seite1–1.html", "seite1–2.html", "seite1–3.html"),
       new Array("", "seite2–1.html", "seite2–2.html"),
       new Array("", "seite3–1.html", "seite3–2.html", "seite3–3.html", "seite3–4.html")
    );
    var beschriftung = new Array(
       new Array("Bitte auswählen", ""),
       new Array("Bitte auswählen", "Punkt 1.1", "Punkt 1.2", "Punkt 1.3"),
       new Array("Bitte auswählen", "Punkt 2.1", "Punkt 2.2"),
       new Array("Bitte auswählen", "Punkt 3.1", "Punkt 3.2", "Punkt 3.3", "Punkt 3.4")
    );
    // *** Ende der globalen Variablen
    function kategorie_anzeigen(f) {
       var kategorie = f.kategorien.selectedIndex;
       f.unterpunkte.options.length = urls[kategorie].length;
       for (var i=0; i<urls[kategorie].length; i++) {
          f.unterpunkte.options[i].text =
             (beschriftung[kategorie])[i];
       }
    }
    function seite_laden(f){
       var kategorie = f.kategorien.selectedIndex;
       var unterpunkt = f.unterpunkte.selectedIndex;
    }
    //--></script>
    </head>
    <body>
    <h1>Navigation mit Auswahllisten</h1>
    <form>
    <select name="kategorien"
    onchange="kategorie_anzeigen(this.form);">
       <option>Bitte auswählen</option>
       <option>Kategorie 1</option>
       <option>Kategorie 2</option>
       <option>Kategorie 3</option>
    </select>
    <select name="unterpunkte"
    onchange="seite_laden(this.form);">
       <option>Bitte auswählen</option>
    </select>
    </form>
    </body>
    </html>
Abbildung 9.8 Die beiden Auswahllisten Hier klicken, um das Bild zu Vergrößern Abbildung 9.9 Das Scrollen der rechten Auswahlliste ist (in alten Browsern) schwierig. Wenn Sie dieses Beispiel im Browser ausprobieren, werden Sie allerdings wahrscheinlich einen kleinen Nachteil beobachten: Wenn Sie das zweite Auswahlmenü ausklappen wollen, werden Sie – bei manchen Browsern und Betriebssystemen – interessante grafische Nebeneffekte feststellen (siehe Abbildung 9.9). Um diese Effekte zu vermeiden, muss das obige Skript etwas sauberer programmiert werden. ### 9.6.2 Ein fortgeschrittener Ansatz Um das Beispiel ganz sauber zu programmieren, sollte man zuerst alle Optionen in der Auswahlliste löschen und dann die Optionen hinzufügen. Für Menüoptionen gibt es einen eigenen Konstruktor, new Option ("Beschriftung", "value-Attribut"). Eine einzelne Option kann gelöscht werden, indem das entsprechende Element im Array options auf null gesetzt wird. Mit folgendem Kommando wird die zweite Option in einer Auswahlliste gelöscht:
    document.forms[0].auswahlliste.options[1] = null;
Sie können sich den Aufwand jedoch sparen, wenn Sie die Eigenschaft length des Arrays options auf 0 setzen. Dann können die Optionen erzeugt werden. Die Eigenschaft length wird hierbei automatisch angepasst. Es genügt, wenn Sie die Funktion kategorie_anzeigen() folgendermaßen abändern:
    function kategorie_anzeigen(f) {
       var kategorie = f.kategorien.selectedIndex;
       f.unterpunkte.options.length = 0;
       for (var i=0; i<urls[kategorie].length; i++) {
          f.unterpunkte.options[i] =
            new Option((beschriftung[kategorie])[i], "");
       }
    }
Außerdem hilft es, pro forma in die linke Auswahlliste ein paar freie leere Felder einzufügen; vor allem der Netscape Navigator führt das Skript dann zuverlässiger aus. Wie Sie sehen, umgehen Sie so grafische Unfälle.
<< 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