jQuery oder JavaScript: Warum das keine Frage ist
JavaScript ist die Sprache des Webs – und jQuery ihr cleveres Werkzeugkasten. Doch was gehört wozu, und wann lohnt sich welches? Dieser Beitrag erklärt verständlich, warum jQuery JavaScript nicht ersetzt, sondern ergänzt, und wie du beide im Jahr 2025 effektiv einsetzt, um moderne, dynamische Webseiten zu gestalten.
Das Zusammenspiel zwischen HTML, CSS und JavaScript habe ich bereits in einem anderen Blog-Beitrag beschrieben. Dort erkläre ich, dass JavaScript für die «Dynamik» auf Webseiten verantwortlich ist. Immer wenn sich etwas verändern soll, kann man mittels JavaScript definieren, was sich wie verändern soll. Dabei verändert man entweder den Inhalt oder die Struktur (also HTML) der Seite bzw. das Aussehen oder das Layout (also CSS) einzelner HTML-Elemente.
Nun werde ich ab und zu mit der Aussage konfrontiert, dass JavaScript doch veraltet sei. Man verwende doch jetzt jQuery, um entsprechende Herausforderungen zu lösen. Oder – wenn jemand den Kurs: Web Developer Basic (HTML, CSS, JavaScript) besucht, den ich leite – werde ich gefragt: «Was soll ich nehmen? jQuery oder JavaScript?»
Warum dies keine Frage ist – bzw. dass die Frage in dieser Form falsch gestellt ist – will ich in diesem Beitrag (ebenfalls hoffentlich) verständlich erläutern.
Wie programmiert man überhaupt – eine Einführung
Was tut man eigentlich, wenn man programmiert? Nun, das ist grundsätzlich so ähnlich, wie wenn ich einer meiner Töchter sage, sie soll die Vase auf dem Esstisch etwas weiter nach rechts schieben. Ich gebe ihr Anweisungen. Auf Deutsch formuliere ich z.B. folgenden Satz:
Da ist doch eine Vase auf dem Esstisch. Schiebe sie bitte so, dass sie 30cm vom linken Tischrand entfernt ist!
Auch wenn ich programmiere, verwende ich eine Sprache, um Anweisungen zu geben: eine Programmiersprache. JavaScript ist eine Programmiersprache. Würde meine Tochter JavaScript verstehen (und auch ausführen!), könnte ich statt einem deutschen Satz in etwa folgendes anweisen:
Haus.Wohnzimmer.Esstisch.Vase.Stil.AbstandVomLinkenRand = 30cm;
Auch ohne Programmierkenntnisse lässt sich diese Zeile mehr oder weniger verstehen. Und man sieht: In JavaScript kann man sich etwas technischer ausdrücken und z.B. das «bitte» weglassen.
Mehrere Anweisungen ergeben ein Programm
Mit einer Anweisung alleine habe ich aber noch kein Programm. Dazu muss ich mehrere Anweisungen aneinanderreihen. Etwa so wie aus einzelnen Fuss-Bewegungen – wenn man sie aneinanderreiht – Tanzschritte werden. Wenn ich z.B. möchte, dass meine Tochter die Vase einmal quer über den Tisch schiebt, dann würde das auf Deutsch in etwa so aussehen:
Da ist doch eine Vase auf dem Esstisch.
Schiebe sie bitte so, dass sie 1mm vom linken Rand entfernt ist!
Warte 7 Millisekunden!
Schiebe sie bitte so, dass sie 2mm vom linken Rand entfernt ist!
Warte 7 Millisekunden!
Schiebe sie bitte so, dass sie 3mm vom linken Rand entfernt ist!
Warte 7 Millisekunden!
Schiebe sie bitte so, dass sie 4mm vom linken Rand entfernt ist!
Warte 7 Millisekunden!
...
… und so weiter und so weiter. Von aussen betrachtet entsteht eine flüssige Bewegung der Vase über den Tisch. Im Innern meiner Tochter braut sich der nächste Wutanfall zusammen.
Der Vollständigkeit halber hier noch das Programm in unserem Pseudo-JavaScript:
dieVase = Haus.Wohnzimmer.Esstisch.Vase;
wartenUndDannErstAusführen("dieVase.Stil.AbstandVomLinkenRand = 1mm", 7 Millisekunden);
wartenUndDannErstAusführen("dieVase.Stil.AbstandVomLinkenRand = 2mm", 7 Millisekunden);
wartenUndDannErstAusführen("dieVase.Stil.AbstandVomLinkenRand = 3mm", 7 Millisekunden);
wartenUndDannErstAusführen("dieVase.Stil.AbstandVomLinkenRand = 4mm", 7 Millisekunden);
...
Das Ergebnis ist ähnlich. Im Gegensatz zu meiner Tochter kriegt JavaScript aber keine Tobsuchtsanfälle.
Warum man nicht so gerne mit JavaScript arbeitet, wenn man viel zu programmieren hat?
Es gab (und gibt) in JavaScript (unter anderem) folgende drei Gegebenheiten, die einem das Leben als fleissiger Programmierer erschwer(t)en:
- JavaScript begreift nur schwer, welche Elemente man gerne «herumschieben» möchte.
- Man muss jeden Schritt (= jede Anweisung) einzeln ausformulieren.
- In JavaScript muss man jedem Element einzeln sagen, was man von ihm will, auch wenn ich es einem anderen schon gesagt habe.
Und genau hier setzt jQuery ein. jQuery ist nämlich eigentlich nichts anderes als eine mittlerweile sehr umfangreiche Sammlung von Programmteilen für das Manipulieren von Elementen auf Webseiten. Und der Slogan dieser Sammlung lautet «Write less. Do more!»
Wie jQuery das anstellt, erkläre ich gerne kurz. Vielleicht können ja die Eltern unter uns das eine oder andere für neue Erziehungsmethoden daraus ableiten.
Warum jQuery so erfolgreich ist
jQuery löst die drei oben aufgezählten Herausforderungen mit den Zauberworten:
- CSS-Selektoren
- Vorgefertigte Methoden
- Implizite Iterationen
Da auch meine Kinder diese Worte (noch) nicht verstehen, gerne zu jedem einzelnen ein Beispiel:
1. CSS-Selektoren
Wenn du mit CSS vertraut bist, dann weisst du, was ein Selektor ist. Wenn nicht, dann stellst du dir einfach vor, dass ich statt «Im Wohnzimmer auf dem Esstisch die Vase» auch sagen könnte «Alles, was auf dem Tisch steht» oder «alles aus Glas» oder «das dort drüben» oder sogar «alles aus Glas, aber nur, wenn es auf einem Tisch steht und ein Erbstück von Grossmutter ist». Meine Tochter würde das verstehen. Auch CSS versteht solch eine Art des Auswählens von Elementen (= selektieren) und bietet eine mannigfaltige Variante an Selektoren.
JavaScript kennt das leider nicht in dem Umfang.
In JavaScript schreibe ich also:
Haus.Wohnzimmer.Esstisch.Vase;
In jQuery kürzt sich das ab zu:
jQuery("Vase");
Und das Erbstück von Oma?
JavaScript braucht da x Zeilen Code:
dieVase = Haus.Wohnzimmer.Esstisch.suchDaraufNachEtwasMitNamen("Vase");
wenn ( dieVase.Material == Glas UND dieVase.Herkuft == OmasErbschaft) {
...jetzt darfst du etwas damit machen...
}
jQuery kostet das ein müdes Lächeln:
jQuery("Vase[material.ausOmasErbe")
Ist zugegeben etwas kryptischer, aber die Devise war ja: «Write less. Do more.» und die wird erfüllt.
2. Vorgefertigte Methoden
Wenn wir uns an das kleine Programm für meine Tochter (siehe oben) noch einmal anschauen, erinnern wir uns daran, dass das relativ viele Zeilen Code gebraucht hat. Klar, man könnte das z.B. mit einer Schleife abkürzen, aber so einfach und elegant wie jQuery das löst, lässt jeden Nachprogrammier-Versuch im Keim ersticken:
jQuery("Vase").animate({"AbstandVonLinks":"30cm"},3000);
Die Vase wird damit innert 3 Sekunden (= 3000ms) so verschoben, dass sie nachher einen Abstand von links von 30 cm hat. Und das, egal wo sie stand! animate() ist dabei die Abkürzung für eine Sammlung von vorgefertigtem Code, der sich um das Ganze kümmert. Praktisch und effizient!
3. Implizite Iterationen
Die implizite Iteration ist eines meiner Lieblingsworte und ich wünschte, meine Töchter wüssten, was das ist.
Eine Iteration ist eine Wiederholung, eine Schleife. Meinen Töchtern muss ich manchmal gewisse Dinge sagen. Und das explizit jeder einzelnen – was einer expliziten Iteration entspricht. Könnte ich einmal sagen «Zimmer aufräumen!» und jede meiner Töchter würde sich angesprochen fühlen, wäre das eine implizite Iteration – eine Iteration, die ich nicht explizit ausformulieren muss.
Wenn ich will, dass alle Dinge auf dem Tisch sofort verschwinden, schreibe ich in jQuery etwas wie:
jQuery(" Tisch Ding ").hide();
Also egal, ob damit genau 1 Element auf dem Tisch, 57 Elemente oder gar keines angesprochen wird.
Zurück zur ursprünglichen Frage
Wenn du diesen Satz hier liest, heisst das, dass du immer noch halbwegs verstehst, worum es hier geht. Und wahrscheinlich wirst du dir die Frage «jQuery oder JavaScript?» gar nicht mehr stellen, weil jQuery sich im Laufe der Erläuterungen als einfacher und effizienter herausgestellt hat. Nun, um JavaScript wirst du dennoch kaum herumkommen, denn jQuery ist in JavaScript geschrieben. Wenn du also jQuery ohne JavaScript-Kenntnisse nutzen wolltest, wäre das, wie wenn du Gedichte ohne Sprache schreiben wolltest. jQuery ist dicht komprimiertes JavaScript so wie Gedichte dicht komprimierte Sprache sind.
Wer also gerne erst einmal «Deutsch» lernen möchte, besuchst du einen Kurs über reine JavaScript-Programmierung oder den Kurs: Web Developer Basic (HTML, CSS, JavaScript), um auch die Zusammenhänge mit CSS und HTML zu verstehen.
Wenn du der deutschen Sprache – also JavaScript – schon mächtig bist, belegst du das Freifach «Dichtkunst» und besuchst den Kurs: Gestaltung dynamischer Webapplikationen mit jQuery.
Ich für meinen Teil schaue jetzt erst einmal, dass meine Tochter den Tisch abräumt und dabei die Vase nicht vom Rand stösst. Mal sehen, ob jQuery("Tisch").putzen("vorsichtig") als Anweisung reicht..