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.5 Daten behalten Im vorangegangenen Kapitel haben Sie gesehen, wie man Daten in Cookies speichern kann und somit beispielsweise einen JavaScript-Warenkorb ohne Frames realisieren kann. Der Nachteil wurde auch nicht verschwiegen: Während die meisten Benutzer JavaScript nicht deaktivieren, schalten viele User die Verwendung von Cookies aus, natürlich auch bedingt durch Horrormeldungen in der Presse. Es gibt jedoch auch Möglichkeiten, ohne Cookies Daten von einer HTML-Seite in die nächste zu übernehmen. Eine der Alternativen besteht in der Verwendung von Frames und in der Datenspeicherung in einem davon; hier sei auf Kapitel 10 verwiesen. In diesem Abschnitt wird eine weitere Möglichkeit vorgestellt. Ein virtueller Geschäftsmann will den Besuchern seiner Website Bücher in elektronischer Form zum Download anbieten. Er hat eine ganze Reihe davon, und so soll der Benutzer in einem Formular die für ihn interessanten Programme auswählen können. Nach dem Absenden des Formulars erhält er Links auf die ausgewählten Programme. Bevor Sie das Beispiel anpassen und einsetzen, sollten Sie allerdings etwaige Copyright-Fragen klären. ### 9.5.1 Das Eingabeformular Das Formular selbst ist schnell erstellt; als zusätzlicher Bonus werden dem Benutzer zu jedem Programm Hintergrundinformationen zu jedem Produkt in einem neuen Fenster angezeigt. Wie das prinzipiell funktioniert, wurde schon in Kapitel 8 gezeigt. Beachten Sie im Folgenden, dass jeder Checkbox konsistent das value-Attribut "on" zugewiesen worden ist. Der Sinn dieser Maßnahme wird weiter unten klar. Hier klicken, um das Bild zu Vergrößern Abbildung 9.6 Das HTML-Formular
    <html>
    <head>
    <title>Bücher-Download</title>
    <script type="text/javascript"><!--
    function hilfe(seite) {
       window.open(seite,
          "hilfefenster","height=300,width=400");
    }
    //--></script>
    </head>
    <body>
    <h1>Wählen Sie hier Ihre Bücher aus!</h1>
    <form method="get" action="download.html">
    <input type="checkbox" name="sommer" value="on" />
       <a href="javascript:hilfe('sommer.html')">
       Sommernachtstraum</a><br />
    <input type="checkbox" name="othello" value="on" />
       <a href="javascript:hilfe('othello.html')">Othello</a>
       <br />
    <input type="checkbox" name="venedig" value="on" />
       <a href="javascript:hilfe('venedig.html')">Der
       Kaufmann von Venedig</a><br />
    ...<br />
    <input type="submit" value="Zum Download" />
    </form>
    </body>
    </html>
### 9.5.2 Die Ausgabeseite Wenn Sie das Formular auf der vorangegangenen Seite genauer betrachtet haben, wird Ihnen folgende Zeile nicht entgangen sein:
    <form method="get" action="download.html">
Zum einen ist der Wert des action-Attributs ungewöhnlich – seit wann übergibt man Formularwerte an eine HTML-Seite? Zum anderen ist method auf "get" gesetzt. Dazu ein kleiner Exkurs: Mit method wird die Versendemethode des Formulars angegeben. Standardmäßig – also auch, wenn nichts angegeben wird – wird die Methode GET verwendet, doch häufiger ist POST. In letzterem Fall werden die Formulareingaben im Inhalt der Anforderung, also nach dem HTTP-Header versandt. Die entsprechende HTTP-Anforderung des Webbrowsers an den Webserver sieht ungefähr folgendermaßen aus:
    POST /download.html HTTP/1.1
    Content-type: application/x-www-form-urlencoded
    Accept: text/plain
    Content-length: 21

    othello=on&venedig=on
Sie sehen, dass die einzelnen (angekreuzten) Checkboxen im Formular name=value übergeben und voneinander mit dem kaufmännischen Und (&) getrennt werden. Wenn wie im obigen Beispiel die Methode GET verwendet wird, sieht die Sache anders aus: Hier werden nämlich die Formulardaten als Teil der URL übergeben. Es würde folgende Seite aufgerufen werden:
    download.html?othello=on&venedig=on
Diese Daten kann man mit JavaScript abfragen. Wie Sie sich vielleicht erinnern, erhält man mit location.search den Teil der URL ab dem Fragezeichen, in diesem Fall also ?othello=on&venedig=on. Mit JavaScript können diese Daten zerlegt werden, um die Ausgabeseite zu generieren. Um die ganze Sache ein wenig zu vereinfachen, gehen wir davon aus, dass alle Bücher im Verzeichnis download liegen, die Dateiendung .zip haben und dass sich der Teil vor der Endung aus dem name-Attribut der zugehörigen Checkbox ergibt. Der Programmierer muss also nur noch folgende Aufgaben erledigen:
| Er muss die Eigenschaft location.search auslesen und das erste Zeichen (das Fragezeichen) abschneiden.
| Er muss die übrig bleibende Zeichenkette an den kaufmännischen Unds aufteilen. Die einzelnen Teile haben dann den Aufbau buchname=on, und wenn man das =on entfernt, hat man den Dateinamen ohne die Endung.
Man kann den Algorithmus ein wenig vereinfachen, indem man einfach nach dem nächsten Vorkommen von & sucht sowie nach dem nächsten Vorkommen von =on und dann die Zeichenkette dazwischen betrachtet. Die Zeichenkette =on kann übrigens an keiner anderen Stelle (also zum Beispiel links vom Gleichheitszeichen) in der URL erscheinen. Der Grund dafür ist, dass Sonderzeichen in ein URL-konformes, hexadezimales Format umgewandelt werden. Aus einem Leerzeichen wird %20, und aus einem Gleichheitszeichen wird %3D. 3D ist nämlich die hexadezimale Darstellung der Dezimalzahl 62, und im ASCII-Zeichensatz hat das Gleichheitszeichen den Code 62. Der ASCII-Code des Leerzeichens ist 32, und die hexadezimale Darstellung ist 20. Die Umwandlung in dieses URL-Format geschieht automatisch; die Rückverwandlung erfolgt mit der JavaScript-Funktion unescape(). So liefert beispielsweise unescape("%3D") das Ergebnis "=" zurück. Die Umwandlung ist im Übrigen auch mit JavaScript möglich, escape("=") liefert "%3D". Der Internet Explorer ab 5.5 bietet hierzu übrigens ein paar neue Funktionen an, die eine URI (Unified Ressource Identificator, eine Art Obermenge von URL) erzeugen können. Die Funktion encodeURI() wandelt den übergebenen Parameter in eine URL um, also liefert beispielsweise encodeURI("meine Webseite.html#oben") als Ergebnis meine%20Webseite.html#oben zurück. Sie sehen hier, dass das Doppelkreuz als Abtrennungszeichen für einen HTML-Anker interpretiert worden ist, also insbesondere nicht in die hexadezimale Form %23 umgewandelt wurde. Wenn Sie auch das möchten (beispielsweise, wenn Sie die obige URL als Parameter an ein CGI-Skript übergeben möchten), müssen Sie encodeURIComponent() verwenden. Dies liefert das gewünschte Ergebnis: encodeURIComponent("meine Webseite.html#oben") gibt meine%20 Webseite.html%23oben zurück. Die entsprechenden Funktionen, die eine codierte URL wieder entschlüsseln, heißen decodeURI() und decodeURIComponent(). Und wie erwartet gibt decodeURI("meine%20Webseite.html#oben") als Ergebnis meine-Webseite.html#oben zurück, decodeURIComponent("meine%20Webseite .html%23oben") liefert ebenfalls meine Webseite.html#oben. Aus den viel zitierten Gründen der Abwärtskompatibilität müssen Sie jedoch noch eine ganze Weile auf den Einsatz dieser Funktionen verzichten, wenn Sie möglichst viele Browser unterstützen wollen. Zurück zur Aufgabenstellung: Der folgende Code (zu speichern als download.html) liest die übergebenen Daten aus und generiert die Ausgabeseite.
    <html>
    <head>
    <title>Download Seite 2</title>
    <script type="text/javascript"><!--
    function tag(s) {
       return("<" + s + ">");
    }
    function ausgabe() {
       var ls = location.search;
       var txt = (ls.length>1) ? "Sie können die Bücher nun
         herunterladen" : "Keine Bücher ausgewählt";
       document.write(txt + tag("br"));
       if (ls.length<=1) { //Funktion verlassen, falls
                           //nichts ausgewählt wurde
          return false;
       }
       ls = "&" + ls.substring(1, ls.length);
          //Fragezeichen entfernen, "&" vorne anhängen
       var pos = 0;  //aktuelle Suchposition in
       location.search
       while (pos == 0 || ls.indexOf("&", pos) != –1) {
          start = ls.indexOf("&", pos) + 1;
          ende = ls.indexOf("=on", pos);
          buch = unescape(ls.substring(start, ende));
          document.write(tag("a href='download/" + buch
             + ".zip'"));
          document.write(buch);
          document.write(tag("/a")+tag("br"));
          pos = ende + 2;
       }
    }
    //--></script>
    </head>
    <body>
    <h1>Bücher-Download</h1>
    <script type="text/javascript"><!--
    ausgabe();
    //--></script>
    <noscript>
    Ihr Browser unterstützt kein JavaScript!
    </noscript>
    </body>
    </html>
Hier klicken, um das Bild zu Vergrößern Abbildung 9.7 Die Download-Seite
<< 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