간단한 게임을 만들면서 HTML5와 자바스크립트를 배우고 단계별로 코드에 살을 붙여가며 응용력을 높인다. - 프로그램은 어렵다는 선입견을 버리자 대학에서 다년간 학생을 가르친 저자가 학생들에게 즐겁게 프로그램을 배울 수 있도록 가르친 노하우를 녹여낸 책이다. 누구나 즐길 수 있는 간단한 웹 게임으로 프로그램에 관심을 갖고 쉽게 접근할 수 있다. - 단계별 코드로 응용력을 높이자 처음부터 전체 코드를 보는 것이 아닌 간단한 코드를 가지고 복잡한 코드까지 서서히 늘려가면서 부담을 줄이고 이해를 높일 수 있다. 전체에서 반복적으로 코드를 설명해서 복습시킨다. - 단계별 코드로 응용력을 높이자 처음부터 전체 코드를 보는 것이 아닌 간단한 코드를 가지고 복잡한 코드까지 서서히 늘려가면서 부담을 줄이고 이해를 돕는다. 전체에서 반복적으로 코드를 설명해서 복습시킨다. 어떤 독자를 위한 책인가? - HTML5와 자바스크립트를 배우려는 초보자 - 동적 웹사이트 프로그램을 배우려는 초보자 - 동적 웹사이트의 원리가 궁금한 웹 디자이너나 사이트 운영자 저자 서문 예전부터 HTML5의 새 기능에 대한 상당한 열망이 있었고 다른 기술을 전혀 사용하지 않고도 역동적이고 멋진 대화형 웹사이트를 제작할 수 있는 가능성이 있었습니다. HTML5의 새 기능은 어쩌면 좀 과장일 수도 있지만, 관심을 끌만한 것임은 분명합니다. 이제는 HTML5, CSS, 자바스크립트만 가지고 화면에 직선, 호, 원, 타원을 그리거나 이벤트와 이벤트 처리를 지정하여 애니메이션을 구현하고 사용자 행동에 반응하게 할 수 있습니다. 자신의 웹사이트에 표준 컨트롤로 동영상이나 사운드를 삽입할 수 있고, 프로그램의 원하는 부분에 정확히 동영상이나 사운드를 배치할 수 있습니다. 입력 내용이 올바른지 검사해서 사용자에게 즉각적인 피드백을 주는 폼을 생성할 수도 있습니다. 쿠키와 비슷한 기능을 이용하여 사용자의 컴퓨터에 정보를 저장할 수 있으며, header나 footer 같은 새 요소를 사용해서 문서 구조를 명확하게 작성할 수 있습니다. 이 책은 필자의 강의 경험과 이제까지 집필해온 자료를 토대로 만들었습니다. 기술의 기능이나 프로그래밍 개념 등은 필요성을 느껴야만 빨리 배울 수 있습니다. 그러므로 이 책의 각 장을 많이 알려진 간단한 게임을 골라서 따라 해볼 수 있게 실습 예제로 구성했습니다. 이런 흥미롭고 실질적인 예제로 독자는 필요성과 동기를 느끼고 지루한 설명보다 효과적으로 많은 것을 쉽게 이해할 수 있습니다. 새 프로그래밍 언어를 배울 때 필자는 제일 먼저 크랩스 게임부터 프로그래밍해봅니다. 슬링샷 게임 같은 애니메이션을 이용한 탄도 시뮬레이션을 제작하고 특정 상황이 발생했을 때 동영상이나 사운드 클립이 재생되게 할 수 있다면 스스로 큰 만족감을 얻을 수 있기 때문입니다. 직접 미로 벽과 행맨의 단두대를 그리고, 컴퓨터에 게임 정보를 저장하고 나면 굉장히 기쁠 것입니다.

옮긴이의 말_ 김지원 저자 서문_ 지닌 마이어 저자 소개 대상 독자 책의 구성 소스 코드 규칙 감사의 글 1장 기초 학습 1-1 소개 1-2 사전 준비 1-3 HTML5, CSS, 자바스크립트의 기능 HTML의 기본 구조와 태그 자바스크립트 사용법 1-4 프로그램 구현과 응용 1-5 검사해서 올리기 1-6 1장을 한 눈에 2장 주사위 게임 2-1 소개 2-2 사전 준비 2-3 HTML5, CSS, 자바스크립트의 기능 의사 난수 처리와 수식 변수와 대입문 사용자 정의 함수 조건문 i f와 switch 캔버스에 그리기 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, 자바스크립트의 기능 배열과 사용자 정의 객체 그림의 회전과 평행이동 선분 그리기 새총을 당길 때의 마우스 이벤트 표시 항목 변경을 위해 배열의 splice 함수 사용 점 간의 거리 4-4 프로그램 구현과 응용 캐논볼: 대포, 각도, 속도 슬링샷: 마우스 이벤트 값을 비행 매개변수에 할당 4-5 검사해서 올리기 4-6 4장을 한 눈에 5장 짝맞추기 게임 5-1 소개 5-2 사전 준비 5-3 HTML5, CSS, 자바스크립트의 기능 카드 보여주기 Date를 이용한 시간 측정 일시 정지 효과 넣기 글자 그리기 다각형 그리기 카드 섞기 카드 클릭 기능 구현 부정행위 방지 5-4 프로그램 구현과 응용 5-5 검사해서 올리기 5-6 5장을 한 눈에 6장 퀴즈 6-1 소개 6-2 사전 준비 6-3 HTML5, CSS, 자바스크립트의 기능 배열에 정보 저장하기와 가져오기 프로그램 실행 중에 동적으로 HTML 생성하기 자바스크립트 코드로 CSS를 수정해서 요소 변화시키기 form과 input 요소로 글자 피드백 구현 동영상 보여주기 6-4 프로그램 구현과 응용 6-5 검사해서 올리기 6-6 6장을 한 눈에 7장 미로 7-1 소개 7-2 사전 준비 7-3 HTML5, CSS, 자바스크립트의 기능 벽과 토큰 표시 벽을 그리고 배치하는 마우스 이벤트 화살표 키 감지 토큰과 벽의 충돌 감지 로컬 저장소 이용 로컬 저장소에 저장할 데이터 인코딩 라디오 버튼 7-4 프로그램 구현과 응용 미로 2탄 제작 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, 자바스크립트의 기능 단어 목록을 외부 스크립트 파일에 정의된 배열로 저장 HTML 요소를 생성하고 배치한 후 버튼처럼 만들고 불용화하기 캔버스에 단계적으로 그림을 생성 게임 상태 유지와 승패 판단 알아맞힌 알파벳을 검사하고 textContent를 할당해서 문제 단어의 알파벳 공개하기 9-4 프로그램 구현과 응용 9-5 검사해서 올리기 9-6 9장을 한 눈에 10장 블랙잭 10-1 소개 10-2 사전 준비 10-3 HTML5, CSS, 자바스크립트의 기능 카드 앞면 그림의 출처, Image 객체 설정 카드 사용자 정의 객체 생성 패 돌리기 카드 섞기 키 눌림 감지 header와 footer 요소 10-4 프로그램 구현과 응용 10-5 검사해서 올리기 10-6 10장을 한 눈에 부록 사례로 보는 HTML5 게임 1 Pacman 2 Pirates Love Daisies 3 VIRION 4 Biolab Disaster 5 Robot Are People Too 6 Mo-Jump 7 jQuery Racing 8 벽돌깨기 9 Touch Solita 10 Etchaphysics 11 Quake 2 12 요약 Index