목차 일부

서문
   이 책을 사용하는 방법 ... 25
   이 책은 누구를 위한 책일까요? ... 26
   아마 지금쯤 여러분 머리 속에는 이런 생각이 지나가고 있겠죠? ... 27
   여러분의 머리는 이런 식으로 돌아갑니다 ... 27
   초인지: 생각하는 것에 대해 생각하는 것 ... 29
   이 책에서는 이렇게 했습니다 ... 30
   마지막으로 알...

더보기

목차 전체

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

더보기 닫기