개발자 맛과책
2015.08.06 / 18:16

[Do it! 자바스크립트+제이쿼리 입문] 실습용 소스

조회 수 7 추천 수 149 링크


자바스크립트, 제이쿼리 기본은 물론, 실전에 필요한 핵심을 모두 담았다. 복사와 붙여넣기로 기초 없이 자바스크립트와 제이쿼리를 사용하는 웹 퍼블리셔와 개발자, 기획자, 이제는 코딩도 해야 하는 웹 디자이너에게 해답을 주는 책이다.

이 책에서는 자바스크립트 기초 문법과 제이쿼리를 익히고, 사이트 메인 페이지를 제작하여 GNB, 탭 메뉴, 롤링 배너, 슬라이드 배너, 퀵 메뉴 등을 실제로 적용해 본다. 또한 UX/UI 개발에 이슈가 되고 있는 어도비 에지의 핵심 사용법을 다뤄, 프로그래밍을 모르는 개발자도 동적인 HTML 콘텐츠를 제작할 수 있는 법을 소개했다. 또한 각 장의 핵심 내용을 뽑아 제작한 저자의 무료 동영상 강의는, 더 쉽게 이 책을 이해할 수 있게 도와줄 것이다.

첫째마당 기초부터 시작하는 자바스크립트

01 자바스크립트 시작하기
01-1 자바스크립트란 무엇인가요?
자바스크립트란?
자바스크립트 언어의 특징
자바스크립트는 왜 배워야 하나요?
01-2 자바스크립트를 배우려면 알아야 할 배경 지식들
(X)HTML 요점 정리하기
CSS 요점 정리하기
01-3 개발을 위해 필요한 프로그램과 사용법
웹 브라우저 준비하기
웹 개발에 필요한 부가 기능들
자바스크립트 편집기 준비하기
01-4 자바스크립트 맛보기 예제
자바스크립트로 간단한 실행문 작성하기
웹 개발 도구, 파이어버그 기능 사용하기
파이어버그 콘솔 창 이용하기
(X)HTML 문서에 데이터를 출력하지 않고 확인하기

02 자바스크립트 기초 문법
02-1 자바스크립트 기초 문법
자바스크립트 선언문
자바스크립트 주석 처리
내부 스크립트 외부로 분리하기
자바스크립트 코드 입력 시 주의할 점
02-2 변수
변수란?
변수에 저장할 수 있는 데이터형
02-3 연산자
연산자란?
산술 연산자
문자 결합 연산자
대입 연산자
증감 연산자
비교 연산자
논리 연산자
연산자 우선순위
삼항 조건 연산자

03 제어문
03-1 제어문이란?
03-2 조건문
if 문
else 문
else if 문
중첩 if 문
03-3 선택문
switch 문
03-4 반복문
while 문
do while 문
for 문
break
continue 문
중첩 for 문

04 객체
04-1 객체
객체란?
객체의 종류
04-2 내장 객체
내장 객체 생성하기
날짜 정보 객체
숫자 객체
수학 객체
배열 객체
문자 객체
정규 표현 객체
04-3 브라우저 객체 모델(BOM)
브라우저 객체란?
window 객체
screen 객체
location 객체
history 객체
navigator 객체
04-4 문서 객체 모델(DOM)
문서 객체 모델
선택자
인접 요소 관계 파악하기
선택자 종류
선택자 적용 위치와 방법
직접 선택자를 사용한 문서 객체 CSS 적용법
인접 관계 선택자로 문서 객체에 스타일 적용하기
노드 타입으로 인접 관계 선택자 문제 해결하기
요소의 속성값 변경, 생성 및 불러오는 방법
문서 객체 이벤트 핸들러 적용하기
폼 요소 선택자

05 함수
05-1 함수
함수란?
기본 함수 정의문
매개 변수가 있는 함수 정의문
내장 함수
05-2 함수에서 return 문의 역할
데이터를 반환하는 return 문
강제 종료 역할을 하는 return 문
재귀 함수 호출
05-3 지역 변수와 전역 변수
지역 변수, 전역 변수

06 이벤트
06-1 이벤트8
이벤트란?
키보드 접근성
이벤트 중복 등록 해결법
this 키워드227
06-2 이벤트 객체
이벤트 객체 생성하기

둘째마당 자바스크립트를 더 쉽게 해주는 제이쿼리

07 제이쿼리 문서 객체 선택자와 조작법
07-1 제이쿼리 기본 다지기
제이쿼리란?
제이쿼리 라이브러리 연동하기
07-2 선택자
선택자란?
07-3 직접 선택자와 인접 관계 선택자
제이쿼리의 직접 선택자 및 인접 관계 선택자
직접 선택자
인접 관계 선택자
07-4 제이쿼리 탐색 선택자
탐색 선택자
위치 탐색 선택자
속성 탐색 선택자
그 외의 선택자 - 콘텐츠 탐색 선택자·
선택자와 함께 사용하면 편리한 메서드들
07-5 객체 조작
객체 조작 메서드
속성 조작 메서드
수치 조작 메서드
객체 편집 메서드

08 제이쿼리 이벤트
08-1 이벤트 등록 메서드··
이벤트 등록 메서드란?
로딩 이벤트 메서드
마우스 이벤트
포커스 이벤트
키보드 접근성을 위한 이벤트 등록법
키보드 이벤트
08-2 자주 사용되는 기타 이벤트 메서드
change( ) 이벤트 메서드
scroll( ) 이벤트 메서드
이벤트가 발생한 요소 추적하기·
08-3 그룹 이벤트 등록 및 삭제하기
그룹 이벤트 등록 메서드
one( ) 이벤트 등록 메서드
이벤트 제거 메서드

09 다양한 효과와 애니메이션
09-1 효과 및 애니메이션 메서드
효과 메서드
09-2 효과 제어 메서드
효과 제어 메서드란?

10 제이쿼리 비동기 방식 연동
10-1 Ajax
Ajax란
웹 서버 설치하기
웹 호스팅 등록하여 서버 이용하기
10-2 Ajax 관련 메서드
Ajax 관련 메서드들
XML 데이터 요청하기
JSON 데이터 요청하기

11 제이쿼리 플러그인
11-1 제이쿼리 UI 플러그인
제이쿼리 플러그인이란?
UI를 개발할 때 유용한 플러그인
UI 플러그인 사용 방법
UI 플러그인으로 드래그 레이어 창 만들기
11-2 bxSlider 플러그인 활용하기
bxSlider 플러그인
bxSlider 플러그인 다운로드하기
자동 슬라이드 배너 만들기
11-3 Accodion Image 플러그인 활용하기
Accodion Image 플러그인
Accodion Image 플러그인 다운로드하기
Acoodion Image 배너 만들기
11-4 swipejs 플러그인 활용하기
swipejs 플러그인
swifejs 플러그인 다운로드
모바일 Touch Swipe 배너 만들기

셋째마당 실무에서 활용하는 자바스크립트 + 제이쿼리

12장 사용자 환경 개발 예제
12-1 (X)HTML 문서 설계
(X)HTML의 구조 및 구성 요소
스타일 세팅과 기본 서식, 레이아웃 작성하기
12-2 헤더 영역 UI 디자인 및 개발하기
헤더 영역 구조와 스타일 작성하기
Show & Hide 로그인 폼 만들기
레이블을 이용한 로그인 폼 안내 가이드 제작하기
ZOOM 버튼 만들기
인쇄 버튼 만들기
Google 번역기 API 사용하기
검색 창 안내 가이드 만들기
GNB 메뉴 만들기
슬라이드 전체 메뉴 만들기
현재 날짜 표기하기
12-3 푸터 영역 UI 디자인 및 개발하기
푸터 영역 개발하기
관련 사이트 이동 선택 상자 만들기
12-4 콘텐츠 영역 UI 디자인 및 개발하기
콘텐츠 영역 개발하기
비주얼 배너 터치 슬라이드 만들기
자동 롤링 배너와 제어 버튼을 활용한 알림판 만들기
탭 메뉴를 이용한 최근 게시물 리스트 만들기
알림 배너 디자인
자동 슬라이드 배너를 이용한 베스트 BOOK 영역 만들기
페이스북 소셜 플러그인 연동하기
마케팅 영역 디자인
온라인 서점 목록 영역 디자인
스크롤 퀵 메뉴 만들기
퀵 메뉴 동작 원리
쿠키 플러그인을 활용한 팝업 창 만들기
제이쿼리 UI 플러그인과 쿠키 플러그인 사용하기
쿠키 플러그인 사용하기

13장 어도비 에지를 활용한 UX/UI 개발
13-1 어도비 에지를 이용한 HTML 콘텐츠 제작
어도비 에지로 웹에서 애니메이션 구현하기
어도비 에지의 설치와 사용법
어도비 에지 인터페이스 익히기
13-2 어도비 에지 기본 사용법 익히기
타임라인과 키 프레임 이해하기
타임라인과 키 프레임 활용하기
13-3 자동차 갤러리 제작하기
자동차 갤러리 만들기


실습용 소스 및 예제 자료 다운로드 링크 :

https://files.secureserver.net/0swpu5imnBtGK5

 

 

자바스크립트+제이쿼리 2쇄 정오표(오탈자 pdf 다운로드): 

오탈자로 인해 혼란을 드려 죄송합니다. 1쇄를 갖고 계신 분들은 아래 pdf를 다운로드받아 

수정한 부분을 확인하시기 바랍니다. 

https://files.secureserver.net/0sAVhu1c2tNAQM

 

28p 표안에 있는 그림 수정

82p 16행, 20행 수정
131p 29~32행 수정
132p 29~32행 설명 수정
146p location, status, scrollbars, toolbars 속성들의 숨김 노출 설명 수정
150p,151p moveTo(), resizeTo() 부분에서 다음 설명 추가 → (단, 크롬, 오페라 브라우저에서는 정상적으로 작동하지 않습니다.)
172p 선택자 사용 시 올바르게 적용된 위치(두 가지 방식)에서 window.onload=funciton 내용 오타수정 → function 
173p 적용 예제2. 에서 document.onload=function(){ → window.onload="function(){ 
200p 19행 hello → bye 
252p 표 인접 관계 선택자 내용에서 '동생(다음) 요소 선택자' 사용법 내용 수정
384p 25~27행 내용 수정
502p 그림 '회사 소개 상위 메뉴에서 마우스가 벗어났을 때' 그림 안 박스 설명 수정
503p 67행 주석 내용 수정

558p 자동차 갤러리 만들기 본문 중 자동차 캘러리 → 자동차 갤러리로 수정

 

아래부터의 내용은 책에 반영되어 있지 않으니 참고하여 책을 봐주세요. 다음 쇄에 꼭 반영하겠습니다. 불편을 드려 죄송합니다.

127p. 

맨아래 pop() 과 push() 설명 사진에서 pop()으로 "강남"을 삭제하고 push()로 "삼성"이라는 데이터를 넣었는데
push()사진에는 바뀌지 않고 "강남"이라고 사진에 표시가 되어있습니다. 강남이 삼성으로 표기되어야 함이 맞습니다.

134p
예제의 20항에 보면 if문 괄호가 제대로 닫혀있지 않습니다. 닫는 괄호를 넣어주세요

282p
속성 탐색 선택자 종류
$("li:hidden") = 요소 중 보이는 것만 선택합니다.
$("li:visible") = 요소 중 숨겨져 있는 것만 선택합니다.
이 둘의 설명이 바뀌었습니다. hidden은 숨겨져 있는 것만 선택하고 visible은 보이는 것만 선택합니다.

 

205p

표 Boolean() 사용예에 parseFloat(5) -> true 라 적혀있습니다.

Boolean(5) -> true 로 바꿔주세요.

 

 


첨부이미지
1