Tag: javascript

Harmony: Prozedurales Zeichnen mit JavaScript

Erst kürzlich berichtete ich über die experimentelle Zeichen-Anwendung Flame, mit der sich abstrakte Flammen im Browser erstellen lassen. Ein etwas anderes Kreativ-Werkzeug stellt Harmony von Richardo Cabello dar. Die JavaScript-Anwendung, welche die canvas-Fähigkeiten nutzt, ermöglicht prozedurales Zeichnen (generative Gestaltung) — dadurch entstehen Bilder, die durch wiederholende Algorithmen erzeugt werden.

Das Programm bietet verschiedene Pinsel (Brushes) zur Auswahl, mit denen sich Graustufen-Bilder gestalten lassen. Dazu zählen etwa Kreise, Vernetzungen, Linien oder Rechtecke. Die Anwendung regt zum Experimentieren an und erlaubt es, erstellte Kunstwerke als PNG-Grafik zu speichern.
Sehr interessant ist vor allem die Website des Entwicklers, auf der auch seine anderen HTML5- und ActionScript-Experimente zu sehen sind. Darunter finden sich beeindruckende Physik-Simulationen und unter Anderem die "Ball Pool-Animation", die zu den frühen Chrome-Experimenten zählt.

MooTools 1.2 Beginner's Guide: Eine Rezension

Mit MooTools lassen sich relativ einfach und schnell dynamische Webprojekte realisieren. Neben Effekten und Animationen stellt Ajax ein weiterer Bereich dar, für den die JavaScript-Bilbiothek gute Möglichkeiten bietet. Das MooTools-Framework ist aktuell in Version 1.2 verfügbar und zeichnet sich vor allem auch durch seinen objektorientierten Ansatz aus — JavaScript bietet nativ nur eingeschränkte Möglichkeiten für Objekte, Klassen und Vererbung.

Für MooTools gibt es mittlerweile verschiedene Bücher. Ich habe das kürzlich veröffentlichte Werk "MooTools 1.2 Beginner's Guide" von Jacob Gube (Six Revisions) und Garrick Cheung unter die Lupe genommen. In dieser Rezension will ich den Inhalt des Buches, das sich an Einsteiger und Anfänger richtet, beleuchten. Voraussetzung für die Arbeit mit dem Buch (und entsprechenden Projekten) sind JavaScript-Grundkenntnisse sowie fortgeschrittene HTML- und CSS-Fähigkeiten.

RequireJS: JavaScript-Dateien als Module laden

Bei größeren Projekten kann es vorkommen, dass durch die Komplexität mehrere JavaScript-Dateien verwendet werden oder diese aufgrund eines bestehenden Frameworks schon vorhanden sind. Dann kann es der Fall sein, dass bestimmte Funktionen oder Aufrufe erst erfolgen sollen, nachdem eine Bibliothek fertig geladen wurde. Als Entwickler hat man ohne zusätzlichen JavaScript-Code keinen Einfluss auf die Reihenfolge, in der die Dateien einer Website geladen werden. Eine Möglichkeit besteht in der Umstrukturierung des HTML-Gerüsts, doch dieser Ansatz lässt sich in der Praxis nur selten umsetzen.
Um JavaScript-Dateien nun als separate Module zu nutzen, bietet sich ein Skript wie RequireJS an — dadurch werden Befehle erst dann ausgeführt, wenn die gewünschten Skripte fertig geladen wurden. Die Implementierung für das einfache Laden von mehreren Dateien könnte dann so aussehen:

• …
• <script src="scripts/require.js"></script>
• <script>
• require(["datei1.js", "datei2.js", "datei3.js"],
• function() {
• // This function will be called when all the
• // dependencies listed above are loaded.
• // Note that this function could be called
• // before the page is loaded. This callback
• // is optional.
• }
• );
• </script>
• …

Mit RequireJS lassen sich Skripte zudem als Module mit bestimmten Abhängigkeiten behandeln. Weiterhin können sich mit der Bibliothek Sprachvarianten (I18N) für die Ausgabe von Texten erstellt werden. Mehr über die Verwendung der unterschiedlichen Funktionen findet sich in der API-Dokumentation. Eine Schnittstelle für jQuery ist ebenfalls enthalten.
Interessant ist schließlich das Optimization Tool, das den Google Closure Compiler nutzt, um mehrere JavaScript-Dateien in einer Datei zu kombinieren. Dieser Schritt sollte am Ende der Entwicklungsphase stehen und reduziert die Anzahl der Requests, die für ein JavaScript-Projekt benötigt werden.

jQuery: Klicks außerhalb eines Elements feststellen

Bei der Entwicklung von Benutzeroberflächen und Interaktionen sind in manchen Fällen die gegebenen Möglichkeiten unzureichend. Daher haben einige Entwickler schon virtuelle DOM-Events konzipiert, mit denen erweiterte Abfragen möglich sind — so lässt sich beispielsweise feststellen, wie lange der Mauszeiger über einer Fläche verweilt oder wie lange die Maustaste vom Anwender betätigt wurde. Eine weitere Funktionalität in Form eines jQuery-Plugins bietet Ben Alman mit seinem "clickoutside"-Event an: Damit können Programmierer auf Ereignisse reagieren, die auftreten, sobald der Benutzer einen Punkt außerhalb eines entsprechenden Elements angeklickt hat.

Dies könnte zum Beispiel bei einer Lightbox der Fall sein. Das Verwenden einer großen Overlay-Fläche würde dadurch entfallen. Testen lässt sich das jQuery-Event auf der Demoseite.
Ein Bonbon gibt es vom Plugin-Autor für interessierte JavaScript-Entwickler: Der Quelltext ist kommentiert und kann bei GitHub eingesehen werden.

JSPatterns: Nützliche Funktionen und Entwurfsmuster

Stoyan Stefanov dürfte vielen Webentwicklern durch sein Blog "PHPied" ein Begriff sein. Er hat diverse Bücher veröffentlicht, darunter auch "Object-Oriented JavaScript ". Der Entwickler betreibt seit geraumer Zeit auch eine Website, die sich mit allgemeinen Funktionen und Entwurfsmustern (Design Patterns) für JavaScript befasst. Bei JSPatterns sammelt und erklärt Stoyan Stefanov diverse JavaScript-Snippets, die zum Teil sehr interessante Eigenschaften der Skriptsprache offenlegen. Dabei geht es hauptsächlich um Klassen, Vererbung (Inheritance) oder andere objektorientierte Aspekte.

Die Patterns sind meistens mit praxisnahen Beispielen versehen, so dass sie besser verstanden werden können. JavaScript-Entwickler werden in der Sammlung viele hilfreiche Funktionen finden. Die Snippets sind in der Regel nicht komplex und dennoch interessant. So findet sich auf dem Blog beispielsweise ein Pattern, mit dem eine Funktion beim Instanziieren eine einmalige Funktion ausführt — dies kann etwa für das Einstellen (Setup) von Eigenschaften sinnvoll sein. Das Snippet wäre:

• function setup() {
• alert(1);
• return function() {
• alert(2);
• };
• }
•  
• var my = setup(); // Ausgabe: 1
• my(); // Ausgabe: 2

Wer Grundkenntnisse oder eine umfangreiche Einführung in JavaScript benötigt, ist mit "Eloquent JavaScript" bestens bedient.

YUI Library: Alles rund um die Yahoo!-Frameworks

Die verschiedenen JavaScript-Bibliotheken eignen sich für verschiedene Projekte. Manche Frameworks unterscheiden sich nur wenig, andere variieren stark im Funktionsumfang. Die Yahoo! User Interface Library (YUI) gibt es derzeit in den Versionen 2 und 3. Neben den Seiten beim Yahoo! Developer Network (YDN) gibt es noch eine offizielle Website für die JavaScript-Frameworks. Hier findet sich eine große Community, die das Projekt durch Forenbeiträge und eigene Skripte bereichert.

Besonders interessant für YUI-Entwickler ist die Galerie, in der sich fertige Plugins finden. Dabei ist für jeden Geschmack etwas dabei: Angefangen bei Accordions über Date Picker bis hin zu kompletten WYSIWYG-Editoren. Die Benutzerskripte sind mit Beispiel-Codes und Dokumentationen versehen. Zudem finden sich auf den Plugin-Seiten direkt Diskussionen aus dem Forum.
Die YUI-Community ist sehr vorbildlich und auch andere Framework-Websites haben interessante Bereiche: Bei jQuery besteht beispielsweise mit den jQuery Meetups die Möglichkeit, mit anderen Entwicklern Kenntnisse auszutauschen.

jQuery: Version 1.4.2 des Frameworks veröffentlicht

Wie dem jQuery-Blog zu entnehmen ist, wurde nun Version 1.4.2 des beliebten JavaScript-Frameworks zum Download bereitgestellt. Die aktuelle Version wurde in ihrer Geschwindigkeit verbessert und um Funktionen erweitert: Mit "delegate()" und "undelegate()" lassen sich Ereignisse auf Elemente anwenden, die einen gemeinsamem Ursprung haben. Somit können noch gezielter Interaktionen gesteuert werden.

In dem Blog-Eintrag findet sich zudem ein Diagramm, in dem die aktuelle Geschwindigkeit der Bibliothek zu sehen ist. Sie wurde wieder mit dem TaskSpeed-Benchmark ermittelt und zeigt noch einmal eine erhebliche Verbesserung im Vergleich zu Version 1.4.1. Weiterhin wurden verschiedene Funktionen optimiert — die Details können ebenfalls im Blog nachgelesen werden.
Die aktuelle Version kann auf der jQuery-Website heruntergeladen werden.

SimpleSlider: Einfacher Schiebe-Effekt mit jQuery

Nicht immer sind aufwendige und effektlastige Animationen bei Webprojekten gefragt — einfache Effekte können dezent die gewünschten Informationen übertragen oder bestimmte Aspekte besser beleuchten. Wer auf der Suche nach einem einfachen Slider (Verschiebung) ist, kann sich das jQuery-Plugin von Justin Jones ansehen: Der SimpleSlider wurde von dem Entwickler für ein eigenes Projekt erstellt und erfüllt seinen Zweck. Listenelemente (li) aus einer Liste (ul) werden einfach von rechts nach links animiert. Zudem kann die Animation manuell durch Schaltflächen gesteuert werden.

Das Skript kann in 3 Demonstrationen getestet werden: Als Basis-Version, mit CSS-Eigenschaften oder erweiterten Einstellungen. Das Plugin wird in der einfachen Variante wie folgt eingebettet:

• $("element").simpleslider();

Bei dem aufgerufenen Element handelt es sich wie oben erwähnt um eine Liste, deren Kind-Elemente animiert werden. In den Optionen des jQuery-Plugins können diverse Anpassungen (Geschwindigkeit, Schaltflächen, etc.) vorgenommen werden. Die Buttons können per CSS umgestaltet werden.

jQuery: Zeichenfunktion für einfache Grafiken

In manchen Situationen kann es erforderlich sein, kleine Grafiken oder Abbildungen mit JavaScript zu zeichnen. Speziell für das Zeichnen von Graphen oder Diagrammen können Flash- oder JavaScript-Lösungen hilfreich sein. Mehr Kreativität ermöglicht die jQuery Drawing Library von OpenStudio Communication. Die jQuery-Bibliothek zeichnet durch die Angabe von Koordinaten und Winkeln einfache Grafiken im Browser.

Zum Einsatz kommt die Canvas-Technik oder SVG, sofern vom Browser unterstützt — das Canvas-Plugin "Explorercanvas" für Internet Explorer ist enthalten.
Eine Ellipse kann so beispielsweise mit folgender Zeile erstellt werden:

• $("element").drawEllipse(2, 2, 8, 6, {color: "#123456", stroke: 2});

Eine Beschreibung für die Implementierung der Bibliothek findet sich auf der Website des Skriptes. Zu den Zeichenfunktionen gehören Methoden zum Erstellen von Kreisen, Linien, Bögen oder Polygonen. Der Wermutstropfen stellt die Größe des jQuery-Plugins dar — unkomprimiert schlägt die jQuery Drawing Library etwa 100 KB zu Buche. Die SVG-Bibliothek nimmt dabei einen Teil davon ein.
Wer jQuery-Skripte für die Erstellung von reinen Graphen sucht, sollte bei Steve Reynolds vorbeischauen — in diesem Artikel und in diesem Beitrag stellt er viele Lösungen für dynamische Diagramme vor.

MooTools: Tipps und Tricks zu nützlichen Funktionen

Zur Abwechslung gibt es wieder einen Link-Tipp für MooTools-Entwickler: Mark Obcena (Keetology) hat kürzlich den neuesten Artikel seiner Reihe "Up The Moo Herd: MooTools Tips and Tricks" veröffentlicht. In dem Beitrag geht der Autor auf verschiedene Hilfsfunktionen des MooTools-Frameworks ein. Dabei geht es hauptsächlich um die Arbeit mit Klassen und deren Eigenschaften.

MooTools kommt mit diversen Klassen-Funktionen, mit denen versucht wird, eine objektorientierte Programmierung möglich zu machen. Mark Obcena geht zudem auf Bedingungen (Conditions), Objekte und Funktionsparameter ein. Der Beitrag ist sehr ausführlich geschrieben und mit Code-Beispielen geschmückt.
Die MooTools-Bibliothek zählt neben jQuery zu den einfach erlernbaren JavaScript-Frameworks und bietet dennoch genügend Funktionen für ansprechende Webanwendungen. Ryan Florence hat vor kurzem einen aktuellen Vergleich von jQuery 1.4 und MooTools 1.2 verfasst. Dabei geht es um die neuen Funktionen der Frameworks — in dem Blog-Eintrag finden sich zu den Unterschieden beeindruckende Live-Beispiele, die direkt getestet werden können.