한빛출판네트워크

당장 해결하고 싶은 문제와 관련된 해법을 바로 찾아 활용한다

jQuery는 현재 가장 폭넓게 쓰이고 있는 자바스크립트 프레임워크로 웹 프로그래밍뿐 아니라 모바일 프로그래밍까지 그 영역을 넓혀가고 있다. 웹 개발자 사이에서 표준으로 자리 잡은 jQuery는 강력하면서도 우아한 표현법으로 빠른 생산성을 보장해주고 있지만, 제대로 활용하기는 어렵다는 단점이 있다. 이 책은 어려운 문제에 대한 해결책을 제시함으로써 학습에 대한 어려움을 보완한다.

• 키보드와 마우스 이벤트 처리
• 폼 인증 기법
• 애니메이션 효과 적용하기
• DOM 처리
• 테이블 처리 기법
• JSON과 XML 데이터 처리하기

각 문제에 대한 해결책을 제시하며, 완전하게 동작하는 예제를 제시한다. 수많은 문제 조합이 있지만, 이 책에서는 이런 문제를 해결할 수 있는 기반 기술을 제공한다. 코드를 제시하고, 이에 따른 설명을 함께 제시해 해법을 완전히 이해하게 했으며, 이를 자신의 코드에 바로 적용할 수 있는 능력을 키워주게 했다.

1 jQuery 기본
1-1 jQuery 설치하기 
1-2 DOM에서 노드 선택하기 
1-3 자바스크립트 실행 지연하기 
1-4 엘리먼트에 CSS 적용하기 
1-5 다양한 방법으로 HTML 엘리먼트 선택하기 
1-6 DOM의 노드 개수 세고 노드 안의 텍스트 표시하기 
1-7 엘리먼트의 HTML 얻기 
1-8 DOM 노드의 내용 변경하기 
1-9 실행 중에 DOM 노드 생성하기 
1-10 HTML의 여러 엘리먼트에 같은 클래스를 할당하여 스타일 적용하기 

2 배열과 문자열
2-1 배열을 사용하여 이름을 리스트로 표시하기 
2-2 배열 내의 원소 조작하기 
2-3 배열 중 원하는 값만 표시하기 
2-4 문자로 구성된 배열과 숫자로 구성된 배열 정렬하기 
2-5 배열 나누기 
2-6 두 배열 합치기 
2-7 숫자로 구성된 배열을 문자열로 변환하고 부분 문자열 찾기 
2-8 객체의 배열 만들기 
2-9 객체의 배열 정렬하기 

3 이벤트 처리
3-1 어느 버튼을 클릭했는지 확인하기 
3-2 자동으로 이벤트 발생시키기 
3-3 버튼을 한 번 누른 후 비활성으로 변경하기 
3-4 마우스 이벤트 처리하기 
3-5 어느 마우스 버튼을 눌렀는지 확인하기 
3-6 마우스 버튼을 누른 곳의 화면 위치 알아내기 
3-7 동적으로 텍스트를 하이라이트 처리하기 
3-8 마우스를 움직여 이미지를 밝게 또는 흐리게 처리하기 
3-9 엘리먼트가 포커스를 얻고 잃는 시점 알아내기 
3-10 버튼에 호버 효과 적용하기 
3-11 CSS 클래스의 적용을 토글하기 
3-12 이미지 기반의 롤오버 만들기 
3-13 이벤트 처리로 텍스트 추가 또는 제거하기 
3-14 이벤트로 스타일 적용하기 
3-15 말풍선 표시하기 
3-16 '맨 위로' 링크 만들기 
3-17 '더 읽기.' 링크 제공하기 
3-18 텍스트에 애니메이션 효과 넣기 
3-19 슬라이딩 효과로 텍스트 대체하기 
3-20 이미지 스크롤하기 
3-21 어느 키를 눌렀는지 확인하기 
3-22 이벤트 버블링 막기 
3-23 여러 동작 연결하기 

4 폼 유효성 확인
4-1 필수 항목이 입력되었는지 확인하기 
4-2 숫자 필드 유효성 확인하기 
4-3 전화번호 유효성 확인하기 
4-4 사용자 아이디 유효성 확인하기 
4-5 날짜 유효성 확인하기 
4-6 이메일 주소 유효성 확인하기 
4-7 체크박스 체크여부 확인하기 
4-8 라디오 버튼 선택여부 확인하기 
4-9 select 엘리먼트 항목 선택여부 확인하기 
4-10 폼 버튼과 옵션에 스타일 적용하기 
4-11 체크박스 모두 체크 또는 체크 해제하기 
4-12 두 개 필드 유효성 확인하기 
4-13 비밀번호 필드와 비밀번호 확인 필드 비교하기 
4-14 특정 필드 비활성화시키기 
4-15 전체 폼 유효성 확인하기 
4-16 폼 데이터 직렬화하기 

5 페이지 내비게이션
5-1 브레드크럼 메뉴 만들기 
5-2 메뉴 항목에 호버 효과 추가하기 
5-3 메뉴의 요약 정보 표시하기 
5-4 단축키가 있는 내비게이션 메뉴 작성하기 
5-5 오른쪽 마우스 버튼을 눌러 콘텍스트 메뉴 표시하기 
5-6 각각 메뉴 항목을 갖는 메뉴 두 개 만들기 
5-7 서브메뉴 항목이 있는 메뉴 만들기 
5-8 아코디언 메뉴 만들기 
5-9 동적 메뉴 만들기 

6 시각 효과
6-1 이미지를 수평 또는 수직으로 표시하기 
6-2 수평 이미지 슬라이더 만들기 
6-3 왼쪽으로 스크롤되는 이미지를 표시하고 클릭하면 사라지게 하기 
6-4 왼쪽으로 스크롤되며 사라졌다가 오른쪽에 나타나는 이미지 만들기 
6-5 이미지를 브라우저 윈도우의 중앙에서 스크롤하기 
6-6 이미지에 마우스를 올릴 때마다 이미지 번갈아 표시하기 
6-7 이미지를 수직으로 스크롤하기 
6-8 이미지를 수평으로 스크롤하기 
6-9 뉴스 스크롤러 만들기 
6-10 마우스를 올리면 확대된 이미지 표시하기 
6-11 이미지를 페이지 단위로 표시하기 
6-12 이미지 셔플링 
6-13 시계추 스크롤러 작성하기 
6-14 배열을 이용하여 이미지 스크롤하기 

7 테이블 다루기
7-1 hover 이벤트 시 테이블 행 하이라이트하기 
7-2 열을 번갈아 하이라이트하기 
7-3 행 필터링 
7-4 선택한 열 숨기기 
7-5 테이블 페이지 처리하기 
7-6 리스트 항목 펼치고 접기 
7-7 테이블 행 펼치고 접기 
7-8 리스트 정렬하기 
7-9 테이블 정렬하기 
7-10 테이블에서 행 필터링 

8 Ajax
8-1 환영 메시지 표시하기 
8-2 사용자 인증 수행하기 
8-3 사용자 이름 유효성 확인하기 
8-4 이메일 주소 유효성 확인하기 
8-5 자동 완성 기능 이용하기 
8-6 HTML 가져오기 
8-7 JSON 데이터 가져오기 
8-8 XML 데이터 가져오기 
8-9 테이블 페이지 처리하기 

9 플러그인 사용법
9-1 행 개수에 제한을 두고 테이블의 모든 칼럼에 대해 필터링하여 표시하기 
9-2 이미지에 주석 달기 
9-3 테이블의 행을 드래그 앤 드롭 하기 
9-4 폼 컨트롤에서 데이터를 얻고, 직렬화하고, 초기화하기 
9-5 Form을 Ajax로 전송하기 
9-6 엘리먼트의 정확한 위치와 크기 찾기 
9-7 이미지를 3D 원형으로 표시하기 
9-8 데이트픽커로 날짜 선택하기 
9-9 테이블 정렬하기 

10 CSS 사용법
10-1 HTML 엘리먼트 구분하기 
10-2 엘리먼트 안의 엘리먼트에 스타일 적용하기 
10-3 문단 들여쓰기 
10-4 문단의 첫 문자를 크게 표시하기 
10-5 제목과 문단 사이의 간격 없애기 
10-6 제목에 스타일 적용하기 
10-7 문단의 첫 라인만 들여쓰기 
10-8 문단 내어쓰기 
10-9 경계선으로 텍스트 하이라이트하기 
10-10 이미지를 사용하여 텍스트 하이라이트하기 
10-11 리스트 항목에 리스트 속성 적용하기 
10-12 선택한 리스트 항목에만 스타일 적용하기 
10-13 리스트 항목 사이에 구분선 넣기 
10-14 리스트에 글머리 기호로 이미지 사용하기 
10-15 인라인 리스트 작성하기 
10-16 하이퍼링크에 스타일 적용하기 
10-17 HTML 엘리먼트에 다양한 크기 할당하기 
10-18 HTML 엘리먼트 위치 정하기 
10-19 여러 칼럼의 레이아웃 만들기 
10-20 이미지를 텍스트로 감싸기 
10-21 이미지에 그림자 효과 넣기 
10-22 마우스를 링크 위로 움직일 때 커서 모양 변경하기 
10-23 긴 텍스트를 지정한 영역에 표시하기 
10-24 둥근 모서리 칼럼 만들기 
10-25 텍스트 데커레이션 적용하기 
10-26 이미지의 크기 조정하기 
10-27 배경 이미지 정하기 
10-28 배경 이미지를 브라우저의 중앙에 배치하기 
10-29 배경 이미지 고정하기