Beispiel

Beschreibung des Beispiels

Hier werden zwei ganz simple Komponenten modular bzw. literal dargestellt bzw. erzeugt.

• Stoppuhr (modular mit HTML-Markup)
• Malreihe (objektorientiert mit literaler Konfiguration in situ)

Die Stoppuhr oben ist nur der Entwurf einer endgültigen Komponente, die dann rein mit JavaScript im DOM gerendert wird. Wenn der Entwurf mit Markup und modularem Skript hinreichend getestet ist, wird der Code einfach in JS objektorientiert (OOP) gekapselt und kann als Komponente wiederverwendet werden, insbesondere mit verschiedenen Konfigurationen. Einfache Komponenten können auch über closures erzeugt und gerendert werden, das ist kürzer als OOP. Welches Entwurfsmuster (pattern) geeigneter ist, hängt von der Komplexität des Moduls/Komponente und Abhängigkeiten von anderen ab. So ist z.B. der DOC-Viewer unten für den Quellcode in jedem Demo-Modul rein mit Closures realisiert (vgl. Quellcode: evo.demo.js). Übrigens hat diese Kombination (Stoppuhr und dynamische Malreihe) bei meinem Schüler und "Testpiloten" JOHAN (10) im Nachhilfeunterricht regen Anklang gefunden! Er wollte freiwillig damit spielen und sehen, wie lange er für die "doofen Malreihen" braucht, ob er schneller geworden ist. Nebenbei kurz noch einmal Thema "Uhr ablesen und Zeitunterschied in Sekunden ausrechnen" wiederholt und nachhaltig eingeübt. Ganz ohne Zwang.

Es folgen nun die "richtigen" Komponenten, die direkt in HTML per JavaScript an Ort und Stelle (inline) instanziiert werden.

Diesen Paragraphen können Sie editieren. Schreiben Sie doch etwas hinein! (z.B. ihre Wunschliste)

Zunächst die aktuell ausgereifteste Komponente, ein Tool für die leidigen "Malreihen" in der Grundschule (Klasse 3). Dies ist eine Instanz der Klasse evo.math.ui.grid.MultixGrid und wird hier, also in situ im script-Tag ihres HTML-Codes erzeugt:

// Create one instance of `evo.math.ui.grid.MultixGrid` in situ:

evo.math.ui.grid.MultixGrid.create(
    {mode: 2, prob: 0.5, multiplicity: true}
).render("div0");

TODO

Noch mehr Instanzen von diversen Komponenten hier mit verschiedenen Konfigurationen und ganz kurzen inline-JavaScripts erzeugen. Vorher natürlich library code laden!

// this is just a hint for final component creations into three DIVs:

evo.math.ui.MyAlgebraComponent.create({
    title:"first instance of MyAlgebraComponent", 
    par:{op: "multiply", primes:[2,3,5,7,11,13,19]}
}).render("div1");

evo.math.ui.MyAlgebraComponent.create({
    title:"second instance of MyAlgebraComponent", 
    par:{op: "add", auto:false;}
}).render("div2");

evo.math.ui.MyAnalysisComponent.create({
    title:"single instance of MyAnalysisComponent", 
    par:{a:2.718, b:3.141, f:"x/(1 + x)", do:"integral"}
}).render("div3");

// etc.