Listen individuell mit JavaScript gestalten

---

Kleines Tutorial zur Gestaltung von Aufzählungszeichen mit JavaScript

HTML-Listen und Webdesign sind untrennbar miteinander verbunden, gleich ob Listenelemente als Aufzählungslisten den Content einer Seite bereichern sollen oder zur Gestaltung einer übersichtlichen Navigation von Webdesignern eingesetzt werden. Der Gestaltungsspielraum wird dabei durch verfügbare HTML-Attribute (mehr oder weniger veraltet) und geeignete CSS-Formate nur unwesentlich eingegrenzt, lässt zuweilen dennoch Wünsche übrig.

An gestalterischen Punkten, an denen ein Webdesigner oder Entwickler mit HTML-Attributen und CSS an Grenzen stößt, helfen jedoch oftmals kleinere oder größere JavaScripts dabei, diese Grenzen zu lockern und zu überwinden. Ein Beispiel auf dieser Seite soll den Einsatz von JavaScript zur Erweiterung des gestalterischen Spielraums verdeutlichen. In diesem kleinen Tutorial werden die Aufzählungszeichen von drei Listen mit Hilfe von JavaScript individuell angepasst.

---

---

Der Aufbau und das Anlegen von Listen soll in diesem Tutorial nicht weiter beschrieben werden, da über diese grundlegenden Kenntnisse ohnehin jeder verfügen sollte, der sich mit der Gestaltung von Webseiten befasst. Erwähnenswert ist in diesem Zusammenhang lediglich, dass den zu verändernden Listen eine eindeutige ID zugeordnet wird, über die sich die Listen bzw. die ul-Listenelemente (Elternelemente von Listen) ansprechen lassen. Siehe Beispiel:

Quelltext-Ansicht von drei unterschiedlich zu formatierenden HTML-Listen:

<ul id="liste_1">
    <li>11 Abs 1</li>
    <li>12 Abs 2</li>
    <li>13 Abs 3</li>
    <li>14 Abs 4</li>
    <li>15 Abs 5</li>
</ul>
<ul id="liste_2">
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
</ul>
<ul id="liste_3">
    <li>Vermerk 1</li>
    <li>Vermerk 2</li>
    <li>Vermerk 3</li>
    <li>Vermerk 4</li>
    <li>Vermerk 5</li>
</ul>

Um mit JavaScript nach onload und somit nachdem das Dokument im Browser geladen wurde, eine Aktion auszuführen, gibt es unterschiedliche Schreibweisen und Methoden. So könnte ein onload-Eventhandler dierekt innerhalb des body-Tags notiert werde, doch ebenso außerhalb von HTML in einer window.onload Funktion. Die Schreibweise

window.onload = function() { führe aus; }

darf dabei jedoch nur einmal innerhalb eines Dokumentes verwendet werden, anderenfalls würde nur die letzte Funktion ausgeführt. Dabei spielt es praktisch keine Rolle, ob JavaScript innerhalb eines Dokuments notiert wurde oder in einer eingebundenen JS-Datei. Besser ist es aus besagtem Grund die Methode addEventListener zu verwenden und um abwärtskompatibel zu bleiben zusätzlich für ältere IE Versionen die Methode attachEvent in einem Else-Zweig zu notieren.

Anmerkungen zum Script

Das JavaScript beginnt mit der Zeile “use strict”, die im Firefox und ab IE 10 ebenso in diesem Browser dafür sorgt, dass das nachfolgende Script im Strict-Modus ausgeführt wird. Unbedingt erforderlich ist die Ausführung im Strict-Modus nicht und somit könnte diese Zeile entfernt werden, die Verwendung hat jedoch den Vorteil, dass beide Browser ein Script nicht ausführen würden, wenn der Gültigkeitsbereich von Variablen nicht richtig mit var deklariert wurde.
In den nachfolgenden Zeilen wird abgefragt, ob dem Browser die Methode addEventListener oder die Methode attachEvent bekannt ist, wobei die erste Methode allen neuzeitlichen Browsern bekannt sein dürfte, die zweite Methode hingegen älteren Versionen des Internet Explorers. Eine von beiden Methoden wird in jedem Fall nach onload die Funktion aendereListenPunkte aufrufen.

Nach erfolgtem Funktionsaufruf werden die Elemente mit den DOM-Methoden getElementById und getElementsByTagName angesprochen und vorhandene Styles zur Listendarstellung mit none entfernt, um diese Listenelemente neu zu formatieren. JavaScript verwendet für die Formatierung ebenfalls CSS. Für interessierte Leser an dieser Stelle der Hinweis, eine Liste der JavaScript zur Verfügung stehenden CSS Style-Eigenschaften ist unter dem Stichpunkt Style-Eigenschaften bei SelfHTML zu finden.

Als letztes werden die Inhalte der Elemente mit nodeValue ausgelesen, den Inhalten ein neues Zeichen vorangestellt und die Inhalte plus neue Vorzeichen zurück in die jeweiligen Elementknoten geschrieben.
Zur Einfügung wurde einmal die Eigenschaften firstChild im Zusammenspiel mit der Eigenschaft data verwendet und zweimal wurde die Eigenschaft innerHTML benutzt. In den durchgeführten Tests führte firstChild.data zu einer doppelten Kodierung von HTML-Entities, wobei aus & bei der Ausgabe & wurde. Da die HTML-Entities durch dieses Double-Encoding sichtbar ausgegeben wurden, musste auf diese Eigenschaften bei anderen Listenelementen verzichtet werden. Welche von beiden Eigenschaften jeweils die geeignetere ist, das ist somit von der jeweiligen Aufgabenstellung abhängig.

Es sei angemerkt, obwohl das Beispiel für drei Listen ausgelegt wurde, kann es dennoch ohne Probleme für eine beinahe beliebige Anzahl von Listen angepasst werde. Sind weniger Listen auf einer Seite vorhanden, deren Listenzeichen bzw. Aufzählungszeichen geändert werden sollen, können nicht benötigte Zeilen im Script einfach entfernt oder auskommentiert werden. Im umgekehrten Fall können ebenso zusätzliche Variablen definiert und Zählschleifen angelegt werden.

Code-Listing des Scripts (listenpunkte.js):

"use strict";

if (window.addEventListener) {
    window.addEventListener("load", aendereListenPunkte, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", aendereListenPunkte);
}
function aendereListenPunkte() {

    var liste_1 = document.getElementById("liste_1");
    var liste_2 = document.getElementById("liste_2");
    var liste_3 = document.getElementById("liste_3");

    var lis_1 = liste_1.getElementsByTagName("li");
    var lis_2 = liste_2.getElementsByTagName("li");
    var lis_3 = liste_3.getElementsByTagName("li");

    liste_1.style.listStyle  = "none";
    liste_2.style.listStyle  = "none";
    liste_3.style.listStyle  = "none";
    liste_1.style.marginLeft = "-15px";
    liste_2.style.marginLeft = "-15px";
    liste_3.style.marginLeft = "-15px";
    liste_2.style.color = "#786336";
    liste_3.style.color = "#5a6733";

    for (var ia = 0; ia < lis_1.length; ia++) {
        var inhalt_1 = lis_1[ia].firstChild.nodeValue;
        lis_1[ia].innerHTML = "&sect; " + inhalt_1;
    }
    for (var ib = 0; ib < lis_2.length; ib++) {
        var inhalt_2 = lis_2[ib].firstChild.nodeValue;
        lis_2[ib].firstChild.data = "# " + inhalt_2;
    }
    for (var ic = 0; ic < lis_3.length; ic++) {
        var inhalt_3 = lis_3[ic].firstChild.nodeValue;
        lis_3[ic].innerHTML = "&raquo; " + inhalt_3;
    }
}

Hinweise zur Einbindung von JavaScript

Ein JavaScript kann direkt innerhalb von Script-Tags in den Quelltext einer Webseite geschrieben werden. Ob dabei ein Bereich im Head, im Footer oder in Mitten des Contents gewählt wird, hängt zum Teil mit von der Aufgabenstellung ab. Scripts, die zum Beispiel der Ausgabe von Anzeigen, Buttons usw. dienen, werden wesentlich häufiger im Content platziert, als Scripts mit Tracking-Funktionen, die eher im Header oder Footer notiert werden. Bei etwas umfangreicheren Scripts ist eine Auslagerung (ähnlich der Auslagerung von CSS) in dafür vorgesehene JS-Dateien sinnvoll.

Wie eine JavaScript-Datei in eine HTML-Seite eingebunden wird, dass sollte eigentlich zum Grundwissen all derer gehören, die sich mit der Pflege, Gestaltung oder Entwicklung von Webseiten befassen. Entweder in den Header einer Webseite oder in deren Content an geeigneter Stelle oder in den Bereich des Footers.
In auf WordPress beruhenden Webseiten erfolgt die Einbindung nicht anders als in andere Webseiten. Nur mit den kleinen Unterschied, dass hier die Einbindung entweder in die header.php oder in die footer.php erfolgen sollte und dabei möglichst in keiner für jedes Script neu angelegten JS-Datei, sondern in eine bereits vorhandene Datei, die nur um ein weiteres Script ergänzt wird.
Eine weitere Möglichkeit besteht bei WordPress-Installationen darin, JavaScript mit einer Funktion hinzuzufügen, zum Beispiel mit Hilfe eines eigens für diese Aufgabe programmierten Plugins.

Die dritte Möglichkeit und diese ist immer dann empfehlenswert, wenn ein JavaScript nur auf vereinzelten Seiten benötigt wird und aus diesem Grund nicht in allen Seiten im Header oder Footer zur Verfügung stehen muss, besteht darin, eine JavaScript-Datei direkt in den Beiträgen einzubinden, in denen eine Funktion benötigt wird.
Die Art und Weise der Einbindung unterscheidet sich praktisch nicht von der Einbindung in “normale” Webseiten. Gleich welcher Weg für die Einbindung gewählt wird, auf eine abschließende Kontrolle des Quelltextes im Browser sollte nie verzichtet werden, denn das was beim Browser ankommt, das ist keine WP oder PHP Seite. Was beim Browser ankommt, das sollte immer einer validen HTML-Webseite entsprechen, gleich von welchem System die Seite für die Auslieferung aufbereitet wird.

Bei der Einfügung in der (Quell-)Textansicht des Editors ist bei WP dennoch auf eine Kleinigkeit zu achten. Über oder unter den Script-Tags mit der referenzierten Ressource sollte noch ein HTML Kommentar notiert werden. Dieser ist eigentlich nicht erforderlich und hat keinen Einfluss auf die Funktionalität des Scripts. Dennoch scheint WP bei der Einbindung HTML-Kommentarzeichen mit einer eingeschlossenen Funktion zu erwarten. Fehlt dieser Kommentar, würde die Zeile mit den Script-Tags bei einem Wechsel der Ansicht im Editor wieder entfernt.

Beispiel für die Einbindung in Beitragsseiten:

<!-- Ausgabe für Listenpunkte -->
<script type="text/javascript" src="http://www.example.com/javascript/listenpunkte.js"></script>

Abschließen ein kleiner Tipp. Da WP den Kommentar einschließlich die Script-Tags mit der referenzierten Ressource in einem p-Tag einfügt und ebenfalls mit einem Zeilenumbruch nicht geizt, ist es vorteilhaft die Einbindung erst am Ende eines Beitrages vorzunehmen, um unschöne Leerzeilen bei der Ausgabe mitten im Content zu vermeiden.

Weitere Informationen zur Einbindung von JavaScript finden interessierte Leser unter dem Stichpunkt Using JavaScript innerhalb der Codex-Seiten von WordPress.