GUI部品とイベント処理の基本をマスターしよう (2/5)
作成:2011-05-09 08:22
更新:2011-05-09 08:22
更新:2011-05-09 08:22
■イベントをバインドする
基本的な部品ができたところで、ボタンにイベント処理を割り付けましょう。配置したボタンの部品を右クリック(またはCtrlキー+クリック)すると、メニューがポップアップして現れます。その中の<イベント>というところに、利用可能なイベントの種類がサブメニューとして表示されます。
ここでは、<onclick>サブメニューを選んでください。ウインドウの上部から「ビヘイビアを追加」シートが現れます。この「ハンドラ」に、割りつけるJavaScriptの関数名を入力します。ここでは、「button1Click」と入力して「追加」ボタンを押しましょう。
画面の下にJavaScriptのソースコードエディタが現れます。そして、以下のような関数が表示されます。
先程、各部品にIDの属性を設定しました。したがって、JavaScriptではgetElementByIdを使って、その部品のDOMオブジェクトを取得することができます。入力フィールドを取り出してそこからvalueのテキストを取り出し、テキストにinnerHTMLでメッセージを表示する、ということを行っています。処理そのものは既にやったことばかりですから、それほど難しくはありませんね。
記述したら、ウインドウ左上に見える「実行」ボタンを押してWebアプリを実行してみましょう。ボタンをクリックすると、iOSエミュレータが起動し、その中でSafariが実行され、作成したWebアプリが表示されます。実際にテキストを書いてボタンを押し、表示が変わるのを確認してみましょう。
いかがですか、マウスを使って画面をデザインし、イベントを割りつけた必要最低限のところで処理を記述すると、Webアプリが完成します。非常に簡単でしょう?
ここでは、<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; }
※関連コンテンツ
「DashcodeによるiPhone用Webアプリ作成入門」に戻る