웹문서 작성과 프로그래밍 경험이 없는 일반인과 인문계 학생을 위한 교재로 만들었습니다. 외국어를 배울때 어려고 지루한 문법에서 벗어나 바로 외국인과 외웠던 짧은 문장을 써가며 대화하는 즐거움을 알고 있을 것입니다. 이러한 방법으로 가까운 목표를 정해 짧은 프로그램 문장을 외워서 조금씩 늘려가면 어느새 목표에 도달하는 즐거움을 맛보게 되며 프로그램밍 개념과 명령문, 논리구조를 모르는 사이에 익히게 됩니다. 먼저 귀여움 고양이 웹앨범 만들기로 웹프로그래밍에서 가장 중요한 개념인 문서객체모델(DOM)을 익히고 이어서 쉬운 슈팅 게임을 만들어 HTML5 캔버스를 익히게 되면 HTML5에 편하게 쉽게 접근할 수 있게 됩니다. 나중에는 PC에서 동작하는 웹 게임을 안드도로이도폰에서도 동작하도록 터치스크린 모듈을 추가하여 여러분의 폰에서도 게임을 즐길 수 있게 합니다.

저자 : 곽노태 1982년 일본서 쓰던 8비트 PC(PC-8001)를 가져와 베이식 프로그래밍 연습 2000년부터 5년간 한별전자 웹서버를 구축, 관리, C++, VB을 이용한 녹취 시스템, 여론조사 S/W 개발 2010년부터 5년간 외대에서 웹프로그래밍 강의 2008 년부터 8년간 한경대에서 매틀랩 입문, 수치해석(매틀랩) 강의 미생물학 박사, 수질관리기술사, 정보처리기사 1급, 토목기사 1급, MCMA(매틀랩 자격증)

머리말 1 부: 문 앞에 서서 1장 웹 프로그래밍 1. 웹프로그래밍 앞서 인터넷과 웹문서? 2. 웹프로그래밍? 2 장 웹앨범 만들기에 앞서 1. 웹문서 만들기에 앞선 준비 2. 웹문서 = 초문서 ? 3. HTML 첫 번째 3장 웹프로그래밍, 자바스크립트 2 부 고양이 웹앨범 4 장 고양이 웹앨범 시작 1. 연결 태그로 시도 2. 이미지 태그 등장 3. 웹프로그래밍 언어, 자바스크립트의 등장 4. 스타일 문의 등장 5. Frame/Iframe 사용하는 방법 5 장 첫 고양이 웹앨범 1. 시작에 앞서 2. 사건처리(Event handling) 3. 연결 요소(a Ele)의 속성(attribute) 알아보기 4. 이미지 요소에 접근하여 이미지 속성(“src”)를 바꾼다. 5. 완성된 첫 엘범 6. 최소기능보장 6 장 두 번째 웹앨범 1. 설명문 추가 2. 목록을 작은 그림으로 7 장 목록(List) 요소 등장 1. 문자 목록 앨범 2. 스타일 문과 스크립트 문을 별도의 파일로 처리 3. 스타일문 없이 목록 요소를 써서 웹앨범 만들기 4. HTML5 캔버스 사용한 앨범 8 장 세 번째 웹앨범: 요소 생성 1. 요소노드(태그, 객체) 생성 2. 노드 트리 다시 보기 3 부 : HTML5 캔버스 이용 게임 9 장 쉬운 슈팅게임 1. HTML 2. 스타일 3. 자바스크립트 10 장 쉬운 슈팅게임 이어서 1. 드론이 많이 나타남 2. 충돌 처리 3. 전체 스크립트와 실행 화면 4. 난이도 조절 11 장 쉬운 슈팅게임 완성 1. 그림 이미지로 바꾸기 2. 문자열과 승패 처리 3. 전체 스크립트 12 장 새총 게임 1. 기본 틀 = 그림 그리기 2. 새총 당기기 13 장 새총 게임 이어서 3. 새총 발사 4. 새 명중 5. 꾸미기 6. 여지까지의 전체 스크립트 14 장 새총 게임 최종 1. 점수 넣고 재장전 2. 모바일폰 용 게임 3. 움직임(Animation) 추가 4. 전체 스크립트 5. 추가 업그레이드나 변경 사항, 문제점 4 부: 3-5-7 게임(HTML5 Drag & Drop) 15 장 3-5-7 게임 겉모습 만들기 1. 겉모습 만들기 2. HTML5 Drag & Drop 16 장 3-5-7 게임 틀 만들기 1. 한 그룹에서만 말을 움직이도록 설정 2. PC 무작위로 말 움직이기 3. 승패 표시 4. 간단한 3-5-7 게임 전체 소스 17 장 3-5-7 게임 논리 구조 1. 이기는 조합 만들기 2. 이기는 조합인지 알아보기 3. 모든 가능한 응수를 실행해 보기 4. (이기는 응수를 찾은) 다음 말 움직이기 5. 전체 소스 6. 추가 개선 사항 5 부: 위치확인(GeoLocation)과 지도 표시 18 장 구글맵 표시 웹프로그래밍 연습 1. 현 위치 알아내기(Geolocation) 2. 지도 표시 3. 현 위치에 맞는 지도 표시 4. 스마트 폰에서 동작하게 하기 5. (참고) 구글 지도 API 문서 6 부: 2중 메뉴(주메뉴 + 부메뉴) 19 장 메뉴를 DOM 방식으로 만들기 1. 인터넷 IE 6,7 용 수직 이중메뉴 2. 모든 브라우저에서 동작하는 수직 이중메뉴 3. 스크립트 분리 수직 이중메뉴 4. 요소 아이디를 쓰지 않은 수직 이중메뉴 5. 스타일 문으로 이중메뉴 구현 20 장 항해 메뉴판 1 1. 수직 이중메뉴(수직 주메뉴 + 수직 부메뉴) 2. 수직 옆 펼침 메뉴(수직 주메뉴 + 수평 부메뉴) 21 장 항해 메뉴판 2 1. 펼쳐 내림 메뉴(수평 주메뉴+수직 부메뉴) 2. 수평 이중메뉴(수평 주메뉴+수평 부메뉴) 3. 튀어나옴 메뉴 7 부: 웹서버 언어 22 장 PHP 서버 언어 1. 로긴 폼 페이지와 이를 처리하는 서버용 php 프로그램 2. PHP 문서객체모델(DOM) 3. 웹서버 만들기 23 장 서버언어 ASP와 Ajax 1. IIS 설치 2. APS 사용 예 3. 윈도우 IIS 설치 그림 4. AJAX 웹프로그래밍을 끝내며