OOP/DOM-Scripting JavaScript - Einstiegstutorial 1 - Vorbereitung
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Konstruktorfunktion
- Die anonyme Funktion
2. Der Basiscode
... besteht aus drei Dateien, formular.htm, formcheck.js sowie form.php. Letztere Datei
benötigt ihr eigentlich nur, um nach erfolgreicher Überprüfung auf die entsprechende Seite im action-Attribut zu kommen.
In die formular.htm solltet ihr mal einen kurzen Blick hinein werfen, damit ihr seht, dass die JavaScript-Datei
unterhalb des form-Tags steht. Wer jetzt nach dem Warum fragt, sollte sich erst schämen,
anschließend zur Einführung zurückgehen und sich dann den Abschnitt "Das Grundprinzip" noch mal
genau durchlesen. Wirklich wichtig in dieser Datei sind eigentlich nur die Informationen zum Formular- und
den Feldnamen.
3. Das Grundgerüst
Für den Anfang benötigen wir eine Konstruktorfunktion und einen Event-Handler in Form einer anonymen Funktion für das Formular.
// Die Konstruktorfunktion
function checkForm (form, fields)
{
}
// Die anonyme Funktion
document.testform.onsubmit = function ()
{
return false;
}
Erläuterung
Die erste Funktion checkForm ist in JavaScript eine Konstruktorfunktion,
also eine Art von Klasse. Darin werden wir unsere erste Methode zur Überprüfung der Feldinhalte kapseln. Das mit den Eigenschaften
benötigen wir hier nicht, das kommt später. Die beiden Parameter sind einfach zu erklären. form steht für den Namen des
Formulars und fields ist ein Array mit den Namen der zu überprüfenden Formularfelder.
Bei document.testform.onsubmit handelt es sich um einen Event-Handler,
der aufgerufen wird, sobald das Formular versendet wird. Dabei ist es egal ob das in diesem Fall über die ENTER-Taste
geschieht oder über den submit-Buttons. Da wir hier unserer "Klasse" checkForm ein paar Parameter
übergeben müssen und zusätzlich noch Abfragen einbauen wollen, benötigen wir dann eine so genannte
anonyme Funktion, in der wir dann alles abarbeiten. Das ist dann das
document.testform.onsubmit = function () {...}.
Das return false benötigen wir nur zu Beginn, da es verhindert, dass die Formularinhalte an die form.php
gesendet werden.
4. Verständnis
Da sowieso einige von euch hier gelandet sind, ohne sich vorher die Theorie reingepfiffen zu
haben, werde ich denen das mal erklären. Stellt euch erst mal checkForm als stinknormale Funktion vor. Und das
document.testform.onsubmit in der form.js entspricht ungefähr(!) der veralteten Schreibweise
<form name="testform" ... onsubmit="return checkForm();">
Wichtig!
Aber nur gaaaanz grob ungefähr! Denn checkForm bauen wir in diesem Beispiel als
Konstruktorfunktion auf. Und da gibt es ein paar gewaltige Unterschiede!
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt