OOP/DOM-Scripting JavaScript - Einstiegstutorial 2 - Einführung
1. Die Abschnitte
2. Jetzt geht's loooos
So, im ersten Einstiegstutorial haben wir schon ein klein wenig gelernt. Funktionen können eine Art von Klasse sein und die nennen sich dann Konstruktorfunktionen. Die darin enthaltenen Funktionen sind die Methoden, auf die zum Beispiel ein Objekt (eine Referenz/Instanz) zugreifen kann. Aber so wirklich schlauer geworden sind wir immer nicht. Darum wollen wir das Niveau jetzt ein klein wenig steigern und den nächsten Schritt wagen. Ach, noch etwas. Sollte jemand das erste Einstiegstutorial nicht gelesen haben, so macht das doch bitte vorher.
3. Die Daten
Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts wie gehabt unter dem Punkt "Daten".
Dateien
form.htm(das Formular)formcheck.jsform.php
4. Das Ziel
Diesmal versuche ich euch klar zu machen, wie richtige Datenkapselung funktioniert. Im ersten Einstiegstutorials haben wir das zwar schon gemacht, es war aber nicht besonders ersichtlich. Darum werden wir nun in unserer Konstruktorfunktion mehrere Eigenschaften und Methoden anlegen. Wie so oft gibt es bei JavaScript da ein paar Dinge, die etwas unstimmig wirken. Daher werde ich zeigen, was möglich ist und was nicht funktioniert.
Wir werden uns demnach mit privaten bzw. öffentlichen Eigenschaften und Methoden auseinander setzen. Dabei geht es vor allem um die Zugriffsmöglichkeiten, die andere Objekte darauf haben. Ich hoffe daher sehr, ihr habt euch den entsprechenden Punkt bei der Theorie zu Gemüte geführt und wisst, wo von ich rede.
Das Thema
Hier greifen wir auf den Basiscode des ersten Einstiegstutorials zurück, da wir genau dasselbe erreichen wollen, nur diesmal etwas komfortabler und umfangreicher. Außerdem bauen wir einen zusätzlichen "Pseudo"-Validator für eine E-Mail ein.
5. Schlampig, schlampig
... haben wir im ersten Tutorial gearbeitet. Und da wir uns ja permanent verbessern wollen, gehen wir diesmal einen sauberen Weg. Darum weise ich euch jetzt schon mal auf einen ziemlichen Bock hin, den wir geschossen haben.
Die Sache mit den Parametern
Wir haben im ersten Tutorial unserer Konstruktorfunktion zwei Werte übergeben, die Referenz auf das Formular und die zu prüfenden Felder. Und mit den Parametern wurde dann einfach so weitergearbeitet. Gut, das hat funktioniert, aber schön ist es nicht.
Die Sache mit dem Aufruf
... ist auch nicht so prickelnd gewesen. Wir haben uns einfach darauf verlassen, dass schon alles da ist, bevor jemand auf den Senden-Button klickt. OK, hier gibt es nicht viel zu laden, aber es kann durchaus passieren, dass man noch bestimmte Informationen benötigt, die zu diesem Zeitpunkt noch nicht vorhanden sind. Und dann knallt es. Es gibt dazu ein paar Alternativen, aber dazu äußere ich mich später.
6. Der HTML-Code
<form name="testform" method="post">
<input type="text" name="feld_1"><br /><br />
<input type="text" name="feld_2"><br /><br />
<input type="text" name="feld_3"><br /><br />
<input type="submit" value="senden">
</form>
<script type="text/javascript" src="formcheck.js"></script>
Hier ist im Vergleich zum ersten Einstiegstutorial einfach noch ein weiteres Feld hinzugekommen. Außerdem fehlt das
action-Attribut. Was das soll, erfahrt ihr zum Schluss.