9. JQuery

Die Client-Seite ist bei modernen Web-Anwendungen mindestens ebenso wichtig wie der Server. Letztlich geht es nicht nur um eine hervorragende Benutzererfahrung, sondern auch um eine effektive Steuerung der erforderlichen Datentransfers zwischen Server und Client. Dies kommt erheblich der Performance des Gesamtsystems zugute.

Ebenso wichtig ist der Client heute aus Sicht der Skalierbarkeit. Wenn du eine Plattform planst, die Millionen von Nutzern adressiert, dann ist es eben ein wesentlicher Unterschied, ob ein Teil des Codes auf Millionen Rechnern der Benutzer ausgeführt wird oder millionenfach auf einem zentralen Server. Die extreme Distribution der Anwendung spart Bandbreite, Rechenleistung und nutzt letzlich allen. Du kannst heute gut davon ausgehen, dass die für Web-Anwendungen benutzten Geräte, also PC, Mac oder Smartphone hinreichend leistungsfähig sind.

Es gibt viele Frameworks, die clientseitig zum Einsatz kommen können. Hier sollen die wichtigstens vorgestellt werden, um die ersten Schritte in der Client-Welt gehen zu können.

9.1 Einführung

Die bekannteste Bibliothek ist jQuery. jQuery wurde bereits 2006 durch John Resig entworfen, weil er es leid war ständig um die Unterschiede der verschiedenen Implementierungen im Browser herum zu programmieren. jQuery abstrahiert das Objektmodell des Browsers (DOM – document object model) und nivelliert die spezifischen Eigenheiten weitgehend.

Entsprechend gibt es auch browserspezifische Versionen. Version 2 unterstützt auch alte Internet Explorer der Version 7 bis 9, während Version 3 dies nicht mehr tut. Der Vorteil der fehlenden Unterstützung liegt in der Verringerung der Größe der Bibliothek.

jQuery ist nur eine Sammlung wertvoller Funktionen, kein vollständiges Rahmenwerk zum Programmieren. Durch ein cleveres Plug-In-Konzept lassen sich weitere Funktionen leicht einbinden. Auf diese Weise entstand auch jQuery-UI – eine Bibliothek mit Anzeigeelementen. Das bekannte CSS-Rahmenwerk Bootstrap basiert auf jQuery und jQuery-Plug-Ins. Wenn du in Erwägung ziehst, Bootstrap zu benutzen, solltest du dich intensiv mit jQuery auseinandersetzen.

9.1.1 Einsatzmöglichkeiten

Eine der wichtigsten Funktionen ist, die Möglichkeit, Elemente auf der Website (DOM) auszuwählen, um dann später damit Aktionen auszuführen. Dazu gehört das Aussehen zu ändern, Animationen zu starten oder auf Benutzerereignisse zu reagieren.

Was in JavaScript umständlich und unsicher über getElementById und getElementsBy… gemacht wurde, geht mit jQuery problemlos über $("#id") und $(".class"). Beim Auswählen der Elemente bist du sehr nahe an der Schreibweise von CSS. Da CSS ohnehin benötigt wird, hält sich der Lernaufwand in Grenzen.

Die Funktionen umfassen also:

9.2 jQuery einbinden

Es gibt zwei Arten, um jQuery einzubinden. Du kannst alle benötigten Dateien von http://jquery.com herunterladen und auf dem eigenen Server bereitstellen oder einfach einen Link auf ein CDN (Content Delivery Network) setzen und dann von dort nutzen.

Lokal einzubinden ist lediglich eine Datei (ersetze den Platzhalter pfad-zu-jquery):

1 <script src="pfad-zu-jquery/jquery.js"></script>

Oder du kannst die aktuellste Version von jquery.com nutzen:

1 <script src="http://code.jquery.com/jquery-latest.js"></script>

jQuery kann auch, beispielsweise, über Googles CDN eingebunden werden.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque\
ry.min.js"></script>

9.3 jQuery nutzen

Nach dem Einbinden der Bibliothek wird der passende Code geschrieben. Dabei handelt es sich normalerweise um JavaScript. Es ist möglich, jQuery mit TypeScript zu schreiben, setzt aber eine etwas andere Herangehensweise voraus. Dazu später mehr.

Statt den Code einfach in diese Seite zu packen, solltest du immer das folgende Standardvorgehen wählen:

1 <script>
2 $(document).ready(function(){
3     /* Hier der jQuery-Code */
4 });
5 </script>

Es gibt auch die Kurzschreibweise mit dem Dollarzeichen:

1 <script>
2 $(function(){
3     /* Hier der jQuery-Code */
4 });
5 </script>

Dies stellt sicher, dass der Code erst ausgeführt wurde, wenn der Browser auf dem Objekt document das Ereignis ready ausgeführt hat. Das ist der Fall, wenn alle Elemente des DOM geladen wurden und im Speicher des Computers zur Bearbeitung bereit stehen.

Das Zeichen $ ist eine Kurzschreibweise für jQuery. Es handelt sich technisch um einen normalen Namen. Das $-Zeichen hat in JavaScript keine spezielle Bedeutung und jQuery hat es sich quasi reserviert. Achte darauf, dass dies nicht zwingend der Fall sein muss – theoretisch könnten sich andere Bibliotheken diesen Namen auch reservieren.

Der komplette Quellcode in HTML5 sieht dann für die Client-Seite folgendermaßen aus:

 1 <!DOCTYPE html>
 2 <html lang="de">
 3 <head>
 4 <title>jQuery Beispiel-Code</title>
 5 <script src="http://code.jquery.com/jquery-latest.js"></script>
 6 <script>
 7 $(document).ready(function(){
 8     /* Hier der jQuery-Code */
 9     alert('Hallo Welt');
10 });
11 </script>
12 </head>
13 <body>
14 <h1>jQuery Beispiel-Code</h1>
15 </body>
16 </html>

Das ist jetzt noch nicht wirklich mehr als mit bisherigem JavaScript auch möglich ist. Aber das ist das Standardvorgehen, um jQuery einzubinden und Code einzugeben. Der JavaScript-Teil wird in der Praxis meist in eine weitere Datei ausgelagert. Dazu speicherst du folgenden Teil in die Datei scripts.js (am einfachsten in den selben Ordner in dem die HTML-Datei liegt).

1 $(document).ready(function(){
2     /* Hier der jQuery-Code */
3     alert('Hallo Welt');
4 });

Achte darauf, dass in einer externen Datei keine <script>-Tags benutzt werden – es ist bereits JavaScript und dies muss nicht noch angezeigt werden. Achte auch darauf, das die <script>-Tags niemals verkürzt werden dürfen: <script src="" /> wird nicht funktionieren.

Im <head>-Bereich der HTML-Datei muss nun nur noch die Verknüpfung erfolgen:

 1 <!DOCTYPE html>
 2 <html lang="de">
 3 <head>
 4   <title>jQuery Beispiel-Code</title>
 5   <script src="http://code.jquery.com/jquery-latest.js"></script>
 6   <script src="scripts.js"></script>
 7 </head>
 8 <body>
 9 <h1>jQuery Beispiel-Code</h1>
10 </body>
11 </html>

Der Browser kan nun auch den eigenene Code im Cache ablegen und damit die Seite beim erneuten Aufruf schneller laden.

9.3.1 Auswählen von Elementen

Bevor du mit irgendwelchen Elementen etwas anstellen kannst, musst du das gewünschte Element erst auswählen. Die Auswahl machst du über den Typ-Selektor.

Listing: jQuery-Code (script.js)
1 $(function(){
2     $('#output).text("Hallo jQuery");
3 });
Listing: HTML-Code (nur body)
1 <body>
2 
3 <h1>jQuery Beispiel-Code</h1>
4 
5 <div id="output"></div>
6 
7 </body>

Hier wird ein Element der Seite, <div>, durch das Attribut id adressierbar gemacht. Der Identifizierer lautet output, was vollkommen willkürlich ist. in jQuery wird dann der Selektor-Befehl $('') benutzt, um darauf zuzugreifen. Analog zur Schreibweise in CSS wird #output zur Adressierung benutzt. Hier eine kurze Zusammenfassung typischer Adressierungsverfahren:

Die üblichen Verknüpfungen in CSS mit >, ~ usw. funktionieren auch.

9.3.2 Ändern von Inhalten

Inhalte lassen sich auslesen und ändern. Das vorherige Beispiel hat das bereits benutzt, indem mit text der Inhalt des <div>-Tags verändert wurde.

1 var heading = $('h1').html();
2 var para = $('p').html();
3 $('h1').html(para);
4 $('p').html(heading);

Dieses Skript liest den Text aus einem Element mit dem Namen <h1> und schreibt sie in ein Element mit dem Namen <p>.

Nun können diese Elemente aber mehrfach vorkommen. Tatsächlich arbeitet jQuery intern immer mit Arrays, um eine Mehrfachauswahl nutzen zu können. Das ist nicht immer sinnvoll, weshalb eine möglichst genaue und sorgfältige Adressierung wichtig ist. Werden aber wirklich mehrere Elemente adressiert, ist dieses Verfahren äußerst leistungsfähig.

9.3.3 HTML-Klassen hinzufügen und entfernen

Viele Effekte und Aufgaben, die sich mit jQuery verwirklichen lassen, machen es nötig, eine CSS-Klasse zu einem Element hinzuzufügen oder zu entfernen. Mit jQuery geht das einfach. Lege für das folgende Beispiel eine einfache CSS-Regel an, entweder im HTML-Kopf der Seite oder direkt im globalen CSS-Skript deines Projekts:

a.test { font-weight: bold; }

Diese Regel sorgt dafür, dass alle Hyperlinks Fett ausgezeichnet werden.

Füge nun folgenden Code in die Datei script.js ein:

$("a").addClass("test");

Alle Hyperlinks werden nun Fett dargestellt. Um die Klasse mit jQuery wieder zu entfernen, verwende den folgenden Code:

$("a").removeClass("test");

9.3.4 Effekte

jQuery bietet eine Reihe von praktischen Effekten, die mit dem Aufruf einer Funktion genutzt werden können. Probiere beispielsweise für die Hyperlinks folgendes aus:

$("a").click(function(event){
  event.preventDefault();
  $(this).hide("slow");
});

Wenn der Benutzer nun auf einen Link klickt, wird dieser langsam verschwinden. Nicht besonders sinnvoll, aber durchaus effektvoll. jQuery ist übrigens durch diese Effekte bekannt geworden – 2006 konnte man damit noch beeindrucken.

9.4 AJAX mit jQuery

jQuery verfügt über eine einfache Technik zum Abrufen von Daten vom Server. Dieses Verfahren wird als AJAX bezeichnet.

Das ist eine Funktion, die jeder Browser beherrscht. Historisch bedingt unterscheiden sich aber die Programmierschnittstellen der einzelnen Browser. Damit es einfacher zu benutzen ist, abstrahiert jQuery dies Funktion und stellt eine einheitliche Schnittstelle bereit, unabhängig davon, welcher Browser in welcher Version benutzt wird.

Da AJAX HTTP nutzt, musst du Angaben haben, die HTTP benötigt:

jQuery kennt zwei Arten des Aufrufes. Einmal generisch mit der Funktion ajax und dann mit einer konkreten Vorbelegung der HTTP-Methode mit den Funktionen get, post, put und delete. Ein typischer Aufruf sieht folgendermaßen aus:

$.ajax({
  type: "GET",
  url: "/path/to/service",
  data: {},
  success: function(data){
    // data verarbeiten
  }
});

Dabei gibt die Eigenschaft type des Konfigurationsobjekts die HTTP-Methode an. Die url kann, wenn das Skript vom selben Server stammt wie der angerufene Dienst, relativ sein. Ansonsten wird die vollständige Adresse mit http oder https benutzt. Die Daten sind optional und werden nur angegeben, wenn der Server dies erfordert. Die Antwort wird über eine Rückruffunktion erwartet, da es sich immer um einen asynchronen Aufruf handelt. Im Beispiel wird nur der Erfolgsfall mit success verarbeitet. Eine Fehlersituation wird nicht betrachtet (silent fail). Der Parameter data enthält die Daten, die der Server zurücksendet.

9.5 Zusammenfassung

Dieser Abschnitt zeigte eine kurze Übersicht über jQuery. Viel mehr ist in der offiziellen Dokumentation und auf endlos vielen Webseiten zu finden. In der Praxis hat jQuery heute (2018) nur noch eine untergeordnete Bedeutung, denn es wird mehr mit den bereits erwähnten Rahmenwerken wie Angular oder komplexeren Bibliotheken wie React programmiert. Dennoch gehört jQuery zum Grundlagenwissen, damit einige Effekte und Probleme in den erwähnten Rahmenwerken überhaupt erst verständlich werden.