Sie sind auf Seite 1von 2

Hilfe:

Einstellungstest

JAVASCRIPT

Nicht erlaubt: Frameworks z.B. jQuery!

Inhalt dieser Aufgaben sind:

http://www.w3schools.com/tags/tag_button.asp

http://www.w3schools.com/tags/tag_label.asp

https://de.wikipedia.org/wiki/IBAN

http://www.w3schools.com/cssref/pr_class_visibility.asp

- Die Prüfung des Formulars und Patternmatching in JavaScript

- Die regulären Ausdrücke und Layout mit <div> in JavaScript

- Die Ausgabe von Texten im DOM und das Anzeigen und Löschen von DOM Knoten

Aufgabe A Erstellen Sie ein Formular:

Mit:

Name (Vorname und Nachname zusammen) PLZ, Stadt Straße Hausnummer IBAN Geldbetrag

Aufgabe B -alle Formularfelder bekommen ein Label <label>

-gesamte Formular wird in Layer <div>

</div>

gebracht und hat einen konkreten Namen "id=

"

-Koordinaten und Größe vom Formular muss in einer anderen dazu gebundenn CSS-Datei definiert werden

-einzelne Elemente der Formulare werden durch zusätzliche Layer jeweils mit "id" und so weiter gekapselt und auch per CSS positioniert

-diese Layer enthalten jeweils das Label und das Formularelement

-es wird ein Knopf mit<button> am Ende des Formulars eingefügt

Benutzung von Tabellen zum Layout ist verboten

Aufgabe C -für die Datentypen des Formulars werden eigene JavaScript-Routinen der Inhalt in Ordnung ist TRUE bzw. nicht dann ist FALSE -Einschränkung derVerwendung von Zeichen so eng wie sinnvoll -maximale Länge wird darüber hinaus immer geprüft EINFACH DAVON AUSGEHEN DAS ALLE ELEMENTE AUSGEFÜLLT WERDEN MÜSSEN

Name:

A-Za-z und – erlaubt

Nachname:

A-Za-z und – und ' erlaubt

"O'Connor"

IBAN:

A-Z0-9 und davon 22 Ziffern (Deutsche IBAN)

Für jeden Typ wird ein regulärer Ausdruck für JavaScript definiert

Aufgabe D -alle Formularelemente haben durch die CSS bereits einen konkreten Name mit dem es bei JavaScript angesprochen werden könnte

-diese konkreten Namen werden nun den Prüfroutinen als Parameter übergeben

-diese nehmen sich den Formularinhalt und prüfen die Korrektheit durch den regulären Ausdruck

-diese gesamte Prüfung wird in einer einzigen Routine zusammen gefasst, die an das Klick-Ereignis des Knopfes gebunden wird

-wenn man auf den Knopf klickt, wird die Prüfung gestartet also die Routine und prüft alle Formularfelder

- ist das Ergebnis in Richtig , wird mit alert() "Alles Korrekt" ausgegeben, falls nicht wird mit alert() eine sinnvolle Fehlermeldung ausgegeben

In der einfachsten Version brechen Sie mit der Prüfung beim Feststellen des ersten Fehlers ab.

In dieser Aufgabe soll nur die Prüfung realisiert werden, daher ist es völlig in Ordnung, dass der Formularinhalt nicht an den Server gesendet wird. Formular und Prüfung laufen rein lokal ab.

Aufgabe E -fügen Sie unter dem Formular einen weiteren Layer (<div> auch mit CSS und id

-In diesem Layer stehen die Fehlermeldungen geschrieben

</div>) ein, der einen roten Rahmen erhält wieder

-dazu eine Routine Namens writeMsg() zum Schreiben sowie eine Routine clearMsg() zum Löschen des Textes schreiben

-erste Routine wird im Fehlerfall und die zweite am Ende aufgerufen, wenn alles in korrekt ist

Beachte: Es kann mehrere Fehlermeldungen geben kann.

Im letzten Teil der Folien wird der Source-Code zur Ausgabe von Text mit JavaScript in DOM beschrieben.

Testen:

-indem Sie die alert()-Aufrufe durch writeMsg() ersetzen -brechen Sie nicht nach dem ersten Fehler ab, sondern analysieren immer alle Felder und geben daher durchaus mehrere Meldungen aus

Aufgabe F Rahmen zur Ausgabe der Fehlermeldungen soll nicht immer angezeigt werden!

-schalten Sie die Sichtbarkeit des gesamten div-Layers zum Beginn von writeMsg() ein und nach dem Löschen der Meldungen in clearMsg() wieder aus

Initial muss natürlich per CSS die Sichtbarkeit ausgeschaltet sein