Trennung von Inhalt und Verhalten
Nach obenHintergrund
Man hört oft von der Trennung des Inhaltes und des Aussehens. Ich werde in diesem Artikel von der Trennung von (X)HTML und JavaScript sprechen.
Nach obenTrennung
JavaScript sollte immer in einer separaten Datei gespeichert werden und nicht in der HTML Datei. Dabei wird einfach der JavaScript Code in die Datei geschrieben ohne etwa die HTML <script> Tags.
Was ebenfalls von der HTML Datei entfernt werden sollte, sind Eventhandlers wie z.B. onmouseover="..." oder das onload="..." im <body> Tag.
Eventhandler
Jetzt stellt sich sicher die Frage, wie man prüfen soll, ob die Maus über dem Element ist, oder ob das Dokument bereits geladen ist. Die Antwort ist einfach. Man schreibt Eventhandlers in die JacaScript Datei. Die Syntax ist dabei folgende:
// Für eine Funktion ohne Parameter:
Element.Eventhandler = FunktionsName;
// Für sonstigen Code oder Funktion mit Parameter:
Element.Eventhandler = function () {
FunktionsName(Parameter);
alert("test");
};
Es gibt alle Eventhandlers die es auch in (X)HTML gibt, nämlich:
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
Beispiele
Möchte man prüfen, ob das Dokument geladen ist, schreibt man folgendes:
window.onload = function () {
// Hier kommt der Code hinein, der beim
// Laden des Dokumentes ausgeführt werden soll.
}
Hatte man vorher z.B. <body onload="alert('Willkommen')"> hat man danach window.onload = function () { alert("Willkommen"); }.
Wenn man ein Formular hat, dass bei onsubmit geprüft werden soll, muss man zuerst das Element "finden". Danach kann man dem Element den Eventhandler zufügen:
window.onload = function () {
// Wenn das Dokument geladen ist, das Formular suchen:
var formular = document.getElementsByTagName("form")[0];
formular.onsubmit = danke;
}
function danke () {
alert("Danke");
}
Zu beachten ist, dass das Dokument zuerst geladen werdden muss, bevor man einen Knoten suchen kann. Der obige Code sucht das erste <form> im Dokument. Alternativ zu getElementsByTagName kann man das HTML Element per ID auswählen mit getElementById. Jedoch muss dafür dem <form> eine ID vergeben werden (hier "formular"):
window.onload = function () {
// Wenn das Dokument geladen ist, das Formular suchen:
var formular = document.getElementById("formular");
formular.onsubmit = danke;
}
function danke () {
alert("Danke");
}
Nach obenFazit
Es gibt mehrere Vorteile dieser Trennung. Mann muss nichts mehr im HTML ändern. Z.B. muss man bei einem neuen Formular nicht mehr das onsubmit in die HTML einfügen, sondern einfach bei dem JavaScript den Code hinzufügen.
Pberndt
Ich hab mir erlaubt, 2 Rechtschreibfehler und einen Befehl zu berichtigen.
Was mich momentan noch etwas stört:
Du schreibst hier, wie man ein vom HTML Dokument gelöstes Javascript erstellen kann und gehst dann auf eine Methode ein (getElementsByTagName um ein bestimmtes Element zu laden), die das Javascript fest an die HTML Datei bindet:
Ändert man etwas an der HTML Datei, ist die Funktion des Scripts nicht mehr garantiert. Fügt man z.B. noch ein Formular ein, wird dein Beispielscript bereits das falsche Formular ansprechen.
Die Methode per getElementById ist also grundsätzlich vorzuziehen - es sei denn, man möchte grundsätzlich alle Elemente eines Types verändern.
Ansonsten guter Artikel :D
fphilipe
Darum habe ich ja auch das Beispiel mit getElementById gemacht ;-)
Pberndt
Ja - nur hast du oben drüber ein Beispiel, wie mans genau nicht mehr machen sollte ;)