jQuery+CSS+HTML로 만든 야바위.
3개의 컵 중 한 개에 금 공이 들어있다.
컵을 클릭하면 컵을 들어 안에 공이 들었는지 여부를 보여준다.
재시작 버튼을 클릭하면 다시 시작한다.

재시작 버튼을 연달아 한 번 이상 클릭하면 금 공이 어느 컵에도 없게되는 말 그대로 야바위스러운 버그가 있었지만 available Boolean 변수를 추가해 잡았다.

14/8/15 금

오늘의 jQuery 공부 -이벤트와 함수.

* 이벤트 리스너 등록: 요소에 이벤트를 등록하는 bind의 경우 2가지 형태가 있다.

1. 단축 메서드
ex) $("#buttonID").click(function(){ 실행할 내용 });
2. DOM요소를 새로 만드는 등 페이지를 불러온 뒤 추가된 요소에도 이벤트 리스너를 등록할 수 있는 방법.
ex) $("#buttonID").bind('click', function(){ 실행할 내용 });
혹은 .live() 메서드를 이용할 수도 있다.

* 이벤트 트리거:
마우스 이벤트: click, mousedown, mouseup, mouseover, mousemove, mouseout, toggle, dbclick, mouseenter, mouseleave, focusin, focusout, hover.
키보드 이벤트: keydown, keyup, keypress.
폼 이벤트: focus, blur, select, change, submit.
브라우저 이벤트: error, resize, scroll.
문서로딩: load, ready, unload
참고: http://api.jquery.com/category/events/

* 이벤트 제거:
1. 한 개의 이벤트 제거
ex) $("#buttonID").click(function(){ 실행할 내용 });
$("#buttonID").unbind('click'); //#buttonID의 click 이벤트 제거
2. 모든 이벤트 제거
ex) $("#buttonID").click(function(){ 실행할 내용 });
ex) $("#buttonID").bind('focus', function(){ 실행할 내용 });
$("#buttonID").unbind(); //#buttonID의 모든 이벤트 제거

* trigger(): 코드로 이벤트 실행
ex) $("#buttonID").trigger('click'); //#buttonID의 click 이벤트 실행.
$("form").trigger('submit'); //form의 submit 이벤트 실행.

--------------------------------

* 함수 선언하기
1. 함수 선언
ex) function funcName(){ 함수 실행 내용 }
2. 함수 표현식(익명 함수 이용)
ex) var funcName = function(){ 함수 실행 내용 }

* 이름 붙은 함수를 이벤트 핸들러로 이용.
ex) function funcName(){ 함수 실행 내용 }
$("#buttonID").click(funcName);

* 함수의 매개변수와 반환값:
매개변수로는 객체, 요소, 변수값 등을 넘길 수 있다.
함수에 반환값을 명시하지 않으면 undefined를 반환한다.(호출한 코드에서 undefinde를 처리할 수 없으면 에러가 나므로 반환값을 명시하는 편이 좋다. 애매하면 return false;)
ex) function add(a, b){ return a+b; }
var c = add(2, 3); //c는 5라는 값을 갖는다.

--------------------------------

* .each() 메서드: 배열내 모든 요소를 순환하는 메서드
ex) $("#buttonID").each(function(index, value){ 반복실행할 내용 });
each의 매개변수 index는 루프에서 현재 어딨는지를 나타내는 변수로 선택자가 반환하는 첫요소는 0, value는 현재 요소를 나타내며 each() 메서드 루프안에서는 this와 같다.

* $.contains(first, second) 메서드: 첫번째 매개변수의 자식 요소들을 모두 확인하여 두번째 매개변수가 있는지 확인.

//jQuery 코드: 
$(document).ready(function(){ //브라우저가 준비되면
	hideCode();
	$("#resetBtn").click(function(){ //리셋 버튼을 마우스로 클릭시
		$(".pic").each(function(){
			$(this).bind('click', picClick);
			$(this).html("<div style='cursor:hand/'><img src='cup1.jpg'/>");
			$(this).css({"border": "solid #000 3px" });
		});
		hideCode();
	});
	$(".pic").click(picClick);//각 컵 이미지 클릭시 
	function randNum(num){ //0~num사이 랜덤 값 생성하여 반환
		return Math.floor(Math.random()*num);
	}
	function hideCode(){ //정답 무작위로 선택해 붙여두기
		var rn = randNum(3);
		$(".pic").each(function(index, value){
			if(rn == index){
				$(this).append("<span id='correct'></span>");
				$("#textExplain").html("금 공은 어느 컵에 있을까요? "+rn);
				return false;
			}
		});
	}
	function picClick(){
		$(this).css({"border": "solid #f0c62f 3px" });
		if($.contains(this, document.getElementById("correct"))){
			$(this).html("<img src='cupBall.jpg'/>");
			$("#textExplain").html("맞췄습니다.");
		}else{ 
			$(this).html("<img src='cupEmpty.jpg'/>");
			$("#textExplain").html("틀렸습니다."); 
			setTimeout(allOpen, 1000); //1초뒤에 모두 열기 함수 호출
		}
		$(".pic").each(function(){ //.pic의 이벤트 리스너 제거.
			$(this).unbind('click');
		});
	}
        function allOpen(){
		$(".pic").each(function(){ //.pic의 이벤트 리스너 제거.
			if($.contains(this, document.getElementById("correct"))){
				$(this).html("<img src='cupBall.jpg'/>");
			}else{
				$(this).html("<img src='cupEmpty.jpg'/>");
			}
		});
	}
});