MyDearClass

Ein didaktisches Werkzeug, um JavaScript-Klassen anschaulich zu lernen. Man erstellt Klassen, speichert sie als „Sets", wechselt zwischen ihnen und bearbeitet ihren Code live in einem kleinen Editor — die Änderungen wirken sofort auf der Canvas daneben.

Idee

Der Code, den man im Editor sieht und bearbeitet (die Engine-Klassen), ist bewusst einfach gehalten (Anfänger-JavaScript). So bleibt nachvollziehbar, was eine Klasse ist, wie ein Konstruktor funktioniert und wie aus einer Klasse Instanzen entstehen.

Aufbau

• index.html — Grundgerüst (Editor links, Canvas rechts).
• script.js — setup, draw und die Klassen: die MainEngine als Engine, darunter ihre Module TextUnit, BoxUnit, HoverUnit.
• interactions.js — alles, was auf Maus und Buttons reagiert (Klassen-Liste, Live-Edit, Fehler-Markierung, Set-Wechsel).
• sets.js — die gespeicherten Sets.
• style.css — das Aussehen.

Lokal starten

Einen kleinen Webserver im Projektordner starten, z. B.:

python3 -m http.server 8000

Dann http://localhost:8000 öffnen.

Hinweis: Die verwendeten Schriften (ABCFavorit, UrsaFont) sind lizenziert und nicht im Repository enthalten. Ohne sie nutzt der Browser eine Ersatz-Monospace-Schrift; das Tool funktioniert trotzdem.

Lizenz

CC BY-NC-SA 4.0 — frei für nicht-kommerzielle Nutzung mit Namensnennung; Bearbeitungen unter gleicher Lizenz. Details in LICENSE.

Bundled libraries (p5.js, Matter.js, Prism, Hydra) in libraries/ haben eigene Lizenzen.

© 2026 Nicolas Birrer