Ajaxschmiede.de

Auf der dänischen Javascript-Website Nihilogic wurde vor wenigen Tagen eine Canvas-Adaption des Spieleklassikers Super Mario vorgestellt.

Das gesamte „Spiel“ kommt ohne Grafikdateien aus. Die dargestellten Elemente werden über Canvas, einem HTML5-Element zum Darstellen von Grafiken im Webbrowser, erzeugt. Da der Internet Explorer, einschließlich Version 8 – wie wir berichten – Canvas nicht unterstürzt, wurde ein DIV-Fallbackmodus eingerichtet.

Auch an die Hintergrundmusik wurde gedacht. Diese stammt von einer MIDI-Datei, die mittels base64-Kodierung direkt in den Javascript-Code eingebunden wurden.

Die Ausführgeschwindigkeit der JS-Spielerei kann zwar zwischen den einzelnen Browern variieren, läuft aber sowohl mit Firefox, Opera, Safari als auch mit dem erwähnten IE.

Ich halte die Umsetzung für eine gelunge Demonstration, was in Zukunft alles möglich ist im Web, wenn sich gewisse (neuere) Standards durchsetzen. Es handelt sich hierbei um keinen komplettem Level!

John Resig, Mitarbeiter der Mozilla Foundation für JavaScript-Angelegenheiten und Kopf hinter der jQuery-Bibliothek, entwickelt derzeit mit Dromaeo an einem einheitlichen JavaScript-Benchmark für alle üblichen Browser.

Der Dromaeo-Test bedient sich dabei beim JavaScript-Benchmark SunSpider vom WebKit-Project, setzt diese Tests aber anders um. So werden zum Beispiel die Einzeltests nicht in iFrames umgesetzt, da durch Versuche bewiesen werden konnte, dass andere Browserkomponenten die Ergebnisse bei iFrames stark beeinflussen können.

Bisher läuft der Test auf folgenden Browsern:

• ab Firefox 2
• ab Safari 3
• ab Opera 9
• ab Internet Explorer 6

Das an dem Benchmarktest noch gearbeitet werden muss, zeigt sich zum Beispiel darin, dass der „DNA Sequence Alignment“-Einzeltest im IE6 und IE7 extrem langsam läuft (etwa 15-20 Minuten).

Wer mehr über Dromaeo erfahren will, dem empfehle ich einen Blick ins Mozilla Wiki.

Zwei Benchmarkvergleiche will ich unseren Lesern nicht vorenthalten: der erste zeigt einen Vergleich zwischen IE6, IE7 und IE8; der zweite zwischen Firefox 3 (beta5pre), Safari 3 (525.13) und Opera 9.50.

Die zum Zeichnen von Graphen entwickelte flot-Javascriptbibliothek ist seit einiger Zeit in der Version 0.4 erhältlich.

Zu den Änderungen gegenüber der bisheriger 0.3er Version gehören unter anderem folgende Punkte:

• Unterstützung von Zeitangaben an den Graphenachsen über mode=“time“
• Unterstützung farbiger Hintergrundflächen mittels grid.coloredAreas( x1, y1, x2, y2 ) – die Parameter geben die beiden Eckpunkte der Fläche oben-links und unten-rechts an
• Unterstützung von Strichlinien
• die Rahmenbreite ist nun veränderbar
• Überarbeitung des automatischen Achsen-Skalierungsalgorithmuses

Wie man flot ein bindet und was man damit anfangen kann, haben wir in unserer Vorstellung dieser Bibliothek aufgezeigt. Zudem haben wir auf Grundlage von flot einige Beispielanwendungen erstellt.

Durch den Kommentar von Jan zu meinem Beitrag über die von mir geschriebene Funktion zum Scrollen mittels div-Elementen angeregt, habe ich diese Funktion derart erweitert, dass nun auch eine Scroll-Begrenzung nach unten besteht. Damit ist das Problem des Endlos-Scrollens nach unten behoben.

Um die Höhe des div-Elements, in dem der anzuzeigende Inhalt steht, zu bestimmen, benutze ich die Javascript-Methode offsetHeight. Von dieser ermittelten Höhe ziehe ich die Höhe des Anzeigebereichs (tool-div) ab und erhalte damit den unteren Grenzwert beim Scrollen.

Der Code der erweiterten Funktion sieht nun wie folgt aus:

function moveDIV( var1, var2 ) {
	if ( var1 == 0 ) {
		document.getElementById("zeug").style.left = "0px";
		document.getElementById("zeug").style.top = "0px";
	} else {
		if ( var2 ) {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.left;
			var2 = Number(var2.substring(0, var2.length-2)) + var1;
			
			var3 = document.getElementById("zeug").style.width;
			var3 = Number(var3.substring(0, var3.length-2));
			
			var4 = document.getElementById("tool").style.width;
			var4 = Number(var4.substring(0, var4.length-2)) - var3;

			// wenn nicht am linken "rahmen" angekommen
			if ( var2 <= 0 ) {
				// wenn nicht am rechten "rahmen" angekommen
				if ( var2 >= var4 ) {
					document.getElementById("zeug").style.left = var2 + "px";
				} else {
					document.getElementById("zeug").style.left = var4 + "px";
				}
			} else {
				document.getElementById("zeug").style.left = "0px";
			}
		} else {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.top;
			var2 = Number(var2.substring(0, var2.length-2)) + var1;

			var3 = document.getElementById("zeug").offsetHeight;
			
			var4 = document.getElementById("tool").style.height;
			var4 = Number(var4.substring(0, var4.length-2)) - var3;

			// wenn nicht am oberen "rahmen" angekommen
			if ( var2 <= 0 ) {
				// wenn nicht am unteren "rahmen" angekommen
				if ( var2 >= var4 ) {
					document.getElementById("zeug").style.top = var2 + "px";
				} else {					
					document.getElementById("zeug").style.top = var4 + "px";
				}
			} else {
				document.getElementById("zeug").style.top = "0px";
			}
		}
	}
}

Das Script in Aktion kann auf dieser Demoseite angesehen werden.

Mit der Bereitstellung der Version 2.6. des DOMAssistant hat das Entwicklerteam um den Schweden Robert Nyman ein wahres Kunststück in Sachen Geschwindigkeitsoptimierung fertig gebracht.

An der modular aufgebauten Javascript-Bibliothek, über die wir bereits berichteten, wurde vor allem der Bereich der CSS-Selektoren genaun analysiert und beschleunigt. Das Ergebnis kann sich sehen lassen: DOMAssistent besitzt die schnellste Performance beim Verwenden von CSS-Selektoren.

Im SlickSpeed Selector Test kann sich jeder davon überzeugen. Dabei werden folgende Bibliotheken miteinander verglichen: DOMAssistant 2.6, jQuery 1.2.3, Prototype 1.6.0.2, Mootools 1.2b2, ExtJS Core 2.0.1 und YUI 2.4.1. Ich habe den Test selbst durchgeführt und war erstaunt darüber, wie viel länger andere Bibliotheken benötigen.

Der $$-Methode

Neben dem bisher bekannten $-Operator wurde nun zusätzlich der $$-Operator eingeführt. Er dient dazu ein Element über das id-Attribut direkt anzusprechen. Im Gegensatz zum einfachen $ gibt der neue Operator einen Fehler zurück, falls kein Element mit der im Parameter übergebenen id existiert.

$("#navi a"); // CSS-Selektor-Aufruf
$$("navi"); // um Elemente über die id zu addressieren

Die bisherige Syntax greift nun nur noch für CSS-Selektoren, nicht mehr um nur Elemente über die id zu erreichen!

Parallele Ajax-Aufrufe

Bis zu diesem Release war es nicht möglich mehrere post- oder get-Methoden gleichzeitig aufzurufen. Wurde bisher ein neuer Ajax-Befehl gestartet, bevor der aktuelle abgearbeitet werden konnte, wurde letzterer abgebrochen. Ab Version 2.6 von DOMAssistent können nun beliebig viele Ajax-Aufrufe gleichzeitig ausgeführt werden.

Plugins

Das Nyman-Team bleiben seiner Linie treu und will seine Javascript-Bibliothek klein und effektiv halten. Dennoch wünschen sich viele Javascript-Entwickler die Fähigkeiten von DOMAssistent zu erweiteren und eigene Funktionen und Methoden zu integrieren. Diesem Wunsch kam man nach, indem man die Möglichkeit schuf Plugins einzubinden. Eigene Erweiterungen können auf einer eigens eingerichteten Seite Anderen zur Verfügung gestellt werden. Eine Anleitung zum Erstellen von Plugins steht ebenso auf dieser Page bereit.

Wer neugierig geworden ist, kann sich auf der Downloadseite die neuste Version von DOMAssistent herunterladen – wie gewohnt als Gesamtpaket oder einzelne Module.

Jeder Webentwickler muss hin und wieder Eingabeformulare erstellen, deren Eingabe auswerten und weiterverarbeiten. Derartige Eingaben sollten vor jeder Weiterverarbeitung jedoch immer validiert werden. Für den Nutzer ist es hilfreich, schon wärend der Eingabe etwaige ungültig ausgefüllte Felder anzuzeigen.

Die kleine Open Source Javascript Bibliothek „LiveValidation“ bietet solch eine Validierung in Echtzeit. Die Syntax ist leicht verständlich, Namenskonventionen und Parameter der Validierungen sind ähnlich zu denen im Ruby on Rails Framework.

Während eine Eingabe wird der Nutzer sofort über das richtige oder falsche Ausfüllen des Formularfeldes informiert. Das hilft von vorn herein Eingabefehler zu vermeiden.

Es können verschiedene Validierungen definiert werden. Hier einige wichtige:

• Format – Ein Regulärer Ausdruck beschreibt die gültigen Werte.
• Numericality – Dieser Typ befasst sich mit sämtlichen nummerischen Eingaben, es lassen sich reine Integer-Eingaben, Eingaben von Zahlen in unterschiedlichen Formaten, Zahlen mit einem Mindest- oder Maximalwert, sowie einen Zahlenbereich deklarieren.
• Length – Ist ebenfalls ein umfangreicher Validierungs-Typ. Es lässt sich eine bestimmte Anzahl von Zeichen definieren, eine Mindestlänge, eine Maximallänge oder ein Bereich.
• Inclusion – Validiert nach einer Lister gültiger Werte, entweder nach einem axakten Wert oder einem in einer Zeichenkette enthaltenen Wert.
• Confirmation – Vergleicht zwei Formularfeld-Eingaben, ob sie identisch sind. Das ist besonders für eine wiederholte Eingabe eines Passwortes nützlich.
• Email – Prüft die eingegebene Email-Adresse auf syntaktische Korrektheit.

Weitere Möglichkeiten sind der LiveValidation-Beispielseite zu entnehmen. Auf jeden Fall deckt die Bibliothek die gängigsten Validierungsarten ab.

Trotz clientseitiger Javascript-Validierung sollte auf eine serverseitige Validierung (bspw. durch PHP) auf keinen Fall verzichtet werden. Die clientseitige Validierung ist als nützlicher Zusatz anzusehen, denn sie lässt sich durch Deaktivieren von Javascript im Webbrowser umgehen.

Die letzten beiden Wochen verbrachte ich unter anderen damit, mein Skript zur Darstellung mathematischer Funktionen mittels flot weiterzuentwickeln. Dabei entdeckte ich die fehlerhafte Darstellung gebrochener Zahlen in heutigen PC-Systemen und etliche andere Kleinigkeiten, auf die ich gleich eingehen werde. Insgesamt bin ich einen großen Schritt vorwärts gekommen.

Erfolgreich implementierte ich die Möglichkeit eine Kurvenschar (Funktionsschar) anzeigen zu lassen. Als zweiten Parameter entschied ich mich für die Variable z, da mir das für gewöhnlich genutze a größere Probleme beim Ersetzen des Parameters durch konkrete Werte bereitet hätte. So kommt beispielsweise ein a in Math.exp() beim Verwenden einer Exponentialfunktion vor.

Wie angekündigt habe ich die Möglichkeit eingebaut, sich über Scrollbuttons in der Grafik zu bewegen. Das erleichtet das Verfolgen eines Funktionsverlaufs erheblich. Mir ist es bisher nicht gelungen, das Zoomen mit dem Mausrad mittels des mousewheel-Plugins für jQuery 1.2.2 zu integrieren.

Alle Änderungen im Überblick:

• Einbau der numlib-Bibliothek zum Eingrenzen des Binärdarstellungsproblems von gebrochenen Zahlen
• Möglichkeit zur Darstellung von Kurvenscharen
• Integration einer Scrollfunktion in die Funktionsgrafik
• Möglichkeit die Schrittweite automatisch berechnen zu lassen
• Zulassen von gebrochenen Zahlen im Exponenten der Exponentialfunktion ( = Wurzelfunktion )
• Fehler bei negativen Zahlen behoben ( — gleich +)
• Potenzgesetze in einfacher Form eingebaut ( x[2][3] gleich x[6] )

Ich werde weiter am Ball bleiben und das Skript stetig ergänzen. Man sieht bereits, dass es vorgesehen ist, eine zweite selbstdefinierte Funktion parallel in der Grafik anzuzeigen.

Folgende Neuerungen plane ich bis zur nächsten Veröffentlichung zu realisieren:

• e-Funktion soll verwendet werden können
• ebenso trigonometrische Funktionen
• Optimierung der Scrollfunktion (nicht bei jeder Bewegung alle Werte neu berechnen)
• Mausrad-Zoom-Funktion
• Möglichkeit zwei unabhängige Funktionen darzustellen
• Verallgemeinerung der regulären Ausdrücke
• ausgeprägtere Gliederung in Funktionen oder Objekte
• Erweiterung der Potenzgesetze

Und nun viel Spaß beim Ausprobieren der aktuellen Version meiner flot-Anwendung.

Dieser Beitrag richtet sich an alle, die ihre Webseiten mit einer eleganten, animierten Bildergalerie aufpeppen möchten.

Die Web2.0 Bildergalerie „slideshow“ von pathfusion bietet dafür einen nützlichen Funktionsumfang. Sie ermöglicht es, die Einzelbilder mit Effekten wie fade (überblenden), wipe (verschieben) und slide (überdecken) zu wechseln.

Die Integration und Konfiguration des Scripts ist sehr einfach.

Zuerst müssen die benötigten Javascript-Dateien im Header eingebunden werden.

<link rel="stylesheet" type="text/css" href="slideshow.css" media="screen" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="backgroundslider.js"></script>
<script type="text/javascript" src="slideshow.js"></script>

Konfiguriert wird das Script wie folgt:

var obj = {
	wait: 3000, /*Wartezeit bis zum Bildwechsel*/
	effect: 'fade', /*Effekt*/
	duration: 1000,
	loop: true, /*als Endlosschleife abspielen (ja / nein)*/
	thumbnails: true, /*Vorschaubilder nutzen (ja / nein)*/
	backgroundSlider: true, /*die bachgrundslider-Klasse für Vorschaubilder nutzen (ja / nein)*/
	onClick: function(i){alert(i)} /*Funktionsaufruf, wenn ein Bild angeklickt wird*/
}
/*ein neues Objekt der SlideShow-Klasse erstellen*/
show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);

Den restlichen, zugehörigen HTML Code entnehmt ihr der slideshow Projektseite.

Die Galerie benötigt das Javascript Framework mootools und ist mit Firefox 2, IE 6, IE 7 und Safari kompatibel.

Ich habe eine Demoseite erstellt, auf der ihr euch den gesamten Funktionsumfang anschauen und testen könnte. Über die Formularelemente auf der rechen Seite können die Parameter der Galerie variiert werden.

Auf das Bild Klicken, um zur Demoseite zu gelangen:

Während der Weiterentwicklung an meiner Demoseite zur Darstellung von mathematischen Funktionen durch Javascript, stieß ich auf einige Ungereimtheiten der in der Schleife verwendeten Laufvariablen i. Eine genauere Überprüfung brachte für mich völlig unerklärliche Werte zum Vorschein. Die einfache Gleichung 0.2 + 0.1 ergab nicht wie erwartet 0.3 sondern 0.30000000000000004.

Ich konnte es mir absolut nicht erklären, woher dieser – in meinen Augen – Fehler zu Stande kam. Ich schloß sämtliche Fehlerquellen aus. Als dies auch nichts half, beschloss ich der Sache auf den Grund zu gehen – ohne vorher zu ahnen, dass ich mit meiner so simplen Rechnung auf eine in Kauf genommene Schwachstelle unserer heutigen schnellen Computertechnik gestoßen war. Doch der Reihe nach.

Als erstes sei klargestellt, dass die nachfolgend beschriebene Ungenauigkeit nur bei Kommarechnung auftriit – da jedoch in jeder Programmiersprache, egal ob Javascript, PHP oder C. Integerzahlen bleiben davon gänzlich unberührt.

Um das angesprochene Problem deutlich zu machen, habe ich eine Testseite erstellt, auf der man eine Tabelle sieht, in deren linken Spalte sich die Zahlenwerte von 0 bis „ungefähr 1.9“ befinden. Die Werte werden in einer for-Schleife mit dem Startwert 0, der Abbruchbedingung kleiner-gleich 2 und einer Erhöhung der Laufvariable um jeweils 0.1 pro Durchlauf erzeugt und via jQuery an die Tabelle angehangen.

Wie man unschwer erkennen kann, weichen eine Vielzahl der in der linken Tabellenhälfte stehenden Werte geringfügig vom erwarteten Wert ab. Es tritt eine Ungenauigkeit auf.

Die Ursache des „Problems“ liegt in der binären Darstellung von Zahlen innerhalb von Programmen. So wird die Zahl 15 intern als 00001111 im Speicher abgelegt. Das selbe geschieht auch mit Kommazahlen, jedoch kann es dabei zu Ungenauigkeiten in der Darstellung kommen, da eine Vielzahl gebrochenener Zahlen binär periodisch abgebildet wird. So entspricht 0.1 im Dualsystem der Ziffer 1.1001 E-101, wobei E den Exponenten symbolisiert.

Eine ausführliche Abhandlung findet man auf DCLJS.

Um in Javascript dem Problem ein wenig aus dem Weg zu gehen, nutze ich die numlib-Bibliothek, die unter anderem eine Funktion namens dezRound zum Runden einer beliebigen Anzahl von Nachkommastellen zur Verfügung stellt. Mit dieser Funktion stelle ich sicher, dass Zahlen mit relativ wenigen Nachkommastellen genau angegeben werden – ich entschied mich auf 9 Stellen zu runden. Leider baue ich dadurch bei längeren gebrochenen Zahlen selbst eine Ungenauigkeit durch das Runden ein, die ich aber in meinem Fall in Kauf nehme.

Angeregt durch einen Artikel von Lutz Tautenhahn über das Zeichnen von Diagrammen und Funktionen mittels Javascript überlegte ich mir, ob es mit Hilfe der Javascript-Bibliothek flot, über die wir bereits berichteten, nicht ebenso möglich ist, mathematische Funktionen darzustellen.

Bereits nach kurzer Zeit hatte ich es geschafft, meine erste Funktion mittels Javascript und flot zu zeichnen. Als mathematisch geprägter Mensch war ich mit den Kompromissen, die ich in Bezug auf das Aufstellen von Gleichungen eingehen musste, jedoch nicht zufrieden und wollte Abhilfe schaffen.

Um es vorweg zu nehmen: Ich hatte Erfolg. Das Ergebnis meiner Bemühungen kann man in dieser Demonstration sehen, die es auch erlaubt komplexere Funktionen zu visualisieren

Das Script macht massiven Gebrauch von regulären Ausdrücken – zum einen um die eingegebene Funktion zu überarbeiten, zum anderen zum darstellen.

Kernstück des Zeichnens von Gleichungen ist die folgende for-Schleife, die einerseits die Aufgabe hat das x in der Funktion bei jedem Durchlauf gegen den Zählerwert zu ersetzen und andererseits das benötige Array, das an flot übergeben wird, bestehend aus x- und y-Wert aufzubauen:

for ( var i = startwert; i <= endwert; i += schrittweite ) { ausgabe = funktion.replace(/x/gi, i); var1.push([i, eval(ausgabe)]); } [/source] Das übrige Javascript dient, wie bereits erwähnt, dazu das Aufstellen von Funktionen sehr zu vereinfachen und für den Menschen intuitiver zu gestalten. Reguläre Ausdrücke übersetzen diese Kürzel und Kurzschreibungweisen in für den Browser verständliche Operationen. Folgende Vereinfachungen habe ich implementiert:

• 2x anstatt 2*x
• x(x+2) anstatt x*(x+2)
• x[5] bzw. (x+2)[5] anstatt Math.pow(x, 5) bzw. Math.pow(x+2, 5) zum Potenzieren
• ² und ³ wird akzeptiert
• Leerzeichen können beliebig gesetzt werden
• gebrochene Zahlen können sowohl mit , als auch mit . geschrieben werden

Ich werde an meinem Script weiter arbeiten, da ich noch etliche Ideen habe, die ich gern umsetzen will.

Unter anderem z.B.

• Anzeigen von mehr als einer Gleichung
• Bilden von Ableitungen und Stammfunktion
• Darstellen einer Funktionenschar (Funktion mit 2 Variablen)
• Scrollen innerhalb der Grafik
• Angabe von Extrema und Wendepunkten (Annäherung oder Gleichung) und Markieren dieser
• Möglichkeit des Einzeichnens der Tangente an einen Punkt (samt Funktion?)

Zur Demoseite