pupustory@

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

지금까지 JQuery의 기본적인 기능을 살펴 봤다. 이번엔 현업에서 가장 필요한 기능에 대해 살펴보고자 한다.

ajax에 대해 설명하자면 포스트 1개를 다 사용해야 하고, json과 xml도 설명하려면 쓸대없이 길어질 것 이다. 따라서 이번엔 3가지 모두 '어떻게 생겨먹은지'는 알고 있다는 가정 하에 설명하고자 한다.

ajax를 사용하기 위해 개발자는 브라우저의 XMLHttpRequest객체를 받아오고, 그에 맞는 방식으로 개발해야 할 것이다. 문제는 .. 브라우저마다 객체가 틀릴수도 있고(대표적으로 IE가 그렇다.) 상태값(일반적으로 4일 경우 success인데 .. 이것도 브라우저마다 틀릴수 있다.)등이 틀릴 경우를 대비해 크로스 브라우징에서 매우 귀찮은 작업이 될 수 있다.

예제보기

jquery의 ajax에 이용되는 메소드들은 다음과 같다.

$.load(url)	url을 읽어온다. (사실 이것은.. ajax라고 하기엔 ...)
$.get(url,param,  callback(data,type))	get방식으로 url로 부터 param을 넘기고 callback를 호출 한다. 이때 type엔 성공여부(error, success등)이 들어오게 된다.
$.get(url,param,  callback(data,type),  type)	get방식으로 url로 부터 param을 넘기고 callback를 호출 한다. 이때 type엔 성공여부(error, success등)이 들어오게 된다. 위와 다른것은 마지막 파라미터에 type추가인데 .. 여긴 'xml' ,'json'등이 올 수 있다. 물론 xml이나 json일 경우 서블릿에서 적절히 처리해 주어야 한다.
$.post(url,param,  callback(data,type),  type)	post방식 이외에 위와 같으므로 생략..
$.getJSON(url,param,  callback(data,type))	위와 다른 것은 type를 지정해 준것이 아니라 'json'타입을 사용한다는 것이다. 무엇을 쓰던 기능은 무관하다.
$.ajax(option)	ajax의 기능을 좀 더 세밀하게 사용할때 사용한다. 구체적인 option에 대해선 차후 다뤄보도록 하겠다.

예제코드를 보면 보다 쉽게 알 수 있을꺼라 믿는다.

주의할점은 .. xml과 json으로 서버로부터 받을 경우 text타입이 아니다. 따라서 jquery에서 사용하는 object타입을 이용해 사용해야 한다.

xml의 경우 엘리먼트 검색과 마찬가지로 $(data).find() 방식으로 접근하게 된다.

json은 좀 더 쉬울 수 있는데 .. 예제에 data.data.length인 경우 .. 두번째 data[]이므로 예제와 같이 작성해야 한다. 서버에서 보낸 json내용이 data[]이기 때문이다.(다른걸로 쓸껄 그랬나보다. 헤깔리게 ..)

ajax에 대해선 할말이 좀 많아서 .. 기본적인 예제는 여기까지로 하고 .. 다음 포스트에 좀 더 디테일한 부분(ajax의 option이라던가..)다뤄보도록 하겠다.

Pupustory Dev/JQuery

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번에 살펴볼 사항은 JQuery에 포함된 Effect이다. JQuery의 장점중 하나는 유용하고 플러그인이 많다는 것인데 .. 실제로 Effect에 관한 플러그인 역시 많이 배포되고 있다.

그럼 기본적으로 포함된 JQuery의 Effect에 대해 살펴보도록 하겠다.

예제보기

Pupustory Dev/JQuery

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이벤트 부분은 .. javascript에서 사용하는 내용 그대로 (예를들어 .click라던가 .. .dbclick 과 같은) 같은 이름의 메소드로 호출하여 사용하면 된다.

리스너 방식이므로 이벤트를 삽입할 노드를 찾고, 해당 노드에 이벤트 리스너를 달아주면 된다.

크게 사용하는 이벤트의 방식에 대해 작성해 볼까 했지만 .. 쓸대없이 코드가 길어지므로 .. 주요 사용하는 메소드만 주루룩 나열하고 별도의 설명도 생략할 것이다.

단, 재미있는 jquery의 몇몇부분은 예제 소스를 통해 살펴보겠다.

JQuery Event

예제보기

예제에서 본 코드에 .bind()는 직접 이벤트를 바인딩 하는 방식인데 .. 동시에 여러개의 이벤트 바인딩이 가능 하다. id="p3"의 경우를 살펴보면 마우스가 해당 엘리먼트에 들어오고, 나가는 두개의 이벤트에 동일한 내용이 작성 되었다.

.hover()는 css에서 많이 봤던 내용으로 .. 마우스 오버와 마우스 아웃의 효과인데 .. 인자를 2개 작성할 경우 '인,아웃'효과를 적용할 수 있다.

.toggle()은 이전에 살펴본것과 마찬가지지만 이번엔 여러개의 인자를 받을 수 있고, 인자는 순차적으로 반영된다. id="p4"를 클릭하면 순차적으로 background-color 변경을 확인할 수 있다.

Pupustory Dev/JQuery

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이미 속성의 추가, 변경하는 법은 selector부분에서 다뤄 보았다. 그래서 크게 다룰 내용은 없겠지만, 그래도 레퍼런스를 기록한다는 측면에서 정리해 둘 필요가 있다고 본다. 보다 다양한 API는 jquery.com에서 참조할 수 있기 때문에 .. 자주 쓰이고 유용해 보이는 내용만 다뤄볼 것이다.

더보기

.attr("")	속성 값 가져오기
.attr("","")	속성에 값을 추가하기
.removeAttr("")	속성 삭제하기

.addClass("")	css 추가하기
.hasClass("")	boolean type로 반환하며 해당 엘리먼트가 class ""인지 확인 함
.removeClass("")	class 삭제
.toggleClass("")	토클로 지정해 class설정 및 삭제
.toggleClass("",bool)	2번째 인자가 true일 경우 토클 지정. false일 경우 토클 미지정

.html()	엘리먼트 안에 html 가져오기
.html("")	엘리먼트 안에 html tag를 포함해 표현(tag 사용 가능)
.text()	엘리먼트 안에 text 가져오기
.text("")	엘리먼트 안에 text 표현(tag 사용 불가)

val()	엘리먼트 값(속성 value="...")가져오기
val("")	엘리먼트 값 지정하기

속성이야 이미 여러번 사용했던 사항이고 class역시 어렵지 않다. class에서 잼있는 사항은 toogle인데 .. 예제에선 click event에 대해 토글 설정을 했다. GUI프로그래밍에선 스위치 ON/OFF와 같은 역할이 토글과 같은 기능이다. 2개의 인자를 갖는 토글은 table의 row에 홀,짝을 구분한 class설정시 매우 유용해 보인다.

.html()과 .text()의 차이는 .. html tag가 사용 가능 한지의 여부 인데 .. outMessge() 에서 어떻게 이용하는지 나타나고 있다.

Pupustory Dev/JQuery

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

마지막으로 jquery의 막강한 셀렉터중 폼에 관련된 셀렉터를 살펴보겠다. 사실 이외에 다양한 셀렉터 기능이 있지만 구체적인 내용은 API문서를 참조(http://docs.jquery.com/Selectors)를 하는것이 좋을 듯 하다.

코드보기

이전 포스트에서도 얘기 했지만 셀렉터중 ':...'의 형식은 이상하게 못찾는 경우를 발견 했는데 그럴땐 먼저 $(":...").filter("div") 과 같이 먼저 검색 후 필터를 통해 걸러주면 잘 찾게 되었다. API문서에서도 위와같은 형식으로 사용하니 권장사항 인가보다.

:input	폼에 사용하는 엘리먼트 (input, select, textarea, button ..)
:text	input 중 type="text"
:password	input 중 type="password"
:radio	input 중 type="radio"
:checkbox	input 중 type="checkbox"
:button	input 중 type="button"
:hidden	input 중 type="hidden"
:file	input 중 type="file"

사실 .filter("[type=text]")과 같은 방식으로도 필터가 가능하다. 무엇을 쓰던지는 사용자 마음이다. 그리고 폼 엘리먼트의 속성을 조회하는 방법도 있다.

더보기

:disabled	폼 엘리먼트 중 '비활성' 찾기
:enabled	폼 엘리먼트 중 '활성' 찾기
:checked	input type=checkbox 중 선택된 엘리먼트  찾기
:selected	select _ option 중 선택된 엘리먼트  찾기

마찬가지로 [...=...]로도 충분히 검출해 낼 수 있다.

이전에 빼먹은 속성이 하나 있는데 .. 그것은 위에서 사용한 > + ~ 부분이다.

부모 > 자식	부모 엘리먼트의 자식노드
엘리먼트1 + 엘리먼트2	엘리먼트1 다음에 오는 형제노드가 엘리먼트2
엘리먼트1 ~ 엘리먼트2	엘리먼트1 다음에 오는 형제노드가 엘리먼트2

부모 > 자식의 엘리먼트 탐색은 이미 위에 2번째 예제에서 사용 했던 부분이기 때문에 별도의 설명은 생략하도록 하겠다.

Pupustory Dev/JQuery

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이전에 살펴본 포스트를 통해 jquery의 기본적인 셀렉터에 대해 알아 보았다. 이번엔 좀 더 셀렉터의 깊은 내용을 작성해 볼까 한다. 사실 이전에 있던 내용은 prototype.js등의 다른 framework에서도 충분히 지원하고 있는 부분이다. 어쩌면 이번 포스트의 내용 역시 지원하고 있을 것 이다.

샘플 코드는 다음과 같다.

코드보기

:first	선택된 노드중 첫번째 선택
:last	선택된 노드중 마지막 선택
:not(select)	select를 제외한 나머지 선택
:even	짝수번째 엘리먼트 선택(index : 0)
:odd	홀수번째 엘리먼트 선택(index : 0)
eq(index)	index번째의 엘리먼트 선택
:gt(index)	index 이후(index제외) 엘리먼트 선택
:lt(index)	index 이전(index제외) 엘리먼트 선택 (i가 아닌 l)
:hidden	감춰진 엘리먼트 선택
:visible	보여지는 엘리먼트 선택
[attribute=value]	속성이 value인 엘리먼트 선택
[attribute!=value]	속성이 value가 아닌 엘리먼트 선택
[attribute^=value]	처음이 속성=value인 엘리먼트 선택
[attribute$=value]	마지막이 속성=value인 엘리먼트 선택

:last와 attribute!=valie 를 제외한 나머지는 모두 예제를 통해 쉽게 볼 수 있다.

.each(function() {}); ?
이전에 다뤘던 포스트에서 얘기했다 시피 jquery에선 자신을 다시 돌려주기 때문에 메소드 체인이 가능 하다. 만약 노드를 번갈아 가며 작업해야 하는 경우가 있다면 .. 일반적으로 배열의 엘리먼트를 받아서 for loop가 보통이다.

친절하게도 jquery에선 이에 대한 방법을 제공 하는데, .each가 그것이다. 메소드 안엔 function(){}으로 이루어져 있는데 외부에 function을 작성하고 호출하는것 역시 가능 하다.

filter ?
위 예제는 보통 $()에서 모든걸 해결했다. 안에서 모든 내용을 통해 접근 하였는데 .. 필자가 $("#id")를 통해 받아온 엘리먼트는 이상하게 제대로 작동하지 않는 경우가 있었다. 그중 하나가 odd과 even등이 었는데 .. 정확한 문제는 파악하지 못했지만 .. .filter()를 통해 접근하니 문제가 사라졌다.

이 역시 메소드 체인을 이용해 필터링 해주는 부분인데 만약 id로 검색한 후 그외의 필터가 필요하다면 .filter()를 이용하는것이 효과적일 듯 하다.

.attr ?
속성을 접근하기 위해 [attribute=value]를 이용했는데, 속성값을 받아올때도 .attr()를 이용할 수 있다. 만약 속성을 지정할 경우엔 .attr("속성","값")을 이용하면 된다. 이전에서도 잠깐 다뤘지만 css도 마찬가지로 이용할 수 있다.

이번 포스트에서 폼에 관한 셀렉터도 동시에 다뤄보려 했지만 생각보다 예제가 쓸대없이 길어저서 별수없이 3번째 포스트를 이용하도록 하겠다.

Pupustory Dev/JQuery

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

웹개발에 있어 html(DOM)을 조작할때 사용하는 것이 javascript다. 하지만 아쉽게도 .. 브라우저 마다 지원하는 메소드가 틀릴수도 있기 때문에 다양한 framework가 개발되었고 배포되고 있다.

필자는 처음 선택한 framework가 prototype.js였는데 .. 사실 ajax부분과 dom에서 단순히 document.getElementById()의 대체품만 이용했을 뿐 구체적인 내용은 다뤄보지 않았다.

그러던 중 가볍고 다양한 플러그인을 제공하는 framewok가 있다고 해서 찾아보았는데 그것이 바로 JQuery이다. 실제로 다뤄보니 .. 정말 강력한 셀렉터 기능부터 해서 .. 필요한 부분만 플러그인을 이용한다면 생산성과 사용자의 만족을 충분히 이끌어 낼 수 있다고 생각 된다.

JQuery Selector
우리가 DOM을 다루기 위해 엘리먼트를 선택할때 보통 getElementById()등을 사용하게 되는데 .. 보다 복잡한 화면을 다루거나 애초 그러한 목적을 염두하지 않고 설계된 화면은 특히나 조작이 힘들 것이다.

다행히 이번에 살펴볼 JQuery 에선 강력한 셀렉터 기능을 제공하는데(실제 내부 코드는 정규표현식을 사용하는 듯 하다.), 이번 포스트에선 일부분을 살펴보고, 보다 깊은 내용은 다음 포스트로 총 2회에 걸처 작성하려고 한다.

먼저 살펴볼 전체 html은 다음과 같다.

내용보기

jquery에선 $() 방식으로 엘리먼트를 찾고 접근 하는데 위 예제를 보면서 아래 내용을 보면 이해가 쉬울 듯 하다.

	$("element")	엘리먼트 명으로 접근  (예> $("div"), $("div div")..)
	$("#id")	엘리먼트 id로 접근 (예> $("#userinfo") ..)
	$(".cssclass")	엘리먼트의 class로 접근 (예> $(".view") ..)

후에 추가로 필터에 대해 알아보겠지만 .. 셀렉터를 사용할때 jquery에선 쉽게 찾을 수 있는 방법을 제공한다.


위와 같은 DOM이 있다고 가정하자. 실제 ID를 이용해 찾는 방법도 있겠지만 어딘가에 같은 ID가 있을 경우 위 엘리먼트를 찾으려면 ID를 바꾼다거나 하는 작업을 해야 할 것이다. 경우에 따라선 그러지 못할 경우도 있을 수 있다.

이럴때 셀렉터 사용을 $("div#event")를 이용하게 되면 <div>안에 있는 id가 'event' 엘리먼트를 찾게 되는 것이다.

만약 div안의 div라면 $("div div")의 형식으로 접근도 가능 하다.

JQuery method Chain
jquery에선 강력한 메소드 체인 기능을 제공 한다. 쉽게 설명 하자면 위와 같은 방식으로 메소드를 접근했을 경우 엘리먼트를 받는 변수에 추가적인 이벤트 기능을 해야할 것이다. 예를들어 엘리먼트를 찾고, 속성값을 추가하고, 스타일을 추가한다면 아래와 같은 방식의 접근이 가능 한 것이다.


JQuery Event
기본적으로 위 코드를 살펴보면 script부분에 $(document).ready( function() {// other code .. }); 부분을 찾을 수 있다. 이것은html일 읽어진 후 발생하는 이벤트인데 .. <body onload="">와 다른 것은 onload는 'image'등의 모든 영역이 완전히 읽어진 후 발생하지만 jquery에 있는 .read() 이벤트는 순수 html만 읽어온 후 발생된다.

내부에 .click(function() {}); 부분은 해당 엘리먼트에 click 이벤트를 부여하는 내용인데 <input type="button" onclick=""/>와 같다고 볼 수 있다. java의 swing을 해본 사람이라면 '이벤트 리스너'정도라고 생각해도 무관할 듯 하다. html이 읽어진 후 각각의 엘리먼트에 click라는 이벤트를 부여하고, 해당 엘리먼트에 click이 발생하면 해당 메소드를 호출하게 될 것이다.

하나하나 나열하며 설명하는것 보다 위의 샘플 예제 코드를 토대로 내용만 찍어서 설명하는 편이 개발자 입장에서 더 쉽게 이해할 수 있다고 생각되서 다소 설명이 단순하긴 하지만.. 충분히 이해 되었을꺼라 믿는다.

Pupustory Dev/JQuery