jQuery und jQueryUI08 Aug
Bei der Entwicklung an einem aktuellen Projekt stieß ich mit serverseitiger Programmierung via PHP an die Grenzen, als es darum ging, eine Drag&Drop – fähige Plantafel zur Auftragseinteilung zu erstellen. Also musste ich wohl oder übel in den sauren Apfel beißen und mich näher mit Javascript befassen, das ich, warum auch immer, bisher stets gemieden hatte (vielleicht, weil ich mich selbst ständig über Seiten aufrege, bei denen ich nichtmal content präsentiert bekomme, ohne NoScript zu deaktivieren..) .
Jedenfalls begann ich eine immer komplexer werdende Drag&Drop-Funktionalität in JavaScript zu implementieren. Das ging bis zu einem gewissen Grad gut, aber irgendwann verlor ich komplett den Überblick über mein Projekt. Julian machte mich in diesem Zusammenhang dann auf das Javascript-Framework jQuery aufmerksam, von dem ich mangels Interesse an JavaScript vorher noch nie etwas gehört hatte.
Von jQuery war ich sofort begeistert. Eine sauber dokumentierte API, hunderte Plugins verfügbar und das alles in einem gerade mal 56k großen Script. Da draußen im Netz gibt es massig Tutorials und Anwendungsbeispiele für jQuery. Dabei stammt die beste und umfangreichste Hilfe vom jQuery Projekt selbst. Wozu also “yet another” jQuery – Tutorial?
Nun, ich will hier gar keine “Referenz” oder sowas aufbauen, ich möchte nur einfach zeigen, inwiefern jQuery und das dafür entwickelte UserInterface jQueryUI auch kleinste Projekte enorm vereinfachen und vor allem die Optik und Usability gewaltig steigern können. Wer ein “richtiges” Tutorial für jQuery oder eine Referenz für die API sucht, der findet direkt auf den Projektseiten Hilfe:
Grundlagen
Die Einbindung von jQuery gestaltet sich recht einfach. Einfach von der Projektseite die JavaScript Datei herunterladen: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js (die ‘min’-Version beinhaltet genau die gleichen Funktionalitäten wie die ‘maxi’-Version und lässt sich genau wie diese ansprechen, braucht aber dank eingesparter Kommentare, verkürzter Syntax und Verzicht auf Newlines bzw Einrückungen nur einen Bruchteil an Platz und ist somit auch über langsame Internetzugänge sehr schnell geladen). Die .js Datei landet dann in enem Unterordner unseres Projekts (bei mir zB. “./scripts”) und wird dann im HTML-Body der Seite eingebunden mit:
<script src="./scripts/jquery-1.3.2.min.js" type="text/javascript"></script>Nun kann man zum “‘rumprobieren” innerhalb eines
<script type="text/javascript"> <!-- #js-code# --> </script>
seine JavaScript-Operationen und jQuery-Blöcke einbauen. Für produktive Anwendungen würde ich aber auf jeen Fall empfehlen, dern JS-Code aus dem Markup herauszunehmen und von einer externen Datei nachzuladen.
Als erstes fällt bei der Arbeit mit jQuery dieses Muster auf:
$(document).ready(function() { // Anweisungen });
Nanu… ein $ in javascript?? Was hat es damit auf sich? ganz einfach: Das $ steht für das jQuery-Objekt und wird in der jQuery-Bibliothek deklariert. Über dieses Objekt kann man auf sämtliche jQuery Funktionen und Erweiterungen zugreifen.
So .. und wozu jetzt der ganze Spuk? Wie der Name schon sagt, ist jQuery eine sehr mächtige und flexible Bibliothek, die das selektieren von Elementen im DOM (Document Object Model) einer Seite enorm erleichtert. Wer sich schon mal ein bisschen mit javascript befasst hat, der wird vielleicht schon mit den Funktionen gekämpft haben, die Javascript zum selektieren von Objekten verwendet. document.getElementById() und Kollegen lassen grüßen.
Um zu verstehen, wie die jQuery-Syntax funktioniert, muss man vielleicht zunächst einmal betrachten, welches Ziel jQuery verfolgt. Wenn man mit Javascript inhaltliche Elemente einer Seite umformatiert, dann muss man notgedrungen oft Scriptcode ins (x)HTML-Markup mit einbauen, der dort aber rein semantisch nichts verloren hat. jQuery ist, wie CSS für Formatierungsaufgaben, dafür gedacht, den Scriptcode komplett vom Markup zu trennen. So wie man mit css ein sauberes Markup auf verschiedenste Weise darstellen kann ohne es in seiner logischen Struktur verändern zu müssen, kann jQuery quasi “von außen” auf das Markup zugreifen, um ihm interaktive Features hinzuzufügen.
Genau wie CSS muss jQuery dafür aber gezielt bestimmte Elemente im DOM ansprechen können. Und das auch noch möglichst flexibel. Die Entwickler von jQuery haben sich dabei für eine Methode entschieden, die der Syntax von CSS sehr ähnlich ist. So lässt sich mit vorhandenen Kenntnissen und Erfahrung im Umgang mit CSS auch sehr schnell der Einsteg in jQuery meistern, ohne viel Ahnung von Javascript haben zu müssen.
Betrachten wir praktisches ein Beispiel:
$(document).ready(function() { $('#navi ul li a').click(function() { //machwas }); });
In Zeile eins benutzen wir das jQuery-Objekt ‘$’ dazu, uns ein neues jQuery-Objekt zurückgeben zu lassen, das sich auf das Javascript-DOM-Element ‘document’ bezieht. Dieses jQuery-Objekt hat eine Funktion ‘ready()’, die die als Parameter übergebene funktion ausführt, sobald der Browser das gesamte DOM geladen hat. Innerhalb des Anweisungsblocks dieser Funktion wiederum beziehen wir uns mit Hilfe des ‘$’-Objekts wieder auf ein Objekt, bzw eine Menge an Objekten, nämlich genau die DOM-Elemente, auf die der jQuery-Selector “#navi ul li a” zutrifft. Hier sieht man auch schon die Ähnlichkeit mit CSS: Der übergebene String weißt jQuery an, innerhalb aller Elemente mit der id ‘navi’ (in gutem Markup genau ein element) nach Elementen vom Typ ‘a’ zu suchen, die unterhalb eines ‘li’ in einem ‘ul’ liegen. Auf Deutsch: Eine Liste mit allen Links innerhalb eines Navigationsmenüs. mit ‘.click()’ rufen wir nun für jedes gefundene Element die Methode click auf, die Als ersten parameter eine Funktion erwartet, die beim Klick auf das Element ausgeführt werden soll. Hier könnte man jetzt z.B. innerhalb des Anweisungsblocks einen AJAX-Request an den Server machen, um Details zu Menüeinträgen zu bekommen und aufpoppen zu lassen.
Sehr schön kann man mit jQuery auch CSS-Eigenschaften manipulieren. Dafür übergibt man der Methode ‘css()’ des jQuery-Objekts entweder ein Parameterpaar aus CSS-Eigenschaft und Wert oder eine Liste an Parametern und Werten:
$('.meineKlasse').css('width', '400px'); //oder $('.meineKlasse').css({ marginTop : '20px', marginLeft: '15px', borderBottom: '1px solid #dfdfdf' });
Wenn man ein “Frischling” in Sachen Javascript ist und sich über diverse Zicken der Skriptsprache und deren fehlerhaften Interpretation in diversen Browsern (muss ich Namen nennen?? 
) ärgert, dann bewahrt einen jQuery vor so manchen schlimmen Stunden der Fehlersuche. Die vielen (übrigens sehr gut dokumentierten) Funktionen und unzählige sog. Plugins machen die Arbeit mit Javascript zum Kinderspiel.
Da ich momentan sehr viel zu tun habe, kann ich diesen Artikel jetzt doch nicht so weit ausführen wie ursprünglich geplant. Daher splitte ich das Thema ainfach ein bisschen auf und veröffentliche von Zeit zu Zeit weitere interessante Aspekte von jQuery und evtl auch einige konkrete Anwendungsbeispiele. Folgendes werde ich dabei mit Sicherheit noch anschneiden:
- erweiterte Selektoren
- jQueryUi — die jQuery-”GUI”
- jQuery und AJAX — einfacher geht’s nicht mehr
- eigene Plugins für jQuery schreiben
- (Anwendungsbeispiel “Kalender”) -> hängt ganz davon ab wie viel Zeit ich hab
Wenn mir noch weitere Einfälle kommen, dann wird die Liste natürlich laufend länger. JQuery ist ein sehr spannendes Thema und die Arbeit damit macht richtig Spaß.
Ich freue mich auf eure Kommentare!
Gruß Kristian
Oh man … ich habe das zwar auch schon angewandt … aber das war nur ein fertiger script …
klingt aber alles sehr interessant … meine traumziele bewegen sich irgendwo hier:
http://daswebdesignblog.de/25-beispiele-fuer-absolut-cooles-javascript/1385.html
so als kleine inspiration und vielleicht ein gegenargument gegen deinen javascript “hass”
[...] ich in meinem Artikel jQuery und jQueryUI ja bereits auf das grundlegende Design der Javascriptbibliothek eingegangen bin, möchte ich mich [...]