StartTutorialsProgrammierungWebentwicklung Grundkurs Teil 7

Webentwicklung Grundkurs Teil 7

  • 2 Monaten her
  • 5Minuten

Im letzten Teil der kleinen Einsteigerserie befassen wir uns mit jQuery und basteln uns eine bescheidene Animation. Mit relativ wenigen Zeilen bewegen wir ein Rechteck in vier Richtungen über den Bildschirm.

Was ist jQuery?

Dabei handelt es sich um eine Bibliothek für JavaScript. Es ist die mit Abstand am weitesten verbreitete und die Chancen, dass ihr als Webentwickler eines Tages damit arbeiten dürft oder müsst, ist ziemlich hoch.

Eine Bibliothek ist eine Ansammlung von Skripten/Funktionen, die häufig verwendet werden. Wenn ihr zum Beispiel bei einem Datumsfeld einen Kalender braucht, müsst ihr den nicht komplett selbst entwickeln. Irgendjemand hat das schon für euch gemacht. Ihr müsst lediglich die Bibliothek laden und die entsprechende Funktion aufrufen.

Solche Bibliotheken gibt es für fast alle Programmiersprachen. Meistens befasst man sich damit, sobald man die Grundlagen der Sprache erlernt hat. Zwar ersparen einem diese Funktionen Arbeit, sie können allerdings fehlerhaft sein und man weiß oft nicht, was die entsprechende Funktion genau tut. Das soll aber nicht das Thema sein.

Wo erhalte ich jQuery?

Hier kannst Du Dir die aktuellste Version herunterladen: //jquery.com/ 

Ich empfehle, immer die kompilierte Version zu verwenden. Alternativ kann man es auch extern laden, bspw. von Google. Dazu verwendet man folgende Zeile:

Damit wird die momentan aktuelle Version 3.6 in Deine Homepage geladen. Das hat zwei Vorteile: Erstens ist der Google-Server i. d. R. schneller als private Webserver. Zudem kann es sein, dass ein Seitenbesucher längst das Script durch eine andere Webseite geladen hat und es sich bereits im Speicher befindet. Dann muss es nicht noch einmal geladen werden, was die Ladezeit Deiner Seite beschleunigt. Die Bibliothek hat momentan zwar nur 88 Kilobyte, aber man ist bei der Webentwicklung um jedes Byte froh, das man spart. Vor allem auf mobilen Geräten.

Die sehr umfangreiche Dokumentation zu jQuery findest Du hier: //api.jquery.com/

Und was mache ich damit?

Lies die Dokumentation. 😆 

Spaß beiseite. Es ist die Basis für viele nützliche Funktionen wie Effekte, Animationen, Ajax-Funktionalitäten, Hilfsfunktionen, Elementselektion u. v. m. In Kombination mit anderen Bibliotheken, etwa jQuery UI, wird es sehr mächtig.

Diese, ich nenne es mal, Erweiterungen für den Entwickler, werden von einer großen Community programmiert. Das heißt nicht, dass sie perfekt sind, aber meistens wesentlich besser als das, was Anfänger oder Gelegenheitsprogrammierer hinbekommen würden.

Joomla und WordPress beinhalten jQuery ebenso wie viele Bootstrap-Kompilationen. Man kann somit durchaus sagen, dass es im Internet an jeder Ecke auftaucht.

Das Beispiel

Das Beispiel, welches wir besprechen, findest Du hier. Ich habe es ein wenig umfangreicher gestaltet (was man nicht sieht), aber ich denke, es sollte einfach genug sein, um es nach den vergangenen Teilen der Serie zu verstehen.

Wir brauchen hierfür vier Dateien:

  1. index.html
  2. style.css im Unterordner css
  3. jquery-3.6.0.min.js im Unterordner js
  4. main.js im Unterordner js

Steigen wir, wie gewohnt, mit der HTML ein.

Hier sehen wir nur Dinge, die wir bereits kennen. Nach dem Titel laden wir unsere CSS, anschließend jQuery. Diese Zeile könnten wir nun durch die o. g. Google-Zeile austauschen.

Danach laden wir unser eigenes Script, gefolgt vom Body-Teil der HTML-Datei. Wir haben eine Überschrift und darauffolgend einen DIV-Container. Hier drin spielt sich die Animation ab. Die id lautet box, hierfür verwenden wir die CSS-Klasse boxstyle. Im Body wird, wie gewohnt, die erste Funktion unseres Skriptes gestartet, sobald alles geladen wurde (onload).

Nun zur CSS:

Wie Du sehen kannst, ist die Überschrift nicht ganz schwarz und etwas eingerückt. In der Klasse boxstyle definieren wir die Position und die Größe. Zuletzt bestimmen wir einen Farbverlauf von Oben nach unten von Dunkelgrün nach Schwarz. 

Die jQuery-Datei fassen wir nicht an, außer das wir sie im Ordner speichern und in der HTML laden. Somit können wir uns auf das eigene Skript konzentrieren.

Die main.js

Es fällt auf, dass wir viermal dieselbe Funktion haben. Für hoch, links, runter und rechts. Man kann das auch anders lösen, aber für Anfänger ist es so leichter zu verstehen. Wenn Du genau hinschaust, stellst Du fest, dass die Funktionen in umgekehrter Reihenfolge zur Bewegung laufen. Auch das kann man anders lösen, aber der Grund ist simpel: Sollte das Skript nicht vollständig geladen sein, kann es zu einem Fehler kommen. Da wir es umdrehen und die letzte Funktion, also move_right aus der HTML abrufen, ist gesichert, dass alles davor bereits da ist.

Und was ist daran jQuery?

Die Funktion animate. Im Prinzip hatte ich statt drei auch nur eine Zeile machen können, aber in der Übersicht erschien es mir so leichter verständlich. Da Du Dich nun mit dem Code etwas befasst hast, fasse ich den wesentlichen Teil in eine Zeile zusammen und erkläre sie Schritt für Schritt:

Mit $(‘#box’) greifen wir auf unseren Container zu. Du erinnerst Dich an die id? Genau dafür brauchen wir sie. Diese geben wir an die Funktion animate von jQuery weiter. Bis hierhin sagen wir also nur: “Funktion animate, benutze die Box.”

Anschließend folgt eine Klammer, in der wir definieren, was die Funktion animate mit der Box machen soll. Die Details darüber kannst Du hier nachlesen. Was wir im konkreten Fall machen ist, dass wir eine Richtung angeben (right), darauf folgt die Änderung (‘-=600’) und die Zeit, die es dafür benötigt (6000). D. h. je kleiner die Zahl, umso schneller geht die Animation. Mach einfach aus den 6000 eine 600 und Du wirst den Unterschied sehen.

Am Ende rufen wir die nächste Funktion auf, die ausgeführt wird, sobald die Zeit um ist. Da wir in der oberen Funktion die letzte Funktion aufrufen, haben wir eine Schleife.

Vor- und Nachteile

jQuery ist eine echte Waffe für Webentwickler, vor allem in Kombination mit weiteren Bibliotheken. Ein Nachteil bei solchen Bibliotheken kann sein, dass man für eine einfache Aufgabe viele unnütze Daten lädt und die Seite damit unnötig groß und langsam wird. Überlege also immer gut, ob Du wirklich eine Bibliothek brauchst, oder ob Du die kleine Funktion, die Du benötigst, doch besser selbst schreibst.

Ich hoffe, diese kleine Serie konnte Dich ein wenig motivieren, Dich mit der Webentwicklung zu befassen. Es ist ein spannendes Thema mit interessanten Aspekten. Solltest Du erst hier eingestiegen sein, weil es Google vielleicht gut mit dieser Webseite meint, könnte Dich ein vorangegangener Teil der Serie interessieren.

Überblick Webdev-Serie

Webentwicklung Grundkurs Teil 1 – Einstieg
Webentwicklung Grundkurs Teil 2 – Aufbau von Webseiten
Webentwicklung Grundkurs Teil 3 – Datei- und Ordnerstrukturen
Webentwicklung Grundkurs Teil 4 – Einstieg in JavaScript
Webentwicklung Grundkurs Teil 5 – Datenverarbeitung und Formulare mit JavaScript
Webentwicklung Grundkurs Teil 6 – Canvas kann was

Überblick Interviews

Interview mit Magnus Reiß – Webgamers
Interview mit Wolfgang Scheidle – Tischtennis Manager
Interview mit Warg – Drifting Souls II

 

Hat Dir dieser Artikel gefallen? Dann würden wir uns sehr über Unterstützung freuen.

 

Sven Gramatke//www.gravitationart.com/
Schreibt gelegentlich Artikel. Schwerpunkte sind Gamedesign, Programmierung (GML, PHP und JS), Retro und Berichte.
Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments

NEWS

ByteGame News

Gamedev Podcast 52 – Game Therapy

0
Wer in den letzten 20 Jahren eine deutsche Tagesklinik schon mal von innen gesehen hat, kennt vielleicht Cogpack. Bei Cogpack kann man am PC...
GameJam-Logo von ManaSoup-GameJam (irgendwas mit Pizza)

Manasoup GameJam

0
Die drei-tägige Manasoup GameJam startet am Freitag, den 03.12.2021! Bei dieser deutschsprachigen GameJam der Gamedev-Discord-Community Manasoup-Network (in Kooperation mit Game Dev Podcast und dem Magazin...
ByteGame News

Multiplayer in Godot 4.0

0
Im Godot-Blog gibt es nun einen Beitrag über das neue Multiplayer-Replikationssystem, das für Godot 4.0 entwickelt wird. Darin werden die Konzepte vorgestellt, auf deren...

Echtzeit-Charakteranimationsschulung in der Unreal Engine

0
Animationen sind ein wichtiger Bestandteil jeder Storyline. Neben der Vielzahl von Objekten, die man in der Unreal Engine animieren kann - Charaktere, Objekte, Materialien...
ByteGame News

Rudi ist der beste Spürhund!

0
Bei A Swift's Live 2 - The Journey hat der Hund Rudi eine Schnüffel-Fortbildung genossen und kann nun besser schnüffeln denn je. Als Resultat...
0
Would love your thoughts, please comment.x
()
x