14.2    Animationen und Interaktivität mit JavaScript 

JavaScript ist eine Skriptsprache, die eigens dafür entwickelt wurde, HTML-Entwicklern erweiterte Möglichkeiten zu geben. JavaScript kann auf Benutzeraktionen reagieren, Inhalte verändern, austauschen und nachladen.

Im Gegensatz zu Programmiersprachen wie PHP wird JavaScript erst im Browser des Anwenders ausgeführt, sodass dieser JavaScript auch deaktivieren kann. In den frühen Jahren des Webdesigns war DTHML (dynamisches HTML) ein gängiger Begriff und meinte die Veränderung/Erweiterung der Seite durch JavaScript zusammen mit HTML. Ähnlich wie Flash wurde DHTML (zu) oft genutzt, um Effekte und Animationen umzusetzen, deren Nutzen für den Anwender nicht klar erkennbar war und diesen bei der Bedienung auch eher störten. Dazu kam, dass DHTML oft nicht browserübergreifend kompatibel bzw. Kompatibilität nur sehr aufwendig zu erreichen war. So verlor JavaScript über die Jahre wieder an Bedeutung.

 

14.2.1    JavaScript-Bibliotheken 

Mitte der Nullerjahre erlebte JavaScript ein Comeback. Techniken wie AJAX und verschiedene JavaScript-Bibliotheken führten dazu, dass JavaScript heute wieder ganz selbstverständlich zur Webentwicklung dazugehört. Um nicht immer wieder den gleichen Code schreiben zu müssen, zu testen und erneut zu debuggen (Fehler zu entdecken und zu verbessern), wurden Programmierbibliotheken entwickelt. So muss das Rad beim Programmieren nicht immer wieder neu erfunden werden, sondern man kann auf vorhandene und ausreichend getestete Funktionen zurückgreifen, die auch mit den unterschiedlichen Browsern kompatibel sind.

Die verbreitetste JavaScript-Bibliothek ist wohl jQuery, die 2006 veröffentlicht wurde. Es gibt aber noch einige andere (siehe Kasten). Mit jQuery lassen sich einer Webseite recht einfach zahlreiche Funktionen hinzufügen. Inzwischen gibt es auch jede Menge Erweiterungen, sogenannte Plug-ins, die den Funktionsumfang noch einmal vergrößern bzw. ein großes Repertoire an nützlichen Funktionen bereitstellen. Typische Anwendungsfälle von jQuery sind Slider, Bildergalerien (Lightbox) und Formularüberprüfungen.

Abbildung 14.13    Bei jquery.com gibt es alle Infos zu jQuery und die Download-Möglichkeit.

Wer einzelne Bibliotheken einsetzen will, kann diese auf den einzelnen Webseiten downloaden, in sein Projekt einbinden und hochladen. Alternativ bietet Google die Option, die Bibliotheken direkt von Google einzubinden. Das nennt sich dann Google Hosted Libraries – Developer’s Guide und findet sich unter developers.google.com/speed/libraries/devguide.

Im head-Bereich der Webseite sollte dann exemplarisch folgender Code eingesetzt werden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

Listing 14.11    jQuery-Einbindung über Google

Abbildung 14.14    So sieht das typische jQuery-User-Interface aus. Es ist dezent in Grautönen gehalten.