바퀴를 재발명할 필요는 없습니다!

문제가 생길 때마다 바퀴를 다시 만들 필요가 없습니다. 찾고자 하는 해결책이 가득 들어 있습니다. 일반적인 프로그래밍 작업, 크로스 브라우저 프로그램을 만드는 방법 등의 코드 레시피가 수록되어 있습니다. 프로젝트에 바로 적용할 수 있는 예제 코드를 제공합니다.




최신 기술 반영

ECMAScript 5와 HTML5에 새로 추가된 기술도 다루고 있습니다. 크로스 도메인 위젯 통신 기술, HTML5의 audio/video 요소, canvas 요소 등을 사용하는 방법은 물론 이를 활용한 높은 품질의 프로그램 인터페이스 작성 방법을 여러 레시피에 걸쳐 설명합니다.

- 인터랙티브한 웹/데스크톱 프로그램 작성

- String, Array, Number, Math 등 자바스크립트 객체 다루기

- 자바스크립트를 사용한 SVG, 캔버스 처리

- 간단한 방법부터 복잡한 방법까지 다양한 방식으로 데이터를 저장하는 방법

- HTML5에 새로 추가된 audio, video 요소 사용

- Web Worker를 사용한 동시성 프로그래밍 구현

- jQuery 플러그인 작성 및 사용

- ARIA와 자바스크립트를 사용해 웹 프로그램에 접근성 더하기



예제 코드: http://www.hanb.co.kr/exam/1872

CHAPTER 1 자바스크립트 문자열 다루기
__00 들어가며
__01 두 개 이상의 문자열 합치기
__02 문자열과 다른 자료형 합치기
__03 문자열 비교하기
__04 문자열에서 부분 문자열 검색하기
__05 문자열에서 부분 문자열 추출하기
__06 문자열이 존재하는지 또는 빈 문자열인지 확인하기
__07 키워드 문자열을 여러 개의 키워드로 나누기
__08 특수 문자 삽입하기
__09 textarea를 줄별로 처리하기
__10 문자열 끝 공백 제거하기
__11 문자열 왼쪽 또는 오른쪽에 문자열 채워 넣기

CHAPTER 2 정규표현식 사용하기
__00 들어가며
__01 검색하는 문자열이 존재하는지 확인하기
__02 대소문자를 구분하지 않고 문자열 검색하기
__03 사회보장번호 유효성 검사하기
__04 패턴과 일치하는 모든 부분을 찾고 강조하기
__05 패턴을 새로운 문자열로 치환하기
__06 캡처 괄호를 사용하여 문자열 안의 단어 교환하기
__07 정규표현식을 사용해서 양끝 공백 제거하기
__08 HTML 태그를 명명된 엔티티로 치환하기
__09 특수 문자 검색하기

CHAPTER 3 날짜, 시간, 그리고 타이머
__00 들어가며
__01 오늘 날짜 출력
__02 UTC 날짜 및 시간 출력하기
__03 ISO 8601 형식으로 날짜 출력하기
__04 ISO 8601 형식의 날짜를 Date 객체로 변환하기
__05 특정 날짜로 객체 생성하기
__06 미래 날짜 만들기
__07 경과 시간 구하기
__08 타임아웃 만들기
__09 반복 타이머 만들기
__10 함수 클로저를 타이머와 함께 사용하기

CHAPTER 4 숫자와 수학 연산 다루기
__00 들어가며
__01 증분 카운터
__02 10진수를 16진수로 변환하기
__03 랜덤 숫자 생성기 작성하기
__04 랜덤 색상 만들기
__05 테이블에 있는 문자열을 숫자로 변환하기
__06 테이블에서 같은 열에 있는 모든 숫자 합산하기
__07 각도와 라디안 변환하기
__08 페이지 요소 안에 딱 맞는 원의 반지름과 중심 구하기
__09 원호 길이 구하기

CHAPTER 5 배열과 반복문 다루기
__00 들어가며
__01 반복문에서 배열 사용하기
__02 다중 배열 작성하기
__03 배열에서 문자열 만들기
__04 배열 정렬하기
__05 값에 순차적으로 저장하고 접근하기
__06 값을 저장하고 역순으로 접근하기
__07 기존 배열의 부분 집합으로 새 배열 작성하기
__08 배열 탐색하기
__09 다차원 배열을 평평하게 만들기
__10 배열 원소를 검색하여 없애거나 바꾸기
__11 각 배열 원소에 함수 적용하기
__12 배열의 모든 원소에 함수를 적용하고 새로운 배열 반환하기
__13 값을 걸러낸 배열 작성하기
__14 배열 콘텐츠 유효성 검사하기
__15 연관 배열을 사용해서 폼 요소의 이름과 값 저장하기

CHAPTER 6 재사용 가능한 자바스크립트 함수 작성하기
__00 들어가며
__01 재사용 가능한 코드 블록 작성
__02 함수에 데이터를 전달하고 값 받기
__03 함수에 복잡한 데이터 객체 전달하기
__04 실행 시간에 함수를 동적으로 작성하기
__05 함수를 다른 함수의 인수로 전달하기
__06 재귀 알고리즘 구현하기
__07 상태를 기억하는 함수 작성
__08 일반화된 커링 함수로 프로그램 성능 개선하기
__09 메모이제이션을 통한 프로그램 성능 개선
__10 익명 함수를 사용해서 전역 변수 감싸기

CHAPTER 7 이벤트 다루기
__00 들어가며
__01 페이지를 완전히 읽어 들인 순간을 탐지하기
__02 이벤트 객체를 사용해서 마우스가 클릭된 위치 캡처하기
__03 일반적이고 재사용 가능한 이벤트 처리 함수 작성하기
__04 변화된 환경에서 이벤트 취소하기
__05 중첩된 요소로 이벤트 전파 방지하기
__06 키보드 동작 캡처하기
__07 HTML5 드래그 앤 드롭 사용하기
__08 사파리의 방향 전환 이벤트와 다른 모바일 개발 환경 사용하기

CHAPTER 8 브라우저 객체
__00 들어가며
__01 웹 페이지 방문자에게 동작 확인하기
__02 단순한 모양의 새 브라우저 창 만들기
__03 웹 페이지에 접근한 브라우저의 정보 확인하기
__04 페이지를 떠날 때 경고하기
__05 색상 지원에 따라 스타일시트 변경하기
__06 페이지 크기에 따라 이미지 크기 조정하기
__07 CMS 템플릿 페이지에 빵 부스러기 만들기
__08 동적인 페이지에서 북마크하기
__09 뒤로 버튼, 페이지 새로 고침 후 상태 보존하기

CHAPTER 9 폼 요소와 유효성 검사
__00 들어가며
__01 폼 입력값에 접근하기
__02 동적으로 폼 요소를 사용 가능 또는 불가능하게 만들기
__03 이벤트에 따라 폼 요소에서 정보 가져오기
__04 라디오 버튼을 클릭하면 동작하기
__05 올바른 전화번호인지 확인하기
__06 폼 전송 취소하기
__07 폼 반복 전송 방지하기
__08 폼 요소를 숨기거나 표시하기
__09 다른 폼에서 선택한 값에 따라 선택 목록 수정하기

CHAPTER 10 디버깅과 에러 처리
__00 들어가며
__01 자바스크립트를 지원하지 않는 환경 처리
__02 함수에서 에러 확인하기
__03 경고창을 사용한 간단한 디버깅
__04 에러를 잡아내고 적절하게 처리하기
__05 에러 메시지 보내기
__06 파이어폭스의 파이어버그 사용하기
__07 파이어버그로 중단점을 설정하고 데이터 조사하기
__08 파이어폭스와 콘솔
__09 IE 내장 디버거 사용
__10 IE 개발자 도구에서 중단점 설정
__11 오페라의 드래곤플라이
__12 드래곤플라이로 중단점 설정하기
__13 사파리 개발자 도구 사용
__14 사파리 디버거에서 중단점 설정하기
__15 크롬에서 디버깅하기

CHAPTER 11 페이지 요소에 접근하기
__00 들어가며
__01 주어진 요소에 접근하여 부모와 자식 요소 찾기
__02 웹 페이지의 모든 이미지에 접근하기
__03 게시물의 모든 이미지 찾기
__04 선택자 API를 사용한 게시물 내 모든 이미지 찾기
__05 그룹 요소의 부모 요소 찾기
__06 모든 요소 내부의 첫 번째 문단 강조하기
__07 무순서 목록을 줄무늬로 만들기
__08 주어진 클래스를 가진 모든 요소의 배열 만들기
__09 속성이 같은 요소 모두 찾기
__10 체크된 항목 모두 찾기
__11 테이블의 한 행에 있는 모든 값 합산하기
__12 요소 속성 가져오기
__13 요소의 스타일 정보 가져오기

CHAPTER 12 요소와 속성 생성 및 제거
__00 들어가며
__01 innerHTML: 콘텐츠를 추가하는 빠르고 쉬운 방법
__02 페이지 요소 앞에 새 요소 삽입하기
__03 새로운 요소를 페이지 끝에 추가하기
__04 HTML5 요소를 구버전의 IE에서 사용하기
__05 새 문단 추가하기
__06 새 문단에 텍스트 추가하기
__07 기존 요소에 속성 추가하기
__08 불리언 속성 테스트하기
__09 속성 제거하기
__10 문단 이동
__11 링크를 각주 기호로 바꾸기
__12 테이블에 행 추가하기
__13 div 요소에서 문단 제거하기
__14 HTML 테이블에서 행 제거하기
__15 요소의 CSS 스타일 속성 바꾸기

CHAPTER 13 웹 페이지 공간 다루기
__00 들어가며
__01 웹 페이지 영역의 크기
__02 요소 크기 측정하기
__03 요소의 위치 정하기
__04 페이지 영역 감추기
__05 접었다 펼 수 있는 영역 만들기
__06 페이지 오버레이 추가
__07 탭 페이지 작성
__08 팝업 정보창 만들기
__09 사이드바의 크기를 변경하거나 접기

CHAPTER 14 자바스크립트, CSS, ARIA를 사용해서 접근성 있는 인러택티브 효과 만들기
__00 들어가며
__01 숨겨진 페이지 영역 표시하기
__02 경고 메시지 만들기
__03 입력하지 않았거나 잘못 입력한 폼 필드 강조하기
__04 페이지 오버레이에 키보드 접근성 추가하기
__05 접히는 폼 영역 만들기
__06 색상 번쩍임으로 동작의 결과 알려 주기
__07 탭 페이지 프로그램에 ARIA 속성 추가하기
__08 라이브 영역

CHAPTER 15 미디어와 인터랙티브 애플리케이션 작성하기
__00 들어가며
__01 캔버스에서 간단한 도형 그리기
__02 IE에서 캔버스 사용하기
__03 캔버스에 동적인 라인 차트 그리기
__04 SVG 파일에 자바스크립트 추가하기
__05 자바스크립트에서 SVG에 접근하기
__06 인터넷 익스플로러에서 SVG 사용하기
__07 HTML에 포함된 SVG를 인터랙티브하게 다루기
__08 수학 함수를 사용해서 아날로그 SVG 시계 만들기
__09 SVG와 캔버스 요소의 통합
__10 파이어폭스, 웹킷/사파리에서 WebGL 사용하기
__11 오디오 파일이 재생을 시작할 때 코드 실행하기
__12 자바스크립트와 video 요소로 동영상 재생하기

CHAPTER 16 자바스크립트 객체
__00 들어가며
__01 기본 자바스크립트 객체 정의하기
__02 객체 멤버를 비공개로 만들기
__03 프로토타입으로 객체 확장하기
__04 객체에 Getter/Setter 추가하기
__05 객체의 기능 상속하기
__06 새로운 속성을 정의하여 객체 확장하기
__07 객체 속성 열거하기
__08 객체 확장 방지하기
__09 속성 추가 및 속성 서술자 변경 금지
__10 속성 불변 객체 만들기
__11 일회성 객체와 네임스페이스
__12 Prototypebind 사용
__13 객체 메서드 체이닝

CHAPTER 17 자바스크립트 라이브러리
__00 들어가며
__01 코드 패키징하기
__02 JsUnit을 사용해서 코드 테스트하기
__03 라이브러리 최소화하기
__04 라이브러리 호스팅하기
__05 외부 라이브러리 사용하기: jQuery 기반 프로그램 만들기
__06 jQuery 플러그인 사용하기
__07 jQuery 플러그인 만들기
__08 여러 개의 라이브러리를 안전하게 사용하기

CHAPTER 18 통신
__00 들어가며
__01 XMLHttpRequest 객체에 접근하기
__02 데이터 전송을 위한 준비
__03 Ajax 전송 타입 고르기
__04 Ajax 요청에 콜백 함수 추가하기
__05 에러 확인하기
__06 텍스트 결과 처리
__07 Ajax를 다른 도메인으로 요청하기(JSONP 사용)
__08 서버 데이터를 기반으로 선택 목록 만들기
__09 타이머를 사용해서 페이지를 자동으로 업데이트하기
__10 postMessage로 창을 가로질러 통신하기

CHAPTER 19 구조적인 데이터 다루기
__00 들어가며
__01 Ajax 호출에서 반환받은 XML 문서 처리하기
__02 XML 트리에서 적절한 데이터 추출하기
__03 JSON으로 자바스크립트 객체 만들기 - 오랜 방식
__04 JSON 형식 문자열 해석하기
__05 객체를 JSON 문자열로 변환하기
__06 hCalendar 마이크로포맷을 캔버스 기반 그래프로 변환하기
__07 rdfQuery를 사용한 RDFa 수집 및 JSON 변환 그리고 jQuery RDF 플러그인

CHAPTER 20 데이터 저장
__00 들어가며
__01 URL을 사용한 정보 보존
__02 쿠키로 정보 보존하기
__03 historypushState 메서드와 windowonpopevent를 사용한 정보 보존
__04 sessionStorage 사용하기
__05 로컬 저장소에 클라이언트 데이터 저장하기
__06 관계형 데이터베이스에 데이터 저장하기

CHAPTER 21 브라우저를 벗어난 자바스크립트
__00 들어가며
__01 브라우저 플러그인, 확장 기능 만들기
__02 데스크톱과 모바일 위젯 만들기
__03 폰갭으로 아이폰, 안드로이드, 블랙베리 앱 만들기
__04 자바스크립트로 기능 확장하기
__05 Web Worker와 File API를 사용해서 효율적인 데스크톱 애플리케이션 만들기

<저자 서문>
15년 전에 필자가 자바스크립트 관련 도서를 처음 집필할 때는 책에 넣을 내용을 찾느라 바빴습니다. 그런데 본서를 집필할 즈음에는 수많은 소재 가운데 어떤 것을 선별해서 넣을지 고민해야 하는 상황으로 바뀌었습니다. 최근 몇 년 간 자바스크립트의 놀라운 성장세를 지켜 본 필자로서는 대체 이 언어가 얼마만큼 더 클 것인지 몹시 궁금합니다. 개인적으로 프로그래밍 언어나 개발 도구로서 자바스크립트만큼 유용한 것도 없다고 생각합니다. 이보다 더 널리 사용되는 언어는 HTML뿐입니다.
이 책은 자바스크립트를 가볍게 접해 보았으나 이제는 새로운 기술을 사용해 보고 싶은 분들, 혹은 자바스크립트의 기본기와 응용 능력을 동시에 키우고 싶은 분들을 대상으로 했습니다. 이 책에서 다룰 내용을 정리하면 다음과 같습니다.

●  String, Array, Number, Math 등과 같은 자바스크립트 객체를 다루는 방법
●  재사용 가능한 객체를 생성하는 방법
●  문서 객체 모델(Document Object Mode, DOM)에서 새로운 객체를 만들거나 질의하는 방법
●  효율적이고 정확한 질의를 위해 새로운 선택자(Selector) API를 사용하는 방법
●  자바스크립트를 통해 새로운 미디어 요소인 video, audio 등과 같은 HTML5 기술을 다루는 방법
●  인터랙티브한 애플리케이션 제작
●  웹 페이지 공간 관리
●  단순한 것부터 복잡한 것까지 다양한 방법으로 데이터 저장하기
●  자바스크립트로 확장 가능한 벡터 그래픽(Scalable Vector Graphics, SVG)과 canvas 요소를 다루는 방법
●  라이브러리를 사용하고 배포하는 방법
●  접근성 있는 리치 인터넷 애플리케이션(Accessible Rich Internet Applications, ARIA)을 사용하여 자바스크립트 애플리케이션의 접근성을 보장하는 방법
●  전형적인 데스크톱 브라우저를 벗어나 모바일 폰 웹 애플리케이션이나 포토샵 확장 기능과 같은 환경에서 작업하기
●  jQuery 플러그인을 만들고 사용하는 방법
●  Ajax 애플리케이션 개발
●  웹 브라우저의 디버거를 사용한 자바스크립트 애플리케이션 디버깅
●  새로운 HTML5 드래그 앤 드롭 다루기
●  HTML5 크로스 문서 기술을 사용한 통신
●  Web Worker를 사용한 동시성 프로그래밍(concurrent programming) 구현
●  클라이언트측 자바스크립트에서 File API를 사용해서 데스크톱 파일에 직접 접근하는 방법

이 목록이 자바스크립트의 전부를 포함하고 있지는 않습니다. 책 한 권에 한 언어의 전부를 담기란 어려운 일이기 때문입니다. 하지만 이 책의 마지막 페이지를 덮을 즈음에는 독자 여러분이 자바스크립트로 무엇이든 할 수 있다는 느낌을 받을 수 있었으면 하는 바람입니다.
자, 그럼 시작해 볼까요!

 

<옮긴이 서문>
오늘날 자바스크립트로 할 수 있는 일은 굉장히 많습니다. 웹 페이지에 효과를 줄 수도 있고, 네이버 지도, 구글 문서 도구처럼 데스크톱 프로그램의 경험과 가까운 웹 애플리케이션을 만드는 것은 물론 XUL 등과 함께 사용하면 실제로 데스크톱 프로그램을 만들 수도 있습니다. 마이크로소프트는 이미 차기 버전의 윈도우와 오피스 스위트에서 자바스크립트를 사용해서 네이티브 애플리케이션이나 플러그인을 만들 수 있도록 지원하겠다고 밝혔습니다. 파이어폭스, 크롬, 사파리 등 웹 브라우저의 확장 기능, 모바일 앱은 물론 서버측 프로그램까지 만들 수 있습니다. 가히 자바스크립트 천하라 해도 과언이 아닙니다. 어도비가 모바일 플래시 개발을 중단함에 따라 HTML5, WebGL 등을 등에 업은 자바스크립트의 역할은 더욱 확대될 전망입니다.
돌이켜 보건대 제가 처음 자바스크립트를 시작하던 때를 생각하면 지금은 무척 많은 것이 바뀌었습니다. 국내는커녕 해외에서조차 자바스크립트에 대한 자료를 찾기 어려웠던 과거에 비해 지금은 수많은 자료와 서적이 개발자들을 기다리고 있습니다. 하지만 이는 자바스크립트가 배우기 어렵다는 방증이기도 합니다. 하나의 언어로도 인정받지 못했던 자바스크립트였는데, 세월이 흘러 실력이 뛰어난 개발자들조차 종종 어렵게 느끼는 언어가 된 것을 보면 격세지감을 느끼곤 합니다. 어쨌든 이제는 많은 책 중에서 자신에게 맞는 책을 고르는 게 더 중요하게 되었습니다.
종종 개발자들(혹은 공대생들)의 머리는 문제 해결에 특화되어 있다는 말을 듣습니다. 어떤 문제가 주어졌을 때 그 문제에 대한 해결책을 제시하는 것은 개발자들에게 아주 익숙한 일이고, 개발자들이 잘 하는 분야이기도 합니다. ‘자바스크립트 쿡북’은 바로 개발자들이 사고하는 방식으로 만들어진 책입니다. 해결하고 싶은 문제를 제시하고 해답을 알려준 후, 해답에 이르기까지의 과정과 배경 지식을 자세히 설명해 줍니다. 또한 초보자가 궁금해 할 질문부터 숙련자가 가질만한 의문까지 포함하고 있어 다양한 사람들에게 도움이 될 것입니다.
저자는 오랜 기간 동안 자바스크립트와 웹에 관한 저술을 해왔습니다. 그 덕분에 본서는 시중에서 쉽게 만나기 어려운 좋은 내용을 많이 담고 있습니다. 저는 가급적이면 이 책이 가진 힘을 그대로 전하기 위해 많은 노력을 기울였습니다. 어쩌면 부족할지도 모르겠지만 아무쪼록 많은 사람들에게 도움이 되었으면 좋겠습니다. 많은 분들의 도움 덕분에 이 책의 번역을 무사히 마칠 수 있었습니다. 저에게 이런 책을 번역할 수 있는 기회를 주신 한빛미디어의 한동훈 님, 항상 부족한 저를 믿고 지지해 주시는 네 분의 부모님, 지칠 때면 큰 힘이 되는 가족들, 즐겁게 일할 수 있게 도와준 같은 팀 동료들, 이분들 모두에게 고맙다는 말씀을 드립니다.
끝으로 항상 곁에서 절 응원해 주고 깐깐한 리뷰어이자 첫 번째 독자로 가장 많은 도움을 준 아내 미령씨에게 말로는 부족한 감사의 마음을 전합니다.