Weißt Du, was jQuery-Effekte sind?

Heute tauchen wir tiefer in das Thema Webdesign ein. Dank des Autors

Martin Hahn: Webdesign. Das Handbuch zur Webgestaltung

haben wir uns vor einiger Zeit mit dem Glossy-Button beschäftigt, der in der Vergangenheit gern auf Webseiten zum Einsatz kam. Heute geht es um ein Feature der Webdesign Gegenwart, das unser Autor in folgendem Satz erwähnt:

„Möglichkeiten wie die Cascading Style Sheets, JavaScript Frameworks wie jQuery, dazu neue Geräte wie Smartphone und Tablets haben die technischen Anforderungen und Möglichkeiten in den letzten Jahren grundlegend verändert.“ S. 24.

Da ich seit 2020 hauptberuflich für ein Unternehmen arbeite, das Webseiten für seine Kunden baut und ich deshalb inzwischen ein paar Webseiten gebaut habe, weiß ich, dass ein Cascading Style Sheet eine Datei (CSS-Datei) ist, die die Designinformationen für alle Webseiten-Elemente enthält. Hier erfahren wir unter anderem, welche Farben alle Überschriften oder Buttons auf einer Webseite haben sollen. Wenn der Webdesigner alle Glossy-Buttons von der Webseite entfernen möchte, kann er sich die CSS-Datei schnappen und hier das Design der Buttons ändern. Die Änderung wirkt sich dann auf die gesamte Webseite aus und der Webdesigner muss nicht jeden Button auf der Webseite einzeln ändern. Das spart eine Menge Zeit.

Auch JavaScript begegnet mir im Webdesign immer wieder, doch ich habe bis heute nicht so richtig verstanden, was genau JavaScript macht. Auch jQuery habe ich schon mal gehört, aber ich hatte keine Ahnung, dass es eines von vielen JavaScript Frameworks ist. Aus diesem Grund freue ich mich sehr darauf, heute diesem Rätsel endlich auf den Grund gehen zu können.

Was ist ein JavaScript Framework?

Bevor wir uns anschauen, was ein JavaScript Framework ist, schauen wir uns erst einmal an, was JavaScript ist. Laut dieses YouTube Video kann JavaScript nicht mehr nur zum Bau von Webseiten, sondern zum Beispiel auch zum Bau von Spielen genutzt werden. Das ist eine spannende Zusatzinformation, hilft uns aber nicht dabei zu verstehen, was JavaScript ist. Zum Glück beantwortet das Video auch diese Frage ein paar Sekunden später: JavaScript ist eine Programmiersprache, die es seit 1995 gibt und die dafür sorgt dafür, dass sich Dinge auf einer Webseite bewegen.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Mit dieser Information kann ich nun endlich etwas anfangen. Eine moderne Webseite mit beweglichen Elementen besteht also aus mindestens 3 Dingen:

1. dem HTML-Code, der die Struktur der Webseite festlegt. Im HTML-Code steht unter anderem, ob dieser Text hier eine Überschrift, ein Absatz oder eine Liste ist,
2. der CSS-Datei, die das Aussehen der Webseite festlegt. In der CSS-Datei werden unter anderem die Farben festgelegt, die die Überschriften auf einer Webseite haben,
3. einem JavaScript-Etwas (wie genau das ausschaut, werden wir hoffentlich heute noch herausfinden), das bestimmt, welche Elemente sich auf einer Webseite wie und wann bewegen.

Wie genau ein JavaScript Framework funktioniert und was es im Detail macht, erklärt dieses englischsprachige YouTube Video. Soweit ich es verstehe, spart ein JavaScript Framework dem Programmierer eine Menge Arbeit, weil er dank des Frameworks nicht alles von Grund auf Programmieren muss, sondern auf fertige Elemente zugreifen kann.

Ein JavaScript Framework funktioniert also in etwa so, wie eine Fertigmischung für Eierkuchen. Du musst nicht mehr die richtige Menge Mehl, Zucker, Eier und Milch miteinander verrühren, um an Deinen Eierkuchenteig zu gelangen. Stattdessen kannst Du einfach die Plastikflasche mit der Fertigmischung aufschrauben, Milch reingießen, das Ganze wieder verschließen, einmal kräftig schütteln, und schon hast Du Deinen Teig. Dank der Fertigmischung wird aus einem 3-Minuten-Vorgang ein 30-Sekunden-Vorgang.

Die Nutzung eines solchen JavaScript Frameworks spart nicht nur Zeit beim Erstellen, sondern auch beim Pflegen der Webseite. Eine Webseite wird in einem Browser ausgeführt. Browser werden ständig weiterentwickelt. Bei dieser Weiterentwicklung erlangen sie viele neue Funktionen hinzu. Gleichzeitig säubern die Programmierer der Browser ihr Programm von alten Funktionen, die nicht mehr genutzt werden, oder beheben Sicherheitslücken. Das kann dazu führen, dass die ein oder andere Funktion in einer Webseite nach einem Browserupdate nicht mehr funktioniert. Würden alle Webseiten aus selbstprogrammierten JavaScripts bestehen, müssten alle Webseitenprogrammierer nach so einem Browserupdate in den Code ihrer Webseite abtauchen und diesen anpassen. Da die meisten Programmierer Frameworks nutzen, können sie sich diese Arbeit sparen. Es reicht, wenn der Inhaber des Frameworks den Code in seinem Framework anpasst. Diese Anpassung wird automatisch von allen Webseiten übernommen, die dieses Framework nutzen.

So wie es verschiedene Anbieter von Fertigteigmischungen für Eierkuchen gibt, gibt es auch unterschiedliche Anbieter von JavaScript Frameworks. Dank unseres Autors wissen wir bereits, dass eines dieser Frameworks jQuery heißt. Daher schauen wir uns dieses nun endlich an.

Was ist jQuery?

Wir wissen bereits, dass jQuery ein JavaScript Framework ist. Wer es nutzen will, kann einfach auf die Webseite von jQuery gehen und das Framework herunterladen. Wer dann keine Ahnung hat, was er mit der runtergeladenen Datei machen soll, kann auf der Webseite des Frameworks auch gleich lernen, wie er es nutzen kann.

Laut Wikipedia ist jQuery die meistverwendete JavaScript-Bibliothek, die im September von 77% aller Webseiten genutzt wurde. Auch meine Webseite verwendet diese Bibliothek laut Wikipedia, da meine Webseite eine WordPress Webseite ist. Der Entwickler von jQuery ist John Resign. Er veröffentlichte jQuery im Jahr 2006.

Wie sehen jQuery-Effekte in der Praxis aus?

Unser Autor nennt in seinem Buch die Webseite eines Unternehmens namens Hillmann Living als ein Beispiel, das jQuery-Effekte in Aktion zeigt. Ich habe die Seite kurz aufgerufen, bemerkt, dass die URL, die unser Autor in seinem Buch nennt, inzwischen auf eine neue URL weitergeleitet wurde. Ich habe daher die Vermutung, dass das Webseiten-Beispiel unseres Autors inzwischen nicht mehr in der Form existiert, die uns unser Autor zeigen wollte, als er 2020 das Buch schrieb.

Um einen echten jQuery-Effekt in Aktion zu sehen, greife ich wieder einmal zu einem YouTube Video, das nicht nur einen Effekt zeigt, sondern gleichzeitig auch zeigt, wie dieser mit Hilfe von jQuery erstellt werden kann. Mit Hilfe von jQuery kann ein Element also unter anderem durch den Klick auf einen Button aus- oder eingeblendet werden. Wenn Du keine Lust hast, jemandem zuzuschauen, wie er jQuery schreibt, sondern lieber selbst mal ein paar Knöpfe drücken möchtest, die jQuery-Effekte auslösen, kannst Du die Webseite von Mediaevent besuchen. Hier kannst Du jQuery Animationen wie

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

• Sequenzielle Animationen,
• Animationsverkettungen,
• jQuery Loops

und viele mehr durch drücken von Knöpfen auslösen und bewundern.

Fazit

Wir wissen nun, was jQuery-Effekte sind, wobei ich mir sicher bin, dass wir im Rahmen unserer heutigen Recherche noch lange nicht alle gesehen haben und kennen. Dennoch bin ich zufrieden und glücklich mit dem Ergebnis der Recherche, da ich nun endlich verstehe, worum es geht, wenn jemand von jQuery, JavaScript oder Frameworks spricht.