jQuery를 활용한 인터랙티브 웹 콘텐츠 제작

1장 자바스크립트 DOM

01 핵심 내용 길잡이
자바스크립트를 배운다는 건?
DOM이란?
DOM은 지켜야 할 약속만 적혀 있는 문서
DOM과 HTML 페이지와의 관계
노드와 DOM 객체와의 관계
핵심 DOM 객체 소개
DOM 객체 간의 관계

02 핵심 내용
노드 다루기
스타일 다루기
속성 다루기
이벤트 다루기
위치 및 크기와 관련된 프로퍼티와 메서드

03 미션 도전
미션 1 - 핵심 내용 확인 1
미션 2 - 핵심 내용 확인 2
미션 3 - 이미지 변경하기
미션 4 - 특정 영역에서 이미지 움직이기
미션 5 - 이미지 스크롤
미션 6 - 사각형 영역에서 이미지 움직이기

04 실전 활용 예제
실전 활용 예제 만들기 1 경품 추첨기
실전 활용 예제 만들기 2 롤링 배너

2장 jQuery DOM

01 핵심 내용 길잡이
jQuery를 사용하는 이유는?
jQuery의 기능
jQuery와 CSS와의 관계
jQuery의 정체

02 jQuery 핵심 내용
jQuery 첫 걸음, 개발 환경 구축
노드 다루기
스타일 다루기
속성 다루기
이벤트 다루기
위치 및 크기와 관련된 프로퍼티와 메서드
jQuery 효과 다루기

03 미션 도전
미션1 - 핵심 내용 확인 1 : jQuery 버전으로 만들기
미션2 - 핵심 내용 확인 2: jQuery 버전으로 만들기
미션3 - 이미지 변경:jQuery 버전으로 만들기
미션4 - 특정 영역에서 이미지 움직이기: jQuery 버전으로 만들기
미션5 - 이미지 스크롤: jQuery 버전으로 만들기
미션6 - 사각형 영역에서 이미지 움직이기: jQuery 버전으로 만들기

04 실전 활용 예제
실전 활용 예제 1 - 경품 추첨기: jQuery 버전으로 만들기
실전 활용 예제 2 - 롤링 배너 만들기: jQuery 버전으로 만들기

3장 자바스크립트 Ajax

01 핵심 내용 길잡이
Ajax이란?
왜 Ajax인가?
기존 웹의 통신 vs. Ajax를 이용한 통신
Ajax를 이용한 웹 페이지의 통신
Ajax에서 반드시 알고 있어야 할 내용
Ajax를 이용한 클라이언트와 서버 간의 데이터 연동
XMLHttpRequest란?
응답 이벤트 처리
GET 방식, POST 방식
Ajax 동기/비동기 응답 설정
응답 형식

02 핵심 내용
XMLHttpRequest 객체 생성
Ajax 작업을 위한 개발 환경 설정
GET 방식으로 데이터 보내고 서버에서 동기식으로 CSV 형식의 데이터 응답 받기
POST 방식으로 데이터 보내고 서버에서 비동기식으로 CSV 형식의 데이터 응답 받기
POST 방식으로 데이터 보내고 서버에서 비동기식으로 XML 형식의 데이터 응답 받기
POST 방식으로 데이터 보내고 서버에서 비동기 방식으로 JSON 형식의 데이터 응답 받기
외부 XML 파일 읽기
외부 JSON 파일 읽기

03 도전 미션
미션1 - Ajax를 활용한 동적 이미지 노드 생성(XML 버전)
미션2 - Ajax를 활용한 동적 이미지 노드 생성(JSON 버전)
미션 3 - Ajax를 활용한 롤링 배너 제작

04 실전 활용 예제
실전 활용 예제 1 - 외부 페이지 연동
실전 활용 예제 2 - 1단 메뉴 만들기

4장 jQuery Ajax

01 핵심 내용 길잡이
jQuery Ajax를 사용하는 이유는?
jQuery Ajax를 이용한 클라이언트와 서버 간의 데이터 연동을 위한 일반적인 작업 순서
jQuery Ajax의 핵심 메서드

02 핵심 내용
jQuery Ajax 활용을 위한 개발 환경 설정
GET 방식으로 데이터 보내고 서버에서 동기식으로 CSV 형식의 응답 받기: jQuery Ajax 버전
POST 방식으로 데이터 보내고 비동기식으로 CSV 형식의 데이터 응답 받기: jQuery Ajax 버전
POST 방식으로 데이터 보내고 비동기식으로 XML 형식의 데이터 응답 받기: jQuery Ajax 버전
POST 방식으로 데이터 보내고 비동기식으로 JSON 형식의 데이터 응답 받기: jQuery Ajax 버전
외부 XML 파일 읽기: jQuery Ajax 버전
외부 JSON 파일 읽기: jQuery Ajax 버전

03 도전 미션
미션 1 - jQuery Ajax 버전으로 만들기
미션 2 - jQuery Ajax 버전으로 만들기
미션 3 - Ajax를 적용한 롤링 배너 만들기: jQuery Ajax 버전으로 만들기

04 실전 활용 예제
실전 활용 예제 만들기 1 - 외부 페이지 연동: jQuery Ajax 버전으로 만들기
실전 활용 예제 2 - 1단 메뉴 만들기: jQuery Ajax 버전으로

5장 실전 활용 예제 만들기

01 실전 활용 예제 만들기1 - 배너 슬라이더
사용자 요구사항
핵심 기능 및 구현 방법 찾기
단계 나누기
구현

02 실전 활용 예제 만들기2 - 아코디언 메뉴
요구사항 분석 및 기능 정의
핵심 기능 및 구현 방법 찾기
단계 나누기
구현

03 실전 활용 예제 만들기 3 - 이미지 갤러리
요구사항 분석 및 기능 정의
핵심 기능 및 구현 방법 찾기
단계 나누기
구현

1990년대 중반 즈음 웹의 발달로 사람들은 단순한 텍스트 형태에서 좀 더 다이내믹한 뭔가를 원하기 시작했으며 그 흐름에 맞춰 인기를 얻었던 것 중에 하나가 바로 자바 애플릿이었습니다. 자바 애플릿의 등장은 지금까지 웹에서 볼 수 없었던 동적이면서도 화려한 웹 콘텐츠 제작을 가능하게 했으며 자바 언어의 든든한 지원하에 가히 하늘을 찌를 듯한 인기를 얻을 수 있었습니다. 허나 모든 건 영원할 수 없는 법! 고리타분한 프로그래밍 언어를 힘겹게 배우지 않아도 아주 쉽게 인터랙티브한 콘텐츠를 만들 수 있는 도구가 등장했으니 그건 바로 어도비 플래시였습니다(이 당시에는 매크로미디어사의 플래시였습니다). 플래시의 위력은 핵폭탄만큼 폭발적이었으며 자바 애플릿이 차지하고 있던 영역을 하루가 다르게 하나둘씩 잠식해 나갔습니다. 그리고 어느덧 사람들의 기억 속에서 자바 애플릿이 서서히 잊혀져 갔으며 그 자리에는 플래시가 완전히 자리를 차지하게 되었습니다.

이후 근 10년이 흐른 현재의 웹 세상은 또 다른 변화를 예고하고 있습니다. 그 주인공은 바로 천덕꾸러기로만 알고 있던 순수 웹 기술입니다.

변화의 시작은 작게는 롤링 배너나 메뉴, 갤러리 같은 기존 플래시만의 전유물로 여겨졌던 인터랙티브한 웹 콘텐츠부터 시작해 크게는 제법 규모가 있는 RIA(Rich Internet Application)까지 순수 웹 기술만을 이용해 만들어지고 있습니다.

이는 아마도 하드웨어와 웹 브라우저의 발달로 인해 기존에는 구현하고 싶어도 할 수 없는 것들이 이제는 다른 플러그인 기술의 도움 없이 표준 웹 기술만으로도 충분히 인터랙티브한 웹 콘텐츠를 제작할 수 있는 환경이 만들어졌기 때문일 것입니다.

이런 흐름에 맞추어 이 책은 인터렉티브 웹 콘텐츠 제작을 위해서 반드시 알고 있어야 하는 핵심 기술과 활용 방법을 담고 있습니다. 이 책이 안내하는 순서대로 하나씩 진행해 나간다면 이제 막 인터랙티브 웹 콘텐츠에 흥미를 느끼거나 제작을 시작한 분들도 쉽고 재미있게 핵심 기술과 활용 방법을 익힐 수 있을 것입니다.

자! 그럼 시작해 볼까요!?