02.HelloWorld
Last modified by masaru-yokoyama on 2013/07/16, 14:16
チュートリアル目次
HelloWorld
ボタンを押すと"Hello, World!"というアラートを表示する簡単なアプリケーションを作成してみましょう。
3ステップで、hifiveを使ったアプリケーションは作成できます。
- まず、hifive MVCモデルの肝であるコントローラを定義し、
- 次に、コントローラを特定のHTML要素に対応付(バインド)します。
- 最後に、対応付されたHTML要素内の操作に対応した処理をイベントハンドラとして定義します。
1.JSファイルを作成します("step3.js"だとします)。
$(function() {
var helloWorldController = {
__name: 'HelloWorldController',
'#btn click': function() {
alert('Hello, World!');
}
};
h5.core.controller('#container', helloWorldController );
});
var helloWorldController = {
__name: 'HelloWorldController',
'#btn click': function() {
alert('Hello, World!');
}
};
h5.core.controller('#container', helloWorldController );
});
- 2行目から8行目までで、「コントローラ」を定義しています。
- 3行目の__nameはコントローラの名前を表します。__name プロパティは必須プロパティで、記述がない場合エラーが発生します。
- 5行目から7行目まではイベントハンドラの定義です。
- hifiveでは、イベントハンドラを「(この条件にマッチする要素で) (このイベントが発生したら): (この関数を実行する)」という形式で定義します。
（次のステップで詳しく説明します。）
ここでは「id が btn である要素で click イベントが発生したら、alert()を実行する」というコードになっています。 - 10行目で、コントローラを要素にバインドしています。ここでは id が container である要素にバインドしています。
コントローラを実際に動作させるためには要素にバインドする必要があります。
2.HTMLを用意し、上のJSファイルを読み込みます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<!-- ここで作成したjsファイルを読み込む -->
<script src="step3.js"></script>
<title>hifive Hello World</title>
</head>
<body>
<div id="container">
<input type="button" id="btn" value="hello world!" />
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<!-- ここで作成したjsファイルを読み込む -->
<script src="step3.js"></script>
<title>hifive Hello World</title>
</head>
<body>
<div id="container">
<input type="button" id="btn" value="hello world!" />
</div>
</body>
</html>
3.動作確認
id="btn"で定義されたボタンをクリックする事で、
コントローラ内に定義されたイベントハンドラが動き
'Hello, World!'というダイアログが表示されたかと思います。
動作確認
無事Hello Worldできたでしょうか？
次は、インタラクション処理の中心となる「コントローラ」について学びましょう。
次のステップ ⇒ チュートリアル03.コントローラ
動かない場合
- HTMLは正しく記述されていますか？
- 特に、<input>タグでidがない/間違っていると、イベントハンドラで記述したセレクタにマッチせず、ハンドラが動作しません。
- 開発者ツールでエラーが出ていませんか？
- 最近のブラウザでは、開発者ツールが内蔵されています。（Firefoxでは、FireBugもお勧めです。）
F12キーを押すと開発者ツールが現れます。開発者ツールのコンソールを開いてリロードし、エラーが出ていないか確認してください。
- 最近のブラウザでは、開発者ツールが内蔵されています。（Firefoxでは、FireBugもお勧めです。）
- コントローラに__nameプロパティは記述されていますか？
- __nameは必須プロパティです。
- セレクタは正しく記述されていますか？
- 要素をid属性で指定する場合、#を先頭につけてid名を指定する必要があります。
- セレクタとイベント名の間にはスペースが必要です。