추가 적립 안내

개발자가 알아야 할 기본 문법부터 완벽한 현장 대응까지!

이 책은 개발자가 알아야 할 기본 문법과 ECMAScript 6에 의해 계속 진화하고 있는 자바스크립트의 새로운 기법은 물론, 객제지향 구문, Ajax 클라이언트 측 개발에 대해 상세히 설명하며, 테스트, 문서, 코딩 등 현장에서 꼭 필요한 지식도 담겨 있다.

개발자가 알아야 할 기본 문법부터 완벽한 현장 대응까지!
아마존재팬 No.1 자바스크립트 서적!

이 책은 자바스크립트에 대한 이해를 확실히 해두고 싶은 분을 위해 만든 책이다. 자바스크립트
는 좋게 표현하자면 ‘유연한’, 나쁘게 말하자면 ‘애매하고 어설픈’ 언어다. 남이 만든 코드를 대충
흉내내는 것만으로도 그럭저럭 동작하는 코드를 만들어 낼 수도 있지만, 본격적으로 마스터하려
면 탄탄한 기초가 뒷받침되어야 한다.

이 책은 개발자가 알아야 할 기본 문법과 ECMAScript 6에 의해 계속 진화하고 있는 자바스크립트의 새로운 기법은 물론, 객제지향 구문, Ajax 클라이언트 측 개발에 대해 상세히 설명하며, 테스트, 문서, 코딩 등 현장에서 꼭 필요한 지식도 담겨 있다.

이 책의 주요 내용
ㆍ기본적인 작성법 익히기
ㆍ기본 데이터 조작하기: 내장형 객체
ㆍ반복적으로 사용하는 코드를 하나로 정리하기: 함수
ㆍ대규모 개발에서도 통용되는 작성법 익히기: 객체지향 구문
ㆍHTML과 XML 문서 다루기: DOM
ㆍ클라이언트 측 자바스크립트 개발 마스터하기
ㆍ현장에서 바로 대응할 수 있는 지식

CHAPTER 1 소개 1
1.1 JavaScript란? 2
1.1.1 JavaScript의 역사 2
1.1.2 JavaScript 부활 ― Ajax, 그리고 HTML5의 시대 3
1.1.3 나쁜 이미지에 대한 오해 5
1.1.4 언어로서의 네 가지 특징 6
1.2 ECMAScript 2015란? 8
1.2.1 브라우저별 대응 상황 9
1.3 브라우저의 개발자 도구 11
1.3.1 개발자 도구 시작하기 11
1.3.2 HTML/CSS의 소스 확인하기 ─ [Elements] 탭 13
1.3.3 통신 상황 추적하기 ─ [Network] 탭 13
1.3.4 스크립트 디버그하기 ─ [Sources] 탭 15
1.3.5 스토리지/쿠키 내용 확인하기 ─ [Application] 탭 16
1.3.6 로그 확인/객체 조작 등의 만능 도구 ─ [Console] 탭 17

CHAPTER 2 기본적인 작성법 익히기 19
2.1 JavaScript의 기본적인 표기 20
2.1.1 JavaScript로 “안녕하세요, 자바스크립트!” 표기하기 20
2.1.2 JavaScript를 HTML 파일 안에 집어넣기 ─ <script> 요소 23
2.1.3 문장의 규칙 28
2.1.4 주석 삽입하기 30
2.2 변수와 상수 33
2.2.1 변수 선언하기 33
2.2.2 식별자의 명명 규칙 36
2.2.3 상수 선언하기 38
2.3 데이터형 41
2.3.1 JavaScript의 주요 데이터형 42
2.3.2 리터럴 43
2.4 연산자 52
2.4.1 산술 연산자 52
2.4.2 대입 연산자 55
2.4.3 비교 연산자 62
2.4.4 논리 연산자 66
2.4.5 비트 연산자 69
2.4.6 그 외의 연산자 71
2.4.7 연산자의 우선순위와 결합순서 73
2.5 제어 구문 77
2.5.1 조건에 따라 분기 처리하기 ─ if 명령 77
2.5.2 식의 값에 따라 분기 처리하기 ─ switch 명령 83
2.5.3 조건식에 따라 루프 제어하기 ─ while/do…while 명령 86
2.5.4 무한 루프 89
2.5.5 지정 횟수만큼만 루프 처리하기 ─ for 명령 90
2.5.6 연상 배열의 요소를 순서대로 처리하기 ─ for…in 명령 92
2.5.7 배열 등을 순서대로 처리하기 ─ for…of 명령 94
2.5.8 루프를 도중에 스킵/중단하기 ─ break/continue 명령 95
2.5.9 예외 처리하기 ─ try…catch…finally 명령 100
2.5.10 JavaScript의 위험한 구문 금지하기 ─ Strict 모드 103

CHAPTER 3 기본 데이터 조작하기 ─ 내장형 객체 107
3.1 객체란? 108
3.1.1 객체 = 프로퍼티 + 메소드 109
3.1.2 객체를 이용하기 위한 준비 ─ new 연산자 110
3.1.3 정적 프로퍼티/정적 메소드 112
3.1.4 내장형 객체란? 112
3.2 기본 데이터를 취급하기 위한 객체 116
3.2.1 문자열 조작하기 ─ String 객체 116
3.2.2 숫자 조작하기 ─ Number 객체 120
3.2.3 심벌 작성하기 ─ Symbol 객체 125
3.2.4 기본적인 숫자 연산 실행하기 ─ Math 객체 127
3.3 값의 집합을 처리/조작하기 ─ Array/Map/Set 객체 131
3.3.1 배열 조작하기 ─ Array 객체 131
3.3.2 연상 배열 조작하기 ─ Map 객체 144
3.3.3 중복되지 않은 값의 집합 조작하기 ─ Set 객체 148
3.4 날짜/시간 데이터 조작하기 ─ Date 객체 151
3.4.1 Date 객체 생성하기 151
3.4.2 날짜/시간 값을 가산/감산하기 154
3.4.3 날짜/시간 차이 구하기 155
3.5 정규 표현으로 문자 조작하기 ─ RegExp 객체 157
3.5.1 JavaScript에서 이용 가능한 정규 표현 158
3.5.2 RegExp 객체를 생성하는 방법 159
3.5.3 정규 표현에 의한 문자열 검색 160
3.5.4 정규 표현의 옵션으로 매치할 때 동작 제어하기 162
3.5.5 match 메소드와 exec 메소드의 동작 차이 164
3.5.6 매칭의 성공 여부 검증하기 166
3.5.7 정규 표현으로 문자열 치환하기 167
3.5.8 정규 표현으로 문자열 분할하기 169
3.6 모든 객체의 모형 ─ Object 객체 170
3.6.1 객체를 기본형으로 변환하기 ─ toString/valueOf 메소드 172
3.6.2 객체 결합하기 ─ assign 메소드 173
3.6.3 객체 생성하기 ─ create 메소드 174
3.6.4 불변 객체 정의하기 177
3.7 JavaScript 프로그램에서 자주 이용하는 기능 제공하기 ─ Global 객체 179
3.7.1 Number 객체로 이동한 메소드 180
3.7.2 쿼리 정보 이스케이프 처리하기 ─ encodeURI/encodeURIComponent 함수 181
3.7.3 동적으로 생성한 스크립트 실행하기 ─ eval 함수 182

CHAPTER 4 반복적으로 사용하는 코드를 하나로 정리하기 ─ 함수 185
4.1 함수란? 186
4.1.1 function 명령으로 정의하기 186
4.1.2 Function 생성자로 정의하기 188
4.1.3 함수 리터럴 표현으로 정의하기 190
4.1.4 애로우 함수로 정의하기 191
4.2 함수를 정의할 때 주의할 네 가지 사항 193
4.2.1 return 명령은 도중에 개행하지 않는다 193
4.2.2 함수는 데이터형의 하나다 194
4.2.3 function 명령은 정적인 구조를 선언한다 196
4.2.4 함수 리터럴/Function 생성자는 실행할 때 판단된다 197
4.3 변수는 어떤 곳에서 참조할 수 있을까? ─ 스코프 198
4.3.1 글로벌 변수와 로컬 변수의 차이점 199
4.3.2 변수 선언에 var 명령이 필수인 이유 199
4.3.3 로컬 변수의 유효범위는 어디까지? 200
4.3.4 가인수의 스코프 ─ 기본형과 참조형의 차이 주의하기 202
4.3.5 블록 레벨의 스코프는 존재하지 않는다 (ES2015 이전) 204
4.3.6 블록 스코프에 대응한 let 명령 206
4.3.7 함수 리터럴/Function 생성자에서 스코프의 차이 207
4.4 인수의 다양한 표기법 209
4.4.1 JavaScript는 인수의 수를 체크하지 않는다 209
4.4.2 가변길이 인수의 함수 정의하기 212
4.4.3 명시적으로 선언된 인수와 가변길이 인수 혼재시키기 214
4.4.4 명명된 인수로 코드를 읽기 쉽게 하기 216
4.5 ES2015의 인수 표기법 218
4.5.1 인수의 디폴트값 218
4.5.2 가변길이 인수의 함수 정의하기 221
4.5.3 ‘...’ 연산자에 의한 인수의 전개 222
4.5.4 명명된 인수로 코드를 이해하기 쉽게 하기 223
4.6 함수 호출과 반환값 225
4.6.1 복수의 반환값을 개별 변수에 대입하기 225
4.6.2 함수 자신을 재귀적으로 호출하기 ─ 재귀 함수 226
4.6.3 함수의 인수도 함수 ─ 고차 함수 227
4.6.4 ‘일회용 함수’는 익명 함수로 230
4.7 높은 수준의 함수 테마 232
4.7.1 템플릿 문자열을 애플리케이션 사양으로 커스터마이즈하기 ─ 태그 부여 템플릿 문자열 232
4.7.2 변수는 어떤 순서로 해결될까? ─ 스코프 체인 234
4.7.3 같은 행동을 하는 객체 ─ 클로저 236

CHAPTER 5 대규모 개발에서도 통용되는 작성법 익히기 ─ 객체지향 구문 241
5.1 JavaScript의 객체지향 특징 242
5.1.1 ‘클래스’는 없고 ‘프로토타입’만 있다 242
5.1.2 가장 간단한 클래스 정의하기 243
5.1.3 생성자로 초기화하기 243
5.1.4 동적으로 메소드 추가하기 245
5.1.5 문맥에 따라 내용이 변하는 변수 ─ this 키워드 247
5.1.6 생성자의 강제적인 호출 250
5.2 생성자의 문제점과 프로토타입 252
5.2.1 메소드는 프로토타입으로 선언한다 ─ prototype 프로퍼티 253
5.2.2 프로토타입 객체를 사용한 메소드 정의의 두 가지 이점 254
5.2.3 프로토타입 객체의 불가사의(1) ─ 프로퍼티의 설정 256
5.2.4 프로토타입 객체의 불가사의(2) ─ 프로퍼티의 삭제 258
5.2.5 객체 리터럴로 프로토타입 정의하기 260
5.2.6 정적 프로퍼티/정적 메소드 정의하기 262
5.3 객체의 계승 ─ 프로토타입 체인 265
5.3.1 프로토타입 체인의 기초 265
5.3.2 계승 관계는 동적으로 변경 가능 268
5.3.3 객체의 타입 판정하기 269
5.4 본격적인 개발에 대비하기 272
5.4.1 private 멤버 정의하기 272
5.4.2 Object.defineProperty 메소드에 의한 액세서 메소드 구현 276
5.4.3 네임스페이스/패키지 작성하기 279
5.5 ES2015의 객체지향 구문 282
5.5.1 클래스 정의하기 ─ class 명령 282
5.5.2 객체 리터럴의 개선 287
5.5.3 애플리케이션을 기능 단위로 모으기 ─ 모듈 289
5.5.4 열거 가능한 객체 정의하기 ─ 반복자 294
5.5.5 열거 가능한 객체를 더욱 간단하게 구현하기 ─ 발생자 297
5.5.6 객체의 기본적인 동작을 사용자 정의하기 ─ Proxy 객체 300

CHAPTER 6 HTML과 XML 문서 다루기 ─ DOM 303
6.1 DOM의 기본 파악하기 304
6.1.1 마크업 언어를 사용하는 표준 방식 ‘DOM’ 304
6.1.2 문서 트리와 노드 305
6.2 클라이언트 측 JavaScript의 사전 지식 307
6.2.1 요소 노드 취득하기 307
6.2.2 문서 트리 사이 오가기 ─ 노드 워킹 315
6.2.3 이벤트를 트리거로 한 처리 실행하기 ─ 이벤트 구동 모델 319
6.3 속성값 취득/설정하기 327
6.3.1 대부분의 속성은 ‘요소 노드 속 같은 이름의 프로퍼티’로 액세스 가능 327
6.3.2 불특정 속성 취득하기 328
6.3.3 텍스트 취득 및 설정하기 330
6.4 폼 요소에 액세스하기 335
6.4.1 입력 상자/선택 상자의 값 취득하기 336
6.4.2 체크 상자의 값 취득하기 336
6.4.3 라디오 버튼의 값 취득하기 338
6.4.4 라디오 버튼/체크 상자의 값 설정하기 340
6.4.5 복수 선택할 수 있는 리스트 상자의 값 취득하기 343
6.4.6 업로드된 파일의 정보 취득하기 345
6.5 노드를 추가/치환/삭제하기 351
6.5.1 innerHTML 프로퍼티와 어떻게 구분하여 사용할 것인가? 351
6.5.2 신규 노드 작성하기 352
6.5.3 기존 노드 치환/삭제하기 359
6.5.4 HTMLCollection/NodeList를 반복 처리할 때 주의점 363
6.6 JavaScript로 스타일 시트 조작하기 365
6.6.1 인라인 스타일로 액세스하기 ─ style 프로퍼티 365
6.6.2 외부 스타일 시트 적용하기 ─ className 프로퍼티 368
6.6.3 스타일 클래스를 더 간단하게 조작하기 ─ classList 프로퍼티 371
6.7 더 높은 수준의 이벤트 처리 373
6.7.1 이벤트 리스너/이벤트 핸들러 삭제하기 373
6.7.2 이벤트에 관련된 정보 취득하기 ─ 이벤트 객체 374
6.7.3 이벤트 처리 취소하기 379
6.7.4 이벤트 리스너/이벤트 핸들러 아래의 this 키워드 384

CHAPTER 7 클라이언트 측 JavaScript 개발 마스터하기 389
7.1 브라우저 객체에서 알아두어야 할 기본 기능 390
7.1.1 브라우저 객체의 계층 구조 390
7.1.2 확인 대화상자 표시하기 ─ confirm 메소드 392
7.1.3 타이머 기능 구현하기 ─ setInterval/setTimeout 메소드 393
7.1.4 표시 페이지의 어드레스 정보 취득/조작하기 ─ location 객체 396
7.1.5 이력에 따라 페이지를 전후로 이동하기 ─ history 객체 398
7.1.6 J avaScript에 의한 조작을 브라우저 이력에 남기기 ─ pushState 메소드 399
7.1.7 애플리케이션에 크로스 브라우저 대책 실시하기 ─ navigator 객체 401
7.2 디버그 정보 출력하기 ─ Console 객체 405
7.2.1 콘솔에 로그 출력하기 405
7.2.2 알아두면 편리한 로그 메소드 407
7.3 사용자 데이터 저장하기 ─ Storage 객체 415
7.3.1 스토리지에 데이터 보관/취득하기 416
7.3.2 기존 데이터 삭제하기 418
7.3.3 스토리지로부터 모든 데이터 추출하기 418
7.3.4 스토리지에 객체 보관/취득하기 419
7.3.5 스토리지의 변경 감시하기 422
7.4 서버 연계로 고급 UI 구현하기 ─ Ajax 423
7.4.1 PHP의 ‘Hello, World’와 Ajax의 ‘Hello, World’ 비교하기 424
7.4.2 Ajax 애플리케이션 구현의 기본 428
7.4.3 Ajax 애플리케이션에서 구조화 데이터 다루기 435
7.4.4 클 라이언트 측에서 크로스 오리진 통신 가능하게 하기 ─ JSONP 441
7.4.5 크로스 도큐먼트 메시징을 통한 크로스 오리진 통신 445
7.5 비동기 처리 간단하게 표현하기 ─ Promise 객체 449
7.5.1 Promise 객체의 기본 파악하기 450
7.5.2 비동기 처리 연결하기 451
7.5.3 여러 비동기 처리를 병행하여 실행하기 453
7.6 백그라운드로 JavaScript 코드 실행하기 ─ Web Worker 455
7.6.1 워커 구현하기 456
7.6.2 워커 기동하기 457

CHAPTER 8 현장에서 바로 대응할 수 있는 지식 459
8.1 단위 테스트 ─ Jasmine 460
8.1.1 Jasmine의 인스톨 방법 460
8.1.2 테스트의 기본 461
8.1.3 테스트 스위트 실행하기 464
8.2 문서화 주석으로 코드 내용 알기 쉽게 하기 ─ JSDoc 467
8.2.1 문서화 주석의 기술 규칙 468
8.2.2 문서화 생성 툴 ─ JSDoc 469
8.3 빌드 툴로 정형 작업 자동화하기 ─ Grunt 471
8.3.1 Grunt에 의한 소스 코드의 압축 471
8.4 지금 바로 ECMAScript 2015 실전 활용하기 ─ Babel 478
8.4.1 코드를 수동으로 변환하기 478
8.4.2 Grunt 경유로 Babel 실행하기 479
8.4.3 간이 인터프리터 이용하기 481
8.5 읽기 쉽고, 유지보수가 쉬운 코드 작성하기 ─ 코딩 규약 482
8.5.1 JavaScript의 주요 코딩 규약 482
8.5.2 JavaScript style guide(MDN)의 주요 규약 483
8.5.3 Google의 표준 코딩 스타일 484

찾아보기 486

앞서 이야기했듯이 변수란 ‘데이터를 넣어두는 그릇’이다. 그러므로 스크립트의 중간에서 내용물을 바꾸어도 상관없다. 한편 그릇과 내용물이 한 세트로 도중에 내용물을 변경할 수 없는 것을 상수라고 한다. 상수란, 코드 안에 나타나는 의미 있는 값으로 미리 이름을 붙여둔 것을 말한다.
_38

배열 등을 순서대로 열거하기 위한 또 하나의 수단으로, ES2015에서 추가된 for…of 명령이 있
다. ‘배열 등’이라는 표현을 썼는데, 이렇게 표현한 이유는 for…of 명령에서는 배열뿐만 아니라
Array와 같은 객체(NodeList, arguments 등), 반복자/생성자 등도 처리할 수 있기 때문이다. 이를 모두 통틀어서 열거 가능한 객체라고도 부른다.
_94

오랜 역사를 가진 JavaScript에는 ‘사양으로는 존재하지만 현재는 안전성과 효율성 면에서 사용하지 말아야 할 구문’이 존재한다. 이전에는 이러한 구문의 함정을 개발자가 배워서 함정을 피하
도록 코딩해야 했다. 그러나 이것은 개발자에 불필요한 부담을 주는 것이다. 게다가 애초부터 개발자의 수준에 따라 좋지 않은 코드가 들어오는 것을 완전히 막는 것은 불가능하다. 그러한 이유로 JavaScript의 함정을 발견하여 오류로 통지해주는 구조가 도입되었는데, 이것이 바로 Strict 모드다.
_103

지금까지 소개했던 객체는 모두 그 자체의 이용을 목적으로 한 객체였다. 그러나 지금 여기서 소개하는 Object 객체는 지금까지 다뤄 온 객체와 약간 다르다. 그도 그럴 것이 Object 객체는 (자신을 인스턴스화할 수 있는 것뿐만 아니라) 다른 객체에 대하여 객체의 공통적인 성질/기능을 제공하기 때문이다. Object 객체는 모든 객체의 기본 객체라고도 바꿔 말할 수 있다. 즉, 내장형 객체도, 제5장에서 소개할 사용자 정의 객체도, ‘객체’라고 이름 붙은 모든 것은 Object 객체에 정의된 프로퍼티나 메소드를 공통으로 이용할 수 있다.
_170

어떤가? 익명 함수(함수 리터럴)를 이용함으로써 함수 호출의 코드에 함수를 직접 지정할 수 있다. 이로 인해 코드가 짧아진 것은 물론이거니와 관련 처리를 하나의 문장으로 기술할 수 있다는 점에서, 호출원의 코드와 실제의 처리를 규정하고 있는 함수와의 관계가 이해하기 수월해져 코드가 읽기 쉬워졌다고 생각되지 않는가? 또 한 번밖에 사용하지 않는 함수에 이름(게다가 글로벌 스코프의 이름)을 붙이지 않고 코딩을 끝낼 수 있으므로 ‘의도하지 않은 이름의 중복을 회피할 수 있다’는 의미도 있다.
_231