한 권으로 끝내는
모던 자바스크립트 웹 개발 교과서!

자바스크립트의 모든 것을 한 번에 공부할 수 있는 책이 나왔다! 출간한 후 웹 분야 도서 1위를 꾸준히 지키고 있는 《Do it! HTML+CSS+자바스크립트 웹 표준의 정석》의 고경희 저자는 ‘이제 자바스크립트는 웹, 서버, 앱까지 안 쓰는 곳이 없는 언어가 되었으니 제대로 알려 주고 싶다’는 생각으로 이 책을 집필했다. 자바스크립트를 모르는 입문자부터 지금도 자바스크립트로 코딩을 하고 있는 개발자까지 모두에게 도움이 될 수 있도록 최신 문법부터 다양한 API를 활용하는 방법까지 담아 자바스크립트의 교과서라 할 수 있는 책으로 완성했다. 모든 내용은 독자가 직접 해보며 배울 수 있도록 예제를 풀면서 알아본다.
프런트엔드든 백엔드든 상관없이 모든 웹 분야의 뿌리는 자바스크립트다. 웹 분야에서 프로그래밍 실력을 제대로 키우고 싶은 모든 분에게 이 책을 추천한다.

2010년 『Do it! HTML5 + CSS3』를 출간한 후 웹 관련 강의와 집필을 꾸준히 해왔다. 웹 초창기부터 ASP와 자바 등을 소개하는 전문 도서를 번역하면서 웹 기술에 관심을 가지기 시작했고, 이후 HTML과 DHTML(Dynamic HTML), CSS, 자바스크립트 등 웹 관련 기술을 더 쉽게 익힐 수 있는 도서 60여 종을 집필했다. 특히 2021년 출간한 『Do it! HTML+CSS+자바스크립트 웹 표준의 정석』은 웹 개발에 입문하는 사람의 필독서로 자리매김하여 2년째 웹 분야 베스트셀러 1위를 이어오고 있다. 홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부한 뒤, 현재 Development Technologies 분야에서 마이크로소프트 공인 최고 기술자(Microsoft Most Valuable Professional)로 활동하고 있다.

첫째마당. 자바스크립트의 기본기 다지기

01 자바스크립트 시작하기
__01-1 자바스크립트를 위한 기본 상식
__01-2 웹 개발에서 자바스크립트의 역할
__01-3 코드 작성을 위한 편집기 설정하기
__01-4 간단한 스크립트부터 시작하기

02 프로그래밍의 기본, 변수와 자료형 살펴보기
__02-1 프로그램에서 입력받고 출력하는 방법
__02-2 프로그램과 친해지려면 변수부터 익히자
__02-3 컴퓨터가 세상을 보는 방법, 자료형
__02-4 자바스크립트의 장점이자 단점, 자료형 변환
__[Do it!] 실습 화씨온도를 섭씨온도로 변환하기

03 연산자와 제어문
__03-1 프로그램 동작을 가리키는 기호, 연산자
__03-2 프로그램 흐름을 자유롭게 조절하는 조건문
__[Do it!] 실습 짝수와 홀수를 구별하는 프로그램 만들기
__03-3 같은 동작을 손쉽게 반복하는 반복문
__[Do it!] 실습 소수인지의 여부 확인하기

04 프로그래밍 한발 더 나가기, 함수와 스코프
__04-1 프로그래밍의 꽃, 함수
__[Do it!] 실습 웹 개발자 도구 창의 디버깅 기능 살펴보기
__04-2 변수의 유효 범위, 스코프
__[Do it!] 실습 웹 개발자 도구 창에서 스코프 확인하기
__04-3 이름 없이 사용하는 함수 표현식
__[Do it!] 실습 입력값을 표시하는 콜백 함수 만들기
__04-4 전개 구문
__04-5 시간을 고려하는 타이머 함수

둘째마당. 웹 문서와 자바스크립트

05 DOM의 기초
__05-1 DOM과 DOM 트리
__05-2 웹 요소에 접근하기
__05-3 자바스크립트로 스타일 수정하기
__05-4 DOM에서 폼 다루기

06 이벤트와 이벤트 처리기
__06-1 이벤트 알아보기
__06-2 이벤트 처리하기
__[Do it!] 실습 모달 박스 만들기
__06-3 event 객체
__[Do it!] 실습 자바스크립트로 캐러셀 만들기
__06-4 이벤트 전파

07 DOM 활용하기
__07-1 DOM 트리와 노드 리스트
__07-2 웹 문서에 새로운 노드 추가하기
__[Do it!] 실습 장바구니에 상품 추가하기
__[Do it!] 실습 시간에 따라 다른 이미지 표시하기
__07-3 노드 삭제하기
__[Do it!] 실습 나만의 도서 목록 만들기

셋째마당. 자바스크립트와 객체

08 자주 사용하는 내장 객체 알아보기
__08-1 웹 브라우저의 최상위 객체, window
__08-2 Date 객체 활용하기
__[Do it!] 실습 만 보 걷기, 오늘까지 며칠째일까?
__[Do it!] 실습 디지털 시계 만들기
__08-3 Math 객체 활용하기
__[Do it!] 실습 웹 문서의 배경 이미지를 무작위로 변경하기

09 자바스크립트 객체 만들기
__09-1 객체 알아보기
__09-2 생성자 함수와 클래스
__[Do it!] 실습 생성자 함수와 클래스를 사용해 원기둥의 부피 구하기
__09-3 객체의 키와 값에 접근하기
__09-4 프로토타입과 클래스에서의 상속
__[Do it!] 실습 프로토타입을 상속하는 새로운 객체 만들기
__[Do it!] 실습 클래스 상속 연습하기

10 효율적으로 문자열과 배열 활용하기
__10-1 문자열에 접근하기
__10-2 문자열 메서드 활용하기
__[Do it!] 실습 보안을 위해 이메일 주소의 일부 감추기
__10-3 정규 표현식으로 문자열 다루기
__10-4 문자열과 배열 변환하기
__[Do it!] 실습 영문자열의 첫 번째 글자를 대문자로 바꾸기
__10-5 똑똑하게 배열 사용하기
__10-6 배열의 다양한 메서드 살펴보기

11 배열과 객체, 좀 더 깊게 살펴보기
__11-1 에크마스크립트 2015의 기능 복습하기
__11-2 구조 분해 할당하기
__11-3 배열을 변형하는 메서드
__11-4 Map과 Set
__[Do it!] 실습 개설 요청 과목 정리하기
__11-5 이터레이터와 제너레이터
__[Do it!] 실습 전철 노선도 만들기

넷째마당. 서버와 통신하기

12 HTTP 통신과 JSON
__12-1 HTTP 통신
__12-2 JSON
__12-3 서버에서 자료 가져오기
__[Do it!] 실습 JSON 자료를 가져와서 화면에 표시하기 1
__[Do it!] 실습 JSON 자료를 가져와서 화면에 표시하기 2
__12-4 예외 처리하기

13 비동기 프로그래밍
__13-1 비동기 처리 방식
__13-2 프로미스
__[Do it!] 실습 커피 주문하고 완료하는 프로미스 만들기
__[Do it!] 실습 프로미스를 반환하는 then() 메서드 확인하기
__[Do it!] 실습 프로미스 체이닝으로 프로미스 연결하기
__13-3 fetch API
__13-4 async 함수와 await 예약어
__[Do it!] 실습 서버에서 회원 정보 가져와 표시하기 1
__[Do it!] 실습 서버에서 회원 정보 가져와 표시하기 2

다섯째마당. 캔버스로 웹 브라우저 창에 그림 그리기

14 캔버스로 도형, 텍스트, 이미지 그리기
__14-1 캔버스 알아보기
__14-2 캔버스에 기본 도형 그리기
__[Do it!] 실습 캔버스로 개구리 얼굴 그리고 파일로 저장하기
__14-3 캔버스에 텍스트 그리기
__14-4 캔버스에 이미지 표시하기

15 캔버스로 그래픽 요소 다루기
__15-1 다양한 그래픽 스타일 지정하기
__[Do it!] 실습 나만의 드로잉 앱 만들기
__15-2 그래픽 요소 변형하기
__[Do it!] 실습 버튼을 클릭할 때마다 도형 회전시키기
__15-3 그래픽 요소 합성하기

16 캔버스에서 애니메이션 실행하기
__16-1 객체를 사용해 도형 그리기
__[Do it!] 실습 무작위로 여러 개의 도형 그리기
__16-2 애니메이션 효과 추가하기
__[Do it!] 실습 왔다 갔다 움직이는 원 만들기
__[Do it!] 실습 궤적이 남는 애니메이션 만들기
__[Do it!] 실습 여러 개의 도형이 무작위로 움직이는 애니메이션 만들기

여섯째마당. API 활용하기

17 웹 API 활용하기
__17-1 API 알아보기
__17-2 웹 스토리지 API
__[Do it!] 실습 웹 스토리지 다루기
__[Do it!] 실습 로컬 스토리지를 활용해 할 일 목록 프로그램 만들기
__17-3 지오로케이션 API

18 공개 API 활용하기
__18-1 공개 API 알아보기
__18-2 지도 API 사용하기
__[Do it!] 실습 카카오맵 API를 사용하기 위한 API 키 받기
__[Do it!] 실습 지도에 이지스퍼블리싱의 위치 표시하기
__18-3 ‘공공데이터포털’ 사이트 활용하기
__[Do it!] 실습 오픈 API의 활용 신청하기
__[Do it!] 실습 오픈 API를 활용해 자료 가져오기
__[Do it!] 실습 지도에 전국 캠핑장 표시하기

찾아보기