Part 1 Ajax 기초 프로그래밍 Chapter 0 예계 실행을 위한 프로그램 설치 1. 프로그램 설치 ... 16 1.1 J2SDK 1.5 설치 ... 16 1.2 환경 변수 설정 ... 19 2. 소스 코드 복사 및 실행 테스트 ... 20 2.1 각 장별 소스 코드의 위치 및 실행 방법 ... 21 Chapter 1 Ajax란 무엇인가? 1. Ajax 방식 ... 22 1.1 기존 방식의 사이트 ... 23 1.2 Ajax 방식의 사이트 및 Ajax 방식의 특징 ... 24 2. Ajax의 주요 구성 요소 ... 26 Chapter 2 XMLHttpRequest 객체 1. XMLHttpRequest 객체를 사용한 데이터 송수신 ... 28 1.1 XMLHttpRequest 프로그래밍 순서 ... 29 1.2 XMLHttpRequest 객체 구하기 ... 29 1.3 웹 서버에 요청 전송하기 ... 30 1.4 서버 응답 처리하기 : onreadystatechange 프로퍼티와 콜백 함수 ... 32 1.5 코드가 실행되는 순서 ... 33 1.5 XMLHttpRequest 객체의 상태 : readyState ... 34 1.7 서버로부터의 응답 상태 : status／statusText ... 36 1.8 응답 데이터 사용하기 : responseText ... 37 1.9 서버의 응답 텍스트를 alert로 출력해 주는 예제 ... 38 2. 동기 방식과 비동기 방식의 실행 차이 ... 43 3. 파라미터의 한글 처리 방법 ... 44 4. XMLHttpRequest 모듈 만들기 : httpRequest.js ... 45 4.1 httpRequest.js 모듈 사용 예제 : 안녕하세요! ... 47 Chapter 3 innerHTML을 이용한 화면 동적 변경 1. innerHTML 속성을 사용한 화면 변경 ... 50 1.1 innerHTML 속성을 사용하는 기본 코드 ... 51 1.2 1초마다 현재 시간을 출력해 주는 예 ... 52 2. 웹 서버 응답 결과를 innerHTML을 사용하여 반영 ... 54 2.1 응답 텍스트로 생성한 HTML 코드를 그대로 반영하기 ... 54 2.2 CSV 양식의 응답 텍스트를 분석해서 화면에 출력하기 ... 56 3. 자바스크립트 디버깅 콘솔 만들기 ... 60 Chapter 4 제시어 기능 구현하기 1. 제시어 기능 흐름 ... 64 2. 서버 측 제시어 기능 구현 ... 65 3. 클라이언트 측 제시어 기능 구현 ... 66 3.1 입력한 검색어 서버에 전송하기 ... 67 3.2 서버에서 받은 제시어 목록 출력하기 ... 70 3.3 제시어를 선택한 경우의 처리 ... 73 3.4 완전한 suggestclient.html 코드 ... 75 Part 2 DOM, XML, 자바스크립트 객체 Chapter 5 DOM(Document Object Model)과 XML 1. DOM(Document Object Model)과 HTML／XML ... 80 1.1 XML 문서와 DOM 트리 구조 ... 80 1.2 HTML 문서와 DOM 트리 구조 ... 82 2. 주요 DOM API ... 84 2.1 DOM API를 사용하여 노드에 접근하기 ... 84 (1) Node 인터페이스의 주요 프로퍼티 ... 85 (2) Document 인터페이스의 주요 프로퍼티 및 함수 ... 88 (3) Element 인터페이스의 주요 프로퍼티 및 함수 ... 91 (4) DOM API를 사용해서 HTML 문서의 정보를 탐색하는 예제 ... 92 2.2 DOM API를 사용하여 문서 구조를 변경하기 ... 95 (1) Document 인터페이스의 Element 노드 생성 함수 ... 95 (2) Node 인터폐이스의 DOM 트리 변경 관련 함수 ... 96 (3) DOM API를 사용하여 HTML 화면 변경하는 예제 ... 99 3. XML 응답 사용하기 ... 100 3.1 서버에서 XML 응답 생성하기 ... 100 3.2 responseXML로 XML 응답 읽어 오기 ... 102 4. XSL／T를 사용하여 XML을 HTML로 변환하기 ... 104 Chapter 6 자바스크립트 객체ㆍJSON 표기법 1. prototype을 사용한 자바스크립트 클래스 만들기 ... 109 2. Object를 사용한 개별 객체에 프로퍼티 확장 ... 113 3. JSON 표기법 ... 114 3.1 JSON 표기법을 사용한 클래스 정의 ... 116 4. 자바스크립트에서 패키지 정의하기 ... 117 5. 클래스로 XMLHttpRequest 모듈 만들기 ... 118 6. 응답 결과를 자바스크립트 객체로 저장하기 ... 124 6.1 XML 응답을 객체로 변환 ... 124 6.2 JSON 응답을 객체로 변환 ... 125 6.3 XMLㆍJSON 응답을 객체로 변환 ... 128 6.4 JSON 표기법 응답 생성시 주의점 ... 130 Chapter 7 Ajax로 구현한 댓글 1. 댓글 테이블 생성 ... 133 2. 목록 및 폼 출력 위한 HTML 코드 ... 134 3. 댓글 목록 읽기 ... 136 4. 댓글 쓰기 ... 142 5. 댓글 수정하기 ... 146 6. 댓글 삭제하기 ... 150 7. DB 클래스 소스 코드 ... 153 Part 3 이벤트, CSS 드래그&드롭 Chapter 8 이벤트 처리 1. 이벤트 처리 방식과 이벤트 대상 ... 156 1.1 고전 방식의 이벤트 처리 ... 156 1.2 이벤트 리스너 방식 처리 ... 157 1.3 이벤트 리스너 관련 모듈 만들기 ... 159 1.4 이벤트 구하고 이벤트 대상 찾기 ... 161 2. 마우스 이벤트 ... 164 2.1 마우스 이벤트의 종류 ... 164 2.2 마우스 이벤트 발생 위치 구하기 ... 167 2.3 마우스 클릭 버튼 판별하기 ... 169 2.4 마우스 이벤트 관련 모듈 추가 ... 170 3. 키보드 이벤트 ... 173 4. 이벤트 흐름 ... 175 4.1 이벤트 전파 중지시키기 ... 179 5. 이벤트 핸들러의 this 문제와 처리 방법 ... 182 Chapter 9 CSS 조작하기 1. CSS 스타일 변경하기 ... 189 1.1 style 프로퍼티를 사용한 스타일 변경 ... 189 1.2 className 프로퍼티를 사용한 CSS 클래스 변경 ... 192 2. 크로스 브라우저 투명 처리 코드 ... 194 3. CSS 스타일 값 구하기 문제 및 해결 방법 ... 197 4. 요소의 위치와 크기 ... 202 Chapter 10 드래그 구현 1. 드래그 구현 ... 209 1.1 단순 드래그를 지원하는 SimpleDragSource 모듈 작성 ... 211 2. 드래그 & 드롭 구현 ... 215 2.1 DNDManager 클래스 ... 216 2.2 DropTarget 클래스 ... 220 2.3 DragSource 클래스 ... 221 2.4 드래그 & 드롭 예제 ... 223 Part 4 MVC 패턴 Chapter 11 자바스크립트에서 MVC 패턴 구현하기 1. MVC 패턴이란 ... 228 2. MVC 패턴의 구현 ... 229 2.1 모델의 구현 : CheckButtonModel ... 230 2.2 컨트롤러의 구현 : CheckButton ... 234 2.3 뷰의 구현 : CheckButtonUI ... 237 2.4 CheckButton 컴포넌트 사용 ... 240 2.5 새로운 UI의 추가 : CheckButtonUI2 ... 242 Chapter 12 MVC 패턴을 적용한 ComboBox 컴포넌트 만들기 1. CSS 레이어를 해치지 않는 ComboBox 컴포넌트 ... 246 1.1 모델 : ComboBoxItem과 ComboBoxModel 구현 ... 248 1.2 컨트롤러 : ComboBox 구현 ... 252 1.3 뷰 : ComboBoxUI 구현 ... 254 1.4 ComboBox 컴포넌트 사용하기 ... 260 Part 5 보안 Chapter 13 XMLHttpRequest와 보안 문제와 프록시 1. XMLHttpRequest의 접속 보안 규칙 ... 266 2. 프록시를 사용한 외부 사이트 접속 문제 해결 방법 ... 270 2.1 JSP로 구현한 프록시 ... 271 2.2 PHP로 구현한 프록시 ... 274 Part 6 Ajax 예제 Chapter 14 네이버 Open APl를 사용한 검색 서비스 제공 1. 네이버 Open API ... 278 1.1 키값 받기 ... 279 1.2 서버에 쿼리 전송하는 방법 ... 279 1.3 검색 결과 XML 문서의 구조 ... 280 2. 네이버 오픈 API를 사용한 검색 서비스 구현 ... 282 2.1 프로그램 구조 ... 283 2.2 서버 프록시 프로그램 ... 284 2.3 클라이언트 HTML 코드 ... 285 2.4 naversearch.js 자바 스크립트 모듈 ... 287 (1) ResultView 클래스 ... 287 (2) NaverSearch 클래스 ... 290 2.5 ajax.js의 수정된 부분 ... 298 2.6 PHP로 구현한 프록시 ... 300 Chapter 15 연속된 〈select〉 선택 처리를 위한 DoubleSelect 모듈 1. 연속된 선택 : 기존 방식과 Ajax 방식 구현 ... 302 2. Doubleselect 모듈 ... 304 Chapter 16 Ajax로 구현한 채팅 1. 채팅 프로그램의 구성 ... 310 2. 서버 측 프로그램 ... 311 2.1 테이블 생성 ... 312 2.2 로그인／로그아웃 처리 ... 312 2.3 메시지 전송 처리 ... 313 2.4 메시지 로딩 처리 ... 314 3. 클라이언트 모델 부분 : chat.ChatModel 클래스 ... 317 3.1 로그인／로그아웃 처리 부분 ... 317 3.2 메시지 로딩 부분 ... 319 3.3 메시지 전송 부분 ... 320 3.4 컨트롤러에 이벤트를 전달하는 notify 함수 ... 321 4. 클라이언트 컨트롤러 부분 : chat.Chat 클래스 ... 322 5. 클라이언트 뷰 부분 : chat.ChatUI 클래스 ... 324 5.1 화면 생성 부분 ... 324 5.2 로그인 처리 부분 ... 327 5.3 메시지 입력과 로딩 처리 부분 ... 327 5.4 로그아웃 처리／로그인 창 제어／대화 창 제어／에러 메시지 출력 부분 ... 328 6. 전체적인 실행 흐름 ... 330 7. chat.js 사용 예제 및 실행 결과 ... 332 Chapter 17 구글 개인화 페이지에 앨범 모듈 만들기 1. 구글 개인화 페이지 모듈 만들기 ... 334 1.1 구글 베이스를 사용하여 모듈 만들기 ... 336 1.2 모듈 XML의 기본 구성 ... 341 1.3 콘텐츠의 2가지 종류 ... 341 1.4 사용자 옵션 정보 지정하기 ... 343 1.5 모듈 정보 지정하기 ... 347 1.6 XMLHttpRequest를 대체하는 함수 : _IG_FetchContent() ... 348 1.7 window.onload를 대체하는 함수 : _IG_RegisterOnloadHandler() ... 348 1.8 별도 서버의 모듈 삽입하기 ... 349 1.9 구글 홈페이지에 등록된 모듈 목록 보기 ... 350 2. 오늘의 포토제닉 모듈 구현하기 ... 351 2.1 포토제닉 자바스크립트 모듈 : today_photo.js ... 351 (1) 모델 파트 : tp.TodayPhotoSlideModel ... 351 (2) 컨트롤러 파트: tp.TodayPhotoSlide ... 354 (3) 뷰 파트 : tp.TodayPhotoSlideUI ... 354 2.2 오늘의 포토 목록을 생성하는 서버 프로그램 : today_photo.jsp ... 358 2.3 구글 개인화 모듈 : tp_module.xml ... 359 Part 7 부록 부록 A PHP 예제 실행 1. 아파치 + PHP 설치 ... 362 1.1 APM_Setup 5 설치하기 ... 362 1.2 MySQL 루트 암호 변경하기 ... 367 2. 2장 예제 PHP로 실행하기 ... 368 3. 7장 댓글 예제 PHP로 실행하기 ... 370 3.1 APM Setup의 MySQL 설정하고 관련 테이블 생성하기 ... 370 3.2 7장 예제 PHP로 구현하기 ... 373 부록 B 자바스크립트 클래스 상속 ?