자바스크립트 업그레이드 프로젝트

자바스크립트 개발 능력은 Ctrl과 C를 동시에 누를 수 있는 능력이다.

예. 과거에는 그랬습니다. 자바스크립트 개발 능력이 곧, 어디엔가 존재하는 스크립트를 카피할 수 있는 능력을 의미하기도 했습니다.
하지만 이런 상태로 개발을 계속 하다보면 코드 양이 늘어나고, 브라우저에 로딩되는 속도가 느려질 테죠. 이때쯤 되면 ‘아차!’ 싶지만 그렇다고 속도가 느린 코드들을 삭제하면 웹 사이트 여기저기서 자바스크립트 오류가 발생합니다. 바로 총체적 난국이라고 할 수 있죠.

여러분도 자바스크립트로 개발하면서 이런 경험이 있을 겁니다.

• 덕지덕지 기워놓은 스크립트 사이에 또다른 기능을 추가하자 코드 여기저기서 충돌이 발생한다.
• 멋진 애플리케이션을 파이어폭스나 오페라 같은 브라우저에서 열자, 보기 흉하게 깨지고 제대로 작동하지도 않는다.
• 모바일 환경같이 자바스크립트 지원이 빈약한 기기들도 우리가 만든 애플리케이션을 사용하게끔 하고 싶다.
• 내가 방금 추가한 기능이 제대로 작동하는지 테스트할 방법이 없는 것 같아 불안하다.

혹시 지금도 그렇다면 이제 자바스크립트를 업그레이드 할 때입니다.

자바스크립트에 새 버전이 나왔냐구요? 아, 그렇지는 않습니다.

지금껏 자바스크립트를 자바스크립트답게 사용하지 않았으니, 이제는 제대로 사용해보자는 의미로 ‘자바스크립트 업그레이드’라는 수식을 붙여봤습니다만, 사실 자바스크립트를 업그레이드한다기보다는 자바스크립트 개발자가 업그레이드된다는 말이 맞을 겁니다.

• 원래부터 자바스크립트에 내재되어 있던 객체지향적인 파워를 이끌어낼 수 있는 개발자.
• 자바스크립트 코드도 테스트하고 디버깅하여 더욱 견고한 애플리케이션을 만들어내는 개발자.
• 브라우저에 구애받지 않으면서도 기능을 추가할 수 있는 개발자.
• 최악의 경우 자바스크립트를 사용할 수 없을 때라도 여전히 잘 작동하는 애플리케이션을 만드는 개발자.

jQuery를 개발한 존 레식(John Resig)은 『프로 자바스크립트 테크닉』에서 여러분을 위와 같은 개발자로 업그레이드해주겠다고 약속합니다.

여러분이 이미 그런 수준이시라구요? 그렇다 해도 jQuery라는 멋진 라이브러리(자바스크립트 라이브러리 사용률 1위를 향해 무섭게 질주하고 있답니다)를 개발한 존 레식(John Resign)의 노하우를 전수받을 수 있는 기회를 놓치지는 마세요. 당장에라도 응용할 수 있는 예들이 여러분을 기다리고 있으니까요.

곧 출간될 『프로 자바스크립트 테크닉』을 기대하세요. ^^

책 내용은 아래에……
1부 「현대적인 자바스크립트 개요」에서는 현대적인 자바스크립트란 무엇인지 설명하면서 책 전체의 내용을 소개합니다.

2부 「전문적인 자바스크립트 개발」에서는 객체지향 언어로서의 자바스크립트를 다루며, 자바스크립트만의 특징적인 기능들(프로토타입 상속 등)을 제대로 활용하는 방법과 배포를 위한 패키징, 디버깅과 테스트를 위한 도구를 소개합니다.

3부 「Unobtrusive 자바스크립트」에서는 자바스크립트 개발에 필수 요소인, 문서 객체 모델(DOM)과 이벤트를 Unobtrusive하게 다루는 방법, CSS 다루기, 폼 기능 개선하기, 이미지 갤러리 만들기 등 실무에서 자주 접할만한 문제들을 다룹니다.

4부 「Ajax」에서는 브라우저에 독립적인 Ajax 기능을 구현하는 방법부터, 끝이 없는 블로그 기능과 라이브 블로깅 기능, 자동 완성 기능, Ajax 위키를 소개하면서 Ajax로 웹 애플리케이션의 기능을 향상시키고 서버 측 코드와 연동하는 방법까지를 다룹니다.

5부 「자바스크립트의 미래」에서는 몇몇 브라우저에서 지원하는 자바스크립트 1.6과 1.7의 기능들을 설명하며, 웹 페이지에 이미지를 그릴 수 있는 <canvas> 태그, 향상된 Ajax 기술인 Comet 등을 소개합니다.

6부 「부록」에는 DOM과 이벤트를 적절히 분류한 레퍼런스를 수록했고, 여러 브라우저의 특징과 현황을 설명합니다.

목차

옮긴이의 글

1부 현대적인 자바스크립트 개요
1장 현대적인 자바스크립트 프로그램
1.1 객체지향 자바스크립트
1.2 코드 테스트
1.3 배포하기 위한 패키징
1.4 Unobtrusive DOM 스크립팅
DOM(Document Object Model)
이벤트
자바스크립트와 CSS
1.5 Ajax
1.6 브라우저 지원
1.7 요약

2부 전문적인 자바스크립트 개발
2장 객체지향 자바스크립트
2.1 언어 기능
참조
함수 오버로딩과 타입 검사
유효범위
클로저
콘텍스트
2.3 객체지향 기본
객체
객체 생성
2.4 요약

3장 재사용 가능한 코드 작성하기
3.1 객체지향 코드의 표준화
프로토타입 상속
클래스 상속
Base 라이브러리
Prototype 라이브러리
3.2 패키징
네임스페이스 만들기
코드 정리
압축
3.3 배포
3.4 요약

4장 디버깅과 테스트를 위한 도구
4.1 디버깅
에러 콘솔
DOM 검사기
파이어버그
Venkman
4.2 테스트
JSUnit
J3Unit
4.3 요약

3부 Unobtrusive 자바스크립트
5장 문서 객체 모델
5.1 문서 객체 모델에 대한 소개
5.2 DOM 탐색하기
DOM에서 공백 다루기
간단한 DOM 탐색
모든 HTML 엘리먼트에 직접 연결하기
표준 DOM 메서드
5.3 HTML DOM이 로딩되기를 기다리기
페이지가 완전히 로딩되기를 기다리기
대부분의 DOM이 로딩되기를 기다리기
DOM이 완전히 불려오는 시점을 알아내기
5.4 HTML 문서에서 엘리먼트 찾기
클래스 이름으로 엘리먼트 찾기
CSS 선택자를 기준으로 엘리먼트 찾기
XPath
5.5 엘리먼트의 내용 얻기
엘리먼트 내부의 텍스트 얻기
엘리먼트 내부의 HTML 얻기
5.6 엘리먼트 어트리뷰트 다루기
어트리뷰트 값을 얻어내거나 설정하기
5.7 DOM 변경하기
DOM을 사용하여 노드를 생성하기
DOM 안에 삽입하기
DOM에 HTML 집어넣기
DOM에서 노드 제거하기
5.8 요약

6장 이벤트
6.1 자바스크립트 이벤트에 대한 소개
비동기식 이벤트 vs. 스레드
이벤트 단계
6.2 공통적인 이벤트 기능들
이벤트 객체
this 키워드
이벤트 버블 취소하기
브라우저의 기본 동작을 덮어 쓰기
6.3 이벤트 리스너 연결하기
전통적인 연결 방법
DOM 연결: W3C
DOM 연결: IE
addEvent와 removeEvent
6.4 이벤트의 종류
6.5 Unobtrusive DOM 스크립팅
자바스크립트가 비활성화된 상황을 고려하기
링크가 자바스크립트에 의존하지 않게 하기
CSS가 비활성화된 경우에 주의하기
이벤트 접근성
6.6 요약

7장 자바스크립트와 CSS
7.1 스타일 정보에 접근하기
7.2 동적인 엘리먼트
엘리먼트의 위치
엘리먼트의 크기
엘리먼트의 가시성
7.3 애니메이션
슬라이드 인
페이드 인
7.4 브라우저
마우스 위치
뷰포트
7.5 드래그 앤 드롭
7.6 라이브러리
moo.fx와 jQuery
스크립타큘러스
7.7 요약

8장 폼 기능 개선하기
8.1 폼 검증
필수 입력 필드
패턴 매칭
규칙 집합
8.2 에러 메시지 출력
검증
검증 시점
8.3 사용성 개선
호버 레이블
필수 입력 항목 표시
8.4 요약

9장 이미지 갤러리 만들기
9.1 갤러리의 예
Lightbox
ThickBox
9.2 갤러리 만들기
Unobtrusive하게 로딩하기
투명 오버레이
배치된 박스
열람
슬라이드쇼
9.3 요약

4부 Ajax
10장 Ajax 소개
10.1 Ajax 사용하기
HTTP 요청
HTTP 응답
10.2 응답 데이터 처리하기
10.3 완전한 Ajax 패키지
10.4 다른 데이터의 사용 예
XML 기반의 RSS 피드
HTML 주입기(Injector)
JSON과 자바스크립트: 원격 실행
10.5 요약

11장 Ajax로 블로그 강화하기
11.1 끝이 없는 블로그
블로그 템플릿
데이터 소스
이벤트 탐지
요청
결과
11.2 라이브 블로깅
11.3 요약

12장 자동 완성 검색
12.1 자동 완성 검색의 예
12.2 페이지 만들기
12.3 키 입력 감시하기
12.4 결과 받아오기
12.5 결과 목록 탐색하기
키보드 탐색
마우스 탐색
12.6 최종 결과
12.7 요약

13장 Ajax 위키
13.1 위키?
13.2 데이터베이스와 대화하기
13.3 Ajax 요청
13.4 서버 측 코드
응답 처리하기
SQL 실행하고 서식화하기
13.5 JSON 응답 처리하기
13.6 또 다른 사례 연구 : 자바스크립트 블로그
13.7 애플리케이션 코드
핵심 자바스크립트 코드
자바스크립트 SQL 라이브러리
루비로 작성한 서버 측 코드
13.8 요약

5부 자바스크립트의 미래
14장 자바스크립트는 어디로 가고 있나
14.1 자바스크립트 1.6과 1.7
자바스크립트 1.6
자바스크립트 1.7
14.2 웹 애플리케이션 1.0
시계 만들기
간단한 행성 시뮬레이션
14.3 Comet
14.4 요약

6부 부록
부록 A. DOM 레퍼런스
A.1 참고 자료
A.2 용어
A.3 전역 변수
A.4 DOM 탐색
A.5 노드 정보
A.6 어트리뷰트
A.7 DOM 변경

부록 B 이벤트 레퍼런스

B.1 참고 자료
B.2 용어
B.3 이벤트 객체
B.4 페이지 이벤트
B.5 UI 이벤트
B.6 마우스 이벤트
B.7 키보드 이벤트
B.8 폼 이벤트

부록 C 브라우저
C.1 최신 브라우저

찾아보기