Javascriptbasierte Features
Javascript bietet ein großes Potential, wenn es darum geht, eine Homepage interaktiv zu gestalten. Von Formularassistenten bis zu Spielen ist vielerlei denkbar.
Wichtig ist es jedoch, die Homepage für Browser, die über kein Javascript verfügen - z.B. Textbrowser und Screenreader - darstellbar und nutzbar zu halten.
Nach obenDer Grundsatz
Keine wichtige Funktionalität einer Homepage sollte von einem Javascript abhängig sein. Es muss grundsätzlich eine Alternative geboten werden.
Wichtig ist dabei, dass vom javascriptabhängigen Feature bei deaktiviertem Javascript kein "Rest" übrig bleibt - etwa ein Button, der nicht funktioniert.
Nach obenUmsetzung
Zur Umsetzung dieser Idee sollte möglichst auf die Features zurückgegriffen werden, die den Anforderungen am Besten entsprechen.
Die Wahl hat man dabei im Grunde zwischen zwei Möglichkeiten:
- Den Quelltext direkt über die
innerHTMLEigenschaft ändern - Über die DOM Funktionalitäten die entsprechenden Elemente ändern
Sicher ist, dass das DOM die zukunftssicherste
und standardkonformere Variante ist. Welche
von beiden Methoden man dann letztlich
verwendet, hängt allerdings vorallem davon
ab, wie sehr man hinter der Philosophie
von DOM steht. Jemand, der in all seiner
Zeit HTML Quellcode per innerHTML
eingefügt hat, kann sich nur schwer unmgewöhnen.
Anfänger sollten sich einmal mit beiden Möglichkeiten auseinandersetzen und dann entscheiden, welche sie bevorzugen.
Nach obenBeispiel
Im folgenden Beispiel soll ein Formular einen Hyperlink zum Absenden verwenden. Zur Kompatibilität zu Browsern ohne Javascript soll ein Button eingefügt werden, der das Abschicken ermöglicht.
Ich verwende im folgenden das DOM, um den Button durch einen Link zu ersetzen.
<form action="#">
<div>
<label for="nick">Nickname</label>
<input type="text" name="nick" id="nick" />
<input type="submit" name="submitbutton" id="submitbutton" value="Abschicken" />
</div>
</form>
<script type="text/javascript">
<!--
// Den Button, der ausgetauscht werden soll, laden
var button = document.getElementById("submitbutton");
/*
Dessen Elternelement laden (parentNode). In diesem
Fall ist das das umschließende DIV - benötigt
wird es, um den Link an der richtigen Stelle
einzufügen.
*/
var form = button.parentNode;
/*
Den Hyperlink, der eingefügt werden soll, erstellen
Die Werte werden dabei direkt vom alten Button übernommen
Wichtig ist es, zu beachten, dass beim Formular der Wert
des Buttons nun nicht mehr übertragen wird!!
Hier wäre es nötig, ein INPUT mit TYPE=HIDDEN einzufügen.
*/
var link = document.createElement("A");
link.innerHTML = button.value;
link.href = "#";
link.onclick = function()
{
/*
This.parentNode ist das Elternelement des Links.
Zuerst einmal ist das das DIV, dessen
Elternelement ist die Form.
*/
this.parentNode.parentNode.submit();
return false;
}
// Den Hyperlink einfügen
form.insertBefore(link, button);
// Den alten Button entfernen
form.removeChild(button);
// -->
</script>
Wie man sieht, taucht der Link, der später im Browser zu sehen ist, nirgendwo im HTML Formular auf - lagert man das Script aus, taucht er sogar nicht einmal in der Datei auf.
Zudem bezieht das Script die Information zum Ersetzen des Buttons durch einen Link direkt von den Eigenschaften des alten Buttons - so sind Änderungen leicht möglich.
Nach obenWeiteres
Diese Arbeitstechnik bietet neben der Benutzerfreundlichkeit noch einen weiteren Vorteil:
Implementiert man die Ersetzungsroutine
über Funktionen wie
getElementsByTagName,
ist es möglich, mit einem Script alle
Elemente eines Typs zu ersetzen.
So spart man sich nebenbei ein wenig Arbeit.
Wer Interesse am DOM hat, kann sich zum Beispiel auf der Mozilla Gecko Homepage praxisnahe Informationen holen. Auch die oben genannte w3 Homepage bietet eine gute Anlaufstelle, ist aber weit theoretischer.
Twisting
Danke, für den gelungenen Artikel.