dynamic-lib

“JavaScript: The world’s most misunderstood programming language” (Quelle)

“JavaScript (...) is widely believed to be a subset of Java, but it is not. It is a Scheme-like language with C-like syntax and soft objects.” (Quelle)

dynamic-lib ist meine JavaScript-Funktionssammlung zum einfachen Umgang mit DOM, AJAX, Animationen und erweiterten Steuer- und Eingabeelementen auf Webseiten. Die Verwendung ist mit mehreren Browsern ohne besondere Vorkehrungen einheitlich möglich, soweit die Browser die angeforderten Funktionen unterstützen. Vor allem im Bereich der DOM- und Ereignis-Behandlung würden sich die verbreiteten Browser teilweise stark unterscheiden. In diese Bibliothek sind viele Erfahrungen eingeflossen, die ich beim Studieren ähnlicher JavaScript-Code-Sammlungen oder anderer Webseiten und Referenzen erworben habe (siehe Web-Links am Ende der Seite).

Zunächst wird der Funktionsumfang dieser Bibliothek erläutert. Im Anschluss befinden sich weitere Links zur fortgeschrittenen JavaScript-Programmierung, die z.T. interessante Eigenheiten der Sprache aufdecken.

Module

Runtime

Das Runtime-Modul enthält globale Funktionen und Erweiterungen, die von vielen anderen Modulen verwendet werden. Dazu gehören:

Anzeigen und Formatieren von Fehlermeldungen und Ausnahmefehlern
Typprüfungen von Variablen
Einbinden weiterer JavaScript-Dateien
Funktionen zeitverzögert aufrufen
Datenverarbeitung und -formatierung (URLs, Zahlen)
Eigenes System zur Speicherung von Konfigurationsoptionen
Erweiterung der JavaScript-Klassen Array, Object und String um aus anderen Sprachen bekannte Methoden
Cookie-Zugriff

Debug

Das Debug-Modul bietet weitere Funktionen zum Anzeigen von Ausführungsdaten an. Dafür ist momentan die Funktion inspectObject verfügbar, die Objekte in einem Popup-Fenster vollständig darstellt. Mit der Verfügbarkeit von JavaScript-Debuggern wie Firebug ist dieses Modul nicht mehr so wichtig.

DOM

Das DOM-Modul bietet die meisten grundlegenden Funktionen zum Zugriff auf die Dokumentstruktur der geladenen Webseite an. Dazu gehören:

Elemente nach ID finden (sehr einfache Variante vom DOM-Selector, siehe unten)
Position und Dimenstionen von Elementen abrufen und ändern
Elemente ein- und ausblenden
Elemente aktivieren und deaktivieren
Fenster scrollen, auch direkt zu bestimmten Elementen
CSS-Klassen von Elementen abrufen, hinzufügen, entfernen und umschalten
Seiten-Formatvorlagen hinzufügen
Transparenz von Elementen abrufen und ändern
Weitere Funktionen, um Elemente im Dokument zu finden

DOM-Events

In diesem Modul sind die Funktionen zusammengefasst, mit denen Ereignisse im DOM behandelt werden können.

DOM-Keyboard-Events

Dieses Modul stellt Funktionen zur speziellen Behandlung von Tastatur-Ereignissen bereit. Bestimmte Tasten und Tastenkombinationen können bei ihrem Namen (z.B. „Escape“, „Ctrl+R“) benannt und an einzelne Elemente oder die ganze Seite gebunden werden, um benutzerdefinierte Funktionen aufzurufen.

DOM-Selector

Der DOM-Selector bietet eine Funktion an, mit der DOM-Elemente anhand von CSS-Selektoren aufgefunden werden können. Damit lassen sich wie bereits mit dem DOM-Modul Elemente anhand ihrer ID finden, aber auch anhand ihrer Klasse, Attribute oder anderer Merkmale. Es werden so ziemlich alle Selektoren von CSS 2.1 und 3.0 (noch nicht vollständig verabschiedet) unterstützt. Dieses Modul wurde durch Dean Edwards’ cssQuery-Funktion inspiriert, die zwar etwas schneller läuft, dafür aber weniger robust beim Verstehen der Selektor-Angaben ist. Und die geringere Performance spürt man auch erst ab unrealistischen ca. 100 Aufrufen in Folge. In Anlehnung an andere Frameworks heißt die Funktion schlicht $ und nimmt den Selektor-String und ein optionales Startelement für die Suche entgegen. Für einfache ID-Suchen im ganzen Dokument wird die Optimierung document.getElementById verwendet.

DOM-Editor

(Noch keine Beschreibung)

WebRequest

Dieses Modul stellt Funktionen zur einfachen Verwendung von asynchronen HTTP-Aufrufen bereit, weithin unter dem Schlagwort „AJAX“ bekannt. Dazu gehört natürlich eine Funktion, die einen HTTP-Aufruf startet und über deren Ergebnis benachrichtigt, sowie weitere Funktionen, um die zurückgegebenen Daten strukturiert auszuwerten, um einzelne Werte zu extrahieren.

Animation

Das Animation-Modul kann Vorgänge wie das Verschieben oder das Ändern der Größe, Farbe, Transparenz und Schriftgröße von Elementen von einem Zustand zum anderen gleichmäßig animieren. Dabei lassen sich die zeitliche Auflösung, Animationsdauer und die Bewegungskurve einstellen und es stehen Funktionen zur Ablaufsteuerung (wie Unterbrechen, Fortsetzen, Zurücksetzen, Umkehren) der Animation und zum Abrufen des aktuellen Zustands bereit.

Color

Das Color-Modul stellt Funktionen zum Konvertieren und Mischen von Farben bereit. Es werden Angaben in HTML-, CSS-Syntax (benannte Farben, Hex-Darstellung, rgb()- und hsl()-Darstellung) oder als Komponenten oder 32bit-Ganzzahl verstanden und können zwischen RGB und HSL konvertiert werden. Einfache Berechnungen hellen eine Farbe auf, dunkeln sie ab oder berechnen ihren Grauwert. Dieses Modul wird von Animation für Farbanimationen verwendet, was diese sehr mächtig macht.

DragController

Der DragController ist ein Objekt, das Drag&Drop-Funktionen ermöglicht. Das Verhalten ist in vielerlei Hinsicht konfigurierbar, es kann z.B. der zulässige Bereich eingestellt werden, innerhalb dessen ein Element bewegt werden darf, es kann ein Rand zum Ändern der Größe angegeben werden und die Z-Reihenfolge ist anpassbar. Außerdem lassen sich Ereignisse behandeln, womit der zulässige Drag-Bereich durch benutzerdefinierten Code festgelegt werden kann oder beim Fallenlassen eines Elements (Loslassen der Maustaste) eine bestimmte Aktion ausgelöst wird.

UIEffects

Dieses Modul enthält folgende Funktionen:

Schatten unter Elementen anzeigen (ohne Bilder)
Komplette Seite dimmen (heller oder dunkler), um z.B. Meldungen oder Bilder davor anzuzeigen
Einfach zu verwendende Komplettlösung, um Bilder vor der verdunkelten Seite ein- und auszublenden und zwischen mehreren Bildern zu wechseln

CheckBox

(Noch keine Beschreibung)

HTMLForm

Das HTMLForm-Modul bietet einfachen Zugriff auf HTML-Formulare, um die Eingaben deren Felder anzurufen, zu ändern, zu prüfen oder auf Ereignisse zu reagieren.

InfoLabel

InfoLabel ist ein Steuerelement, das Anmerkungen und Hinweise in Form einfacher „Sprechblasen“ direkt unter einem Element einblenden kann. Dafür ist ein Hintergrundbild notwendig, das in verschiedenen Farben zur Verfügung steht.

ListBox

(Noch keine Beschreibung)

Entwicklungsstand

Die Bibliothek befindet sich in der Entwicklung und enthält noch nicht alle geplanten Funktionen. Die Dokumentation ist noch sehr mager und besteht nur aus einer kurzen Beschreibung der einzelnen Funktionen und ihrer Aufrufparameter in den Dateien selbst. Ich setze die Bibliothek bereits auf mehreren Webseiten ein, die bereits implementierten Grundfunktionen sollten für die meisten Zwecke stabil sein.

Ich beabsichtige, die Bibliothek um Funktionen aus den Bereichen weiterer Eingabeelemente, Drag&Drop und Datenvalidierung zu erweitern sowie die Bereiche Formularprüfung, Animation und WebRequest zu erweitern und eine Unterstützung auf der Serverseite in Form von PHP-Funktionen hinzuzufügen. Außerdem sollte es Beispielseiten geben, die diese Funktionen einsetzen. (Die Testdateien, die ich zur Entwicklung verwende, sind dafür nicht geeignet.)

Letzte Änderung der hier veröffentlichten Dateien: 25. Februar 2009, 21:26

Konfigurationen, Download

Die einzelnen Module sind in verschiedenen Konfigurationen zusammengestellt und in einer einzigen Datei komprimiert, um sie möglichst einfach einzubinden und die übertragene Datenmenge zu minimieren. Die Kompression beruht auf dem Entfernen aller unnötigen Leerzeichen und Kommentare und erreicht eine Dateigröße von etwa der Hälfte. Die ZIP-komprimierte Übertragung zum Browser verringert die Dateigröße weiter auf ein Viertel, von den originalen Quelldateien bleibt also je nach Konfiguration maximal etwa ein Achtel übrig. Die komprimierten Dateien sind nicht zur Bearbeitung geeignet. Die einzelnen Quelldateien sind ebenfalls verfügbar.

Modul	Konfiguration
	Tiny	Compact	Standard	Complete
Runtime
DOM
DOM-(Keyboard-)Events
DOM-Selector
WebRequest
DragController
Animation
Color
UIEffects
DOM-Editor
HTML-Form
InfoLabel
CheckBox, ListBox
Debug

Download
Größe	15 kB	28 kB	50 kB	75 kB
Größe gzip-komprimiert	4 kB	8 kB	14 kB	19 kB

Weitere Downloads

[o] Alle dynamic-lib-Dateien im Quellformat (46 kB) PGP signature • What’s that?
[o] Nur die Hintergrundbilder für InfoLabel (1 kB)

Licence, terms of use

This programme is released under the terms of the GNU General Public License (GPL), version 2 or later.

Web-Links

In diesem Abschnitt befinden sich Links zu weiteren Webseiten, die sich mit fortgeschrittener JavaScript-Programmierung befassen.