GUI部品とイベント処理の基本をマスターしよう (2/5)

基本的な部品ができたところで、ボタンにイベント処理を割り付けましょう。配置したボタンの部品を右クリック（またはCtrlキー＋クリック）すると、メニューがポップアップして現れます。その中の＜イベント＞というところに、利用可能なイベントの種類がサブメニューとして表示されます。

ここでは、＜onclick＞サブメニューを選んでください。ウインドウの上部から「ビヘイビアを追加」シートが現れます。この「ハンドラ」に、割りつけるJavaScriptの関数名を入力します。ここでは、「button1Click」と入力して「追加」ボタンを押しましょう。

画面の下にJavaScriptのソースコードエディタが現れます。そして、以下のような関数が表示されます。

function button1Click(event)
{
    // ここにコードを挿入
}

これが、ボタンのonclickに設定した関数です。ここに、実行させたい処理を記述すればいいわけですね。では、下に掲載したリストのように修正をしてみましょう。

先程、各部品にIDの属性を設定しました。したがって、JavaScriptではgetElementByIdを使って、その部品のDOMオブジェクトを取得することができます。入力フィールドを取り出してそこからvalueのテキストを取り出し、テキストにinnerHTMLでメッセージを表示する、ということを行っています。処理そのものは既にやったことばかりですから、それほど難しくはありませんね。

記述したら、ウインドウ左上に見える「実行」ボタンを押してWebアプリを実行してみましょう。ボタンをクリックすると、iOSエミュレータが起動し、その中でSafariが実行され、作成したWebアプリが表示されます。実際にテキストを書いてボタンを押し、表示が変わるのを確認してみましょう。

いかがですか、マウスを使って画面をデザインし、イベントを割りつけた必要最低限のところで処理を記述すると、Webアプリが完成します。非常に簡単でしょう？

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※修正する関数

function button1Click(event)
{
	var field1 = document.getElementById("field1");
	var msg = "「" + field1.value + "」と書きました。";
	var text1 = document.getElementById("text1");
	text1.innerHTML = msg;
}