DOM-Scripting
1. Ein Wort zuvor
Hinweis
Da die bisherige Einführung in das DOM-Scripting doch sehr oberflächlich war, habe ich beschlossen, alles noch mal neu zu machen. Und da ich hier auch schon ein paar Punkte anspreche, die auf die beiden folgenden Tutorials Auswirkungen haben, solltet ihr das hier genau durchlesen. Das ist auch der Grund, warum ich diesem Punkt jetzt nach oben gesetzt habe.
2. Einführung
Der Begriff DOM-Scripting geistert seit fast acht Jahren zusammen mit dem so genannten "Unobtrusive JavaScript" (unauffällig) durch das Internet. Dabei handelt es sich nicht um einen Standard von JavaScript sondern um eine bestimmte Vorgehensweise beziehungsweise Programmiertechnik. Dabei bezieht es sich vorwiegend auf die Art und Weise, wie man die so genannten Event-Handler vergibt.
Ich weiß jetzt leider nicht mehr, wer damit angefangen hat. Aber es entbrannte mal wieder eine hitzige Diskussion dazu. Das lag vermutlich daran, dass es zum einen extrem in den Himmel gehoben wurde und es zum anderen Leute gibt, die grundsätzlich immer gegen etwas sind. Egal, ich werde es euch hier vorstellen und auf die Vor- und Nachteile eingehen.
3. Das Problem
Seit Jahren ist es Usus, bei Internetseiten strikt zwischen Inhalt und Design zu trennen. Der Content steht im ausgelieferten HTML-Dokument und für die Formatierung nimmt man CSS in externen Dateien. Bei JavaScript dagegen hat man vielfach nicht so genau genommen und der Code dort untergebracht, wo man ihn gerade benötigte. Mal in externen Dateien, mal direkt im HTML-Code und die Event-Handler lagen eigentlich immer auf den entsprechenden Elementen.
4. Das Konzept
Hierbei hat man sich an einer Vorgehensweise orientiert, die bei vielen anderen Programmiersprachen schon seit längerer Zeit gang und gäbe waren, dem so genannten MVC.
Das MVC-Prinzip
MVC steht für Model - View - Controller und beschreibt ein Muster, nach dem eine wie auch immer geartete Softwareanwendung aufgebaut sein sollte. Nach diesem Modell besteht sie aus drei Einheiten:
- dem Model (die Inhalte)
- dem View (die Darstellung der Inhalte)
- und dem Controller (die Verarbeitungslogik für die Inhalte)
Dieses Prinzip wird dann auf Internetseiten angewendet, wobei der HTML-Code auch serverseitig erzeugt werden kann. Das spielt hier keine Rolle, da es hier nur um das clientseitige Ergebnis geht.
- HTML -> Model
- CSS -> View
- JavaScript -> Controller
Wichtig!
Damit das MVC-Entwurfsmuster korrekt umgesetzt wird, muss alles strikt voneinander getrennt werden, also CSS und JavaScript in eine oder mehrere externen Dateien auslagern! Diese werden dann entsprechend in das HTML-Dokument eingebunden. Achtet bitte auch darauf, dass es in letzterem Fall keine optischen Auszeichnungen mittels Tags oder Attributen gibt! Das hat zwar nichts mit JavaScript zu tun, ich wollte es trotzdem noch mal erwähnen.
5. Die Vorgehensweise
Zu guter Letzt muss der HTML-Code komplett von jedwedem JavaScript-Code gesäubert werden. Und die schon mehrfach angesprochenen Event-Handler müssen anders angelegt werden. Um euch das Prinzip zu verdeutlichen, gehe ich erst mal auf die alte/gängige Methode ein.
6. Die Macht der Gewohnheit
Jeder, der sich schon mit JavaScript beschäftigt hat, kennt noch Konstrukte wie <a href="javascript:oeffneFenster();">
oder <body onload="verschiebFenster('fenster');">. Das wurde jahrelang so gehandhabt und ist auch heute noch sehr weit
verbreitet. Man findet es in zig Codebeispielen, bei SelfHTML und selbst in meinen
Tutorials. Also grämt euch nicht, wenn ihr immer noch so arbeitet, ihr seid nicht die Einzigen.
Das Konzept
Man legt die Event-Handler direkt auf die einzelnen Elemente. Dabei werden dann zum Beispiel Funktionen aufgerufen und entsprechende Parameter übergeben.
<body onload="doSomething();">
...
</body>
<select name="bla" onchange="doSomething();">
...
</select>
...
<a href="irgendwas.htm" onmouseover = "doSomething(this);">
blubb
</a>