JavaScript zählt automatisch alle HTML-Elemente durch und vergibt ihnen
Indexnummern ab 0. Dadurch lassen sich einzelne Elemente mit ihrer Indexnummer
ansprechen - nur, welche ist das?
Das auf dieser Seite verwendete
Script liest die Indexnummern beliebiger
HTML-Elemente einer Seite dynamisch aus und ordnet ihnen diese zu, so daß
auf alle angesprochenen Elemente automatisiert zugegriffen werden kann -
auch wenn der Aufbau der Seite nachträglich verändert wird.
Neben deren Titel können in allen derartig ansprechbaren HTML-Elementen
( d.h. auch DIV-Bereiche ) ID, Name oder andere
Attribute abgefragt und jeweils mit allgemein gültigen Anweisungen
verknüpft werden - beispielsweise zur automatischen, nachträglichen
Durchformatierung über alle Seiten hinweg.
Allerdings müssen die verschiedenen HTML-Elemente getrennt von einander
behandelt werden, um ein Überschneiden der Indexnummern zu vermeiden.
Diese dient der Vorgabe von Formaten, einerseits für allgemeine
Seiten-Formatierungen wie Hintergrundfarbe, Schrift
etc. der anzusprechenden HTML - Seiten, andererseits aber auch bereits
der teilweisen Festlegung spezieller zentraler Formatierungen einzelner
Seitenelemente, die nach dem Laden der Seite auf Grund der
JavaScript - Anweisungen
durchgeführt werden.
Diese CSS - Formatierungen sind auch bei abgeschaltetem JavaScript
wirksamen.
Nach der allgemeinen Seitenformatierung legt man in einer
CSS-Datei als erstes die Schriftformatierung fest: Schriftart,
Schriftgröße und Zeilenhöhe.
Alles Weitere hängt von diesen Maßen ab, da sich die hier verwendeten
Verweissymbole als Hintergrundbilder nicht skalieren lassen. Deren
Größe muß umgekehrt der Schriftgröße angepaßt
werden und insbesondere der Zeilenhöhe. Eine entsprechende Icon-Sammlung
erleichtert die Arbeit, wenn man sie in GIFs umwandeln kann.
Darüber hinaus sollten alle Symbole für vergleichbare Verweise
die gleiche Größe haben.
Das Verhalten von automatisch formatierten Verweisen sollte nicht nur in
verschiedenen Browsern, und nicht nur am Anfang einer Zeile, sondern im Text
geprüft werden.
Anschließend werden die Formatierungen und ggf. Symbole für
Überschriften und Verweise festgelegt.
Bei Berührung mit der Maus bleibt es bei blau
mit | roter Markierung rechts ( auf die eigene
Seite | blau ) mit zugeordneten Symbolen.
Sollten sich diese nicht zeigen, liegt wahrscheinlich ein Fehler in der
HTML - Formulierung vor, beispielsweise ein Zeilenumbruch im
Verweis:
Lange Verweistexte vermeiden und / oder - insbesondere für
den MSIE - auf der Internet-Seite
selbst( ! ) im CSS white-space
für Verweise auf nowrap setzen.
Für die Berührung mit der Tastatur kann nur schwer oder gar nicht
eine neue Verweis - oder Hintergrundfarbe gesetzt werden, da diese in
JavaScript nicht überschrieben werden kann und JavaScript im gegensatz
zu CSS keine Pseudoklassen kennt.
In diesem speziellen Fall geht es doch mit einem kleinen Umweg über
onfocus.
Symbole und Hintergrund sind als Verweis mit aktiv.
Soll sich eine automatisierte Formatierung auf eine andere beziehen, zum
Beispiel auf die Hintergrundfarbe der Seite, dann läßt
sich diese nur sehr schwer mit JavaScript sicher aus einer CSS-Formatierung
auslesen.
Entweder die Seitenfarbe ( Seiten-Hintergrundfarbe,
Background-Color ) in CSS zentral für alle Seiten in der
allgemeinen CSS-Datei angeben - dann haben alle
Seiten die gleiche Farbe, und man kennt sie.
Oder die Seitenfarbe in JavaScript als Variable zentral in einer
allgemeinen JS-Datei ( oder
dezentral für jede Seite als Onload-Funktion ) - dann
kann man in Weiteren auf diese Variable zurückgreifen.
Vorsicht bei allem, was den Textfluss unterbricht; wie zum Beispiel
Umbrüche in Verweisen,
Bilder im Verweistext, usw.
Bei solchen Bildern im Text diese am besten am TextTop ausrichten.
Die Symbole werden in der Schrifthöhe abgeschnitten.
Der Pfad der Bilder in "url(..." bezieht sich immer auf die Position
relativ zur HTML-Datei selbst.
JavaScript sperrt, falls beispielsweise eine Farbangabe unbekannt
ist. Das Auslagern der Formatierung in CSS ist deshalb zwar sicherer -
hier werden Fehler einfach ignoriert - diese wird aber von JavaScript ggf.
überlagert.
Nach dem Zugriff auf eine JavaScript - Formatierung ist die entsprechende
CSS - Formatierung ungültig, kann also nicht mehr als
"default" wirksam sein. CSS - und JavaScript - Formatierungen
sollten deshalb einander möglichst entsprechen - oder unabhängig
von einander existieren.
Die auch bei abgeschaltetem JavaScript wirksamen CSS -
Formatierungen werden hier nun abgeändert, oder es werden andere
CSS - Vorgaben dadurch angesprochen.
Zuerst werden die "Dateitypen" festgelegt. dazu gehören alle
Elemente, die mit einer automatischen Formatierung belegt werden sollen.
Hier getrennt nach Verweisen ( LINKINDEX )
einerseits und Feldformatierungen ( FORMINDEX )
andererseits.
Dann wird festgelegt, welche Formatierungen für welchen
Dateityp gelten soll, insbesondere welche Symbole diesem
Dateityp zugeordnet werden sollen.
Grundsätzlich wird hier dabei das Bild nach der Datei-Endung
( Erweiterung ) oder einem anderen Merkmal des Dateitypen
belegt, um allen Dateitypen nach demselben Schema ein Bild zuordnen zu
können.
Es besteht die Möglichkeit, ein Bild mehreren Dateitypen zuzuordnen.
Leichter aber ist es, für jeden Dateitypen ein eigenes Bild in das
entsprechende Verzeichnis zu stellen.
Anschließend werden die Ausnahmen von der Regel beschrieben.
Zuletzt wird die Formatierungen durchgeführt.
Anschließend werden ggf. weitere übergeordnete Ausnahmen beschrieben
und gemacht.
Die Einzelheiten sind frei zu wählen. Es gibt
beispielsweise für diese Seiten im
JavaScript - Bereich zur Erkennung
sechs Klassen: extern, intern, lokal, suche,
ftp und mail sowie keine ( und noch ein paar mehr
für den CSS - Bereich ), daneben
Namensabfragen von Verweisen ( und im Formular - Bereich ),
und Bereiche mit individuellen IDs.
Es gibt bei den HTML - Verweisen eine Überschneidung mit dem
NAME - Tag, der parallel dazu in HTML einen Seitenanker definiert.
Man sollte zur automatischen Formatierung davon leicht zu unterscheidende
Namen vergeben. Dennoch können danach Anker auf einer Seite als mehrfach
vorkommend ausgewiesen werden.
Das Vergeben von mehreren identischen IDs, welche die gleiche Formatierung
auslösen sollen, führt dazu, daß nur der erste so gekennzeichnete
Bereich ausgelesen wird.
Das Vergeben von unterschiedlichen IDs, welche die gleiche Formatierung
auslösen sollen, erzwingt für alle diese unterschiedlichen IDs
Vorkehrungen zu treffen.
Als Kompromiss werden für diese Seiten die zusammengehörenden
IDs durchnumeriert ( gemeinsamer Name + laufende Nummer 0-X )
und danach gemeinsam erfaßt. Es ist dabei nicht
notwendig, jede mögliche Nummer lückenlos zu vergeben, und es
könne unterschiedlich Element mit diesen Nummern vergeben werden, wenn
sie denn gleich formatiert werden sollen.
Die Durchführung der JavaScript - Anweisungen müssen nun
ausgelöst werden:
Im allgemeinen wie hier automatisch beim Laden der Seite durch
Body onload, evtl. mit einer Verzögerung durch ein
timeout versehen, um das vollständige Laden der Seite zu
gewährleisten. Auf dieser Seite wird zudem vom Benutzer abgefragt,
welche der Formatierungen er durchführen lassen möchte.
Auf dieser
Seite dagegen beispielsweise manuell durch einen Submit -
Button.
Im Folgenden werden die Formatierungsvorgaben für die HTML -
Verweise ( "Links" ) auf den angesprochenen Seiten
im JavaScript - Bereich festgelegt.
Es soll jeder Verweis auf jeder Seite nach einer festgelegten Regel
automatisch formatiert werden, das heißt einheitlich mit Dekoration
und Funktion versehen, beispielsweise um nach Art der typisierten Verweise
die Orientierung zu erleichtern.
Des Weiteren soll ggf. für jeden hier so genannten Dateityp ein
eigenes Symbol im Verweis auf diesen Dateityp angezeigt werden.
Unter Verweise fallen:
Verweise auf HTML-Dateien innerhalb der so definierten eigenen
Domain: http://www.meine-test-domain-xyz.de
-
- ob mit HTML-Datei:
http://www.meine-test-domain-xyz.de/XYZ.htm
- oder ohne:
http://www.meine-test-domain-xyz.de/
Verweise innerhalb der geöffneten HTML-Datei
( Anker )
Verweise zu verschiedenen Dateien innerhalb der eigenen
Domain:
http://www.meine-test-domain-xyz.de/DATEI.XXX, differenziert nach
Dateityp
Verweise auf fremde HTML-Dateien, aus der eigenen Domain
heraus: http://www.eine-fremde-domain.de
- mit HTML-Datei:
http://www.eine-fremde-domain./XYZ.htm
- oder ohne:
http://www.eine-fremde-domain.de/
Verweise zu verschiedenen Dateien außerhalb der eigenen
Domain:
http://www.eine-fremde-domain.de/DATEI.ZZZ; hier pauschal mit einem
Download-Symbol belegt.
Zwischen bereits besuchten und noch nicht besuchten Verweisen soll differenziert
werden.
Diese Ausnahmen können manuell über die Zuordnung von Namen
oder IDs markiert oder nach anderen Vorgaben automatisch identifiziert
werden. Ihnen werden in CSS und
JavaScript eigene Formatierungen
zugewiesen, wobei der CSS-Bereich auch vom JavaScript-Bereich mit angesteuert
wird, um die Formatierungen zu generieren.
Es kann dabei vorkommen, daß auf einen bis dahin nicht vorgesehenen
Dateityp verwiesen wird. Für diesen befindet sich dann kein Symbol im
Verzeichnis.
Es gibt verschiedenen Möglichkeiten, mit diesem Problem umzugehen:
- Man gibt im JavaScript eine Reihe von Dateitypen vor und prüft, ob
dieser Typ zu diesem Array dazugehört.
Wenn nicht, wird ein Default-Symbol
angezeigt.
Der Nachteil: man muß alle möglichen Dateitypen vorher kennen.
Der Vorteil: man kennt sie dann auch.
- Man gibt im JavaScript eine Reihe von Dateitypen vor und ordnet jedem ein
Symbol zu.
Alle anderen erhalten das Default-Symbol
( das ist nicht ganz dasselbe ) .
- Man gibt wie hier im JavaScript eine allgemeine Anweisung, welche den
Dateitypen automatisch gleichnamige Symbole zuordnet und verzichtet auf eine
Default - Funktion. Das Ergebnis ist ein leerer Platzhalter bei unbekannten
Dateitypen ( dieses Bild tritt leider im MSIE auch bei erzwungenen
Zeilenumbrüchen auf ):
- Man könnte auch hier bestimmen, daß alle unbekannten Dateitypen
das Default-Symbol erhalten. Nur kann JavaScript in dem Fall nicht erkennen,
daß dieser Dateityp als Symbol nicht existiert, liest den fiktiven
Dateinamen aus und fordert eine nicht existente Bilddatei an. Die Prüfung,
ob diese Bilddatei auch im Verzeichnis vorhanden ist, führt zu sehr
unterschiedlichen und damit kaum brauchbaren
Ergebnissen.
Es können, wie gesagt, auf verschiedene Art und Weise
Ausnahmen von der Regel bestimmt werden.
Diese Ausnahmen werden hier mit Hilfe eines besonderen
Tag-Namens formatiert, da die Klassen bereits innerhalb
der JavaScript - Datei festgelegt wurden. ( Es geht ja nur darum,
zu zeigen, was möglich ist. Und was nicht. Beispielsweise fällt
ein mit JavaScript umformatierter Verweis auf die klassenlose CSS -
Formatierung zurück, wenn die in JavaScript eingestellte Klasse im CSS
nicht zu finden ist. )
Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens
über CSS und
JavaScript als
rechtsbündig
definiert
Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens
über CSS und
JavaScript als
Verzeichnis
definiert
Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens
über CSS und
JavaScript als
Ohne
Format definiert
Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens
über CSS und
JavaScript als
beidseitig
definiert
Hier wurde der Verweis manuell über die Zuweisung eines Tag-Namens
über CSS und
JavaScript als
Schalter
definiert
Im Prinzip wird die automatische Formatierung von Formularen genau
so durchgeführt wie die automatische Indexierung der Verweise
einer Seite, da die Formular - Elemente ebenfalls zuerst pro Seite und
nicht pro Formular indexiert werden. Doch gilt das auch zuverlässig
in jedem Browser?
Auch hier kann nach DIV - IDs oder nach einzelnen Formular - Namen
unterschiedlich erkannt und formatiert werden. Das kann möglicherweise
nötig sein, da gerade im Formular - Bereich die verschiedenen Browser
CSS und JavaScript - induziertes CSS recht unterschiedlich,
unzuverlässig und eigensinnig interpretieren.
MSIE und Sea Monkey behält zudem einmal vorgegebene Inhalte für
die Formularfelder einer Aktualisierung der Seite bei. Leere Felder kann
man also nur durch Schließen und erneutes Öffnen der Seite wieder
erhalten.
Als besonderes Feature ist auf dieser Seite noch Folgendes implementiert:
Fremde Seiten öffnen nicht nur in einem eigenen Fenster ( und,
wenn auf dieser Seite nicht anders bestimmt, immer dem Selben ),
sondern dieses Fenster wird verkleinert dargestellt, um das Hauptfenster
nicht zu verdecken.
Allerdings nur dann, wenn der Benutzer dieses in den Einstellungen des Browsers
nicht unterbunden hat, beispielsweise durch die Bestimmung, neue Fenster
( oft unter 'Popups' gefaßt ) grundsätzlich nur als
neue Registerkarte ( Tab ) zuzulassen. Aber selbst dann wird diese
Registerkarte immerhin in den Vordergrund geholt ( fokussiert ).
Meistens jedenfalls.
Indexnummern auslesen
angezeigt. 
automatisch
formatiert: