만화처럼 빨려 들어가는 비주얼한 프로그래밍 입문서 1학년 시리즈!
야옹 선생님, 쥐돌이와 함께라면 뮤직플레이어 웹 앱도 뚝딱!

누구에게나 가볍고 쉬운 자바스크립트 입문서!



미래의 화두인 4차산업혁명과 인공지능으로 인해 창의력 교육과 아울러 전 세계적인 코딩 교육 열풍이 일고 있다. 당장 우리나라만 해도 2018년부터 이미 중학교 정보 교과서가 보급되었고 2019년부터 초등학교부터 코딩이 영어 과목처럼 수업 시간표에 포함된다. 창의적이고 논리적인 힘을 기르는데 프로그래밍 만한 공부가 없기 때문에 세계 각국에서도 미래 세대들에게 프로그래밍 공부를 어떻게 하면 잘 시킬 수 있을까 골몰하고 있다. 이런 목적에 맞게 탄생한 것이 바로 1학년 시리즈이다. 그 가운데 가장 먼저 선보인 자바스크립트 편은 어린 세대들도 쉽게 하는 인터넷, 그 애플리케이션을 만드는 데 필요한 자바스크립트라는 프로그래밍 언어로 시작한다. 자바스크립트는 사실 여러분이 늘 보고 있는 웹 페이지의 브라우저를 열어 ‘[보기]-[소스]’만 실행해도 소스를 한눈에 들여다 볼 수 있는 언어이다. 조금만 관심을 가지면 남녀노소를 불문하고 공부할 수 있는 언어인 셈이다. 그런 언어를 누구나 쉽게 접할 수 있는 책이 바로 이 <자바스크립트 1학년>이다.

예쁘고 시원 시원한 성격의 야옹 선생님과 소심하지만 약간은 건방진 쥐돌이가 간단한 덧셈 곱셈부터 차근차근 단계를 밟아 뮤직 플레이어 앱까지 완성해 본다. 조금 어려워지거나 설명이 길어져 쥐돌이가 비명을 지르면 걸음을 멈추고 차근차근 설명하기도 한다.

웹페이지를 만들 때 HTML과 CSS에 관한 지식이 없으면 자바스크립트를 활용할 수 없다. 그런 이유에서 이 책은 4분의 1 정도를 HTML과 CSS에 대한 설명에 할애한다. 재미있는 일러스트와 만화, 아기자기한 구성이 독자 여러분을 사로잡을 것이다.

중학생 이상이면 누구나 아무 지식이 없어도 자바스크립트라는 웹 프로그래밍 언어에 쉽고 가볍게 접근할 수 있는 책으로 추천 드린다.

예제 프로그램 시험 환경과 예제 파일에 대해
시작하며
옮긴이의 말
이 책의 대상 독자와 1학년 시리즈에 대해
이 책은 이렇게 구성돼 있어요

1장 JavaScript로 무엇을 할 수 있을까?
01 웹앱이 뭘까?
웹페이지, 웹앱, 프로그램의 관계
웹브라우저가 할 수 없는 기능을 프로그램으로 추가한다
서버 사이드와 클라이언트 사이드
02 프로그래밍 언어란 뭘까?
프로그래밍 언어란?
다양한 종류의 프로그래밍 언어
클라이언트 사이드에서 사용하는 JavaScript
JavaScript로 할 수 있는 일
03 프로그램을 만들 준비를 하자
Chrome(크롬) 웹브라우저 설치하기
Atom(아톰) 편집기 설치하기
Atom 메뉴를 한글로 바꾸기
Atom 화면은 어떻게 생겼을까?

2장 프로그래밍을 가볍게 체험해 보자
04 콘솔을 사용해 보자
콘솔을 표시하자
콘솔에 명령을 입력하자
05 더하기, 빼기, 곱하기, 나누기
컴퓨터에게 계산을 시킨다
06 계산 순서를 바꿔 보자
연산자의 우선순위
괄호를 사용해 우선순위를 바꾼다
07 문자를 표시해 보자
따옴표로 에워싸 문자열로 만든다
08 숫자와 문자열을 조합한다
숫자와 문자열을 연결한다
숫자와 문자열 식의 함정
여전히 남아 있는 숫자와 문자열 식의 함정
09 데이터를 기억하는 변수를 사용해 보자
변수에 데이터 저장하기
변수 이용하기
변수 내용 변경하기
변수명은 어떻게 지을까?
10 프로그램을 파일로 저장하자
웹페이지를 만들어 보자
Atom으로 HTML을 입력해 보자
HTML을 작성해 보자
JavaScript를 작성해 보자
HTML 안에 넣는 프로그램
문의 마지막엔 ;(세미콜론)을 쓴다

3장 JavaScript ‘문법'을 배워 보자
11 함수와 메소드를 사용해 보자
함수와 메소드의 역할이란?
함수의 사용법
함수와 조금 다른 메소드
메소드를 사용해 보자
12 if문으로 조건에 따라 처리를 전환한다
if문과 조건 분기
조건식의 결과는 true나 false가 된다
조건식이 false일 때 실행한다
13 for문으로 처리를 반복한다
for문과 반복 처리
for문을 시험해 보자
식을 표시해 결과를 이해하기 쉽게 한다
14 배열을 사용해 처리를 반복하자
배열을 사용해 보자
날짜 데이터와 배열을 조합해 보자
15 함수를 직접 만들어 보자
함수를 만들면 무엇이 편리할까?
함수를 만드는 방법
return문 뒤는 실행되지 않는다
반환값과 인수는 생략할 수 있다

4장 웹앱의 겉모양을 만들자
16 HTML과 CSS가 대체 뭐지?
HTML은 웹페이지의 내용을 나타낸다
CSS는 웹페이지를 꾸민다
17 HTML 태그란 무엇일까?
텍스트 곳곳에 태그를 삽입한다
폴더를 만들어 HTML 파일을 저장하자
Atom이 자동으로 입력해 주는 태그의 의미
18 제목과 본문을 작성해 보자
제목을 입력한다
일반 문장을 입력해 보자
19 이미지를 넣어 보자
이미지 파일을 준비한다
img 태그를 입력한다
20 뮤직 플레이어를 추가하자
음악 파일을 찾아보자
audio 태그를 입력하자
21 목록을 만들자
ul 태그와 li 태그를 입력하자
독자적인 속성을 추가한다
22 CSS의 구조를 이해하자
CSS의 기본 구조
CSS 파일을 만든다
23 문자 서식을 변경해 보자
color-picker 패키지로 색을 지정한다
문자를 가운데 정렬한다
24 요소에 폭과 배경색을 설정하자
개발자 도구로 HTML 구조를 확인한다
앱의 테두리를 설정하자
인덴트(들여쓰기) 기능으로 HTML을 읽기 쉽게 하자
25 목록을 메뉴 리스트로 변경하자
행 시작 기호를 지운다
메뉴 리스트 항목에 괘선을 그린다
선택 중인 항목만 색을 바꾼다
마우스 포인터를 위에 올려 놓았을 때만 배경색이 바뀐다

5장 뮤직 플레이어를 완성해 보자
26 JS 파일을 만들어 HTML로 읽어들인다
JS 파일을 만든다
script 태그로 읽어들인다
27 플레이 리스트를 클릭해 곡을 바꾼다
HTML 요소를 JavaScript로 가져온다
click 이벤트를 설정한다
클릭된 요소를 알아 낸다
재생할 음악 파일을 변경한다
클래스명을 변경해 재생 중인 곡을 파악하기 쉽게 한다
28 재생 중과 정지 중 그림을 바꾼다
audio 요소의 이벤트에 대응한다
29 연속으로 재생해 보자
‘다음 곡’을 가져오려면?
음악 재생 부분을 함수로 만든다
30 랜덤 선곡 기능을 추가하자
랜덤 링크를 추가한다
링크에 click 이벤트를 설정한다
곡을 랜덤하게 선택한다
31 앞으로 무엇을 공부하면 좋을까?
Mozilla(모질라) 개발자 네트워크에서 조사한다
‘JavaScript로 하고 싶은 일’로 검색해 본다