HTMLとJavaScriptの基本コードを覚えよう！ (3/4)
作成:2012-11-10 11:27
更新:2012-11-10 11:27
更新:2012-11-10 11:27
■簡単なサンプルを作ってみよう
では、実際に簡単なサンプルを作って動かしてみましょう。まず、default.htmlの<body>に簡単なGUIを追加します。下のリスト欄にように修正して、入力フィールドとボタンを用意しましょう。
続いてスクリプトです。これも下のリスト欄にサンプルを用意しておきました。これをdefault.jsの一番最後に追記します。「一番最後に」というのは、app.start();の後にある})();の更にその後に追加する、ということです。つまり、デフォルトで用意されている匿名関数の後に書く、ということになります。
これでプロジェクトをビルドし実行してみてください。入力フィールドとボタンが表示されますね。ここでテキストを書いてボタンを押すと、その上にメッセージが表示されます。とりあえず、ごく初歩的なものですがプログラムを書いて動かすことができました！
JavaScriptをかじっているなら、今回のスクリプトの内容は改めて説明するまでもないでしょうが、一応簡単にまとめておきましょう。まず、入力フィールドと、メッセージを表示する<p>タグのDOMオブジェクトをそれぞれ変数に取得します。
基本的には、Webページと違いはありません。注意点としては、「用意されている匿名関数の外に書く」という点だけです。
――ただし、この書き方は、あまりほめられるものではありません。グローバルな関数として処理を用意するわけで、「必要ないものは極力プライベートに」というWindows Storeアプリの設計思想にも反しており、あまりおすすめできるやり方とはいえません。
続いてスクリプトです。これも下のリスト欄にサンプルを用意しておきました。これをdefault.jsの一番最後に追記します。「一番最後に」というのは、app.start();の後にある})();の更にその後に追加する、ということです。つまり、デフォルトで用意されている匿名関数の後に書く、ということになります。
これでプロジェクトをビルドし実行してみてください。入力フィールドとボタンが表示されますね。ここでテキストを書いてボタンを押すと、その上にメッセージが表示されます。とりあえず、ごく初歩的なものですがプログラムを書いて動かすことができました！
JavaScriptをかじっているなら、今回のスクリプトの内容は改めて説明するまでもないでしょうが、一応簡単にまとめておきましょう。まず、入力フィールドと、メッセージを表示する<p>タグのDOMオブジェクトをそれぞれ変数に取得します。
var field = document.getElementById("text1");
var msg = document.getElementById("msg");document.getElementByIdは、JavaScriptを書いたことがあるならおなじみのものですね。これでIDを指定してオブジェクトを取得し、それから入力フィールドに書かれたテキストを使ってメッセージを表示します。msg.textContent = "You type: " + field.value;textContentは、<p>タグのように開始タグと終了タグの間のテキストを設定するものです。一般にはinnerHTMLなどのほうが馴染みがあるかもしれませんね。
基本的には、Webページと違いはありません。注意点としては、「用意されている匿名関数の外に書く」という点だけです。
――ただし、この書き方は、あまりほめられるものではありません。グローバルな関数として処理を用意するわけで、「必要ないものは極力プライベートに」というWindows Storeアプリの設計思想にも反しており、あまりおすすめできるやり方とはいえません。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※default.htmlの<body>を以下のように修正
<body>
<p id="msg">Please type your name:</p>
<input type="text" id="text1" />
<button onclick="doAction(event);">Click</button>
</body>
※default.jsの末尾に以下を追加
function doAction(event) {
var field = document.getElementById("text1");
var msg = document.getElementById("msg");
msg.textContent = "You type: " + field.value;
}
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る