コンテンツにスキップ

Javascript

インターネットブラウザのアプレットとしてシンデレラを利用するときは、 JavaScript を通してHTMLページとシンデレラをリンクすることができます。コミュニケーションは双方向です。シンデレラの図面はHTMLページ上でのイベントを通知することができ、ボタンが押されたというようなイベントに反応することができます。

JavaScript を使ういくつかの方法があります。ここで少し示します。

  • HTML のボタンによるコントロール: 説明的なテキストに用意されたボタンを押してアプレットを開始するのがよい方法です。そのようなボタンは、図面を特別な配置に動かすことができます。

  • 図面の説明: JavaScript のマウスオーバー機能は、HTMLのテキストで特定の説明へリンクするのに使えます。

  • 通知: HTMLテキストにシンデレラで起っていることを通知するのは有効でしょう。それにより、注意のウインドウを開いたり、説明ページに移動したりできます。

JavaScript からシンデレラを呼ぶ

基本的に、JavaScriptから CindyScript のコマンドを実行することができます。たとえば次のようなものがあります。

  • CindyScript の関数を使う
  • CindyScript の変数の値を変える
  • 図面の要素を動かす
  • 要素の外観を変える

そのために、シンデレラアプレットに JavaScript のコマンドへのハンドルとして使われる名前があることが大切です。その名前は、たとえば name="CindyJSDemo" というようにHTMLコードのアプレットタグで与えられます。このハンドルを利用して JavaScript は任意の CindyScript 命令文を、関数 doCindyScript(<statement>) で呼び出すことができます。命令文は文字列として与えられます。この文字列は doCindyScript 関数が呼ばれるたびに解析されて実行されます。次のコードがその例です。４つの点A,B,C,Dに対し、HTMLの４つのボタンによって、それぞれ関係する位置に配置します。

<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>

この JavaScript コードを実行するには、シンデレラの図面でA,B,C,Dの点が作図されていればよいのです。

CindyScript の呼び出しが複雑な場合があり、この技術は多くの異る目的のために使われるかもしれません。 repaint 命令を使ってある位置から別の位置へ円滑な移動をさせる弧とができます。残念ながら、JavaScript では、文字列に普通の 改行 を含むことはできません。ですから、複雑なスクリプトが断片化される場合があります。より小さなスクリプトに分割することによってこの問題が回避できます。次のコードは点A,B,Cを、位置 [0,0], [4,0] and [2,3] へ動かすボタンの例です。

<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 を呼ぶ: javascript(<string>)

逆に、CindyScript から JavaScript を呼ぶこともできます。これは、単に CindyScript の関数 javascript(...) を使うだけです。次のコードは、点Aが原点から離れると JavaScript で「A is too close to the origin」警告を出すものです。

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