추가 적립 안내

『처음 만나는 자바스크립트』는 자바스크립트의 기본을 탄탄한 이론과 상세한 해설, 실용적 예제로 재미있게 구성되어 있다. 또한, 자바스크립트의 기본 기능 소개는 물론 프로그래밍할 때 필요한 사고방식에도 중점을 두고 설명하고 있으며, 설명하는 기능들이 어디서 어떻게 사용되는지도 쉽게 알 수 있도록 실제 사용 환경과 유사한 예제를 다루고 있다. 인스타그램 형태의 앨범, 슬라이드쇼 페이지와 같은 예제 코드를 따라 하며 익혀 보는 것만으로도 자바스크립트, jQuery, Ajax의 기본을 습득하도록 하였으며, 책에서 배운 기본 지식이 이후 실제 업무에도 활용될 수 있도록 한 것이 이 책의 특징이다.

무조건 자세하게! 알기 쉬운 설명!
자바스크립트의 왕도를 안내하는 최고의 교과서!

◆ 재미있는 예제 중심
공부만을 위한 예제는 가능한 한 배제하고 실제 업무에 사용할 수 있는 실용적이고 재미있는 예제 중심으로 구성하였다. 따라서 책을 처음 만났을 때 품었던 학습 의지를 끝까지 유지할 수 있을 것이다.

◆ 어려운 부분은 더 상세하게
초보자가 헷갈리기 쉽고 좌절하기 쉬운 부분은 특별히 자세하게 설명한다. 그리고 이론 → 코드 → 해설의 구성은 빠른 이해를 도와줄 것이다.

1. 출판사 서평
자바스크립트의 왕도를 안내하는 최고의 교과서!
따라 하기 쉬운 예제로 이론과 실무를 동시에 익힌다!
입문서 잘 만들기로 정평이 난 일본에서 자바스크립트 입문 분야 베스트셀러!
자바스크립트를 처음 접하는 독자와 다시 배우고자 하는 독자 모두를 위한 책!

이 책은 자바스크립트의 기본을 탄탄한 이론과 상세한 해설, 실용적 예제로 재미있게 구성되어 있다. 또한, 자바스크립트의 기본 기능 소개는 물론 프로그래밍할 때 필요한 사고방식에도 중점을 두고 설명하고 있으며, 설명하는 기능들이 어디서 어떻게 사용되는지도 쉽게 알 수 있도록 실제 사용 환경과 유사한 예제를 다루고 있다. 인스타그램 형태의 앨범, 슬라이드쇼 페이지와 같은 예제 코드를 따라 하며 익혀 보는 것만으로도 자바스크립트, jQuery, Ajax의 기본을 습득하도록 하였으며, 책에서 배운 기본 지식이 이후 실제 업무에도 활용될 수 있도록 한 것이 이 책의 특징이다.

각 장은 이론 → 코드 → 해설로 이뤄져 있어서 작은 예제들을 빠르게 경험할 수 있도록 하였는데, HTML 태그를 어느 정도 알고 있으면서 자바스크립트를 배워보고자 하는 독자라면 어려움 없이 배울 수 있을 것이다. 프로그래밍이 처음이거나 웹 디자이너, 웹 마케터 등의 독자들에게는 쉽고 재미있게 배우는 입문서로, 자바스크립트를 어느 정도 알고 있는 독자들에게는 자신의 지식을 점검할 수 있는 복습서로서 활용되길 바란다.

◆ 재미있는 예제 중심
공부만을 위한 예제는 가능한 한 배제하고 실제 업무에 사용할 수 있는 실용적이고 재미있는 예제 중심으로 구성하였다. 따라서 책을 처음 만났을 때 품었던 학습 의지를 끝까지 유지할 수 있을 것이다.

◆ 어려운 부분은 더 상세하게
초보자가 헷갈리기 쉽고 좌절하기 쉬운 부분은 특별히 자세하게 설명한다. 그리고 이론 → 코드 → 해설의 구성은 빠른 이해를 도와줄 것이다.

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

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

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

변수는 자바스크립트에서 데이터를 저장하기 위한 목적으로 사용하지만, 자바스크립트가 변수를 기억하고 있는 기간은 ‘해당 페이지가 표시되고 있는 기간’뿐이다. 즉, 링크를 클릭해서 다음 페이지로 가거나 브라우저 창을 닫으면 변수와 변수가 저장한 값이 사라져 버린다. 따라서 해당 변수와 변수가 가진 값은 재사용할 수 없다.
_80쪽

주석 처리(comment out)란, 실행하고 싶지 않는 코드(생략하고 싶은 코드) 행의 앞 부분에 //를 기술하고, 실행하고 싶지 않은 여러 줄의 코드를 /*와 */로 감싸는 것을 말한다. 작성한 프로그램은 남겨 두고 싶지만 지금은 실행하고 싶지 않은 경우 등에 주석 처리를 한다.
_152쪽

이번에 배울 예제는 긴 프로그램은 아니지만, 몇 가지 중요한 기능을 내포하고 있다. 그중 하나는 다른 페이지로 이동하기 위해서 URL을 변경하는 것이다. 두 번째는 HTML을 변경해서 폼(form) 관련 태그에서 자주 사용되는 불 속성을 설정하고, id 속성이 없는 HTML 요소를 가져오는 방법이다.
_213쪽