OOP/DOM-Scripting JavaScript - Einstiegstutorial 1 - Einführung

1. Die Abschnitte

2. WICHTIG!

Bevor ihr euch wie die hungrigen Wölfe auf dieses arme Tutorial stürzt, solltet ihr euch bitte erst mal die notwendigen theoretischen Grundkenntnisse einverleiben, damit ihr bei den folgenden Beispielen zumindest erahnen könnt, um was es da geht.

3. Die Daten

Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten".

Dateien

form.htm (das Formular)
formcheck.js
form.php

4. Das Ziel

Wir wollen mal eine klitzekleine Formularüberprüfung mittels DOM-Scripting und einer Konstruktorfunktion aufbauen. Das Beispiel hier ist sehr einfach gehalten und auch wirklich nur für den ersten Einstieg gedacht.

5. Das Grundprinzip

Bei der Theorie habe ich euch schon einen Einblick in das so genannte MVC gegeben. Das bedeutet, dass wir keinen JavaScript-Code in den HTML-Dateien haben wollen. Alles wird in eine externe Datei ausgelagert. Leider gibt es da ein Problem.

Das Problem

Um per JavaScript einzelne HTML-Elemente ansteuern zu können, müssen die zum Zeitpunkt des Zugriffs bereits vorhanden sein. Es bringt daher gar nichts, die externe JavaScript-Datei im <head>-Bereich einzubinden. Warum? Weil dann alle folgenden Elemente, auf die wir zugreifen wollen, noch nicht existieren. Um dieses Problem zu beseitigen, gibt es mehrere Möglichkeiten, die alle ihre Vor- und Nachteile haben. Die werde ich im Folgenden mal kurz vorstellen.

Möglichkeit 1

Man bindet zum Beispiel eine externe JavaScript-Datei zu Beginn der HTML-Datei ein und startet die Erfassung der Elemente über ein window.onload

Vorteile
- Man kann alle JavaScript-Dateien wie gewohnt im <head>-Bereich einbinden.
- Der HTML-Code ist sauber strukturiert und bleibt übersichtlich.
Nachteile
- Alle JavaScript-Funktionalitäten sind erst nach dem kompletten Laden der Seite verfügbar.
- Sollte der Nutzer der Seite vorher auf etwas klicken, so wird dies nicht funktionieren.

Möglichkeit 2

Man bindet die externen JavaScript-Dateien am Ende des HTML-Dokuments ein. Allerdings ist der Effekt nahezu identisch mit den oben beschriebenen Vor- und Nachteilen.

Möglichkeit 3

Man bindet die externen JavaScript-Dateien immer unterhalb der benötigten HTML-Elemente in den Code ein.

Vorteile
- Die JavaScript-Funktionalitäten für die einzelnen Elemente sind fast sofort verfügbar.
- Die Seite muss nicht komplett geladen sein (auch wenn ein sicherer Zugriff erst bei einem onload erfolgt).
Nachteile
- Der Code ist nicht besonders sauber und übersichtlich.
- Wenn man für spezielle HTML-Dokumente JavaScript-Funktionen benötigt, so man die in einzelne Dateien aufsplitten und an gewünschter Stelle einbinden.

6. Und nun?

Da ich eingangs schon erwähnte, hier auf Frameworks zu verzichten, und ich hier eh nur einen ersten Einstieg liefern will, binden wir unsere JavaScript-Dateien dort ein, wo wir sie benötigen. Das mag vielleicht nicht schön oder sauber sein, reicht aber mit Sicherheit für einen ersten Einstieg.

weiter zum nächsten Abschnitt