Java, Spring/15일

15일차 4 - jQuery Test 점수에 따른 학점, style적용 & id로 접근,class로 접근

Caprica Six 2012. 9. 20. 09:44

 

jQuery Test4. 점수입력하면 학점알려주기.

 

<div> division태그를 이용해서 레이어를 구성할 수 있어.

cf. 인터넷에 항상 연결되어 있다면 jquery-1.7.2.js 굳이 안집어놓고 구글에서 제공하는 jQuery라이브러리 사용해도 돼.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="../jquery/jquery-1.7.2.js" ></script> -->
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js04j.js"></script>
</head>
<body>
<div id="man">1</div>
</body>
</html>

그리고 잘 동작되나 확인해보자. (버전까지 찍어 볼거야.)

$(function(){
	alert('jQuery '+jQuery.fn.jquery);
});

 

 

<div>태그안 숫자가 주민번호라고 생각하고 숫자를 클릭하면 남녀성별 표시

$(function(){
//	alert('jQuery '+jQuery.fn.jquery);

//	$('#man').click(function(){
	$('#man').bind("click", function(){ //원래 이게 정석
		var gender = parseInt($(this).text());
		
		switch(gender) {
		case 1:
		case 3: alert('남자입니다.'); break;
		case 2:
		case 4: alert('여자입니다.'); break;
		default: alert('에러입니다.'); break;
		}		
	});
});

 

<div>태그안 숫자를 더블클릭하면 학점을 나타내는 것 작성해볼까

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="../jquery/jquery-1.7.2.js" ></script> -->
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js04j.js"></script>
</head>
<body>
<div id="man">1</div><br/>
<div id="score">95</div>
</body>
</html>


$(function(){
//	alert('jQuery '+jQuery.fn.jquery);

//	$('#man').click(function(){
	$('#man').bind("click", function(){ //원래 이게 정석
		var gender = parseInt($(this).text());
		
		switch(gender) {
		case 1:
		case 3: alert('남자입니다.'); break;
		case 2:
		case 4: alert('여자입니다.'); break;
		default: alert('에러입니다.'); break;
		}		
	});
	
	$('#score').bind("dblclick", function(){
		var grade = parseInt($(this).text()/10);
		switch(grade){
		case 10: 
		case 9: alert('A입니다.'); break;
		case 8: alert('B입니다.'); break;
		case 7: alert('C입니다.'); break;
		case 6: alert('D입니다.'); break;
		default: alert('F입니다.'); break;
		}
	});
});

 

점수입력하고 버튼클릭하면 학점나오게 바꿔보자.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="../jquery/jquery-1.7.2.js" ></script> -->
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js04j.js"></script>
</head>
<body>
<div id="man">1</div><br/>
<input type="text" id="score" />
<input type="button" id="grade" value="확인"/>
</body>
</html>


$(function(){
//	alert('jQuery '+jQuery.fn.jquery);

//	$('#man').click(function(){
	$('#man').bind("click", function(){ //원래 이게 정석
		var gender = parseInt($(this).text());
		
		switch(gender) {
		case 1:
		case 3: alert('남자입니다.'); break;
		case 2:
		case 4: alert('여자입니다.'); break;
		default: alert('에러입니다.'); break;
		}		
	});
	
/*	$('#score').bind("dblclick", function(){
		var grade = parseInt($(this).text()/10);
		switch(grade){
		case 10: 
		case 9: alert('A입니다.'); break;
		case 8: alert('B입니다.'); break;
		case 7: alert('C입니다.'); break;
		case 6: alert('D입니다.'); break;
		default: alert('F입니다.'); break;
		}
	});*/
	$('#score').focus();
	$('#grade').bind("click", function(){
		var grade = parseInt($('#score').val()/10);
		switch(grade){
		case 10: 
		case 9: alert('A입니다.'); break;
		case 8: alert('B입니다.'); break;
		case 7: alert('C입니다.'); break;
		case 6: alert('D입니다.'); break;
		default: alert('F입니다.'); break;
		}	
	});	

});

 

 

 

 

html과 js 파일 분할해서 처리하는 것이 좋다는 걸 보여주기 위해 나눈거고 이제부턴 그냥 하나로 작성할게.

 

jQuery Test 5. style적용 & id로 접근할 때(‘#아이디값’으로), class로 접근할 때(‘.클래스명’으로)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.bg{background-color:yellow;}
</style>
<script type="text/javascript" src="../jquery/jquery-1.7.2.js" ></script>
<script type="text/javascript">
$(function(){
	
	//hobby안에 있는 li에 접근 style적용
	$('#hobby > li').addClass('bg');

	//id로 접근할 때 ('뒹굴기'에 click이벤트 적용)
	$('#roll').click(function(){
		alert($(this).text());
	});
	
	//class로 접근할 때 ('가위눌리'기에 click이벤트 적용)
	$('.nightmare').click(function(){
		alert($(this).text());
	});
	
});
</script>
</head>
<body>
<ul id="hobby">취미
<li>잠자기</li>
<li id="roll">뒹굴기</li>
<li class="nightmare">가위눌리기</li>
</ul>
</body>
</html>