JavaScript 1학년

예제 프로그램 시험 환경과 예제 파일에 대해
시작하며
옮긴이의 말
이 책의 대상 독자와 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로 하고 싶은 일’로 검색해 본다