Ajaxschmiede.de

Wie golem.de berichtete, steht ab sofort das neue Visual Studio 2008 Express von Microsoft zum Download zur Verfügung und kann sowohl privat als auch gewerblich völlig kostenlos genutzt werden.

Microsoft bietet sein mächtiges Entwicklungswerkzeug in 4 verschiedenen Express-Editionen an. Neben Basic, C# und C++ gibt es zur Entwicklung von dynamischen Webanwendungen Visual Web Developer 2008 Express. Entwicklern steht das neue ASP.NET AJAX zum schreiben von ajaxbasierten Webseiten zur Verfügung.

Zusätzliche Web-Komponenten und -Controls bietet das ASP.NET AJAX Toolkit, welches als Open Source Software auf CodePlex veröffentlicht ist. Einige Beispiele, welche Art von Ajax-Anwendungen sich mit diesem Toolkit realisieren lassen, sind hier zu finden.

Visual Web Developer 2008 Express herunterladen

AJAX Control Toolkit herunterladen

Die neue Version das Javascript Framework Prototype behebt einige Kompatibilitäts- und Sicherheits-Probleme und bietet verbesserte Sicherheitsmaßnahmen für Entwickler, die Prototype außerhalb einer Webbrowser-Umgebung nutzen.

Einige wichtige Änderungen sind:

• 28 Fehler behoben
• über ein Dutzend Verbesserungen im Programmcode, einschließlich Performance-Verbesserungen für CSS Selektoren in Safari 3 sowie für die Methoden Element#up/#down/#next/#previous und Event#findElement in allen Browsern
• Unterstützung von Opera 9.25 und höher

Neben der zahlreichen Beseitigung von Fehlern, gibt es eine Änderung in der Art und Weise, wie Ajax.Request automatisch Javascript-Antworten auswertet. Frühere Versionen von Prototype verließen sich auf die XMLHttpRequest same-origin policy des Browsers, um sicherzustellen das Antworten mit dem Inhaltstyp ‚text/javascript‘ sicher ausgewertet werden. „Same-origin policy“ bedeutet, dass Domainname, Protokoll und Port übereinstimmen müssen, damit ein Script sicher ausgeführt wird.

Bestimmte Umgebungen außerhalb von Webbrowsern, zum Beispiel Opera´s Widget System, erzwingen nicht die same-origin policy und deswegen besteht die Cross-Domain-Sicherheitslücke. Um das zu verhindern, wurde die „Ajax.Request#isSameOrigin“-Methode eingeführt. Diese liefert „wahr“ zurück, wenn eine Anfrage zur selben Domain, zum selben Port und Protokoll gesendet wird, wie die Seite besitzt. Zudem wird Prototype keine Javascript-Antwort mehr automatisch auswerten, wenn diese Methode „falsch“ zurückliefert.

Die aktuelle Version ist abwärtskompatibel und kann somit problemlos gegen die veraltete Version 1.6.0 ausgetauscht werden. Ebenso wurden die Sicherheitsupdates auch für die Version 1.5 durchgeführt. Prototype 1.5 Nutzer können somit auf die Version 1.5.1.2 aktualisieren.

Prototype herunterladen

Vor kurzem wurde die Beta-Version des Javascript-Frameworks MooTools 1.2 veröffentlicht.

MooTools, das mit zu den umfangreichsten Javascript-Programmiergerüsten gehört, bietet – ähnlich wie jQuery – Möglichkeiten zum vereinfachten Ansprechen von Elementen samt Unterstützung einer Vielzahl an CSS-Selektoren und zur Erzeugung von Effekten.

Kernstück der MooTools ist sicherlich die sehr gut implementierte Unterstützung des objektorientierten Ansatzes von Javascript, die den Umgang mit Klassen für JS-Entwickler erheblich erleichtert. Eine Einführung in die Grundlagen der MooTools-API findet sich auf der Projekthomepage.

Folgende Neuerungen fanden in Version 1.2 Einzug:

• breitere Unterstützung erweiterter Selektoren, z.B. CSS 3-Pseudo-Selektoren wie var myElements = $$(‚div:disabled‘); oder verschachtelter Selektoren wie $$(‚div.class1.class2[id=“someid“][name=“somename“]‘);
• vollständige iFrame-Unterstützung
• vereinfachte Anwendung von „generics“ zum Hinzufügen vom prototype-Funktionen an ein Objekt
• konsistenter Class-Konstruktor, der es ermöglicht, die Klasse zu erfragen, von der ein Objekt erzeugt wurde
• eine Vielzahl weiterer kleiner Verbesserungen

Gesondert möchte ich eine weitere Neuerung eingehen, die das Speichern und Verwalten von Elementen betreffen.

Wie MooTools-Entwickler Tom in seinem Blog in englischer Sprache genauer erklärt, wurde es durch Probleme mit dem Internet Explorer notwendig, sich dem Verwalten von Objekten als Elementattribute zu beschäftigen.
Das Ergebnis ist ein Workaround, das jegliche Probleme beseitigt und den Entwicklern dadurch ermöglicht, an Elemente Objekte als Attribut anzuhängen – ohne sich um die Besonderheiten des IE zu kümmern.

Wie das nun konkret ausschaut, soll der nachfolgende, von mir kommentierte Beispielcode zeigen:

var element = $('myElement');
// greift auf Element "myElement" zu
var data = element.retrieve('galleryData', {});
// hängt an ein leeres Objekt mit dem Namen 'galleryData' an 'myElement' an
data.id = 16;/
/ hängt Attribut 'id' an 'galleryDate' an
data.source = '/images/16.jpg';
// setzt Attribut 'source' für 'galleryDate'
data.title = 'Some Title';
// Element 'galleryDate' bekommt 'title'-Attribut

Der Zugriff funktioniert genauso:

$('myElement').retrieve('galleryData');
// Rückgabewert: { id: 16, source: '/images/16.jpg', title: 'Some Title' }
$('myElement').retrieve('galleryData').id;
// Rückgabewert: 16

MooTools 1.2 beta 2 herunterladen

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

Pünktlich zu seinem 2. Geburtstag bringt jQuery mit der Version 1.2.2 ein Update zur Fehlerkorrektur für jQuery 1.2 Im Framework wurden Fehler behoben und Optimierungen vorgenommen.

Hier die wichtigsten Änderungen:

300% schnellere Ausführung von $(DOMElement)-Zugriffen

Es wurde speziell die Nutzung ein DOM Element in der jQuery Funktion zu durchlaufen beschleunigt. Die Ausführungsgeschwindigkeit unterscheidet sich jedoch von Browser zu Browser.

.ready() Überarbeitung

• ready-Ereignis im Internet Explorer spürbar verbessert.
• Alle Browsers warten jetzt bis CSS bereit ist, ebenso wie es bisher bei DOM der Fall war.
• Es ist jetzt möglich das ready-Ereignis über die normale .bind()-Funktion anzusprechen.

.bind(„mouseenter“) / .bind(„mouseleave“)

Die .hover() Funktion wurde in zwei neue Cross-Browser-Ereignisse geteilt: mouseenter und mouseleave. Diese unterscheiden sich von mouseover und mouseout in sofern, dass diese Ereignisse greifen sobald ein Kind-Element „betreten“ und verlassen wird (was gewöhnlich nicht erwünscht ist).

.bind(„mousewheel“)

Brandon Aaron hat ein Plugin geschrieben, basierend auf der neuen Event API, welches die Unterstützung von Mausrad-Ereignissen ermöglicht.

Complex :not()

Obwohl es nicht Teil der CSS 3 Spezifikation ist, wird nach dieser Funktionalität häufig gefragt. Jetzt können komplexe Ausdrücke in :not() Selektoren gemacht werden.

Akzeptieren von Headern

Für normale jQuery Ajax-Operationen wird jetzt ein extra Accept-Header gesendet, um dem Server mitzuteilen nach welche Art von Inhalt wir suchen. Wenn man ein dataType-Argument festlegt, kümmert sich jQuery um alle Header-Einstellungen. Aktuell werden folgende Header für jeden dataType gesendet:

• xml „application/xml, text/xml“
• html „text/html“
• script „text/javascript, application/javascript“
• json „application/json, text/javascript“
• text „text/plain“
• Everything else: „*/*“

Fehlerbehebungen

Einige Funktionalitäten haben eine wichtige Überarbeitung erfahren.

Event API

Es gibt eine neue API für den Umgang mit Ereignissen. Es können eigene Ereignis-Typen erzeugt werden. Es ist möglich, über die einfache Ereignis-Steuerung hinaus zu gehen und ein komplettes Schema für das Hinzufügen, Behandeln und Abbrechen von Ereignissen auf einem Element zu erzeugen.

Hier kannst du die neuste Version herunterladen (minimale Version)

Hier findest du eine Einführung in jQuery

Im letzten Blogpost stellte ich das DHTML Tooltip Script vor. Ich wurde jedoch vor die Aufgabe gestellt, die Tooltip-Texte nicht mehr direkt in den Quelltext abzulegen, sodass sie von Suchmaschinen wie Google nicht ausgelesen werden können. Das bestehende Script wollte ich nicht anrühren, sondern ein eigenes Script (infobox.js) schreiben, welche die gewünschte Funktionalität realisiert.

Im Header der Seite müssen also folgende Dateien eingebunden werden:

<link rel="Stylesheet" type="text/css" href="tooltip.css" media="screen" />
<script language="javascript" type="text/javascript" src="toolTip.js"></script>
<script language="javascript" type="text/javascript" src="infobox.js"></script>

Die Elemente, auf die das Tooltip angewendet werden soll, müssen sich innerhalb eines Elementes mit der ID „boxes“ befinden. Jedes Element, das einen Tooltip anzeigen soll, wird mit genau dem Klassennamen versehen, welches das anzuzeigende Element als ID besitzt.

<div id="boxes">
<a class="t_0"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 1" aus -->
<a class="t_1"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 2" aus -->
</div>

Das Script infobox.js ist wie folgt aufgebaut:

codeToAdd = Array();
codeToAdd[0] = '<div class="tooltipsammlung">';
codeToAdd[1] = '<div class="tooltip" id="t_0"><b>Tooltip 1</b></div>';
codeToAdd[2] = '<div class="tooltip" id="t_1"><b>Tooltip 2</b></div>';
codeToAdd[7] = '</div>';

function bindTooltip() {
	document.getElementsByTagName("body")[0].innerHTML += codeToAdd.join('');

	path = document.getElementById("boxes").getElementsByTagName("a");

	for ( var i = 0; path[i] ; i++ ) {
		if ( path[i].className ) {
			path[i].onmouseover = function() { initTooltip(this.className); };
			path[i].onmouseout = function() { hideTooltip(); };
		}
	}
}

if ( window.addEventListener ) {
	addEventListener( "load", bindTooltip, false );
} else {
	attachEvent( "onload", bindTooltip );
}

Die Funktion bindTooltip() bindet zuerst das Array „codeToAdd“ (also die anzuzeigenden Tooltips) in den <body> der Seite ein. Danach werden alle <a> Elemente innerhalb von „boxes“ ermittelt. Den gefundenen Elementen werden die Javascript Funktionen initTooltip() und hideTooltip() zugewiesen.

Zur Demoseite

Hier die benötigten Dateien:

Hier gibt es die benötigten Dateien:

tooltip.css
infobox.js
toolTip.js

Für Tooltips über HTML Elementen nutze ich gern das DHTML Tooltip Script von Mikko Mensonen. Der Vorteil ist, dass sich innerhalb des Tooltip beliebiger HTML Code befinden darf. Das Script lässt sich außerdem sehr einfach einbinden und anwenden.

Zunächst eine kurze Einführung:

Man fügt zuerst das Script im Seitenheader ein, zusammen mit einem Stylesheet, welches das Tooltip und dessen Inhalt formatiert, sowie die Ausgabe der Tooltip Texte auf der Seite verhindert:

<script src="toolTip.js" language="javascript" type="text/javascript"></script>
<link href="tooltip.css" rel="Stylesheet" type="text/css" media="screen" />

tooltip.css sieht wie folgt aus:

.tooltip {
	position:absolute;
	display:none;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
}
.tooltipMouseover {
	position:absolute;
	display:block;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
	top: -100px;
	left: -500px;
}

Als nächstes werden die Tooltip Element innerhalb von <body> eingebunden:

<div class="tooltipsammlung">
<div class="tooltip" id="t_1"><b>Mein Tooltip</b><p>Dies ist mein Beispiel Tooltip</p></div>
</div>

Es werden Elemente definiert (in unserem Fall ein Bild), die beim onmouseover Event einen Tooltip anzeigen und beim onmouseout Event den Tooltip wieder ausblenden sollen:

<a onmouseout="hideTooltip();" onmouseover="initTooltip('t_1');"><img src="images/qmbox.png" height="128" width="128" /></a>

Zuletzt wird noch diese Zeile vor dem schließenden body-Tag </body> eingebunden:

<div id="tooltipMouseover" class="tooltipMouseover"></div>

Und schon funktioniert das Tooltip!

Hier gibt es die benötigten Dateien:

toolTip.js
tooltip.css

Screenshot:

Nach der Version 0.7 ließ ein Update nicht lange auf sich warten. In der aktuellen Version sind folgende Neuerungen enthalten:

• Kompatibilität für Safari 1.x
• unbedeutende Performance-Steigerung
• es wurden die Javascript-Ereignisse onclick und ondblclick für die Bilder hinzugefügt (der Link befindet sich direkt im longdesc Attribut des Image-Tag)
• verbesserte Bildskalierung, jetzt bleiben alle Bildformate im Haupt-div-Container „imageflow“

ImageFlow runterladen

Einfach auf das folgende Bild klicken, um zu einer von mir erstellten Demo zu gelangen.