JavaScript und die Website

Challenge-Paket für Aivopod: wo HTML und JavaScript sich treffen. Baut auf web-grundlagen (HTML, ids, CSS) und javascript-grundlagen-2 (Objekte mit Eigenschaften und Methoden) auf.

Challenge	Inhalt
Die Konsole im Browser (die-konsole-im-browser)	<script>, die Entwickler-Werkzeuge öffnen (mit Schlüsselwort geprüft), Fehler lesen, warn und error
Elemente finden (elemente-finden)	document, getElementById, textContent, null, das Skript an der richtigen Stelle, style
Auf Klicks reagieren (auf-klicks-reagieren)	addEventListener mit benannter Funktion, übergeben statt aufrufen, onclick, die Kurzform () => { … }
Ein Zähler (ein-zaehler)	ein Wert zwischen den Klicks, die Anzeige, einen Zähler selbst schreiben

Alle mit drei Stufen (normal, erweitert, experte), in dieser Reihenfolge (aivopod.ablauf). Braucht Aivopod 0.5 (konsole: "devtools", plattform.schluessel()). Bis web-grundlagen 1.1.0 stand der Zähler dort als „Ein Knopf, der etwas tut“.

Arbeiten am Paket

npm install          # das SDK aus der Registry der Organisation (.npmrc)
aivopod pack test    # Tests, ohne vitest
aivopod pack preview # alle Schritte im Browser durchspielen
aivopod pack build   # bündeln, prüfen, Release-Archiv in dist/

Veröffentlichen: Die Version in package.json erhöhen (Patch: nur Texte; Nebenversion: Änderungen in bestehenden Challenges oder im Ablauf; Hauptversion: andere Challenges) und nach main bringen. Die CI prüft die Version gegen das letzte Release und legt ein neues Release v<version> mit dem Archiv an. Plattformen, die dieses Repo (oder seine Organisation) als Quelle eingetragen haben, finden es, wenn das Repo das Thema aivopod-pack hat. Entwicklungsversionen (1.2.0-dev.1) lassen sich mit aivopod pack publish direkt für die eigene Schule veröffentlichen, wenn die Plattform das erlaubt.

aivopod.titel und aivopod.ablauf in package.json legen fest, wie das Paket als Ganzes einem Kurs zugewiesen wird: sein Titel und die Challenges in dieser Reihenfolge.

Eine Challenge ist ein Ordner mit index.ts (die Challenge) und index.test.ts (Tests mit expectPass und expectFail). Bilder liegen im Ordner assets/ der Challenge.