Hello World 再び

MSDN上にJavaScriptなUWPのHello Worldドキュメントがあった。

これをTypeScriptで動作させてみたいと思う。

JavaScriptなUWPのHello Worldはこちら。

デザインの変更

例によって、www/index.htmlを開く。

BODYタグの適当なところに追記をする。

    <!--追記-->
    <input id="nameInput" type="text" />
    <button id="helloButton">Say Hello!</button>
    <div id="greetingOutput"></div>
    <!--追記-->

入力ボックスとボタン、表示エリアを追記した。

実行してみる。

ロジックの変更

scripts/index.tsを開いて以下のメソッドを追記する。

    // 追記
    function buttonClickHandler(eventInfo) {
        var userName = (<HTMLInputElement>document.getElementById("nameInput")).value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }
    // 追記

内容自体はシンプルで、ボタンが押されたときに表示エリアへ値を表示する。

注意が必要なのが、JavaScriptの場合、

var userName = document.getElementById("nameInput").value;

でINPUTの入力値が取得できるが、TypeScriptの場合は、valueが無いということでコンパイルエラーになる。

なので、以下のように変更してある。

var userName = (<HTMLInputElement>document.getElementById("nameInput")).value;

あとはボタンを押した時のイベントハンドラを追記する。

とりあえず、onDeviceReadyメソッドに記述した。

            // 追記
            var helloButton = document.getElementById("helloButton");
            helloButton.addEventListener("click", buttonClickHandler, false);
            // 追記

動かしてみる。

無事、入力内容が表示できた。