CSS, HTML und Javascript mit {stil}

Leitlinien für unobstrusive Javascript

Von unobstrusive oder unaufdringlichem Javascript spricht man, wenn der wichtigste Inhalt der Seite dargestellt werden kann, auch wenn Fehler im Skript oder im HTML auftreten oder der Browser Javascript nur unzureichend oder gar nicht unterstützt.

Obwohl heute alle Browser im Grundsatz die Regeln für unobstrusive Javascript unterstützen, muss jedes Skript sorgfältig geprüft werden, ob es die Leitlinien für »accessable« – zugreifbaren – Inhalt einhält.

In der Anfangszeit von Javascript wurden Skripte durch ein HTML-Attribut aufgerufen. Die Mischung von Javascript und HTML machte das HTML-Dokument unübersichtlich und führte schnell zu Fehler. Heute unterstützen alle Browser die Funktionen des DOM.

Durch ein id-Attribut, Tag-Namen oder ein class-Attribut und die Methoden des DOM kann jedes Element eines HTML-Dokuments angesprochen und durch ein Javascript manipuliert werden.

if (document.getElementsByTagName("a")) {
	var pageLinks = document.getElementsByTagName("a");
}

Das Skript prüft, ob der Browser getElementsByTagName() unterstützt. Erst dann sammelt pageLinks alle a-Elemente der HTML-Seite.

if (document.getElementById('mydiv')) {
document.getElementById('mydiv').onclick = tuNix;
}

Diese Methode ist sicher, stabil und funktioniert in jedem Browser, der Javascript implementiert. Genauso wie bei der veralterten Inline-Methode der Einbindung von Javascript über ein Attribut des HTML-Tags gilt auch hier natürlich: Wenn der Browser das Ereignis für das jeweilige HTML-Element unterstützt. Das Ereignis muss in Kleinbuchstaben notiert werden und darf keine Klammern aufweisen. Die Funktion selber darf aber Parameter aufweisen, nämlich das Event.

function tuNix(evt) {
	this.setAttribute('style','background: red');
}

Leitlinien für Scripting

  1. Browser könnten Skripte ignorieren, weil sie Javascript nicht unterstützen
  2. Der Benutzer kann Javascript deaktivieren oder die Firewall eines Unternehmens könnte alle Skripte durch das Entfernen von <script>-Tag blockieren.
  3. Wenn der Browser Javascript unterstützt, könnte der Browser Teile des Skripts vielleicht nicht interpretieren (das passiert vor allem bei älteren Versionen von IE).
  4. Selbst wenn das Skript korrekt interpretiert wird, könnten Fehler auftreten, weil sich der HTML-Code ändert.
  5. Wenn das HTML sauber und korrekt ist, wissen wir immer noch nicht, ob das Eingabegerät des Benutzers bestimmte Funktionen unterstützt. Die meisten Benutzer haben heute vielleicht noch eine Maus, aber es gibt Benutzer, die vorzugsweise mit der Tastatur navigieren. Das Touchpad simuliert zwar in weiten Zügen die Maus, auf dem Touchpad gibt es z.B. kein »hover«.
  6. Der Inhalt muss ausgeliefert werden, auch wenn einer der zuvor aufgeführten Fälle eintritt.

Javascript Events in anonymen Funktionen behandeln

Wenn die Funktion tuNix sehr einfach ist, kann anstelle einer Funktion auch eine anonyme Funktion eingesetzt werden.

element.onclick = function(evt) { 
   this.setAttribute('style','background: red'); 
}

Jetzt könnten wir die Event Handler aus dem HTML-Markup entfernen, aber eine Hürde bleibt noch zu nehmen.

Probleme mit dem Event Handler »onload«

Im konventionellen Ansatz des Modell 2 können wir einem Ereignis nur eine einzige Funktion zuordnen. Nehmen wir z.B. den Event Handler onload, der typischerweise das Skript aufruft, wenn eine Seite vollständig (Skripte, Grafiken, Plugins und Stylesheets) geladen wurde.

Der Aufruf window.onload = myScript; ist in Ordnung, solange es bei einem Skript bleibt. Wenn mehr als ein onload-Event Handler gebraucht wird, können wir die Event Handler nicht einfach nacheinander laden

window.onload = function1;
window.onload = function2;
window.onload = function3; 

Dabei würde nur der dritte Event Handler registriert, da jede Zeile die vorangegangene ersetzt. Wenn mehr als ein onload-Event Handler gefeuert werden soll, müssen wir die Event Handler in einer Funktion aufrufen.

function start () 
{
   function1();
   function2();
   function3();
}

window.onload = start;

Das widerum wird problematisch, wenn wir die drei Funktionen nicht auf jeder Seite benutzen wollen und führt zu Fehlermeldungen, dass Funktionen nicht definiert sind.

Ereignisse registrieren: eventListener (DOM 2)

Document Object Model (DOM) Level 2 Events Specification, Version 1.0, W3C Recommendation 13 November, 2000

Peter-Paul Koch The web professional's online magazine of choice. Separating behavior and structure

Supporting Three Event Models at Once

Using the Document Object Model From JavaScript