웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

01. 자바스크립트 기본 문법

• 자바스크립트 언어 연결
• 주석 달기
• 데이터 출력
• 데이터 유형
• 사칙 연산자와 비교 연산자

02. 자바스크립트 변수

• 변수 선언, 할당, 초기화, 브라우저 출력
• 변수 이름 규칙
• 변수에 담는 데이터 유형
• 변수의 재 선언
• 변수의 사용 이유
• 변수와 함수를 이용해서 프로그램 만들기(평균 구하기)
• ES2015 백틱(`)과 템플릿 문자열

03. 자바스크립트 조건문 if, switch 문

• 기본 if else 조건문
• 다중 if 조건문
• 논리 연산자
• 중첩 if 조건문
• switch 문
• 삼항 연산자
• if와 '?'를 사용한 조건 처리

04. 자바스크립트 반복문 - while문, do while문, for문

• 복합 대입 연산자
• 증감 연산자
• while 반복문
• do while 반복문
• for 반복문
• 중첩 for 반복문

05. 자바스크립트 배열과 for in 문

• 배열(Array)
• 배열과 for 문
• for in 문
• break 키워드
• continue 키워드

06. 자바스크립트 함수(function)

• 함수 선언과 호출
• 매개 변수와 리턴 키워드
• 변수식 함수 선언
• 내장 함수
• 즉시 실행 함수
• 함수 표현식, 화살표 함수

07. 자바스크립트 객체와 생성자 함수

• 객체의 종류
• 객체의 선언과 호출
• 변수, 배열, 객체 개념 비교
• this 키워드
• 생성자 함수와 프로토타입(Prototype) 

08. 자바스크립트 기본 내장 객체

• String 문자열
• Number 숫자 & Math 수학
• Array 배열의 속성과 메세드
• Date 날짜
• Date 객체의 Getter와 Setter 메서드

09. BOM(Browser Object Model) : 브라우저 객체 

• BOM(Browser Object Model)
• window 객체 속성과 메서드

10. DOM(Document Object Model) : 문서 객체 

• DOM 문서 객체란?
• DOM 문서 객체 가져오는 메서드
• DOM 문서 객체 준비 구문 메서드(onload)
• 문서 객체의 속성과 메서드
• 이벤트 객체의 속성과 메서드 
• 마우스 & 키보드 이벤트 객체의 속성과 메서드

11. HTML DOM Node

• HTML DOM Node 란?
• HTML DOM Node 간의 탐색

12. 자바스크립트 - 문서 객체 속성

• 문서 객체 - 폼(Form)
• 문서 객체 - 클래스 속성
• 문서 객체 - 영역 속성
• 문서 객체 - dataset 속성

13. 자바스크립트 실전 예제

• 마우스 클릭해서 부드럽게 스크롤되며 이동시키기
• 디지털 시계 만들기(방법 1)
• 디지털 시계 만들기(방법 2)
• 모달(Modal) 띄우기(1)
• 모달(Modal) 띄우기(2) 
• 스톱워치(StopWatch) 만들기(분:초:밀리초)
• 스톱워치(StopWatch) 만들기(시:분:초)
• 가위 바위 보(Rock Paper Scissors) 게임 만들기
• 계산기 만들기 with Grid(인라인 자바스크립트 방식)
• 계산기 만들기 with Grid(함수 매개변수 호출 방식)

01. 제이쿼리 연결 및 기본 문법

• 제이쿼리 연결 - 다운로드 후 링크 방식
• 제이쿼리 연결 - CDN 링크 방식
• 제이쿼리 기본 문법 - 스크립트 작성 위치/주석

02. 제이쿼리 필수 메서드 Part1

• CSS 스타일 변경 메서드 
• 요소 찾기 메서드
• 마우스 이벤트 함수(function) 만들기 & 제이쿼리 변수(variables)
• 클래스 추가 제거 메서드
• 이펙트 메서드
• 텍스트 관련 메서드 
• 속성 관련 메서드 
• 동적으로 html 요소 삽입/제거
• width, height 관련 메서드 
• 위치 관련 메서드 
• 요소의 스크롤 위치 메서드 
• 복사 및 감싸기 관련 메서드 
• 이벤트 종류(마우스 이벤트, 키보드 이베트, 폼 관련 이벤트)

03. 제이쿼리 필수 메서드 Part2

• 애니메이션 효과 animate()
• 개별 문서를 페이지의 원하는 곳에 불러오는 load() 메서드

04. 제이쿼리 실전 예제

• 3가지 타입 이미지 슬라이더 만들기제이쿼리 탭 메뉴 콘텐츠 
• 제이쿼리 어코디언 콘텐츠
• 푸터 패밀리사이트 커스텀 셀렉스(select) 박스
• input color를 사용해 배경색 바꾸기 
• 마우스 내리면 CSS 변화와 부드럽게 상단 찾아가기  
• 부드럽게 스크롤링 되면서 각각 섹션 찾아가기     
• 폰트 사이즈 증가 감소 막대 만들기
• 폰트 사이즈 증가 감소 버튼 만들기
• 라이트모드 & 다크모드 전환하기   
• 파일 업로드 폼 만들기
• 프로필 사진 업로드 폼 만들기
• 체크박스 체크하면 안보이는 입력 필드 보이게 하기
• 더 보기 버튼 누르면 숨겨진 내용 로드(load) 하기
• 썸네일 이미지 누르면 큰 이미지 보이는 사진 갤러리
• 비밀번호 입력 값 보이기 감추기 with 폰트아이콘
• 텍스트 입력상자(textarea) 글자수 체크하기 
• 마우스 포인터 따라 다니는 돋보기 기능 만들기
• 마우스 스크롤에 따라 페럴렉스 효과(Parallax Effect)
• 모바일 하단의 아이콘 탭 바 네비게이션 만들기
• 할 일(To Do List) 만들기
• 슬라이더(이전 다음 버튼, Autoplay 제어 버튼)
• 슬라이더(자동 Autoplay, 마우스 오버 멈추고 빠지면 다시 시작)
• 폼 입력 필드 클릭하면 텍스트 올라가는 애니메이션
• 이미지 호버 이펙트를 제이쿼리 animate로 만들기
• 사이드바 네비게이션으로 숨겨진 콘텐츠 열기
• 사진 갤러리 라이트박스(Lightbox) 만들기
• 반응형 애니메이션 모달 띄우기
• Front Back 트랜지션 화면전환

05. 제이쿼리 플러그인 사용법

• 제이쿼리 슬라이더 플러그인 Slick Slider 사용법
• 제이쿼리 타이핑 플러그인 Typed.js 사용법
• 제이쿼리 라이트박스 플러그인 featherlight.js 사용법
• 제이쿼리 카운트다운 타이머 플러그인  The Final Countdown

※ 해당 제이쿼리 교재에서 Ajax 사용법은 다루지 않습니다.

현) 국비 퍼블리싱 & 프론트엔드 강사 
현) 프리랜서 프론트엔드 퍼블리셔
현) HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
그린 컴퓨터 아카데미 웹 퍼블리싱 강사
더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
UI/UX 웹 디자인 포트폴리오 강의
웹디자인 기능사 실기 자격증반 강의
이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks

🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351

🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs

🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks