JavaScript Workshop 2

2/4

INHALT

Mit Formularen arbeiten(1/4)

Inhaltsüberprüfung von Formularen (2/4)

Statements (3/4)

Arrays (4/4)

Cookies (4/4)

Interessante Links zu JavaScript

JavaScript Workshop Teil 1

Tips - Übersicht

• Der «gefälschte» Event: Erinnern Sie sich daran, dass ein Ereignis normalerweise abläuft, wenn der User etwas anklickt? Manchmal macht es aber mehr Sinn, einen Event zu emulieren, d.h. die Seite erzeugt den Event selber und wartet nicht auf eine User-Eingabe. Mit einem derartigen ‘gefälschten’ Ereignis lassen sich Formulare interaktiv anpassen, Usereingaben können verarbeitet oder durch neue Eingabefelder präzisiert werden.

So ist es beispielsweise sinnlos, einen User, der im Formular angibt, dass er keine PC-Zeitschriften liest, in einem späteren Punkt zu fragen, welches denn sein liebstes PC-Magazin ist.

1 function checkMags(form) {
2 if (form.mags.checked == false) {
3 if (form.magtype.selectedIndex = 3) {
4 form.magtype.blur()
5 } else {
6 form.magtype.focus()
7 }
8 }
9 }
10 <FORM>
11 <INPUT NAME="mags" TYPE="checkbox">
Lesen Sie PC-Zeitschriften?<P><BR><P>
12 Bitte wählen Sie Ihr Lieblingsblatt aus der folgenden Liste:<P>
13 <SELECT NAME="magtype" SIZE=1 onChange="checkMags(this.form)">
14 <OPTION VALUE="wg">Windows Guide
15 <OPTION VALUE="ct">C’T
16 <OPTION VALUE="pcpro">PC Professionell
17 <OPTION SELECTED VALUE="notype">Ich lese keine PC-Zeitschriften
18 </SELECT>
19 </FORM>

Beispiel

In der Logik des Scripts braucht es dazu eine Checkbox für die erste Frage und eine Liste für die spätere Auswahl. Wenn der User dann einen Listeneintrag anklickt, wird der Status der Checkbox abgefragt und je nachdem die Auswahl gesperrt. Im Code (Seite 89 links) sieht das so aus.

In Zeile 2 wird zuerst der Status der Checkbox geprüft. Wenn sie leer ist, wird durch die Zeilen 3 und 4 in der Liste die Auswahl ‘Ich lese keine PC-Zeitschriften’, die als Standard aktiviert ist, gesperrt; das heisst, jede nachträgliche Änderung wird ignoriert. Falls die Checkbox aktiviert ist, lässt sich dagegen ganz gewöhnlich aus der Liste auswählen.

Inhaltsüberprüfung von Formularen
Geübten Web-Surfern ist das Vorgehen bekannt: Sobald man von einer Web-Site etwas herunterladen möchte, tauchen zuerst lästige Formulare auf. Man gibt dann mal in jedes Feld ein X ein und klickt auf Submit. Wenn man Glück hat und auf dem Server kein CGI-Script aufpasst, kommt man weiter, wenn nicht, hagelt es Fehlermeldungen. In jedem Fall aber wird ein Teil der Netz-Bandbreite und viel Prozessor-Power für einen relativ sinnlosen Vorgang verschwendet. Mit JS können Formulare jedoch auch hervorragend schon auf dem Client auf gültige Eingaben überprüft werden.

Typische Aufgaben einer derartigen Überprüfung wären beispielsweise: Sind alle notwendigen Felder ausgefüllt? Beinhalten Sie gültige Zeichen? Haben Sie eine übliche Länge?

Unser Beispiel überprüft, ob in einem Formular mit drei Feldern alle ausgefüllt sind und ob das Feld für die Telefonnummer nur Zahlen enthält.

1 function check(form) {
2 if (form.elements[0].value == "" || form.elements[1].value == "" || form.elements[2].value == "") {
3 alert("Geben Sie bitte die fehlenden Daten ein!")
4 } else {
5 testResults (form)
6 }
7 }
8 function testResults (form) {
9 TestVar = isNumberString (form.phone.value)
10 if (TestVar == 1) {
11 alert("Alle Eingaben korrekt.")
12 } else {
13 alert("Geben Sie bitte eine gültige Telefonnummer ein!")
14 }
15 }
16 function isNumberString (InString) {
17 var RefString="1234567890 "
18 for (Count=0; Count < InString.length; Count++) {
19 TempChar = InString.substring (Count, Count+1)
20 if (RefString.indexOf (TempChar, 0) == -1) {
21 return (false)
22 }
23 }
24 return (true)
25 }
26
27 <FORM>
28 <H3>Geben Sie bitte Ihren Vornamen ein:<BR>
29 <INPUT TYPE="text" VALUE="" NAME="first" SIZE=30><P>
30 Geben Sie bitte Ihren Nachnamen ein:<BR>
31 <INPUT TYPE="text" VALUE="" NAME="last" SIZE=30><P
32 Geben Sie bitte Ihre Telefonnummer ein:<BR>
33 <INPUT TYPE="text" VALUE="" NAME="phone" SIZE=30><P>
34 <INPUT TYPE="button" VALUE="Test!" onClick="check(frm)">
35 </FORM>

Zunächst definieren wir drei Funktionen. Die erste überprüft, ob alle drei Felder ausgefüllt sind, indem sie deren Inhalt mit einem Leerstrong vergleicht (Zeile 2). Ist alles in Ordnung, kommt die zweite Funktion zum Zug, sonst wird der User mit einer Warnung daran erinnert, dass erforderliche Daten fehlen. Die zweite Funktion ist die Masterfunktion der Prüfung, ob die Telefonnummer korrekt eingegeben wurde. Dafür wird zuerst eine Variable TestVar definiert, die das Resultat der eigentlichen Überprüfung in der dritten Funktion übernimmt und je nachdem den User auffordert, eine gültige Nummer einzugeben. Die wichtigste Funktion ist die dritte. Hier geschieht die eigentliche Prüfung, indem der Inhalt der Eingabebox eingelesen und Zeichen für Zeichen mit einem Referenzstring verglichen wird. Aber der Reihe nach:

In Zeile 17 wird die Referenz definiert, sie enthält alle einfachen Zahlen und ein Leerzeichen (wichtig bei Telefonnummern). Der for-Loop in Zeile 18 und 19 sorgt dafür, dass jedes Zeichen einzeln nacheinander überprüft wird – das jeweils aktuelle Zeichen wird in eine neue Variable TempChar eingelesen und dann in Zeile 20 mit der Referenz verglichen. Entspricht das Zeichen keinem aus der Referenz, wird das durch die Zeile 21 als 0 an die Masterfunktion ausgegeben, ansonsten gibt Zeile 24 eine 1 aus. Diese Ausgabe wird dann in Zeile 10 von der Masterfunktion ausgewertet.

Beispiel

Vorherige Seite | Tips | Nächste Seite