• 자바스크립트+jQuery 완전정복 스터디 3: 중급/고급/활용편

  • 김춘경 지음

  • 웹동네 시리즈 _ 005
  • ISBN: 9791158390143
  • 32,000원 | 2015년 10월 16일 발행 | 724쪽



『자바스크립트+jQuery 완전정복 스터디』는 독자 개인의 실력과 목표에 맞게 공부할 수 있도록 총 3권으로 구성돼 있습니다.

『자바스크립트+jQuery 완전정복 스터디 3 (중급/고급/활용편)』에서는 한 단계 높은 수준의 웹프로그래밍을 구현하기 위해 자바스크립트를 활용한 클래스와 객체지향을 다룹니다. 또한 1, 2편에서 배운 내용을 바탕으로 실무에서 한 번쯤 만들게 되는 UI콘텐츠를 제작해 보면서 다양한 실무 팁과 테크닉도 알려줍니다.

 

상세 이미지

상세 이미지

★ 이 책만의 특징 ★

  • 이 책은 기획 단계에서부터 개인/단체 스터디를 목적으로 제작되었습니다.
  • 이 책은 이제 막 시작하는 초급자를 위한 초급 단계와 일반 실무자의 실력 향상을 위한 중급/고급/실무 단계로 구성돼 있으며 개인의 실력과 목적에 맞게 선택해서 스터디를 진행할 수 있습니다.
  • 학습하기 쉽게 하나의 장(주제)은 여러 개의 레슨(소주제)으로 구성돼 있습니다.
  • 실무 이론과 실무 중심 예제가 가득합니다.
  • 학습한 내용을 자체적으로 평가할 수 있는 실무형 미션도 가득 들어 있습니다.

★ 이 책의 대상 독자 ★

  • 자바스크립트+jQuery를 활용해 탭메뉴 정도는 쉽게 만들 수 있는 실무자
  • 자바스크립트 클래스를 제대로 정복하고 싶은 독자
  • 자바스크립트를 활용한 객체지향 프로그래밍(OOP)를 제대로 정복하고 싶은 개발자
  • jQuery 플러그인 제작방법을 제대로 정복하고 싶은 사용자
  • 자바스크립트 객체지향 프로그래밍 기반 UI 콘텐츠를 제작하고 싶은 실무자

김춘경(딴동네)

웹 분야 중 주로 웹프론트엔드 개발과 웹앱 & 모바일웹앱 개발자로 활동하고 있으며 책 집필과 IT학원에서 웹 기술과 관련된 강의를 하고 있습니다. 또한 웹프론트엔드 개발자를 위한 온오프라인 공간인 웹동네를 운영하고 있습니다.

웹동네

웹동네는 웹앱과 웹프론트엔드 분야를 전문으로 연구하고 학습하는 그룹으로서, 온라인에서는 온라인 동영상 강의, 소셜 스터디, 정보공유 등을 진행하는 웹동네(http://www.webdongne.com) 사이트를 운영 중이며 오프라인에서는 맞춤형 스터디, 정보 공유 세미나, 실무 특강을 진행할 수 있는 웹동네 모임 공간을 운영하고 있습니다.

  • [05부] 자바스크립트 클래스와 클래스 단위 프로그래밍
    •  
    • ▣ 01장: 자바스크립트 클래스 기초
      • Lesson 01. 클래스 소개
          1. 클래스를 이해하기 위해 반드시 알고 있어야 하는 내용
          1. 클래스란?
          1. 자바스크립트에서 클래스란?
      • Lesson 02. 클래스 관련 기본 개념과 용어정리
          1. 인스턴스
          1. 객체란?
          1. 프로퍼티
          1. 메서드
      • Lesson 03. 오브젝트 리터럴 방식으로 클래스 만들기
          1. 사용법
          1. 예제
          1. 특징
          1. 실무에서 오브젝트 리터럴 사용 예
      • Lesson 04. 함수 방식으로 클래스 만들기
          1. 사용법
          1. 예제
          1. 특징
      • Lesson 05. 프로토타입 방식으로 클래스 만들기
          1. 사용법
          1. 예제
          1. 특징
      • Lesson 06. 클래스 정의 방법 3가지 비교
          1. 특징
          1. 클래스 정의 방법(포장법) 비교
          1. 인스턴스 생성 방법
          1. 객체 외부에서 프로퍼티와 메서드 접근 방법
          1. 객체 내부에서 프로퍼티와 메서드 접근 방법
      • Lesson 07. 미션
    •  
    • ▣ 02장: 클래스 중급
      • Lesson 01. this의 정체
          1. this란?
          1. 일반 함수에서의 this
          1. 일반 중첩 함수에서의 this
          1. 이벤트 리스너에서의 this
          1. 메서드에서의 this
          1. 메서드 내부의 중첩 함수에서의 this
      • Lesson 02. 함수호출() vs. new 함수호출()
          1. 함수호출()
          1. new 함수호출()
      • Lesson 03. 함수 단위 코딩 vs. 클래스 단위 코딩
          1. 함수 단위 코딩 1
          1. 함수 단위 코딩 2
          1. 클래스 단위 코딩
      • Lesson 04. 인스턴스 프로퍼티와 메서드 vs. 클래스 프로퍼티와 메서드
          1. 인스턴스 프로퍼티와 메서드
          1. 클래스 프로퍼티와 메서드
      • Lesson 05. 패키지
          1. 패키지란?
          1. 일반 프로그래밍에서 패키지
          1. 자바스크립트에서 패키지
    •  
    • ▣ 03장: jQuEry 플러그인 제작
      • Lesson 01. jQuery 확장 소개
          1. jQuery 확장이란?
          1. jQuery 확장 요소 종류
      • Lesson 02. jQuery 유틸리티 만들기
          1. 유틸리티 소개
          1. 유틸리티 구조
          1. 사용자 정의 jQuery 유틸리티 만들기
      • Lesson 03. jQuery 플러그인 만들기
          1. jQuery 플러그인 소개
          1. jQuery 플러그인 구조
          1. jQuery 플러그인 구조 분석
          1. 사용자 정의 jQuery 플러그인 만들기
          1. 다음 내용 예고
      • Lesson 04. 함수 기반 플러그인 만들기
          1. 구문
          1. 예제
          1. 정리
      • Lesson 05. 클래스 기반 플러그인 만들기
          1. 문법
          1. 예제
          1. 정리
      • Lesson 06. 플러그인 그룹 만들기
          1. 소개
          1. 예제
          1. 결론
      • Lesson 07. extend() 메서드를 활용한 플러그인 옵션 처리
          1. 기본 옵션값
          1. jQuery의 extend() 메서드 소개
          1. extend() 메서드를 활용한 플러그인 옵션 처리
      • Lesson 08. 미션
    •  
  • [06부] 자바스크립트 객체지향 프로그래밍
    •  
    • ▣ 01장: 객체지향 프로그래밍 기초
      • Lesson 01. 절차지향 프로그래밍 vs. 객체지향 프로그래밍
          1. 절차지향 프로그래밍
          1. 객체지향 프로그래밍
          1. 절차지향 프로그래밍 vs. 객체지향 프로그래밍
      • Lesson 02. 객체지향 프로그래밍의 특징
          1. 객체지향 프로그래밍이란?
          1. 객체지향 프로그래밍 언어란?
          1. 객체지향 프로그래밍 언어 학습법
          1. 자바스크립트는 객체지향 프로그래밍 언어인가요?
      • Lesson 03. 객체지향 프로그래밍 언어에서 제공하는 기본 기능
          1. 기본 기능 종류
          1. 선언 부분과 구현 부분
          1. 클래스
          1. 인터페이스
          1. 추상 클래스(abstract class)
          1. UML 소개
      • Lesson 04. 이번 장을 마치며
    •  
    • ▣ 02장: 객체지향 프로그래밍 특징 01-추상화
      • Lesson 01. 추상화 소개
          1. 추상화란?
          1. 예제
      • Lesson 02. 자바스크립트에서 추상화
          1. 일반 OOP에서 지원하는 추상화
          1. 자바스크립트에서 추상화
      • Lesson 03. 미션
    •  
    • ▣ 03장: 객체지향 프로그래밍 특징 02-캡슐화
      • Lesson 01. 캡슐화 소개
          1. 캡슐화란?
          1. 예제
      • Lesson 02. 자바스크립트에서의 캡슐화
          1. 일반 OOP에서 지원하는 캡슐화 관련 기능
          1. 자바스크립트에서 캡슐화
      • Lesson 03. 미션
    •  
    • ▣ 04장: 객체지향 프로그래밍 특징 03-클래스 상속 기초
      • Lesson 01. 클래스 상속 소개
          1. 클래스 상속이란?
          1. 상속은 이럴 때 사용해요
      • Lesson 02. 클래스 상속 기능
          1. 코드 재사용
          1. 중복 코드 제거
          1. 확장
      • Lesson 03. 자바스크립트에서 클래스 상속
          1. 일반 OOP에서 클래스 상속
          1. 자바스크립트에서 클래스 상속
      • Lesson 04. 미션
    •  
    • ▣ 05장: 객체지향 프로그래밍 특징 03-클래스 상속 중급
      • Lesson 01. 자식 클래스와 부모 클래스 연동처리
          1. 자바스크립트 최상위 부모 Object 클래스
          1. 자바스크립트에서 부모생성자 호출하기
      • Lesson 02. 자바스크립트에서 메서드 오버라이드
          1. 메서드 오버라이드란?
          1. 부모 클래스의 기능을 자식 클래스에서 재정의
          1. 부모 클래스의 기능을 자식 클래스에서 확장
      • Lesson 03. 자바스크립트에서 메서드 오버로딩
          1. 자바스크립트에서 메서드 오버로딩
          1. 문법
          1. 예제
      • Lesson 04. constructor 프로퍼티 활용
          1. constructor 프로퍼티 소개
          1. 예제
      • Lesson 05. 클래스 상속 규칙
          1. 클래스 상속은 이럴 때 사용하면 안 되요
          1. 예제
    •  
    • ▣ 06장: 객체지향 프로그래밍 특징 04-다형성
      • Lesson 01. 다형성 소개
          1. 다형성이란?
          1. 예제
      • Lesson 02. 다형성과 데이터 타입과의 관계
          1. 일반 객체지향 프로그래밍에서 데이터 타입의 의미
          1. 일반 객체지향 프로그래밍에서 다형성의 의미
          1. 정리
      • Lesson 03. 자바스크립트에서 다형성
          1. 일반 객체지향 프로그래밍의 다형성 관련 문법
          1. 자바스크립트에서 다형성
      • Lesson 04. 미션
    •  
    • ▣ 07장: 합성
      • Lesson 01. 합성 소개
          1. 합성이란?
          1. 예제
      • Lesson 02. 클래스 상속 vs. 합성
          1. 공통점
          1. 사용 용도
          1. 실무에서는 상속보다는 합성을 많이 사용합니다
          1. 정리
    •  
  • [07부] 실무활용! OOP를 적용한 UI 콘텐츠 제작
    •  
    • ▣ 01장: 1단 바메뉴
      • Lesson 01. 분석하기
          1. 소개 및 미리보기
          1. 요구사항
          1. 용어정리
          1. 출력효과
          1. 동작효과
      • Lesson 02. 구현하기
    •  
    • ▣ 02장: 폴더 아코디언
      • Lesson 01. 분석하기
          1. 소개 및 미리보기
          1. 요구사항
          1. 용어정리
          1. 출력효과
          1. 동작 효과
      • Lesson 02. 구현하기
    •  
    • ▣ 03장: 이미지 슬라이더
      • Lesson 01. 분석하기
          1. 소개 및 미리보기
          1. 요구사항
          1. 용어정리
          1. 출력효과
          1. 동작효과
      • Lesson 02. 구현하기
    •  
    • ▣ 04장: 탭패널
      • Lesson 01. 분석하기
          1. 소개 및 미리보기
          1. 요구사항
          1. 용어정리
          1. 출력효과
          1. 동작효과
      • Lesson 02. 구현하기
  • XXXVI 페이지 위키북스 홈페이지 주소

    www.wekibook.co.kr --> www.wikibook.co.kr

  • 36쪽

    첫 번째 탭메뉴(#tabMenu) --> 첫 번째 탭메뉴(#tabMenu1)

  • 82쪽 2번째 줄

    코그가 --> 코드가

  • 85쪽, 1번째 줄

    프로퍼티와 메서드를 접근 방법 역사 --> 프로퍼티와 메서드 접근 방법 역시

  • p.90 하단 우측의 소스 설명

    6단 출력 : this.print99dan(3); --> this.print99dan(6);

    9단 출력 : this.print99dan(3); --> this.print99dan(9);

  • 117쪽, [예제02]에서

    출려 --> 출력

  • p.124, 코드 설명

    MyClass.prototype.method --> MyClass.prototype.method1

  • 128쪽, [예제01] 코드 아래에서 2번째 줄

    uesrName --> userName

  • 129쪽, [예제02] 코드 아래에서 2번째 줄

    uesrName --> userName

  • 143쪽, 다섯번째 줄

    ddan.uitls = {} --> ddan.utils = {}

  • 239쪽, 상단 그림 설명

    부모 클랫로 --> 부모 클래스로

  • p.280, 소스 8번째 줄

    .[공백]method2 --> .method2

  • p.280, 소스 최하단

    classB.ethod2 --> classB.method2

  • p.282, function MyParent 부분

    this.properoty --> this.property1

  • p.307, 하단

    funtion --> function

  • p.310, 그림 우측 코드 조각

    metodh1 --> method1

  • p.310, 본문 밑에서 2번째 줄

    아니라 뷰모의 기능을 --> 아니라 부모의 기능을

  • p.324, 밑에서 3번째 줄

    밀티탭과 전원 케이블 --> 멀티탭과 전원 케이블

  • p.335, 하단 그림의 클래스 1, 클래스 2, 클래스 3 안의 두 번째 function 선언부를 모두 function 기능1()에서 function 기능2()로 수정

  • p.336, 요구사항 3번 항목

    램덤정렬 --> 랜덤정렬

  • 393쪽, 소스코드(2군데 모두)

    var height = $("#target").width();

    -->

    var height = $("#target").height();

  • 413쪽, 하단 실행화면 그림의 캡션

    • 좌측 상단: 아래에서 위로 롤링되는 효과
    • 우측 상단: 위에서 아래로 롤링되는 효과
    • 좌측 하단: 오른쪽에서 왼쪽으로 롤링되는 효과
    • 우측 하단: 왼쪽에서 오른쪽으로 롤링되는 효과
  • 414쪽, 첫 번째 줄

    기존 롤랭 배너에 --> 기존 롤링 배너에

관련 글