반응형
네이버 extjs 카페에 오늘 가입을 했는데 단(zican)님의 jQury 철학소개라는 글이 있어서 소개를 합니다. jQuery라고하면 unobtrusive javascript(겸손한 자바스크립트)가 가장 중요한 단어가 아닌가 합니다. CSS가 다루는 걸 Style이라고 하면 Javascript가 다루는걸 behavior라고 하고, CSS를 document에서 분리해냈듯이 javascript도 분리하자는 주의입니다.
예를들면,
↓
body 내부에는 자바스크립트를 쓰고있지 않습니다. 이런식으로 분리해내는게 unobtrusive javascript 입니다. 그런데 id지정하고 getElementById 쓰는것도 귀찮고 손이 많이 가는 작업이니 jQuery가 알려주는 손쉬운 방법을 보죠.
초간단 예를들면 이게 뭐가 쉬워졌나 싶으실 겁니다. 어째건 첫번째로 지켜야 할 원칙 javascript는 분리해 놓은 상태입니다.
$('#photo')를 하면 document.getElementById('photo')와 동일한 역할을 합니다. 즉 $('id')하면 해당 아이디를 갖는 element를 리턴합니다. 정확히는 해당아이디를 갖는 element 배열을 리턴합니다. 작동하는 방식은 위쪽 예제와 동일합니다.
id를 지정해서 찾을수 있고, 클래스가 지정된 요소를 찾을수도 있고, css selector 처럼 복잡한 요소를 찾을수도 있습니다. $("ul li dd") 이건 ul 밑에 li 밑에 dd인 element를 리턴합니다. 기존 css selector 에서 쓰는것 말고 jQuery에서 제공하는 여러필터가 있습니다. 이걸쓰면 테이블에서 홀수행 혹은 짝수행만 뽑아 올수도있고, td 중에 데이터에 year라는 문자가 있는 것만 뽑아올수도 있고, 지금 클릭한 element 바로 밑에 것 또는 바로 위에는 것 또는 부모인 것을 골라낼수도 있습니다.
단님이 소개한 예제 링크를 아래에 소개해 드리겠습니다.
예를들면,
<html>
<head>
<script type="text/javascript">
function view(){
...
}
</script>
</head>
<body>
<img id="photo" src="###" onclick='view()'>
</body>
</html>
<head>
<script type="text/javascript">
function view(){
...
}
</script>
</head>
<body>
<img id="photo" src="###" onclick='view()'>
</body>
</html>
↓
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('photo').onclick=view;
}
</script>
</head>
<body>
<img id='photo' src="###">
</body>
</html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('photo').onclick=view;
}
</script>
</head>
<body>
<img id='photo' src="###">
</body>
</html>
body 내부에는 자바스크립트를 쓰고있지 않습니다. 이런식으로 분리해내는게 unobtrusive javascript 입니다. 그런데 id지정하고 getElementById 쓰는것도 귀찮고 손이 많이 가는 작업이니 jQuery가 알려주는 손쉬운 방법을 보죠.
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(
$('#photo').click(
function(event){
...
}
)
);
</script>
</head>
<body>
<img id="photo" src="###">
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(
$('#photo').click(
function(event){
...
}
)
);
</script>
</head>
<body>
<img id="photo" src="###">
</body>
</html>
초간단 예를들면 이게 뭐가 쉬워졌나 싶으실 겁니다. 어째건 첫번째로 지켜야 할 원칙 javascript는 분리해 놓은 상태입니다.
$('#photo')를 하면 document.getElementById('photo')와 동일한 역할을 합니다. 즉 $('id')하면 해당 아이디를 갖는 element를 리턴합니다. 정확히는 해당아이디를 갖는 element 배열을 리턴합니다. 작동하는 방식은 위쪽 예제와 동일합니다.
jQuery가 기본 자바스크립트보다 unobtrusive javascript를 쓰기에 적합한 장점으로는 document 내의 어떤요소를 찾을때 굉장히 편하게 찾을수 있는 방법을 제공한다는 점입니다.
id를 지정해서 찾을수 있고, 클래스가 지정된 요소를 찾을수도 있고, css selector 처럼 복잡한 요소를 찾을수도 있습니다. $("ul li dd") 이건 ul 밑에 li 밑에 dd인 element를 리턴합니다. 기존 css selector 에서 쓰는것 말고 jQuery에서 제공하는 여러필터가 있습니다. 이걸쓰면 테이블에서 홀수행 혹은 짝수행만 뽑아 올수도있고, td 중에 데이터에 year라는 문자가 있는 것만 뽑아올수도 있고, 지금 클릭한 element 바로 밑에 것 또는 바로 위에는 것 또는 부모인 것을 골라낼수도 있습니다.
즉, id같은 걸 쓰지 않고도 document DOM의 구조를 이용해서 필요한 요소를 추려 낼수 있다는게 굉장한 장점입니다. 더불어 hidden 상태인 것만 골라낼 수도 있습니다.
단님이 소개한 예제 링크를 아래에 소개해 드리겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$.browser Example</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('.itemImg').click( function(event) {
if (this == event.target) {
var next = $('~ img:first', this);
if(!next[0]){
next = $('img:first', $(this).parents('div:first'));
}
$(this).hide();
next.css('opacity', '0.01').show().animate({opacity:1}, 'slow');
}
return false;
}).css('cursor', 'pointer');
});
</script>
</head>
<body>
<div>
<img class="itemImg" src='http://wstatic.naver.com/t/2008/0610/20080610112255.jpg'/>
<img class="itemImg" style="display:none" src='http://imgnews.naver.com/image/w3/2008/06/11/1213144220.jpg'/>
<img class="itemImg" style="display:none" src='http://imgnews.naver.com/image/w3/2008/06/11/1213140508.jpg'/>
</div>
<div>
<img class="itemImg" src='http://imgnews.naver.com/image/w3/2008/06/11/1213144220.jpg'/>
<img class="itemImg" style="display:none" src='http://wstatic.naver.com/t/2008/0610/20080610112255.jpg'/>
</div>
</body>
</html>
<html>
<head>
<title>$.browser Example</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('.itemImg').click( function(event) {
if (this == event.target) {
var next = $('~ img:first', this);
if(!next[0]){
next = $('img:first', $(this).parents('div:first'));
}
$(this).hide();
next.css('opacity', '0.01').show().animate({opacity:1}, 'slow');
}
return false;
}).css('cursor', 'pointer');
});
</script>
</head>
<body>
<div>
<img class="itemImg" src='http://wstatic.naver.com/t/2008/0610/20080610112255.jpg'/>
<img class="itemImg" style="display:none" src='http://imgnews.naver.com/image/w3/2008/06/11/1213144220.jpg'/>
<img class="itemImg" style="display:none" src='http://imgnews.naver.com/image/w3/2008/06/11/1213140508.jpg'/>
</div>
<div>
<img class="itemImg" src='http://imgnews.naver.com/image/w3/2008/06/11/1213144220.jpg'/>
<img class="itemImg" style="display:none" src='http://wstatic.naver.com/t/2008/0610/20080610112255.jpg'/>
</div>
</body>
</html>
