Zusammenfassung

In dieser Lektion hast du gelernt:

• Eine Seite wird in HTML geschrieben und besteht aus Elementen, die mit Tags geschrieben werden: <h1>Titel</h1>. Elemente können Attribute haben, etwa id (ein eindeutiger Name) und class (der Name einer Gruppe).
• Die Seite lädt ein Skript mit <script src="script.js"></script> am Ende von body, damit die Elemente existieren, wenn das Skript läuft. Das Skript läuft, wenn die Seite geladen wird; was es ausgibt, und seine Fehler erscheinen in der Konsole unter der Seite.
• document.querySelector() findet das erste Element, das zu einem Selektor passt: "h1", "#id" oder ".klasse". Wenn nichts passt, gibt es null zurück, und seine Verwendung endet mit einem Fehler wie TypeError: Cannot read properties of null (reading 'textContent').
• textContent ist der Text eines Elements; du kannst ihn lesen und ändern.
• element.style.color = "red" ändert einen Stil (CSS-Namen in camelCase, etwa backgroundColor); classList.add(), remove() und toggle() fügen Klassen aus dem CSS der Seite hinzu und entfernen sie.
• button.addEventListener("click", function () { ... }) führt die Funktion bei jedem Klick aus. Übergib die Funktion selbst, ohne ().
• Die Daten leben in Variablen (ein Zähler in einer let-Variable, Einträge in einem Array); ein Handler ändert sie und zeigt sie wieder auf der Seite an.
• input.value ist der Text in einem Feld; Number() wandelt ihn in eine Zahl um.
• document.createElement("li") erstellt ein Element, und liste.append(eintrag) setzt es in die Seite. Um ein Array anzuzeigen, leere die Liste mit liste.textContent = "" und erstelle in einer Schleife einen Eintrag für jedes Element.

In der nächsten Lektion, Ereignisse und Formulare, reagieren deine Seiten auf mehr als Klicks: auf Tippen, auf die Auswahl aus einer Liste, auf Tastendrücke und auf das Absenden von Formularen.

Aber zuerst ein bisschen Übung: ein Sparschwein, das deine Ersparnisse zusammenzählt. Diesmal ist script.js leer, und du schreibst das ganze Programm selbst.