close
더북(TheBook)
search
코딩 자율학습 제로초의 자바스크립트 입문
더북(TheBook)
home
Home
Part 1 자바스크립트 기초
1장 Hello, JavaScript!
1.1 자바스크립트를 시작하기 전에
1.1.1 자바스크립트를 배울 때 도움이 되는 자료
1.1.2 Visual Studio Code 설치하기
1.1.3 프로젝트 폴더 선택하기
1.1.4 크롬 설치하기
1.1.5 웹 브라우저 콘솔 사용법 익히기
1.2 프로그래밍 사고력 기르기
1.2.1 프로그래밍 사고력 훈련법
2장 기본 문법 배우기
2.1 코드 작성 규칙
2.1.1 세미콜론
2.1.2 주석
2.1.3 들여쓰기
2.2 자료형
2.2.1 문자열
2.2.2 숫자
2.2.3 불 값
2.2.4 빈 값 사용하기
2.3 변수
2.3.1 let으로 변수 선언하기
2.3.2 변수명 짓기
2.3.3 변수의 값 수정하기
2.3.4 변수 활용하기
2.3.5 const로 상수 선언하기
2.3.6 var 알아두기
2.4 조건문
2.4.1 조건문의 기본 형식
2.4.2 else를 사용해 두 방향으로 분기하기
2.4.3 else if를 사용해 여러 방향으로 분기하기
2.4.4 중첩 if 문 사용하기
2.4.5 switch 문으로 분기하기
2.4.6 조건부 연산자 사용하기
2.5 반복문
2.5.1 while 문으로 반복해서 출력하기
2.5.2 for 문으로 반복해서 출력하기
2.5.3 1부터 100까지 출력하기
2.5.4 break 문으로 반복문 멈추기
2.5.5 continue 문으로 실행 건너뛰기
2.5.6 중첩 반복문 사용하기
2.6 객체
2.6.1 배열
2.6.2 함수
2.6.3 객체 리터럴
2.6.4 함수를 인수로 받는 배열 메서드
2.7 클래스
2.7.1 함수로 객체를 생성하는 방법
2.7.2 this 이해하기
2.7.3 클래스로 객체를 생성하는 방법
2.7.4 클래스 상속하기
3장 심화 문법 배우기
3.1 비동기와 타이머
3.1.1 setTimeout()
3.1.2 setInterval()
3.1.3 clearTimeout()과 clearInterval()
3.2 스코프와 클로저
3.2.1 블록 스코프와 함수 스코프
3.2.2 클로저와 정적 스코프
3.2.3 let과 var를 사용한 결과가 다른 이유
3.3 호출 스택과 이벤트 루프
3.3.1 호출 스택
3.3.2 이벤트 루프
3.3.3 재귀 함수
3.4 프로미스와 async/await
3.4.1 프로미스
3.4.2 async/await
3.4.3 try-catch 문으로 에러 처리하기
4장 HTML과 DOM 조작하기
4.1 HTML 파일 생성하기
4.2 DOM 사용하기
4.2.1 선택자 사용하기
4.2.2 태그의 값에 접근하기
4.3 이벤트와 이벤트 리스너
4.3.1 이벤트 리스너 추가하기
4.3.2 이벤트 리스너 제거하기
4.3.3 키보드와 마우스 이벤트
4.3.4 이벤트 버블링과 캡처링
4.4 다양한 DOM 속성
4.4.1 태그 속성 다루기
4.4.2 부모와 자식 태그 찾기
4.4.3 새로운 태그 만들기
4.5 window 객체
4.5.1 대화상자 사용하기
4.5.2 Math 객체
4.5.3 Date 생성자 함수
Part 2 만들면서 배우는 자바스크립트
5장 DOM 객체 다루기: 끝말잇기
5.1 이 장에서 만드는 프로그램
5.2 화면 만들고 참가자 수 입력받기
5.2.1 화면 만들기
5.2.2 참가자 수 입력받기
5.3 첫 번째 참가자인지 판단하기
5.4 맞는 단어인지 판단하기
5.5 틀린 단어일 때 표시하기
5.6 순서도 최적화하기
마무리
셀프체크
6장 함수 사용하기: 계산기
6.1 이 장에서 만드는 프로그램
6.2 계산기 화면 만들고 이벤트 달기
6.2.1 계산기 화면 만들기
6.2.2 버튼에 이벤트 리스너 추가하기
6.3 고차 함수로 중복 제거하기
6.4 중첩 if 문 줄이기
6.5 결과 계산하기
6.6 계산기 초기화하기
마무리
셀프체크
7장 반복문 사용하기: 숫자야구
7.1 이 장에서 만드는 프로그램
7.2 화면 만들고 숫자 4개 뽑기
7.2.1 화면 만들기
7.2.2 무작위로 숫자 뽑기
7.3 입력값 검사하기
7.4 입력값과 정답 비교하기
7.4.1 홈런 여부와 시도 횟수 검사하기
7.4.2 몇 스트라이크 몇 볼인지 표시하기
마무리
셀프체크
8장 타이머 사용하기: 로또 추첨기
8.1 이 장에서 만드는 프로그램
8.2 화면 만들고 숫자 입력받기
8.3 무작위로 공 뽑고 정렬하기
8.4 공 순서대로 표시하기
8.4.1 async/await로 공을 순서대로 표시하기
8.5 몇 등인지 표시하기
마무리
셀프체크
9장 객체 다루기: 가위바위보 게임
9.1 이 장에서 만드는 프로그램
9.2 화면 만들고 일정 시간마다 이미지 바꾸기
9.2.1 화면 만들기
9.2.2 일정 시간마다 이미지 바꾸기
9.3 타이머 멈췄다 다시 실행하기
9.4 승패와 점수 표시하기
셀프체크
10장 Date 사용하기: 반응속도 테스트
10.1 이 장에서 만드는 프로그램
10.2 화면 만들고 전환하기
10.2.1 화면 만들기
10.2.2 화면 전환하기
10.3 반응속도 측정하기
10.4 평균 반응속도 구하기
10.5 성급한 클릭 막기
셀프체크
11장 이차원 배열 다루기: 틱택토
11.1 이 장에서 만드는 프로그램
11.2 화면에 3 X 3 표 그리기
11.3 차례 바꾸면서 빈칸에 O와 X 표시하기
11.4 승패 판단하기
셀프체크
12장 클래스 다루기: 텍스트 롤플레잉 게임
12.1 이 장에서 만드는 프로그램
12.2 초기 화면 만들고 일반 메뉴 화면으로 전환하기
12.3 주인공, 몬스터, 일반 메뉴 구현하기
12.4 전투 메뉴 구현하기
12.5 클래스로 코드 재구성하기
12.5.1 클래스 생성하기
12.5.2 클래스에 메서드 추가하기
12.5.3 클래스 간 연동하기
12.5.4 일반 메뉴 재구성하기
12.5.5 전투 메뉴 재구성하기
12.6 전투 결과 표시하기
셀프체크
13장 이벤트 루프 이해하기: 카드 짝 맞추기 게임
13.1 이 장에서 만드는 프로그램
13.2 화면 만들고 카드 생성하기
13.3 카드 앞면 보여 줬다 뒤집기
13.4 카드 짝 맞추기
13.5 버그 해결하기
13.5.1 카드 짝 맞추기 게임의 호출 스택과 이벤트 루프
셀프체크
Part 3 배운 내용으로 완성하는 프로그램
14장 재귀 함수 사용하기: 지뢰 찾기
14.1 이 장에서 만드는 프로그램
14.2 맵 그리고 지뢰 심기
14.3 우클릭으로 물음표와 깃발 표시하기
14.4 좌클릭 시 지뢰 개수 표시하기
14.4.1 지뢰가 없는 칸일 때
14.4.2 지뢰가 있는 칸일 때
14.5 주변 칸 한 번에 열기
14.6 승리 표시하기
14.7 줄 수와 지뢰 개수 입력받기
셀프체크
15장 키보드와 마우스 이벤트 사용하기: 2048
15.1 이 장에서 만드는 프로그램
15.2 표 그리고 무작위로 숫자 2 넣기
15.3 이동 방향 확인하기
15.4 숫자 이동하고 합치기
15.4.1 왼쪽 정렬하기
15.4.2 숫자 합치기
15.4.3 나머지 방향 정렬하기
15.5 승패와 점수 표시하기
셀프체크
16장 복습: 두더지 잡기
16.1 이 장에서 만드는 프로그램
16.2 화면 만들고 애니메이션 처리하기
16.3 두더지와 폭탄 올리고 내리기
16.4 두더지일지 폭탄일지 결정하기
16.5 두더지 잡고 점수 표시하기
마무리
셀프체크
7.2
화면 만들고 숫자 4개 뽑기
7.2.1
화면 만들기
화면부터 구성해 보겠습니다. webgame 폴더에
number-baseball.html
파일을 만들고 다음과 같이 코드를 작성합니다.
Prev
BUY
Next
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.
Email address