추가 적립 안내

『개발자와 디자이너가 함께 보는 자바스크립트 프로그래밍』은 점진적 기능 향상으로 시작해 기본적인 자바스크립트 코드 작성법, 관련 웹 개발 기법 등 다양한 주제가 한데 어우러진 책이다. 책은 새 프로그램을 작성하거나 기존 코드를 효율적으로 수정하는 데 필요한 모든 자바스크립트 개념과 기술, 디자인과 개발에 쓰일 견고하고 안전한 코드 작성, 사용성, 재사용성, 접근성, 명료함, 보안, 성능의 극대화, 코드가 실행될 브라우저 환경의 완벽 활용, 행위와 데이터 상호작용을 만들어 내기 위한 DOM 접근, 손쉽고 효율적인 접근을 위한 데이터 저장, 변수, 함수, 반복문을 비롯한 핵심 언어 기능 활용, 자바스크립트 라이브러리를 활용한 생산성 향상 등을 다루고 있다.

★ 요약 ★

자바스크립트를 체계적으로 배우는 가장 확실한 방법! 기존의 자바스크립트 책과는 전혀 다른 구성이 돋보이는 보기 드문 책이다. 이 책은 점진적 기능 향상으로 시작해 기본적인 자바스크립트 코드 작성법, 관련 웹 개발 기법 등 다양한 주제가 한데 어우러져 있다. 따라서 자바스크립트뿐 아니라 웹 개발에 관심이 있는 개발자나 디자이너가 자바스크립트를 체계적으로 시작하고 가장 현대적인 코드 작성법을 배우는 데 적합하다. 아울러 프론트엔드 개발이라는 큰 그림을 놓치지 않고 그 안에서 자바스크립트를 적절히 활용하는 데 주안점을 두고 있기에 기존의 자바스크립트 프로그래머들도 배울 만한 내용이 많을 책이다.

★추천의 글★

“현대적인 웹 인터페이스, 서버 측 기술, HTML5 게임에서, 오늘날 자바스크립트는 그 어떤 때보다도 매우 중요하고 두루 사용되는 도구로 자리매김했다. 자바스크립트를 시작하려고 하거나 자바스크립트라는 언어의 실제적인 핵심 지식을 좀 더 깊이 있게 이해하고자 하는 분들에게 이 책을 적극 추천한다.”
- 에반 버차드(Evan Burchard) / 독립 웹 개발자

“전에 자바스크립트에 관한 다른 책을 두어 권 정도 읽어봤지만, 백엔드 개발자로서 이 책을 읽으며 짜릿한 흥분을 느꼈다. ‘점진적 기능 향상’과 ‘단계적 기능 축소’의 의미 차이를 설명한 부분은 프론트엔드 개발을 처음 접하는 사람이 잘 이해할 수 있는 방식으로 정리돼 있다. 팀, 정말 멋집니다!”
- 조 데본(Joe Devon) / StartupDevs.com의 공동 설립자

“팀 라이트는 자바스크립트를 배우려는 초보 프론트엔드 개발자를 위한 유쾌한 실용서를 써냈다. 이 책의 강점은 자바스크립트를 잘 소개하고 있을뿐더러 자바 스크립트를 언제 어디에 사용해야 할지에 대한 맥락을 잘 보여준다는 사실이다.”
- R. S. 도이엘(R. S. Doiel) / USC 웹 서비스의 선임 소프트웨어 엔지니어

“현대적인 자바스크립트 개발을 굉장히 잘 소개한 책이다. 흥미진진한 미래까지 이어지는 자바스크립트의 역사를 다루며 시작하는 이 책은 초보 개발자가 현업에서 실제 응용할 수 있는 방법을 알려준다. 내가 초보일 때 이 책이 나왔더라면 좋았을 텐데!”
- 힐리샤 헤이굿(Hillisha Haygood) / 스포팅 뉴스의 선임 웹 개발자

“팀은 최전선에서 점진적 기능 향상을 유지하면서 자바스크립트 코드를 작성하기 위한 귀중한 기법들을 선사한다. 자바스크립트를 처음 접하는 사람들에게 이 책은 소중한 자산이 될 것이다. 기초적인 사항을 모두 다룬 다음 곧바로 터치 이벤트, Ajax, HTML5 API로 넘어가는 이 책의 예제는 명료하며 이해하기도 쉽다. 이 책을 읽고 나면 큰 효과를 낼 수 있는 자바스크립트를 언제 어떻게 사용해야 할지 배울 수 있을 것이다.”
- 톰 리드베터(Tom Leadbetter) / 프리랜서 웹 디자이너

“초보 개발자와 베테랑 개발자 모두에게 가치 있는 책이다. 읽기 쉽게 구성되어 있고 자바스크립트에 익숙해지는 단계별 과정을 알려주는 책으로서 특히 초보 개발자에게 매우 좋다. 베테랑 개발자는 어느새 까맣게 잊어버렸을 다양한 모범사례를 떠올릴 수 있을 것이다.”
- 크리스토퍼 스웨너(Christopher Swenor) / zMags의 기술 부문 과장

★ 이 책에서 다루는 내용 ★

■ 새 프로그램을 작성하거나 기존 코드를 효율적으로 수정하는 데 필요한 모든 자바스크립트 개념과 기술
■ 디자인과 개발에 쓰일 견고하고 안전한 코드 작성
■ 사용성, 재사용성, 접근성, 명료함, 보안, 성능의 극대화
■ 코드가 실행될 브라우저 환경의 완벽 활용
■ 행위와 데이터 상호작용을 만들어 내기 위한 DOM 접근
■ 손쉽고 효율적인 접근을 위한 데이터 저장
■ 변수, 함수, 반복문을 비롯한 핵심 언어 기능 활용
■ 이벤트를 통한 사용자와의 상호작용
■ Ajax를 통한 서버와의 통신
■ 자바스크립트 라이브러리를 활용한 생산성 향상

★ 이 책의 대상 독자 ★

이 책은 자바스크립트에 관해 알고 싶은 초보 웹 디자이너나 개발자를 위한 책이다. 이 책을 읽기 전에 HTML과 CSS에 관해 알고 있어야 하며, 점진적 기능 향상(progressive enhancement)의 개념에 친숙해야 한다. 이 책은 완전 초보를 비롯해 자바스크립트에 관한 지식을 넓히고자 하는 숙련된 웹 베테랑에게도 똑같이 도움될 수 있다. 이 책을 통해 빠르게 변화하는 업계에 관해 좀 더 배우고 싶어하는 열정이 스며들길 바란다.

★ 지은이의 말 ★

자바스크립트에 관한 책을 쓰기로 마음먹었을 때 이 언어를 배우는 법이 자연스럽게 느껴지는 식으로 책을 만들고 싶었다. 나는 자바스크립트를 학교나 책에서 배우지 않았다. 내가 알고 있는 자바스크립트 지식은 현실 세계의 애플리케이션과 시행착오, 자기 동기부여에서 나온 것이다. 나는 여러분이 이 책의 내용을 금세 따라가면서도, 자바스크립트 언어에 대한 탄탄한 기반을 다질 수 있고 지나치게 많은 정보로 위압감을 느끼지는 않게 하는 독특한 방식으로 정보를 제공하고 싶었다. 전반적으로는 신속하게 진행하지만 기본적으로 구획을 나눠 구간마다 집중적이고 명확하게 공부했던 나의 학습 경험을 살려 이 책의 내용을 설명하고자 노력했다. 자바스크립트 언어는 한 번에 모든 것을 배운다면 혼란스러울 수 있다. 동일한 작업을 달성하는 데는 수백 가지의 방법이 있는데, 대부분은 꼭 알아야 할 필요가 없는 기법들이다. 따라서 이 책에서는 같은 작업을 하기 위한 지나치게 많은 방법을 보여주기보다는 한 가지라도 정말 잘 해내는 데 집중할 수 있도록 최선을 다했다.

이 책의 구성은 기존 자바스크립트 책과는 조금 다르다. 전 책에 걸쳐 용어를 빈번하게 소개하고 용어가 새로 등장할 때마다 설명하면 독자들은 한 번에 너무 많은 정보를 주입 받는다는 느낌이 들 수 있다. 이렇게 되면 당면한 주요 문제에 집중하는 것을 방해한다. 나는 아무도 읽지 않는 용어집을 따로 실어 용어를 설명하는 대신 이 책의 초반부에 집어넣어 이러한 문제를 해결했다. 이와 같은 내용을 담은 초반부에서 여러분은 자바스크립트 언어에 담긴 각종 핵심 개념을 간결하게 설명한 내용도 읽을 수 있다. 이런 방식을 통해, 자질구레한 용어 정의에 귀중한 시간을 낭비하지 않아도 되고 우리가 함께 하는 이 짧은 시간 동안 최대한 많은 지식을 얻는 데 집중할 수 있다.

자바스크립트 같은 견고한 언어를 배우는 과정은 언뜻 보기에는 어려운 일처럼 보일지도 모르지만 그리 심각하지는 않으니 걱정할 필요는 없다. 기초 개념을 이해하고 나면 나머지는 말을 배우는 과정과 같다. 언어를 적절히 조직화하는 방법과 성능 최적화, 그리고 무엇보다도 CSS를 사용해야 하는 시점 등이 다소 어려울 수는 있다. 이 책을 거의 다 읽을 때쯤이면 자바스크립트를 책임감 있게 사용함으로써 더 나은 사용자 경험을 효과적으로 만들어내는 데 필요한 지식들을 모두 얻게 될 것이다.

자바스크립트는 놀랍도록 다채로운 역사를 지녔으며 전망이 매우 밝은 언어다. 이 책을 읽는 과정에서 자바스크립트라는 언어의 기초적인 사항들을 배울 것이며, 동시에 HTML5 자바스크립트 API와 터치가 가능한 인터페이스를 제작하는 방법 등 좀 더 수준 높은 주제에 관해서도 익힐 수 있을 것이다. 자바스크립트는 분명히 코드이지만 지루함과는 거리가 멀다는 사실을 확실히 알게 될 것이다. 자바스크립트를 이용해 꽤 멋들어진 인터페이스도 만들 수 고, 그 과정에서 재미도 느낄 수 있으리라.

이 책이 오래도록 여러분에게 도움을 주고 자바스크립트에 지속적인 관심을 갖게 할 발판이 되길 바란다. 자바스크립트를 배우는 여정의 첫 단계로 이 책을 선택한 여러분을 환영한다. 이미 자바스크립트를 알고 있는 분이라면, 다시 찾아주어 반갑다.

★ 옮긴이의 말 ★

자바스크립트가 프론트엔드를 위한 가장 강력한 언어로 자리매김한 지 벌써 수년이 지났지만 시중에 나온 책 가운데 극히 일부를 제외하면 초보자에게 올바른 자바스크립트 코딩 기법을 체계적으로 알려주는 책은 많지 않다. 게다가 기존에 나온 책들은 대부분 자바스크립트 문법이나 코드 작성법에만 초점을 맞추고 있고 실제 프로젝트에서 자바스크립트를 올바르게 활용하는 방향이나 기법에 대해서는 다루지 않는 경우가 대부분이다. 하지만 실제 프로젝트에서는 단순히 자바스크립트 코드를 잘 작성하는 것은 기본이고 자바스크립트라는 기술이 본연의 목적을 잘 달성하고, 다른 요소와 조화롭게 어우러지게끔 적절히 배치하고 구성하는 등의 기술도 필요하다.
이 책에는 현장에서 꼭 필요로 하는 현대적인 자바스크립트 개발 방법론이 간결하게 정리돼 있다. 기본적인 자바스크립트 코드 작성법은 물론, 점진적 기능 향상(progressive enhancement)과 단계적 기능 축소(graceful degradation) 등의 현대적인 자바스크립트 개발 기법, 효율적인 코드 구성, 웹의 동작 원리와 HTML5 자바스크립트 API, 외부 라이브러리 활용법 등 자바스크립트 개발을 둘러싼 다양한 주제를 간결하고도 빠짐없이 소개한다. 게다가 웹 개발을 처음 시작하는 개발자나 디자이너도 읽고 이해할 수 있을 정도로 쉽게 쓰여 있어서 웹 개발에 막 입문한 분들이 올바른 자바스크립트 개발 기법을 체계적으로 익히는 데 적당하다.
요즘 자바스크립트는 전례 없는 부흥기를 맞고 있다. Node.js 같은 서버 측 자바스크립트까지 나오면서 자바스크립트는 활동 영역을 급격히 확대해 나가고 있으며, 새로 만들어지는 오픈소스 프로젝트에서도 자바스크립트가 압도적으로 많이 사용되고 있다. 이 같은 자바스크립트의 부흥기에 이런 책이 나왔다는 것이 반갑고, 이 책을 번역할 수 있게 되어 감사하다.

1장 점진적 기능 향상
__점진적 기능 향상의 정의
____역사
____목적
____접근성
____재사용성
____점진적 기능 향상 대 단계적 기능 축소
__구조 계층
____HTML5에 의미 더하기
__표현 계층
____인라인 CSS
____스타일시트 연결
__행위 계층
____인라인 자바스크립트
____내장 자바스크립트
____외부 및 분리형 자바스크립트
__점진적 기능 향상의 혜택
____성능
____미래를 위한 대비
____터치 인터페이스
__점진적 기능 향상에 관한 마지막 조언
__정리
__연습문제

2장 브라우저에서의 자바스크립트
__자바스크립트의 민중사
____기원
____점진적 기능 향상
____행위 계층
____오늘을 지나서
__브라우저와 자바스크립트의 상호작용
____HTTP 요청
____자바스크립트와 렌더링 엔진
__자바스크립트가 할 수 있는 일
____HTML 변경
____서버와의 통신
____데이터 저장
__자바스크립트를 사용하는 법
____사용자 경험 개선
____책임감 있게 자바스크립트 사용
____실패 처리 기법 작성
__자바스크립트를 사용하는 데 도움되는 도구
____언어에 내장된 도구
____브라우저에 내장된 도구
__정리
__연습문제

3장 자바스크립트 용어
__기초
____문서 객체 모델
____부모
____자식
____형제
____변수
____문자열
____주석
____연산자
____use strict
__저장소
____캐시
____배열
____쿠키
____자바스크립트 객체 표기법
____객체
__상호작용 생성
____반복문
__조건문
____switch 문
____함수
____익명 함수
____콜백 함수
____메소드
____이벤트
____Ajax
__정리
__연습문제

4장 DOM 접근
__DOM이란 무엇인가?
__DOM 트리
____엘리먼트 노드
____텍스트 노드
____속성 노드
__엘리먼트 노드 사용
____ID를 이용한 엘리먼트 선택
____태그 이름을 이용한 엘리먼트 선택
____클래스를 이용한 엘리먼트 선택
____자바스크립트에서 CSS 선택자를 이용한 노드 선택
__속성 노드 사용
____속성 구하기
____속성 설정
____속성 제거
__텍스트 노드 다루기와 콘텐츠 변경
__DOM 탐색
____첫 번째 자식과 마지막 자식에 접근
____DOM에서 동적으로 노드를 추가하거나 제거
____DOM에 엘리먼트 추가
____DOM에서 엘리먼트 제거
__정리
__연습문제

5장 자바스크립트에서의 데이터 저장
__변수
____문자열
____숫자
____불린
____변수의 성능
__배열
____기본 배열
____연관 배열
____다차원 배열
____배열에 데이터 넣기
____배열 메소드 사용
__join
__slice
__shift와 unshift
__러닝
__pop
__concat
__sort
__객체
____객체의 성능
__JSON
____JSON 사용의 이점
____API 사용
__HTML5의 웹 스토리지
____localStorage와 sessionStorage
__setItem
__getItem
__removeItem
____JSON을 이용한 데이터 덩어리 저장
____책임감 있는 웹 스토리지 사용
__정리
__연습문제

6장 변수, 함수, 반복문
__변수 정의
____변수 그룹화
____예약어
__함수
____기본 함수
____익명 함수
__유효범위
____함수를 이용한 함수 호출
____데이터 반환
____메소드로서의 함수
__반복문
____for 문
__조건문
____if 문
____if/else 문
____switch 문
____if와 switch
__종합 예제
__정리
__연습문제

7장 이벤트를 통한 사용자와의 상호작용
__이벤트 첨부
____이벤트 핸들러
____이벤트 리스너
____이벤트 바인딩
____이벤트 바인딩 해제
__마우스 이벤트와 키보드 이벤트
____click
____focus와 blur
____접근성
____change
____mouseover와 mouseover(호버)
____submit
____기본 동작 방지
____keydown, keypress, keyup
____종합 예제
__터치와 방향 이벤트
____touchstart와 touchend
____touchmove
____orientationchange
____터치 이벤트 지원
__종합 예제
__정리
__연습문제

8장 Ajax를 이용한 서버와의 통신
__Ajax의 역사
____서버 통신
____XMLHttpRequest
__Ajax 호출 생성
____서버에 요청 전송
____서버에서 데이터 돌려받기
____반복적인 Ajax 호출
__Ajax 데이터 형식
____XML
____HTML
____JSON
__Ajax 접근성
____라이브 영역과 ARIA
__자주 저지르는 Ajax 관련 실수
____피드백 제공
__종합 예제
__Ajax는 어디로 가고 있나?
__정리
__연습문제

9장 코드 구성
__일반적인 코드 작성 스타일 규칙
____유효범위
____빨리 실패하기
____사용자 경험
__코드 설계
____파일과 디렉토리
____문서 내의 스크립트
____변수 선언
____변수와 함수의 명명
____주석
____들여쓰기
____공백
____문장 공백
____줄바꿈
____수학과 연산자
____eval( ) 사용
____스타일 가이드를 과도하게 받아들이기
__코드 구조
____함수
____익명 함수
____변수로서의 함수
____메소드로서의 함수
____자바스크립트 개발 패턴
__정리
__연습문제

10장 라이브러리 활용
__자바스크립트 라이브러리 기초
____라이브러리 학습 과정
____문법
____목표에 집중
____지름길 트기
____브라우저 문제 해결
____인기 있는 라이브러리
__제이쿼리 기초
____document.ready
____선택자
____DOM 탐색
____스타일 정보 추가
____이벤트 바인딩
____애니메이션
__제이쿼리 중급
____제이쿼리의 Ajax 활용
____제이쿼리에서의 데이터 순회
____함수 연쇄 호출
__플러그인을 통한 라이브러리 확장
____플러그인 제작
__라이브러리의 좋은 점
____대중성과 커뮤니티
____효율적인 코드
__라이브러리의 나쁜 점
____부하
____성능
____과도한 의존과 유통 기한
__마이크로라이브러리의 활용
____좋은 점
____나쁜 점
__정리
__연습문제

11장 HTML5 자바스크립트 API
__HTML5란 무엇인가?
__마크업(HTML로도 알려진)
____더 나은 시맨틱 만들기
____좀 더 접근성 높은 콘텐츠 제작
__자바스크립트 API
____navigator 객체
____지오로케이션
____오디오와 비디오
____히스토리 API
____웹 워커
__디바이스 API
____배터리 상태 API
____진동 API
____네트워크 정보 API
__기능 탐지를 이용한 디바이스 API 활용
__정리
__연습 문제

12장 자바스크립트를 통한 전진
__핵심 주제에 대한 간략한 복습
____점진적 기능 향상
____DOM 조작
____데이터 저장소
____서버 통신
__디자이너를 위한 자바스크립트
____고급 인터페이스 디자인
____자바스크립트에서의 CSS 변환
____데스크톱에서의 상호작용
__개발자를 위한 자바스크립트
____자바스크립트 템플릿
____NodeJS를 이용한 서버 측 자바스크립트
__정리
__연습문제

부록 A 모범 답안