통합검색

프로젝트로 배우는『HTML5 자바스크립트』. 이 책은 프로그래밍 지식이 어느 정도 있으면서 여러 기본 기능을 결합하고 자바스크립트와 다른 기술을 연동하여 좀 더 실속있는 프로그램을 제작하고자 하는 개발자를 위해 기획된 책이다. 다른 프로그래머와 협업하는 독자들은 이 책에서 아이디어를 얻어 어떠한 기능이나 프로그램을 구현할 수 있는지에 대해 알 수 있다.

. 지오로케이션, 웹 저장소, PHP, MySQL 등을 활용해서 웹사이트, 웹 애플리케이션을 제작해보자.

이 책의 특징과 장점
-. 자습서를 닮은, 혼자서 공부하기에 편한 구성
프로젝트별로 필요한 사전 지식부터 주요 코드의 구현 방법, 요점정리까지 총 6개 절로 일목요연하게 정리되어 있다.
-. 코드별 색상으로 쉽게 구분
예약어/변수명/요소/속성명 등을 색으로 구분지어 눈으로도 더 쉽게 코드를 분석할 수 있게 도와준다.
-. 원서와는 차별화된 화려한 컬러 구성
그리기와 색칠하기를 비롯한 지도 이용, 사진 구성 등의 프로젝트 학습에 도움을 주고자 도서 전체를 컬러로 구성한 개발서다.

어떤 독자를 위한 책인가?
-. HTML5와 자바스크립트는 익히 들어왔지만, 실전 경험이 없는 사람
-. 웹 지식과 다른 기술을 연동해서 좀 더 실속있는 웹 애플리케이션을 개발하고 싶은 사람
-. HTML5의 새 기능이나 웹 애플리케이션에 필요한 아이디어를 얻고 싶거나 컨닝 페이퍼가 필요한 사람

옮긴이 글_ 김지원
웹 표준이니 웹 2.0이니 하던 때가 엊그제 같은데 이제는 굳이 그런 표현을 사용하는 것이 촌스러워졌을 정도로 이미 기본 중의 기본이 되었습니다. 이제 HTML5와 CSS3 없이는 효율적인 웹 디자인을 말하기 힘들고 자바스크립트를 모르고서는 역동적인 웹사이트나 웹 앱을 개발할 수 없습니다. 모바일 영역이 발전할수록 HTML5는 아마도 모든 개발의 중심에 있게 될 것입니다. 기기나 플랫폼에 구애받지 않고 어디서든 돌아가는 사이트와 앱을 만들고자 하는 것이 작업 효율을 위해 모든 개발자의 목적이 될 수밖에 없고 현재로서 대안은 HTML5가 거의 유일하기 때문에 다른 모든 기술은 궁극적으로 HTML5를 중심으로 공전하게 될 것입니다.

이 책은 지닌 마이어 교수의 이전 저서인 『한 번에 배우는 HTML5+자바스크립트』(한빛미디어, 2011)에 이어 비슷한 구성과 실습 위주의 이해하기 쉬운 설명을 특징으로 합니다. 다만, 이전 책이 입문자 대상이었다면 이 책은 좀 더 기본 지식을 갖춘 중급 대상입니다. 그러므로 이 책의 구성이나 실습 예제가 마음에 들지만, 스스로 기초가 부족하다고 느낀다면 『한 번에 배우는 HTML5+자바스크립트』(한빛미디어, 2011)를 보고 나서 이 책을 보면 도움이 됩니다. 이전 책과 마찬가지로 이 책도 HTML5를 토대로 하여 각 장에서 다루는 프로젝트에 필요한 자바스크립트 기술도 함께 설명합니다. 수록된 각 장은 캔버스, 비디오, 지오로케이션, 데이터베이스 질의 등 HTML5의 주요 기능을 실제 프로젝트에 이용하는 방법을 알려주며 이를 바탕으로 창작 프로젝트를 만들기 위한 아이디어 힌트도 수록해 응용력도 키울 수 있습니다. 웹 기반의 앱 제작이 시대적 흐름으로 자리잡은 이때, 창의성 높은 웹 앱 개발을 위해서는 그에 필요한 HTML5, CSS3, 자바스크립트 등의 기술을 어려움 없이 다룰 수 있어야 합니다. 각 장마다 하나의 실습 목표를 정해 놓고 그것을 구현하기 위해 기술적으로 준비해야 할 부분을 상세히 설명하고 이를 하나로 취합해 완성된 코드와 주석까지 친절히 설명해주는 책은 흔치 않습니다. 특히 수록된 실습 코드는 어느 한 부분 버릴 것이 없고 실제 개발에 있어 활용도가 높다는 점이 이 책의 가장 큰 장점입니다.
제가 처음 홈페이지를 만들던 때가 생각납니다. 그때 만약 내 홈페이지를 만들어야 한다는 강력한 목표의식과 하나씩 알아낸 태그와 명령을 적용하며 직접 만들어가는 재미가 없었다면, 과연 HTML 태그와 기초적인 CSS 속성을 단 일주일 만에 자유롭게 사용할 수 있었을지 의문이 듭니다. 이론을 순차적으로 완벽히 마스터하는 방법도 좋겠지만 무엇보다 가장 빠른 습득은 실습에서 나옵니다. 흥미나 필요에 의한 실습이라면 더할 나위가 없겠지요. 이 책의 장점이 바로 그것입니다. 이론 설명을 보지 않고도 각 프로젝트에 수록한 응용성 높은 여러 기술과 기법만 자신의 것으로 소화하면, 원하는 웹사이트나 웹 앱을 자유자재로 만들 수 있을 것입니다.

이 책이 나오기까지 늘 격려해 주시고 좋은 책 만들기에 여념 없으신 한빛미디어 가족 분들께 감사합니다. 물심양면으로 번역 작업에 몰입할 수 있게 도움 주시고 쾌적한 번역 환경을 마련해주시며 언제나 마음에 드는 구성의 좋은 책 번역을 맡겨주시는 배용석 부장님, 송성근 팀장님, 최현우 과장님, 조희진 과장님을 비롯해 부족한 역자를 좋게 봐주시고 만나면 반갑게 맞아주시는 전문서 팀 모든 분들과 한빛미디어 분들께도 항상 마음 속으로 감사합니다.

지은이 글_ 지닌 마이어
이 책은 저의 HTML5 연구의 연장선 상에 있습니다. 저는 캔버스나 비디오 같은 기능을 연동하고, 수학 계산을 통해 객체지향이나 내용물과 로직 분리 같은 일반적인 프로그래밍 기법을 사용하는 방식으로 프로젝트를 개발했습니다. HTML5와 자바스크립트를 구글 맵, 지오로케이션, 서버 측 프로그래밍 등의 다른 기술과 연동해서 프로그램을 제작하는 데에도 관심을 가졌습니다.
각 장은 하나의 프로그램과 그에 연관된 일련의 프로그램에 대해 설명합니다. 이렇게 구성한 이유는 저의 강의 경험상 개념과 방법을 가장 쉽게 이해할 수 있는 방법이 바로 실습이기 때문입니다. 우선 맨 처음 실습할 프로그램은 1장의 HTML5 공식 로고 그리기입니다. 1장에서 보겠지만, 이 프로그램을 개발하는 방식은 좌표 변환을 이용해야 합니다. 가족사진 콜라주를 다루는 2장의 프로젝트는 필자의 늘어나는 가족과 객체지향 프로그래밍에 대해 가르치고자 하는 저의 욕심에서 탄생했으며, 자신의 사진과 객체를 사용해서 자신만의 프로그램을 만들기 위한 뼈대로 사용하기에 적당합니다. 공 튕기는 비디오 제작 방법을 설명한 3장은 제가 기존에 제작했던 양방향 프로그램을 토대로 제작한 것으로, 캔버스와 비디오를 두 가지 방식으로 연동하는 것이 특징입니다.
4장, 5장, 6장에서는 구글 맵 API(애플리케이션 프로그래밍 인터페이스) 사용법을 설명합니다. 구글 맵 API를 이용하면 프로그래머는 구글 맵으로의 접근 기능을 자신의 프로젝트에 손쉽게 포함시킬 수 있습니다. 4장은 맵과 캔버스를 연결하는 사용자 인터페이스와 더불어, 사용자가 직접 디자인한 커서와 알파 값(투명도)을 그리기 패스에 사용하는 방법도 설명합니다. 5장에서 다루는 세 가지 프로그램은 내용물과 로직을 분리함으로써 한 지역 탐색이나 여러 위치가 있는 지형 퀴즈 같은 다양한 프로그램으로 확장하는 방법을 설명하기 위한 것입니다. 6장에서 다루는 지오로케이션은 사용자의 위치를 알아내는 기술입니다. 이 기술을 PHP를 통해 서버 측 프로그래밍과 연동하면 선택한 사람에게 자신의 현재 위치를 이메일로 보낼 수 있습니다.
7장에서는 종이 접기 강좌 제작을 통해 수식, 비디오, 사진을 주로 사용하여 선 그리기 연동 방법을 설명합니다. 이 예제를 모델로 삼아 그림, 비디오, 이미지를 이용하여 자신의 강좌를 만들 수도 있고, 내용을 읽고 대수학과 기하학 분야의 주제를 상기할 수도 있습니다. 8장에서 다루는 프로그램은 어도비 플래시를 이용해 제작했던 프로젝트에서 힌트를 얻은 것으로, 그림 맞추기 퍼즐이 비디오로 전환됩니다. 8장에서는 손가락 터치 이벤트 처리 기능을 포함시키는 방법과 아이팟과 아이패드에서 작업하는 방법에 대해서도 설명합니다. 9장에서 다루는 프로그램은 필자가 기존에 플래시를 이용해 만들었던 ‘주(state) 구별하고 이름 맞추기’ 게임에서 힌트를 얻어 응용한 것입니다. 9장에서는 그림 맞추기 퍼즐 형태로 미국의 50개 주를 뒤섞는 방법과 진행 중인 퍼즐을 localStorage를 통해 저장하는 방법을 설명합니다. 결과로 완성되는 이 교육용 게임에는 각종 플레이어 동작을 처리하는 기능의 사용자 인터페이스가 표시됩니다. 마지막 10장에서는 데이터베이스 사용법을 설명합니다. 10장에서는 HTML5와 자바스크립트가 PHP와 SQL(구조 질의 언어)을 통해 연결됩니다. SQL은 대부분의 데이터베이스에 사용되는 표준 질의 언어입니다. 10장에서 다루는 데이터베이스는 MySQL입니다. localStorage 기능과 HTML5의 폼 유효성 검사 기능을 사용해보면 많은 데이터베이스 프로그램의 공통적인 요건을 알 수 있습니다. 또한, 이 데이터베이스 프로그램을 살펴보면 사용자 비밀번호의 단방향 암호화 방법과 클라이언트 측 및 서버 측의 폼 유효성 검사 방법도 알 수 있습니다.

관련 도서
- 『한 번에 배우는 HTML5+자바스크립트』(한빛미디어, 2011)
- 『모던 웹을 위한 JavaScript + jQuery 입문』(한빛미디어, 2011)
- 『자바스크립트 성능 최적화』(한빛미디어, 2011)
- 『자바스크립트 쿡북』(한빛미디어, 2011)
- 『더글라스 크락포드의 자바스크립트 핵심 가이드』(한빛미디어, 2008)
- 『웹 표준 가이드: HTML5+CSS3』(한빛미디어, 2010)

__옮긴이의 글_ 김지원
__지은이의 글_ 지닌 마이어
____지은이 소개
____감사의 글
____책의 구성
____대상 독자
____소스 코드 색상 규칙

1장 HTML5 로고 제작
__1-1 소개
__1-2 사전 준비
__1-3 HTML5, CSS, 자바스크립트의 기능
____캔버스에 패스 그리기
____캔버스와 문서 바디에 글 배치하기
____좌표 변환하기
____range 타입의 input 요소 사용법
__1-4 구현과 응용
__1-5 검사해서 올리기
__1-6 1장을 한눈에

2장 가족사진 콜라주
__2-1 소개
__2-2 사전 준비
__2-3 HTML5, CSS, 자바스크립트의 기능
____자바스크립트 객체
____사용자 인터페이스
____캔버스를 이미지로 저장
__2-4 구현과 응용
__2-5 검사해서 올리기
__2-6 2장을 한눈에

3장 움직이는 비디오 클립
__3-1 소개
__3-2 사전 준비
__3-3 HTML5, CSS, 자바스크립트의 기능
____바디 사이즈와 윈도우 사이즈
____애니메이션
____애니메이션을 구현하는 두 가지 방법
____마스크 이동하기
__3-4 구현과 응용
____자신의 프로그램에 응용하기
__3-5 검사해서 올리기
__3-6 3장을 한눈에

4장 맵 메이커
__4-1 소개
__4-2 위도/경도와 사전 준비
__4-3 HTML5, CSS, 자바스크립트의 기능
____구글 맵 API
____캔버스 그림
____커서
____이벤트
____거리를 계산하고 반올림해서 표시하기
__4-4 구현과 응용
__4-5 검사해서 올리기
__4-6 4장을 한눈에

5장 맵 포털
__5-1 소개
__5-2 사전 준비
__5-3 HTML5, CSS, 자바스크립트의 기능
____구글 맵 API를 이용한 맵 접근과 이벤트 처리
____프로젝트 요약
____비디오, 오디오, 이미지의 표시와 제거
____거리와 허용 오차
____정규표현식
____외부 스크립트 파일
____HTML5 마크업을 동적으로 생성하고 위치 지정
____힌트 버튼
____뒤섞기
__5-4 구현과 응용
____Mapvideos 프로그램
____Mapmediabase 프로그램
____퀴즈 프로그램
__5-5 검사해서 올리기
__5-6 5장을 한눈에

6장 나의 현재 위치 파악
__6-1 소개
__6-2 지오로케이션과 사전 준비
__6-3 HTML5, CSS, 자바스크립트, PHP의 기능
____지오로케이션
____리버스 지오코딩
____맵 클릭 기능
____입력 받은 이메일 주소를 검사하고 PHP를 호출해서 이메일 전송
____PHP 언어의 기초
__6-4 구현과 응용
__6-5 검사해서 올리기
__6-6 6장을 한눈에

7장 종이접기 강좌
__7-1 소개
__7-2 사전 준비
__7-3 HTML5, CSS, 자바스크립트의 기능과 계산법
____전체 단계의 메커니즘
____좌푯값
____화면 표시 유틸리티 함수
____계산 유틸리티 함수
____단계 선 그리기 함수
____사진 표시하기
____비디오 표시와 제거
__7-4 구현과 응용
__7-5 검사해서 올리기
__7-6 7장을 한눈에

8장 직소 퍼즐
__8-1 소개
__8-2 사전 준비
__8-3 HTML5, CSS, 자바스크립트의 기능과 프로그래밍 기법
____조각의 이미지와 데이터 가져오기
____동적으로 생성된 요소
____직소 퍼즐 설정하기
____마우스 이벤트와 터치 이벤트 처리하기
____퍼즐 완성 여부 감지하기
____비디오의 준비, 배치, 재생과 보이기, 숨기기
__8-4 구현과 응용
__8-5 검사해서 올리기
__8-6 8장을 한눈에

9장 지도 퍼즐 게임
__9-1 소개
__9-2 사전 준비
__9-3 HTML5, CSS, 자바스크립트의 기능과 이미지 처리
____조각 이미지 파일 가져오기와 오프셋 구하기
____요소를 동적으로 생성
____전체 사용자 인터페이스
____플레이어가 주를 클릭하게 하는 사용자 인터페이스
____플레이어에게 주 이름을 입력 받는 사용자 인터페이스
____조각 흩뜨리기
____그림 맞추기 퍼즐 설정하기
____그림 맞추기 상태 저장과 재현, 최초 맵 복원
__9-4 구현과 응용
__9-5 검사해서 올리기
__9-6 9장을 한눈에

10장 웹사이트 데이터베이스
__10-1 소개
__10-2 사전 준비
__10-3 SQL, PHP, HTML5, 자바스크립트의 기능
____관계형 데이터베이스
____SQL
____로컬 저장소
____해시 함수
____입력 내용 유효성 검사 코드의 클라이언트 측과 서버 측
____미들웨어 PHP
__10-4 구현과 응용
__10-5 검사해서 올리기
__10-6 10장을 한눈에