Die freie JavaScript Bibliothek jQuery

Photo: Christian Ditaputratama https://www.flickr.com/photos/ditatompel/5270378247/ (CC BY-SA 2.0)

Photo: Christian Ditaputratama https://www.flickr.com/photos/ditatompel/5270378247/ (CC BY-SA 2.0)

jQuery ist die am meisten verwendete JavaScript Bibliothek. Sie steht unter einer Open Source Lizenz und stellt browserübergreifende Funktionen bereit, die Programmierern Zeit und Nerven sparen. Mit wenigen Zeilen jQuery Code lassen sich eine Vielzahl von Funktionen umsetzen und teilweise hunderte, selbst geschriebener JavaScript Code ersetzen.

Alle grossen Content Management Systeme bringen die jQuery Bibliothek in ihren Core Paketen mit.

  • WordPress 4.5.2 in der Version 1.12.3,
  • Joomla 3.5.1 in der Version 1.11.3,
  • Drupal 8 in der Version 2.2.x.

Die beiden Versionsstränge jQuery 1.x und jQuery 2.x besitzen seit der Version 1.9 eine kompatible API. Die Version 1.x unterstützt den Internet Explorer 8 und wird daher immer noch gepflegt. Der Code der Version 2.x wurde „aufgeräumt“, dafür entfiel die Unterstützung für den Microsoft Internet Explorer 8. Im WordPress Paket befindet sich eine fast aktuelle Version des 1.x Zweigs, Joomla ist ein wenig hinterher. Drupal 8 setzt dagegen bereits auf die Version 2.x.

Vor ein paar Tagen ist nun die Version jQuery 3.0 erschienen. Im Blogpost jQuery 3.0 Final Released! werden die Neuigkeiten erklärt. Für Gelegenheitsprogrammierer teilweise schwer verständlich, geht es in erster Linie um Optimierung und Standardisierung. Das bezieht sich einerseits auf den alten 1.x Code, der viel Rücksicht auf Internet Explorer 6-8 nimmt, andererseits aber auch auf den 2.x Code, der nun wegen einiger Änderungen nicht mehr 100% kompatibel ist. Daher auch der Major Versionssprung auf 3.x.
Das Update einer Anwendung von Version 2.x auf 3.x soll jedoch einfach möglich sein.

Da die Neuerungen doch recht abstrakt sind, möchte ich eine mal etwas näher erläutern um das ganze jQuery Prinzip (write less, do more) besser zu verstehen.

jQuery.Deferred ist jetzt Promises/A+ und ES 2015 kompatibel

Ein wichtiges Feature in der Version 3.0 ist die Kompatibilität zu Promises/A+ und ES2015-Promises.

Ein Promise (deutsch: Versprechen) ist zunächst mal eine Programmieridee und hat mit asynchroner Programmierung zu tun. Es geht dabei um den vermutlichen Rückgabewert einer Operation. Man verspricht, dass ein bestimmter Wert kommen wird und das Prinzip ist denkbar einfach:

  1. Ein Promise-Objekt wird erzeugt
  2. Der asynchroner Programmteil wird aufgerufen
  3. Das Promise wird gehalten oder abgelehnt
  4. Man reagiert auf Erfolg oder Fehlschlag

Es gibt nun historisch zwei Methoden der Implementierung von Promises.

ES2015 Promises

Promises sind ein Feature aus ECMAScript (ECMA 262) in der Version 6 und nicht mit allen Browsern kompatibel. Die Version 6 wird ES2015 genannt, weil sie 2015 verabschiedet wurde. ECMAScript selbst ist der standardisierte Sprachkern von JavaScript. ECMA ist eine private, internationale Normungsorganisation mit Sitz in Genf, die früher so etwas wie Standards für Floppy Disk Laufwerke beschrieben hat. Seit 1994 heisst die Organisation ECMA International und hat unter anderem auch C#, .NET, U3D und Office Open XML standardisiert.

Promises/A+

Promises/A+ dagegen ist ein offener Standard und war der Vorläufer für die Implementierung von Promises in ES6. Promises/A+ konnten als Zusatzbibliothek zu ES5.1 hinzugefügt werden und unterstützen mehr Browser als ES2015.

jQuery 3.0 Promises

jQuery 3.0 bietet nun eine einheitliche Inplementierung der beiden Varianten an.
Es geht dabei um jQuery.Deferred Objekte. Als Programmierer muss man sich keine Gedanken um die verschiedenen Standards machen, sondern kann die Idee dahinter mit Hilfe von jQuery einfach nutzen!

Slim Build

Heutzutage spielt die Größe einer Bibliothek eine entscheidende Rolle. Mit der Version 3.0 gibt es jQuery nun komplett als 30 Kilobyte große Datei und es gibt einen Slim build, der auf verschiedene Funktionen verzichtet, als 23,6 Kilobyte großes Paket. Der Unterschied sieht erstmal nicht so groß aus, reduziert Ladezeiten aber erheblich.

Aufbauend auf jQuery gibt es jQuery UI und jQuery mobile, jQuery UI bietet viele Widgets, Effekte und Interaktionen, jQuery mobile hilft bei der Erstellung von responsiven Websites, die auf Smartphones, Tablets und Desktop Computer angezeigt werden sollen.

Und jQuery soll einfach sein?

Auch wenn der Artikel bisher etwas theoretisch daherkommt, so möchte ich nochmal betonen, dass jQuery das Programmiererleben vereinfacht und nicht verkompliziert ;). Vielleicht bist du ja neugierig geworden, was man mit jQuery alles machen kann und vor allem wie man es macht. Immerhin gibt es das Projekt seit 10 Jahren und es vereinfacht das Programmierleben wirklich. Daher hier ein paar Beispiele.

Alle Beispiele zeigen den Quellcode in einem Fenster und die Ausgabe in einem anderen Fenster. Du kannst den Code verändern und direkt sehen, was passiert.

w3schools - Tryit Editor
w3schools – Tryit Editor

Wenn du den Links folgst, siehst du auch gleich den Quellcode dazu:

Um so etwas lokal auf deinem Computer auszuprobieren, musst du nur den Quellcode als HTML Seite speichern und über einen Browser aufrufen. Eine deutschsprachige, ausführliche Einführung findest du hier.

Fazit

Auch wenn du nicht täglich mit JavaScript arbeitest, so hilft es doch ungemein ein paar Gehversuche mit jQuery zu unternehmen um Zusammenhänge besser verstehen zu können.

Links

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Kommentar verfassen