Detail View

재미있고 쌍방향적인 웹 페이지 제작 여행을 위한 지침서. 변수, 함수, 루프 같은 기본적인 웹 프로그래밍 기술부터 폼 유효성 검증, DOM 조작, 커스텀 객체, 디버깅 심지어는 Ajax까지 자바스크립트의 핵심사항들을 흥미롭게 다루고 있다.

뇌보다 빠르게 반응하는 웹 페이지를 만들어보자

HTML과 CSS를 사용한 웹 페이지 작성에서 이제는 동적인 웹 애플리케이션을 만들도록 도약할 준비가 되었나요? 그렇다면 여기서 시작하세요. 이 책은 재미있고 쌍방향적인 웹 페이지 제작 여행을 위한 지침서입니다. 변수, 함수, 루프 같은 기본적인 웹 프로그래밍 기술부터 폼 유효성 검증, DOM 조작, 커스텀 객체, 디버깅 심지어는 Ajax까지 자바스크립트의 핵심사항들을 다루고 있습니다. 자 준비하세요. 대화형 웹 사이트가 저기 가고 있습니다.

- 대화형 웹 페이지로 사용자 경험을 향상시키세요.
- 지금 당장 후다닥 자바스크립트로 작업해 봅시다.
- 이벤트 처리를 무서워하지 마세요. 약간 아플 뿐입니다.
- 패턴에 맞춤으로써 폼의 유효성 검증 방법을 이해하세요.
- 여러분의 커스텀 디버그 콘솔을 사용해서 디버깅 하세요.
- 객체지향, 데이터-기반 블로그 퍼즐을 풀어보세요.
- DOM을 사용해서 웹 페이지를 조작해보세요.
- 온라인 어드벤처에서 여러분이 결정한 사항들을 추적해보세요.
- 퍼즐과 연습문제에 집중해 봅시다.

Information Provided By: :

목차
서문
 이 책을 사용하는 방법 = 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