Head first JavaScript : 대화형 웹 애플리케이션의 시작

목차 (Table of Contents)

• 목차
• 서문
• 이 책을 사용하는 방법 = 25
• 이 책은 누구를 위한 책일까요? = 26
• 아마 지금쯤 여러분 머리 속에는 이런 생각이 지나가고 있겠죠? = 27
• 여러분의 머리는 이런 식으로 돌아갑니다 = 27
• 초인지: 생각하는 것에 대해 생각하는 것 = 29
• 이 책에서는 이렇게 했습니다 = 30
• 마지막으로 알아둬야 할 몇 가지 = 32
• 감사의 글 = 35
• 1. 대화형 웹: 가상의 세계에 반응하기 = 37
• (온라인) 사람들이 필요로 하는 것 = 38
• 벽에 대고 말하듯이... 아무 일도 일어나지 않는군요 = 39
• 하지만 자바스크립트는 대답을 하는군요 = 40
• 조명, 카메라, 인터 액션! = 42
• 〈script〉 태그를 사용해서 자바스크립트를 사용하고 있다는 것을 브라우저에게 알려주세요 = 47
• 여러분의 웹 브라우저는 HTML, CSS, 그리고 자바스크립트를 처리할 수 있습니다 = 48
• 사람들의 최고 가상 친구가... 여러분의 도움을 필요로 합니다 = 51
• 상호작용하는 iRock 만들기 = 52
• iRock 웹 페이지 생성하기 = 53
• 자바스크립트 이벤트: iRock에게 말할 기회를 줍시다 = 54
• 함수를 사용하여 사용자에게 통보하기 = 55
• iRock 인사말 추가하기 = 56
• 상호작용하는 바위 시운전 = 56
• 이제 iRock을 실제로 상호작용하도록 만들어 봅시다 = 58
• 상호작용은 쌍방향 커뮤니케이션입니다 = 59
• 사용자의 이름을 얻기 위한 함수 추가하기 = 60
• 즉각적인 반응: 방금 무슨 일이 일어났을까요? = 63
• iRock 1.0 시운전 = 64
• 2. 데이터 저장하기: 모든 것들은 다 자신의 자리가 있습니다 = 69
• 스크립트로 데이터를 저장할 수 있습니다 = 70
• 스크립트는 데이터 타입을 고안해 냈습니다 = 71
• 상수는 동일한 상태에 있고, 변수는 변경될 수 있습니다 = 76
• 변수는 값 없이 시작합니다 = 80
• 변수 초기화는 "＝"으로 하세요 = 81
• 변화를 거부하는 상수 = 82
• 이름 속에 들어있는 것은 무엇일까요? = 86
• 합법적인 그리고 불법적인 변수와 상수 이름들 = 87
• 변수 이름은 종종 낙타표기법(CamelCase)을 사용합니다 = 88
• (도너츠에서) 다음으로 중요한 것 = 91
• 던칸 도너츠 웹 페이지 설계하기 = 92
• 도너츠 계산에 대한 첫 번째 진단 = 94
• 초기화하거나 말거나 = 97
• NaN은 슷자가 아니라는 뜻입니다 = 98
• 그 사이, 던칸 도너츠에서는... = 99
• 숫자 외의 다른 것들도 더할 수 있습니다 = 100
• 텍스트를 숫자로 변환하기: parseInt()와 parseFloat() = 101
• 왜 추가로 도너츠가 주문된 걸까요? = 102
• 이제 문제점을 알아냈으니... = 105
• 던칸씨가 도너츠 스파이를 찾아냈습니다 = 106
• getElementByld()를 사용해서 데이터 잡아내기 = 107
• 웹 폼에 있는 데이터 검증하기 = 108
• 이제 던칸씨의 도너츠 폼을 다시 저장하세요 = 111
• 직관적인 사용자 입력에 대한 고군분투 = 113
• 예약판매 도너츠가 대박났습니다! = 116
• 3. 클라이언트 탐험: 브라우저 동굴 탐험 = 121
• 클라이언트, 서버, 그리고 자바스크립트 = 122
• 여러분을 위해 브라우저는 무엇을 할 수 있을까요? = 124
• iRock은 지금 너무 행복하답니다 = 125
• iRock은 좀 더 감정적이 되어야 합니다 = 126
• 타이머는 소요된 시간에 특정 동작을 연결합니다 = 128
• 타이머 파괴하기 = 129
• setTimeout()을 사용해 타이머 설정하기 = 130
• setTimeout() 함수 해부 = 131
• 이제 iRock이 우울해졌습니다! = 132
• 화면 크기를 두 배로 늘리면, 불평도 두 배로 늘어납니다 = 135
• 클라이언트 윈도우의 넓이를 알려면 document 객체를 사용하세요 = 136
• 클라이언트 윈도우의 넓이를 설정하려면 document 객체 프로퍼티를 사용하세요 = 137
• iRock 이미지의 넓이와 높이 설정하기 = 138
• iRock은 페이지에 맞춰져야 합니다 = 139
• 진화된 iRock! = 141
• 브라우저 크기가 변할 때, onresize 이벤트가 발생합니다 = 143
• onresize 이벤트는 바위덩어리 크기를 변경합니다 = 144
• 우리 전에 만났던가요? 사용자 기억해내기 = 146
• 모든 스크립트는 라이프 사이클을 가집니다 = 147
• 쿠키는 스크립트 라이프 사이클보다 오래 삽니다 = 148
• 쿠키는 이름을 갖고 값을 저장하며 소멸될 수 있습니다 = 153
• 자바스크립트는 웹 페이지 밖에서도 살 수 있습니다 = 155
• 쿠키를 사용하여 인사하기 = 156
• greetUser()는 이제 쿠키로 강화되었습니다 = 157
• 쿠키를 설정하는 것 역시 잊지 마세요 = 158
• 쿠키는 브라우저의 보안에 영향을 미칩니다 = 160
• 쿠키 없는 세상 = 162
• 사용자들에게 솔직히 털어놓으세요... 안하는 것보다는 낫습니다 = 165
• 자바스크립트 제왕에 걸맞는 iRock = 166
• 4. 의사결정: 갈림길을 만나면, 선택하세요 = 171
• 행운의 당첨자는 이리 내려 오세요! = 172
• 만약 이게 맞는다면, 뭔가를 하세요 = 174
• if문은 조건을 평가한 후 행동을 취합니다 = 175
• 둘 중에 한 가지를 선택할 때, if를 사용하세요 = 177
• if를 사용해서 여러 가지 결정을 할 수 있습니다 = 178
• if문에 else 추가하기 = 179
• 장엄한 모험기 = 180
• 모험기 셋업 = 181
• 변수들이 이야기를 이끌어 나갑니다 = 182
• 그런데 아야기의 일부분이 빠졌네요 = 183
• 자바스크립트 문장 합치기 = 184
• 모험을 시작해 볼까요? = 187
• 이제, 나머지 장면들을 둘러봅시다 = 188
• if／else로 결정하는 것에 지쳤어요 = 190
• if는 또 다른 if안으로 들어갈 수 있습니다 = 191
• 함수는 페이지를 제어합니다 = 193
• 의사코드로 여러분의 모험을 위한 지도를 작성할 수 있습니다 = 194
• 갈비씨 모험기 탐방 = 197
• 갈비씨의 변덕 = 198
• !＝ 잠깐만요, 할 말이 없는데... = 199
• 비교 연산자와 함께 하는 좀 더 정교한 결정 = 200
• 주석, 위치 지정자, 그리고 문서화 = 202
• 자바스크립트에서 주석은 ／／로 시작합니다 = 203
• 영역과 컨텍스트: 데이터가 살고 있는 곳 = 205
• 여러분의 변수 영역을 체크해 보세요 = 206
• 여러분의 데이터가 살고 있는 곳은 어디인가요? = 207
• 다섯 개 중에 한 개 선택하기 = 210
• 중첩된 if／else는 자칫 잘못 사용하면 매우 복잡해지게 됩니다 = 211
• switch문은 여러 개의 조건을 가지고 있습니다 = 213
• switch문의 내부 = 214
• 여러분 자신만의 switch case문을 작성하세요 = 215
• 스위치 갈비씨 모험기: 시운전 = 219
• 이야기는 계속됩니다 = 220
• 5. 루핑: 했던 얘기 되풀이하기 = 225
• X로 표시된 지점 = 226
• 처음부터 다시... for 루프 = 227
• for 루프로 보물 찾기 = 228
• for 루프 해부 = 229
• 만당고(Mandango): 마쵸 영화관 좌석 검색 사이트 = 230
• 먼저 빈 좌석 체크하기 = 231
• 루핑, HTML, 그리고 좌석의 사용 가능성 = 232
• 영화관 좌석을 변수로 나타내봅시다 = 233
• 배열은 여러 조각의 데이터를 수집합니다 = 234
• 배열 값은 키와 함께 저장됩니다 = 235
• 자바스크립트부터 HTML까지 = 239
• 만당고 좌석을 시각화해 봅시다 = 240
• 처음부터 남성용 좌석을 찾는 일은 좀 버겁군요 = 242
• 시운전: 솔로용 좌석 찾기 = 245
• 너무 앞서 나가도 문제: 끝없는 루프 = 246
• 루프는 항상 한 개(혹은 두 개)의 탈출 조건이 필요합니다 = 247
• 루프 실행 "중단"하기 = 248
• 만당고에 "남자" 끼워넣기 = 250
• 논리적이면서도 우아하고 잘 설계된 해결사인 && = 253
• 드러난 boolean 연산자 로직 = 254
• 마침내 완성된 늠름해진 좌석 검색 기능 = 256
• 보물지도로 되돌아 가서 = 257
• 조건을 만족하는 "잠시동안"만 루핑 돌리기 = 258
• while 루프 해부 = 259
• 임무 수행을 위해서는 올바른 루프를 사용하세요 = 261
• 루프의 끝에 있는 보물 = 264
• 영화 좌석 데이터 모델링 = 267
• 배열 속의 배열: 2차원 배열 = 268
• 2차원 배열 데이터에 접근하기 위한 두 가지 열쇠 = 269
• 2차원 만당고 = 271
• 극장 전체를 남성용 좌석으로 만들었습니다 = 274
• 6. 함수: 아끼고, 재사용하고, 재활용하기 = 279
• 모든 문제의 근원 = 280
• 작은 문제들을 해결해가면 큰 문제도 해결됩니다 = 281
• 해결사인 함수 = 282
• 함수의 세부 내용 = 283
• 이미 만난 적이 있는 함수 = 284
• 더 많은 데이터를 가진 더 나은 온도 조절기를 만들어 봅시다 = 287
• 함수에 정보 전달하기 = 288
• 데이터로써의 함수 인수 = 289
• 함수는 중복 코드를 제거합니다 = 290
• 좌석 설정 함수 만들기 = 293
• 함수로 인해 날씬해진 만당고 페이지 = 294
• 만당고를 훨씬 돋보이게 하는 setSeat() 함수 = 295
• 피드백의 중요성 = 297
• 함수에서 데이터 반환하기 = 298
• 수많은 행복한 반환 값들 = 299
• 좌석의 상태 알아내기 = 303
• 좌석 상태 보여주기 = 304
• 함수와 이미지를 연결해 보세요 = 305
• 반복되는 코드는 절대로 추천할 만한 것이 못됩니다 = 306
• 컨텐츠에서 기능성을 분리해 냅시다 = 307
• 함수는 단지 데이터일 뿐입니다 = 308
• 함수를 호출하거나 참조하기 = 309
• 이벤트, 콜백, 그리고 HTML 속성 = 313
• 함수 참조를 사용한 이벤트 연결 = 314
• 구조에 나선 함수 리터럴 = 315
• 배선 작업은 어디서 하나요? = 316
• HTML 페이지의 겉모습 = 319
• 자바스크립트를 위한 일보 전진 = 320
• 7. 폼과 유효성 검증: 사용자에게 모두 고백하기 = 325
• 배너시티: 하늘에 흩날리는 광고 = 326
• 배너시티 HTML 폼 = 327
• HTML만으로는 2% 부족할 경우 = 328
• 폼 데이터에 접근하기 = 329
• 폼 필드 다음에 일련의 이벤트들이 따라옵니다 = 331
• onblur로 잃어버린 포커스 = 332
• 검증 메시지를 위해 alert 박스를 사용할 수 있습니다 = 333
• 뭔가를 체크한다는 것 = 336
• 아무것도 없지 않다는 것을 확인하기 위해 필드를 검증해 봅시다 = 337
• alert 박스 없이 검증하기 = 338
• 즘 더 세밀한 검증기 = 339
• 과유불급 - 좋은 것도 너무 지나치면 문제가 됩니다 = 340
• 길이 문제... = 341
• 데이터 길이 검증하기 = 342
• 해결된 메시지 문제 = 344
• 광고는 문제 없는데, 위치가 잘못됐군요 = 346
• 우편번호 검증하기 = 347
• 데이터 검증에서는 타이밍이 중요합니다 = 351
• 날짜 검증 = 352
• 정규 표현식은 "정규적"이지 않습니다 = 354
• 일치하는 패턴을 정의하는 정규 표현식 = 355
• 정규 표현식 해부 = 356
• 메타문자들은 하나 이상의 리터럴 문자를 표현합니다 = 357
• 정규 표현식 탐구: 수량 한정자 = 358
• 패턴 정량화 = 359
• 정규 표현식과 함께 하는 데이터 검증 = 362
• 최소와 최대값 일치시키기 = 365
• this를 사용해서 세 자리 년도 제거하기 = 367
• 운에 맡길 수는 없습니다 = 368
• 이제 들리나요? 전화번호 검증 = 369
• 방금 메일이 왔어요: 이메일 검증하기 = 370
• 예외도 하나의 규칙입니다 = 371
• 집합적으로 선택적인 문자들 일치시키기 = 372
• 이메일 검증기 만들기 = 373
• 완벽해진 배너시티 폼 = 374
• 8. 페이지와 입씨름하기: DOM으로 HTML 요리하기 = 379
• 기능은 좋긴 한데 사용하기 불편해요... 인터페이스에 관한 문제들 = 380
• alert 박스 없이 장면 묘사하기 = 381
• div를 사용해 페이지에 빈 공간 만들기 = 382
• HTML 엘리먼트에 접근하기 = 383
• HTML 내부와 연락하기 = 384
• 덜 간섭 받는 모험기 = 386
• 나무와 숲을 보기: 문서 객체 모델(DOM) = 389
• 여러분의 페이지는 DOM 노드들의 집합체입니다 = 390
• 프로퍼티를 가지고 DOM 트리 등반하기 = 393
• DOM을 사용해 노드 텍스트 변경하기 = 396
• 노드 텍스트 변경을 위한 세 가지 (안전한) 단계 = 397
• 표준에 순응하고 있는 모험기 = 401
• 더 나은 버튼을 찾아서 = 402
• 디자인이 나아지면, 즘 더 명확한 선택을 할 수 있습니다 = 403
• 노드 텍스트 교체를 재고해 봅시다 = 404
• 함수를 사용하여 노드 텍스트 대체하기 = 405
• 동적인 선택 버튼들이 훨씬 낫군요 = 406
• 쌍방향 버튼이 훨씬 낫군요 = 407
• 스타일 문제: CSS와 DOM = 408
• style 클래스 교환하기 = 409
• 세련된 버튼 = 410
• 스타일을 가미한 모험기 선택 시운전 = 411
• 버튼에 문제가 있군요: 텅빈 버튼 = 412
• 명품 스타일 조작 = 413
• 이제 이상한 버튼은 사라졌습니다 = 415
• 선택 사항이 많아질수록 복잡해집니다 = 416
• 선택 경로 추적하기 = 418
• 선택 기록을 HTML로 변환하기 = 419
• HTML 코드 양산하기 = 420
• 모험 이야기 추적하기 = 423
• 길고 긴 이상한 나라의 여행은... = 424
• 9. 데이터에 생명 불어넣기: 프랑켄쉬타인 같은 객체 = 429
• 자바스크립트로 강화된 파티 = 430
• 데이터 + 동작＝객체 = 431
• 객체는 자신만의 데이터를 소유하고 있습니다 = 432
• 점 연산자로 참조되는 객체 멤버 = 433
• 큐브 퍼즐을 위한 블로그 = 435
• 유큐브 해부 = 436
• 자바스크립트를 확장한 사용자 정의 객체 = 437
• 사용자 정의 객체 만들기 = 438
• 생성자 안에는 무엇이 들어있을까요? = 439
• Blog 객체에 생명 불어넣기 = 440
• 유큐브 1.0 = 442
• 무질서한 블로그 = 444
• 정렬해야 될 것 같네요 = 445
• 날짜를 위한 자바스크립트 객체 = 446
• 시간 계산하기 = 447
• 블로그 일자 재고해보기 = 448
• 객체 내부에 있는 객체 = 449
• 날짜는 인간한테는 유용하지 않습니다 = 451
• 객체를 텍스트로 변환하기 = 452
• 날짜의 각 부분에 접근하기 = 453
• 정렬하기 쉬워진 일자들 = 454
• 객체로서의 배열 = 456
• 배열 정렬 방법 바꾸기 = 457
• 함수 리터럴을 사용하면 정렬하는 것이 간단해집니다 = 458
• 루비와 그녀의 큐브는 행복해 하고 있군요 = 459
• 검색 기능을 제공하면 멋질 거에요 = 460
• 블로그 배열 검색하기 = 461
• 문자열 내에서의 검색: indexOf() = 463
• 블로그 배열 검색하기 = 464
• 이제 검색을 할 수 있어요 = 467
• 무작위 유큐브 = 469
• Math 객체는 조직화된 객체입니다 = 470
• Math.random을 이용해 난수 만들기 = 472
• 무작위적이긴 한데 2% 부족하군요 = 474
• 동작을 추구하는 객체 = 475
• 함수를 메소드로 변환하기 = 477
• 빛나는 새로운 블로그 객체 베일 벗기기 = 478
• 객체는 실제로 유큐브에 무엇을 제공할까요? = 479
• 유큐브 3.0! = 480
• 10. 사용자 정의 객체 만들기: 나만의 방식으로 사용자 정의 객체 만들기 = 485
• 유큐브 블로그 메소드 다시 살펴보기 = 486
• 메소드 오버로드 = 487
• 클래스 대 인스턴스 = 488
• 인스턴스는 클래스로부터 생성됩니다 = 489
• this로 인스턴스 프로퍼티에 접근해 봅시다 = 490
• 소유는 한 번만, 실행은 여러 번: 클래스 소유의 메소드들 = 491
• 클래스 레벨에서 작동하는 프로토타입을 사용하세요 = 492
• 클래스, prototype, 그리고 유큐브 = 493
• 좀 더 효율적인 유큐브 = 494
• 블로그에 싸인하기 = 496
• 클래스 프로퍼티들도 공유됩니다 = 498
• prototype으로 클래스 프로퍼티 생성하기 = 499
• 싸인 후 발송 = 501
• 중복 코드는 정말 싫어요 = 503
• 날짜 서식화 메소드 = 504
• 표준 객체 확장하기 = 505
• 사용자 정의 date 객체＝더 개선된 유큐브 = 506
• 클래스는 자신만의 메소드를 가질 수 있습니다 = 507
• 정렬 비교 함수 검사하기 = 509
• 클래스 메소드 호출하기 = 510
• 때론 한 장의 그림이 수천 가지의 블로그 단어들보다 낫습니다 = 511
• 유큐브에 이미지 합치기 = 512
• 선택적인 블로그 이미지 = 513
• 유큐브에 이미지 추가하기 = 514
• 객체로 강화된 유큐브 = 516
• 11. 버그 박멸하기: 좋은 스크립트라도 때로는 잘못될 수 있습니다 = 521
• 실 세계에서의 디버깅 = 522
• 버그 투성이인 IQ 계산기 사건 = 523
• 여러 종류의 브라우저를 사용해 봅시다 = 524
• 파이어폭스 구조대 = 526
• 여유 있어진 디버깅 = 527
• 버그 리포트가 항상 버그 소스를 가리키는 것은 아닙니다 = 528
• 정의되지 않은 변수들 = 531
• 가끔씩 문제가 되는 것은 생각보다 간단합니다 = 532
• 지능 있는 숫자들 밟아버리기 = 533
• 라디오 청취자 전화 참여 버그 사건 = 534
• 조사 착수 = 535
• 구문 유효성에 대한 질문(버그 #1) = 536
• 문제가 있는 문자열에 주목하세요 = 537
• 큰따옴표, 작은따옴표, 그리고 일관성 = 538
• 큰따옴표가 큰따옴표가 아닐 때는 이스케이프 문자를 사용하세요 = 539
• 변수만 정의되지 않는 것은 아닙니다(버그 #2) = 540
• 유주얼 서스펙트: 체크 리스트 = 541
• 모두 다 당첨이 되었습니다(버그 #3) = 542
• alert 박스 디버깅 = 543
• alert 박스로 변수 감시하기 = 544
• 잘못된 로직은 합법적이긴 하지만 이것도 버그입니다 = 546
• 당첨자가 한 명도 없군요!(버그 #4) = 550
• 성가신 alert 박스로 인해 정신이 없습니다 = 551
• 브라우저 디버깅 콘솔이 도움이 될 거에요 = 552
• 디버깅을 위한 사용자 정의 콘솔 만들기 = 553
• 여러분의 디버거 디버깅하기 = 557
• 페이지 기다리기 = 558
• 가장 성가신 에러: 런타임 = 560
• 자바스크립트 버그 삼총사 = 561
• 숫자가 아니래요 = 562
• 감시만으로는 충분치 않을 경우 = 563
• 주석은 일시적으로 코드를 무력화합니다 = 564
• 문제의 일부는 해결되었습니다 = 565
• 그림자로 감춰진 변수의 위험성 = 566
• 사건 종결! = 567
• 12. 동적인 데이터: 스킨쉽을 좋아하는 웹 애플리케이션 = 573
• 동적인 데이터에 대한 열망 = 574
• 데이터로 구동되는 유큐브 = 575
• Ajax는 커뮤니케이션 그 자체입니다 = 577
• 만능 특효약 HTML: XML = 578
• XML은 여러분의 데이터에 대해 여러분만의 방식으로 태그를 만들게 합니다 = 579
• XML은 단지 텍스트일 뿐이에요 = 580
• XML + HTML＝XHTML = 581
• XML과 유큐브 블로그 데이터 = 583
• 유큐브에 Ajax 주입하기 = 586
• Ajax 구조대인 자바스크립트: XMLHttpRequest = 588
• XMLHttpRequest는 꽤 복잡하군요 = 589
• get과 post = 590
• Get일까 Post일까? XMLHttpRequest를 사용한 요청 = 591
• XMLHttpRequest 좀 더 쉽게 만들기 = 592
• Ajax 요청 이해하기 = 595
• 서버의 영역으로 들어가는 요청 = 596
• 요청 객체로 시작되는 상호작용하는 페이지 = 599
• 일 끝나면 호출하세요 = 600
• 쉴새없이 응답을 처리합시다 = 601
• DOM 구조대 = 602
• 데이터로 구동되는 유큐브 = 607
• 기능 장애 버튼들 = 609
• 버튼들도 데이터를 필요로 합니다 = 610
• 시간 절약용 웹 기반 첨가물 = 613
• 블로그 데이터 쓰기 = 614
• 이번에는 PHP가 구조대로 왔습니다 = 615
• PHP 역시 도움이 필요합니다 = 617
• PHP 스크립트에 데이터 넣기 = 618
• 마음을 가다듬읍시다: 서버에 블로그 데이터 올리기 = 621
• 블로깅이 쉬워졌어요 = 625
• 유큐브를 좀 더 쓸만하게 만들어 봅시다 = 626
• 사용자들을 위한 자동 완성 필드 = 627
• 반복적인 작업을 한다구요? 함수를 사용하는 건 어때요? = 628
• 블로그 생산성이 눈에 띄게 향상됐어요 = 630