dynamische Linkliste bringt mehr Usability

Heute möchte ich euch ein kleines JavaScript geben, welches aus einem vorgegebenen <div>-Container alles Links extrahiert und sie als Linkliste am Ende des Containers anhängt. Hier gibt es das Demo.

Warum macht es Sinn eine solche Linkliste zu erstellen? Nun fast jeder der sich mit benutzerfreundlichen Websites auseinandersetzt weiß, dass Links innerhalb von Fließtext den Lesefluss stören. Außerdem kann es möglich sein Leser zu verlieren, wenn sie den Links innerhalb des Textes folgen und nicht wieder zurück kommen. Es ist besser erst am Ende des Textes alle im Text empfohlenen Links aufzulisten.

Leider kann es sehr mühselig sein, die Passagen im Text mit Fußnoten zu kennzeichnen und dann im unteren Bereich eine Linkliste mit Ankerpunkten zu erstellen. Sowas kann wunderbar JavaScript mit einem Automatismus übernehmen.

Einbindung des Link-Generators

Ich habe mir überlegt, dass die Einbindung möglichst einfach sein sollte. Deshalb habe ich ein externes Script geschrieben, welches eine Variable mit einem Literal erzeugt. Dieses Script muss nur in die eigene Website eingebunden werden und ein Event festgelegt werden, wann die Abarbeitung beginnen soll.

Als Übergabeparameter für die Initialisierung wird der Container gewählt in dem die Links enthalten sind. Hier z.B. der <div>-Container mit der ID content. Als nächstes muss nur noch die writeList()-Methode ausgeführt werden und das Script erzeugt am Ende des übergebenen Containers eine sortierte Liste.

Ich habe extra diesen Vorgang in 2 Schritte unterteilt, um flexibel zu bleiben, denn ich kann mir vorstellen später eine Methode zu schreiben, die in einen komplett anderen Container die Liste schreibt oder auch einfach nur den Array zurückgibt.

Der Link-Generator selbst

Ich werde jetzt hier nicht jeden einzelnen Schritt erklären. Ich versuche mich auf die wichtigsten Punkte zu beschränken.

Die Initialisierung

Hier wird einfach nur der übergebene Container abgespeichert.

Die Methode writeList()

In Zeile 15 werden aus dem Text alle Link gesucht und in Zeile 16 schon mal ein HTML-Knoten für die sortierte Liste angelegt.

Danach wird über eine for-Schleife alle Link-Knoten von hinten nach vorne verarbeitet, die Erklärung folgt später. Dabei wird als Erstes ein Verweis auf den Eltern-Knoten gespeichert und dann ein Link als Fußnote generiert (Zeile 22 – 27).

Diese Fußnote wird zusammen mit dem Linktext in einen neuen <span>-Tag gestellt (Zeile 29 – 31).

Danach wird der Listeneintrag mit einer Kopie des Orginallinks erzeugt (Zeile 33 – 39). Dieser Listeneintrag wird erstmal in einem Array zwischengespeichert.

Anschließend wird der Span-Knoten vor dem eigentlichen Link eingesetzt (Zeile 42) und der Link gelöscht (Zeile 43). Dabei muss aber darauf geachtet werden, dass in der Variablen nodes ein Verweis auf alle Links innerhalb des Container ist und wenn wie hier ein neuer Link, die Fußnote, hinzukommt auch die Anzahl der Links innerhalb des Textes steigt. Deshalb muss beim Löschen n+1 gerechnet werden. Durch diese dynamische Änderung der Menge der Links im Array hat mich auch veranlasst von hinten nach vorne zu arbeiten, denn dadurch wird der Löschvorgang vereinfacht.

Zum Schluss muss nur noch die geordnete Liste erzeugt werden. Da aber die Links im Array in der verkehrten Reihenfolge stehen, habe ich wieder von hinten nach vorne gearbeitet, um die richtige Reihenfolge zu bekommen (Zeile 45 – 48).

Fazit

Ich hoffe ich konnte mit diesem kleine Beispiel zeige, wie JavaScript das Arbeiten im Web erleichtern kann. Keine Ahnung ob das schon ein Ansatz von Web 2.0 ist, aber ich finde der Automatismus kann sich schon sehen lassen.

4 Kommentare

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.