1. 학습한 내용
jQuery 효과
1. CSS Control
- jQuery는 태그의 css를 제어할 수 있는 함수를 제공
- addClass : css class를 설정
- removeClass : css class를 제거
- toggleClass : 지정된 클래스가 없으면 설정하고 있으면 제거
- css : css 속성을 가져오거나 설정
<script>
function addClass(){
$("#a1").addClass("active");
};
function removeClass(){
$("#a1").removeClass("active");
};
function toggleClass(){
$("#a1").toggleClass("active");
};
</script>
<style>
.active{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1 id="a1">h1 태그</h1>
<button onclick="addClass()">CSS 클래스 추가하기</button>
<button onclick="removeClass()">CSS 클래스 제거하기</button>
<button onclick="toggleClass()">CSS 클래스 전환하기</button>
</body>
<script>
function getCss(){
var v1 = $("#a1").css("background-color");
var v2 = $("#a1").css("color");
$("#result").append("background-color : " + v1 + "<br/>");
$("#result").append("color : " + v2 + "<br/>");
}
function setCss(){
$("#a1").css("background-color", "blue");
$("#a1").css("color", "red");
}
</script>
<style>
#a1{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1 id="a1">h1 태그</h1>
<button onclick="getCss()">css 읽어오기</button>
<button onclick="setCss()">css 설정하기</button>
<div id="result"></div>
</body>
태그
- jQuery는 선택자를 통해 태그를 선택한 후 선택된 태그를 기준으로 다른 태그들을 탐색 할 수 있다.
- 태그 탐색은 html 문서를 탐색할 경우 사용하지만 xml 문서를 탐색하는 용도로 사용하기도 한다.
2. 부모 태그
- parent : 선택된 태그의 부모 태그를 선택
- parents : 선택된 태그의 모든 부모 태그를 선택
- parents(선택자2) : 선택된 태그의 모든 부모 태그 중 선택자2에 해당하는 태그들이 선택
- parentsUntil(선택자2) : 선택된 태그에서 선택자2 태그까지의 모든 부모태그들이 선택
<script>
$(function(){
$("#a4").parent().css("border-color", "red");
$("#a4").parents().css("border-width", "4px");
$("#a4").parents(".c1").css("border-style", "dashed");
$("#a4").parentsUntil(".c1").css("border-style", "dotted");
});
</script>
<style>
div{
border : 2px solid black;
padding : 10px;
}
</style>
</head>
<body>
<div>div tag 1
<div class="c1">div tag 2
<div class='c2'>div tag 3
<div id="a4">div tag 4</div>
</div>
</div>
</div>
</body>
3. 자식 태그
- children : 선택된 태그의 자식 태그들을 선택
- children(선택자2) : 선택된 태그의 자식 태그들 중 선택자2에 해당하는 태그들이 선택
- find(선택자2) : 선택된 태그의 하위 태그들 중 선택자2에 해당하는 태그들이 선택
<script>
$(function(){
$("#a1").children().css("border-color", "red");
$("#a1").children(".c1").css("border-width", "4px");
$("#a1").find(".c3").css("border-style", "dashed");
});
</script>
<style>
div{
border : 2px solid black;
padding : 10px;
}
</style>
</head>
<body>
<div id="a1">
div
<div class="c1">
div 1
<div class="c3">
div 1-2
</div>
</div>
<div class="c2">
div 2
<div>
div 2-2
</div>
</div>
</div>
</body>
4. 같은 계층 태그
- siblings : 선택된 태그와 같은 계층의 모든 태그들이 선택
- siblings(선택자2) : 선택된 태그와 같은 계층의 모든 태그 중 선택자2에 해당하는 태그들이 선택
- next : 선택된 태그 다음 태그가 선택
- nextAll : 선택된 태그의 다음 태그들이 모두 선택
- nextUntil(선택자2) : 선택된 태그 다음 태그들 중 선택자2 까지의 모든 태그들이 선택
<script>
$(function(){
$("#a1").siblings().css("border-color", "red");
$("#a1").siblings(".c2").css("border-style", "dotted");
}); //a1을 기준으로!
</script>
<style>
div{
border : 2px solid black;
padding : 10px;
}
</style>
</head>
<body>
<div class="c1">div 1</div>
<div class="c2">div 2</div>
<div id="a1">div 3</div>
<div class="c1">div 4</div>
<div class="c2">div 5</div>
</body>
5. Next, prev 태그
- next : 선택된 태그 이후 태그가 선택
- nextAll : 선택된 태그 이후의 모든 태그가 선택
- nextUntil(선택자2) : 선택된 태그의 이후 태그들 중 선택자2 까지의 모든 태그들이 선택
- prev : 선택된 태그 이전 태그가 선택
- prevAll : 선택된 태그 이전의 모든 태그가 선택
- prevUntil(선택자2) : 선택된 태그의 이전 태그들 중 선택자2 까지의 모든 태그들이 선택
<script>
$(function(){
$("#a1").next().css("border-color", "red");
$("#a1").nextAll().css("border-style", "dotted");
$("#a1").nextUntil("#a2").css("border-width", "4px");
});
</script>
<style>
div{
border : 2px solid black;
padding : 10px;
margin-bottom : 10px;
}
</style>
</head>
<body>
<div>div 1</div>
<div id="a1">div 2</div>
<div>div 3</div>
<div>div 4</div>
<div id="a2">div 5</div>
</body>
<script>
$(function(){
$("#a1").prev().css("border-color", "red");
$("#a1").prevAll().css("border-style", "dotted");
$("#a1").prevUntil("#a2").css("border-width", "4px");
}); //Until = A~B까지 그 사이, A와 B는 포함안함
</script>
<style>
div{
border : 2px solid black;
padding : 10px;
margin-bottom : 10px;
}
</style>
</head>
<body>
<div id="a2">div 1</div>
<div>div 2</div>
<div>div 3</div>
<div id="a1">div 4</div>
<div>div 5</div>
</body>
6.hide, show, toggle 태그
- hide : 선택된 태그를 사라지게 함
- show : 선택된 태그를 나타나게 함
- toggle : 사라지거나 나타나는 상태를 전환
- hide(시간), show(시간), toggle(시간) : 지정된 시간만큼 애니메이션 효과가 나타남
- 시간은 “slow”라는 문자열을 넣어주면 적당히 느린 시간, “fast”를 넣어주면 적당히 짧은 시간이 선택됨
<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>
7. fadein,fadeout,fadetoggle,fadeto 태그
- fadeIn : 페이드 효과를 통해 나타나게 한다.
- fadeout : 페이드 효과를 통해 사라지게 한다.
- fadeToggle : 페이드 효과를 통해 사라지거나 나타나는 상태를 전환한다.
- fadeTo : 지정된 투명도 만큼 페이드 아웃한다.
<script>
function div_fadeout(){
$("#a1").fadeOut("slow");
}
function div_fadein(){
$("#a1").fadeIn(2000);
}
function div_fadetoggle(){
$("#a1").fadeToggle(2000);
}
function div_fadeto(){
$("#a1").fadeTo("slow", 0.3); // 투명도 30%
}
</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>
8.slideup/down, slidetoggle 태그
- slideUp : 위로 슬라이드 되면서 사라진다.
- slideDown : 아래로 슬라이드 되면서 나타난다.
- slideToggle : 슬라이드 효과를 통해 사라지거나 나타나는 상태를 전환한다.
<script>
function div_slideup(){
$("#a1").slideUp("fast");
}
function div_slidedown(){
$("#a1").slideDown("fast");
}
function div_slidetoggle(){
$("#a1").slideToggle("fast");
}
</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>
9.callback 태그
- 앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록할 수 있다.
<script>
function test_callback(){
$("#a1").toggle("slow", function(){
alert("effect end"); // toggle 사용 시 alert 2가지를 각각 나타나게 할 수있나?
});
}
</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>
10. Animation 태그
- jQuery는 개발자가 직접 애니메이션을 만들어 사용할 수 있록 지원
- 선택된 태그에 css 값을 새롭게 설정해 주면 중간의 애니메이션을 모두 만들어 주고 태그에 변화를 줌
- Animate : 지정된 css 속성을 애니메이션 효과와 함께 지정
- Animate({}) : 지정된 객체의 css 속성들을 애니메이션 효과와 함께 지정
- jQuery UI 라이브러리를 사용하면 좀 더 다양한 효과를 만들수 있다
<script>
function setSize(){
$("#a1").animate({
width : 400,
height : 400
}, "slow");
}
function setOpacity(){
$("#a1").animate({
opacity : 0.5
}, "slow");
}
function setPosition(){
$("#a1").animate({
left : 100,
top : 100
}, "slow");
} // 버전이 업데이트되면서 style에 position : relative를 추가해야 사용 가능하다
function setBackgroundColor(){
$("#a1").animate({
backgroundColor : "red"
}, "slow");
} // jQueryUI를 사용해야 한다
function setTotal(){
$("#a1").animate({
width : 400,
height : 400,
opacity : 0.5,
left : 100,
top : 100
}, "slow");
} // 한꺼번에!
function setSequence(){
$("#a1").animate({
width : 300,
height : 300,
}, "slow").animate({
left : 100,
top : 100
}, "slow").animate({
opacity : 0.5
}, "slow");
} // 순차적으로!!
/* function setSequence(){
$("#a1").animate({
width : 300,
height : 300,
}, "slow").delay(1000).animate({
left : 100,
top : 100
}, "slow").delay(1000).animate({
opacity : 0.5
}, "slow");
} delay를 줘서 사용할 수 있다 */
</script>
<style>
#a1{
border : 1px solid black;
background-color : skyblue;
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>
11.Ajax 태그
-
표준 웹 통신
-웹 브라우저는 서버에게 파일을 요청
-이 때 서버는 요청한 파일이 있으면 파일의 내용을 읽어 응답결과로 클라이언트에게 전달
-응답 결과를 받은 웹 브라우저는 데이터를 분석하여 자신이 스스로 처리
-
표준 웹 통신의 문제점
-표준 웹 통신은 클라이언트 브라우저가 서버에게 응답 결과를 받게되면 브라우저가 스스로 처리하려고 함
-브라우저가 처리할 수 있는 데이터면 스스로 처리하고 그렇지 않으면 다운로드가 됨
-만약 응답 결과가 html 코드이면 html 코드를 통해 화면을 변경하고 이미지, 사운드, 동영상 등 미디어 데이터면 미디어 데이터를 처리할 수 있는 화면으로 변경되어 처리, 즉 웹 브라우저는 처리할 수 있는 데이터를 받게되면 화면이 변경 -
Ajax 통신
-Ajax 통신은 서버와 통신시 서버로 부터 받은 응답 결과를 웹 브라우저에 반영하지 않고 JavaScript로 처리할 수 있도록 고안된 통신 방식
-이를 이용하면 서버와의 통신은 정상적으로 이루어 지며 화면은 변경되지 않기 때문에 화면의 일부분만을 변경하는 등의 작업이 가능
-오늘날 웹 애플리케이션을 개발할 때 많이 사용하는 통신 기술
-Ajax 통신은 같은 도메인으로 요청할 수 있는 파일만 요청 가능 -
jQuery Ajax 통신
-Ajax 통신은 브라우저의 종류나 버전에 따라 작성하는 코드가 다르다.
-이에 jQuery는 개발자가 손쉽게 Ajax 통신을 할 수 있도록 함수를 만들어
제공
-load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
-get : get 방식으로 ajax 통신
-post : post 방식으로 ajax 통신
-ajax : ajax 통신을 위한 종합적인 모든 기능을 제공하는 함수
<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("str1");
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>
2.학습한 내용 중 어려웠던 점
부모태그 부터는 그 범위를 헷갈리기 쉬워서 잘 생각해서 코드를 사용해야겠다는 생각이 들었다. 여러가지 효과들을 생각보다 쉽게 사용할 수 있다는 점에서 흥미로웠지만 애니메이션이나 ajax태그쪽에서는 확실히 쉽지 않아 보인다.
3.해결방법
공개된 코드들을 통해 직접 코드들을 사용해보고 이것저것 만들어보라는 선생님의 말씀처럼 여러가지 써보고 꾸며보고 만들어보는게 제일 좋은 방법인 것 같다.
4. 학습소감
많은 사람들이 새벽까지도 코딩 연습을 한다는 얘기를 들었을 때 내가 과연 노력하고 있는게 맞는가 싶은 생각이 강하게 들었다. 그저 따라가는데만 급급하고 남들보다 과연 노력하는게라고 생각한다면 분명히 아니었기때문에 좀 찔리기도 했다. 좀 더 노력하고, 이정도면 되지않을까 싶을 때 멈추지 않고 좀 더 할 수 있도록 노력할 필요가 있겠다. 남들보다 많은게 모자라고 쓸데없는건 많이 가지고 있는 나로서는 남들보다 많은 시간을 투자할 필요가 있다. 좀 더 노력하자.
코딩공부중