시대의 흐름에 맞춰 다시 쓴 자바스크립트 교과서
이미지와 텍스트를 보여주는 단순한 웹 페이지가 아닌 웹 애플리케이션을 개발해야 하는 시대의 흐름에 맞춰 내용을 전면 재구성했다. 트위터, 페이스북과 같은 웹 애플리케이션 개발이나 스마트폰을 위한 모바일 웹 앱 제작에 필요한 자바스크립트 기술을 단 한 권에 모두 담았다.

HTML5, ECMAScript 5, jQuery 1.7, jQuery Mobile 1.0 대응
HTML5에 맞춰 자바스크립트를 설명하고 있으며, ECMAScript 5에서 새로 추가된 자바스크립트의 기능도 상세하게 설명한다. 국내에서는 최초로 jQuery 1.7과 jQuery Mobile 1.0 정식 버전으로 출간하는 도서다.

디자인 필요에 따라 쓸 수 있는 jQuery UI 플러그인 수록
jQuery UI 테마 이용법, 이미지 보여주기에 최적화된 LightBox, FancyBox, 플리커 이미지 앨범, jQuery UI.Layout, Columnizer, Masonry과 같은 레이아웃 관련 플러그인까지 다뤘으므로 디자이너도 쉽게 이용할 수 있다. jQuery 문법이나 자바스크립트 문법이 궁금하다면 책의 앞부분을 참고하면 된다.
데모 사이트: http://www.hanb.co.kr/demo/1874/

모바일 웹을 위한 jQuery Mobile
스마트폰 에뮬레이터의 설치부터 시작해서 모바일 장치를 구분하는 방법, 화면 방향 전환, 터치 이벤트와 같은 모바일 기기 특성에 따른 처리 방법을 설명하고, jQuery Mobile에 특화된 기능을 설명한다. 모바일 기기에서의 페이지 이동, 리스트, 아이콘, 입력 양식, 아코디언, 레이아웃, 툴바, 내비게이션 바, 테마 등을 빠짐 없이 다뤄 모바일 웹을 공부하는 독자에게도 부족함이 없는 참고서 역할을 할 것이다.

720개의 예제 수록
자바스크립트, Ajax, jQuery, jQuery Mobile을 설명하기 위해 총 720개의 예제를 수록했다. 자바스크립트 문법 예제뿐 아니라 Ajax 검색, JSON과 JSONP, Reverse Ajax, 반응형 레이아웃, 피벗 플러그인, jQuery 애니메이션, jQuery Mobile 내비게이션 같은 기능별 예제부터 지오로케이션(geolocation)을 이용한 네이버 지도 이용하기, jqGrid와 서버 프로그램 연동(ASP.NET MVC)하는 고급 예제까지 수록해 입문에서 활용까지 부족함이 없게 했다.
예제 코드: http://www.hanb.co.kr/exam/1874

어떤 독자를 위한 책인가?
- 자바스크립트와 jQuery를 함께 공부하려는 웹 개발자
- jQuery 플러그인을 웹 디자인 작업물에 가져다 쓰고 싶은 웹 디자이너
- jQuery와 jQuery Mobile을 함께 공부해야 하는 웹 앱 개발자나 모바일 사이트 개발자

JavaScript,
jQuery,
jQuery Mobile까지
한 권으로 정복한다.

페이스북, 트위터는 단순한 웹 페이지가 아니라 하나의 애플리케이션처럼 동작한다.
웹 애플리케이션처럼 동작하는 웹 사이트를 개발하려면 단순히 자바스크립트만 알아서는 안 된다.
Ajax에 대해서도 알아야 하며, jQuery에 대해서도 알아야 한다.
이 책은 단 한 권으로 자바스크립트 입문에서 Ajax, jQuery, 모바일 개발에 필요한 jQuery Mobile까지 한 권으로 끝낼 수 있게 구성했다. 또한, jQuery의 다양한 UI 플러그인, 테마 등을 설명해 상용 웹 사이트가 실제로 사용하는 기능을 직접 구현해볼 수 있게 구성했다.

[주요 내용]
- 자바스크립트 기본 문법
- ECMAScript 5의 새로운 기능 설명
- 문서 객체 모델
- 정규 표현식
- 지오로케이션
- jQuery 기본 문법
- jQuery의 이펙트와 UI 처리
- JSON과 XML 처리
- Reverse Ajax의 구현
- jqGrid, LightBox, FancyBox 등의 UI 플러그인
- Uploadify, Validation, Password Validation 플러그인
- jQuery Mobile로 웹 앱 만들기

데모 사이트
책 속의 예제를 미리 체험할 수 있는 데모 사이트
http://www.hanb.co.kr/demo/1874/

PART 1 JavaScript
1장 들어가며
1.1 자바스크립트에 대해
1.2 Visual Web Developer 2010 Express 설치
1.3 Visual Web Developer 2010 Express 인증받기
1.4 HTML 파일 만들기
1.5 자바스크립트의 활용
1.6 자바스크립트의 종류
1.7 표현식과 문장
1.8 키워드
1.9 식별자
1.10 주석

2장 자바스크립트 기본
2.1 출력
2.2 문자열
2.3 숫자
2.4 불리언
2.5 변수
2.6 자료형 검사
2.7 입력
2.8 배열
2.9 undefined 자료형
2.10 숫자와 문자열 자료형 변환
2.11 불리언 자료형 변환
2.12 일치 연산자

3장 조건문
3.1 if 조건문
3.2 if else 조건문
3.3 중첩 조건문과 if else if 조건문
3.4 switch 조건문
3.5 삼항 연산자
3.6 짧은 조건문

4장 반복문
4.1 while 반복문
4.2 do while 반복문
4.3 for 반복문
4.4 for in 반복문
4.5 중첩 반복문
4.6 break 키워드
4.7 continue 키워드

5장 함수
5.1 함수 개요
5.2 선언적 함수
5.3 매개 변수와 리턴값
5.4 매개 변수
5.5 가변인자 함수
5.6 리턴값
5.7 내부 함수
5.8 함수를 매개 변수로 받는 함수
5.9 함수를 리턴하는 함수와 클로저
5.10 자바스크립트 내장 함수 (1)
5.11 자바스크립트 내장 함수 (2)

6장 객체지향 프로그래밍
6.1 객체 개요
6.2 객체의 속성과 메서드
6.3 객체와 반복문
6.4 객체와 관련된 키워드
6.5 객체의 속성 추가와 제거
6.6 객체와 배열을 사용한 데이터 관리
6.7 함수를 사용한 객체 생성
6.8 생성자 함수
6.9 프로토타입
6.10 instanceof 키워드
6.11 new 키워드
6.12 캡슐화
6.13 상속
6.14 ECMAScript 5 객체 속성 추가
6.15 ECMAScript 5 객체 생성
6.16 ECMAScript 5 동적 속성 추가 제한
6.17 ECMAScript 5 동적 속성 삭제 제한
6.18 ECMAScript 5 객체 보조 메서드

7장 기본 내장 객체
7.1 기본 자료형과 객체의 차이
7.2 Object 객체 생성
7.3 Object 객체의 메서드
7.4 Object 객체를 사용한 자료형 구분
7.5 Number 객체
7.6 Number 생성자 함수의 속성
7.7 String 객체
7.8 String 객체의 기본 메서드
7.9 String 객체의 HTML 관련 메서드
7.10 메서드 체이닝
7.11 Array 객체의 생성
7.12 Array 객체의 속성과 메서드
7.13 Array 객체의 정렬
7.14 Array 객체의 요소 제거
7.15 Date 객체의 생성
7.16 Date 객체의 메서드
7.17 Date 객체를 사용한 시간 간격 구하기
7.18 Math 객체
7.19 ECMAScript 5 Array 생성자 함수의 메서드
7.20 ECMAScript 5 Array 객체 (1)
7.21 ECMAScript 5 Array 객체 (2)
7.22 ECMAScript 5의 JSON 객체와 Date 객체
7.23 ECMAScript 5의 String 객체
7.24 HTML5 Audio 객체

8장 브라우저 객체 모델
8.1 window 객체
8.2 새로운 window 객체 생성
8.3 window 객체의 타이머 메서드
8.4 window 객체의 기본 메서드
8.5 screen 객체
8.6 location 객체
8.7 navigator 객체
8.8 window 객체의 onload 이벤트 속성

9장 DOM
9.1 DOM 관련 용어
9.2 문서 객체 만들기 (1)
9.3 문서 객체 만들기 (2)
9.4 문서 객체 만들기 (3)
9.5 문서 객체 가져오기 (1)
9.6 문서 객체 가져오기 (2)
9.7 문서 객체의 스타일 조작
9.8 문서 객체 제거
9.9 문서 객체를 사용한 시계
9.10 문서 객체를 사용한 움직임 구현
9.11 문서 객체와 객체지향을 이용한 움직임 구현

10장 이벤트
10.1 이벤트 관련 용어
10.2 고전 이벤트 모델
10.3 이벤트 발생 객체와 이벤트 객체
10.4 이벤트 강제 발생
10.5 인라인 이벤트 모델
10.6 기본 이벤트 제거
10.7 이벤트 전달
10.8 인터넷 익스플로러 이벤트 모델
10.9 표준 이벤트 모델

11장 예외 처리
11.1 기본 예외 처리
11.2 고급 예외 처리
11.3 예외 객체
11.4 에러와 예외
11.5 예외 강제 발생

12장 추가적인 내용
12.1 외부 자바스크립트 사용
12.2 SNS
12.3 네이버 개발자 센터 등록
12.4 네이버 지도 API - Static Map
12.5 네이버 지도 API - JavaScript Map

PART 2 jQuery
13장 jQuery 기본
13.1 jQuery에 대해
13.2 jQuery(document).ready()
13.3 jQuery 기본 선택자
13.4 jQuery 자식 선택자와 후손 선택자
13.5 jQuery 속성 선택자
13.6 jQuery 입력 양식 필터 선택자
13.7 jQuery 필터 선택자
13.8 jQuery를 사용한 배열 관리 (1)
13.9 jQuery를 사용한 배열 관리 (2)
13.10 jQuery를 사용한 객체 확장
13.11 jQuery 프레임워크 충돌 방지

14장 문서 객체 탐색
14.1 기본 필터링 메서드
14.2 문서 객체 탐색 종료
14.3 특정 위치의 문서 객체 선택
14.4 문서 객체 추가 선택
14.5 문서 객체의 특징 판별
14.6 특정 태그 선택

15장 문서 객체 모델 조작
15.1 문서 객체의 클래스 속성 추가
15.2 문서 객체의 클래스 속성 제거
15.3 문서 객체의 속성 검사
15.4 문서 객체의 속성 추가
15.5 문서 객체의 속성 제거
15.6 문서 객체의 스타일 검사
15.7 문서 객체의 스타일 추가
15.8 문서 객체의 내부 검사
15.9 문서 객체의 내부 추가
15.10 문서 객체의 제거
15.11 문서 객체의 생성 (1)
15.12 문서 객체의 생성 (2)
15.13 문서 객체의 삽입 (1)
15.14 문서 객체의 삽입 (2)
15.15 문서 객체의 이동
15.16 문서 객체의 복제

16장 이벤트
16.1 이벤트 연결
16.2 간단한 이벤트 연결
16.3 이벤트 연결 제거
16.4 매개 변수 context
16.5 이벤트 객체
16.6 이벤트 강제 발생
16.7 기본 이벤트와 이벤트 전달
16.8 이벤트 연결의 종류
16.9 마우스 이벤트
16.10 키보드 이벤트
16.11 윈도우 이벤트
16.12 입력 양식 이벤트

17장 효과
17.1 저수준의 시각적 효과
17.2 innerFade 플러그인
17.3 사용자 지정 효과
17.4 상대적 애니메이션
17.5 애니메이션 큐
17.6 애니메이션 정지
17.7 애니메이션 지연
17.8 jQuery Approach 플러그인
17.9 jQuery UI Effect 플러그인 다운로드
17.10 jQuery UI Effect 플러그인 (1) - 색상 변환 애니메이션
17.11 jQuery UI Effect 플러그인 (2) - easing 플러그인

18장 이미지 슬라이더
18.1 jQuery 애니메이션을 위한 준비
18.2 이미지 슬라이더 (1) - HTML 구성
18.3 이미지 슬라이더 (2) - CSS 구성
18.4 이미지 슬라이더 (3) -자바스크립트 구성

PART 3 Ajax
19장 ASP.NET MVC
19.1 Ajax 개요
19.2 JSON 형식
19.3 창 레이아웃 다시 설정
19.4 프로젝트 생성
19.5 컨트롤러와 뷰 추가
19.6 프로젝트 실행과 종료
19.7 간단한 ASP.NET MVC 설명
19.8 간단한 C# 설명
19.9 웹 서비스 만들기
19.10 JSON 웹 서비스 만들기
19.11 XML 웹 서비스 만들기
19.12 요청 매개 변수 처리

20장 XMLHttpRequest
20.1 프로젝트 정리
20.2 XMLHttpRequest 객체를 사용한 Ajax 요청
20.3 XMLHttpRequest 객체 생성
20.4 동기 방식과 비동기 방식
20.5 JSON 다루기
20.6 XML 문서 다루기

21장 jQuery Ajax
21.1 기본적인 jQuery Ajax
21.2 추가적인 jQuery Ajax 메서드
21.3 XML 다루기
21.4 jQuery Ajax 보조 메서드
21.5 jQuery Ajax 이벤트 핸들링

22장 데이터베이스
22.1 데이터베이스 만들기
22.2 테이블 만들기
22.3 LINQ To SQL
22.4 데이터베이스에서 데이터 가져오기
22.5 데이터베이스에 데이터 추가
22.6 데이터베이스에 데이터 삭제
22.7 데이터베이스에 데이터 수정하기
22.8 Ajax를 사용한 데이터 추가와 삭제

23장 Ajax 연습 1 - 데이터베이스
23.1 샘플 데이터베이스 다운로드
23.2 프로젝트 구성
23.3 데이터베이스 서비스 만들기
23.4 Ajax 사용
23.5 페이징

24장 Ajax 연습 2 - 크로스 도메인
24.1 크로스 도메인 개요
24.2 JSONP 방식
24.3 RSS 웹 서비스 만들기
24.4 Ajax 사용

25장 Ajax 연습 3 - Reverse Ajax
25.1 Reverse Ajax 개요
25.2 데이터베이스 만들기
25.3 웹 서비스 만들기
25.4 Ajax 사용

PART 4 jQuery 플러그인과 활용
26장 jQuery UI 플러그인
26.1 jQuery UI 플러그인
26.2 실제로 jQuery를 사용하는 웹 사이트
26.3 jQuery UI 기본 설정
26.4 jQuery UI 플러그인의 기본 사용 방법
26.5 jQuery UI 플러그인의 옵션
26.6 jQuery UI 플러그인의 메서드
26.7 jQuery UI 플러그인의 이벤트
26.8 jQuery UI 위젯플러그인
26.9 jQuery UI 테마 클래스 (1)
26.10 jQuery UI 테마 클래스 (2)
26.11 jQuery UI 테마 클래스 (3)
26.12 jQuery UI 플러그인의 아이콘
26.13 jQuery UI 상호작용 플러그인
26.14 jQuery UI 테마와 상호작용 연습

27장 jqGrid 플러그인
27.1 Dynamic LINQ To SQL 다운로드
27.2 jqGrid 플러그인 다운로드
27.3 데이터베이스 생성
27.4 jqGrid 플러그인를 위한 웹 서비스 구성
27.5 데이터 제공 웹 서비스 구성
27.6 기본 그리드 만들기
27.7 그리드 검색 구현
27.8 데이터 추가, 삭제, 수정 웹 서비스
27.9 그리드에 추가, 수정, 삭제 기능 추가
27.10 추가적인 내용

28장 라이트박스 플러그인
28.1 LightBox 플러그인의 사용
28.2 LightBox 플러그인의 옵션
28.3 FancyBox 플러그인의 사용
28.4 FancyBox 플러그인을 사용한 기능
28.5 FancyBox 플러그인의 옵션
28.6 FancyBox 플러그인의 전역 메서드
28.7 플리커 이미지 앨범

29장 레이아웃 플러그인
29.1 jQuery UI.Layout 플러그인
29.2 jQuery Columnizer 플러그인
29.3 jQuery Masonry 플러그인

30장 입력 양식 플러그인
30.1 jQuery Validation 플러그인
30.2 jQuery Password Validation 플러그인
30.3 jQuery Uplodify 플러그인

31장 모바일 웹
31.1 에뮬레이터
31.2 모바일 장치 구분
31.3 viewport meta 태그
31.4 화면 방향 전환 이벤트
31.5 터치 이벤트
31.6 jQuery Mobile
31.7 jQuery Mobile 페이지
31.8 jQuery Mobile 리스트
31.9 jQuery Mobile 아이콘
31.10 jQuery Mobile 입력 양식
31.11 jQuery Mobile 아코디언
31.12 jQuery Mobile 레이아웃
31.13 jQuery Mobile 툴바
31.14 jQuery Mobile 내비게이션 바
31.15 jQuery Mobile 테마
31.16 jQuery Mobile의 페이지 이동
31.17 jQuery Mobile의 초기화 이벤트와 페이지 관련 이벤트
31.18 jQuery Mobile의 페이지 이동 메서드
31.19 jQuery Mobile create 이벤트
31.20 jQuery Mobile refresh(?) 메서드

32장 jQuery 플러그인 만들기
32.1 선택자를 사용하지 않는 jQuery 플러그인 생성
32.2 선택자를 사용하는 jQuery 플러그인 생성
32.3 피벗 슬라이드 플러그인 만들기 (1)
32.4 피벗 슬라이드 플러그인 만들기 (2)
32.5 피벗 슬라이드 플러그인 만들기 (3)

부록 A 요소 검사
A.1 요소 검사의 기능
A.2 요소 검사를 사용한 자바스크립트 디버깅
A.3 변수 검사
A.4 HTTP 헤더 확인

부록 B 정규 표현식
B.1 정규 표현식 객체
B.2 대체 문자
B.3 플래그 문자
B.4 앵커 문자
B.5 메타 문자
B.6 수량 문자
B.7 선택 문자
B.8 정규 표현식 사용 예제

부록 C 쿠키와 저장소
C.1 쿠키 개요
C.2 쿠키 읽기
C.3 쿠키 함수
C.4 jQuery Cookie 플러그인
C.5 저장소

부록 D 지오로케이션
D.1 지오로케이션 객체
D.2 네이버 지도에 표시

서문

우선, 서점에서 이 책을 펴보고 있거나 이미 구매해보고 있는 모든 분께 감사의 말을 드립니다.
서문부터 이런 말을 하는 것은 조금 그렇지만 자바스크립트는 개발자들이 가장 무시하는 언어 중 하나입니다. 프로그래밍 언어로 별로 취급도 잘 안 해주는 관계로 "통합 개발 환경은 무슨 그냥 글자 편집기만 쓰면 되지"라는 말도 심심치 않게 나옵니다. 적어도 새로운 웹 표준인 HTML5가 등장하기 전까지는 그랬습니다.
현재를 새로운 웹 표준 HTML5가 도래하는 시대라고 합니다. 도래는 어떤 시기나 기회가 닥쳐오는 상태를 뜻하는 말입니다. 즉, HTML5가 너무 멀리 있는 것도 아니고 그렇다고 너무 가까이에 있는 것도 아닙니다. 2007년부터 HTML5의 권고안이 만들어지기 시작했고, 2010년 초부터 웹 브라우저가 HTML5를 지원하기 시작했습니다. 2012년 3월에 정식 권고안이 나올 예정입니다.
HTML5는 정말 빠르게 변화하는 분야입니다. 2011년 한 해 동안 인터넷 익스플로러 9이 나왔고 파이어폭스는 세 번이나 버전을 변경했으며 크롬도 버전을 일곱 번이나 변경했습니다. 어도비에서는 HTML5로 인해 플래시에 위협을 느껴 HTML5 애니메이션을 만들 수 있는 프로그램 Edge를 발표했고, 마이크로소프트는 2011년에 출시하는 Windows 8부터는 HTML5를 사용해서 애플리케이션을 제작할 수 있다고 공식 발표까지 했습니다.
자바스크립트 책인데 왜 HTML5 얘기를 하냐고요? HTML5를 구성하는 프로그래밍 언어가 바로 자바스크립트이기 때문입니다. 물론, 현재도 스마트폰이나 태블릿 PC의 애플리케이션을 자바스크립트로 만들 수도 있지만 한정돼 있습니다. 하지만, 앞으로는 자바스크립트로 플래시 애니메이션이나 윈도우 애플리케이션도 만들 수 있을 것입니다.
이 책은 이러한 클라이언트 자바스크립트와 관련된 거의 모든 내용을 다루는 책입니다. 사실 표준 자바스크립트 프레임워크로 채택된 jQuery를 함께 다룹니다. 거기서 한 걸음 더 나아가 현대적 웹 애플리케이션을 개발하기 위한 Ajax와 jQuery 플러그인까지 소개합니다. 자바스크립트는 결코 무시해서는 안 되는 언어입니다. C++, 자바, C# 같은 높은 수준의 프로그래밍 언어의 관점에서 자바스크립트를 살펴보겠습니다.