Tips zum Umgang mit jQuery

Fertige Komponenten in die eigenen Sites bauen ist das eine. Das andere ist natürlich die Funktionailität selbst zu bauen. Dafür sind detailierte Kenntnisse über das Coding mittels jQuery notwendig. Hier mal ein paar Beispiele zum warm werden..
each statt for oder while

For-Schleifen mit Inkrementor, While-Schleifen mit Abbruch Bediengung. Kein großes Problem, aber oft umständlich. Viel einfacher geht es mit der each oder for-each Schleife. Vor allem in Verbindung mit Arrays. Auch in Java 5 steht das each wieder zur Verfügung. Hier mal ein kleines Beispiel:

1
2
3
4
5
6
7
8

var myArray = ['MooTools','Prototype','jQuery'];
 
$.each(myArray, function(index, item) {
// Mache etwas mit dem Arrayelement
// return false für Abbruch, true für weitermachen
// each wird automatisch verlassen wenn jedes Element
// durchlaufen ist
});

Filter Funktion

Damit lassen sich Elemente aus dem DOM-Baum einfach entfernen. Im Code kann das wie folgt aussehen:

1
2
3
4

$('div').filter(function(){
    return this.childNodes.length > 5; 
    // Gibt einen Boolschen Wert zurück
});

Eventhandling mal anders

Um ein Event an ein Element zu binden ist nicht zwingend die ID des Elements notwendig. Dieser Vorgang lässt sich auch einfach mittels Variable umsetzen.

1
2
3
4
5
6

var myDiv = $('<div>').appendTo('body');
 
// Verwende myDiv um Click Funktion herzustellen
myDiv.bind('click', function(){
    // do something......
});</div>

Logger für Performance Messung

Es gibt für ein Problem immer viele Lösungen. Um rauszufinden welche sich besser eignet stehen mit jQuery Konsolen Befehle zur Verfügung.

1
2
3
4
5
6
7
8
9

console.time('Test1');
   // Programmlogik der ersten Variante..
console.timeEnd('Test1');
 
console.time('Test2');
   // Logik der Zweiten...
console.timeEnd('Test2');
 
// Das Firefox Plugin "Firebug" wird das Ergebnis mitloggen

jQuery Videos

Ich bin heute beim morgentlichen durchforsten meiner lieblinges Blogs und Seiten auf ein Paar schöne Videos zum Thema jQuery gestoßen, die sicher den ein oder anderen hier auch interessieren dürften.

Advanced jQuery with John Resig

An In-Depth Look at jQuery UI with Paul Baukus

Rich Interactivity, Simplified, with jQuery UI with Richard Worth

jQuery on Rails (The Real Ones) with Jonathan Sharp

Mozilla Bespin – webbasierter Code-Editor

Es regt sich was in den Mozilla Labs, dem zu hause für experimentelle Projekte bei Mozilla. Dort stellt Mozilla Bespin vor. Einen freien, in JavaScript geschriebenen, Code-Editor welcher im Browser bedient werden kann.
Das schöne an Bespin ist, dass jeder Anwender den Editor weitestgehend seinen Bedürfnissen anpassen kann.

Die Köpfe hinter dem Projekt sind, unter anderem, die beiden Ajaxian.com Gründer Ben Galbraith und Dion Almaer.
Mit der Entwicklung von Bespin geht Mozilla den nächsten logischen Schritt in Richtung SaaS (Software as a Service) und macht somit eine Entwicklungsumgebung
für derartige Webandwendungen online verfügbar.
Viele Vorteile des Saas-Modells sind natürlich auch für Webentwickler interessant. Schneller Zugriff auf alle Projekte von Überall, problemlose Zusammenarbeit mit anderen Entwicklern und vieles mehr.

Bespin liegt momentan, als früher experimenteller Prototyp,  in der Version 0.1 vor und ist nur ein Anfang. Ziel von Bespin soll es sein ein offenes, erweiterbares und webbasiertes Framework zum erstellen von Code zu werden, welches die Produktivität von Entwicklern erhöht.

Die wesentlichen Features im Überblick:

• Echtzeit-Collaboration:
  Live-Coding zusammen mit Kollegen soll einfach und unkompliziert möglich sein.
• Integrierte Kommandozeile:
  Tools wie vi oder Emacs haben es vorgemacht und auch Bespin will diese Stärke nutzen.
• Erweiterbar und Self-Hosted:
  Sowohl das Interface als auch die Fähigkeiten sollen über einfache Befehle (wie bei Ubiquity) oder über die Plug-In API erweiterbar sein.
• Schnelligkeit:
  Auch die Bearbeitung von sehr großen Dateien soll sehr schnell werden.
• Zugriff von überall:
  Die Entwickler sollen von jedem Ort und jedem Gerät über einen modernen Browser Zugriff erhalten.
• Einfache Benutzung:
  Die Nutzer sollen sich schnell zurechtfinden und mit dem Coden beginnen können.

Weiterführende Links zum Thema:
http://labs.mozilla.com/2009/02/introducing-bespin/
https://bespin.mozilla.com/

Cufón – Eine Javascript alternative zu sIFR

Wer sich mit Webdesign beschäftigt stößt zwangsläufig immer wieder auf das Problem der Standard Webfonts.
Gerne würde so mancher Kunde eine Schrift nutzen die im Web von Haus aus nicht zur Verfügung steht. Will man jedoch, den Suchmaschinen zu liebe, nicht Flash oder Bilder nutzen gibt es die Möglichkeit das mittlerweile recht bekannte und weitverbreitete sIFR zu nutzen. Der Nachteil an sIFR war bisher das es den FlashPlayer benötigt bzw. sonst den Font ohne Modifikation darstellt.

Mit cufón kommt jetzt eine rein auf Javascript basierende Lösung für die Entwicklergemeinde. Und diese unterscheidet sich zu den bisherigen.
Bei cufón muss zuerst ein Font auf einen web-basierten Generator geladen werden, dieser wandelt den Font schließlich in SVG um und erstellt automatisch das VML.

Ist dieser Schritt einmalig vollzogen, muss man nur noch das generierte .js-File in seine Seite einbinden.

Am Rande noch ein kleiner Überblick:

• sIFR lite
• FLIR
• typface.js
• cufón

MooTools & jQuery – Videos

Ich bin heute auf zwei nette Videos zu MooTools und jQuery gestoßen.
Die Videos stammen aus dem Hause Adobe.
In den Videos vermitteln Aaron Newton und John Resig einen guten Überblick über die beiden JS-Frameworks.

MooTools – Ein Überblick mit Aaron Newton

jQuery – Ein Überblick mit John Resig

Einführung zu Mootools

Das MooTools Framework existiert momentan in der Version 1.2.
Für Leute, die noch nichts damit zu tun hatten ist vorsicht angesagt, da sich viele Komponenten noch in der Version 1.11 befinden und die Klasse Fx.Style daraus nicht mehr exisitiert. Sie wurde durch Tween und Morph ersetzt. Ein umschreiben ist zwar möglich aber sehr zeitaufwendig und nur fortgeschrittenen JS-Prorammierern zu empfehlen.

Allgemein lässt sich zum Framework sagen, dass es damit auf relativ einfache Weise möglich ist moderne, flashähnliche Animationen zu bauen, das CSS zu ändern oder auch Content dynamisch via AJAX nachzuladen. Basis hiervon ist die Manipulation von DOM-Elementen über Selektoren. Man spricht einzelne Elemente im MooTools-Syntax an (quasi äquivalent zu document.getElementById) und nutzt die im Framework gegeben Funktionen um die Eigenschaften zu ändern.

MooTools ist eines der neueren Javascript-Frameworks, besitzt aber schon eine große Entwicklergemeinde und eine Menge von fertigen Komponenten zum Download.

Interessante Links für Einsteiger:

• Die offizielle MooTools Website
• Ein inoffizielles aber gut besuchtes MooTools Forum