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

0개의 댓글

Powered by GraphCDN, the GraphQL CDN