4장 무언가 만들어보기

4장은 123에서 공부한 것을 기초로 응용해서 만들어보는 장이다
거의 책의 절반에 해당하는 내용이라 이곳에 다 적는것은 나의 귀차니즘을 자극한다(-_-);
소스코드를 보면 거의 다 이해가 가기 때문에(진짜?) 이곳에서는 어떤 것에 어떤 것을 썼는지만 쓰도록 하겠다.
역시 책을 사서 보는게 가장 좋다....;;
소스코드 다운 받는 곳은 http://www.jpub.kr/ 에서 '머리에 쏙쏙 들어오는 JQuery 입문'을
클릭하면 소스코드를 다운 받을수 있다.

1. 롤 오버 - 메뉴에서 마우스를 올리면 이미지가 바뀌는 예제

대략적인 구조
-img 요소의 src 속성이 변화하면 새롭게 지정된 이미지를 읽어서 이를 화면의 결과로 반영
-이미지 2개 준비
-hover 이벤트를 사용

2. 텍스트 입력 필드의 가이드 텍스트 - 텍스트박스에 회색 글씨로 가이드 글이 쓰여 있는 것

대략적인 구조
- 텍스트 입력 필드에 입력된 값은 input 요소의 value 속성의 값에 반영된다.
- focus/blur 이벤트를 사용
- 포커스 되었을 때 value = "" 사용
- 단, 사용자가 입력했는데 마우스 포커스 했다고 지워지면 안됨 if문으로 막을 것

3. 아코디언 - 처음에는 여러 메뉴가 닫혀있고, 선택을 하면 선택한 메뉴만 열리는데 다른 메뉴를 선택하면 열려 있던 다른 메뉴는 닫힘

대략적인 구조
- 우선 모든 것을 닫는다
- 어딘가 하나의 섹션이 클릭되면
- 일단 모든 섹션을 닫는다
- 그리고 클릭된 섹션을 연다
- 열었을 때와 닫았을 때 이벤트를 각각 2개씩 만든다
- 이미 클릭되어 열려 있는 메뉴에 마우스의 커서 모양을 바꾼다.
- next 메소드
- 자바스크립트가 off일 때

4. 외부 파일에서 테이블 만들기

대략적인 구조
- 외부 파일을 취득
- 파일 속에 적혀 있는 데이터를 바탕을 요소를 만들고
- 파일 수만큼 표시
- JSON, getJSON 메서드, 배열, each와 $.each, 객체 사용

5. 슬라이드 쇼 - 이미지가 3초마다 자동으로 바뀜

대략적인 구조
- 3초간 기다린다
- 첫 img 요소를 페이드 아웃, 맨 뒤로 이동 시킨다
- 두 번째 img요소를 페이드 인 시킨다
- 요소를 검색하는 eq 메소드
- setInterval 을 가지고 정기적으로 처리 실행하기

6. 탭 콘텐츠 - 해당 탭을 클릭하면 해당 탭의 콘텐츠만 보여주기

대략적인 구조
- 아코디언과 비슷한 구조
- 처음에는 선두 이외의 패널은 숨겨져 있다.
- 탭을 클릭하면 현재 패널은 숨김
- 클릭된 현재 패널을 표시
- 요소를 검색하여 추출하는 filter 메소드 사용
- 이벤트와 preventDefault 사용

7. 툴팁 - 마우스 포인터가 위치하면 작은 프레임으로 자세한 내용을 보여주는 구조

대략적인 구조
- 평소에는 숨겨져 있음
- 마우스를 오보 하면 풍선 도움말이 뜸
- mousemove 이벤트
- 이벤트 객체
- 마우스 좌표를 읽어서 해당하는 좌표에 오면
- 마우스 옆에 미리 준비해 둔 텍스트를 표시해준다.
- 마우스가 그냥 지나가는 것 일수도 있기에 마우스 정지 0.2초 뒤에 표시

정말 대충대충 적은 것 같다 ㅡㅡ;;
그야말로 대략적인 구조만 적은 것이다.
소스코드를 다운받아 보면 이해하기 쉽다.
원래 5장은 플러그인인데 이 부분은 기재하지 않도록 하겠다.
회사마다 사용하는 플러그인이 다르기에 이 곳에 적는 것은 별 의미가 없다고 생각한다.
(절대 귀찮아서가 아니다 ㅡㅡ;;)
그럼 초간단 제이쿼리 복습(?)을 끝낸다.