JavaScript-Kurs 🟨

Willkommen! Hier findest du alle Übungen für die Vorbereitung auf die HSAKA.

Du brauchst nichts zu installieren — alle Übungen laufen direkt im Browser. Dein Fortschritt wird automatisch gespeichert.

Bevor’s losgeht

👉 Willkommen & Ziele — kurze Einführung, lies das, falls du noch nie programmiert hast.

Kapitel 1 — Grundlagen

  1. Variablen 📦 — let, const, Werte zuweisen
  2. Datentypen 🔤 — Strings, Numbers, Booleans, null/undefined
  3. Operatoren ➕ — Rechnen und Vergleichen

Kapitel 2 — Kontrollfluss

  1. Kommentare 💬 — Code mit // erklären
  2. Conditionals 🔀 — if/else, &&, ||, !
  3. Loops 🔁 — while, break, continue
  4. Scopes 🪟 — Geltungsbereiche von Variablen
  5. Functions 🛠️ — Code wiederverwenden mit function und return

Kapitel 3 — Datenstrukturen & APIs

  1. Arrays 📚 — Listen mit [], Index-Zugriff, for of
  2. String-Builtins 🔤 — Template Strings, .includes, .substring, …
  3. Objects 🗂️ — Werte mit Namen gruppieren

Kapitel 4 — boardgame.io

  1. Einführung 🎲 — Was ist boardgame.io und wie funktioniert’s?
  2. Ein Spiel definieren 🎯 — setup und moves
  3. Spielverbesserungen ✨ — Züge mit turn begrenzen
  4. Siegbedingung 🏆 — endIf, Gewinner und Unentschieden
  5. Bots 🤖 — Ein KI-Gegner mit ai.enumerate

Kapitel 5 — Canvas zeichnen

  1. Koordinatensystem 📐 — wie der Computer Positionen versteht
  2. Rechtecke ▭ — fillRect, strokeRect, clearRect
  3. Farben 🌈 — RGB, Hex, Transparenz, das Pinsel-Prinzip
  4. Andere Formen ⚪ — Pfade, Kreise, Linien, Dreiecke
  5. Text 🔤 — fillText, Schriftarten, Ausrichtung
  6. Bilder 🖼️ — drawPicture, Position, Größe, Ausschnitte
  7. Klicks 🖱️ — onClick, Moves, interaktive Felder

Finale — alles zusammen

  1. Das Spielbrett zeichnen 🎮 — boardgame.io + Canvas: render dein Tic-Tac-Toe selbst (braucht Kapitel 4 und 5)

Fortschritt teilen

Wenn du fertig bist, kannst du deine kompletten Lösungen als Datei exportieren und uns schicken — dann sehen wir deine Antworten.

So funktioniert’s

  • Klick auf eine Übung oben.
  • Lies die Erklärung und probier den Code aus, indem du ihn im Code-Feld änderst.
  • Sobald du tippst, wird der Code ausgeführt und du siehst die Konsolen-Ausgabe darunter.
  • Bei den Übungen am Ende jedes Kapitels siehst du ✅ wenn deine Lösung richtig ist.
  • Du kannst jederzeit zurückkommen — alle Eingaben bleiben gespeichert.

💡 Tipp: Funktioniert am besten in Chrome, Firefox oder Edge.