목차 일부

옮긴이글 ... xvi
머릿말 ... xvii
서문 ... xx
1부 시작하기
   1장 Prototype과 Scriptaculous 소개
      1.1 간단하게 살펴보는 Ajax의 역사 ... 4
        1.1.1 Ajax 등장 이전의 시대 ... 5
        1.1.2 개척자의 단계 ... 6
        1.1.3 이주자들의 도착 ....

더보기

목차 전체

옮긴이글 ... xvi
머릿말 ... xvii
서문 ... xx
1부 시작하기
   1장 Prototype과 Scriptaculous 소개
      1.1 간단하게 살펴보는 Ajax의 역사 ... 4
        1.1.1 Ajax 등장 이전의 시대 ... 5
        1.1.2 개척자의 단계 ... 6
        1.1.3 이주자들의 도착 ... 7
        1.1.4 문명화 ... 8
      1.2 Prototype이란? ... 8
        1.2.1 자바스크립트 언어의 특징 ... 9
        자바스크립트 객체 클래스 ... 9
        자바스크립트의 함수 ... 10
        자바스크립트의 배열 ... 10
        자바스크립트의 문자열과 숫자 ... 11
        1.2.2 웹 브라우저의 특징들 ... 11
        Document Object Model ... 12
        HTML 폼 ... 12
        자바스크립트의 이벤트 ... 12
        Ajax 유틸리티 ... 13
      1.3 Scriptaculous란? ... 13
        1.3.1 시각적인 효과 ... 13
        1.3.2 드래그 앤 드롭 ... 14
        1.3.3 컴포넌트 ... 15
        1.3.4 유틸리티와 테스팅 프레임워크 ... 15
      1.4 Prototype과 Scriptaculous의 적용 ... 16
        1.4.1 평점 예제 소개 ... 16
        컴포넌트 사용하기 ... 17
        사용자 인터페이스의 초기화 ... 18
        이벤트 핸들러 추가 ... 20
        비동기 방식으로 HTTP 호출하기 ... 20
        1.4.2 Prototype과 Scriptaculous 추가하기 ... 24
        DOM 헬퍼 메소드 ... 24
        이벤트 핸들러 ... 24
        더 쉬워진 Ajax 요청 ... 26
        사용자 인터페이스에 세련미를 추가하기 ... 28
      1.5 요약 ... 31
   2장 QuickGallery 소개
      2.1 설계와 구현 ... 34
        2.1.1 애플리케이션에 대한 요구사항 ... 35
        2.1.2 파일시스템 네비게이션 ... 36
        폴더 내의 컨텐트 검사 ... 37
        현재 위치 메뉴 생성 ... 39
        2.1.3 썸네일 이미지 생성 ... 40
        2.1.4 조각들을 합치기 ... 42
        2.1.5 HTML 생성 ... 46
      2.2 전통적인 웹 애플리케이션 모델에 대한 평가 ... 50
        2.2.1 링크, 폼 그리고 전체 페이지 갱신 ... 51
        2.2.2 전통적인 웹 애플리케이션과 QuickGallery ... 52
        디렉터리 변경 ... 52
        클로즈업 모드로 이미지 보기 ... 53
      2.3 요약 ... 54
   3장 Prototype으로 Ajax를 단순화하기
      3.1 Ajax 적용을 위한 재설계 ... 56
        3.1.1 비동기적인 요청의 설계 ... 57
        컨텐트 중심적인 Ajax 활용 ... 58
        스크립트 중심적인 Ajax ... 59
        데이터 중심적인 Ajax ... 60
        3.1.2 Prototype의 Ajax 관련 클래스 ... 61
        Ajax.Base ... 61
        Ajax.Request ... 62
        Prototype.js의 코딩 스타일 ... 63
        Ajax.Request의 선택사항 옵션들 ... 65
      3.2 XML과 Ajax 함께 사용하기 ... 68
        3.2.1 XML 응답 설계하기 ... 68
        3.2.2 서버 측 코드의 수정 ... 69
        3.2.3 클라이언트 측 코드의 작성 ... 71
        서버에 데이터를 요청하기 ... 73
        응답을 풀어놓기 ... 73
        새로운 데이터를 디스플레이 하기 ... 76
        현재 위치 메뉴 렌더링 ... 77
        하위폴더 목록의 렌더링 ... 78
        썸네일 이미지의 렌더링 ... 79
        모두를 조합하기 ... 80
      3.3 JSON과 Ajax 함께 사용하기 ... 81
        3.3.1 서버 측 코드의 수정 ... 82
        3.3.2 클라이언트 코드의 수정 ... 83
      3.4 요약 ... 85
   4장 Prototype의 고급 Ajax 기능 사용하기
      4.1 Prototype의 고급 Ajax 클래스들 ... 88
        4.1.1 Ajax.Updater ... 89
        4.1.2 Ajax.PeriodicalUpdater ... 90
        4.1.3 Ajax.Responders ... 90
      4.2 HTML과 Ajax 함께 사용하기 ... 91
        4.2.1 HTML 조각 생성하기 ... 91
        4.2.2 클라이언트 측 코드의 수정 ... 92
        4.2.3 복수의 DOM 엘리먼트 업데이트하기 ... 93
        문제를 요약하기 ... 94
        응답에 스크립트 추가하기 ... 95
        사용자 정의(custom) 헤더로 응답하기 ... 99
        4.2.4 자동으로 컨텐트 업데이트 하기 ... 101
      4.3 데이터 중심적인 Ajax와 컨텐트 중심적인 Ajax의 비교 ... 103
        4.3.1 개발 편의성에 대한 고려 ... 104
        4.3.2 개발툴들에 적합한가 ... 106
        4.3.3 퍼포먼스의 비교 ... 106
        4.3.4 미래에도 경쟁력이 있는 솔루션 찾기 ... 112
      4.4 요약 ... 114
2부 Scriptaculous 빨리 익히기
   5장 Scriptaculous 효과
      5.1 단기성공과제(Quick Win) : 단 한 줄의 코드로 효과 추가하기 ... 119
      5.2 Scriptaculous와 예제들의 설정 ... 121
        5.2.1 Scriptaculous 구하기 ... 122
        5.2.2 Scriptaculous 라이브러리 로딩하기 ... 123
      5.3 Scriptaculous가 제공하는 효과의 유형 ... 124
      5.4 효과에 대한 이해 ... 125
        5.4.1 effects laboratory ... 125
        5.4.2 공통적인 효과 옵션 ... 128
        효과의 지속기간 설정 ... 129
        시작점과 종료점 제어하기 ... 129
        프레임 그리기에 영향을 주기 ... 129
        효과의 변화를 제어하기 ... 130
        병렬 효과 동기화하기 ... 130
        효과들을 순차적으로 실행하기 ... 130
        5.4.3 코어 효과 둘러보기 ... 130
        불투명(opacity) 효과 ... 130
        Highlight 효과 ... 132
        Scale 효과 ... 132
        MoveBy 효과 ... 135
        5.4.4 콤비네이션 효과에 알아보기 ... 136
        Fade와 Appear 효과 ... 136
        BlindUp과 BlindDown 효과 ... 137
        SlideUp과 SlideDown 효과 ... 138
        Shrink와 Grow 효과 ... 138
        Puff 효과 ... 139
        DropOut 효과 ... 139
        SwitchOff 효과 ... 139
        Squish 효과 ... 139
        Fold 효과 ... 140
        Shake 효과 ... 140
        Pulsate 효과 ... 140
      5.5 Show와 Hide 효과를 쉽게 제어하기 ... 140
        5.5.1 Effect.toggle() 유틸리티 함수 ... 141
        5.5.2 Toggle Pane 위젯 ... 142
      5.6 transition으로 작업하기 ... 149
        5.6.1 내장 transition 사용하기 ... 149
        5.6.2 Transition Mapper 소개 ... 150
        5.6.3 여러분의 transition을 작성하기 ... 153
      5.7 효과가 진행되는 동안에 제어권 확보하기 ... 155
      5.8 효과의 취소 ... 156
      5.9 복수 효과의 제어 ... 158
        5.9.1 동시에 효과를 실행하기 ... 158
        5.9.2 순차적으로 효과를 실행하기 ... 159
        글로벌 queue의 사용 ... 160
        우리가 이름 붙인 queue를 사용하기 ... 161
        Queues Lab 페이지 살펴보기 ... 162
      5.10 요약 ... 164
   6장 Scriptaculous 컨트롤
      6.1 이번 장을 위한 예제프로그램의 사용 ... 166
      6.2 in-place text editor ... 168
        6.2.1 in-place text editor 생성하기 ... 168
        InPlaceEditor의 스크립트 제어 ... 171
        6.2.2 InPlaceEditor의 옵션 ... 172
        InPlaceEditor Lab 페이지 ... 174
        에디터의 외양을 제어하기 ... 175
        CSS와 DOM ID 옵션을 명시하기 ... 176
        콜백 옵션 사용하기 ... 178
        서버로부터 텍스트를 전송 받아 로딩하기 ... 180
        6.2.3 몇몇 사용예제 ... 181
        예제를 위한 서버 측 설정 ... 181
        InPlaceEditor로 서버 측 검증작업 하기 ... 182
        InPlaceEditor와 서버 측 재포맷팅 수행하기 ... 187
      6.3 InPlaceCollectionEditor ... 190
        6.3.1 InPlaceCollectionEditor 생성 ... 190
        6.3.2 InPlareCollectionEditor 옵션 ... 193
      6.4 Ajax autocompleter 컨트롤 ... 195
        6.4.1 Ajax autocompleter 생성하기 ... 196
        6.4.2 Ajax.Autocompleter의 옵션 ... 199
        서버 측 파라미터를 명시하기 ... 200
        autocompleter의 실행을 제어하기 ... 201
        사용자가 정보를 받도록 유지하기 ... 201
        여러분의 코드가 정보를 받도록 유지하기 ... 202
        텍스트 필드에 복수의 자동 완성 아이템을 허용하기 ... 202
        6.4.3 SF 영화 autocompleter 서블릿 ... 203
        MoviesAutocompleterServlet 클래스 ... 204
        정렬되지 않은 목록을 구성하는 JSP 페이지 ... 207
        6.4.4 선택 메뉴에 스타일 적용하기 ... 208
      6.5 Scriptaculouslocal autocompleter 컨트롤 ... 211
        6.5.1 로컬 autocompleter의 생성 ... 211
        6.5.2 Autocompleter.Local의 옵션 ... 214
        얼마나 많은 선택항목이 보여질지 제어하기 ... 215
        문자열의 시작부분부터 매칭하는 것 이상의 방법 ... 216
        대소문자를 구분하여 매칭 제어하기 ... 217
      6.6 Slider 컨트롤 ... 218
        6.6.1 slider 컨트롤 생성하기 ... 219
        6.6.2 Slider와 이미지를 함께 사용하기 ... 222
        6.6.3 Control.Slider 옵션 ... 225
        컨트롤의 방향 설정 ... 226
        값의 범위 설정하기 ... 227
        컨트롤을 활성화／비활성화 하기 ... 228
        값이 변경될 때 통지 받기 ... 229
        6.6.4 보다 흥미진진한 예제 ... 230
        HTML 엘리먼트의 생성과 스타일 적용 ... 232
        슬라이더의 범위를 설정하기 ... 233
        슬라이더의 값을 디스플레이하기 ... 234
      6.7 요약 ... 235
   7장 Scriptaculous드래그 앤 드롭
      7.1 이번 장을 위한 예제코드 ... 240
      7.2 드래그 하기 ... 241
        7.2.1 엘리먼트를 draggable로 만들기 ... 241
        7.2.2 Draggable 옵션 ... 244
        엘리먼트를 원래의 위치로 되돌리기 ... 245
        그리드 내에서만 이동이 가능하도록 제한하기 ... 246
        축을 기준으로 이동을 제한하기 ... 248
        엘리먼트의 중첩순서에 영향 주기 ... 248
        ghosting 기능 활성화시키기 ... 249
        드래그 핸들을 사용하기 ... 250
        움직임에 대해 통지를 받기 ... 251
        효과의 변경 ... 252
      7.3 드래그한 아이템을 드롭하기 ... 253
        7.3.1 드롭 타겟을 정의하기 ... 253
        7.3.2 Drop 타겟 옵션 ... 254
        시각적인 단서를 제공하기 ... 255
        draggable이 drop 타겟에 의해 인지되는 것을 제한하기 ... 256
        임박한 드롭에 대해 통지 받기 ... 258
        드롭에 대해 통지 받기 ... 259
        7.3.3 드래그 앤 드롭 예제 ... 260
      7.4 드래그 앤 드롭으로 정렬하기 ... 265
        7.4.1 sortable 엘리먼트의 생성 ... 266
        7.4.2 Sortable 엘리먼트의 옵션 ... 269
        정렬될 것을 명시하기 ... 270
        드래그의 동작을 제어하기 ... 273
        정렬될 엘리먼트를 제한하기 ... 274
        정렬 가능한 엘리먼트들 사이에서 아이템을 이동하기 ... 275
        수직방향이 아닌 정렬 가능 엘리먼트 생성하기 ... 277
        정렬 가능한 엘리먼트들을 중첩시키기 ... 280
        스크롤 제어하기 ... 281
        통지를 받기 ... 283
        7.4.3 정렬 가능한 엘리먼트를 직렬화하기 ... 284
        ID 매칭 패턴을 커스터마이징 하기 ... 288
      7.5 요약 ... 290
3부 Prototype에 대해 상세히 알아보기
   8장 객체에 대한 모든 것
      8.1 스크래치패드 애플리케이션 소개 ... 294
      8.2 Object 타입 ... 296
        8.2.1 Object 생성 ... 297
        복잡한 Object 선언 ... 298
        JSON을 사용한 간결한 객체 선언 ... 299
        8.2.2 prototype 속성을 사용하여 객체 정의하기 ... 301
        8.2.3 객체에 대한 리플렉팅 ... 304
      8.3 Object와 Prototype ... 308
        8.3.1 Class.create()를 사용하여 생성자를 간단하게 ... 308
        8.3.2 Object.extend() 메소드로 객체 계층구조 선언 ... 310
        8.3.3 간단한 객체 합치기 ... 310
        8.3.4 Object 계층을 모델링하기 ... 314
        단일 상속 ... 315
        믹스인(mixin)을 이용하는 다중 상속 ... 319
      8.4 요약 ... 324
   9장 함수를 가지고 놀아보기
      9.1 자바스크립트 함수 ... 326
        9.1.1 함수의 선언 ... 327
        9.1.2 함수의 호출 ... 329
        9.1.3 Function 컨텍스트 ... 331
        9.1.4 Function 클로저 ... 333
        9.1.5 언제 컨텍스트와 클로저를 사용하는가 ... 336
      9.2 Prototype.js로 함수를 확장하기 ... 339
        9.2.1 bind() 메소드 ... 339
        9.2.2 bindAsEventListener() 메소드 ... 340
      9.3 요약 ... 342
   10장 배열(Array)로 보다 쉽게
      10.1 Array에 대한 소개 ... 344
      10.2 내장 자바스크립트 Array ... 345
        10.2.1 Array의 length를 사용하여 반복연산하기 ... 345
        10.2.2 Array를 스택처럼 다루기: pop(), push(), shift(), unshift() ... 346
        10.2.3 Slice(), splice(), concat()를 사용하여 자르고 변경하기 ... 348
        10.2.4 reverse()와 sort()를 사용하여 순서변경하기 ... 350
        10.2.5 Array와 String:join()과 split() ... 352
        10.2.6 다른 Array 유사 객체 ... 352
      10.3 Prototype.js와 Array ... 353
        10.3.1 first(), last(), indexOf()를 사용하여 엘리먼트의 위치에 접근하기 ... 354
        10.3.2 clear(), compact(), without(), flatten()을 사용하여 Array 수정하기 ... 354
      10.4 Enumerable 객체의 메소드들 ... 356
        10.4.1 all(), any(), include()를 사용하여 배열을 검색하기 ... 358
        10.4.2 detect(), findAll(), reject(), grep(), partition()을 사용하여 배열 필터링 ... 360
        10.4.3 pluck(), invoke() 그리고 collect()로 복잡한 배열 엘리먼트 다루기 ... 364
        10.4.4 inject()와 zip()을 사용하여 복잡한 배열 생성하기 ... 369
        10.4.5 max(), min() 그리고 sortBy()를 사용하여 숫자기준으로 정렬하기 ... 372
        10.4.6 DOM 컬렉션 다루기 ... 375
      10.5 Hash와 ObjectRange로 작업하기 ... 376
        10.5.1 Hash 객체 사용하기 ... 376
        SH를 사용하여 Hash 생성하기 ... 377
        keys()와 values()를 사용하여 Hash에 대해 반복연산하기 ... 379
        toQueryString()으로 Hash를 조작하기 ... 380
        10.5.2 ObjectRange 사용하기 ... 381
      10.6 요약 ... 382
   11장 브라우저로 돌아가서
      11.1 DOM 메소드들에 대한 집중 강좌 ... 384
        11.1.1 트리구조 탐색하기 ... 386
        11.1.2 트리 구조 수정하기 ... 390
      11.2 Prototype과 DOM ... 393
        11.2.1 간단한 헬퍼 함수들 ... 394
        11.2.2 Element 객체 ... 396
        11.2.3 Insertion 객체 ... 403
        11.2.4 Position 객체 ... 405
      11.3 Event 객체의 확장 ... 411
      11.4 HTML 폼 조작하기 ... 413
      11.5 요약 ... 419
4부 고급수준의 주제들
   12장 실전에서의 Prototype과 Scriptaculous
      12.1 Quickfallery 애플리케이션에 대한 요구사항 ... 424
      12.2 슬라이드쇼 에디터 개발하기 ... 425
        12.2.1 페이지 레이아웃의 수정 ... 426
        12.2.2 드래그 앤 드롭 전략의 정의 ... 432
        12.2.3 드래그 앤 드롭의 구현 ... 433
        12.2.4 에디팅 가능한 캡션을 제공하기 ... 437
      12.3 Ajax 기반의 저장기능 추가하기 ... 440
        12.3.1 저장 포맷 정의하기 ... 440
        12.3.2 슬라이드쇼 저장하기 ... 441
        12.3.3 서버에서 컨텐트를 로딩하기 ... 444
      12.4 툴바 생성하기 ... 447
      12.5 슬라이드쇼 플레이어 구현하기 ... 450
        12.5.1 사용자 인터페이스 명시하기 ... 451
        12.5.2 슬라이드쇼 플레이어의 구현 ... 453
        12.5.3 플레이어 실행하기 ... 456
      12.6 모든 부분을 서로 합치기 ... 460
      12.7 요약 ... 478
   13장 Prototype, Scriptaculous 그리고 레일스
      13.1 자바스크립트 생성하기 ... 482
        13.1.1 Prototype과 레일스 스타일로 쓴 Hello World ... 483
        13.1.2 레일스 헬퍼 소개 ... 485
      13.2 Ajax 헬퍼들 ... 487
        13.2.1 표준 옵션 설정 ... 488
        URL 지정하기 ... 488
        페이지 업데이트 제어하기 ... 488
        자바스크립트 콜백 지정하기 ... 489
        13.2.2 Ajax 헬퍼 둘러보기 ... 490
        link_to_remote ... 491
        form_remote_tag ... 491
        observe_field ... 493
        observe_form ... 494
periodically_call_remote ... 495
        remote_function ... 496
      13.3 Scriptaculous 헬퍼 ... 497
        13.3.1 비주얼 효과 만들기 ... 498
        13.3.2 인 플레이스 에디터(in-place editor) 구현하기 ... 499
        13.3.3 자동완성 기능 추가하기 ... 501
        13.3.4 드래그 앤 드롭 구현하기 ... 503
        드래그 가능한 객체와 드롭 가능한 객체 만들기 ... 504
        드래그 앤 드롭 설정하기 ... 506
        리스트 엘리먼트를 정렬 가능하게 하게 ... 506
      13.4 자바스크립트 써? 말어? ... 509
      13.5 다음 단계: RJS ... 510
        13.5.1 다중 업데이트 문제 ... 510
        13.5.2 Hello from RJS ... 512
        13.5.3 다중 업데이트와 RJS ... 514
        13.5.4 RJS 살펴보기 ... 515
        엘리먼트 프록시 사용하기 ... 516
        클래스 프록시 사용하기 ... 517
        컬렉션 사용하기 ... 517
        임의의 자바스크립트 추가하기 ... 518
        13.5.5 RJS를 인라인으로 렌더링하기 ... 519
      13.6 요약 ... 520
부록 A HTTP 입문
   A.1 왜 HTTP에 관심을 가져야 하는가? ... 522
   A.2 HTTP란 무엇인가? ... 523
      A.2.1 리소스와 URL ... 523
      A.2.2 무상태 ... 525
   A.3 요청의 형태에는 어떤 것이 있나? ... 525
   A.4 HTTP 메시지 포맷 ... 526
      A.4.1 요청 메시지 포맷 ... 527
      A.4.2 응답 메시지 포맷 ... 529
   A.5 Ajax 접속이란? ... 530
      A.5.1 Ajax에서 요청 생성하기 ... 531
      A.5.2 Ajax를 통해 응답 받기 ... 532
      A.5.3 요청 메시지 실습 페이지 ... 533
부록 B HTTP 트래픽 측정
   B.1 HTTP 트래픽 데이터 잡아내기 ... 539
      B.1.1 모질라 LiveHTTPHeaders ... 541
      B.1.2 마이크로소프트 Fiddler ... 542
   B.2 HTTP 트래픽 데이터 파싱하기 ... 544
부록 C 톰캣 5.5 설치와 실행
   C.1 배포본 가져와서 압축 풀기 ... 551
   C.2 JAVA_HOME 설정하기 ... 552
   C.3 애플리케이션 컨텍스트 설정하기 ... 553
   C.4 톰캣 시작하기 ... 554
   C.5 톰캣 컨텍스트 관리하기 ... 555
부록 D PHP 설치와 실행
   D.1 시스템 요구사항 ... 560
      D.1.1 PHP 버전 ... 560
      D.1.2 웹 서버 ... 560
      D.1.3 운영체제 ... 561
      D.1.4 라이브러리 ... 561
   D.2 설치 ... 561
      D.2.1 리눅스에 PHP 설치하기 ... 562
      D.2.2 Mac OS X에 PHP 설치하기 ... 564
      D.2.3 윈도우에 PHP 설치하기 ... 566
   D.3 QuickGallery 설정하기 ... 569
부록 E 서버 측 기술 포팅
   E.1 요청 헤더 읽기 ... 573
      E.1.1 PHP ... 574
      E.1.2 자바 서블릿 API ... 574
      E.1.3 .NET ... 575
      E.1.4 루비온레일스 ... 575
   E.2 응답 헤더 더하기 ... 576
      E.2.1 PHP ... 576
      E.2.2 자바 서블릿 API ... 576
      E.2.3 Java Server Pages ... 577
      E.2.4 .NET ... 577
      E.2.5 루비온레일스 ... 578
   E.3 POST 요청 바디 읽기 ... 578
      E.3.1 PHP ... 579
      E.3.2 자바 서블릿 API ... 579
      E.3.3 .NET ... 579
      E.3.4 루비온레일스 ... 580
   E.4 요약 ... 580

더보기 닫기