Struktur und Links
Dauer: ca 10 min.
Themen:
- Strukturierung von JavaScript-Dateien mit Funktionen
- Nützliche Webseiten
Struktur in script.js
Am Anfang der Datei script.js werden für alle benötigten Elemente
Konstanten initialisiert, denen mit document.querySelector die
entsprechenden DOM-Elemente zugewiesen werden.
In Funktionen wird das Verhalten der Klick-Eventhandler definiert und mit weiteren Funktionen können z.B. passende Template-Strings für neue HTML-/DOM-Elemente erzeugt werden. Durch diese Funktionen bleibt der Code einigermaßen übersichtlich.
Für komplexere Anforderungen bzw. Code-Strukturen können in JavaScript Klassen und Module mit weiteren Dateien verwendet werden.
LiveCoding: Struktur in script.js aufbauen und beispielhaft andeuten
Nützliche Webseiten
-
Mehrere kleine Beispiel-Projekte für Webanwendungen ohne Frameworks mit Quellcode: Vanilla Web Projects
-
Praktische Sammlung von Code-Beispielen für verschiedene Use Cases mit der DOM-API: htmldom.dev