자바스크립트 기초 강의 목차
1. 자바스크립트 초급 강의
- 변수와 상수의 이해 var, let, const
- 자료형의 변환
- 연산자 기초
- 템플릿 리터럴의 기초
- Null, Undefined, 0
- 원시형 데이터 타입과 참조형 데이터 타입의 이해
- 함수 파라메터의 이해
- 숫자 표시와 변환
- 에러 발생과 예외 처리
- 함수의 이해
- 나머지 파라메터(Rest Parameter)의 이해
- 화살표 함수
- 반복문 기초1 - for
- 반복문 기초2 - while
- 조건문 기초 - if, switch
- 모듈(Module)의 이해
- Get, Set을 이용한 객체 속성의 정의
- 클래스의 정적 속성과 정적 메서드의 이해
- 클래스 상속(Inherit)의 이해
- 생성자 함수(Constructor Function)의 이해
- 클래스(Class)의 이해
- 클로저(Closure)의 이해
- 변수 선언자 var 의 스코프와 스코프 체인
- 객체의 단축 속성명, 단축 메서드명, 계산된 속성명
- 객체 속성의 추가, 수정, 삭제
- 객체의 이해
- location.href 와 location.replace() 의 차이와 구분 사용 방법
- HTML, CSS, Javascript 코딩과 테스트를 할 수 있는 클라우드 기반 프론트엔드 에디터 JSBin
- ES2015, ES2016, ES2017, ES6, ES7, ES8 ? 자바스크립트 버전의 이해
- DOMContentLoaded 로 HTML DOM 데이터를 초기화하기
2. 자바스크립트 중급 강의
- 문자열과 문자열 객체의 차이
- 문자열의 공백 제거하기
- 문자열 자르기
- 문자열이 아닌 데이터를 문자열로 변환하기
- 문자열 찾기
- 문자열 바꾸기와 대소문자 변환하기
- 문자열 합치기
- 문자열 리터럴과 템플릿 리터럴, 그리고 태그드 템플릿
- 긴 문자열과 여러줄로 된 문자열 사용
- 문자열을 배열로 만들기
- 배열의 기초
- 2차원 배열과 다차원 배열 그리고 중첩 배열
- 배열의 누적 합을 구하기
- 배열의 조건 체크와 조건을 만족하는 요소만 얻기
- JSON 데이터를 배열로 만들기
- 배열 요소의 추가
- 배열의 순환(forEach, map)
- 배열 정렬하기
- 배열 검색하기
- 배열 요소를 추출하기
- 배열 요소의 추가, 변경, 삭제하기
- 배열 합치기
- 날짜 표시와 변환
3. 자바스크립트 고급 강의
- 맵(Map)의 이해
- 셋(Set)의 이해
- 타이머를 이용한 지연 실행과 반복 실행
- AJAX 비동기 통신 기초(XMLHttpRequest)
- XMLHttpRequest 객체 호환성 구현
- AJAX 와 JSON
- 프로미스(Promise) 기초
- 프로미스 Async/Await
- 더 간편한 프로미스(Promise)를 위한 패치(Fetch)
- HTML 테이블을 엑셀 파일로 저장하기
- HTML 테이블을 CSV 파일로 다운로드 하기
- 마우스 우클릭과 드래그 영역 선택을 막기
- 자리수 만큼 남는 공간을 0으로 채우기
4. DOM 과 HTML 제어
- scrollHeight, clientHeight, offsetHeight 의 차이
- DOM 노드의 생성, 수정, 삭제 기초
- DOM 노드와 속성의 이해
- 문서 객체 모델(DOM)과 노드, 그리고 태그의 이해
- DOM 이벤트 기초
- 이벤트 캡쳐링(Capturing)과 버블링(Bubbling)의 이해
- DOM 엘리먼트 노드의 CSS 관리
- JSON 데이터로 HTML 내용 추가하기
- 이벤트 타입과 속성의 이해
- 폼 요소(Element) 선택과 제어
- 아이프레임 제어와 데이터 교환
- URL과 히스토리 제어 기초
- HTML 데이터셋(Dataset, data-*) 속성의 이해
- CSS 쿼리 선택자 기초
- 입력 필드 글자수 카운팅과 입력 길이 제한
- append() 와 appendChild()의 차이
- remove() 와 removeChild() 의 차이
- 마우스 중복 클릭 막기
- stopPropagation() 과 preventDefault() 의 차이
5. 자바스크립트 활용팁/실전예제
- 자바스크립트 event.keyCode 코드표
- location 객체와 URL 을 이해하자.
- 쿼리 스트링 문자열을 받아서 JSON 문자열을 리턴하는 자바스크립트 함수
- 정규식으로 정상 이메일 주소 여부 체크하기
- 키/벨류 객체를 배열로 변환하기
- != 과 !== 연산자의 차이점 이해
- 정규표현식으로 replace를 replaceAll 처럼 사용하기
- 복사해서 바로 사용하는 자주 사용하는 정규표현식(Regular Expression) Top 20
- Null(널) 과 Undefined는 다르다.
- 모바일 기기 체크하기
- HTML 테이블과 아이프레임의 반응형 웹 지원 추가
- 탑 스크롤 애니메이션 구현하기
- 업로드 할 이미지 파일 미리보기 구현하기
- 쇼핑몰 상세보기화면 더보기/감추기 구현
- 이벤트 위임으로 메뉴 선택 구현하기
- 쿠키로 개인화 데이터 관리하기
- 무한 롤링 이미지 배너 구현 - 1. 무한롤링 구현
- 무한 롤링 이미지 배너 구현 - 2. 앞뒤 이동 버튼 구현
- 자바스크립트 반응형 레이아웃 구현 방법
- 슬라이딩 모바일 메뉴 구현
- To Do List 앱 구현하기
- 프로토타입으로 별점 댓글 기능 구현하기
- 장바구니 수량 변경 및 자동 합계 구하기