jQuery基礎講座2

jQuery 基礎講座第２回
2013.08.02
jQueryを使ってアプリケーションを作ってみる
 よくあるメール送信フォームの入力チェック機能を作ってみる
 仕様
- 名前、メールアドレス、件名(プルダウン)、本文、送信ボタン
- 入力項目は全て入力必須とする
- 名前は100byteまで、本文は200byteまで
- メールアドレスは形式チェックを行う
- 入力内容に誤りがあればモーダルでエラー内容を表示する
- 以上のチェックを通れば入力値に誤り無しとして、送信確認ダイアログを表示
OKをクリックしたらメール送信
Page 2
仕様をフローチャートで表すと
画面を表示
フォーム入力
送信ボタンをクリック
JavaScriptでの処理
入力値を取得
ダイアログで送信確認
キャンセル
入力値を検証
送信OK
モーダルで
アラート表示
エラーあり
エラーなし
メール送信
Page 3
必要となる処理
 送信ボタンをクリックしたら処理を行う
- $(‘セレクタ’).click(function(){ 処理 });
 フォームに入力された値の取得
- $(‘セレクタ’).val();
 値が指定の条件にマッチするか？
- if ( 条件式 ) { 条件がOKの場合の処理 }
 アラートのモーダル、確認ダイアログを出す
- モーダルの作成（今回はTwitter Bootstrapを使う）
- document.confirm(‘確認メッセージ’)
Page 4
jQUeryでプログラムを書くには
 $(function(){
// ここに処理を記述する
// 読み込まれたら処理が開始される
});
 $(document).ready(function(){
// ここに処理を記述する
// ただしこちらはDOMが構築された後のタイミングで処理が行われる
});
 通常は上記のいずれかの中でjQueryを使ったJavaScriptのプログラムを書く
Page 5
JavaScriptの構文
 変数の作成
- var 変数名 = 代入する値;
 変数の型
- 文字列型（string）
例：あいうえお、abc、=+,
- 整数型（integer）
例：1, 100, -200
- 浮動小数点型（float）例：1.2, 100.0
- 論理型（boolean）
例： true, false
 条件分岐
- If (10 / 5 == 2) { // ここの処理を実行する }
Page 6

Download Report