개발자(開發者) a developer

jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기

난이도 : 중급

Michael Abernethy, 제품 개발 관리자, Optimal Auctions

2008 년 11 월 18 일

jQuery는 동적 RIA(Rich Internet Application)를 쉽게 만들기 위해 개발자가 고려하는 자바스크립트 라이브러리로 뜨고 있습니다. 브라우저 기반 응용은 데스크톱 응용을 계속해서 대체하고 있기에, 이런 라이브러리는 계속해서 활용 범위가 넓어질 것입니다. jQuery 연재물을 통해 jQuery 관련 지식을 얻고 웹 응용 프로젝트에 활용하는 방법을 익혀봅시다.

도입

jQuery는 웹 개발자를 위한 라이브러리 선택 과정에서 다른 자바스크립트 라이브러리 옵션과 간격을 벌리기 시작했으며, 클라이언트 쪽 개발을 쉽게 도와주며 RIA를 빠르고 효과적으로 만드는 방법을 찾고 있는 프로그래머의 관심을 한몸에 받고 있다. RIA 활용이 점점 더 세상에 널리 퍼짐에 따라, 개발을 돕기 위한 자바스크립트 라이브러리 활용도 함께 늘어날 것이다. RIA는 데스크톱에서 동작하는 응용과 비슷한 효과를 얻기 위해 CSS/자바스크립트/Ajax를 조합해 브라우저를 통해 동작하는 응용으로 (대충) 정의할 수 있다. 파이어폭스, IE, 사파리, 구글이 최근 선보인 새로운 크롬 브라우저에 추가된 최신 기능은 브라우저 내부 자바스크립트 엔진 속력을 높이는 데 초점을 맞추고 있다. 이렇게 하는 가장 중요한 이유는 브라우저 제조사가 우리에게 머지 않은 장래에 등장할 좀 더 매혹적인 RIA 보급을 장려하기 위해서다. 브라우저 회사들은 수만 행에 이르는 자바스크립트 코드를 포함하는 웹 페이지를 마음 속에 그리고 있으며, 시작부터 숙성되고 버그가 없는 라이브러리의 중요성을 강조한다.

따라서 웹 응용의 미래가 사람들을 몰두하게 만드는 풍부한 인터페이스로 이동함에 따라 웹 개발자는 점점 더 이런 작업을 쉽게 도와주는 도구로 방향을 바꾸고 있다. 지금 바로 사용할 수 있는 자바스크립트 라이브러리가 시중에 나와 있으며, 각각은 나름대로 장단점은 물론이고 열성파와 반대파도 있다. 기능 측면에서 우월성을 따지지 않는 이유는 궁극적으로 그다지 중요한 문제가 아니기 때문이다. 궁극적으로 어떤 라이브러리가 양으로 승부를 걸어 인기가 더 많은지를 고려해야 한다. 네 가지 가장 인기 있는 자바스크립트 라이브러리를 구글 트렌드 그래프로 살펴본 모습은 다음과 같다. 과거 6~8개월 동안에 jQuery가 자바스크립트 라이브러리 중에서 가장 인기를 끌고 있으며, 가파르게 성장중이다.

구인 시장에도 자바스크립트 라이브러리로 jQuery가 뜨고 있음을 확인할 수 있다. 경력 관리 네트워크인 Monster.com을 대충 살펴봐도 "jQuery" 관련 일자리가 113개가 나오는 반면에 YUI는 67개, ExtJS는 19개, mootools는 13개만 나온다.

jQuery 연재물 중 첫 번째 기사는 jQuery 문법, 설정 방법, 함수 호출 방법부터 살펴본다. 이 기사 후반부에는 라이브러리에 들어있는 핵심 함수를 탐험하고 DOM 탐색을 쉽고 직관적으로 가능하게 만드는 강력한 선택자와 필터 활용법을 탐험한다. 나중에 나오는 기사에서는 CSS 처리, 폼 제어, 텍스트 변경, Ajax 단순화, (모든 사람의 눈을 즐겁게 만들어주는) 애니메이션을 소개한다. jQuery에서 가장 흥미로운 기능은 플러그인 아키텍처로, 개발자가 jQuery 기능을 추가하도록 도와준다. 마지막 기사에서는 RIA 개발 과정을 완료하기 위해 활용 가능한 강력한 플러그인 몇 가지를 소개한다.

이 연재물은 자바스크립트 문법, CSS 문법, DOM 문법을 미리 알고 있는 독자를 염두에 둔다. 연재물을 읽기 전에 각각에 대한 문법을 다시 한번 기억할 필요가 있다면, 이 기사 참고자료 절에 실어 놓은 W3Schools를 강력하게 추천한다.

기초

jQuery로 즐거운 여행을 떠나기 전에 설치나 시작 같은 기초 내용을 확인할 필요가 있다. 다운로드 절에서 jQuery 라이브러리를 내려받아 다른 외부 자바스크립트 파일과 마찬가지로 연결하는 작업부터 시작하자.

<script type="text/javascript" src="jquery.js"></script>

jQuery가 DOM 객체를 다루므로, 페이지에 있는 모든 엘리먼트를 메모리에 올리기 전에 자바스크립트에서 이런 객체를 처리한다면 문제가 생긴다. 하지만 jQuery 코드를 호출하기 전에 이미지, 배너 광고, 분석 코드, 유튜브 미리 보기 같이 페이지에 있는 모든 구성 요소가 메모리에 올라올 때까지 기다리기도 원하지 않을 것이다. 적당히 타협점을 찾아 페이지에 있는 모든 엘리먼트가 올라오고 이미지, 링크 처리, 렌더링이 끝나기 전에 안전하고 오류도 없는 상황에서 jQuery 코드를 호출하면 된다. 이런 중요한 원칙을 지키려면, 모든 jQuery 코드는 on page나 자체 함수에서 이런 기능을 수행할 필요가 있다. 함수가 아닌 다른 자바스크립트 영역에 jQuery 코드를 놓아두지 말자.

// 틀림
<script language=JavaScript>
   $("div").addClass("a");
</script>

// 바름
$(document).ready(function(){
   $("div").addClass("a");
 });

// - 또는 -

$(document).ready(function(){
   myAddClass();
 });

function myAddClass()
{
   $("div").addClass("a");
}

또한 추가로 도움이 될 만한 내용을 하나 더 소개한다. 한 페이지에서 document.ready() 함수를 여러 번 사용할 수 있으며, 각각은 차례로 호출이 일어난다. 모듈로 페이지를 동적으로 구성하며, 모듈마다 독자적인 jQuery 코드를 지원할 때(예: 작은 PHP 코드 조각으로 구성된 PHP 페이지) 이를 염두에 두는 편이 좋다.

jQuery에서 가장 흥미로운 기능 중 하나는 "체인 연결"이다. 이 기능은 가독성과 코드 용이성을 높이기 위해 일련의 함수를 하나로 붙이도록 만든다. 거의 모든 jQuery 함수는 jQuery 객체를 반환하므로, 간단하게 반환된 객체에 추가적인 함수를 호출하는 방식으로 체인을 여러 개 연결해서 완벽한 jQuery 명령을 만들 수 있다. 자바에서 제공하는 String 클래스와 이 기능을 비교한다. 자바에서 여러 함수가 한 행에 반환한 String 객체를 결합하듯이 jQuery에서는 여러 함수를 한 행에 체인으로 연결한다.

String man = new String("manipulated").toUpperCase().substring(0,5).toLowerCase();

$("div").addClass("a").show().text("manipulated");

마지막으로 기억할 사항은 jQuery나 다른 자바스크립트 라이브러리를 사용할 때, 서로 어울려 동작하지 않을 경우가 있다는 사실이다. 다시 말해, 라이브러리 두 개 이상을 사용할 경우, 라이브러리 둘 이상에서 변수 "$"를 사용한다면 엔진은 어떤 라이브러리가 "$" 호출을 참조해야 할지 모르는 사태가 벌어진다. 이런 현상을 설명하는 완벽한 예제는 protyotype.js에 내장된 CakePHP 라이브러리다. 이런 라이브러리를 사용하는 페이지에서 수정없이 jQuery를 호출하려고 시도하면 오류가 발생한다. 이런 문제를 해결하기 위해 jQuery는 "$" 변수를 다른 변수로 사상하는 방법을 제공한다. 다음 예를 살펴보자.

j$ = jQuery.noConflict();
j$("div").addClass("a");

선택

모든 jQuery 루트는 페이지에서 특정 엘리먼트를 선택해 다룰 수 있는 능력이 있다. jQuery 라이브러리에 포함된 함수를 둘러싼 다양한 객체가 있다. 따라서 일반 HTML 페이지에서 사용 가능한 수 많은 옵션에서, 작업하기 원하는 엘리먼트를 (더도 말고 덜도 말고) 페이지에서 꼭 집어내어 빠르고 효율적으로 선택하는 방법이 필요하다. 예상했겠지만, jQuery는 강력한 선택 메서드를 제공해서 페이지에서 객체를 찾아내어 선택하도록 만든다. jQuery는 선택을 위한 독자적인 구문을 만들어 내었으며, 상당히 배우기 쉽다.

(아래 소개하는 다양한 예에서 사용하는 함수는 다음 기사에서 설명하겠지만, 무엇을 하는 함수인지 이해하기에 충분할 정도로 직관적이다.)

루트에서, jQuery 선택 과정은 정말 거대한 필터 과정이다. 페이지에 존재하는 모든 엘리먼트를 명령에서 제공하는 필터에 밀어넣은 다음에, 일치하는 객체 자체나 탐색이 가능한 객체 배열을 반환한다.

첫 세 가지 예제가 가장 널리 쓰인다. HTML 태그, ID, CLASS로 객체를 찾아내는 방법이다.

HTML

페이지에서 일치하는 모든 HTML 엘리먼트 배열을 얻으려면, 중괄호 없이 단순히 HTML 태그 자체를 jQuery 검색 필드에 전달하면 된다. 이는 객체를 찾아내는 "빠르지만 우아하지는 않은" 방법이며, 일반적인 HTML 엘리먼트에 속성을 붙일 때 유용하다.

// 이 예제는 페이지에서 모든 <div> 태그를 보여준다. 여기서
// 처음이나 마지막에 걸리는 태그가 아니라 모든 <div> 태그를 보여줌에 주목하자.
// 배열 탐색은 이 기사 후반부에 다룬다.
$("div").show();

// 페이지에 존재하는 모든 <p> 태그에 붉은 배경색을 부여한다.
$("p").css("background", "#ff0000");

ID

페이지 디자인을 제대로 하려면 페이지에 있는 모든 ID를 유일하게 만들어야 한다. 물론 이런 규칙이 (의도적이든 의도적이지 않든) 종종 깨지긴 하지만 말이다. jQuery가 ID 선택 과정에서 첫 번째 일치하는 엘리먼트만 반환하는 이유는 적절한 페이지 디자인을 따른다고 가정하고 있기 때문이다. 동일한 페이지에 존재하는 여러 엘리먼트에 태그를 붙일 필요가 있다면 CLASS 태그가 좀 더 적절한 선택이다.

// 이 예제는 "sampleText"라는 id가 달린 innerHTML이나 span 엘리먼트를 찾아서 id를 "Hi"로 바꾼다.
// 명령어 처음에 나오는 "#"에 주목하자. 이는 jQuery가 사용하는 구문으로, ID를 찾는다.
// "#"은 반드시 있어야 하며, 만일 빠뜨리면 jQuery는 HTML 태그를 대신 찾으며,
// <sampleText> 태그가 페이지에 없으므로 결국 아무런 결과도 반환하지 않는다.
// 이럴 경우 아주 찾기 어려운 버그에 직면한다.

$("#sampleText").html("Hi");

CLASS

CLASS는 ID와 비슷하지만 페이지에 들어있는 엘리먼트 한 개 이상을 위해 쓰일 수 있다. 따라서 페이지에 ID당 엘리먼트 하나만 존재한다는 제약을 풀어야 한다면 페이지에 동일한 CLASS로 표시한 여러 엘리먼트를 배치할 수 있다. CLASS를 활용하면 CLASS 이름 하나만 전달하는 방식으로 페이지에 존재하는 광범위한 엘리먼트를 돌면서 함수를 실행하는 자유를 얻는다.

// 특정 페이지에서 "redBack"이라는 CLASS로 지정된 모든 엘리먼트 배경을 붉은색으로 만든다.
// 이 "redBack" CLASS 태그가 어떤 HTML 엘리먼트에 붙어있는지 상관하지 않음에 주목하자.
// 또한 질의 용어 앞에 붙은 .에 주목하자. CLASS 이름을 찾기 위한 jQuery 구문이다.

$(".redBack").css("background", "#ff0000");

<p class="redBack">This is a paragraph</p>
<div class="redBack">This is a big div</div>
<table class="redBack"><tr><td>Sample table</td></tr></table>

검색 기준 결합하기

상기 세 가지 검색 기준과 아래 제시하는 필터를 결합해 검색을 내릴 수 있다. 검색 기준은 ","로 구분하며, 검색 결과로 검색 단어에 일치하는 결과를 모두 결합한 내용을 반환한다.

// 모든 <p>, <span>, or <div> 태그를 가린다.
$("p, span, div").hide();

다른 필터

jQuery에서 가장 널리 사용하는 검색 매개변수 세 가지를 소개했는데, 페이지에서 원하는 엘리먼트를 빨리 찾도록 도와주는 다른 필터도 존재한다. 이런 필터는 모두 jQuery 검색 단어에서 필터를 나타내는 ":" 글자로 시작한다. 검색 범주에서 단독으로 사용이 가능하지만, 주로 원하는 구체적인 엘리먼트를 찾기 위해 검색 기준을 튜닝하는 방식으로 앞서 소개한 세 가지 검색 기준과 함께 사용하도록 설계되었다.

// 페이지에서 모든 <p> 태그를 가린다.
$("p").hide();

// 페이지에서 HTML 태그에 무관하게 첫 엘리먼트를 가린다.
$(":first").hide();

// 검색 기준을 좀 더 정교하게 튜닝하게 다듬는 기능을 제공하기 위해 섞어서 사용하는
// 방법을 보여준다. 특정 페이지에서 첫 번째 <p> 태그만 감춘다.
$("p:first").hide();

다중 필터를 검색 엘리먼트로 사용할 수 있다. 여기에 모든 필터를 열거하지는 않겠지만(API 페이지를 보면 다 나오는 내용이다), 몇몇은 페이지나 엘리먼트 검색 작업에 아주 간편하게 쓸 수 있다.

선택 패키지에서 몇 가지 아주 중요한 필터를 설명하겠는데, 바로 폼 엘리먼트 필터다. 오늘날 RIA(Rich Internet Application)는 폼과 서버로 정보를 주고 받기 위한 목적으로 폼에 포함된 엘리먼트(텍스트 필드, 버튼, 체크 박스, 라디오 버튼 등)에 초점을 맞추는 듯이 보인다. 폼이 RIA에서 중요한 위치를 차지하므로 오늘날 웹 응용 프로그램에서 jQuery를 사용하는 관례는 특히 중요하다.

추가 필터와 마찬가지로 이 기사에서 소개하는 폼 필터도 필터임을 알려주는 ":" 문자로 시작한다. 또한 검색 결과를 좀 더 정교하게 얻기 위해 다른 검색 필터와 섞어서 사용하기도 한다. 따라서 ":text"라는 검색 필터는 페이지에 존재하는 모든 텍스트 필터를 반환하며, ".largeFont:text"라는 검색 필터는 페이지에서 "largeFont" 클래스인 텍스트 필드만 반환한다. 이는 폼 엘리먼트를 정교하게 조작하기 위한 기능을 제공한다.

폼 필터는 또한 개발자가 알아 두면 좋은 내용인 엘리먼트의 개별 속성을 포함한다. 따라서 ":checked", ":disabled", ':selected"와 같은 필터는 검색 기준을 정교하게 지정하도록 사용할 수 있다.

탐색

페이지에 있는 모든 엘리먼트를 탐색하고 필터링하는 방법을 익혔다면, 결과를 탐색하고 이런 엘리먼트를 조작하는 효과적인 방법이 필요하다. 놀랍지 않게도, jQuery는 이런 검색 결과를 탐색하는 다양한 방법을 제공한다.

가장 대표적이면서 널리 사용되는 탐색 기법은 each() 함수다. 이 함수는 엘리먼트 각각을 순회하며 루프를 돌 때마다 엘리먼트를 하나씩 처리하기에 프로그래밍 측면에서 "for loop"와 동일하다. 추가적으로 "this"(일반적인 자바스크립트 구문을 사용할 경우)나 $(this)(jQuery 명령어를 사용할 경우)로 루프 내에서 각 엘리먼트를 참조할 수 있다.

다음 예를 살펴보자.

// 페이지에 있는 각 <p> 태그를 대상으로 순회한다. 여기서 인라인 함수 사용에 주목하자.
// 자바에서 anonymous 클래스와 비슷한 기능이다.
// 개별 함수를 호출하거나 이와 같이 인라인 함수를 작성할 수 있다.

var increment = 1;
$("p").each(function(){

    // 이제 태그를 만날 때마다 문단 카운터를 하나씩 더한다. $(this) 변수를 사용해
    // 개별 문단 엘리먼트를 참조하는 방법에 주목하자.

    $(this).text(increment + ". " + $(this).text());
    increment++;
});

검색 결과가 배열에 저장되므로 일반적인 프로그래밍 언어에서 자료 객체와 비슷하게 배열을 순회하면서 작업하는 함수를 기대할 것이다. 특정 검색 결과 길이를 알기 위해 배열에 $().length를 호출한다. Listing 11에 다른 배열 탐색 함수도 등장하는데, 다른 프로그래밍 언어와 마찬가지로 배열 탐색에 적합한 형태를 보여준다.

// eq() 함수는 직접 배열에 속한 구성 요소를 참조할 때 사용한다.
// 이 경우 세 번째 문단(당연히 0이 시작 기준이다)을 얻은 다음에 감춘다.
$("p").eq(2).hide();

// slice() 함수는 배열에서 처음과 끝 색인을 받아서 새끼 배열을 친다.
// 다음은 페이지에서 세 번째부터 다섯 번째까지 문단을 감춘다.
$("p").slice(2,5).hide();

이런 배열 탐색 함수 이외에, jQuery는 또한 검색 단어를 둘러싼 충첩된 엘리먼트를 찾도록 도와주는 함수도 제공한다. 이런 함수가 유용한 경우가 있을까? 글쎄, 종종 그림에 따라나오는 텍스트 라벨이나 폼 엘리먼트 다음에 오류 메시지를 포함하기를 원한다. 이런 명령어를 사용하면 특정 폼 엘리먼트를 찾아서 span 태그와 같이 다음 엘리먼트에 바로 오류 메시지를 표시하는 방법으로 사용자에게 경고 메시지를 보여줄 수 있다. Listing 12는 이런 디자인 예를 보여준다.

<input type=text class=validate><span></span>

function validateForm()
{
    $(".validate:text").each(function(){
    if ($(this).val()=="")
    //  페이지에서 "validate" 클래스로 정의된 각 textfiled를 순회한다.
    //  비어 있다면, <span> 바로 뒤에 오류 메시지를 집어 넣는다.

        $(this).next().html("This field cannot be blank");
});
}

이 기사에서 배운 내용을 하나로 합치기

이 기사에서 배운 내용을 하나로 합친 결과를 보기 위해, 이 기사에 들어 있는 데모 용응을 살펴보자(다운로드 절을 참조한다).

데모 응용은 여기서 간략하게 소개하는 편이 좋겠다. 이 기사 연재 전반에 걸쳐 데모 응용을 사용해서 다양한 jQuery 예제를 보여주며, 거의 모든 사람이 친숙한 RIA 웹 메일이라는 응용을 다룰 계획이기 때문이다. 이 데모 응용은 간단한 메일 클라이언트로서 jQuery를 활용해서 사용자에게 실제로 데스크톱 응용에서 볼 수 있는 전자편지 클라이언트를 사용하는 느낌을 전달한다. 최종 기사가 끝날 무렵이면 사용자를 위한 외형과 느낌을 만들어내는 과정은 물론이고 jQuery로 얼마나 손쉽게 이런 작업을 하는지 확인할 수 있을 것이다.

이 기사에서는 웹 메일 테이블에 있는 좌상단 컬럼에 보이는 "Select All"/"Deselect All" 체크 박스에 초점을 맞춘다(아래에 강조했다). 이 체크 박스를 선택하면, 컬럼에 있는 모든 체크 박스를 선택하며, 체크 박스 선택을 해제하면, 컬럼에 있는 모든 체크 박스 선택을 해제한다.

				
<!-- 1 단계는 Select All 체크박스 자체 생성이다.
페이지에서 체크박스에 유일한 ID를 부여한다. -->

<input type=checkbox id=selectall>

<!-- 2 단계는 체크박스에 속한 각 행을 만들어낸다.
각 행에 속한 체크박스에 'selectable' 클래스를 지정한다. 행이 여러 개며
또한 행에 속한 각 체크박스가 동일한 행동 방식을 보이기를 원하기 때문이다. -->

<input type=checkbox class=selectable>

<!-- 3 단계(마지막)는 jQuery 코드를 사용해서 하나로 합친다. -->

// 모든 jQuery 설정 코드는 이 document.ready() 함수에 있어야 함을 기억하자.
// 아니면 올바르게 동작하기 위해 자체 함수에 포함되어 있어야 한다.

$(document).ready(function(){
   // 페이지에서 selectall 체크박스를 찾기 위해 jQuery 선택 구문을 활용한다.
   // (ID를 지정하는 '#'에 주목하자) 그리고 jQuery에게 selectAll() 함수를 
   // 누군가 체크박스에 클릭할 때마다 호출하도록 알려준다.(이벤트는 다음 기사에서
   // 다루겠다).

   $("#selectall").click(selectAll);
});

// 이 함수는 누군가 selectall 체크박스를 누를 때마다 호출될 것이다.
function selectAll()
{
    // 이 행은 selectall 체크박스가 체크되었는지 아닌지를 판단한다.
    // 다음번 기사에 소개할 attr() 함수는 넘어온 객체에서 속성을 반환한다.
    // 여기서 체크 되었으면 true를, 그렇지 않으면 undefined를 반환한다.

    var checked = $("#selectall").attr("checked");

    // 이제 jQuery 선택 구문을 활용해서 페이지에 속한 모든 체크박스를 찾는다.
    // 여기서 (각 행의 체크박스인) selectable class를 지정하는 방법을 쓴다.
    // 선택 결과 넘어오는 배열을 얻어서 each() 함수를 사용해서 순회한다.
    // 이렇게 되면 한번에 하나씩 결과 항목을 처리할 수 있다. each() 함수 내부에서
    // $(this) 변수를 사용해서 개별 결과를 참조할 수 있다. 따라서 루프 내부에서
    // 각 체크박스 값을 찾아서 selectall 체크박스와 일치하도록 만든다.

    $(".selectable").each(function(){
       var subChecked = $(this).attr("checked");
       if (subChecked != checked)
          $(this).click();
    });
}

결론

jQuery는 웹 응용 개발 공동체에서 선호하는 자바스크립트로 자리를 잡아가는 중이며, RIA가 점점 더 널리 퍼짐에 따라 꾸준한 성장세를 보이고 있다. 여러 회사가 내부 응용을 온라인으로 이주하며, (워드 프로세서와 스프레드시트를 포함해서) 매일 사용하는 데스크톱 응용도 온라인으로 옮기는 상황에서, 개발을 쉽게 만들어주며 교차 플랫폼 지원을 약속하는 자바스크립트 라이브러리는 응용을 설계할 때 선택하는 기술의 일부가 될 것이다.

jQuery 연재물에서 첫 번째 기사는 jQuery 구문, 자바스크립트 코드에서 jQuery를 올바르게 사용하는 방법, 다른 라이브러리와 함께 사용할 때 함정을 피하는 방법을 소개한다. 또한 jQuery가 제공하는 다양한 기능 중에서 jQuery 검색과 선택 구문을 소개한다. 원하는 페이지 엘리먼트를 간편하고 빠르게 찾아내는 방법과 찾아낸 엘리먼트를 처리하는 방법을 소개한다. 또한 이 기사에서는 개별 엘리먼트를 처리하도록 이런 검색 결과를 순회하는 방법도 보여준다. 이번 기사에서 설명한 선택과 처리 방법은 연재물에서 소개할 다음 기사를 뒷받침하는 기초가 되며, 여러분이 만든 jQuery 코드를 뒷받침하는 기본 기술이 될 것이다.

마지막으로 RIA 웹 메일이라는 응용 시연을 다뤘다. 이 기사에서 배운 jQuery를 사용해서 Select All/Deselect All 체크 박스 선택 기능을 만들어 보았다. 살펴보면 알겠지만 단지 몇 줄만으로 다양한 웹 사이트에서 볼 수 있는 공통 위젯을 만든다.

이번 연재물에 이어지는 다음 기사는 예제 웹 응용에 상호대화식 기능을 추가하는 방법을 소개한다. (엘리먼트 클릭, 버튼 클릭, 콤보 박스 클릭 등) 페이지 이벤트를 다루는 방법, 페이지에 들어있는 엘리먼트에서 값을 얻는 방법, 페이지를 다시 읽지 않고서도 색상, 레이아웃 등을 바꾸기 위해 표준 CSS를 변경하는 방법을 배울 것이다.

출처 : http://www.ibm.com/developerworks/kr/library/wa-jquery1/index.html