6/23 개발일지

정명환·2022년 6월 23일
jquery
0

대구 ai 스쿨

목록 보기
42/79

1)학습한 내용

jQuery 효과

jQuery는 선택자로 선택된 태그를 사라지게 하거나 나타나게 할 수 있다.

hide : 선택된 태그를 사라지게 함
show : 선택된 태그를 나타나게 함
toggle : 사라지거나 나타나는 상태를 전환
hide(시간), show(시간), toggle(시간) : 지정된 시간만큼 애니메이션 효과가 나타난다
(시간은 “slow”라는 문자열을 넣어주면 적당히 느린 시간, “fast”를 넣어주면 적당히 짧은시간이 선택된다.)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function div_hide(){
		//$("#a1").hide();
		//$("#a1").hide(1000);
		$("#a1").hide("slow");
		//$("#a1").hide("fast");
	} 
	
	function div_show(){
		//$("#a1").show();
		//$("#a1").show(1000);
		//$("#a1").show("slow");
		$("#a1").show("fast");
	}
	
	function div_toggle(){
		//$("#a1").toggle();
		$("#a1").toggle(1000);
		//$("#a1").toggle("slow");
		//$("#a1").toggle("fast");
	}
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick = "div_hide()">hide</button>
	<button onclick = "div_show()">show</button>
	<button onclick = "div_toggle()">toggle</button>
	<div id="a1"></div>
</body>
</html>

fadeIn : 페이드 효과를 통해 나타나게 한다.
fadeout : 페이드 효과를 통해 사라지게 한다.
fadeToggle : 페이드 효과를 통해 사라지거나 나타나는 상태를 전환한다.
fadeTo : 지정된 투명도 만큼 페이드 아웃한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function div_fadeout(){
		$("#a1").fadeOut(3000);
	}
	
	function div_fadein(){
		$("#a1").fadeIn(3000);
	}
	
	function div_fadetoggle(){
		$("#a1").fadeToggle("slow");
	}
	
	function div_fadeto(){
		$("#a1").fadeTo("slow", 0.3);
	}	
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick="div_fadeout()">fade out</button>
	<button onclick="div_fadein()">fade in</button>
	<button onclick="div_fadetoggle()">fade toggle</button>
	<button onclick="div_fadeto()">fade to</button>
	<div id="a1"></div>
</body>
</html>

slideUp : 위로 슬라이드 되면서 사라진다.
slideDown : 아래로 슬라이드 되면서 나타난다.
slideToggle : 슬라이드 효과를 통해 사라지거나 나타나는 상태
를 전환한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function div_slideup(){
		$("#a1").slideUp("slow");
	}
	
	function div_slidedown(){
		$("#a1").slideDown("slow");		
	}
	
	function div_slidetoggle(){
		$("#a1").slideToggle("slow");	
	}
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick="div_slideup()">slide up</button>
	<button onclick="div_slidedown()">slide down</button>
	<button onclick="div_slidetoggle()">slide toggle</button>
	<div id="a1"></div>
</body>
</html>

callback 함수
앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록 할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function test_callback(){
		$("#a1").hide("slow", function(){
			alert("effect end");
		});
	}
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick="test_callback()">callback 함수 테스트</button>
	<div id="a1"></div>
</body>
</html>

요약 :
show, fade in, slide down을 사용하면 애니메이션 효과와 함께 나타나게 할 수 있다.
hide, fade out, slide up을 사용하면 애니메이션 효과와 함께 사라지게 할 수 있다.
사라지거나 나타날 때 호출되는 함수를 등록해서 사용할 수 있다.

애니메이션

jQuery는 개발자가 직접 애니메이션을 만들어 사용할 수 있도록 지원하고 선택된 태그에 css 값을 새롭게 설정해 주면 중간의 애니메이션을 모두 만들어 주고 태그에 변화를 줄 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function setSize(){
		$("#a1").animate({
			width : 400,
			height : 400
		}, "slow");
	}
	
	function setOpacity(){
		$("#a1").animate({
			opacity : 0
		}, "slow");
	}
	
	function setPosition(){
		$("#a1").animate({
			left : 100,
			top : 100
		}, "slow");
	}
	
	function setBackgroundColor(){
		$("#a1").animate({
			backgroundColor : "red"
		}, "slow");
	}
	
	function setTotal(){
		$("#a1").animate({
			width : 400,
			height : 400,
			opacity : 0.5,
			left : 100,
			top : 100
		}, "slow");
	}
	
	function setSequence(){
		$("#a1").animate({
			width : 400,
			height : 400
		}, "slow").animate({
			left : 100,
			top : 100
		}, "slow").animate({
			opacity : 0.2
		}, "slow");
	}
	
	/*
	function setSequence(){
		$("#a1").animate({
			width : 400,
			height : 400
		}, "slow").delay(1000).animate({
			left : 100,
			top : 100
		}, "slow").delay(1000).animate({
			opacity : 0.2
		}, "slow");
	}	
	*/
</script>
<style>
	#a1{
		border : 1px solid black;
		background-color : yellow;
		width : 200px;
		height : 200px;	
		position : relative;	
	}
</style>
</head>
<body>
	<button onclick="setSize()">size 설정</button>
	<button onclick="setOpacity()">투명도 조절</button>
	<button onclick="setPosition()">위치 이동</button>
	<button onclick="setBackgroundColor()">배경색 설정</button>
	<button onclick="setTotal()">종합 설정</button>
	<button onclick="setSequence()">순차 설정</button>
	<div id="a1"></div>
</body>
</html>

표준 웹 통신

웹 브라우저는 서버에게 파일을 요청하고 이 때 서버는 요청한 파일이 있으면 파일의 내용을 읽어 응답결과로 클라이언트에게 전달 후 응답 결과를 받은 웹 브라우저는 데이터를 분석하여 자신이 스스로 처리 한다.

문제점

  1. 표준 웹 통신은 클라이언트 브라우저가 서버에게 응답 결과를 받게되면 브라우저가 스스로 처리하려고 한다.
  2. 브라우저가 처리할 수 있는 데이터면 스스로 처리하고 그렇지 않으면 다운로드가 된다
  3. 만약 응답 결과가 html 코드이면 html 코드를 통해 화면을 변경하고 이미지, 사운드, 동영상 등 미디어 데이터면 미디어 데이터를 처리할 수 있는 화면으로 변경되어 처리, 즉 웹 브라우저는 처리할 수 있는 데이터를 받게 되면 화면이 변경된다.

Ajax 통신
Ajax 통신은 서버와 통신시 서버로 부터 받은 응답 결과를 웹 브라우저에 반영하지 않고 JavaScript로 처리할 수 있도록 고안된 통신 방식이다.

이를 이용하면 서버와의 통신은 정상적으로 이루어 지며 화면은 변경되지 않기 때문에 화면의 일부분만을 변경하는 등의 작업이 가능하다.
오늘날 웹 애플리케이션을 개발할 때 많이 사용하는 통신 기술이다.
Ajax 통신은 같은 도메인으로 요청할 수 있는 파일만 요청 가능하다.

jQuery Ajax 통신
Ajax 통신은 브라우저의 종류나 버전에 따라 작성하는 코드가 다르다. 이에 jQuery는 개발자가 손쉽게 Ajax 통신을 할 수 있도록 함수를 만들어 제공한다.

load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
get : get 방식으로 ajax 통신
post : post 방식으로 ajax 통신
ajax : ajax 통신을 위한 종합적인 모든 기능을 제공하는 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function getText(){
		$.ajax({
			url : "data1.txt",
			type : "post",
			dataType : "text",
			success : function(rec_data){
				$("#result").text(rec_data);
			}
		});
	}
	
	function getHtml(){
		$.ajax({
			url : "data2.html",
			type : "post",
			dataType : "html",
			success : function(rec_data){
				$("#result").html(rec_data);
			}
		});
	}
	
	function getXml(){
		$.ajax({
			url : "data3.xml",
			type : "post",
			dataType : "xml",
			success : function(rec_data){
				var data = $(rec_data).find("data");
				
				$(data).each(function(idx, obj){
					var str1 = $(obj).find("str1");
					var str2 = $(obj).find("str2");
					
					var str11 = $(str1).text();
					var str22 = $(str2).text();
					
					$("#result").append("str1 : " + str11 + "<br/>");
					$("#result").append("str2 : " + str22 + "<br/>");
				});				
			}
		});
	}
	
	function getJson(){
		$.ajax({
			url : "data4.json",
			type : "post",
			dataType : "json",
			success : function(rec_data){
				$("#result").append("data1 : " + rec_data.data1 + "<br/>");
				$("#result").append("data2 : " + rec_data.data2 + "<br/>");
				$("#result").append("data3 : " + rec_data.data3 + "<br/>");
			}
		});
	}
</script>
</head>
<body>
	<button onclick="getText()">문자열 데이터</button>
	<button onclick="getHtml()">HTML 데이터</button>
	<button onclick="getXml()">XML 데이터</button>
	<button onclick="getJson()">JSON 데이터</button>
	<div id="result"></div>
</body>
</html>

2) 학습내용 중 어려웠던 점

X

3) 해결방법

X

4) 학습소감

ajax통신을 처음 접하면서 일정부분만을 변경하는 것이 무엇 때문에 필요하게 되었을까? 생각해보는 계기가 되었고 기존 통신에 비해 굉장히 융통성이 있다는 것을 알게되었습니다.

profile
정명환
JAMIHs
이전 포스트

6/22 개발일지

다음 포스트

6/24 개발일지

0개의 댓글