OpenLaszloのプログラミングと標準コントロール

第2回

LZX言語とJavaScript 2

JavaScript

　OpenLaszloのJavaScriptは、ECMAScript（ECMA-262）に準拠したスクリプト言語です。変数の型がゆるいといった特徴があります。JavaScriptのコードは、script・method・handlerタグの中に記述できます。

　JavaScriptのコードはタグの中に記述するので、&・>・<といった特殊文字はタグ一部と認識されてしまい、そのままでは使用できません。

<script>
  // < は &lt; で記述しないとコンパイルエラーになる
  if (a &lt; 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>