Zum Inhalt

Javascript

Wenn du Cinderella als Applet in einem Internet-Browser verwendest, kannst du Cinderella und deine HTML-Seite über JavaScript verbinden. Die Kommunikation ist bidirektional. Die Cinderella-Konstruktion kann die HTML-Seite über Ereignisse benachrichtigen, die auftreten, und die Konstruktion kann auf Ereignisse auf der HTML-Seite reagieren, wie z. B. das Drücken einer Schaltfläche.

Es gibt viele mögliche Szenarien, in denen man die JavaScript-Erweiterungen verwenden möchte. Hier sind einige davon.

  • Steuerung durch HTML-Schaltflächen: In vielen Demonstrationsapplets kann es guter Stil sein, eine Demonstration durch Drücken einer Schaltfläche im erklärenden Text auszulösen. Eine solche Schaltfläche könnte eine Konstruktion beispielsweise in eine spezielle Konfiguration verschieben.

  • Erklärung von Teilen der Konstruktion: Die Mouseover-Funktionalität von JavaScript kann verwendet werden, um bestimmte Erklärungen im HTML-Text mit Ereignissen im Applet zu verknüpfen.

  • Benachrichtigung: Es kann nützlich sein, deinen HTML-Text über Ereignisse zu benachrichtigen, die in Cinderella auftreten. Somit kannst du Warnfenster anzeigen oder den Text auf deiner HTML-Seite ändern, um etwas zu erklären.

Cinderella von JavaScript aus aufrufen

Im Grunde kannst du CindyScript-Befehle von JavaScript aus ausführen. Durch diese Operationen ist es beispielsweise möglich,

  • Funktionen in CindyScript aufzurufen,
  • die Werte von Variablen in CindyScript zu ändern,
  • Elemente deiner Konstruktion zu verschieben oder
  • das Erscheinungsbild von Elementen zu ändern.

Zu diesem Zweck ist es wichtig, dass dein Cinderella-Applet einen zugeordneten Namen hat, der als Griff für JavaScript-Befehle verwendet wird. Der Name wird im Applet-Tag deines HTML-Codes unter Verwendung des name-Parameters angegeben, zum Beispiel mit name="CindyJSDemo". Mit diesem Griff kann JavaScript eine beliebige CindyScript-Anweisung über die Funktion doCindyScript(<statement>) aufrufen. Die Anweisung wird als String angegeben. Dieser String wird geparst und ausgeführt, wenn die Funktion doCindyScript aufgerufen wird. Das folgende Codestück veranschaulicht dieses Verfahren. Es zeigt, wie man vier Schaltflächen im HTML-Text bereitstellt, die einen Punkt D in verschiedenen geometrisch interessanten Positionen bezüglich A, B und C platzieren.

<script language="JavaScript" type="text/javascript">
   function doScript(c) { document.CindyJSDemo.doCindyScript(c);};

</script>

<input type="button" value="Middle of AB"
       onclick="doScript('D.xy=(A+B)/2');" />
<input type="button" value="Middle of AC"
       onclick="doScript('D.xy=(A+C)/2');" />
<input type="button" value="Middle of BC"
       onclick="doScript('D.xy=(B+C)/2');" />
<input type="button" value="Middle of ABC"
       onclick="doScript('D.xy=(A+B+C)/3');" />
<br>

<applet   name="CindyJSDemo"
          code     = "de.cinderella.CindyApplet"
          archive = "cindyrun2.jar"
          width    = 680
          height   = 336>

... applet specifications ...

</applet>

In der Cinderella-Konstruktion werden nur die vier Punkte A,...,D benötigt, um diesen JavaScript-Code zu verwenden.

Da die CindyScript-Aufrufe beliebig komplex sein können, kann diese Technik für viele verschiedene Zwecke verwendet werden. Durch die Verwendung einer repaint-Anweisung innerhalb des Aufrufs kann man sogar sanfte Übergänge einer Konstruktion von einer Position zu einer neuen auslösen. Leider ist es in JavaScript nicht erlaubt, dass ein String ein gewöhnliches newline-Zeichen enthält. Es kann also vorkommen, dass komplizierte Skriptaufrufe etwas unübersichtlich aussehen. Man kann dieses Problem umgehen, indem man ein Skript in kleinere Strings unterteilt. Das folgende Codestück zeigt den Code für eine Schaltfläche, die die Punkte A, B und C sanft zu den Positionen [0,0], [4,0] und [2,3] verschiebt.

<input type="button" value="Smooth move of ABC" onclick="doScript(
'oldpos=[A.xy,B.xy,C.xy];'+
'newpos=[[0,0],[4,0],[2,3]];'+
'n=40;'+
'repeat(n,i,'+
'  l=i/n;'+
'  pos=l*newpos+(1-l)*oldpos;'+
'  A.xy=pos_1;'+
'  B.xy=pos_2;'+
'  C.xy=pos_3;'+
'  repaint();'+
'  wait(10);'+
');'
);" />

JavaScript von Cinderella aus aufrufen: javascript(<string>)

Umgekehrt ist es auch möglich, JavaScript von CindyScript aus aufzurufen. Dies kann einfach durch Verwendung der CindyScript-Funktion javascript(...) erfolgen. Das folgende Codestück zeigt, wie man eine JavaScript-Warnung auslöst, wenn sich Punkt A dem Ursprung zu nähert (übrigens ein ziemlich nutzloses Stück Code).

if(|A,[0,0]|<1,
  javascript("alert('A is too close to the origin')");
);

🤖 Diese Seite wurde automatisch mit KI (Claude) übersetzt und wartet noch auf Überprüfung. → Alle KI-übersetzten Seiten