관리도구 패널을 만들어야되는 시점. 우연히 켜 놓은 메신저를 통해 대구 동생(민수)이 넌즈시 건네준 말. "형 JQuery 알아요?". 예전에 문득 자바스크립트를 이용해서 XHTML에서 객체 Query 하는 기술인 줄 알고 답했더니, 피식 웃으며(물론 소리도, 모습도 보이지 않았지만, 그런 느낌?) JQuery 기술 관련 각종 URL과 문서를 건네주더군요.
자신이 만든 사이트와 함께 JQuery를 소개 시켜준 뒤 유유히 사라졌고(1년이나 지났는데 여전히 깨 쏟아져서 깨 볶아 먹는지 원....) 전 이 새로운 도구를 바라 보며, 먼 산 바라기를 했죠. 뭘 제대로 알아야지....
다행히 API 설명된 사이트를 알려줘서, 그 사이트에 적힌 내용을 하나씩 하나씩 보기 시작했습니다.(아.. 일어로 되어 있습니다 -_-;;) 그러나 역시 똥 한바가지 찬 제 머리로는 단빡에 이해되지 않았고, 다시 삽질 모드를 발동 했죠. 일단 지금 하던 작업과 연관 지어 Javascript 도배가 예상되는 그 페이지에 하나씩 하나씩 적용해 보기 시작했습니다..
왠걸.... 그 예전 Javascript 코드가 1/3 수준으로 줄고, 그 조작도 무척이나 편해져 버리더군요. 게다가 기능은 더욱더 풍부해진.....
이제 지금까제 제가 이해한 부분을 기반으로 이 JQuery를 소개하도록 하겠습니다. 단 Javascript로 자신이 직접 무언가를 짜기 보다는 네이년이나 다움을 통해 단순 Copy & Paste 수준에 머물고 있다면, 굳이 이 JQuery 세계를 이해하려 하는 만용은 조금 자제해 주세요.. 지금 부터 할 내용은 getElementById 라는 함수를 남발하고, AJAX를 좀 하면서, HTML 엘리멘트들을 이리 저리 옮기고 있는 분에게 새로운 도구를 GET 하시는 계기 정도의 글이 될 것 같군요. ( 물론 Javascript 전혀 몰라도, 그냥 읽어보는 것도 뭐 상관은 없지만 시간 낭비지 않을까 싶네요 (笑))
먼저 JQuery를 소개하기 앞서, JQuery가 가진 몇가지 장점들 중.... 제가 감동 먹은 베스트 2를 먼저 말씀드리겠습니다. 뭐 API나 각종 기능들의 소개는 다른 블로그들을 통해서 얻으실 수 있으니깐요. ㅋ
첫번째. null 걱정이 없다!
뭐 걍 직관적으로 javascript 짜시는 분들이야... 원래 신경 안썼다고 하시겠지만, 저 같이 결벽증이 있고, 뭐든 의심하고 보는 사람에게는 엄청난 스트레스 입니다.
예를 한번 들어보죠...
var linkbutton = doucment.getElementById("forNextPage");
linkbutton.style.display = "none";
라는 코드가 있을때... 과연 저 linkbutton 가 null 일까요? 아닐까요? 당연히 있으면 null은 아니겠지만, 만일에 저 "forNextPage" 부분이 변수로 처리되서 값을 만들어서 넣는다면? 과연 항상 null 이 아니라고 장담할 수 있을까요? 만일 null 이기만 하면, 바로 자바스크립트 오류 팍 뿜죠... 그게 걱정 된다고 밑에 if (linkbutton != null )을 넣기 시작하면 점점 코드가 점점 가관의 길을 걷게 됩니다.
자... 이걸 JQuery로 한다면....
$("#forNextPage").css("display", "none");
네.. 이 한줄입니다. $("#forNextPage")가 null인지 아닌지 어떻게 아냐구요? 절대 null일리 없습니다. 단지, $("#forNextPage") 안에 객체가 있을까 없을까 정도이지, $("#forNextPage") 자체는 null 이 아닙니다. 만일 $("#forNextPage")로 JQuery 객체가 없다고 하면, 그냥 안이 비어 있는 JQuery 객체일 뿐입니다. 그래서 .css(.....) 부분은 실행되지 않고 끝나게 되겠죠. 믿어지지 않는다구요? 뭐 일단 제가 말씀드린 3가지 장점 설명 후에 JQuery 객체에 대해 제가 이해한 내용을 언급드리죠.
두번째, 다중 선택을 한줄로!!!
만일 <div> 라는 객체를 남발한다고 하죠. 그런데 그 div를 일괄적으로 색을 변경해야 된다고 할때... 어떻게 하시나요? 물론 다양한 방법이 있지만, 저 같은 경우에는 각 div 에 id를 할당 한뒤, 그 id를 기반으로 작업을 수행합니다.
예를 들어보죠....
<div id="parent001">
<div id="display1"> 보여줍니다.</div>
<div id="Rdisplay1" >이건 빨간색입니다.</div>
<div id="display2"> 보여줍니다.</div>
<div id="Rdisplay2" > 이건 빨간색입니다.</</div>
<div id="display3"> 보여줍니다.</div>
<div id="Rdisplay3" > 이건 빨간색입니다.</div>
<div id="display4"> 보여줍니다.</div>
<div id="Rdisplay4" >이건 빨간색입니다.</div>
<div id="display5"> 보여줍니다.</div>
<div id="Rdisplay5" > 이건 빨간색입니다.</div>
</div>
자 위와 같은 html이 있다고 하죠. 자 XHTML의 특징이 바로 저 id라는 항목인데, id는 전체 XHTML 내에서 고유하게 할당해 주어야 합니다. 뭐 저렇게 규칙적인 것은 Server-side-script 인, PHP나 ASP 또는 ASP.NET 으로 만들면 뭐 껌입니다. (껌이 쉬운지는 잘 모르겠지만요..)
자 위의 내용을 자바스크립트를 통해 "보여줍니다" 항목에 style을 모두 파란색으로 변경한다고 하죠.
예전 제가 했던 방식에 의거하면.. 이렇게 만들어지겠죠?
for(i=1; i<6;i++) {
document.getElementByIdl("display" + i).style.background-color = "Blue";
}
네 위와 같이 짰을 겁니다. 그러나.. 이 결벽증 어디로 갈까요? 다시 저 eval의 결과가 null 인지 아닌지 검사해야 합니다.
for(i=1; i<6;i++) {var target = document.getElementById("display" + i);
if(target != null)
target.style.background-color = "Blue";
}
3줄 짜리가 벌써 5줄로 거의 2배가 되버렸네요. 그래도 안전하면 뭐든지.. ㄷㄷㄷ
자.. 저것을.. JQuery로 승화시키면?
$("div[id^='display']").css("background-color","Blue");
조금더 다듬는다면,
$("#parent001']").children("div[id^='display']").css("background-color","Blue");
윗 줄은 전체 document에서 div를 모두 검색하되 단, id가 display로 시작하는 것을 검색하는 것이고, 두번째 줄은 parent001을 먼저 찾고, 그 하위에 있는 구성요소 중 div에서 id가 display로 시작하는 것을 찾는 것이죠.
for에 getElementById에 그것이 null인지 아닌지 ... 전혀 없고, 그냥 한줄로 끝납니다.
결론
정말 엄청난 녀석을 낚았다고나 할까요. 동생 덕에 근좌 자바스크립트 점점 간단해 지고 있습니다. ( 물론 동료들에게는 아직 알리지 않은 내용이니, 그 분들이 제 자바스크립트 소스를 보면 암호문 같아 당혹스러워 할 지는 모르겠습니다. -_-;;;;)
일단, 간단하게 제가 느낀 감상문을 먼저 적어보았고, 그 동안 제가 해보면서 느꼈던 각종 테크닉들을 정리해서 올려보도록 하겠습니다.