며칠 전 jQuery 1.4 버전이 공개되었습니다.

[출처] http://hoons.kr/MetaBlog/Contents.aspx?blogIdx=24604

[출처] http://jaweb.tistory.com/48

jQuery/Core란?

jQuery/Core란 jQuery의 핵심이 되는 것을 의미한다.

그만큼 우리가 jQuery를 사용할 때 많이 사용되는 부분이기도 하다.

하지만 Core라고해서 어려울것은 없고, 의외로 간단하다.

Core를 표현하면 "$()"이렇게 된다.

참고로, jQuery를 표현할 때 두가지가 있는데

"jQuery(document).ready()" 이렇게 "jQuery"를 사용하는 방법과

"$(document).ready()" 처럼 "$"로 사용하는 방법이 있다.

이것은 사용자 취향에 맞게 선택해서 사용하면 된다.

정확한 개념을 알고 싶으신 분은 http://docs.jquery.com/Core 여기로 가시면 자세히 알 수가 있다.

하지만 저 처럼 영어에 약하신 분들은 이렇게 이해를 하시면 된다.

그럼 이제 사용법에 대해서 한번 살펴 봅시다.

jQuery 사용법

사용되는 예제나 API는 jQuery 공식사이트에서 발췌한 것임을 미리 말씀드리고 시작합니다.

http://docs.jquery.com/

1. jQuery( expression, context )

: expression는 String로 표현되고 특정 태그를 찾을때 사용되며, context는 Element나 jQuery으로 인자 값으로 받는다. 즉, $("input:radio", document.forms[0]); 이와 같이 사용된다.

2. jQuery( html )

: jQuery는 인자값으로 html 태그를 받아 그 태그를 HTML페이지에 추가를 할 수가 있다.

즉, 이렇게 $("<div><p>Hello</p></div>").appendTo("body") 사용이 되기도 하고,

$("<input/>").attr("type", "checkbox"); 이렇게도 사용되기도 한다.

풀이 하자면 첫 번째는 "body"안에 "<div><p>Hello</p></div>"를 삽입(appendTo()는 특정 태그에 사입할 때 사용) 한다는

애기고 두번째는 "input"를 생성하되 "type=checkbox"로 하여 태그를 생성하게 된다.

두번째는 HTML 마지막 부분에 삽입이 된다.

3. jQuery( elements )

: DOM element(s) 를 인자로 받아 그 지역의 elements를 설정할 수가 있다.(한개 혹은 다수를 지정할 수가 있다.)

$(document.body).css( "background", "black" ); -> HTML 배경색을 검정색으로 바꾼다.

$(myForm.elements).hide() -> myForm의 이름을 가진 form안의 elements을 숨긴다.

4. jQuery( callback )

: 이것은 인자값을 함수로 지정을 할 수가 있다는 애기로 jQuery를 처음 시작하는 부분에서 많이 접해 봤을 것이다.

즉, "$(document).ready(function(){....};)" 이 부분

이렇게 사용하는 것은 특정 이벤트가 발생할 때 그 부분을 함수로 처리 하기 위해서 이다.

예를 들어 마우스를 클릭시 경고창을 띄워주고 싶다면 아래와 같이 하면 된다.

"$(document).click(function(){

alert("마우스가 눌려짐!!");

};)"

jQuery Object Accessors

이번에는 직접 오브젝트를 엑세스할 수 있는 jQuery에 대해서 알아 본다. 뭐, jQuery 홈페이지에 가면 다 나와 있는 것들이긴 하지만 그래도 본좌의 나름 해석판을 듣고 싶다면 계속 봐도 된다. 다만, 본좌도 영어가 짧기 때문에 직접 실행해 봐서 이해 하기도 한 부분도 있고 이리저리 찾아 다니면서 알아낸 것 들도 있다. 그래서 영어 잘하시는 분 들이 봤을 경우 영 아니다 싶으면 자세히 답변을 남겨 주시면 참고하여 수정토록 하겠음...

그럼 오브젝트를 엑세스 할 수 있는 jQuery 에 대해서 알아 봅시다.

1. each( callback )

: 해당 오브젝트에서 어떤 함수처리를 하고 싶을 경우 사용된다.

코드를 직접 보면 이해가 쉽게 된다.

$(document.body).click(function() {
    $("div").each(function (i) {

// 클릭 이벤트가 발생 되었을 경우 "div"태그에서만 글 색상을 변경하도록 한다.
if (this.style.color != "blue") {
    this.style.color = "blue";
} else {
    this.style.color = "";
}

});

});

이 코드를 실행 시키면 클릭 할때마다 색깔이 변경이 된다. 참고로 이 코드는 "body"안의 모든"div"태그를 뜻한다. 특정 "div"

에서만 이벤트가 발생되기를 원하시면 그 태그의 인덱스를 찾아야 할 것이다.

2. size()

: 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다.

$(document.body).click(function () {
        $(document.body).append($("<div>"));
        var n = $("div").size();
        $("span").text("There are " + n + " divs." + "Click to add more.");
}).click(); // trigger the click to start

3. length()

: 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다.

size()와 동일하다.

$(document.body).click(function () {
        $(document.body).append($("<div>"));
        var n = $("div").length;
        $("span").text("There are " + n + " divs." + "Click to add more.");
}).trigger('click'); // trigger the click to start

4. eq( position )

: 해당 포지션에 위차한 태그를 찾는다.

한마디로 아파트로 비교하자면 몇호실을 찾는지와 같다. "405호실를 청소해라!"라는

명령이 있다면 그 아파트의 "405호실"을 찾아가서 거기만 청소를 하면 된다. 구지 다른곳도 청소할 필요가 없다는 것이다.

position의 위치는 0 부터 시작해서 -1까지다.

$("p").eq(1).css("color", "red"); // "p"태그에서 1번지에 해당하는 "p"를 변경한다. (0 부터 시작하므로 두번째를 의미한다.)

5. get()

: 해당 태그의 Elements 들을 Array형태로 리턴한다.

즉, '$("div").get() 하면 모든 div태그 들을 Array 형태로 리턴한다.'

한마디로 하면 DOM의 Elements를 배열로 리턴하는 것이다.

function disp(divs) {
    var a = [];
    for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
    }
        $("span").text(a.join(" "));
}

disp( $("div").get().reverse() ); // div태그의 값들을 읽어 와서 그 값의 순서를 뒤집는다.

// 예를 들어

// <div>1</div><div>2</div><div>3</div> 이 있으면 reverse() 하면 3, 2, 1로 순서가 뒤집히게 된다.

6. get( index )

: index에 해당되는 위치의 element을 가져온다.

즉, 단일 element를 가져 오게 되는 것이다.

$("*", document.body).click(function (e) { // body안의 모든 Elements에서 클릭 이벤트가 발생되면.
    e.stopPropagation();
    var domEl = $(this).get(0); // 클릭된 태그의 Elements중 0번지에 해당하는 Element를 가져온다.
    $("span:first").text("Clicked on - " + domEl.tagName); // 0번지의 태그이름을 출력한다.
});

이해하는데에는 어렵지 않을 것이다. 프로그래밍을 하다보면 위와 비슷한 함수를 많이 접해 보기 때문이다.

7. index( subject )

: subject의 인덱스 번호를 찾는다.

인덱스 번호도 0부터 시작된다.

$("div").click(function () {
    // this is the dom element clicked
    var index = $("div").index(this); // "div"태그에서 클릭이벤트가 발생 될경우 그 "div"태그의 인덱스 찾아서 리턴한다.
    $("span").text("That was div index #" + index);
});

jQuery/Core에 대해서는 여기서 마무를 하겠다.

이 외에도 Data Cash, Plugins에 대한 것도 있지만 아직은 다루지 않겠다.

시간이 짬짬이 날때 마다 글을 남기곤 있지만 회사 일도 바쁘다 보니 쉽게 글을 쓰지 못하는 것도 없지 않아 있다.

jQuery란?

존 레식에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다

jQuery는 자바스크립트와 HTML 사이의 상호 작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다.

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.

기능

jQuery는 다음과 같은 기능을 갖고 있다.

• DOM 엘리먼트 선택
• DOM 트래버설 및 수정 (CSS 1-3지원. 기본적인 XPath를 플러그인 형태로 지원)
• 이벤트
• CSS 조작
• 특수효과 및 애니메이션
• Ajax
• 확장성
• 유틸리티 - 브라우저 버전, "each"함수
• 자바스크립트 플러그인

사용법

jQuery는 한 개의 JavaScript파일로 존재한다. 공통의 DOM, 이벤트, 특수효과, Ajax함수를 포함한다. 다음 코드를 쓰면,

웸 페이지로 포함시킬 수 있다.

<script type="text/javascript" src="path/to/jQuery.js"></script>

jQuery는 두 가지의 상호 작용 스타일을 갖고 있다.

• $함수 이용 . jQuery 오브젝트의 팩토리 메소드이다. 이 함수들은 "chainable"하다: 각각은 jQeury 오브젝트를 리턴한다.
• $. - 가 붙은 함수 이용. 이들 함수는 jQuery 오브젝트 그 자체와 연동되지는 않는다.

일반적으로 여러 개의 DOM노드들을 조작하는 웍플로우는 $함수로 시작된다. CSS 셀렉터 스트링을 가지고 호출된다. 결과적으로

0개 혹은 그 이상을 HTML 페이지 내의 엘리먼트를 리퍼런스하는 jQuery 오브젝트가 리턴된다. 이 노드 집합들은 jQuery 오브젝트에

대해 인스턴스 메소드 들을 적용함으로써 조작될 수 있다. 혹은 노드들 그 자체가 조작될 수 있다.

예를 들면 다음과 같다.

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

.. div 태그가 달리 모든 엘리먼트를 찾되, 클래스 애티르뷰가 test인 것을 찾는다. <p>태그를 찾되, 클래스 애트리뷰트가

quote인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 blue를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로

슬라이드(미끄러지게) 시킨다. $및 add함수는 찾아낸(matched) 집합(set)에 영향을 준다. addClass및 slideDown는 리퍼런스된

노드들에 영향을 준다.

$.가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티)메소드들이다. 예를 드면 다음과 같다.

$.each([1,2,3], function() {
    document.write(this + 1);
});

... 234를 도류먼트에 출력한다.

Ajax 루틴들은 $.ajax및 관련 코드를 이용하여 수행할 수 있다. 이를 사용하여, 원격 데이터(remote data)를 로드하거나 조작할 수 있다.

$.ajax({
    type: "POST",

url: "result.jsp",
data: "name=John&location=Boston",
success: function(msg){
    alert( "Data : " + msg );

}

});

파라미터 name=John, location=Boston을 주면서 some.php에 요청을 보낸다.

요청이 성공적으로 수행되었으면, 그 응답이 alert()된다.

* 위 내용은 위키백과에 등록된 내용입니다.(http://ko.wikipedia.org/wiki/JQuery)

jQuery가 무엇일까?

jQuery가 무엇일까? 라는 고민을 가지고 jQuery를 처음 접하게 되었다.

jQuery를 알게 된 것은 아는 형이 회사에서 jQuery를 쓰고 있다는 애기를 듣고 난 후였다.

처음에는 Query라고 해서 SQL Query문을 만들어 주는 것이 아닌가? 라느 생각을 가졌었다.(참 민망하다..) ㅡ.ㅡ;;

나중에야 검색을 하고 난후에야 웹 페이지에서 쓰이는 Javascript 프레임워크라는 걸 알게 된것이다.

프레임워크라고 하면 배우기만 하면 쓰기 편안한데, 막상 배우려면 시간이 꽤 많이 든다. 프로그래머라면 이 말에 공감이 갈 것이다.

어떤 프로그래머들은 프레임워크에 대해 안좋은 생각을 가지고 있는 분들고 있을 것이다. (뭐, 생각은 자유니깐..^^v)

본좌 또한 배우기에 귀찮다는 생각을 가지고 있었기에 열나게 DOMScript 만을 썼었다.

그러나 막상 개발에 들어가니 Javascript코드가 굉장히 길어지게 된것이다.

뭐 나만 보는 것이면 상관이 없었지만 다른 사람이 만약 내가 개발한 코드를 보고 분석할려면 시간이 좀 걸릴 것이다.

또한, 코드가 길다보니 마우스의 휠과 Ctrl + F 만을 열나게 사용해야만 했다. 본좌는 이게 가장 싫었다.

분할해서 Javascript 코드를 작성하면 되지 않냐! 라는 말 하시는 분들도 계시겠지만 본좌는 단순한 걸 좋아 한답니다. ^^v

그래서 코드를 경량화 시켜보고자 우선 Prototype을 배우고자 했지만, 갑자기 jQuery가 생각 났고,

누군가 Prototype보다 가볍다고 해서 jQuery를 쓰게 된 것이다.

우선 jQuery를 어떻게 사용하는 지를 알아 보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

-------------- 실행 경과 -----------------

jQuery의 시작은

$(document).ready(function(){

// 여기에 코딩!!

});

이렇게 시작이 된다. 이제 가운데 부분에 코딩만 하면 되는 것이다.

$(document).ready(function(){..}) 이부분에 자세히 알아 보면

$(document).ready(function(){..}) == window.onload = function(){....} 이런 공식이 된다.

하지만 약간 다르다. 그 이유를 살펴보면...

대부분 자바스크립트 프로그래머들은 브라우저의 document가 모두 로딩되고 난 후에 코딩을 하기 위해서

<body> 태그에 onload 이벤트를 사용하거나 window.onload = function(){....} 이와 같은 스크립트 코드를 넣는다.

그러나 이 경우에는 이미지까지 다운로드가 모두 완료 된 후 이벤트가 호출되기 때문에,

큰 이미지의 경우 실행속도가 늦은 것처럼 사용자에게 보일 수 있다.

jQuery는 이러한 문제를 해결하기 위해 다음과 같은 이벤트를 제공한다.

$(document).ready(function(){

})

이 이벤트는 브라우저의 document(DOM)객체가 준비가 되면 호출이 된다.

따라서 이미지 다운로드에 의한 지연이 없다.

위 코드를 생략하면

$(function(){

// 여기에다가 코딩을 하세요

});

이렇게 사용이 가능합니다.

자바스크립트 프레임워크 제이쿼리를 아주 간단하게 소개할께요

자바스크립트 프레임워크가 뭐야?

기본적으로 우리가 자주 사용하는 자바스립트를 보다 편리하게 사용할수 있는 일종의 라이브러리가 보면 됩니다~
지금 버젼이 1.2.6 버젼까지 나와있지만 오픈 소스이기 때문에 자신의 입맛에 따라 직접 코드를 수정할수도 있어요
하지만 소스를 열어보는순간 얼.음. 이 되고 말테니 자신이 없다면 그냥 있는것을 사용하길 권장 ^^;;

그럼 왜 제이쿼리를 사용해야 하는지 간단하게 설명을 하고 넘어가 봅시다~!

제이쿼리 장점

1. 가볍고 편리하다.

제이쿼리는 약 100kb 정도의 파일로 이루워져 있으며 우리가 웹환경에서 개발시

미친듯이 for 문을 쓰고 if문을 쓰고 난리를 치던것을 초간단하게 몇줄로 해결할수 있다.

2. 불필요한 소스를 줄일수 있다.

고로 깔끔한 UI가 재탄생한다.

UI 개발자들도 적극 제이쿼리를 적용해서 만든다면 좀더 간결하고 멋진 소스들이 나올것으로 기대한다.

3. FF나 IE에서 제대로 동작.

웹표준과 타브라우저 효환성 용의 제이쿼리를 쓰면 왠만한건 FF나 IE에서 제대로 동작한다.

4. 아주 편리한 ajax호출.

ajax를 사용하려면 document.getElementById 에서 시작부터 브라우저별 XMLHTTP 까지 소스가 엄청 길어지는 것을 볼수 있는데

get방식, post방식 아주 간단하게 사용할수있다.

한달간 사용하면서 내가 느낀 제이쿼리의 장점은 위와 같다고 보면 될것 같다.
아직 많은것을 아는것은 아니지만 제이쿼리는 정말 매력적이며 웹과 때놓으라면 때놓을수 없는 사이인것 같아 완전 사랑한다~ ㅋㅋㅋ

나의 귀차니즘을 해결할수 있으니깐~ ㅋ

현재의 웹페이지는 자바스크립트가 없으면 아무것도 구동할수 없을만큼 비중이 커져만 가면서 한 웹페이지에 자바스크립트가 많게는 한페이지가 넘도록 줄줄이 쓰곤 한다. 그렇다면 맨날 쓰는 자바스크립트를 좀더 편하게 쓸수 있고 좀더 타이핑을 줄일수만 있다면 얼마나 좋을까?? (난 정말 타이핑을 치는게 싫다. 안그래도 노가다인데 정말 피토한다. ㅠ 그래서 최대한 타이핑수를 줄이고 개발하는게 좋다.)

자 그러면~~!!
고민하지말고 제이쿼리를 <head> 태그안에 추가하자~! 그러면 이러한 고민은 없어질테니깐~~

프로그래머에 대한 속담과 격언

01. 가는 소스가 고와야 오는 파일에 바이러스 없다.
02. 잦은 Warning 에 Error 날줄 모른다.
03. 영업은 상사 편이다.
04. 디자이너는 프로그래머 편이다.
05. 프린터 밑에 누워 소스 떨어지기만을 기다린다.
06. Printf 도 디버깅에 쓸려면 에러난다.
07. 에러 무서워서 코딩 못 할까
08. 소스가 한 박스라도 코딩을 해야 프로그램이다.
09. 코더도 타이핑하는 재주는 있다!!
10. 길고 짧은 것은 Strlen을 써봐야 한다.

11. 소스도 먼저 코딩하는 놈이 낫다.
12. 믿는 팀장에 발등 찍힌다.
13. 개발실 청소 아줌마 삼 년에 디버깅한다.
14. 보기 좋은 코드가 디버깅하기 좋다.
15. 소스 잃고 백업장치 구입한다.
16. 아니 코딩한 소스에 버그 날까?
17. 안 되는 코더는 엔터를 쳐도 PC가 다운된다.
18. 잘되면 프로그래머 탓, 못되면 시스템 탓.
19. 좋은 파일도 위아래가 있다.
20. 하루 프로그래머 정품단속반 무서울 줄 모른다.

21. 백업을 안 하면 삼대가 내리 흉하다.
22. 잘 키운 개발자 한명 열 코더 안 부럽다.
23. 멀쩡한 프로그램에 날 세그먼트폴트.
24. 바늘 버그가 치명적 버그 된다.
25. 안에서 새는 메모리 밖에서도 샌다.
26. 프로그램은 개발자가 짜고, 보너스는 영업이 받는다.
27. 늦게 배운 코딩 날 새는 줄 모른다.
28. 디버깅 한번으로 천 버그 잡는다.
29. 돌(완벽한) 코드도 두들겨보고 컴파일하자.
30. 경영다툼에 개발자 등 터진다.

31. 제 코드가 석자.
32. KLDP서 윈도우 찾기.
33. 개발일정 시계는 거꾸로 매달아도 간다.
34. 버그보고 놀란 가슴 오타보고 놀란다.
35. 코딩 전 마음 다르고, 코딩 후 마음 다르다.
36. 제 코드 구린 줄 모른다.
37. 코드가 죽 끓듯 하다.
38. 환경이 좋아야 개발자가 모인다.
39. 소스 놓고 main도 모른다.
40. 악습코드 구제는 팀장도 못한다.

41. goto에 소스 꼬인 줄 모른다.
42. 프로그래머 많으면 프로젝트 완성될 날 없다.
43. 개 같이 코딩해서 정승처럼 사표 쓴다.
44. 숙제 밭에 굴러도 학교가 좋다.
45. 코딩도 전에 컴파일 한다.
46. 컴파일 하자 컴 다운된다.
47. VC 대신 Vi.
48. 개발자 간 빼 먹기.
49. 리펙토링도 단숨에 하랬다.
50. 아는 코드도 다시 봐라.

51. 개발자 망신은 Copy&Paste가 시킨다.
52. 짧은 코드가 더 아름답다.
53. 천줄 코드도 #include부터.
54. 한 프로그램에 개발자 되랴.
55. 사장도 버그 날 땐 온다.
56. 꽃보다 코딩!
57. 선옵티마이징이 개발자 잡는다.
58. 개발자 키워서 대기업 준다.
59. 버그잡자고 빌드 다 뽀갠다.
60. 될성부른 코드는 들여쓰기부터 안다.

61. 빌드 뽀갠 놈이 성낸다.
62. 다된 프로젝트에 코 빠트리기.
63. 개발자 살이는 코딩 3년, 프로그래밍 3년, 파워 포인트3년.
64. 사표 쓴다 사표 쓴다 하면서 프로젝트 세 개 한다.
65. 같은 값이면 대기업 파견 살이.
66. 고와도 내 코드 미워도 내 코드.
67. 코드 주고 뺨 맞는다.
68. 코드 가는데 버그 간다.
69. 코드를 봐야 디버깅을 하지.
70. 빌드 뽀갠 날 데모하란다.

71. 발 없는 소스가 천리 간다.
72. 손은 삐뚤어 졌어도 코딩은 바로 해야 한다.
73. 소스 한 줄로 천 냥 빚도 생긴다.
74. 개발자 목에 usb 메모리 목걸이.
75. 스파게티 코드 소스가 주석 안 달린 소스 나무란다.
76. 기능 많은 프로그램 버그 잘날 없다.
77. 3일에 짠 코드 80개월 간다.
78. 원수는 메신저에서도 만난다.
79. 모니터도 때리면 꿈틀거린다.
80. 비트 모아 테라.

81. 내일 정전이 된다 해도 나는 오늘 한 줄의 코드를 쓰겠다. - 스피노자
82. 스스로 돌아봐서 에러가 없다면 천만인이 가로막아도 나는 컴파일하리라. - 맹자
83. 나는 하루라도 코드를 쓰지 않으면 입안에 가시가 돋는다. - 안중근 의사
84. 가장 커다란 에러는 컴파일의 순간에 도사린다. - 나폴레옹
85. 나는 코딩한다, 고로 나는 존재한다. - 데카르트
86. 프로그램은 1%의 영감과 99%의 야근 노가다로 이루어진다. - 에디슨
87. 네 코드를 알라. - 소크라테스

[프로그래머] 16개의 컴퓨터 프로그래밍 언어를 무기로 표현하면?

[원본] http://bjorn.tipling.com/if-programming-languages-were-weapons