coati-JavaScript-Bibliothek

asyncguijavascript #

All-in-one-JavaScript-Bibliothek für alle nützlichen Funktionen auf einer Webseite. DOM-Zugriff mit Events, AJAX, Animationen, Farbberechnung und UI-Effekte u. a. zur Bilddarstellung.

Archivierter Inhalt: Dieser Quelltext ist derzeit inaktiv und möglicherweise veraltet, nicht mehr gewartet oder funktioniert nicht mehr.

Herunterladen
Mehr Details und Versionen
JavaScript: The world’s most misunderstood programming language (Douglas Crockford)
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)

coati ist meine JavaScript-Funktionssammlung zum einfachen Umgang mit DOM, AJAX, Animationen und erweiterten Steuer- und Eingabeelementen auf Webseiten. Im Gegensatz zu anderen Bibliotheken auf diesem Gebiet wie jQuery oder dojo hat coati nicht den Anspruch, ein umfassendes, konsistentes Framework für alle Funktionen bereitzustellen. Vielmehr bietet coati gezielt die Funktionen, deren native Implementierung viel browser-spezifisches Wissen und entsprechenden Code erfordern würde. Dazu gehören viele Funktionen aus den Bereichen DOM-Zugriff und DOM-Ereignisse sowie AJAX, Animationen und UI-Controls.

Die Verwendung ist mit vielen verbreiteten Browsern ohne besondere Vorkehrungen einheitlich möglich, soweit der Browser die angeforderten Funktionen unterstützt. 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). Ich habe die Arbeit an dieser Bibliothek unter dem Namen dynamic-lib irgendwann im Jahr 2006 begonnen. Die damals noch einzelnen Dateien, die sich zu verschiedenen Konfigurationen zusammenbinden ließen, sind Anfang 2011 in eine neue Form umgeschrieben worden, die mit sehr wenigen globalen Namen auskommt und keine Objektprototypen mehr verändert.

Namensgebung

Der Name „coati“ [koʊˈɑti] (Aussprache) ist englisch für Nasenbär. „Was ihr Habitat angeht, sind sie nicht wählerisch. Man findet sie sowohl in tropischen Regenwäldern, als auch am Rand von Wüsten. (…) Sie sind Allesfresser, bevorzugen aber fleischliche Nahrung.“ Mit dieser Beschreibung trifft er eine Funktionsbibliothek, die in den unterschiedlichsten Webbrowsern funktionieren muss, ganz gut.

Funktionsumfang

Es gibt nur eine Variante der coati-Bibliothek, die den kompletten Funktionsumfang enthält. Die folgende Übersicht fasst die Funktionen in den jeweiligen Namensräumen zusammen.

coati

Allgemeine Funktionen und Erweiterungen, die von vielen anderen Modulen verwendet werden. Dazu gehören:

  • Eigenes System zur Speicherung von Konfigurationsoptionen
  • Typprüfungen von Variablen
  • Anzeigen und Formatieren von Fehlermeldungen und Ausnahmefehlern
  • Einbinden weiterer JavaScript-Dateien
  • Funktionen zeitverzögert aufrufen
  • Datenverarbeitung und -formatierung (URLs, Zahlen)

coati.browser

Erkennung der Browserversion und von browserspezifischen Merkmalen.

coati.array

Funktionen zum Array-Handling, die in neueren JavaScript-Versionen oder anderen Frameworks verfügbar sind.

coati.string

Funktionen zum String-Handling, die in neueren JavaScript-Versionen oder anderen Frameworks verfügbar sind.

coati.dom

Grundlegende Funktionen zum Zugriff auf die Dokumentstruktur der geladenen Webseite sowie die Behandlung von Ereignissen. Dazu gehören:

  • Position und Abmessung 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, wie einen kompletten CSS-Query-Selektor
  • Ereignisse hinzufügen und entfernen
  • Erkennung von #-Navigationen
  • Tastaturunterstützung, globale Tastatur-Hotkeys
  • Textbearbeitung in Textfeldern, zum Einfügen und Ersetzen von markiertem Text

coati.fx

Aufwändigere Effektfunktionen, wie:

  • Höhe eines Textarea-Elements automatisch an die Höhe des eingegebenen Texts anpassen
  • Bild durch Anklicken vergrößern, mit Zoom-Animation von der Position im Dokument zur Bildschirmmitte
  • Fotos wiederholend ineinander überblenden (Diaschau)

coati.webrequest

AJAX-Funktionen zum Nachladen von Informationen oder Absenden von Eingaben, ohne die Seite zu verlassen. Mit einfacher Auswertung von XML-Elementen in der Antwort.

coati.color

Funktionen zur Farbarithmetik.

  • Auflistung benannter Webfarben
  • Konvertierung zwischen Code-Darstellungen (HTML, CSS)
  • HSL-zu-RGB-Umrechnung
  • Mischen von Farben
  • Komplementärfarbe
  • Aufhellen und Abdunkeln
  • Grau-Umrechnung

Farbberechnungen und Farbauswahl-Steuerelemente in C#? Weiter zur ColorMath-Klasse, dem ColorFader-Steuerelement und dem ColorWheel-Steuerelement…

coati.animation

animation ist eine Klasse, die Animationen durchführt. Dabei werden keine CSS-Transitions verwendet, sondern eine eigene Berechnung und Formatierung verwendet. Der Ablauf der Animation kann vielfältig eingestellt werden. Es werden viele CSS-Eigenschaften unterstützt (u. a. Transparenz, Scrolling, Farben, Position und Abmessung, Abstände, Rahmenbreite und Schriftgröße).

Animationen in C#? Weiter zur Animation-Klasse…

coati.form

form ist eine Klasse, die den Zugriff auf HTML-Formulare ermöglicht.

  • Werte einzelner Eingabefelder lesen und ändern
  • Ereignisse an einzelne Felder oder das ganze Formular binden
  • Optionen in Auswahlfeldern ändern
  • Daten abrufen, um sie einem AJAX-Webrequest zu übergeben

coati.popup

popup ist eine Klasse, die ein einfaches Overlay-Feld mit einer Textmitteilung an einer bestimmten Position anzeigt. Das kann z. B. als Fehlerhinweis für HTML-Formulare verwendet werden, um die Meldung direkt beim betreffenden Eingabefeld anzuzeigen.

Beispiel

Die coati-Bibliothek ist zu allgemein und zu vielseitig, dass ich ein bestimmtes Beispiel hervorheben könnte. Fragen und Anregungen sind willkommen! Vielleicht ergibt sich im Laufe der Zeit nochwas.

Okay, ein Beispiel vielleicht. Dieser JavaScript-Code stammt von der Seite Textfluss um Bildkontur und dient dort dazu, einen CSS-Effekt interaktiv auszuprobieren. Durch Betätigen der Checkbox mit der ID „imageshapeDbgCheck“ wird bei allen Elementen auf der Seite mit der Klasse „imageshape“ die zusätzliche Klasse „imageshape-dbg“ gesetzt bzw. entfernt. Und das mit nur drei Zeilen Code (ohne die ganzen Klammern) – in jedem Browser.

// HTML code:
// <label><input type="checkbox" id="imageshapeDbgCheck">Text</label>

coati.dom.addEvent("#imageshapeDbgCheck", "click", function()
{
    coati.array.each($$(".imageshape"), function(e)
    {
        coati.dom.toggleClass(e, "imageshape-dbg", $("#imageshapeDbgCheck").checked);
    });
});

Download

coati.js45,4 KiBFunktionsfähig komprimierter Quelltext der coati-Bibliothek (erstellt mit Closure Compiler, siehe unten). Bei Verwendung auf einer Website sollte diese Version der Datei verwendet werden.

coati-src.js140 KiBVollständiger Quelltext der coati-Bibliothek mit allen Kommentaren. Diese Version wird nur zum Lesen und Verändern des Quelltexts benötigt.

Dokumentation

Die Dokumentation ist noch sehr mager und besteht nur aus einer kurzen Beschreibung der einzelnen Funktionen und ihrer Aufrufparameter im Quelltext. Mir ist derzeit kein Werkzeug bekannt, das diese Kommentare auslesen und in eine übersichtliche Form bringen kann.

Die Bibliothek befindet sich in der Entwicklung und enthält noch nicht alle geplanten Funktionen. Ich setze die Bibliothek bereits auf mehreren Webseiten ein (u. a. auf dieser hier), die bereits implementierten Funktionen sollten für die meisten Zwecke stabil sein.

Komprimierung

Um die Dateigröße von JavaScript-Dateien zu minimieren und damit den Download der Webseite zu beschleunigen, können sie mit dem Closure Compiler komprimiert werden. Dabei werden überflüssige Zeichen entfernt, lokale Variablen und Funktionen mit kürzeren Namen umbenannt und auch der Code selbst ein bisschen umgestellt, wenn es dadurch kürzer wird. Da der coati-Quelltext ausführlich kommentiert ist und an vielen Stellen intern sprechende Variablennamen verwendet werden, bleibt so vom Original-Quelltext nur noch ein Drittel übrig.

Mit folgender Batchdatei für die Downloadversion des Closure Compiler wird die Datei komprimiert:

@echo off
"C:\Program Files\Java\jre7\bin\java.exe" -jar "C:\Program Files (x86)\closure-compiler\compiler.jar" --js coati-src.js --js_output_file coati.js --jscomp_off uselessCode
pause

Durch die transparente GZip-Komprimierung beim Download vom Webserver wird die Datei – im Gegensatz zu Bildern – nochmals deutlich kleiner. Aus 44 KiB im Original werden dadurch etwa 14 KiB. Damit belegt die Verwendung dieser Bibliothek auf einer durchschnittlich umfangreichen Webseite kaum zusätzliche Bandbreite.

Um den Download von JavaScript-Dateien durch den Server zu komprimieren, kann folgender Eintrag in der .htaccess-Datei notwendig sein. Die tatsächliche Download-Größe kann u. a. im Netzwerk-Tab von Firebug (Entwickler-Addon für Firefox, für andere Browser gibt es andere Addons) ermittelt werden.

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/javascript text/javascript
</IfModule>

Änderungen

2014Apr28
Replaced internal $() function call with coati_dom_select()
2012Nov16
Zoomable image layout fixed, opacity fixes for IE
2012Feb28
Zusammenführung diverser Versionsstände, erste Veröffentlichung.

Lizenz und Nutzungsbedingungen

Diese Software wird unter den Bedingungen der GNU-GPL-Lizenz Version 3 veröffentlicht. Die genauen Lizenzbedingungen befinden sich im Download oder auf der GNU-Website.

Die folgenden Webseiten befassen sich mit fortgeschrittener JavaScript-Programmierung.

Statistische Daten

  • Erstellt am 2012-02-28, aktualisiert am 2014-04-28.
  • Ca. 3 350 Codezeilen, geschätzte Ent­wick­lungs­kos­ten: 3 400 - 13 000 €