뇌보다 빠르게 반응하는 웹 페이지를 만들어보자 HTML과 CSS를 사용한 웹 페이지 작성에서 이제는 동적인 웹 애플리케이션을 만들도록 도약할 준비가 되었나요? 그렇다면 여기서 시작하세요. 이 책은 재미있고 쌍방향적인 웹 페이지 제작 여행을 위한 지침서입니다. 변수, 함수, 루프 같은 기본적인 웹 프로그래밍 기술부터 폼 유효성 검증, DOM 조작, 커스텀 객체, 디버깅 심지어는 Ajax까지 자바스크립트의 핵심사항들을 다루고 있습니다. 자 준비하세요. 대화형 웹 사이트가 저기 가고 있습니다. 대화형 웹 페이지로 사용자 경험을 향상시키세요. 지금 당장 후다닥 자바스크립트로 작업해 봅시다. 이벤트 처리를 무서워하지 마세요. 약간 아플 뿐입니다. 패턴에 맞춤으로써 폼의 유효성 검증 방법을 이해하세요. 여러분의 커스텀 디버그 콘솔을 사용해서 디버깅 하세요. 객체지향, 데이터-기반 블로그 퍼즐을 풀어보세요. DOM을 사용해서 웹 페이지를 조작해보세요. 온라인 어드벤처에서 여러분이 결정한 사항들을 추적해보세요. 퍼즐과 연습문제에 집중해 봅시다. 추천평 자바스크립트는 오랫도안 웹 페이지들을 구동시키는 클라이언트 측 엔지이었지만 많은 오해 때문에 그릇된 방법으로 사용되었습니다. 이 책에서 마이클 모리슨은 자바스크립트에 대한 오해를 불식시키고, 직관적이면서 이해하기 쉽게 설명합니다. - 안소니 T. 홀드너 3세, 『Ajax: Definitive Guide』 저자 매우 실용적이고 유용하며 설명이 잘되어있습니다. 이 책은 자바스크립트 초보자에게 헤드퍼스트 스타일로 설명한 완벽한 지침서입니다. 헤드퍼스트 자바스크립트는 전화번호부처럼 생긴 다른 자바스크립트 서적과는 달리 학습에 있어서 아주 훌륭한 책입니다. - 알렉스 리, 휴스턴 대학 학생 초급 자바스크립트 개발자를 위한 탁월한 선택 - 플래처 무어, 웹 개발자 겸 디자이너, 조지아 공대. 고전적인 헤드 퍼스트 스타일의 또 다른 훌륭한 책 장별 내용 1장 대화형 웹 가상의 세계에 반응하기 수동적인 페이지만 있는 웹은 더 이상 생각하기도 싫으시죠? 저도 그런 경험이 있습니다. 사실 이런 종류의 것을 책이라고 하죠. 읽기와 배우기, 그리고 다른 많은 것을 하기에는 책도 괜찮긴 합니다만, 역동적이지는 않습니다. 또한 자바스크립트의 도움이 없으면 웹에서는 읽기나 배우기 모두를 할 수 없습니다. 물론, 여기저기에 교묘한 트릭이 섞인 HTML과 CSS 코딩을 통해 폼을 전송할 수는 있을지 모르겠지만, 실제로는 생명력 없는 웹 페이지를 만드는 것에 불과하답니다. 진정으로 생기발랄한 역동성을 위해서는 조금 더 세련된 약간의 추가 작업을 요구하고 있습니다만... 이들은 훨씬 더 큰 비용이 소요됩니다. 2장 데이터 저장하기 모든 것들은 다 자신의 자리가 있습니다 현실에서 사람들은 가끔씩 물건을 보관할 장소의 중요성을 너무 간과하곤 합니다. 하지만 자바스크립트에서는 그렇지 않습니다. 그렇다고해서 고급스런 옷장과 자동차를 3대나 보관할 수 있는 차고가 필요한 것은 아닙니다. 자바스크립트에서 모든 것들은 다 자기 자리가 있습니다. 그리고 그 자리를 확인하는 것이 바로 여러분이 해야 할 일입니다. 중요한 것은 보관하는 데이터와 이를 어떻게 보여주고 저장하며, 보관했던 데이터를 어떻게 찾는가 하는 것입니다. 자바스크립트 보관 전문가로서, 이제 여러분은 자바스크립트 데이터들로 어질러진 방에서 수많은 가상의 인식표와 저장 박스를 사용해서 이들을 정리할 수 있게 될 것입니다. 3장 클라이언트 탐험 브라우저 동굴 탐험 가끔은 자바스크립트도 세상 돌아가는 일을 알아야 할 필요가 있습니다. 여러분의 스크립트는 웹 페이지에 있는 코드에서 시작하겠지만, 그들은 결국 브라우저나 클라이언트가 창조한 세상에서 살고 있습니다. 똑똑한 스크립트라면 자신이 살고 있는 세상에 대해 좀 더 많은 것을 알아야 하며, 이렇게 하기 위해 브라우저와 통신할 수 있습니다. 화면 크기를 알아내든지 브라우저의 알림 버튼에 접근하는 방법을 알아내든 간에, 스크립트는 브라우저와의 관계를 증진시킴으로써 많은 것을 얻을 수 있습니다. 4장 의사결정 갈림길을 만나면, 선택하세요 인생이란 선택 그 자체입니다. 가거나 멈추거나, 흔들거나 굽거나, 검사와 협상하거나 재판을 하거나...무엇인가를 결정하지 않았다면, 지금까지 아무것도 이루어질 수 없었을 것입니다. 자바스크립트에서도 마찬가지 입니다. 결정을 함으로써 스크립트는 여러 가지 가능한 결과들 중 하나를 선택하게 됩니다. 의사결정은 여러분의 스크립트에서 “이야기”를 전개해 나가며, 가장 평범한 스크립트조차도 줄거리를 갖고 있습니다. 어느 아리따운 아가씨가 입력한 내용을 믿고 해외여행이나 박람회 예약을 해야 할까요? 아니면 그녀가 진정으로 원하는 것은 버스를 타고 박람회를 가는 것이라는 사실을 알기 위해 나름대로 여러 번 체크해야 할까요? 선택은 여러분의 몫입니다! 5장 루핑 했던 얘기 되풀이하기 어떤 사람들은 반복이 생활의 활력소라고 얘기합니다. 물론 새롭고 흥미로운 것들을 하는 것도 분명히 재미있긴 하지만, 약간의 반복적인 일들도 일상 생활을 활기차게 만듭니다. 강박 관념에 사로잡혀 시도 때도 없이 손을 씻고, 신경질 부리며, 여러분이 받은 모든 별난 메시지에 대해 일일이 답장 버튼을 클릭한다고 생각해보세요! 여기까지도 좋습니다만, 이러한 반복적인 일이 실제 세계에서는 매력적이지 않을 수도 있습니다. 하지만, 자바스크립트의 세계에서는 매우 다루기 쉽습니다. 여러분은 스크립트에서 한 조각의 코드를 얼마나 자주 여러 번 반복하는지, 그리고 실제로 루핑의 힘이 얼마나 자주 영향을 미치는지 알게 되면 놀라게 될 것입니다. 루프가 없다면, 여러분은 한 주먹거리밖에 되지 않는 하찮은 코드를 잘라내고 붙이는 일에 하루 종일 매달려야 될지도 모릅니다. 6장 함수 아끼고, 재사용하고, 재활용하기 자바스크립트 내에서 환경 운동을 한다면, 아마도 함수들이 앞장 설 것입니다. 함수들은 자바스크립트 코드를 좀 더 효율적이고, 재사용 가능하게 만듭니다. 함수들은 작업 지향적이며, 코드를 조직화하는데 일가견을 가지고 있고, 훌륭한 문제 해결사들이라 할 수 있습니다. 지금 함수에 대해 이력서를 쓰는 것 같군요! 실제로, 가장 간단한 스크립트들 상당수는 기능적으로 재조직화되기를 기다리고 있습니다. 표준 함수에 대한 이산화탄소 배출량을 측정하는 것은 어렵기 때문에, 함수들에게 가능한 한 환경 친화적으로 스크립트를 작성하라고 말해 주세요. 7장 폼과 유효성 검증 사용자에게 모두 고백하기 자바스크립트를 사용해서 사용자들로부터 정보를 얻기 위해서 상냥해지거나 교활 해질 필요까지는 없습니다. 하지만 신중해질 필요는 있습니다. 인간은 실수를 하는 경향이 있는데, 이러 한 사실은 온라인 폼으로 항상 정확하고 올바른 데이터가 입력된다는 보장이 없음을 의미합니다. 자바스크립트로 들어가 봅시다. 올바른 자바스크립트 코드를 통해 폼 데이터를 입력된 그대로 전달함으로써, 웹 애플리케이션을 좀 더 신뢰성 있고, 서버에 부하를 덜어주도록 만들 수 있습니다. 우리는 스턴트 비디오와 귀여운 애완동물 사진과 같은 소중한 것들을 위해 귀중한 대역폭을 마련해 놓을 필요가 있습니다. 8장 페이지와 입씨름하기 DOM으로 HTML 요리하기 자바스크립트로 웹 페이지 컨텐츠를 제어하는 것은 빵을 굽는 것과 매우 흡사합니다. 주방이 좀 어질러져 있어야 나중에 먹을 것도 생기기 마련입니다. 여러분은 웹 페이지를 구성하는 HTML 구성 요소들 에 접근할 수 있습니다. 더 중요한 점은 여러분은 페이지의 조리법을 변경할 수 있는 능력을 가졌다는 점입니다. 자바 스크립트는 웹 페이지 내에서 HTML 코드를 조작하는 것을 가능하게 하는데, 이는 DOM(문서 객체 모델)이라 불리는 표준 객체 모음을 사용하여 모든 종류의 흥미로운 선택들을 시작할 수 있게 합니다. 9장 데이터에 생명 불어넣기 프랑켄쉬타인 같은 객체 자바스크립트 객체들은 여러분이 상상하고 있는 의사만큼 그렇게 끔찍하지는 않습니다. 하지만 그들은 자바스크립트 언어의 부품들을 모으는 데 흥미를 갖고 있으며, 이러한 부품들은 함께 있을때 시너지 효과를 내어 강력해집니다. 객체들은 여러분이 지금까지 보았던 데이터들보다는 훨씬 더 “생명력 있는” 새로운 데이터 타입을 생성해서 동작합니다. 결국 여러분은 자기 자신을 정렬하는 배열, 자신을 검색하는 문자열, 그리고 털이 나기 시작해서 달을 향해 울부짓는 스크립트를 보게 될 것입니다. 물론 이것이 객체에 관해 여러분들이 밝혀내야 할 최후의 것들은 아닙니다. 10장 사용자 정의 객체 만들기 나만의 방식으로 사용자 정의 객체 만들기 말처럼 쉽기만 하다면, 다 따놓은 당상입니다. 자바스크립트는 환불을 해주지 않습니다만, 분명히 여러분이 원하는 방식으로 주문할 수 있습니다. 자바스크립트에서 사용자 정의 객체는 큰 컵에 카페인 없이 휘젓지 않고 카라멜을 약간 넣은 거품이 없는 모카 마키아토나 커피와 같습니다. 즉, 이것은 바로 한 잔의 고객 맞춤 커피라고 할 수 있습니다! 프로퍼티와 메소드들의 도움을 받아 사용자 정의 자바스크립트 객체에 정확히 여러분이 원하는 동작을 하는 코드들을 섞을 수 있습니다. 이렇게 해서 만든 최종 결과로 바로 여러분을 위한 자바스크립트 언어를 효과적으로 확장하여 재사용할 수 있는 객체지향 코드가 나옵니다. 11장 버그 박멸하기 좋은 스크립트라도 때로는 잘못될 수 있습니다 잘 짜여진 자바스크립트 계획도 가끔은 실패합니다. 이런 일이 발생할 때, 여러분이 할 일은 공황 상태에 빠지는 것이 아닙니다. 최고의 자바스크립트 개발자들은 버그를 절대로 만들어내지 않는 사람을 의미하는 것이 아닙니다. 이런 사람들이 있다면 우리는 이들을 거짓말쟁이라고 부를 것입니다. 최고의 자바스크립트 개발자들은 그들이 만들어낸 버그들을 사냥해서 성공적으로 제거할 수 있는 사람들을 말합니다. 더 중요한 점은, 최고의 자바스크립트 버그 제거자는 버그들의 응큼하고 교활한 점을 최소화하는 좋은 코딩 습관을 개발하고 있습니다. 세심한 주의를 기울이면 버그들을 줄일 수 있습니다. 하지만 버그가 발생하면 여러분은 그들과 싸우기 위한 무기들이 필요하게 될 것입니다. 12장 동적인 데이터 스킨쉽을 좋아하는 웹 애플리케이션 현대적인 웹은 사용자들의 모든 변덕을 받아줄 것으로 예상되는 웹 페이지들이 거주 하는 곳입니다. 꼭 그렇지 않더라도 이는 최소한 많은 웹 사용자들과 개발자들의 꿈이기도 합니다. 자바스크립트 는 웹 페이지들의 “감정”을 드라마틱하게 변경하는 메커니즘을 제공하는 Ajax라고 알려진 프로그래밍 기술을 통해 이러한 꿈을 이루는 데 있어 중요한 역할을 담당하고 있습니다. Ajax를 사용해서 웹 페이지들은 훨씬 더 성숙된 애플리케이션처럼 행동할 수 있습니다. 왜냐하면 그들은 페이지 전체를 새로 고치거나 브라우저의 속임수 없이도 실시간으로 사 용자와 반응하면서 아주 재빠르게 데이터들을 로딩하고 저장할 수 있기 때문입니다.

1. 대화형 웹: 가상의 세계에 반응하기 2. 데이터 저장하기: 모든 것들은 다 자신의 자리가 있습니다 3. 클라이언트 탐험: 브라우저 동굴 탐험 4. 의사결정: 갈림길을 만나면, 선택하세요 5. 루핑: 했던 얘기 되풀이하기 6. 함수: 아끼고, 재사용하고, 재활용하기 7. 폼과 유효성 검증: 사용자에게 모두 고백하기 8. 페이지와 입씨름하기: DOM으로 HTML 요리하기 9. 데이터에 생명 불어넣기: 프랑켄쉬타인 같은 객체 10. 사용자 정의 객체 만들기: 나만의 방식으로 사용자 정의 객체 만들기 11. 버그 박멸하기: 좋은 스크립트라도 때로는 잘못될 수 있습니다 12. 동적인 데이터: 스킨쉽을 좋아하는 웹 애플리케이션