第５回「jQueryでのイベント設定」 - 360°スゴイ JAVA SCRIPT 講座

関数とは

関数の基本形

function 関数名() {
   /* プログラム */
}

「関数名」をプログラムに書くと、関数が実行される。

具体的には、

function myFunc(arg) {
    alert(arg);
}

myFunc("hoge");    // alert で「hoge」と表示される
myFunc("hogehoge");    // alert で「hogehoge」と表示される

関数という処理の塊（プログラム群）に、処理を依頼しているイメージ

同じ処理をするとき関数にしておけば、同じプログラムを書かなくて良いのです。

function myFunc( a, b ) {
    var d = a * b;
    return d;
}

var sum = myFunc( 34, 29 );
alert(sum);

return という命令で関数を呼び出した元に結果のデータを送ることができます。

関数という処理の塊（プログラム群）に、処理を依頼しているイメージ

• 処理が行われるだけ（return文なし）
• 処理が行われて処理結果を教えてくれる（return文あり）
• 　→　処理結果が帰ってくる場合は、それを箱（変数）に入れる

グローバル変数とローカル変数

function myFunc() {
    var d = "かんすうです！";
    alert( "関数内表示：" + d );
}

myFunc();     // 関数実行

関数内で作った変数（箱）は、関数が終わったら消滅します。

function myFunc() {
    var d = "かんすうです！";
    alert( "関数内表示：" + d );
}

myFunc();     // 関数実行
alert("d変数は " + d );

グローバル変数はどこからでも使えるよ（消滅しないよ）

var g = "ぐろーばるです！";

function myFunc() {
    var d = "かんすうです！";
    alert( "関数内表示g：" + g );
    alert( "関数内表示d：" + d );
}

myFunc();     // 関数実行
alert( "表示g：" + g );
alert( "表示d：" + d );

イベントドリブン

イベント駆動型プログラミング

（３）jQueryイベント処理

要素がブラウザに読み込まれたら実行

$("要素").ready(関数);

• イベント雛形

  $("要素").ready(function(ev){
  /* 実行内容 */
  });
  

DOM読み込みが完了し、ページ作成が作成されたときのイベント

$(document).ready(関数);

　↓省略
$(関数);

• イベント雛形

  $(function(){
  /* DOMがすべて読み込まれたときの実行内容 */
  });
  

jQueryのイベント設定、ホームページ表示直前に実行したいプログラムは、

<script language="JavaScript">
<!--

$(function(){
	// ★ 必ずこの位置にjQueryイベント設定を書きます！
});

-->
</script>

下記のクリックイベントの場合なら、

<script language="JavaScript">
<!--

$(function(){

	 $("#hoge").click(function(ev){
		/* クリック時の実行内容 */
	});

});

-->
</script>

要素上でクリックされたら実行

$("要素").click(関数);

• イベント雛形

  $("要素").click(function(ev){
  /* 実行内容 */
  });
  

要素上でダブルクリックされたら実行

$("要素").dblclick(関数);

• イベント雛形

  $("要素").dblclick(function(ev){
  /* 実行内容 */
  });
  

要素上でマウスが動かされたら実行

$("要素").mousemove(関数);

• イベント雛形

  $("要素").mousemove(function(ev){
  /* 実行内容 */
  });
  

要素上にマウスカーソルが入ってきたら実行

$("要素").mouseover(関数);

• イベント雛形

  $("要素").mouseover(function(ev){
  /* 実行内容 */
  });
  

クリックされるごとに関数1、関数2を交互に実行

$("要素").toggle(関数1, 関数2);

• イベント雛形

  $("要素").toggle(function(){
  /* 実行内容1 */
  }, function(){
  /* 実行内容2 */
  });
  

select で選択肢が変更された時や、フォームに入力された内容が変更されたら実行

$("要素").change(関数);

• イベント雛形

  $("要素").change(function(ev){
  /* 実行内容 */
  });
  

要素中のテキスト(文字列)が選択されたら実行

$("要素").select(関数);

• イベント雛形

  $("要素").select(function(ev){
  /* 実行内容 */
  });
  

送信ボタンがクリックされたら実行

$("要素").submit(関数);

• イベント雛形

  $("要素").submit(function(ev){
  /* 実行内容 */
  });
  

jQuery イベント

http://semooh.jp/jquery/api/events/

jQueryイベント処理のイメージ

要素に対してイベントを設定する

$("#hoge").click(function(ev){
    $("#top").css("color","blue");
});

１つの要素に対してたくさんイベントを設定できる

$("#hoge").click(function(ev){
    alert("クリックされた");
});
$("#hoge").mouseover(function(ev){
    alert("まうすおーばー");
});

（演習１）イベントを使ってみよう

（１）HTMLで下記の要素を持つページを作ってみよう

• 画像
• 「表示」という文字
• 「非表示」という文字
• 「私を押して」という文字

（２）イベントを設定しよう

• 「非表示」をクリックすると画像が非表示
• 「表示」をクリックすると画像が表示

（３）違うイベントを設定しよう

• 「非表示」をクリックすると画像がスライドアップ
• 「表示」をクリックすると画像がスライドダウン

（４）イベントを追加しよう

• 「私を押して」をクリックすると「私を押して」という文字列が赤色に！

（５）toggleイベントを使ってみよう

• 「私を押して」をクリックすると「私を押して」という文字列が赤色と青色に交互に変化（toggleイベント）

（演習２）ゲームを作ってみよう

ゲーム画面HTML

（１）自分のカード（手前のカード）のどれかをクリックしたら、クリックしたカード以外を消しましょう

（２）自分のカード（手前のカード）のどれかをクリックしたら、ランダムで相手のカードを決定して決定したカード以外を消しましょう

ランダム処理

• ０～２までのどれかの数字が取得できる（ランダム）

var rnd = Math.floor(Math.random()*3);

• １～５までのどれかの数字が取得できる（ランダム）

var rnd = Math.floor(Math.random()*5+1);

宿題

作ったゲームを拡張しよう。

• クリック時に「勝利」「敗北」「引き分け」という文字列を画面上に出そう
• 「再ゲーム」という文字をクリックすると、再ゲームが始まるようにしよう（全部のカードを表示させる＆新しいランダムを変数に入れる）

余裕がある人は

• デザインをちゃんとつけよう（クリックしてもデザインが崩れないように）