LZX言語とJavaScript 2
JavaScript
OpenLaszloのJavaScriptは、ECMAScript（ECMA-262）に準拠したスクリプト言語です。変数の型がゆるいといった特徴があります。JavaScriptのコードは、script・method・handlerタグの中に記述できます。
JavaScriptのコードはタグの中に記述するので、&・>・<といった特殊文字はタグ一部と認識されてしまい、そのままでは使用できません。
<script>
// < は < で記述しないとコンパイルエラーになる
if (a < 5) {
：
省略
：
}
</script>
JavaScriptのコードを<[CDATA[ ・・・ ]]>で括れば、<を記述してもコンパイルエラーになりません。
<script><[CDATA[
// < を記述してもコンパイルエラーにならない
if (a < 5) {
：
省略
：
}
]]></script>
グローバル変数、グローバル関数
scriptタグにJavaScriptを記述すると、アプリケーション全体からみえるグローバル変数、どこからでも呼び出せるグローバル関数になります。
<?xml version="1.0" encoding="UTF-8"?>
<canvas debug="true">
<script><![CDATA[
var g_value = 100;
function test(a) {
return g_value + a;
}
]]></script>
</canvas>
LZX言語と同様に、JavaScriptで記述した部分を別ファイルにまとめて記述しておき、インクルードして使用することができます。
ソースを外部ファイルに記述してインクルードして使用する
<?xml version="1.0" encoding="UTF-8"?>
<canvas debug="true">
<!-- common.lzxをインクルード -->
<include href="./common.lzx"/>
<script><![CDATA[
//グローバル関数のtestを呼び出す
Debug.write(test(50));
]]></script>
</canvas>
common.lzxのソース
<?xml version="1.0" encoding="UTF-8"?>
<library>
<script><![CDATA[
var g_value = 100;
function test(a) {
return g_value + a;
}
]]></script>
</library>
クラスのメソッド
LZX言語はオブジェクト思考の言語なので、classタグでクラスを定義することができます。クラスのメソッドをmethodタグに記述します。
<class name="MyClass">
<!-- 引数で値を2つ渡し、a + bの計算結果を返すメソッド -->
<method name="methodA"
args="a,b">
<![CDATA[
return a + b;
]]>
</method>
<!-- 引数で値を2つ渡し、a - bの計算結果を返すメソッド -->
<method name="methodB"
args="a,b">
<![CDATA[
return a - b;
]]>
</method>
</class>
MyClassクラスのmethodAを呼ぶときは以下のようにします。
<script><![CDATA[ var a = new lz.MyClass(); //MyClassを生成する var b; //bに10 + 20の計算結果30がセットされる b = a.methodA(10, 20); ]]></script>
イベントハンドラ
ボタンをクリックしたときの処理はhandlerタグに記述します。実装方法が3種類あります。
- 方法1. buttonのonclick属性にロジックを記述する方法です。お手軽ですがソースが煩雑になり後から見ると見にくいものになるため、お勧めできません。
ボタンをクリックした時のイベントハンドラをonclick属性に記述する方法
<?xml version="1.0" encoding="UTF-8"?>
<canvas debug="true">
<button onclick="Debug.write('テストです')">JavaScriptのテスト</button>
</canvas>
- 方法2. handlerタグをbuttonの入れ子にして追加してロジックを記述する方法です。画面の記述とロジックが混在することになるので、画面のコントロールの数が多くなるとソースが煩雑になり後から見ると見にくいものになるため、お勧めできません。
ボタンをクリックした時のイベントハンドラをhandlerタグに記述する方法
<?xml version="1.0" encoding="UTF-8"?>
<canvas debug="true">
<button>JavaScriptのテスト
<handler name="onclick">
<![CDATA[
Debug.write('テストです');
]]>
</handler>
</button>
</canvas>
- 方法3. buttonに ID属性 or name属性を設定して、handlerタグに関連づけてロジックを記述する方法です。画面の記述とロジックを分離することができます。
ボタンにID属性を設定してhandlerタグと関連づけをして記述する方法
<?xml version="1.0" encoding="UTF-8"?>
<canvas debug="true">
<button id="btnTest">JavaScriptのテスト</button>
<handler name ="onclick"
reference="btnTest">
<![CDATA[
Debug.write('テストです');
]]>
</handler>
</canvas>
