今回はスクリプトの書き方というより,
<script>
<script>内に書かれたスクリプトは,
グローバル変数の定義
<script>内にグローバル変数を定義することができます。ここでいうグローバルとは,
リスト1ではtxt変数に格納された文字列を参照するためにコンストレイント式を使っています。グローバル変数であるtxt変数の内容はいつでもどこでも参照できます。
ちなみにリスト1にあるような<text text="…">という書き方は<text>…</text>と同じ意味です。
リスト1 グローバル変数の例
<canvas proxied="false" bgcolor="0xffffcc">
<script>
var txt = "こんにちは";
</script>
<simplelayout/>
<text text="${txt}"/>
<button text="${txt}"/>
<checkbox text="${txt}"/>
</canvas>
リスト1サンプル
グローバル関数の定義
<script>内にグローバル関数を定義することができます。
リスト2ではボタンをクリックした時に,
リスト2 グローバル関数の例
<canvas proxied="false" bgcolor="0xffffcc">
<script>
var txt = "移動";
function moveWin(){
var increment = 20;
win.setAttribute('x', win.x + increment);
}
</script>
<button text="${txt}" onclick="moveWin();"/>
<window x="50" y="30" width="150" height="100" title="ウインドウ" id="win">
</window>
</canvas>
リスト2サンプル
<method>
<method>を使うと,
<method>にはname属性で名前を付ける必要がありますが,
メソッド名の設定はたとえば<method name="sample">のように記述し,
リスト3の例では全く同じ内容のmoveWin()メソッドを<canvas>直下とウインドウタグ内に定義しています。ボタン1を押すと(1)のmoveWin()メソッド,
リスト3 メソッドの例
<canvas proxied="false" bgcolor="0xffffcc">
<!--(1)canvas直下の自作メソッド-->
<method name="moveWin">
var increment = 20;
win.setAttribute('x', win.x + increment);
</method>
<button text="ボタン1" onclick="canvas.moveWin();"/>
<button y="25" text="ボタン2" onclick="win.moveWin();"/>
<window x="50" y="50" width="150" height="100" title="ウインドウ" id="win">
<!--(2)windowタグの自作メソッド-->
<method name="moveWin">
var increment = 20;
win.setAttribute('x', win.x + increment);
</method>
</window>
</canvas>
リスト3サンプル
メソッドはargs属性を使って引数を受け取ることができます。リスト4では
リスト4 メソッドの引数
<canvas proxied="false" bgcolor="0xffffcc">
<button text="ボタン" onclick="win.moveWin(20);"/>
<window x="50" y="30" width="150" height="100" title="ウインドウ" id="win">
<method name="moveWin" args="increment">
win.setAttribute('x', win.x + increment);
</method>
</window>
</canvas>
リスト4サンプル
メソッドはreturnを使って値を戻すことができます。リスト5では,
リスト5 メソッドの戻り値
<canvas proxied="false" bgcolor="0xffffcc">
<!--足し算メソッド-->
<method name="add" args="n1,n2">
return n1+n2;
</method>
<simplelayout/>
<button text="ボタン" >
<handler name="onclick">
var ans = canvas.add(2,3);
res.setAttribute('text', ans);
</handler>
</button>
<text id="res"/>
</canvas>
リスト5サンプル