출판사 서평
핵심 내용
이 책은 Head First 시리즈다운 기발한 상상력과 설명법으로 실용적인 웹 프로그래밍 기법을 재미있고 쉽게 서술한다. 또한 Ajax와 떼어놓고 말할 수 없는 자바스크립트와 다양한 프레임워크?의 필수적인 사용법을 깊고 체계적으로 학습할 수 있다. 또 Java와 C# 등 다양한 언어를 사용하기 때문에 어떤 분야의 종사하는 웹 개발자라도 유용하게 활용할 수 있다.
특징과 장점
- Ajax를 처음 다루어보는 모든 웹 개발자를 위해 쉽게 재미있는 예제를 제공한다.
- 현실에서 마주치기 쉬운 웹 서비스는 물...
핵심 내용
이 책은 Head First 시리즈다운 기발한 상상력과 설명법으로 실용적인 웹 프로그래밍 기법을 재미있고 쉽게 서술한다. 또한 Ajax와 떼어놓고 말할 수 없는 자바스크립트와 다양한 프레임워크의 필수적인 사용법을 깊고 체계적으로 학습할 수 있다. 또 Java와 C# 등 다양한 언어를 사용하기 때문에 어떤 분야의 종사하는 웹 개발자라도 유용하게 활용할 수 있다.
특징과 장점
- Ajax를 처음 다루어보는 모든 웹 개발자를 위해 쉽게 재미있는 예제를 제공한다.
- 현실에서 마주치기 쉬운 웹 서비스는 물론 서비스 제공자의 고민과 해결법을 담아 더 사용하기 쉬운 웹 사이트를 고객에게 제공할 수 있는 방법을 알려준다.
독자 대상
- 1차 타겟 : 자바스크립트를 사용하여 웹 애플리케이션을 개발하는 개발자군
- 2차 타겟 : Ajax를 이용한 웹 프로그래밍 입문자 및 학생
관련 도서
『Taeyo’s ASP.NET AJAX v1.0』(한빛미디어, 2007)
『Ajax on Java for 웹 2.0』(한빛미디어, 2007)

목차
1. Ajax 사용하기: 새 시대를 위한 웹 애플리케이션
지금까지의 웹 페이지
개선된 웹 페이지
그럼 무엇이 “Ajax”페이지를 만들어 줄까요?
‘롭’의 로큰롤 기념전
Ajax와 로큰롤 5단계
1단계: XHTML수정하기
2단계: 자바스크립트 초기화 하기
3단계: 요청 객체 만들기
4단계: 상품의 상세 정보 얻기
상품의 상세 정보를 요청하기 위한 코드를 작성해 봅시다
작업 전에 요청 객체가 잘 만들어 졌는지 항상 확인하세요
요청 객체도 하나의 객체입니다.
서버야! 답을 보내줄 때 displayDetails()함수를 호출할 수 있도록 꼭 알려줘야 해. 알았지?
요청을 보낼 때는 send() 함수를 사용하세요
서버는 보통 데이터를 Ajax 요청에 반환해 줍니다
Ajax는 서버기술을 의식하지 않습니다
5단계: 상세 정보 보여주기
요청 객체의 responseText 속성에서 서버의 응답을 얻어냅니다
옛날 방식의 웹 애플리케이션은 안녕…
2. Ajax 애플리케이션 설계하기: Ajax하는 사람의 고민
박중운의 구닥다리 방식의 웹 사이트
Ajax를 사용해서 비동기식으로 등록 요청을 해봅시다
회원 등록 페이지 갱신하기
이벤트 핸들러를 밝힌다
프로그래밍 방침에 맞추어 windows.onload 이벤트 핸들러 설정하기
함수 밖에 있는 자바스크립트 코드들은 해당 스크립트가 읽혀질 때 실행됩니다
언제 실행되어야 할까요?
그렇다면 서버는…
Ajax 설계에서 어떤 부분들은 항상 반복됩니다
createRequest()는 항상 같습니다
요청 객체 만들기… 다양한 브라우저에서 동작하도록 Ajax 애플리케이션 설계는 웹 페이지와 서버단 프로그래밍 모두를 포함합니다
요청 객체는 당신의 코드를 웹 브라우저에 연결시켜 줍니다
당신은 서버가 아닌 브라우저와 통신합니다
브라우저는 서버에서 응답이 오면 콜백 함수를 호출합니다
박중운에게 Ajax 회원 등록 페이지를 보여주세요
웹 폼이 서버에게 요청을 보내는 방법은 현재 두 가지입니다
진생 상황을 보여주는 CSS클래스들을 만들어 봅시다
…그리고 자바스크립트에서 CSS클래스를 명시하는 부분을 변경합니다
더 이상 성가신 수정 작업은 없을 것입니다
회원 등록은 무든 준비가 완료된 후에 가능합니다
3. 자바스크립트 이벤트: 사용자에게 즉각 반응하세요
요가의 첫 번째 단계는 ‘아래를 보는 강아지 자세’입니다
Ajax 애플리케이션은 단순한 부품의 조합, 그 이상입니다
이것이 옥주영씨의 XHTML입니다
웹 페이지의 이벤트와 자바스크립트의 이벤트 핸들러를 연결해 주세요
window.onload 이벤트를 사용해서 웹 페이지의 상호 작용 기능을 초기화합니다
왼쪽 이미지를 클릭할 수 있도록 바꿔 주세요
XHTML이 보여주는 페이지의 구조와 내용을 사용하세요
hideHint() 함수도 추가해 보세요
탭: 시각적(시각 그래픽적)인 착각을 이용합니다
for 반복문을 사용해서 이미지들을 살펴보세요
CSS 클래스가 (다시 한번) 핵심입니다
엇… 하지만 탭이 태그는 아니었잖아요!
이제는 자바스크립트가 작동하지 않는걸요?
요청 객체를 사용해서 클래스의 상세 설명을 서버로부터 가져오세요
서로 다른 두 개의 함수가 페이지의 어떤 하나의 부분을 갱신 수 있다면 조심스럽게 살펴봐야 합니다
스크립트를 사용해서 이미지를 변경하고 싶다면 ‘CSS 클래스 변경’을 고려해 보세요
XHTML의 링크들은 태그로 나타냅니다
활성화 상태의 이미지를 보여주는 함수와 이 이미지를 감수하는 함수가 필요합니다
4. 복수 이벤트 핸들러: 하나보다는 둘이 낫지
한 개의 이벤트에는 한 개의 이벤트 핸들러만 등록할 수 있습니다(또는 그렇게 보입니다)
이벤트 핸들러는 속성값이죠
하나의 속성은 단 하나의 값만 가질 수 있어요
addEventListener()로 하나 이상의 이벤트 핸들러 등록하기
객체들은 DOM 레벨 2로 하나의 이벤트에 여러 개의 이벤트 핸들러를 등록할 수 있습니다
익스플로러에 무슨 일이 있는 거죠?
익스플로러는 완전히 다른 이벤트 모델을 사용합니다
기능상으로는 attachEvent()와 addEventListener()가 동일하네요
addEventHandler()는 옥주영의 요가 페이지 뿐 아니라 모든 웹 페이지에서 동작합니다
initPage()에 새 유틸리티 함수를 적용해 봅시다
문제점 공략에는 alert() 경고 메시지를!
이번에는 뭐가 또 잘못됐다는 거죠?
익스플로러의 이벤트 핸들러들은 활성된 객체가 아니라 익스플로러의 이벤트 처리 프레임워크가 소유하고 있습니다
attachEvent()와 addEventListener()는 이벤트 핸들러에 또 다른 인수를 제공합니다
이벤트 인수에 이름을 지어줘야 이벤트 핸들러가 이를 활용할 수 있습니다
target이라 외치면, srcElement라고 말하죠
이벤트를 발생한 객체를 어떻게 얻어올까요
5. 비동기식 애플리케이션: 면허증 갱신하는 것과 같아요
비동기식이란 말이 대체 뭔가요?
지금까지 비동기식 애플리케이션을 작성해왔습니다
그렇지만 전혀 눈치채지 못할 때도 있습니다
서버단 작업에 대해 좀 더 알아본다면…
(덤) 세 단계로 익히는 비동기식 프로그래밍
표지 이미지를 위한 태그와 2개의 비밀번호 태그가 필요합니다
새로운 작업이 수행되어야 한다면 새로운 이벤트 핸들러 함수가 필요합니다
요청 객체 하나만으로도 하나의 비동기식 요청을 안전하게 주고 받을 수 있습니다
비동기식 요청은 아무것도 기다리지 않습니다. 자기가 요청한 것도 마찬가지로…
만약 2개의 분리된 요청 작업을 수행한다면, 2개의 독립적은 요청 객체들을 사용하세요
비동기식이란 요청과 응답 순서에 의존하여 작업할 수 없다는 뜻입니다
모니터 함수는 당신의 프로그램을 관찰합니다. 바깥에서 말이죠
어떤 동작이 이루어져야 할 것 같으면 모니터 함수를 호출합니다
모니터 함수는 상태 변수들을 통해 현재 상황을 확인합니다
이제 마지막 단계입니다…
동기식 요청은 코드 전체가 다른 일을 수행할 수 없게 합니다
당신의 코드 대신 자바스크립트로 프로세스를 수행시키는 setInterval()을 사용합시다
6. DOM(Document Object Model): 도큐먼트 객체 모델: 웹 페이지 숲속 헤매기
페이지 내의 콘텐츠를 변경할 수도 있고…
페이지의 구조를 변경할 수도 있습니다
브라우저는 DOM을 사용하여 페이지를 표현합니다
당신이 작성한 XHTML은…
…브라우저가 이렇게 이해하고 있지요
페이지는 관련된 객체들의 집합입니다
동적 애플리케이션 작성 시 DOM을 사용해 봅시다
XHTML로 시작하시죠
appendChild()는 노드에 새로운 자식 노드를 추가합니다
객체 이름이나 id를 사용하여 태그객체의 위치를 지정할 수 있습니다
새 부모님과의 인터뷰
클릭된 숫자판을 움직일 수 있나요?
가족 관계를 활용한 DOM 트리 주변을 움직일 수 있습니다
DOM 트리는 웹 페이지의 ‘모든 것’을 나타내는 노드들을 지니고 있습니다
문자 노드의 nodeName은 “#text”
제가 이겼나요? 제가 이겼죠?
정말 진지하게 말하는데요… 제가 이겼나요?
7. DOM 다루기: 시키는 대로 할께요
Webville Puzzles사의 사업확장
Woggle은 문자판을 만들 때 테이블 태그를 사용하지 않습니다
XHTML의 문자판들은 CSS를 이용해서 자리를 잡습니다
문자판을 완전히 무작위로 선택하지는 않습니다
페이지의 디자인은 CSS가 담당합니다
문자판에 대한 새로운 클릭 이벤트 핸들러가 필요합니다
각각의 문자판에 대해 클릭 이벤트 핸들러를 만들어 봅시다
이 이벤트 핸들러를 randomizeTiles()에서 할당할 수 있습니다
자바스크립트 속성 값은 문자열에 불과합니다
‘currentWord’를 식별자로 갖는 태그에 내용과 구조를 추가시켜야 합니다
DOM을 사용해서 페이지의 구조를 바꿉니다
DOM 엘리먼트를 만들려면 createElement()를 사용하세요
당신이 만든