추가 적립 안내

자바스크립트를 몰라도 배울 수 있도록 구성한『Head First jQuery』. 이 책은 jQuery의 기본을 알기 쉽고 충실히 설명하면서도 자바스크립트와 PHP, SQL의 기초적인 내용까지 다루고 있다. 자바 스크립트의 핵심과 웹 개발 환경을 구축하는 법 등 핵심 내용을 익히며, 깔끔하고 매력적인 대화형 웹 애플리케이션 제작법을 빠르게 익힐 수 있도록 도와준다.

이 책이 제시하는 핵심 내용
-. 쉽게 따라하며 jQuery를 배우고 덤으로 자바스크립트의 개념을 익힌다.

이 책의 특징과 장점
-. jQuery를 쉽고 재미있게 배울 수 있는 인지과학 및 학습이론에 기반을 둔 학습법
-. 마치 대화하듯이 알려주는 스토리가 있는 구성, 비주얼로 쉽게 기억되는 인지과학에 기반한 구성, 십자퍼즐과 연습문제로 학습효과를 높여주는 헤드퍼스트만의 독창적인 구성이 돋보이는 제이쿼리 입문서

어떤 독자를 위한 책인가?
-. jQuery를 처음 배우는 사람
-. 웹 프로그래밍 입문자

자바스크립트 몰라도 배울 수 있으니 더 빠르고 있을 법한 이야기가 곁들여 더 재미있는 특별한 jQuery 학습법
자바스크립트를 모르는데 jQuery는 뜨고 있고… 너무 늦었을까 조바심이 난 누군가에게 이 책은 목마른 자의 오아시스와 같은 도서입니다. 또는 jQuery에 발을 들여는 봤으나 어떻게 이용해서 웹사이트와 웹 애플리케이션을 대화형으로 만들어야 할지 모르는 누군가에게도 충분히 좋은 책입니다. 『Head First jQuery : 자바스크립트를 몰라도 배울 수 있는』을 읽다보면 끊임없이 쏟아지는 에피소드가 정말 그럴 듯한 상황이라는 생각에 입꼬리가 올라가며 지루하지 않게 jQuery를 배울 수 있을 겁니다. (편집자주: 프로젝트 끝내니 추가 요구사항을 메일로 보내는 에밀리와 메가코프 마케팅 팀장 때문에 진심으로 화가 났습니다. 학습하면서도 개발자의 노고를 충분히 느낄 수 있습니다!)

옮긴이 글_ 한선용
옮긴이가 2008년에 웹 개발을 처음 시작하면서 접했던 책이 『Head First HTML with CSS & XHTML: 웹 2.0 시대의 웹 표준 학습법』(2006, 한빛미디어)이었습니다. 친절한 선배가 바로 옆에 붙어 앉아서 하나하나 알려주는 듯한 구성과, 정말 독특하다고 밖에는 표현하기 힘든 편집 덕에 HTML의 H도 모르던 제가 흥미를 잃지 않고 끝까지 독파할 수 있었고 웹 개발에 많은 흥미를 갖게 되었습니다. 이런 면에서 보자면 이 책이야말로 옮긴이의 오늘에 가장 큰 영향을 미친 책이 아니었나 하는 생각을 합니다.
HTML과 CSS에 대해서 어느 정도 알게 된 후에는 자바스크립트에 관심이 생겼고 당연히 다른 책은 찾아볼 생각도 안하고 『Head First JavaScript: 대화형 웹 애플리케이션의 시작』(2008, 한빛미디어)를 주문해서 공부했습니다. 이 책 역시 매우 재미있게 공부했습니다. J자도 모르는 초보자도 쉽게 익힐 수 있도록 구성되었으면서도 다루는 내용은 놀랄 정도로 풍부하고 깊이 있던 것으로 기억합니다.
두 권 모두 너무 좋았고, 이제 시리즈의 팬이 된 저는 이후로도 관심 있는 분야가 생길 때마다 무조건 책이 있는지부터 확인하는 게 당연한 수순이 되었습니다. 『Head First Ajax: 자꾸 가고 싶은 웹 사이트의 비밀』(2009, 한빛미디어), 『Head First SQL: 효율적인 DB 관리를 위한 SQL 학습법』(2008, 한빛미디어), 『Head First Servlets & JSP(개정판): 상상력을 자극하는 몰입의 학습법』(2009, 한빛미디어) - 불행히도 자바를 활용할 상황이 생기지 않아 마지막 책은 부끄럽게도 먼지만 쌓이고 있긴 하지만 그건 제 사정이니까요. 4년 여의 시간이 흐르고 이제 이 시리즈에 한 권을 더하게 되자 나름 감회가 새롭습니다.
HTML5가 등장하면서 웹은 대격변을 맞이했습니다. 캔버스나 지오로케이션, 소켓, 로컬스토리지, 시맨틱 웹 등 숱한 수식어와 화제를 몰고 다니는 HTML5이지만, 이 새로운 언어를 능숙하게 사용하기 위해서는 자바스크립트에 대한 이해가 필수입니다. 이전 버전의 (X)HTML & CSS의 세상에서 자바스크립트는 알면 좋은 정도에 불과했고, 사실 알아도 할 수 있는 일에 명백한 한계가 존재했지만 HTML5에서는 이야기가 달라졌습니다. 자바스크립트를 알지 못하면 할 수 있는 일에 큰 제한이 생기고, 일단 자바스크립트를 익히면 할 수 있는 일이 너무나 많아져서 정신을 차릴 수 없을 정도입니다. 선택이 아니라 필수라고 말해도 지나치지 않습니다.
자바스크립트가 아무리 쉽다고는 해도 역시 프로그래밍 언어라 처음에는 좀 어렵습니다. 여러분도 잘 아시겠지만 jQuery는 초보자가 자바스크립트의 깊은 부분을 공부하지 않고서도 필요한 일을 빨리 끝낼 수 있다는 점에서 많은 사랑을 받았습니다. 하지만 jQuery 만으로 할 수 있는 일에는 역시 한계가 있어, 어느 단계에 이르러서는 분명 자바스크립트를 익혀야 합니다. 특히, HTML5의 등장으로 jQuery가 HTML5의 새로운 기능을 아직 지원하지 못하고 있는 현 단계에서는 더욱 그렇습니다.
이 책은 jQuery의 기본을 알기 쉽고 충실히 설명하면서도 자바스크립트와 PHP, SQL의 기초적인 내용까지 다루었습니다. 물론 시리즈의 장점인 이해하고 기억하기 쉬운 구성을 택하여, 초보자가 어렵게 느낄 수 있는 부분도 따라하다 보면 어느새 익숙해질 수 있게끔 배려했습니다. 이 한 권으로 모든 것을 끝낼 수는 없겠지만 뭐부터 시작해야 하는지 망설이는 독자들, 열의를 가지고 책을 들었으나 어려운 설명에 좌절한 경험이 있는 독자들이라면 이 책을 통해 부담 없이 시작할 수 있으리라고 생각합니다.

사람의 일은 뭐든 관계 속에서 이루어지는 것이라 일일히 감사의 글을 쓰자면 끝도 없겠으나, 누구보다도 먼저 이 책을 보고 계신 여러분께 감사합니다. 누가 알아주지 않아도 항상 노력하는 사람이 있어 세상은 발전할 수 있다고 생각합니다. 좋은 책을 맡겨주신 한빛미디어, 계속 늦어지는 원고에도 닦달하지 않고 생각 못했던 도움을 주신 조희진 편집자님께 감사 드립니다. 늘 그렇지만, 모든 것에 대해 부모님께 감사합니다.

추천의 글
“jQuery로 일을 하다 보면 자바스크립트로 할 수 있는 멋진 일을 너무 쉽게 해결할 수 있어서 꼭 속임수를 쓰는 것 같은 기분입니다. 이 책은 실무에서 마주치는 문제를 신속히 해결하는 방법을 보여 줍니다. 뿐만 아니라 자바스크립트의 핵심에 대해서도 배울 수 있고 웹 개발 환경을 구축하는 방법, PHP와 MySQL에 대해서도 일부 알 수 있습니다. 아주 탄탄히 구성된 책입니다.”
-짐 도런, 존스 홉킨스 대학 소프트웨어 엔지니어

“기술 용어로 가득 찬 다른 프로그래밍 책들과는 다르게 『Head First jQuery』는 제일 처음 만드는 jQuery 페이지도 쉽고 재미있게 만들 수 있도록 인도합니다.”
-린제이 스쿠라스, 프로그래밍을 독학으로 깨우친 변호사

“라이언 베네디티와 로넌 크랜리는 무서워 보이는 기술 짬뽕(jQuery, DOM, Ajax, HTML5, CSS)을 친근한 개념들로 조각내서 재미있게 배울 수 있게 만들었습니다.”
-빌 미텔스키, 소프트웨어 엔지니어

“자바스크립트가 프로그래밍 언어로 새롭게 부각된 데는 뛰어난 애드온 라이브러리의 힘이 큰데 jQuery는 그런 라이브러리 중에서도 핵심입니다. 『Head First jQuery』는 웹 개발자들에게 jQuery에 대해 빈틈없고 현실적인 처방전을 내립니다.”
-폴 배리, Carlow 공과대학의 교수 겸 저술가

관련 도서
- 『jQuery Mobile』(한빛미디어, 2012)
- 『모던 웹을 위한 JavaScript + jQuery 입문』(한빛미디어, 2011)
- 『사전처럼 바로 찾아 쓰는 jQuery』(한빛미디어, 2011)
- 『자바스크립트 성능 최적화』(한빛미디어, 2011)
- 『자바스크립트 쿡북』(한빛미디어, 2011)
- 『더글라스 크락포드의 자바스크립트 핵심 가이드』(한빛미디어, 2008)

서문
__ jQuery에 임하는 여러분의 두뇌. 우리는 두뇌가 방해를 받아서 학습이 잘 되지 않을 때에도 무언가 배우려고 노력합니다. 여러분의 두뇌는 ‘어떤 야생 동물을 피해야 할 것인지, 벌거벗고 스노보드를 타는 것이 나쁜 생각인지 아닌지와 같은 좀 더 중요한 일을 결정하기 위해 여유 공간이 있어야 한다’고 생각합니다. 그렇다면 여러분의 두뇌로 하여금 jQuery를 이해하는 것이 살아가는 데 매우 중요한 일이라고 느끼게 하려면 어떻게 해야 할까요?

1 장 jQuery를 시작합니다: 웹 페이지 액션
__당신은 웹 페이지에 더 많은 것을 원합니다. 이미 HTML과 CSS는 알만큼 알고 이제 스크립트를 배우고 싶지만, 스크립트를 쓰고 쓰고 또 쓰면서 인생을 낭비하고 싶은 생각은 없습니다. 즉석에서 웹 페이지를 바꾸는 라이브러리가 필요할 뿐입니다. 희망사항을 추가한다면, Ajax나 PHP와 궁합이 맞으면 더 좋겠죠? 클라이언트 언어 대부분에서 15줄에 처리하는 작업을 단 3줄에 처리할 수는 없을까요? 그저 꿈일 뿐이라고요? 그렇지 않습니다! 당신은 jQuery를 만나봐야겠군요.

2 장 선택자와 메서드: 연장 챙기세요, 일하러 갑시다
__ jQuery를 통해 웹 페이지 요소를 선택하고 온갖 일을 다 할 수 있습니다. 이 장에서는 jQuery 선택자와 메서드를 배울 겁니다. jQuery 선택자를 써서 페이지에 있는 요소를 선택하고 메서드로 조작할 수 있습니다. jQuery 라이브러리는 마법 주문으로 가득 찬 마법책처럼 많은 것을 즉석에서 바꿀 수 있습니다. 이미지를 갑자기 없앴다가 나타나게 할 수도 있고, 텍스트를 선택해서 글자 크기를 애니메이션으로 바꿀 수도 있습니다. 이제 웹 페이지 요소를 선택해 보세요. 쇼타임입니다.

3 장 jQuery 이벤트와 함수: 페이지에 뭔가 일어나게 하세요
__ jQuery를 이용하면 웹 페이지에 동작과 상호작용성을 쉽게 추가할 수 있습니다. 이 장에서는 웹 페이지가 사용자와 상호작용하게 만드는 방법을 알아볼 겁니다. 사용자의 동작에 반응하는 코드를 만들면 웹사이트를 한 단계 업그레이드할 수 있습니다. 함수를 재사용할 수 있게 만들어서 코드를 한 번만 작성한 뒤 여러 번 활용하는 방법도 알아볼 겁니다.

4 장 jQuery로 웹 페이지 조작: DOM을 조작하세요
__ 페이지를 불러온 다음에도 페이지 구조를 바꿀 수 있습니다. 페이지를 불러올 때 M이 어떻게 만들어지면서 페이지 구조를 형성하는지 1장에서 배웠습니다. 이 장에서는 jQuery를 이용해서 페이지 구조를 위아래로 이동하는 방법, 요소들 사이의 계층구조와 부모자식 관계를 이용해서 페이지 구조를 즉석에서 바꾸는 방법을 배울 겁니다.

5 장 jQuery 이펙트와 애니메이션: 미끄러지듯 걸어요
__ 웹 페이지에서 여러 가지 일이 일어나게 하는 건 좋지만 말끔하고 쿨하게 하지 않으면 사람들이 당신의 웹사이트를 이용하지 않을 겁니다. 그러므로 jQuery 이펙트와 애니메이션을 사용해야 합니다. 이 장에서는 페이지에서 요소에 전환 효과를 주는 방법, 원하는 요소를 보였다 숨겼다하는 방법, 요소를 키웠다 줄였다하는 방법을 배울 겁니다. 물론 모든 효과가 즉석에서 일어납니다.

6 장 jQuery와 자바스크립트: jQuery, 내가 네 아비다!
__ jQuery만으로 모든 일을 할 수는 없습니다. jQuery가 자바스크립트 라이브러리이긴 하지만 자바스크립트에서 가능한 모든 일을 할 수 있는 건 아닙니다. 이 장에서는 진짜 끝내주는 웹사이트를 만들 때 필요한 자바스크립트 기능 일부를 살펴보고, jQuery에서 그런 기능을 이용해서 목록과 객체를 만들고 루프를 사용해서 일을 정말 쉽게 하는 방법을 알아볼 겁니다.

7 장 커스텀 이펙트를 위한 커스텀 함수: 지금 내게 무슨 일을 한 거죠?
__ jQuery에서 만든 커스텀 이펙트를 자바스크립트 함수와 결합하면 당신의 코드와 웹앱을 더 멋지고 강력하고 효율적이게 만들 수 있습니다. 이 장에서는 브라우저 이벤트를 이용해서 jQuery 이펙트를 더욱 개선하는 방법, 타이머 붙은 함수를 사용하는 방법, 커스텀 자바스크립트 함수를 더 잘 정리하고 재사용성을 높이는 방법에 대해 알아볼 겁니다.

8 장 jQuery와 Ajax: 데이터를 넘겨주세요
__ jQuery를 이용해서 DOM과 CSS를 조작하는 일도 재미있지만 서버에서 정보나 데이터를 받아와서 표시해야 할 때가 곧 올 겁니다. 페이지를 새로고침하지 않고 서버에서 받은 정보로 페이지 일부만 수정해야 할 때도 있습니다. jQuery의 세계로 들어오세요. jQuery와 자바스크립트를 결합하면 Ajax도 별 것 아닙니다. 이 장에서는 jQuery를 통해 서버에 Ajax 요청을 보내는 방법, 받아온 데이터를 활용하는 방법을 배울 겁니다.

9 장 JSON 데이터 다루기: 클라이언트, 서버를 만나다
__ 파일에서 데이터를 읽어 오는 것도 유용하지만 이것만으로는 충분치 않습니다. JSON은 더 효율적이면서도 호환성 높은 포맷이므로 서버에서 데이터를 더 쉽게 가져올 수 있습니다. JSON은 XML에 비해 만들기도 쉽고 읽기도 쉽습니다. 이 장에서는 SQL과 PHP를 이용해서 데이터베이스를 만들고, JSON으로 그 데이터베이스에서 데이터를 가져오고, jQuery를 이용해서 화면에 표시하는 방법을 배울 겁니다. 진정한 웹 애플리케이션을 만드는 거죠!

10 장 jQuery UI: 삐까뻔쩍한 폼을 만듭시다
__ 웹은 결국 사용자와 데이터의 모음입니다. 사용자에게 데이터를 받는 일은 어렵고 시간도 많이 걸리는 일입니다. 당신은 이미 jQuery를 사용해서 Ajax, PHP, MySQL로 하는 서버 작업을 쉽게 하는 방법을 배웠습니다. 이제 jQuery를 사용해서 사용자에게 데이터를 받는 일을 쉽게 하는 방법을 배울 차례입니다. 이 장에서는 jQuery의 공식 사용자 인터페이스 라이브러리인 jQuery UI에 대해 배울 겁니다.

11 장 jQuery와 API: 객체, 객체, 어디든 객체군요
__ 당신이 재능 있는 개발자이긴 하지만 모든 일을 혼자서 할 수는 없습니다. 우리는 이미 jQuery UI나 탭 내비게이션 같은 jQuery 플러그인을 불러오는 방법을 배웠습니다. 웹 애플리케이션을 더 높은 단계로 끌어올리려면 인터넷에 있는 멋진 도구들을 활용하고, 구글, 트위터, 야후! 같은 유명 기업에서 제공하는 정보를 활용하고, 그 외에도 여러 가지를 할 수 있어야 합니다. 구글, 트위터, 야후!, 기타 많은 기업에서는 자신들이 제공하는 서비스를 다른 사이트에서 이용할 수 있도록 API를 제공합니다. 이 장에서는 그런 API의 기본을 알아보고, 아주 널리 쓰이는 구글 맵스 API를 직접 써볼 겁니다.

부록 i: 못다한 이야기들: 10가지 중요한 이야기(지금까지 설명하지 않은)
__ 아주 많이 배웠지만 아직 다루지 않은 것도 무척 많습니다. 이 책에 우겨넣을 수 없었던 jQuery와 자바스크립트의 멋진 기능이 무척 많습니다. 당신이 이 책을 끝내고 jQuery의 세계를 혼자 여행하면서 만날 jQuery의 다른 면모에 쉽게 적응할 수 있도록 간단히 언급하겠습니다.

부록 ii: 개발 환경 세팅하기: 최고 수준을 위해 준비합시다
__ 서버에 있는 데이터를 날려버리지 않고 안전하게 PHP를 연습할 환경이 필요합니다. 코드를 웹에 올리기 전에 테스트할 공간이 있어야 합니다. 부록에서는 웹 서버와 MySQL, PHP를 설치해서 서버의 데이터를 날려먹을 걱정 없이 연습할 공간을 만들어 봅시다.