처음 만나는 자바스크립트

1장 자바스크립트 소개
1-1 자바스크립트를 배우려는 여러분에게 _ 2
1-2 자바스크립트의 정체는? _ 6
1-3 자바스크립트 ‘프로그래밍’과 동작 구조 _ 15
1-4 각 장의 개요 _ 19
1-5 도구 준비하기 _ 23
1-6 예제 데이터 다운로드 _ 26
1-7 템플릿을 준비한 후 출발! _ 28

2장 출력의 기본
2-1 콘솔에 출력하기 _ 36
개발 도구를 사용해 보자!
step 1 개발 도구 열기, 닫기 _ 36
step 2 콘솔을 사용해 보자! _ 40
step 3 콘솔 응용하기 _ 43
2-2 자바스크립트는 어디에 작성하는가? _ 49
<script> 태그와 자바스크립트 작성 위치
step 1 HTML에 자바스크립트를 직접 기술한다 _ 49
step 2 자바스크립트 파일 읽기 _ 52
2-3 다이얼로그 박스 표시 _ 56
window.alert()
step 1 경고 다이얼로그 박스 표시하기 _ 56
2-4 HTML 변경하기 _ 59
요소 취득 및 콘텐츠 변경
step 1 요소 가져오기 _ 59
step 2 가져온 요소의 콘텐츠 변경하기 _ 62

3장 자바스크립트 문법과 기본 기능
3-1 확인 다이얼로그 박스 표시하기 _ 68
조건 분기(if)
step 1 확인 다이얼로그 박스를 사용해 보자 _ 68
step 2 클릭한 버튼에 따라 메시지 변경 _ 71
3-2 입력 내용에 따라 동작 변경하기 _ 75
변수
step 1 클릭한 버튼의 결과를 변수에 저장한다 _ 75
step 2 변수에 저장된 내용으로 동작을 바꾼다 _ 84
3-3 동작의 범위를 넓히자 _ 87
조건 분기(else if)
step 1 no인지 판단하기 _ 87
3-4 숫자 맞히기 게임 _ 90
비교 연산자, 데이터형
step 1 다양한 비교 연산자 사용하기 _ 90
3-5 시간에 따라 다른 메시지 표시하기 _ 97
논리 연산자
step 1 두 가지 이상의 조건식을 이용해서 하나의 조건 만들기 _ 97
3-6 1장, 2장, 3장…이라고 출력 _ 102
개발 도구를 사용해 보자!
step 1 반복을 사용해 보자 _ 102
step 2 문자열 연결하기 _ 106
3-7 콘솔로 몬스터를 물리치자 _ 110
반복(while)
step 1 while을 사용해 보자 _ 110
step 2 반복 횟수 카운트하기 _ 114
3-8 세금 포함 가격 계산하기 _ 118
함수
step 1 함수 만들기 및 호출하기 _ 118
step 2 HTML에 출력하기 _ 124
3-9 FizzBuzz _ 128
사칙연산자
step 1 처리 흐름을 생각해서 함수 만들기 _ 128
step 2 30까지의 숫자로 피즈버즈 _ 131
3-10 항목을 리스트로 표시하기 _ 133
배열
step 1 배열 작성하기 _ 133
step 2 배열의 모든 항목 읽어 오기 _ 137
step 3 항목 추가하기 _ 139
step 4 항목을 HTML에 출력하기 _ 140
3-11 아이템 가격과 재고 표시하기 _ 144
객체
step 1 책 데이터 등록하기 _ 144
step 2 모든 프로퍼티 읽어 오기 _ 151
step 3 HTML에 출력하기

4장 입력과 데이터 가공
4-1 폼의 입력 내용 가져오기 _ 160
입력 내용 가져오기 및 이벤트
step 1 우선은 이벤트 테스트 _ 160
step 2 입력 내용을 읽어서 출력하기 _ 164
4-2 알기 쉽게 날짜/시간 표시하기 _ 170
Date 객체
step 1 연/월/일과 시간 표시하기 _ 170
step 2 12시간 표기법으로 변경 _ 177
4-3 ‘0’을 붙여서 자릿수 맞추기 _ 180
숫자를 문자열로 변환
step 1 함수 작성하기 _ 180
step 2 곡목 리스트에 번호 붙이기 _ 185
4-4 소수점 자릿수 버리기 _ 189
Math 객체
step 1 사칙연산 이외의 계산

5장 실전 기술
5-1 카운트다운 타이머 _ 198
시간 계산과 타이머
step 1 남은 시간을 계산하는 함수 _ 198
step 2 1초 간격으로 재계산하기 _ 205
step 3 응용편: 표시 방법을 바꾸어 보자 _ 210
5-2 풀다운 메뉴로 페이지 이동하기 _ 213
URL 조작 및 불(bool) 속성 설정
step 1 선택한 시점에 페이지 이동하기 _ 213
step 2 처음 선택 항목 설정하기 _ 217
5-3 설문지 응답은 한 번만! _ 226
쿠키
step 1 쿠키 읽기, 쓰기, 삭제 _ 226
5-4 사진 변경하기 _ 234
5-5 슬라이드쇼 _ 242
섬네일 클릭으로 사진 변경
step 1 새로운 HTML 속성 사용하기 _ 234
step 2 사진 변경하기 _ 240

6장 제이쿼리 입문
6-1 열렸다 닫혔다 하는 내비게이션 메뉴 _ 254
요소 가져오기와 class 속성 추가 및 삭제
step 1 제이쿼리의 기본 _ 254
6-2 박스 열고 닫기 _ 266
애니메이션 효과
step 1 애니메이션 기능 사용 _ 266
6-3 공석 상황 확인 _ 272
Ajax와 JSON
step 1 Ajax와 데이터 활용

7장 외부 데이터를 활용하는 애플리케이션 만들기
7-1 최신 기사를 목록으로 표시하기 _ 286
RSS 피드 불러오기와 해석
step 1 RSS 피드 불러오기 _ 286
step 2 기사 제목 표시하기 _ 293
step 3 업데이트 날짜 표시하기 _ 298
7-2 웹 API를 사용해 보자 _ 301
인스타그램 API를 이용한 포토갤러리
step 1 사전 준비 _ 302
step 2 데이터 다운로드하기 _ 308
step 3 사진 표시하기 _ 313
step 4 페이지 매김 구현하기 _ 323

이 책은 프로그래밍이 처음인 독자나 직업이 프로그래머가 아닌 웹 디자이너나 마케팅 엔지니어라도 쉽고 즐겁게, 그리고 천천히 기초를 이해할 수 있도록 구성되어 있다. 따라서 자바스크립트의 기능 소개는 물론 프로그래밍을 할 때 필요한 사고방식에도 중점을 두고 설명하고 있다. 또한, 설명하는 기능들이 어디서 어떻게 사용되는지도 쉽게 알 수 있도록 실제 사용 환경과 유사한 예제를 다루고 있다. 이 책에서 배운 기초적인 지식이 이후 실제 업무에도 활용될 수 있도록 한 것이 이 책의 특징이다.

‘입력 → 가공 → 출력’이라는, 대부분 프로그램이 공통으로 사용하는 기본 처리 흐름이 있다고 설명했다. 그렇다면 언제 이 처리를 해야 할까? 정산 페이지 예에서는 ‘수량이 변경됐을 때’다. 수량이 변경됐을 때 앞서 본 처리 흐름을 실행하면 사용자가 수량을 변경할 때마다 새로운 소계를 계산해서 표시할 수 있다. 이처럼 ‘언제 처리를 실행할지 정하는 것’을 자바스크립트에서는 ‘이벤트’(event)’라고 한다.