Natürlich können diese Notierungen auch in eine externe JavaScript-Datei ausgelagert werden, welche in der Folge mit dem
link
-Element eingebunden wird. Dies ist sozusagen die Königsdisziplin. Durch eine Auslagerung aller Stile und JavaScripts in externe Dateien sind in einer HTML-Datei nur noch Inhalt und semantische Markups zu finden. Der Rest wird über
link
-Elemente eingefügt. Durch den Einsatz des
rel
-Attributs kann auch noch genau und semantisch definiert werden, welche Funktionen diese externen Dateien besitzen.
Beispiel
    
    
    
    
    
    
    
    
    
    

Testen von Unobtrusive Programming

    
    
    
    
Erläuterung
    Zugegeben, das Markup ist nicht sehr elegant, aber es erfüllt seinen Zweck. Im Kopfbereich des Dokuments wird ein
style
-Element eingesetzt, um das
div
-Element des Dokumentkörpers zu formatieren. Darauf folgt ein
script
-Element, um eine Funktion für das Ändern der Hintergrundfarbe des
div
-Elements zu erzeugen. Die Funktion
changeColor
besitzt einen Übergabeparameter (
evtHandler
), nämlich das Event selbst. Damit können Sie in der Folge feststellen, welches Event die Funktion ausgelöst hat.
    Im
body
-Element ist ein einfacher Markup mit einem
h1
-Element und einem
div
-Element notiert. Das
div
-Element muss das Attribut
id
besitzen, damit Sie es über das DOM ansprechen können. Dies erfolgt im
script
-Element am Ende des Dokumentkörpers. Hier ermitteln Sie das
div
-Element mit der Methode
getElementById()
. Als Übergabeparameter ist der Wert des
id
-Attributs notiert. Achten Sie darauf, dass JavaScript Groß- und Kleinschreibung unterscheidet. In der Folge werden der Event-Handler
onclick
und die Funktion
changeColor()
zugewiesen. Hier ist zu beachten, dass die Funktion nur mit ihrem eigentlichen Namen geschrieben wird, ohne Klammern und Parameter. Der Event-Handler
onclick
muss in Kleinbuchstaben notiert werden.
    Die Technik, mit zwei
script
-Elementen zu arbeiten, ist notwendig, da der HTML-Parser eines Browsers das Dokument sequentiell abarbeitet. Würden Sie den Event-Handler bereits im
head
-Element ansprechen, würde der Parser das Element mit
id="message"
noch nicht kennen, denn es wird erst viel später geparst. Daher notieren Sie die Zuordnung erst am Ende des
body
-Elements, denn jetzt wurden alle Elemente geparst und sind im DOM bekannt.
    Diese Art des Markups ist natürlich noch kein Idealzustand, da die Scripts jetzt noch mehr in der HTML-Seite verteilt sind. Mit einem zusätzlichen Event-Handler des DOMs kann aber eine Verbesserung und komplette Zusammenfassung erzielt werden. In der Folge können Sie mit dieser Technik auch das vollständige Script in eine externe Datei auslagern.
Beispiel
    
    
    
    
    
    
    
    
    
    

Testen von Unobtrusive Programming

    
    
    
Erläuterung
    Bei dem obigen Beispiel wurde das zweite
script
-Element ersatzlos gelöscht. Dafür wurde im
script
-Bereich des
head
-Elements der Event-Handler
onload
verwendet. Dies ist ein Event des
window
-Objekts und wird ausgelöst, sobald die gesamt HTML-Datei geladen und geparst wurde. Dadurch sind auch alle Elemente im DOM registriert und können verwendet werden.
    In diesem Fall wurde eine anonyme Funktion verwendet – eine JavaScript-Funktion ohne Namen. Da nur der Event-Handler
onclick
registriert werden soll, ist dies eine übliche Technik, denn die Funktion selbst ist sehr kurz. Sollen jedoch mehrere Aktionen durchgeführt werden, sollten Sie eine eigene Funktion (z. B. mit dem Namen
init()
) erstellen und diese dem Event-Handler zuweisen.
Document Object Model (DOM) Level 2 Events