Do it! 모던 자바스크립트 프로그래밍의 정석

고경희 지음

이지스퍼블리싱 2022년 12월 12일 출간

작품소개

책소개

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

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

목차

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

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!] 실습 지도에 전국 캠핑장 표시하기

찾아보기

출판사 서평

“모던 자바스크립트의 모든 것을 한 권에!”
최신 문법부터 네이버∙카카오 API를 활용한 실무까지 다 담았다

자바스크립트는 이제 웹부터 서버, 앱에 이르기까지 쓰지 않는 곳이 없는 언어가 되었다. 웹 개발에 입문하면서 자바스크립트의 기초만 가볍게 공부했다면 실전에 뛰어들었을 때 너무나도 넓은 자바스크립트의 세계에 당황할 것이다. 이 책은 자바스크립트를 어디서부터 공부해야 할지 몰라 헤매는 독자를 위해 준비했다. 이 책 한 권만 제대로 읽으면 최신 문법부터 API 활용까지 지금 알아야 할 자바스크립트의 모든 것을 대부분 배울 수 있다.

“프런트엔드∙백엔드 개발자 모두의 필독서!”
입문자부터 숙련된 개발자까지 누가 봐도 도움이 되는 책

자바스크립트는 해마다 업그레이드되면서 새로운 기능이 계속 추가된다. 그중 핵심 기능을 될 수 있는 한 많이 담았다. 자바스크립트가 처음이라면 이 책의 처음부터 끝까지 차근차근 공부해 보자. 기본 문법을 안다면 앞부분은 필요한 만큼만 살펴보고, ‘셋째마당. 자바스크립트와 객체’부터 집중해서 읽어 보자. 자바스크립트를 훨씬 깊이 이해할 수 있을 것이다. ECMAScript2015(ES6) 이후에 추가된 최신 문법도 배울 수 있다. 리액트(React.js)든 노드(Node.js)든 모든 웹 개발의 뿌리인 자바스크립트를 탄탄하게 다져 보자.

“프로그래밍, 직접 해보며 배우자!”
‘Do it! 시리즈’만의 효과적인 학습 설계를 체험해 보자

프로그래밍은 직접 실천하면서 배우는 게 가장 효과적인 학습 방법이다. 기본 문법부터 간단한 예제와 ‘1분 복습’으로 자세히 알아본다. 실전 예제인 ‘Do it! 실습’에서는 코딩을 시작하기 전에 프로그램을 어떻게 개발할지 고민하며 개발자가 갖춰야 할 사고력을 기른다. 각 장 마지막에 있는 ‘마무리 문제’에 도전하면 자바스크립트의 다양한 문법을 자유롭게 활용할 수 있는 응용력까지 키울 수 있다.

“웹 분야 1위 저자와 함께 공부하자!”
저자 직강 동영상 제공

저자가 직접 제작한 동영상 강의를 무료로 제공한다. 책과 함께 공부하거나, 책을 읽다가 막히면 강의 영상을 찾아보자. 마치 과외를 받는 것처럼 학습 효과가 올라갈 것이다.

“독학도 문제없다!”
30일 학습 계획표 제공

이 책의 마지막 한 쪽을 넘길 때까지 독자 여러분과 함께 해줄 페이스 메이커 ‘30일 학습 계획표’를 준비했다. 한 달 동안 조금씩 꾸준히 공부하는 계획을 세우고 잘 지켜 나간다면 반드시 완독할 수 있을 것이다.

함께 배우고, 나누고, 성장하는 ‘Do it! 스터디룸’으로 오세요!
혼자 계획을 세우고 공부하다 보면 금방 지치기 마련이다. 나와 비슷한 고민을 하는 독자를 만나 어려운 내용을 공유해 보자. 서로 도움을 주고받으며 공부하다 보면 더 보람차다. 멀리 가려면 친구와 함께해 보자.
- Do it! 스터디룸 카페: cafe.naver.com/doitstudyroom

완성 소스 파일은 이지스퍼블리싱 홈페이지 자료실 또는 저자 깃허브에서 제공합니다
- 이지스퍼블리싱 홈페이지: www.easyspub.co.kr → [자료실] 클릭 → 도서명 검색
- 저자 깃허브: https://github.com/funnycom

작가정보

저자(글) 고경희

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)로 활동하고 있다.