처음 만나는 자바스크립트

▣ 작가 소개

저자 : 가노 스케하루
웹/애플리케이션 UI 디자이너, 엔지니어, 기술 서적 저술가.
와세다 대학교 졸업 후 미국 샌프란시스코로 건너가 UI 디자인 이론을 배웠다. 귀국 후 직장 생활을 하다 지금은 프리랜서로 활동 중이다. 웹사이트 및 애플리케이션의 인터페이스 디자인, 인터랙티브 콘텐츠 개발 등을 하고 있으며, 각종 세미나와 강좌에서 강사로 활동 중이다. 주요 저서로는 『쉽게 이해하는 HTML&CSS의 기본』, 『쉽게 이해하는 CSS 디자인의 기본』, 『만들면서 배우는 jQuery 디자인 교과서』 등이 있다.

역자 : 김완섭
네덜란드 ITC에서 Geoinformation for Disaster Risk Management 석사 학위를 취득했다. 약 9년간 일본 및 한국 대기업에서 IT 및 GIS/LBS 분야 업무를 담당했으며, 일본에서는 세콤(SECOM) 계열사인 파스코(PASCO)에서 일본 외무성, 국토지리정보원과 같은 일본 정부 기관을 대상으로 한 시스템 통합(SI) 업무를 담당했다. 이후 야후 재팬으로 직장을 옮겨 야후 맵 개발 담당 시니어 엔지니어로 근무했으며, 한국으로 돌아와 SK에서 내비게이션(T맵 등) 지도 데이터 담당 매니저로 근무했다. 현재는 싱가포르의 한 국제 연구 기관에서 Technical Specialist로 근무 중이다. 저서로는 『나는 도쿄 롯폰기로 출근한다』가 있으며, 역서로는 『그림으로 공부하는 IT 인프라 구조』, 『C# 코딩의 기술 기본편』, 『코딩을 지탱하는 기술』, 『그레이들 철저 입문』, 『클린 코드를 위한 테스트 주도 개발』 등 20여 권이 있다. 블로그를 통해 IT 번역 관련 얘기와 싱가포르 직장 생활을 소개하고 있다.

▣ 주요 목차

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