JavaScript Schnellstart: Bibliotheken

JavaScript in Verbindung mit HTML und CSS ist sehr mächtig.

Was sind Bibliotheken?

Darüber hinaus möchte ich dir einen weiteren Tipp geben, wie du in Zukunft noch schneller programmierst. Ich spreche von JavaScript-Bibliotheken. Es gibt unzählige Bibliotheken, die du in deinen Programmen nutzen kannst, wie z.B. jQuery oder Phaser.

Was ist der Vorteil einer Bibliothek?

Du musst das Rad nicht neu erfinden. Für fast jedes Problem oder jede Aufgabe gibt es bereits eine fertige Lösung in Form von einer passenden JavaScript-Bibliothek.

• Du möchtest einfacher mit HTML-Elementen arbeiten, weil du DOM zu komplex findest? Dann schau dir die Bibliothek jQuery an und schon bist du schneller am Ziel.
• Du möchtest ein Browserspiel entwickeln, welches z.B. auf Facebook gespielt werden soll? Schnapp dir die Phaser-Bibliothek und los geht’s.

Für die meisten Aufgaben solltest du mit deinem derzeitigen JavaScript-Wissen die ersten Schritte machen können.

Wie arbeite ich mit JavaScript-Bibliotheken?

Für Bibliotheken gibt es eigentlich nur zwei Sachen, die zu beachten sind:

1. Die Dokumentation und
2. das Einbinden in dein Programm.

Das Einbinden ist einfach. So bindest du z.B. jQuery ein

(vorausgesetzt deine jQuery-Datei jquery-3.4.1.min.js liegt im gleichen Ordnerverzeichnis)

<script src="jquery-3.4.1.min.js"></script>

Etwas herausfordernder wird es, sich in der Dokumentation der jeweiligen Bibliothek zurechtzufinden. Es erfordert immer etwas Arbeit, sich in eine Bibliothek einzuarbeiten und zu verstehen, wie man die Features korrekt einsetzt.

jQuery „versteckt“ z.B. all seine Features hinter der Funktion $.

Code-Beispiel - So registriert man in jQuery z.B. das Klick-Event:

$("#knopf").click(function() {
  alert("angeklickt!");
});

Hinweis: Wenn du mehr über jQuery erfahren willst, schaue dir den LerneProgrammieren jQuery-Schnellstart an.

In dieser Übung werden wir diesen Klick nachbauen: