현재 이글은 작성중입니다.
jQuery를 이미 경험 하신분들은 jQuery 가 가지고 있는 파워에 이미 놀라시고 계실거라 생각 되고,
혹시 처음 접하시는 분이 있다면... 행운을 잡으신 겁니다. :)
jQuery를 쓴다는것 하나만으로 개발자는 행복해 질 수 있습니다.
자 그럼 왜 행복해 지는지 한번 들어 가는 얘기를 해보죠.
http://docs.jquery.com/How_jQuery_Works
페이지의 첫번째 예제..
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
line 1) $(document).ready(function(){
$ 기호는 보통 php 나 perl 개발자면 익숙하지만 사실 javascript 유저의 경우 낮선게 사실입니다.
jQuery 에서는 $ 기호로 jQuery object 를 표시하는 namespace 입니다.
예전에는 보통 <body onload="페이지로딩시자동 실행될 함수"> 이렇게 사용했던 부분입니다.
이제는 거의 모픈 페이지의 이벤트를 jQuery event 로 사용하 실 수 있습니다.
즉 1라인의 의미는 document ready handler 입니다. 풀어 보자면 $(document) 부분은 jQuery 에서 window.document 를 선택하는
selector 입니다.
.ready 부분은 그냥 감으로 느끼시지 바랍니다.
ready 의 파라미터로 함수가 오네요 (function() { 이 부분이 jQuery의 코딩 매너라고 보시면 됩니다...
파라미터로 함수(handler라고도 하죠) 를 넘기는 방법 입니다. (전에 c 나 c++ 코딩을 해보신분들은 함수 포인터..가 연상 될 수 도 있으나
형식은 조금 다릅니다.)
보통 구조적 언어에서는 함수를 따로 기술하고 함수의 이름을 호출 하는 방법이 일반적 이지만, jQuery 에서는 재미 있게도 이 룰을 깨고
있습니다.
저는 개인적으로 첨에는 이러한 매너를 좋아 하지는 않았는데, 현재는 아주 만족 하고 있습니다.
코드가 좀더 직관적으로 변하고, 유지 보수성도 좋아 집니다...
물론 재사용이 필요한 부분을 그 부분을 따로 함수로 정리 하여 사용하는게 답이죠.
첫라인에 대한 얘기가 길어 지네요, 그만큼 첫 라인의 의미가 상당히 강합니다. 첫라인을 이해 하시면 jQuery 의 당당한 개발자가 ?
되신거라고 생각 하네요 :)
Line 2 ) $("a").click(function(event){
두번째 라인은 이제 좀 쉽게 이해 할 수 있을거라 생각 되는군요.
$("a") 는 "a" tag 를 지정 합니다. 이부분을 좀세 섬세히 알기 위해서는 jQuery Selector 에 대하여 자세히 보시기 바랍니다.
.click(function(event){ 이 부분은 click event 를 지정하는 부분 입니다. 즉 click handler 입니다.
Line 3) alert ( '...') skip하죠
Line 4) event.preventDefault();
event의 원래 행동을 막는다... 가 직역 입니다.
이번 경우에는 a tag ( anchor) 라서 browser a href link 로 forwarding 하는 행동을 막습니다.