Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 9 Formulare
  gp 9.1 Überprüfung auf Vollständigkeit
    gp 9.1.1 Allgemeiner Aufbau
    gp 9.1.2 Texteingabefelder
    gp 9.1.3 Radiobuttons
    gp 9.1.4 Checkboxen
    gp 9.1.5 Auswahllisten
    gp 9.1.6 Fehlermeldung ausgeben
    gp 9.1.7 Konstruktive Vorschläge
  gp 9.2 Automatische Überprüfung
    gp 9.2.1 Texteingabefelder
    gp 9.2.2 Radiobuttons
    gp 9.2.3 Checkboxen
    gp 9.2.4 Auswahllisten
    gp 9.2.5 Zusammenfassung
  gp 9.3 Anwendungsmöglichkeiten für Formulare
    gp 9.3.1 Währungsrechner
    gp 9.3.2 Währungsrechner, Teil 2
    gp 9.3.3 Formularfelder für die Textausgabe nutzen
    gp 9.3.4 Navigation mit Auswahllisten
  gp 9.4 Anwendungsbeispiel: Fensteroptionen
  gp 9.5 Daten behalten
    gp 9.5.1 Das Eingabeformular
    gp 9.5.2 Die Ausgabeseite
  gp 9.6 Dynamische Auswahllisten
    gp 9.6.1 Ein erster Ansatz
    gp 9.6.2 Ein fortgeschrittener Ansatz
  gp 9.7 Überprüfungsfunktionen
    gp 9.7.1 Ganze Zahlenwerte
    gp 9.7.2 Dezimalzahlen
    gp 9.7.3 Telefonnummern
    gp 9.7.4 E-Mail-Adressen
    gp 9.7.5 In Zahlenwerte umwandeln
  gp 9.8 Reguläre Ausdrücke
    gp 9.8.1 Kurzeinführung
    gp 9.8.2 Ein Objekt erzeugen
    gp 9.8.3 Mit dem Objekt arbeiten


Rheinwerk Computing

9.4 Anwendungsbeispiel: Fensteroptionen  toptop

Im Folgenden soll ein Skript entwickelt werden, das versucht, dem Programmierer einen Überblick über die zahlreichen Fensteroptionen zu geben. Der Benutzer kann dazu die Optionen einzeln ein- und ausschalten und sich so bequem eine Reihe von neuen Fenstern erzeugen lassen. Das ist nicht nur in Hinblick auf das vorherige Kapitel praktisch, sondern zeigt auch den Zugriff auf Formularelemente auf.

Dazu wird zunächst einmal eine Reihe von Formularfeldern benötigt. Für die booleschen Optionen setzen wir Radiobuttons ein, die jeweils als name-Attribut den Namen der Option tragen und als value-Attribut den gewünschten Wert. Das erleichtert später das Zusammensetzen des Optionsstrings.

location
  <input type="radio" name="location" value="yes" />yes
  <input type="radio" name="location" value="no" />no

Bei numerischen Werten wird ein Textfeld angeboten:

height <input type="text" name="height" />

Für den Fall, dass Mozilla-kritische Optionen verwendet werden, die zusätzliche Rechte benötigen, kann per Mausklick angegeben werden, dass der Privilege Manager aktiviert werden soll:

Privilege Manager aktivieren
  <input type="checkbox" name="PrivilegeManager" value="on" />

Sobald das Formular verschickt wird, soll der Optionsstring zusammengesetzt werden. Nun könnte zwar jedes einzelne Formularfeld »hartkodiert« über seinen Namen abgefragt werden, dadurch wird aber das Skript in Hinblick auf mögliche (aber unwahrscheinliche) zukünftige Erweiterungen der Optionen unflexibel. Aus diesem Grund ist es sinnvoll, das Skript möglichst allgemein zu halten und per Schleife alle Formularfelder zu untersuchen:

for (var i=0; i<f.elements.length; i++) {
   // ...
}

Zwar würde theoretisch auch Folgendes funktionieren:

for (var e in f.elements) {
   // ...
}

Der Internet Explorer interpretiert dann aber die Variable e anders als der Mozilla, während letzterer dafür einige Formularelemente doppelt berücksichtigt. Das macht diese Schleife natürlich für diese Zwecke unbrauchbar.

Nun wird die type-Eigenschaft des Formularelements untersucht. Von besonderem Interesse sind hierbei Textfelder (type == "text"), die die Werte der numerischen Optionen enthalten, sowie Radiobuttons (type == "radio"), die für die booleschen Optionen zuständig sind.

Bei den Textfeldern werden all diejenigen Textfelder verwendet, die gefüllt sind, also als Wert etwas anderes als "" aufweisen:

if (e.type == "text" && e.value != "") {
   optionen += "," + e.name + "=" + e.value;
}

Bei Radiobuttons muss überprüft werden, ob sie aktiviert sind (die Eigenschaft checked muss true sein) oder nicht.

if (e.type == "radio" && e.checked == true) {
   optionen += "," + e.name + "=" + e.value;
}

Der Optionsstring wird dabei immer um ,name=wert erweitert. Am Ende des Vorgangs beginnt der Optionsstring mit einem Komma, das entfernt werden muss:

if (optionen != "") {
   optionen = optionen.substring(1, optionen.length);
}

Als Nächstes wird überprüft, ob die Checkbox für den Privilege Manager aktiviert ist. Falls ja, fordert das Skript die entsprechenden Rechte an:

if (f.elements["PrivilegeManager"].checked) {
   netscape.security.PrivilegeManager.enablePrivilege(
      "UniversalBrowserWrite");
}

Schließlich wird die eigentliche Hauptfunktion aufgerufen: window .open(). Im neuen Fenster soll das eigentlich Interessante, der Optionsstring angezeigt werden. Um dies zu realisieren, gibt es mehrere Möglichkeiten. Eine davon wäre, dass man als URL des neuen Fensters eine JavaScript-Funktion angibt, die den Text ausgibt.

javascript:document.write(optionen);document.close()

Innerhalb des Skripts müssen Sie noch darauf achten, dass Sie in der URL nicht die Variable optionen verwenden, sondern deren Wert, denn im neuen Fenster ist diese Variable unbekannt.

var w = window.open("javascript:document.write(\"" +
   optionen + "\");document.close()", "test", optionen);

Alternativ können Sie auch das Fenster ohne Inhalt öffnen und den Inhalt dann mit document.open(), document.write() und document.close() erzeugen:

var w = window.open("");
if (w) {
   with (w.document) {
      open();
      write(optionen);
      close();
   }
}

Als Nächstes erhält das Fenster den Fokus, sollte es hinter einem anderen Fenster stehen. Auch hier wird wieder zunächst überprüft, ob das Öffnen des Fensters funktioniert hat – mit if (w).

if (w) {
   w.focus();
}

Falls der Privilege Manager zuvor eingeschaltet worden ist, kann er nun wieder deaktiviert werden. Dieses Vorgehen empfiehlt sich grundsätzlich, denn die zusätzlichen Rechte sollten Sie so selten wie möglich anfordern, und wenn Sie es tun, dann sollten Sie sie bald wieder abgeben. Das hat nicht nur Performance-Gründe.

if (f.elements["PrivilegeManager"].checked) {
   netscape.security.PrivilegeManager.disablePrivilege(
      "UniversalBrowserWrite");
}

Als Besonderheit wird der Optionsstring noch im ursprünglichen Browserfenster ausgegeben. Dazu wird ein <div>-Container erstellt:

<div id="optionen" style="position: absolute;">
</div>

Nun wird – mit ein wenig DHTML – in diesen Container hineingeschrieben. Details hierzu erfahren Sie in Kapitel 17:

document.getElementById("optionen").innerHTML = optionen;

Doch nun genug der langen Vorbereitungen: Hier folgt das komplette Skript, wie Sie es natürlich auch auf der DVD-ROM zum Buch finden. Im Vergleich zu den obigen Ausführungen wurde es nur an einigen Stellen kosmetisch verschönert.

<html>
<head>
<title>Fenstergenerator</title>
<script type="text/javascript"><!--
function generiere_fenster(f) {
   var optionen = "";
   var e;
   for (var i=0; i<f.elements.length; i++) {
     e = f.elements[i];
     if (e.type == "text" && e.value != "") {
        optionen += "," + e.name + "=" + e.value;
     } else if (e.type == "radio" && e.checked == true) {
        optionen += "," + e.name + "=" + e.value;
     }
   }
   if (optionen != "") {
      optionen = optionen.substring(1, optionen.length);
   }

   if (f.elements["PrivilegeManager"].checked) {
      netscape.security.PrivilegeManager.enablePrivilege(
         "UniversalBrowserWrite");
   }
   var w = window.open("javascript:document.write(\""+
      optionen + "\");document.close()", "test", optionen);
   if (w && w.focus) {
      w.focus();
   }
   if (f.elements["PrivilegeManager"].checked) {
      netscape.security.PrivilegeManager.disablePrivilege(
         "UniversalBrowserWrite");
   }

   if (document.getElementById) {
      document.getElementById("optionen").innerHTML =
         optionen;
   }
}
//--></script>
</head>
<body>
<form onsubmit="return false;">
<table cellspacing="10">
<tr><td>
<table cellspacing="5">
<tr><td>
<i>alwaysLowered</i>
</td><td>
  <input type="radio" name="alwaysLowered" value="yes" />yes
  <input type="radio" name="alwaysLowered" value="no" />no
</td></tr>
<tr><td>
<i>alwaysRaised</i>
</td><td>
  <input type="radio" name="alwaysRaised" value="yes" />yes
  <input type="radio" name="alwaysRaised" value="no" />no
</td></tr>
<tr><td>
channelMode
</td><td>
  <input type="radio" name="channelMode" value="yes" />yes
  <input type="radio" name="channelMode" value="no" />no
</td></tr>
<tr><td>
dependent
</td><td>
  <input type="radio" name="dependent" value="yes" />yes
  <input type="radio" name="dependent" value="no" />no
</td></tr>
<tr><td>
directories
</td><td>
  <input type="radio" name="directories" value="yes" />yes
  <input type="radio" name="directories" value="no" />no
</td></tr>
<tr><td>
fullscreen
</td><td>
  <input type="radio" name="fullscreen" value="yes" />yes
  <input type="radio" name="fullscreen" value="no" />no
</td></tr>
<tr><td>
hotkeys
</td><td>
  <input type="radio" name="hotkeys" value="yes" />yes
  <input type="radio" name="hotkeys" value="no" />no
</td></tr>
<tr><td>
location
</td><td>
  <input type="radio" name="location" value="yes" />yes
  <input type="radio" name="location" value="no" />no
</td></tr>
<tr><td>
menubar
</td><td>
  <input type="radio" name="menubar" value="yes" />yes
  <input type="radio" name="menubar" value="no" />no
</td></tr>
<tr><td>
personalbar
</td><td>
  <input type="radio" name="personalbar" value="yes" />yes
  <input type="radio" name="personalbar" value="no" />no
</td></tr>
<tr><td>
resizable
</td><td>
  <input type="radio" name="resizable" value="yes" />yes
  <input type="radio" name="resizable" value="no" />no
</td></tr>
<tr><td>
scrollbars
</td><td>
  <input type="radio" name="scrollbars" value="yes" />yes
  <input type="radio" name="scrollbars" value="no" />no
</td></tr>
<tr><td>
status
</td><td>
  <input type="radio" name="status" value="yes" />yes
  <input type="radio" name="status" value="no" />no
</td></tr>
<tr><td>
<i>titlebar</i>
</td><td>
  <input type="radio" name="titlebar" value="yes" />yes
  <input type="radio" name="titlebar" value="no" />no
</td></tr>
<tr><td>
toolbar
</td><td>
  <input type="radio" name="toolbar" value="yes" />yes
  <input type="radio" name="toolbar" value="no" />no
</td></tr>
<tr><td>
<i>z-lock</i>
</td><td>
  <input type="radio" name="z-lock" value="yes" />yes
  <input type="radio" name="z-lock" value="no" />no
</td></tr>
</table>
</td><td>
<table cellspacing="5">
<tr><td>height </td>
  <td><input type="text" name="height" /></td></tr>
<tr><td>innerHeight </td>
  <td><input type="text" name="innerHeight" /></td></tr>
<tr><td>innerWidth </td>
  <td><input type="text" name="innerWidth" /></td></tr>
<tr><td>left </td>
  <td><input type="text" name="left" /></td></tr>
<tr><td>outerHeight </td>
  <td><input type="text" name="outerWidth" /></td></tr>
<tr><td>outerWidth </td>
  <td><input type="text" name="outerWidth" /></td></tr>
<tr><td>screenX </td>
  <td><input type="text" name="screenX" /></td></tr>
<tr><td>screenY </td>
  <td><input type="text" name="screenY" /></td></tr>
<tr><td>top </td>
  <td><input type="text" name="top" /></td></tr>
<tr><td>width </td>
  <td><input type="text" name="width" /></td></tr>
</table>
</td></tr>
<tr><td colspan="2">
Privilege Manager aktivieren
  <input type="checkbox" name="PrivilegeManager" value="on" />
</td></tr>
<tr><td colspan="2">
<input type="button" value="Generieren!"
       onclick="generiere_fenster(this.form);" />
</td></tr>
</table>
</form>
<div id="optionen" style="position: absolute;">
</div><br />
</body>
</html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 9.5     Der Fenstergenerator samt neuem, generiertem Fenster

 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern