본문 바로가기

Javascript

자바스크립트 기초 강의 목차

1. 자바스크립트 초급 강의

  1. 변수와 상수의 이해 var, let, const
  2. 자료형의 변환
  3. 연산자 기초
  4. 템플릿 리터럴의 기초
  5. Null, Undefined, 0
  6. 원시형 데이터 타입과 참조형 데이터 타입의 이해
  7. 함수 파라메터의 이해
  8. 숫자 표시와 변환
  9. 에러 발생과 예외 처리
  10. 함수의 이해
  11. 나머지 파라메터(Rest Parameter)의 이해
  12. 화살표 함수
  13. 반복문 기초1 - for
  14. 반복문 기초2 - while
  15. 조건문 기초 - if, switch
  16. 모듈(Module)의 이해
  17. Get, Set을 이용한 객체 속성의 정의
  18. 클래스의 정적 속성과 정적 메서드의 이해
  19. 클래스 상속(Inherit)의 이해
  20. 생성자 함수(Constructor Function)의 이해
  21. 클래스(Class)의 이해
  22. 클로저(Closure)의 이해
  23. 변수 선언자 var 의 스코프와 스코프 체인
  24. 객체의 단축 속성명, 단축 메서드명, 계산된 속성명
  25. 객체 속성의 추가, 수정, 삭제
  26. 객체의 이해
  27. location.href 와 location.replace() 의 차이와 구분 사용 방법
  28. HTML, CSS, Javascript 코딩과 테스트를 할 수 있는 클라우드 기반 프론트엔드 에디터 JSBin
  29. ES2015, ES2016, ES2017, ES6, ES7, ES8 ? 자바스크립트 버전의 이해
  30. DOMContentLoaded 로 HTML DOM 데이터를 초기화하기


2. 자바스크립트 중급 강의

  1. 문자열과 문자열 객체의 차이
  2. 문자열의 공백 제거하기
  3. 문자열 자르기
  4. 문자열이 아닌 데이터를 문자열로 변환하기
  5. 문자열 찾기
  6. 문자열 바꾸기와 대소문자 변환하기
  7. 문자열 합치기
  8. 문자열 리터럴과 템플릿 리터럴, 그리고 태그드 템플릿
  9. 긴 문자열과 여러줄로 된 문자열 사용
  10. 문자열을 배열로 만들기
  11. 배열의 기초
  12. 2차원 배열과 다차원 배열 그리고 중첩 배열
  13. 배열의 누적 합을 구하기
  14. 배열의 조건 체크와 조건을 만족하는 요소만 얻기
  15. JSON 데이터를 배열로 만들기
  16. 배열 요소의 추가
  17. 배열의 순환(forEach, map)
  18. 배열 정렬하기
  19. 배열 검색하기
  20. 배열 요소를 추출하기
  21. 배열 요소의 추가, 변경, 삭제하기
  22. 배열 합치기
  23. 날짜 표시와 변환


3. 자바스크립트 고급 강의

  1. 맵(Map)의 이해
  2. 셋(Set)의 이해
  3. 타이머를 이용한 지연 실행과 반복 실행
  4. AJAX 비동기 통신 기초(XMLHttpRequest)
  5. XMLHttpRequest 객체 호환성 구현
  6. AJAX 와 JSON
  7. 프로미스(Promise) 기초
  8. 프로미스 Async/Await
  9. 더 간편한 프로미스(Promise)를 위한 패치(Fetch)
  10. HTML 테이블을 엑셀 파일로 저장하기
  11. HTML 테이블을 CSV 파일로 다운로드 하기
  12. 마우스 우클릭과 드래그 영역 선택을 막기
  13. 자리수 만큼 남는 공간을 0으로 채우기


4. DOM 과 HTML 제어

  1. scrollHeight, clientHeight, offsetHeight 의 차이
  2. DOM 노드의 생성, 수정, 삭제 기초
  3. DOM 노드와 속성의 이해
  4. 문서 객체 모델(DOM)과 노드, 그리고 태그의 이해
  5. DOM 이벤트 기초
  6. 이벤트 캡쳐링(Capturing)과 버블링(Bubbling)의 이해
  7. DOM 엘리먼트 노드의 CSS 관리
  8. JSON 데이터로 HTML 내용 추가하기
  9. 이벤트 타입과 속성의 이해
  10. 폼 요소(Element) 선택과 제어
  11. 아이프레임 제어와 데이터 교환
  12. URL과 히스토리 제어 기초
  13. HTML 데이터셋(Dataset, data-*) 속성의 이해
  14. CSS 쿼리 선택자 기초
  15. 입력 필드 글자수 카운팅과 입력 길이 제한
  16. append() 와 appendChild()의 차이
  17. remove() 와 removeChild() 의 차이
  18. 마우스 중복 클릭 막기
  19. stopPropagation() 과 preventDefault() 의 차이


5. 자바스크립트 활용팁/실전예제

  1. 자바스크립트 event.keyCode 코드표
  2. location 객체와 URL 을 이해하자.
  3. 쿼리 스트링 문자열을 받아서 JSON 문자열을 리턴하는 자바스크립트 함수
  4. 정규식으로 정상 이메일 주소 여부 체크하기
  5. 키/벨류 객체를 배열로 변환하기
  6. != 과 !== 연산자의 차이점 이해
  7. 정규표현식으로 replace를 replaceAll 처럼 사용하기
  8. 복사해서 바로 사용하는 자주 사용하는 정규표현식(Regular Expression) Top 20
  9. Null(널) 과 Undefined는 다르다.
  10. 모바일 기기 체크하기
  11. HTML 테이블과 아이프레임의 반응형 웹 지원 추가

  12. 탑 스크롤 애니메이션 구현하기
  13. 업로드 할 이미지 파일 미리보기 구현하기
  14. 쇼핑몰 상세보기화면 더보기/감추기 구현
  15. 이벤트 위임으로 메뉴 선택 구현하기
  16. 쿠키로 개인화 데이터 관리하기
  17. 무한 롤링 이미지 배너 구현 - 1. 무한롤링 구현
  18. 무한 롤링 이미지 배너 구현 - 2. 앞뒤 이동 버튼 구현
  19. 자바스크립트 반응형 레이아웃 구현 방법
  20. 슬라이딩 모바일 메뉴 구현
  21. To Do List 앱 구현하기
  22. 프로토타입으로 별점 댓글 기능 구현하기
  23. 장바구니 수량 변경 및 자동 합계 구하기



















'Javascript' 카테고리의 다른 글

자바스크립트 기초 강의 목차  (5) 2020.06.25
  • 비밀댓글입니다

    • 반응형 스킨은 구조상 모바일 화면에 사이드 메뉴쪽으로 카테고리가 붙기 때문에 사이드바를 없애는 것 자체는 불가능합니다.
      모바일 화면처럼 좌상단에 아이콘으로 표시되는 형태로 감춤을 하는 정도가 가능한 정도일 겁니다.

      style.css
      216행
      #header .mobile-menu{
      display: block;
      top: 10px;
      left: 10px;
      }
      이렇게 속성을 수정해줘야 하고

      522행
      .sidebar{
      display: none;
      }

      735행
      #content{
      width: 1060px;
      }

      그리고 검색 바꾸기로
      940px -> 1060px
      으로 style.css 를 전체 수정하면

      사이드바 없는 스킨으로 사용할 수 있습니다.

  • 와. 어포스트님 어포스트님 사이트에 문제가 있습니다..

    감사댓글을 달려고 하는데 로그인을 했는데 해야 댓글을 달수 있다고...
    저번에도 그래서 감사댓글을 못달고 넘어갔습니다.

    지금은 어떻게 운좋게 로그인이 되었습니다.
    티스토리 문제인지 어떤 문제인지는 모르겠네요...


    아 그리고 부탁드리고자 했던건
    스킨에 링크텍스트 색상을 변경하고 싶은데
    도와주실 수 있을까요?

    항상 감사드립니다
    스킨 잘쓰고있습니다~#!!!

    • 로그인 문제 등은 티스토리 시스템 상의 문제입니다. 정확하게는 웹브라우저가 버전업되면서 티스토리가 도메인 매핑을 해주는 기능이 정상 동작하지 않고 있습니다.
      구조적인 한계가 있는 문제여서 사실상 해결은 쉽지 않습니다.

      해당 내용은 티스토리 공지를 보시면 됩니다.
      https://notice.tistory.com/2546?category=110385

      스킨 링크 컬러는 스킨 옵션 설정에서
      공통페이지 -하이라이트 테마/컬러
      를 변경하시면 됩니다.
      기본 테마 컬러가 바뀌는 것입니다.
      하이퍼링크 컬러만 변경하려면 변경할 내용이 많아집니다.
      적용해보시고 부족한 부분이 있으면 다시 질문을 하시기 바랍니다.

  • pc접속시 왼쪽 하단에 플롯 버튼에 로그인하기 버튼을 몇번이고 눌러도 로그인으로 인식을 하지 않습니다.
    댓글을 달 수가 없었습니다.


닫기