-pupustory@-

내가 사용하는 eclipse plug-in

2009/11/21 12:47

2 Comments

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

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

IBATOR

[ URL : http://ibatis.apache.org/ibator.html ]
[ECLIPSE : http://ibatis.apache.org/tools/ibator/ ]

SPRING IDE (+ AJDT)
[ ECLIPSE : http://download.eclipse.org/tools/ajdt/35/update/ ]
[ ECLIPSE : http://dist.springframework.org/release/IDE ]

IMPLEMENTORS
[ ECLIPSE : http://eclipse-tools.sourceforge.net/updates/ ]

PROPERTIES
[ ECLIPSE : http://propedit.sourceforge.jp/eclipse/updates ]

PMD
[ ECLIPSE : http://pmd.sf.net/eclipse ]

METRICS
[ ECLIPSE : http://metrics.sourceforge.net/update ]

JDepend
[ ECLIPSE : http://andrei.gmxhome.de/eclipse/ ]

'Dev' 카테고리의 다른 글

내가 사용하는 eclipse plug-in (2)	2009/11/21
웹의 역사를 한눈에 알 수 있는 .. (0)	2009/07/23
jsf ? velocity ? sitemesh ? tiles ? (0)	2009/05/14
JBOSS 가상 호스트 설정 (0)	2009/03/16

Pupustory Dev

Leave a Commnet Leave a Trackback

검은고양이

2009/11/24 22:50

Reply | Edit

안녕하세요 [..
요즘은 뭐하시나 궁굼해서 찾아와봣는데 역시 알수없겟..
Pupustory

2009/11/25 10:04

Reply | Edit

수능은 어찌 잘 봤니 ?

gzip filter를 이용해 압축해서 사용자에게 보내기

2009/11/16 16:36

Leave a Comment

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

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

gzip ?
gzip은 리눅스나 유닉스 체제에서 사용하는 압축 방식인데 .. WEB에서 (사용자)브라우저에게 압축해 내용을 보내주는 것이다. HTTP HEADER에 '이건 gzip이야 .. 그러니 알아서 처리해줘!'하고 보내주면 브라우저가 분석해 gzip압축내용을 해제 후 사용자에게 보여준다.

사실 대부분의 브라우저들이 gzip을지원하고 있고 .. 지원한지도 오래되었지만 이제서야 직접 테스트해 봤다. 쌩자로 html을 만들어(서버사이드에서 연산된 후 사용자에게 보여질 때) 사용자에게 보여주는 경우가 일반적이지만 gzip의 압축을 통해 사용자에게 보내주면, 트래픽이 감소할 것이고 사용자는 보다 빠른 응답을 받을 수 있는 것이다.

필자가 보기엔 이거 .. *.js,*.css, *.html, *.htm같은 정적인 페이지만 영향이 있는줄 알았는데(정적페이지) *.jsp도 잘 된다. 본 테스트 데이터는 단순히 text기반의 정보이므로 당연히 무지막지한 압축율을 자랑한다. 그리고 이미지나 압축된 파일 등은 gzip으로 압축되지 않는다. 오직 text기반만 적용 된다. (블로그를 검색해 보니 60%정도 압축된다고 한다.)

gzip.html (정적 페이지 테스트)

코드보기

결과>

gzip필터 미사용(전송량 183KB)

gzip사용(전송량 937B)

gzip.jsp (동적 페이지 테스트)

코드보기

gzip 미사용(전송량 9.44MB)

gzip사용(전송량 33KB)

결과를 표로 보자면 ...

	gzip 미사용	gzip 사용
.html	183KB	937B
.jsp	9.44MB	33KB

이제 효능을 확인했으니 적용 방법을 살펴보자. 라이브러리 추가 후 filter를 추가해 주면 된다. 물론 기존의 filter가 있다면 순서 등등의 문제가 이르킬수 있으니 순서정의를 잘 해야 한다.

web.xml

추가해야 할 라이브러리(왜 파일이 안올라가지 --)

commons-logging-1.1.1.jar
ehcache-1.3.0.jar

'Dev > Java' 카테고리의 다른 글

gzip filter를 이용해 압축해서 사용자에게 보내기 (0)	2009/11/16
SWT에서 사용하는 MS 리본UI... (0)	2009/05/05
자바 리플랙션 객체 생성(Java Reflection instance construct) (3)	2009/03/05
자바 리플랙션 필드값 수정(Java Reflection field value edit) (0)	2009/03/05
자바 리플랙션 메소드 호출하기(Java Reflection method call) (0)	2009/03/05
자바 리플랙션(Java Reflection) (0)	2009/03/05

Pupustory Dev/Java

Leave a Commnet 1 Trackback

Simple Logging Facade for JAVA(slf4j)

2009/10/19 10:28

Leave a Comment

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

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

오래전에 작성한 log4j도 있지만 .. 이번에 새로 알게된 slf4j는 log4j와 거의 똑같이 사용하면서 로깅시 필요한 메시지 조합(?)을 좀 더 간편하게 할 수 있게 해준다.

관련정보 보기
예를들어 log4j에서 로깅 메시지를 다음과 같이 출력했다고 가정한다면..
log4j
slf4j

2개 이상의 파라미터는 new Object[] {} 를 이용해서 넘겨주면 된다. 1.5에선 (..)을 이용하면 될것도 같았는데 .. 흠...

'Dev > Log4J' 카테고리의 다른 글

Simple Logging Facade for JAVA(slf4j) (0)	2009/10/19
Log4j.xml 을 이용한 로그 설정 (0)	2009/01/01
Log4j.properties 를 이용한 로그 설정 (0)	2009/01/01
Log4j를 이용한 로그 남기기 (1)	2008/12/31

Pupustory Dev/Log4J

Leave a Commnet Leave a Trackback

JQuery Ajax 1

2009/08/07 17:28

Leave a Comment

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

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

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

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

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

예제보기

05_ajax.zip

(.java소스도 포함되어 있으므로 .. 알아서 컴파일 후 삽입을..)
01_ajax.html

<!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">
<script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
	$("#txt").val($.param({a:1,b:'한글',url:'url파라미터'}));
	
	$("#load").click(function() {
		$("#ajax").load("ajaxcall.jsp");
		});
	
	$("#get").click(function() {
		//$.get(url,data,callback);
		$.get("ajaxcall.jsp",{key:"get",value:"param"},function(data) {
			$("#ajax").html(data);
		});
	});

$("#post_xml").click(function() {
		$.post("/PostAjaxCall",{type:"xml"}, function(data,type) {
			//var xml = $(data).text();
			var xml_data = "";
			$(data).find("name").each(function() {
				xml_data += "name: "+$(this).text() + "<br />";
				xml_data += "age: "+$(this).next().text() + "<br />";
			});
			$("#ajax").html(xml_data);
		});
	},"xml");

$("#post_json").click(function() {
		$.post("/PostAjaxCall", { type: "json" },  function(data,type){
				json_data = "size : "+data.data.length + "<br />";
				for(i=0; i<data.data.length; i++) {
					json_data += "name: "+data.data[i].name+"<br />";
					json_data += "age: "+data.data[i].age+"<br />";
				}
				$("#ajax").html(json_data);
		}, "json");
	});
		
	$("#get_json").click(function() {
		$.getJSON("/PostAjaxCall",{type:"json"}, function(data,type) {
			json_data = "size : "+data.data.length + "<br />";
			for(i=0; i<data.data.length; i++) {
				json_data += "name: "+data.data[i].name+"<br />";
				json_data += "age: "+data.data[i].age+"<br />";
			}
			$("#ajax").html(json_data);
		});
	});
	
});
</script>
</head>
<body>
<div id="ajax">click button</div>
<br />
<input type="text" id="txt" size="100"/>
<br />
<input type="button" id="load" value="load()" />
<input type="button" id="get" value="get(url,data,callback)" />
<input type="button" id="post_xml" value="post(url,data,callback,'xml')" />
<input type="button" id="get_json" value="getJSON(url,data,callback)" />
<input type="button" id="post_json" value="post(url,data,callback,'json')" />
</body>
</html>

ajaxcall.jsp
PostAjaxCall.java

package pupustory;

import java.io.BufferedWriter;
import java.io.IOException;
import java.io.OutputStream;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class PostAjaxCall
 */
public class PostAjaxCall extends HttpServlet {
	private static final long serialVersionUID = 1L;

/**
	 * @see HttpServlet#HttpServlet()
	 */
	public PostAjaxCall() {
		super();
		// TODO Auto-generated constructor stub
	}

/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
	}

/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String type = request.getParameter("type");
		if ("xml".equals(type)) {
			response.setHeader("Content-Type", "application/xml");
			java.io.BufferedWriter writer = new BufferedWriter(
					new java.io.OutputStreamWriter(response.getOutputStream()));
			writer.write("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
			writer.write("<root>");
			writer.write("<name>pupustory</name>");
			writer.write("<age>27</age>");
			writer.write("<name>other</name>");
			writer.write("<age>20</age>");
			writer.write("</root>");
			writer.flush();

} else if ("json".equals(type)) {
			response.setHeader("Content-Type", "application/json");
			java.io.BufferedWriter writer = new BufferedWriter(
					new java.io.OutputStreamWriter(response.getOutputStream()));
			String json = "{ \"data\" :[ {\"name\":\"json1\", \"age\":17},{\"name\":\"json2\", \"age\":27},{\"name\":\"json3\", \"age\":37},{\"name\":\"json4\", \"age\":47}]}";
			System.out.println(json);
			writer.write(json);
			writer.flush();
		}
	}
}

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이라던가..)다뤄보도록 하겠다.

'Dev > JQuery' 카테고리의 다른 글

JQuery Ajax 1 (0)	2009/08/07
JQuery Effect (0)	2009/08/07
JQuery Event (0)	2009/08/06
JQuery Attribute, Class .. (0)	2009/08/06
JQuery Selector 3 (0)	2009/08/05
JQuery Selector 2 (0)	2009/08/04

Pupustory Dev/JQuery

Leave a Commnet Leave a Trackback

JQuery Effect

2009/08/07 14:10

Leave a Comment

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

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

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

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

예제보기

04_effect.zip

<!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">
<script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {

$("#show").toggle(function() {
    	//$("#p1").show("slow"); // normal , fast
    	$("#p1").show(500,function(){alert("show");});
    	$(this).val("hide('slow')");
    }, function() {
    	//$("#p1").hide("slow"); // normal , fast
    	$("#p1").hide(500,function(){alert("hide");});
    	$(this).val("show('slow')");
    });
    
    $("#slideup").click(function() {
    	$("#p2").slideUp(100,function(){alert("slideUp");});
    });
    
    $("#slidedown").click(function() {
    	$("#p2").slideDown(100,function(){alert("slideDown");});
    });
    
    $("#fadein").click(function() {
    	$("#p3").fadeIn(100,function(){alert("fadeIn");});
    });
    
    $("#fadeout").click(function() {
    	$("#p3").fadeOut(100,function(){alert("fadeOut");});
    });

$("#animate").click(function() {
		$("#p4").animate( { fontSize:"24px" }, 1000)
		.animate( { fontSize:"72px" }, 1000)
		.animate( { fontSize:"12px" }, 1000);
	});
	
	$("#start").click(function() {
		$("#p5").animate( { fontSize:"72px" }, 5000);
	}); 
	$("#stop").click(function() {
		$("#p5").stop();
	});	
});
</script>
</head>
<body>
<p id="p1" style="display: none;">element.show(speed,callback)</p>
<p id="p2">element.slideUp,slideDown(speed,callback)</p>
<p id="p3" style="background-color:blue">element.fadeIn,fadeOut(speed,callback)</p>
<p id="p4">element.animate()</p>
<div id="p5">effect.stop()</div>
<input type="button" id="show" value="show"/>
<input type="button" id="slideup" value="slideUp"/>
<input type="button" id="slidedown" value="slideDown"/>
<input type="button" id="fadein" value="fadeIn"/>
<input type="button" id="fadeout" value="fadeOut"/>
<input type="button" id="animate" value="animate"/>
<br />
<input type="button" id="start" value="start"/>
<input type="button" id="stop" value="stop"/>
</body>
</html>

효과에 대한 구체적인 설명은 다음과 같다.

.show()	엘리먼트 보이기
.show(time,callback)	엘리먼트 time동안 보여지며 완료 후 callback
.hide()	엘리먼트 감추기
.hide(time,callback)	엘리먼트 time동안 사라지며 완료 후 callback
.slideUp(time,callback)	엘리먼트 time동안 슬라이드 up
.slideDown(time,callback)	엘리먼트 time동안 슬라이드 down
.fadeIn(time,callback)	엘리먼트 time동안 천천히 보이기
.fadeOut(time,callback)	엘리먼트 time동안 천천히 감추기
.animate(option,time)	option에 따라 time동안 효과주기

callback은 .. 효과가 발생한 후 호출하는 함수이다. 직접 function(){}으로 기술했지만 .. 이전에도 살펴본 모든 function 인자들은 별도로 function을 작성하고, function name를 기술하면 같은 효과가 발생한다. 뭐 다용도로 사용할 함수가 아니라면 ..직접 기술하는게 더 나을수도 있다. (재사용 하지 않을꺼기도 하다면..)

show()나 hide()부분은 흔하게 이전의 예제에서 살펴보았던 부분이고 .. slide관련이나 fade관련 역시 흔하게 사용한 효과이므로 별도의 설명은 하지 않겠다.

다만 animate()의 경우 option에 따라 설정이 가능한데 .. fontSize를 통해 폰트 크기만 time동안 변경되도록 했지만 .. 실제로 여러 옵션이 존재 한다.

.animate().animate()가 가능한 이유는 제일 처음 살펴본 메소드 체인으로 인해 가능 하다. stop()의 경우 효과가 발생하고 있는 엘리먼트에 대해 .. 더이상 진행하지 않도록 하는 부분이다.

'Dev > JQuery' 카테고리의 다른 글

JQuery Ajax 1 (0)	2009/08/07
JQuery Effect (0)	2009/08/07
JQuery Event (0)	2009/08/06
JQuery Attribute, Class .. (0)	2009/08/06
JQuery Selector 3 (0)	2009/08/05
JQuery Selector 2 (0)	2009/08/04

Pupustory Dev/JQuery

Leave a Commnet Leave a Trackback

JQuery Event

2009/08/06 15:06

Leave a Comment

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

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

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

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

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

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

JQuery Event

blur(function() { .. })
changefunction() { .. }
clickfunction() { .. }
dblclickfunction() { .. }
errorfunction() { .. }
focusfunction() { .. }
keydownfunction() { .. }
keypressfunction() { .. }
keyupfunction() { .. }
loadfunction() { .. }
mousedownfunction() { .. }
mouseenterfunction() { .. }
mouseleavefunction() { .. }
mousemovefunction() { .. }
mouseoutfunction() { .. }
mouseoverfunction() { .. }

mouseupfunction() { .. }
resizefunction() { .. }
scrollfunction() { .. }
selectfunction() { .. }
submitfunction() { .. }
unloadfunction() { .. }
별도의 설명은 하지 않겠다.

예제보기

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

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

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

'Dev > JQuery' 카테고리의 다른 글

JQuery Ajax 1 (0)	2009/08/07
JQuery Effect (0)	2009/08/07
JQuery Event (0)	2009/08/06
JQuery Attribute, Class .. (0)	2009/08/06
JQuery Selector 3 (0)	2009/08/05
JQuery Selector 2 (0)	2009/08/04

Pupustory Dev/JQuery

Leave a Commnet Leave a Trackback

JQuery Attribute, Class ..

2009/08/06 11:17

Leave a Comment

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

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

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

attribute 관련

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

class 관련

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

text & html 관련

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

value & select 관련

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

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

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

'Dev > JQuery' 카테고리의 다른 글

JQuery Effect (0)	2009/08/07
JQuery Event (0)	2009/08/06
JQuery Attribute, Class .. (0)	2009/08/06
JQuery Selector 3 (0)	2009/08/05
JQuery Selector 2 (0)	2009/08/04
JQuery selector (0)	2009/08/04

Pupustory Dev/JQuery

Leave a Commnet Leave a Trackback

JQuery Selector 3

2009/08/05 11:15

Leave a Comment

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

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 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번째 예제에서 사용 했던 부분이기 때문에 별도의 설명은 생략하도록 하겠다.

'Dev > JQuery' 카테고리의 다른 글

JQuery Effect (0)	2009/08/07
JQuery Event (0)	2009/08/06
JQuery Attribute, Class .. (0)	2009/08/06
JQuery Selector 3 (0)	2009/08/05
JQuery Selector 2 (0)	2009/08/04
JQuery selector (0)	2009/08/04

Pupustory Dev/JQuery

Leave a Commnet Leave a Trackback

JQuery Selector 2

2009/08/04 17:30

Leave a Comment

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

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

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

샘플 코드는 다음과 같다.

코드보기

02_selector.zip

<!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">
<script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var message = "";
$(document).ready( function() {

$("#first").click(function() {		
		message = $("#ck:first").attr("value");
		outMessage(message);
		});

$("#not").click(function() {		
		$("input[type=radio]:not(#ck)").each(function() {
			message += $(this).attr("value");
			});
		outMessage(message);
		});
	
	$("#odd").click(function() {
		$("p:odd").each(function() {
			message += $(this).attr("id") + " ";
			});
		outMessage(message);
		});

$("#even").click(function() {
		$("p:even").each(function() {
			message += $(this).attr("id") + " ";
			});
		outMessage(message);
		});
	
	$("#eq").click(function() {
		$("p:eq(2)").each(function() {
			message += "index [2] " + $(this).attr("id") + " ";
			});
		outMessage(message);
		});

$("#gt").click(function() {
		$("p:gt(2)").each(function() {
			message += "index [2] after " + $(this).attr("id") + " ";
			});
		outMessage(message);
		});
	
	$("#lt").click(function() {
		$("p:lt(2)").each(function() {
			message += "index [2] befor " + $(this).attr("id") + " ";
			});
		outMessage(message);
		});
	
	$("#visible").click(function() {
		$("input#ck").filter(":visible").each(function() {
			message += $(this).attr("value") + " ";
			});
		outMessage(message);
		});

$("#hidden").click(function() {
		$("input#ck").filter(":hidden").each(function() {
			message += $(this).attr("value") + " ";
			});
		outMessage(message);
		});	
});

function outMessage(msg) {
	$("div#message").html("");
	$("div#message").html(msg);
	message = "";
}
</script>
<style type="text/css">
.view{ background-color: black;font-size:12px; color: white; }
</style>
</head>
<body>
<div>
<input type="checkbox" id="ck" value="선택1" />선택1
<input type="checkbox" id="ck" value="선택2" />선택2
<input type="checkbox" id="ck" value="선택3" />선택3
<input type="checkbox" id="ck" value="선택4" />선택4
<input type="checkbox" id="ck" value="선택5" />선택5
<input type="checkbox" id="ck" value="선택6" style="display:none"/>선택6
<input type="checkbox" id="ck" value="선택7" />선택7
<br />
<input type="text" value="야호1" /> 
<input type="text" value="야호2" />
<input type="text" value="야호3" />
<br />
<input type="radio" name="rd" value="히히1" />히히1
<input type="radio" name="rd" value="히히2" />히히2
<input type="radio" name="rd" value="히히3" />히히3
<br />
<input type="button" id="first" value="first" />
<input type="button" id="not" value="not" />
<input type="button" id="odd" value="odd" />
<input type="button" id="even" value="even" />
<input type="button" id="eq" value="eq" />
<input type="button" id="gt" value="gt" />
<input type="button" id="lt" value="lt" />
<br />
<input type="button" id="visible" value="visible" />
<input type="button" id="hidden" value="hidden" />
</div>
<br />
<div style="background-color: olive;">
<p id="1">1</p>
<p id="2">2</p>
<p id="3">3</p>
<p id="4">4</p>
<p id="5">5</p>
<p id="6">6</p>
</div>
<div id="message" ></div>
</body>
</html>

: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번째 포스트를 이용하도록 하겠다.

'Dev > JQuery' 카테고리의 다른 글

JQuery Effect (0)	2009/08/07
JQuery Event (0)	2009/08/06
JQuery Attribute, Class .. (0)	2009/08/06
JQuery Selector 3 (0)	2009/08/05
JQuery Selector 2 (0)	2009/08/04
JQuery selector (0)	2009/08/04

Pupustory Dev/JQuery

Leave a Commnet Leave a Trackback

JQuery selector

2009/08/04 14:03

Leave a Comment

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

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

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

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

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

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

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

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

내용보기

01_selector.zip

<!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">
<script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var viewDiv		= true;
var viewId 		= true;
var viewClass 	= true;
// jquery를 이용한 selector 
$(document).ready( function() {
	alert($(":last"));
	// 모든 <div> 엘리먼트 찾기
	$("input#selectDiv").click(function(){			
			if (viewDiv) {
				$("div").hide(); 
			} else { 
				$("div").show();
			}
			viewDiv = !viewDiv; 
		});
	//id가 'userinfo'인 엘리먼트 찾기 ex> document.getElementById();
	$("#selectId").click(function(){			
		if (viewId) {
			$("#userinfo").hide(); 
		} else { 
			$("#userinfo").show();
		}
		viewId = !viewId; 
	});
	// class가 'view'인 엘리먼트 찾기
	$("#selectClass").click(function(){
		if (viewClass) {
			$(".view").hide(); 
		} else { 
			$(".view").show(); 
		}
		viewClass = !viewClass; 
	});	
	// <fieldset>안에 <input>가 있으며, id가 selectall 엘리먼트 찾기
	$("div input#checkbox").click(function(){
		if ($("fieldset input#selectall").attr("checked")) {
			$("fieldset input#selectall").attr("checked","");
		} else { 
			$("fieldset input#selectall").attr("checked","checked"); 
		}
		viewClass = !viewClass; 
	});	
});
</script>
<style type="text/css">
.view{ background-color: black;font-size:12px; color: white; }
</style>
</head>
<body>
<div style="color:red; background-color: gray;" id="layer_01">레이어 1</div><br />
<div style="color:white; background-color: black" id="layer_02">레이어 2</div><br />
<div style="color:blue; background-color: lime" id="layer_03">레이어 3</div><br />
<div style="color:aqua; background-color: maroon" id="layer_04">레이어 4</div><br />
<div style="color:green; background-color: navy;" id="layer_05">레이어 5</div><br />
<br />
<fieldset id="userinfo">
<label>Name:</label> <input id="name" class="view"/><br />
<label>Email:</label> <input id="email" class="view"/><br />
</fieldset>
<fieldset>
<input type="checkbox" id="selectall" >선택<br />
</fieldset>
<input type="button" id="selectDiv" value="div" /><br />
<input type="button" id="selectId" value="id" /><br />
<input type="button" id="selectClass" value="Class" /><br />
<div>
<input type="button" id="checkbox"  value="check" /><br />
</div>
</body>
</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에선 강력한 메소드 체인 기능을 제공 한다. 쉽게 설명 하자면 위와 같은 방식으로 메소드를 접근했을 경우 엘리먼트를 받는 변수에 추가적인 이벤트 기능을 해야할 것이다. 예를들어 엘리먼트를 찾고, 속성값을 추가하고, 스타일을 추가한다면 아래와 같은 방식의 접근이 가능 한 것이다.

$("div").attr("속성명","값").css("추가클레스");

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이 발생하면 해당 메소드를 호출하게 될 것이다.

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

'Dev > JQuery' 카테고리의 다른 글

JQuery Effect (0)	2009/08/07
JQuery Event (0)	2009/08/06
JQuery Attribute, Class .. (0)	2009/08/06
JQuery Selector 3 (0)	2009/08/05
JQuery Selector 2 (0)	2009/08/04
JQuery selector (0)	2009/08/04

Pupustory Dev/JQuery

Leave a Commnet Leave a Trackback

pupustory@

Search results for 'Dev'