수코딩

초급

핵심만 골라 배우는 JavaScript

프론트엔드 입문자들은 필수적으로 익혀야하는 Javascript 문법! 기초부터 시작해서 고급에 이르기까지 javaScript 언어를 샅샅히 파헤쳐봅니다!
  • 19

    19개의 챕터

    체계적인 챕터 구성

  • 227

    227개의 동영상

    평균 7분 내외

  • 30

    약 30 시간

    학습 권장 시간

79,200원

  • 강의소개
코스 소개

핵심만 골라 배우는 Javascript는
[입문자]를 위해 준비한 강좌입니다.

자바스크립트는 10번을 배우더라도 1번을 제대로 배우는 게 중요합니다.
자바스크립트는 단순히 반복하고 여러 번 한다고 배울 수 있는 언어가 아니에요.
가장 근본이 되는 기초 문법부터 고급 문법까지 단계를 차근히 밟아가면서 배워야합니다.
수코딩과 함께라면, 자바스크립트를 제대로 배울 수 있습니다.

혹시 수코딩이 집필한 Javascript 책을 보셨나요?

[코딩 자율학습 HTML+CSS+자바스크립트] 완독 후에 어떻게 공부해야 하냐구요?

수코딩이 집필한 [코딩 자율학습 HTML+CSS+자바스크립트]!! (구매링크)
무료 강의까지 제공하는 이 책을 완독하셨다면, 이제 어떻게 공부해야 할까요?
지금 당장!! [핵심만 골라 배우는 Javascript] 유료 강의를 통해
더 확장되고 넓은 범위의 Javascript를 배워보세요.
책에서는 미처 소개하지 못한 고급 기술을 배울 수 있습니다.

학습 기술

이 강의에서 배울 수 있는 기술

  • ES5

    자바스크립트의 기본 문법이라고 할 수 있는 ES5(ECMAScript2009)를 배울 수 있습니다.

  • ES6 ~ ES14

    아직도 최신 문법이 ES6만이라고 생각하시나요? ES6부터 ES14까지 최신 문법을 배울 수 있습니다.

  • Class, Scope

    클래스, 스코프 많이 어려우셨죠? 수코딩이 단번에 이해가도록 알려드립니다.

  • Closure, Prototype

    자바스크립트의 극악한 난이도인 클로저와 프로토타입도 이해하기 쉽게 알려드립니다.

  • WEB API

    자바스크립트로 다룰 수 있는 Web API(+DOM)도 한 번에 모두 배울 수 있어요.

  • Promise, Async

    Promise와 Async등 현대 자바스크립트 문법의 필수인 비동기 처리도 배울 수 있습니다.

실전 예제

이 강의에서 만들어보는
역대급으로 다양한 미니 프로젝트

practice
Online Practice충실한 기초실습

약 40여개가 넘는 실습을 수코딩 사이트를 통해서 실습할 수 있습니다. 코드 작성 후 제출하면 수코딩이 직접 채점하여 코드 리뷰를 해드립니다.

Note노트 정리

어려운 언어를 배우는데, 노트 정리는 필수죠? 수코딩이 제공하는 약 39개의 노트 정리를 제공합니다.

노트정리
UI실습
DOMUI 실습

DOM을 배우는데, UI가 빠지면 섭섭하잖아요? 실제로 UI를 제공하여 자바스크립트의 적용 방법을 더 생생하게 배워봅니다.

Form로그인 화면

자바스크립트로 조작하는 가장 일반적인 폼인 로그인 화면을 만들어봅니다.

로그인 화면
todo list
TodoTodo List

할일 관리 앱을 만들면서 자바스크립트의 모든 지식을 총 동원하여 학습을 마무리합니다.

추천대상

핵심만 골라 배우는 Javascript는
누가 들으면 좋을까요?

학생1

입문자

자바스크립트를 한 번도 공부한 적이 없는 초보자 & 입문자

학생2

경험자

자바스크립트를 알긴 하지만, 정확하게 안다고 자신할 수 없는 경험자

학생3

실무자

아직도 대충 감으로만 자바스크립트를 사용하는 실무자

학생4

부담없이 쉽게

복잡한 설명 없이 단순하고 쉽게 배우고 싶은 사람

FAQ

자주 묻는 질문

  • Q. 사전에 알고 있어야 하는 선수 지식이 있을까요?

    HTML과 CSS에 대한 기본적인 지식이 필요합니다.

  • Q. 코딩을 전혀 모르는 사람도 강좌를 들을 수 있나요?

    그럼요, 해당 강좌는 코딩을 한 번도 접해본 적 없는 완전 초보자를 대상으로 하여 제작하였기 때문에 아무것도 모르는 사람도 충분히 수강할 수 있습니다.

  • Q. [코딩 자율학습 HTML+CSS+자바스크립트] 책에서 제공되는 무료 강좌와 차이점이 있나요?

    많은 차이가 있습니다. 유료 강좌는 온라인으로 학습하기에 최적화된 커리큘럼을 기반으로 제작했습니다. 따라서 강좌의 내용 구성이 책에서 제공된 무료 강좌와 차이가 크게 납니다. 또한, 책에서는 지면상의 이유로 자세히 설명하지 못했던 부분도 유료 강좌에서는 폭넓게 다루고 있습니다. 그리고 동영상의 편집 및 퀄리티도 압도적으로 유료 강좌가 더 좋습니다.

수코딩이 보장하는

커리큘럼

  • 총 레슨 227개
  • 1. 시작하기(공통)
    • 수코딩 교육 시스템
    • 웹 개발은 어떤 언어로 시작하는 게 좋을까요?
    • 개발 환경 구성하기(with Visual Studio Code)
    • 비주얼 스튜디오 코드 작업 폴더 설정
  • 2. 자바스크립트 시작하기
    • 바닐라 자바스크립트(Vanilla JS)
    • Hello, Javascript!
    • internal, external, inline
    • 자바스크립트 작성법 정리
    • 퀴즈 - 1
    • 주석(Comment)
    • Code Runner
  • 3. 변수
    • 변수(Variable)
    • 변수명 제약 사항
    • 변수명 규칙 정리
    • 변수명 퀴즈
    • 기본 문법 용어
    • let, const
    • ES5? ES6?
    • 콘솔창
    • (실습) 변수 생성
    • (해설) 변수 생성
  • 4. 기본 자료형
    • 데이터와 값
    • 데이터와 값 정리
    • 문자열형(String)
    • 템플릿 문자열
    • (실습) 문자열형 실습
    • (정답) 문자열형 실습
    • 숫자형(Number)
    • (실습) 숫자형 실습
    • (정답) 숫자형 실습
    • 논리형
    • 특수 자료형
    • 심볼형(Symbol)
    • 논리&특수 자료형 퀴즈
    • 기본 자료형 정리
  • 5. 참조 자료형
    • 배열(array)
    • [실습] 배열 실습
    • [정답] 배열 실습
    • 객체 리터럴(object literal)
    • 객체 리터럴 정리
    • 함수(function)
    • (실습)구구단
    • (정답)구구단
    • 얕은 복사와 깊은 복사
  • 6. 연산자
    • 연산자란?
    • 산술 연산자
    • 산술 연산자 우선순위
    • 문자열 연결 연산자
    • 복합 대입 연산자
    • 비교 연산자
    • (실습) 비교 연산자
    • (해설) 비교 연산자
    • 삼항 연산자
    • 증감 연산자
    • 논리 연산자
    • (실습) BMI
    • (해설) BMI
  • 7. 조건문과 반복문
    • if, else if, else
    • 학점 계산기
    • (풀이) 학점 계산기
    • switch
    • (실습) 학점 계산기 v2
    • (풀이) 학점 계산기 v2
    • 반복문이란?
    • while
    • do while
    • for
    • (실습)구구단 출력하기
    • (해설)구구단 출력하기
    • for in, for of
    • 다중 반복문
    • break, continue
    • (실습) 암스트롱 수
    • (해설) 암스트롱 수
  • 8. 함수
    • 함수를 시작하면서
    • (실습) 복습하기
    • 인수와 매개변수
    • 가변 인자 함수
    • return
    • (실습) 제곱근 구하기
    • (해설) 제곱근 구하기
    • 객체와 함수
    • 화살표 함수
  • 9. 스코프
    • 스코프
    • 스코프 정리
    • 내부 함수와 스코프
    • 블록 레벨 스코프
    • 암묵적 전역 변수
    • (퀴즈) 스코프
    • (해설) 스코프
  • 10. 실행 컨텍스트와 클로저
    • 자바스크립트 코드 실행 과정
    • 스택
    • 실행 컨텍스트
    • 렉시컬 환경
    • 스코프 다시 바라보기
    • 클로저
    • 클로저를 사용하는 이유
    • 호이스팅
    • (실습) 호이스팅
    • (해설) 호이스팅
    • 즉시 실행 함수
  • 11. 동기와 비동기
    • 동기
    • 비동기
    • callback
    • callback hell
    • promise - 1
    • promise chaining
    • promise 활용
    • async, await
    • async, await 에러 핸들링
  • 12. 객체
    • 객체 복습
    • 객체 데이터 정리
    • in, with
    • 생성자 함수
    • 생성자 함수 정리
    • 생성자 함수와 this
    • 함수는 객체다
    • 프로토타입
    • 프로토타입 체인
    • 프로토타입 활용
    • 프로토타입 체인 심화
    • 프로토타입 정리
    • (실습)프로토타입
    • (해설)프로토타입
  • 13. 표준 내장 객체
    • 표준 내장 객체란?
    • object 객체
    • 리터럴(literal)이란?
    • 리터럴 정리
    • string 객체
    • String 객체 정리
    • String 객체 실습
    • (정답) String 객체 실습
    • 래퍼 객체
    • Number 객체
    • Number 객체 정리
    • [실습] Number 객체
    • [정답] Number 객체 실습
    • Array 객체
    • Array 객체 정리
    • Date 객체
    • Date 객체 정리
    • [실습] Date 객체
    • [정답] Date 객체
    • Math 객체
    • Math 객체 정리
    • 정규 표현식
  • 14. B.O.M
    • BOM
    • window 객체
    • Window 객체 정리
    • 팝업 만들기
    • location 객체
    • location 객체 정리
    • Screen 객체 정리
    • history 객체
    • history 객체 정리
    • navigator 객체
    • navigator 객체 정리
  • 15. DOM 기본
    • 트리구조
    • 트리구조 정리
    • Document Object Model
    • 노드와 노드의 종류
    • 노드와 노드 종류 정리
    • 앞으로 배울 내용
    • 강의 용어 사용 참고
  • 16. DOM 노드 선택
    • getElement
    • 문서 객체 선택 정리
    • querySelector
    • 노드 관계 탐색 속성 - 1
    • 노드 관계 탐색 속성 - 2
    • 노드 선택 직접 속성
    • DOM 노드 선택 정리
  • 17. DOM 조작
    • 노드 생성
    • HTMLCollection vs NodeList
    • 노드 삭제
    • (실습) 노드 삭제
    • (해설) 노드 삭제
    • 속성 제어 - 1
    • 속성 제어 - 2
    • 속성 제어 - 3
    • 속성 제어 - 4
    • 속성 제어 정리
    • 텍스트 제어 - 1
    • 텍스트 제어 - 2
    • 텍스트 제어 정리
    • 시계(Clock)
    • (해설) Clock
    • 스타일 제어 -1
    • 스타일 제어 - 2
    • 스타일 제어 - 3
    • 스타일 제어 정리
    • contains
    • (실습) 전구 켜기
    • (해설) 전구 켜기
    • DOM Level
  • 18. 이벤트
    • 이벤트란?
    • 이벤트 용어 정리
    • 기본 이벤트 모델
    • 인라인 이벤트 모델
    • 표준 이벤트 모델
    • 이벤트 타입
    • 이벤트 타입
    • 마우스 이벤트
    • (실습)다크모드
    • (해설) 다크모드 해설
    • 이벤트 객체란?
    • 이벤트 객체 정리
    • PointerEvent
    • PointerEvent 객체 정리
    • 키보드 이벤트
    • KeyboardEvent 객체
    • KeyboardEvent 객체
    • 기본 이벤트 제거
    • (실습) 복사 및 붙여넣기 금지
    • (해설) 복사 및 붙여넣기 금지
    • 이벤트와 this
    • (실습) 랜덤 색상
    • (해설) 랜덤 색상
    • 버블링
    • 캡처링
  • 19. (보너스) 폼 제어
    • 폼 전송 막기
    • 입력 요소 값 가져오기
    • 체크박스 값 가져오기
    • 라디오버튼 값 가져오기
    • (실습) 로그인 검증
    • (해설) 로그인 검증
    • TODO 리스트
    • (해설) TODO 리스트

수강생 강의 후기

  • 11명 참여 / 5.0(11 ratings)
5
100%
4
0%
3
0%
2
0%
1
0%
최보아
자바스크립트의 기초를 좀 제대로 다지고 싶어서 시작한..! 이번에도 완강까지 화이팅!!
차유리
자바스크립트 처음 시작하는데, 이 강의 덕분에 너무 쉽게 배운 것 같아요! 강사님이 설명을 정말 친절하게 해주셔서 어려운 부분도 이해가 잘 됐어요. 예제 코드도 많아서 실제로 어떻게 사용하는지 바로 알 수 있었고, 따라 하다 보니 정말 재밌어요! 다른 사람에게도 추천하고 싶어요. 😊
최훈
Java로 시작해서 HTML, CSS까지 다 공부하고있습니다. 초급자는 아니지만 단기간에 정리하기에 너무 좋은 강의입니다.
sophie
자린이도 제법 자신있게 자바스크립트로 코딩할 수 있게 되었습니다!👍🥹✨
김오현
학교 전공 수업을 따라가기 어려워서 유튜브를 통해 알게 되었고, 결제도 해서 많은 도움을 받고 있어요. 진심으로 감사합니다!
백이연
선생님. 자바스크립트 매번 어려워서 중도 포기했는데 너무 친절하게 알려주셔서 끝까지 들을 수 있었습니다. 선생님 강의 스타일이 저랑 잘 맞는 것 같아요!
김민석
수코딩님은 진짜 이 길로 쭉 나가세요. 너무 설명이 친절하고 쉬워서 이해가 쏙쏙 됩니다.
한수진
HTML부터 CSS 그리고 자바스크립트까지 드디어 완강했어요!!!! 와 진짜 너무 감사합니다 선생님!! 선생님 강의 듣고 도움이 많이 되어서 취뽀했어요!!!!
이창용
나만 알고 싶은 강의... 유튜브 강의 내려주세요 선생님... 아니 그냥 코드랑 활용법만 알려주시는 줄 알았는데 JS자료구조까지 이해가 쉽게 이미지도 다 준비하셔서 알려주시고... HTML + CSS +JS 까지 선생님 강의 듣고 완벽해져서 갑니다. 정말 사례라도 하고싶은 강의네요. 이런 강의를 이런 불합리한 가격에 파시다니 선생님은 천사십니까?
수수수숫
여러 자바스크립트 강의를 들어봤지만 이렇게 꼼꼼하게 가르쳐주는 건 처음이었어요! 조금 더 자신감이 생긴다고할까 자바스크립트는 꽝이다 하시는 분들도 보시면 이해가 잘 되실 것 같아요 : )
수코딩 로고수코딩

수코딩은 누구나 쉽게 코딩을 배울 수 있는 온라인 코딩 교육을 만들어갑니다.

대표자: 김기수 | 사업자번호: 208-26-67207 | 통신판매업신고: 2024-성남중원-0311 개인정보관리책임자: 김기수 | 이메일: sucoding@naver.com

유튜브 로고
카카오 채널