본문내용 바로가기
무료배송 소득공제

HEAD FIRST AJAX 자꾸 가고싶은 웹 사이트의 비밀

레베카 리오단 지음 | 홍승표 , 김은희 옮김 | 한빛미디어 | 2009년 09월 19일 출간

이 책의 다른 상품 정보

  • 정가 : 25,000원
    판매가 : 22,500 [10%↓ 2,500원 할인]
  • 통합포인트 :
    [기본적립] 1,250원 적립 [5% 적립] [추가적립] 5만원 이상 구매 시 2천원 추가적립 안내 [회원혜택] 실버등급 이상, 3만원 이상 구매 시 2~4% 추가적립 안내
  • 추가혜택 : 포인트 안내 도서소득공제 안내 추가혜택 더보기
  • 배송비 : 무료 배송비 안내
  • 도서상태 : 절판
상품상세정보
ISBN 9788979146936(8979146930)
쪽수 536쪽
크기 203 * 235 mm 판형알림
원서명/저자명 Head First Ajax/Riordan, Rebecca

책소개

이 책이 속한 분야

HEAD FIRST!

데이터베이스 설계 전문가 레베카 리오단의 『HEAD FIRST AJAX』. 웹 프로그래머가 활동하는 곳이라면 어디든 꾸준한 관심을 받고 있는 Ajax에 대해 저술한 것이다. Ajax를 적용해서 웹 애플리케이션의 인터페이스를 개선하기 위한 모든 정보를 담았다.

이 책은 Ajax를 배우고 이해하고 기억하고 싶을 뿐 아니라, 사용자가 바로 반응하고 사용하기 쉬운 웹 애플리케이션을 작성하고자 하는 사람들을 대상으로 삼고 있다. HTML, CSS, 그리고 자바스크립트에 대해 경험을 갖아야 한다.

동적으로 사용자와 상호작용하는 웹 애플리케이션에 대해 학습할 수 있다. 웹 애플리케이션의 인터페이스를 개선하는 데 필요한 XHTML, 자바스크립트, DOM, 그리고 비동기/동기식 서버 요청 등을 섭렵해나간다. 그림을 풍부하게 담아내 이해를 도와주고 있다. .

목차

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()를 사용하세요
당신이 만든 새로운 DOM엘리먼트를 어디에 넣어야 할지 브라우저에게 말해 주어야 합니다
문자판을 비활성화시켜야 합니다. 즉, CSS 클래스를 바꿔주어야 하지요
…그리고 addLetter() 이벤트 핸들러를 작동하지 않도록 합니다
단어를 전송하는 것은 (또 다른) 요청입니다
우리의 자바스크립트는 서버가 어떻게 요청에 대한 응답을 하는지 상관하지 않습니다
사용성 확인: submitWord()는 언제 호출해야 할까요?

8. 프레임워크와 툴킷: 아무도 믿지 마세요
프레임워크에는 어떤 것들이 있나요?
모든 프레임워크들은 제각기 기능을 구현합니다
구문은 바뀌기 마련이지만… 자바스크립트는 여전히 동일합니다
프레임워크를 사용할까요 말까요?
선택은 여러분 몫입니다

9. XML 요청과 응답: 이루다 말로 표현할 수 없어요
고전 로큰롤이 21세기를 맞아 대대적인 보수작업에 들어갔습니다
Rob wants 서버는 어떻게 여러 가지의 값을 응답해 줄까요?
InnerHTML을 사용하면 웹 애플리케이션의 클라이언트단은 간단해집니다
XML을 사용하기 위해서는 XHTML에서처럼, DOM을 이용하는 것이 필수입니다
XML 스스로 자신에 대해 설명해 줍니다

10. json: 엄친아 자바스크립트
JSON은 문자 그리고 객체 하나
JSON은 자바스크립트 객체처럼 다뤄집니다
서버의 응답으로부터 JSON 데이터를 어떻게 획득할까요?
자바스크립트는 문자열을 실행합니다
eval()을 사용하여 수동적으로 문자열을 실행합니다
JSON 데이터를 계산하면 해당 데이터를 나타내는 객체를 반환합니다
자바스크립트 객체는 이미 동적이죠. 컴파일 된 객체가 아니니까요
객체의 멤버에 접근할 수 있으며, 멤버를 사용하여 객체의 값들에도 접근할 수 있습니다
서버의 응답을 바로 계산하는 것이 아니라 분리해야 합니다

11 폼과 검증: 하려고 했던 말을 하세요
검증은 웹 페이지로부터 서버에 이르기까지 전 과정에 걸쳐 동작해야 합니다
데이터 포맷을 검증할 수도 있고, 콘텐츠를 검증할 수도 있습니다
드라이(DRY: Don’t Repeat Yourself) ? 반복하지 말자!
이벤트 핸들러들을 좀 더 작성해봅시다
자바스크립트 아들래미의 귀환
속성값은 또 하나의 자바스크립트 객체입니다
입력 데이터에 문제가 발생했을 때는 옥주영의 고객들에게 경고 메시지를…
경고 상황이 아니라면 경고 메시지를 철회해야겠죠?
경고 메시지가 있다면 제거하세요
데이터의 중복은 서버의 문제입니다

12 포스트 요청: 편집증, 전 당신의 친구랍니다
GET 요청은 요청 인수로서 문자열을 네트워크 상에 그대로 전송합니다
POST 요청은 암호화되지 않은 문자열을 그대로 전송하지 않습니다
POST 요청의 데이터는 서버에 도착할 때까지 인코딩되어 있습니다
send()는 POST 요청 방식으로 데이터를 전송합니다
항상 당신의 요청 데이터를 제대로 받았는지 확인하세요
왜 POST 요청이 동작하지 않았을까요?
서버는 POST 데이터를 디코딩합니다
서버에 보내고 있는 것이 무엇인지 알려줘야 합니다
요청 객체의 setRequestHeader()를 사용하여 요청 헤더를 설정하세요

I 부록1: 아직 못다한 이야기들 ? 알아두면 좋은 이야기
II 부록2: 유틸리티 함수

출판사 서평

Klover 리뷰 (0)

북로그 리뷰 (0) 쓰러가기

도서 구매 후 리뷰를 작성하시면
결제 90일 이내 300원, 발송 후 5일 이내 400원, 이 상품의 첫 리뷰 500원의 포인트를 드립니다.

포인트는 작성 후 다음 날 적립되며, 도서 발송 전 작성 시에는 발송 후 익일에 적립됩니다.
북로그 리뷰는 본인인증을 거친 회원만 작성 가능합니다.
(※ 외서/eBook/음반/DVD/GIFT 및 잡지 상품 제외) 안내
  • 해당도서의 리뷰가 없습니다.

문장수집 (0) 문장수집 쓰기 나의 독서기록 보기
※구매도서의 문장수집을 기록하면 통합포인트 적립 안내

교환/반품/품절안내

※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

교환/반품/품절안내
반품/교환방법 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 ,
[1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900)

※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불]
    또는 고객센터 (1544-1900)
반품/교환가능 기간 변심반품의 경우 수령 후 7일 이내,
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
반품/교환비용 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
반품/교환 불가 사유
  • 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
  • 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
  • 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
  • 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
  • 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
  • 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
  • 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에
    해당되는 경우
(1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시 ‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①서양도서-판매정가의 12%, ②일본도서-판매정가의 7%를 적용)
상품 품절 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는
이메일과 문자로 안내드리겠습니다.
소비자 피해보상
환불지연에 따른 배상
  • 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
    소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨
  • 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
    소비자 보호에 관한 법률에 따라 처리함

이 책의 원서

안내

바로가기

  • 우측 확장형 배너 2
  • 우측 확장형 배너 2

최근 본 상품