JavaScript, jQuery und AngularJS im Vergleich

Mit Javascript, jQuery und AngularJS kann «Dynamik» in eine Website gebracht werden. Worin genau die Unterschiede liegen, erklärt Alex Kereszturi in seinem Beitrag.

AutorAlex Kereszturi
Datum22.04.2016
Lesezeit6 Minuten

Für Einsteiger habe ich in einem vorangegangenen Blogbeitrag erklärt, was im Grossen und Ganzen die Unterschiede zwischen reinem JavaScript und jQuery sind. In diesem Beitrag möchte ich gerne für die etwas versierteren Leser JavaScript, jQuery und AngularJS mittels eines kleinen Beispiels vergleichen.

Die weniger geübten Leserinnen und Leser lade ich gerne ein, sich von der Fülle an technischen Begriffen verzaubern zu lassen und nichtsdestotrotz das eine oder andere aus dem Beitrag mitzunehmen.

Die Aufgabenstellung

Auf einer HTML-Seite befinden sich ein DIV-Tag, ein SPAN-Tag und ein Textfeld (INPUT). Der Inhalt des DIV-Tags soll immer dem Inhalt des Textfelds entprechen. Der Inhalt des SPAN-Tags zeigt die Anzahl der im Textfeld eingegebenen Zeichen.

Vorarbeiten: der HTML-Code

Die Anforderungen bedingen mindestens die drei erwähnten Tags, die ich für dieses Beispiel folgendermassen umsetze und ergänze:

html-ausgangslage-digicomp

Lösung 1: reines JavaScript

Ich würde als Auslöser für meine Berechnungen und Veränderungen im HTML-Code gerne den OnKeyUp-Event des Textfelds verwenden – also den Zeitpunkt, wenn der User gerade etwas ins Textfeld eingibt und eine Taste auf der Tastatur losgelassen wird. Dazu schnappe ich mir aus dem Document Object Model der Seite das Input-Feld und setze als Event-Handler eine anonyme Funktion. Wer jetzt nur «Bahnhof» versteht, darf trotzdem gerne weiterlesen. Auf den Zeilen, die mit «//» beginnen, habe ich versucht, Kommentare für Nicht-Entwickler zu schreiben, damit man halbwegs versteht, was da als Code geschrieben wird:

java-script-code-digicomp-01
Vereinfacht (also für versierte JavaScript-Menschen) sieht das so aus:

java-script-code-digicomp-02
Jetzt fehlt eigentlich nur noch «etwas Gescheites», nämlich das, was effektiv passieren soll:

java-script-code-digicomp-03
Das komplette JavaScript sieht somit folgendermassen aus:

java-script-code-digicomp-04

Zwischenbericht: was alles zu tun ist

Fassen wir zusammen, was alles getan wurde, damit wir nachher die Lösungen in jQuery und AngularJS besser mit dieser ersten Lösung vergleichen können:

  • > Warten, bis das Fenster bzw. das Dokument vollständig geladen ist
  • > Das INPUT-Feld schnappen
  • > Einen Event-Handler auf das INPUT-Feld setzen
  • > Das DIV-Element schnappen und dessen Inhalt ändern
  • > Das SPAN-Element schnappen und dessen Inhalt ändern

Hier das Resultat mit JavaScript

Lösung 2: jQuery – weniger (Code) ist mehr

Erst einmal stellen wir sicher, dass jQuery eingebunden ist:

jquery-script-code-eingebunden-digicomp
Danach können wir den Code wie folgt vereinfachen:

jquery-script-code-digicomp

Hier das Resultat mit JQuery

Was genau ändert sich?

vergleich-javascript-jquery
Zum Vergrössern anklicken

Wir sehen, dass der Vorteil von jQuery insbesondere beim Selektieren von Elementen innerhalb des Document Object Models bemerkbar ist. Der Slogan von jQuery «write less, do more» zeigt sich hier sehr schön. Was ich aber immer noch zu tun habe, ist das Umsetzen der Logik: Wann passiert was, wodurch ausgelöst.

Zwischenbemerkung für Anfänger oder Laien:

Wenn Sie jetzt vor lauter «impliziter Iteration» und «Method-Chaining» das Gefühl haben, diesen Blog-Beitrag verlassen zu müssen, schreiben Sie doch vorher noch die nicht verstandenen Begriffe in einen Kommentar unten. Wer weiss, vielleicht liefert das guten Stoff für einen nächsten Beitrag. Danke!

Lösung 3: AngularJS – alles schon funktionsbereit

Der Lösungsansatz mit AngularJS ist denkbar einfach, wenn AngularJS eingebunden und initialisiert ist. Dazu binden wir AngularJS in die HTML-Seite ein:

angularjs-script-code-eingebunden

Und wir ergänzen den HTML-Tag BODY um das Attribut NG-APP, damit AngularJS auf dieser Seite auch initialisiert wird:

angularjs-script-code-ng-app

Danach brauchen wir tatsächlich keine einzige Zeile JavaScript zu schreiben, sondern lediglich den HTML-Code folgendermassen anzupassen:

angularjs-html-angepasst

Wie löst AngularJS die Aufgaben?

angularjs-uebersicht
Zum Vergrössern anklicken

Hier das Resultat mit AngularJS

Zusammenfassung

JavaScript ist das Salz in der Suppe einer Website. Es ermöglicht Ihnen, Berechnungen durchzuführen und das Document Object Model zu manipulieren.

jQuery ist eine intelligente Anwendung von JavaScript, sozusagen eine Streuwürze, die «besser schmeckt», weil sie vieles (z.B. das Selektieren von Elementen) vereinfacht und eine umfangreiche Sammlung an vorgefertigten Funktionalitäten bietet. Ich muss mit jQuery aber immer noch selbst würzen.

AngularJS nun ist eine Art halbautomatische Würz-Maschine, die gewisse Standardaufgaben ganz von alleine übernimmt.

Wenn JavaScript das Salz in der Suppe einer Webpage ist, jQuery als Streuwürze bezeichnet und AngularJS mit einer halbautomatischen Würz-Maschine verglichen werden kann, dann gilt: Streuwürze kommt nicht ohne Salz aus – so kommt auch jQuery nicht ohne JavaScript aus, ja es ist sogar in JavaScript geschrieben. Und auch eine vollautomatische Würz-Maschine ist auf die Streuwürze und das Salz angewiesen. Auch AngularJS ist in JavaScript geschrieben und integriert sogar jQuery in einer abgespeckten Version.

Es geht meines Erachtens bei einem Vergleich der Technologien also weniger darum, zu fragen «Womit?» – also mit welcher Technologie – wollen wir die Aufgabe lösen. Das wäre so, als ob wir fragen würden, ob wir lieber mit Salz, Streuwürze oder der Würz-Maschine würzen wollen. Die Frage sollte vielmehr lauten: «Was?» wollen wir tun. Fehlt etwas Salz (Logik), also ein, zwei Zeilen JavaScript da und dort? Oder braucht es etwas mehr als Salz, nämlich «Geschmack», also Manipulationen und Veränderungen, oder wollen wir (von Grund auf) eine Single-Page-Web-Applikation aufbauen? Bei Letzterem empfiehlt sich AngularJS.


Über den Autor

Alex Kereszturi

Alex Kereszturi ist Web Solution Developer der ersten Stunden, Trike-Fahrer und Hobby-Psychologe. Als einer der ersten «Webpulisher SIZ» und als «Adobe Certified Instructor» entwickelt er seit seinem 15. Lebensjahr Lösungen für das WWW, Mobilgeräte und andere Lebenslagen. Er ist seit über 14 Jahren Kursleiter bei Digicomp, liebt das Sein in der Natur und setzt bei seinen Schulungen auf einen guten Mix aus Information, Praxisübungen und Unterhaltung. Als Inhaber und CEO führt er die Smilecom GmbH als ein kleines aber feines Software-Entwicklungs-Unternehmen und immer wieder ein turbulentes Familienleben mit drei Töchtern.