jQuery oder JavaScript: Warum das keine Frage ist
«Was soll ich nehmen? jQuery oder JavaScript?» Warum dies keine Frage ist – bzw. dass die Frage in dieser Form falsch gestellt ist – wird in diesem Beitrag erläutert.
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 – soll in diesem Beitrag (ebenfalls hoffentlich) verständlich erläutert werden.
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 Sie mit CSS vertraut sind, dann wissen Sie, was ein Selektor ist. Wenn nicht, dann stellen Sie sich 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 Sie diesen Satz hier lesen, heisst das, dass Sie immer noch halbwegs verstehen, worum es hier geht. Und wahrscheinlich werden Sie sich 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 werden Sie dennoch kaum herumkommen, denn jQuery ist in JavaScript geschrieben. Wenn sie also jQuery ohne JavaScript-Kenntnisse nutzen wollten, wäre das, wie wenn Sie Gedichte ohne Sprache schreiben wollten. jQuery ist dicht komprimiertes JavaScript so wie Gedichte dicht komprimierte Sprache sind.
Wer also gerne erst einmal «Deutsch» lernen möchte, besucht 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.
Wer der deutschen Sprache – also JavaScript – schon mächtig ist, belegt das Freifach «Dichtkunst» und besucht 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.