|
Multimediakurs Leinfelder: Inhalt/Modul 7 "JavaScript in Handarbeit"/Modul 7.4 "JavaScript-Level 3/7.4.5 weitere JavaScript-Beispiele mit Erläuterung Level 3, Teil Arbeiten mit Formularen |
| (© copyright) Letzte Änderungen: |
Arbeiten mit Bildern | Arbeiten mit Formularen | Passwortschutz |
Arbeiten mit Formularen
Beispiel 1: einfacher Multiplikator
Um einen sehr einfachen Multiplikator-Rechner mit JavaScript zu erstellen, sind nur wenige Script-Codezeilen nötig (blau):
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>rechnerbeispiel</title>
<script language="JavaScript">
<!--
function multipliziere()
{
var erstezahl, zweitezahl, ergebnis;
erstezahl=window.document.forms[0].elements[0].value;
zweitezahl=window.document.forms[0].elements[1].value;
ergebnis=erstezahl*zweitezahl;
window.document.forms[0].elements[2].value=ergebnis;
}
// -->
</script>
</head>
<body bgcolor="#ffffff" >
<p></p>
<p>Multiplikator (vor jeder neuen Eingabe bitte löschen).</p>
<form name="FormName" >
<input type="text" name="zahl1" size="6" tabindex="0"> mal <input type="text" name="zahl2" size="5" onblur="multipliziere()" onMouseout="multipliziere()"> ergibt <input type="text" name="ausgabe" size="9">
<blockquote>
<p> <input type="reset" value="löschen"></p>
</blockquote>
</form>
</body>
</html>
Wir haben ein einfaches Formular mit drei Textfeldern <input type = "text"> erstellt. Die Zahleneingaben erfolgen in den beiden ersten, die Ergebnisausgabe im letzten. Das Skript besteht aus der function multipliziere(). Für die Inhalte aller drei Textfelder haben wir Variablen erstellt. Die variable erstezahl erhält den Wert des ersten Formular-Elements des ersten (und einzigen) Formulars. (Sie erinnern sich, die Indexzahlen beginnen mit 0 für die erste Position etc.). Die Variable zweitezahl erhält den Wert der Eingabe ins zweite Textfeld. Dann multiplizieren wir die beiden Variablen, der Wert wird der Variablen ergebnis als Wert zugewiesen. Im dritten Formularfeld erwarten wir keine Eingabe, sondern umgekehrt, wir definieren den Wert dieses Felds als den Wert der Variablen ergebnis (deshalb steht hier die Variable hinten). Das wars schon fast.
Die Funktion muss allerdings nach Eingabe der beiden Zahlen ausgelöst werden. Das erreichen wir mit dem Eventhandler onMouseout im zweiten Formularfeld. Damit wird das Ergebnis automatisch angezeigt. Leider wird onMouseOut von Netscape 4.x für Formularfelder nicht unterstützt. Wir fügen deshalb den onBlur-Eventhandler zusätzlich dazu. Hier wird die Funktion aufgerufen, wenn das Eingabefeld verlassen wird und irgendwo anders hingeklickt wird.
Beispiel 2: Variation des obigen Beispiels mit benutzerdefinierter Ausgabe
Vielleicht ist es (etwa zum Pauken des Einmaleins) sinnvoller, die Ergebnisausgabe stärker benutzerdefiniert zu gestalten. Das erreichen wir mit demselben Skript. Allerdings benutzen wir andere Eventhandler an anderen Positionen. Zusätzlich fügen wir einen Ergebnisknopf ein. Außerdem soll zusätzlich zum Löschen-Knopf die alte Eingabe auch gelöscht werden, wenn wir wieder ins erste Textfeld klicken.
Im Skript ist eine kurze neue Funktion hinzugekommen. Hier wird die Methode reset() auf das Objekt Forms[0] angewandt
function loeschen()
{
window.document.forms[0].reset();
}
Im html-Code für das Formular sind nun andere Eventhandler an anderen Positionen vorhanden (blau), außerdem ist der Ergebnisknopf hinzugekommen.
<form name="FormName" >
<input type="text" name="zahl1" size="6" tabindex="0" onfocus="loeschen()"> mal <input type="text" name="zahl2" size="5"> ergibt <input type="text" name="ausgabe" size="9" onfocus="multipliziere()"><input type="button" name="ergebnis" value="Ergebnis?" onclick="multipliziere()">
<blockquote>
<p><input type="reset" value="löschen"></p>
</blockquote>
</form>
<html>
Beispiel 3: Einfacher JavaScript-Rechner für alle Grundrechenarten
Das ist das ganze Head-Skript:
function rechnen()
{
var inhalt=window.document.forms[0].elements[0].value;
inhalt=eval(inhalt);
window.document.forms[0].elements[0].value=inhalt;
}
der Inhalt des Formularelements wird zur Variablen Inhalt. Diese wird mit der Funktion eval bearbeitet. Das Ergebnis ersetzt den Wert der Variablen Inhalt. Dann wird dem Formularelement der Wert dieser Variable als value zugewiesen, d.h. damit ausgegeben.
Das Skript wird durch einen onblur-Eventhandler beim Klicken auf eine andere Stelle im Dokument ausgelöst. Also Code genügt dabei für das Formular:
<form>
<input type="text" size="61" onblur="rechnen()">
</form>
Das ist alles. Man kann dank der objektunabhängigen Methode event() damit wunderbare Berechnungen u.a. mit Klammern, Brüchen und Dezimalzahlen machen. Bei falscher Eingabe gibt es jedoch keine Fehlermeldung. Näheres siehe Erläuterungen im Beispiel.
Beispiel 4: Variation des obigen Kopfrechnentesters, mit vereinfachter Eingabe der Rechnungen in ein Feld und umfassenden Tests auf Eingabefehler
! Aktueller Hinweis: Einen Fehlerhinweis unter IE 5.x für Windows bekam ich von einer Nutzerin. Nach den von mir durchgeführten Tests läuft das Skript unter IE 5.x für Mac sowie das von mir benutzte IE 5.x für Win98. Außerdem wurde für NN 6.x und NN 4.5 getestet
In diesem Beispiel wurde die Eingabe obigen Rechners dahingehend vereinfacht, dass die komplette Rechnung in ein Feld getippt wird. Die schöne objektunabhängige Methode eval() erlaubt auch die Berechnung komplexer Eingaben, wie z.B. 1/4-(2+3*4)/2
Allerdings ist die Gefahr größer, dass nicht zulässige Eingaben gemacht werden (z.B. : statt / oder 4(3+4). Dies wird durch das Skript ebenfalls abgefangen. Außerdem werden Eingaben von , : oder anderen unerlaubten Zeichen abgefangen. Mittels Arraytest werden fehlerhafte Eingaben wie 3(4+5) abgefangen (muss für die eval-Methode 3*(4+5) heißen).
Umfassende Erläuterungen finden sich im Quellcode des Beispiels.
Eingabetest für korrekte Vor- und Nachnamenseingabe, Postleitzahl, Telefonnummer und Emailadresse in einem abzuschickenden Formular. Alle drei Beispiele basieren auf dem selben Formular und vergleichbaren Testmethoden, nur Aufrufszeitpunkt und Fehlerausgabe sind unterschiedlich. Verwenden insbesondere string-Methoden in Verbindung mit if und for-Schleifen.
Fragebogen-basierte Auswahl von html-Seiten
Hinweis: dies ist die Erläuterung zu unseres auf der Quereinstiegsseite / Fragenbasierter Quereinstieg verwendeten Skripts.
Beispiel: Rufen Sie das Skript einfach nochmals hier in einem extra Fenster auf (danach aber bitte nicht weiternavigieren, sonst stimmt die Targetierung der Fenster ggf. nicht).
Worum geht es?
Der Benutzer macht Eingaben zu seinen Präferenzen auf einem Formular. Es gibt vier Kategorien mit je zwei bis fünf Wahlmöglichkeiten. Bei Klicken des Abschicken-Knopfes wird eine Webseite in einem extra Fenster (bestimmter Größe) aufgerufen, welches auf die Eingaben des Nutzers eingeht.
Erläuterung:
In jeder Kategorie gibt es nur eine Wahlmöglichkeit (Radio-Buttons), insgesamt ergäbe dies dennoch insgesamt 2x2x5x5, also insgesamt 100 Wahlmöglichkeiten. Die Abfrage wird jedoch nur in insgesamt 17 Auswahloptionen umgesetzt, die insgesamt 15 verschiedene Seitenaufrufe auslösen. Theoretisch hätten aber auch alle 100 Möglichkeiten umgesetzt werden können, dann hätte ich aber zum einen 100 Antworten schreiben müssen, zum Anderen gilt eben eine Antwort tatsächlich oft auch für verschiedene Auswahlen.
Das verwendete JavaScript basiert darauf, dass für die vier Wahlkategorien vier Variablen angelegt wurden. Je nach Klick auf einen bestimmten Radiobutton wird den Variablen ein unterschiedlicher Wert zugeordnet wird (je nach Wahlkategorie zwischen 1-2 bzw. 1-5). Bei Klick auf den Absendeknopf wird eine Funktion aufgerufen, die in aufeinanderfolgenden if-Abfragen so lange sucht, bis spezielle Variablenkonfigurationen gefunden sind, worauf ein bestimmter URL aufgerufen wird. Dies passiert in einem definierten Fenster durch Aufruf einer entsprechenden Fensteröffnen-Funktion unter Übergabe des zu öffnenden URL als Variable.
Ein Problem bei der Skripterstellung ist folgendes: Zuordnung von Value-Werten der jeweiligen Formular-Elemente war nicht wie bei unseren anderen Formularbeispielen (mit Texteingabefeldern) möglich, da die Radiobuttons Arrays darstellen, bei dem also einem Formularelement (d.h. einem bestimmtem Set von Radiobuttons) unterschiedliche Array-Elemente (die eigentlichen Buttons) mit jeweils unterschiedlichen Werten zugewiesen sind. Die Variablenänderung erfolgte deshalb via onclick-eventhandler bei jedem Radiobutton. (so etwas hatten wir u.a. bereits beim Beispiel: Frage/Antwort mit Gesamtpunktzahl)
Hier finden Sie den Seitencode des Beispiels mit Erläuterungen.
Das Beispiel ist sehr leicht für andere Fragestellungen anpassbar, zum Beispiel auch für Selbsttests. Als Antworten könnte beim Abschicken Seiten generiert werden, die angeben, was richtig und was falsch war. Bei den falschen Ergebnissen könnten Erklärungen abgegeben werden, wie es richtig gewesen wäre.
Sie könnten auch noch eine Durchschnittsnote errechnen lassen oder auch noch mit entsprechenden setTime-Methoden noch die benötigte Zeit mit zurückgeben. Ganz fortgeschrittene lassen das Ergebnis noch (z.B. als Zahlenkette) in einem Cookie speichern und dieses beim nächsten Besuch wieder auslesen.
alle obigen Skriptbeispiele sowie frühere sind im Anhang zu Modul 7 aufgelistet.
>> Modul 7.4.5: Level 3-Beispiele, Fortsetzung (Passwortschutz)
<< Modul 7.4.4: Level 3-Beispiele (Bilder)