이 책은 스스로를 Head first HTML with css & XHTML의 후속 편(이하 전작)임을 자처하고 있다. 나 역시 전작을 보고 이해하기 쉬운 구성과 내용으로 일주일만에 책을 독파하고 긍정적인 리뷰를 작성했었다.

관련 리뷰: 바로 가기

때문에 이번에도 물 흐르듯이 이해하며 공부할 수 있으리란 기대가 컸다. 그러나 결론부터 말하면 전작과 달리 책을 보며 나도 모르게 짜증이 났던 적이 한 두 번이 아니었다. 물론 HTML, CSS와는 성격이 다른 자바스크립트 자체의 난이도 때문이기도 했지만 가장 짜증이 났던 것은 '연필을 깎으며'와 '브레인 파워'의 질문 난이도였다.

나도 이제 2권째이긴 해서 모든 시리즈가 그런지 알 수는 없으나 간단히 설명을 하자면 Head first 책은 개념을 설명한 뒤 독자에게 질문을 던지는 연필을 깎으며와, 한 단계 더 깊은 사고를 필요로 하는 질문인 브레인 파워가 전 챕터에 걸쳐 등장한다.

개인적으로 전작의 연필을 깎으며의 난이도가 그냥 커피였다면 이번 책의 난이도는 T.O.P라고 하고 싶다. 최소한 전작의 브레인 파워 정도의 난이도는 됐던 것 같다. 하물며 브레인 파워는 어땠을까? 그도 그럴 것이 HTML과 CSS는 브라우저에 나타나는 결과물 자체가 활용이자 응용 사례가 됐다면 자바스크립트는 많은 질문들이 책에서 설명한 개념을 정확히 이해하지 못하면 답을 적기 어려웠기 때문이다. 바로 이 부분에서 전작에서는 크게 느끼지 못했던 번역문의 어색함을 크게 느끼기도 했다.

구성 상에서도 아쉬움이 있는데 챕터11의 버그 박멸하기는 초반에 편성되었다면 좋았을 것이라는 생각이 강하게 들었다. HTML과 CSS는 코딩을 하고 브라우저에 띄우면 설사 이상한 모습이라도 결과물이 나온다. 하지만 자바스크립트는 작은 실수에도 브라우저가 먹통이 되기 다반사며 디버깅을 마치기 전까지 제대로 된 결과를 볼 수 없어서 답답했던 적이 한 두번이 아니었다. 메모장보다 조금 나은 EmEditor로 일일이 코딩을 했던 나로서는 디버깅을 위해 수십분 이상 시간을 쏟기도 했었기에 책의 후반에 챕터 11을 보고 한숨을 내쉴 수 밖에 없었다. 과장을 조금 보태자면 챕터 11은 책에서 소개한 브라우저 자체 디버깅 툴을 사용하지 않고 페이지를 한 번 쓰윽 본 후 브라우저에 화면을 한 번 띄워 보고 디버깅을 모두 마칠 수 있을 정도로 이골이 났을 정도였으니까.

어쩌다 보니 전작과 달리 이번 리뷰는 혹평 일색이 되어 버렸다. 그럼에도 책 자체의 내용은 Ajax가 등장하는 챕터 12를 제외하면 나같은 초보가 보기에도 크게 무리는 없다고 생각한다. 다만 전작과 비교할 때 구성상의 아쉬움이 크게 부각되어 느껴지는 것은 어쩔 수가 없는 것 같다.

덧붙여 전작을 보고 만들기 시작했던 개인 홈페이지가 대략 완성된 모습을 갖췄다. 바로 가기

전작을 보고 HTML과 CSS를 응용했던 것에 비해 자바스크립트를 크게 활용한 부분이 없어서 아쉽지만 아직은 내 실력이 부족해서 어쩔 수 없다고 생각한다. 이 리뷰를 쓰기전에 자바스크립트 실력을 늘리기 위해 Head first의 또 다른 시리즈인 Jquery를 주문했다. 전작은 독파하기까지 일주일, 이번 책은 보름이 걸렸다. 다음 책은 또 얼마 만큼의 시간이 걸릴지는 모르지만 하나만은 확실하다. 나의 홈페이지는 보다 더 발전된 외관과 깔끔해진 코딩을 갖게 될 것이라는 것은.

Head First 시리즈의 책들이 그렇듯이, 이 책은 JavaScript를 처음 배우는 사람이 개념을 잡는데 도움이 되는 책이다.

참고로 이 책의 12장에서 Ajax에 대한 내용이 나오는데, 이 책을 보고 Ajax를 활용하기에는 책의 내용이 부족해 보인다.  HTML/CSS/XHTML, jQuery, Ajax에 관련된 내용은 관련 주제의 Head Frist 책을 참고하는 것이 바람직할 것이다. 

다음은 책의 내용에 대한 설명이다.

1장 대화형 웹 - 가상의 세계에서 반응하기

JavaScript를 이용하여 동적인 웹페이지를 만드는 방법에 대하여 개념적인 설명을 하고 있다. 단순히, HTML과 CSS로는 처리할 수 없는 이벤트 처리를 JavaScript로 수행할 수 있음을 보여주고 있다. 42페이지에서는  HTML이 웹페이지의 구조와 내용을, CSS가 웹페이지의 표현방식에 해당하는 스타일을 지정하고, JavaScript는 사용자의 이벤트를 처리하기 위한 액션을 담당하고 있다는 것을 그림으로 설명하고 있다.  "바보 같은 질문이란 없습니다" 부분을 읽으면 JavaScript에 대하여 심도있게 이해할 수 있을 것이다.

2장 데이터 저장하기 - 모든 것들은 다 자신의 자리가 있습니다.

자바스크립트가 데이터를 저장하기 위한 공간으로 사용하는 상수와 변수에 대해서 설명하고 있다. 데이터의 유형으로  text, number, boolean과 같은 3가지 기본 데이터 타입을 사용한다.  변수를 선언하기 위해서 var 라는 키워드를 사용한다는 점, 변수에 할당되는 데이터의 종류에 따라 데이터 타입이 자동으로 할당된다는 점은 특히 주의해야 겠다. 85페이지 "바보 같은 질문이란 없습니다" 읽어 보기 바란다.

변수나 상수명을 정할 때, 비공식 표준인 소문자 낙타표기법(CamelCase)을 준수한다던지, 단일 스크립트 내에서 유일해야 한다던지 등에 관해서 설명하고 있다. 데이터를 초기화하지 않으면, 데이터는 정의되지 않은 것(undefined)으로 처리되며, 숫자가 들어가야 할 곳에 잘못된 값을 입력하면 NaN(Not a Number)이라는 값이 할당된다는 것을 기억해야 할 것이다.

개인적으로 FORTRAN, C, VB, C++ 언어를 배우고 자바스크립트 및 자바를 배웠는데... 자바스크립트에서 문자열로 된 "1"을 정수로 바꾸기 위한 parseInt() 함수를 찾지 못해서 고생했었던 기억이 난다.

엘리먼트의 ID를 이용하여 자바스크립트 객체를 조작할 수 있는 document 객체의 getElementById() 메소드에 대한 설명을 하고 있다. 즉, 사용자의 입력의 유효성 검증(validation)을  위해서 유용한 메소드라고 하겠다. Head First JavaScript에서 한가지 아쉬운 점은 HTML의 엘리먼트에 해당한느 자바객체들이 어떻게 생성되는지에 대한 설명부분이 부족하다는 것이다. 관련된 내용을 이 글의 맨 마지막 부분에 추가적으로 설명하였다.

 참고로 엘리먼트(Element)에 대해서 별다른 설명이 없는데, 이는 HTML의 모든 태그를 추상적으로 가리킨다고 보면 되겠다.

3장 클라이언트 탐험 - 브라우저 동굴 탐험

자바스크립트가 클라이언트에서 수행된다는 설명과, 타이머를 사용하는 방법에 대해서 설명하고 있다. 특히 타이머의 동작 방식에 대해서 제대로 이해하지 않으면 프로그램이 의도하지 않은 방식으로 동작되는 경우가 많다. 1회성은 setTimeout()을 이용하고, 반복해서 수행하고자 할 경우에는 setInterval()과 clearInterval()을 사용해야 한다.

페이지가 로드될 때(onload), 브라우저의 크기가 변할 때(onresize), 이미지의 크기를 클라이언트 윈도우에 맞추기 위하여, 클라이언트 윈도우 넓이를 알기 위하여 docment.body.clientWidth, document.body.clientHeight와  웹페이지의 엘리먼트의 style 객체를 활용하는 방법에 대해서 설명하고 있다.

자바스크립는 브라우저가 닫히거나, 페이지를 새로 갱신할 때 모든 변수를 파괴해 버리므로, 지속적으로 데이터를 저장하기 위한 방법으로 쿠키(cookie)를 사용하는 방법에 대해서 설명하고 있다. 쿠키는 사용자 컴퓨터의 하드디스크에 저장되는 정보의 조각(4kb 이하)으로, 쿠키명=값; expires= 소멸일자; path=경로명;의 형식을 지니며, 쿠기를 조작하기 위한  readCookie(), writeCookie(), reaseCookie() 함수를 어떻게 작성하는 지 보여주고 있다. 쿠키에 민감한 데이터를 저장하는 것은 보안상 바람직하지 않으며, 일부 부라우저에서는 디폴트로 쿠키를 사용할 수 없게 설정하는 경우도 있으므로, 쿠키가 사용가능한지 navigator.cookieEnabled 프로퍼티를 이용하여 확인하는 것이 확실하다고 설명하고 있다.

4장  의사결정 - 갈림길을 만나면, 선택하세요

둘 중에 한 가지를 선택할 때 if를 사용하는 방법, 비교연산자, 지역변수와 전역변수, switch 구문을 사용하는 방법에 대해서 설명하고 있다.

5장 루핑 - 했던 얘기 되풀이 하기

주어진 횟수만큼 반복하는 for 루프, 배열(2차원 배열 포함), 루프를 탈출하는 break; 다음 반복으로 바로 이동하는 continue;  논리 연산자 AND(&&), OR(||), NOT(!), 조건이 참인 동안 반복하는 while 루프에 대하여 설명하고 있다.

6장 함수 - 아끼고, 재사용하고, 재활용하고

큰 문제를 작은 문제로 분할해서 문제 해결을 쉽게 하기 위해서나(Divide & Conquer), 자바스크립트 코드를 효율적이고 재사용 가능하고 중복을 최소화하기 위하여 함수를 사용한다고 설명하고 있다.  

콜백(callback)함수에 대한 이야기가 나오는데, "Objective-C 프로그래밍" 이란 책을 리뷰하면서 24장에서 콜백의 정의와 종류에 대해서 언급한 적이 있다. http://blog.yes24.com/document/6531736 이 장에서 말하는 콜백은 "타킷-액션(Target-action)유형은 특정 이벤트가 발생하면 액션을 유발하는 특정 메시지를 타겟인 특정 객체로 보내고"는 콜백이다. 쉽게 생각하면, 프로그래머가 직접 함수를 호출하지 않고, 특정한 이벤트가 발생하였을 때, 브라우저가 호출하는 함수라고 이해하면 되겠다.

특정한 이벤트가 발생했을 때 해당 이벤트를 처리하기 위한 이벤트 핸들러(Event Handler)로 함수참조를 사용하며, 객체의 이벤트 프로퍼티 = 함수 참조(예를 들어, window.onload=initSeats; 와 같은 형태, onload 이벤트에 initSeats()함수에 대한 참조를 할당함)를 이용할 수 있다는 것을 설명하고 있다.

처음 자바스크립트를 배울 때, HTML 태그안에서 특정한 이벤트가 발생하면, 이벤트 핸들러를 추가하는 작업을 하다가, HTML 태그를 건드리지 않고 JavaScript 안에서  이벤트 핸들러를 등록할 수 있다는 사실에 대해서 매우 신기해 했었던 기억이 난다.  즉, ＜body onload="initSeats();"＞ 가 아니라...  window.onload=initSeats; 와 같이 설정해 주면 되는 것이다.

이벤트 핸들러에 인수를 전달하기 위해서, 책에서는 함수 리터럴(또는 익명함수, annoymous function)을 사용하는 예를 보여주고 있다. 일반적으로 익명함수는 대부분 1회성으로 사용되는데...  여기서는 이벤트가 발생한 경우 인수를 전달하거나 추가적인 작업을 수행하기 위한 목적으로 사용되었다.  페이지에 있는 모든 이벤트에 대한 이벤트 핸들러를 할당하는 작업은 onload 이벤트 핸들러  콜백함수에서 처리하는 것이 바람직하다는 것을 기억하는 것이 필요하다.  즉, window.onload = function() { .."여기서 객체의 이벤트 프로퍼티와 이벤트핸들러를 연결".. }  

7장 폼과 유효성 검증 - 사용자에게 모두 고백하기

HTML 웹페이지의 폼(form)에 있는 데이터들을 검증하기 위한 방법에 대하여 설명하고 있다. 특히, this.form 객체는 폼에 있는 모든 필드(Field)를 가지고 있으므로 특정 필드의 값은 this.form["필드명"].value를 통해서 참조할 수 있다.   

폼에 데이터를 입력할 때 발생하는 이벤트에 대해서 설명하고 있는데, 입력 필드를 선택하면 onfocus, 입력필드를 벗어나면 onblur, 입력필드를 벗어나면서 입력 내용이 변경되었을 때만 발생하는 onchange 이벤트에 대해서  설명하고 있다.  특히, onblur는 선택 포커스를 잃어버리면 무조건 발생하지만, onchange는 선택포커스를 잃어버리면서 내용이 변경된 경우에만 발생한다. 불행히도, 필드가 비어 있는 상태로 변경이 없으면 onchange 이벤트가 발생하지 않는다는 점에 주의해야 하겠다. 따라서 많은 경우 onblur에서 사용자 입력의 유효성을 검증하는 것이 바람직하다고 설명하고 있다.  

처음 자바스크립트를 배울 때, (332페이지에 설명되어 있지만) onfocus와 onblur라는 용어가 잘 와 닿지 않았다. 차라리.. onenter, onleave 이런 용어가 더 낫지 않을까 생각했었는데...  이건.. 폼의 개별 필드중심의 사고방식이고..  onfocus와 onblur는 사용자 중심의 사고방식이라고 생각한다.  즉... 사용자가 돋보기를 통하여 웹페이지를 본다면, 특정한 필드에서 작업하기 위해서는, 돋보기로 초점을 맞춰야 한다(onfocus). 작업이 끝나서 다른 필드로 이동을 하게 되면 현재 필드는 돋보기에서 멀어져 초점이 흐려지게 되는 것이다.(onblur)

사용자의 입력을 검증할 때 문제가 있을 때 alert 박스를 생성하게 되면, 과도한 팝업이 생성될 수 있기 대문에, 팝업을 사용하지 않고 사용자에게 도움말을 제공할 수 있는 방법에 대해서 설명하고 있다. 책에서는 document.getElementByID, span 태그, innerHTML을 이용하여 사용자 입력에 대한 유효성 검사 실패시 도움말을 보여주는 예제를 설명하고 있다.

필드 데이터의 길이 검증을 수행하는 방법과 우편번호, 날짜 형식, 전화번호,메일주소 등 보다 복잡한 형식을 검증하기 위한 정규 표현식(Regular Expresion)에 대해서 설명하고 있다.  여기서 변수에 정규표현식 문자열을 할당하면 자동으로 RegExp 객체를 생성하고 검증을 수행하기 위하여 test() 메소드를 호출한다는 사실을 기억하면 되겠다. (예, var regex= /^\d{5}$/;  regex.test(테스트할 문자열);  정규 표현식을 이용하게 되면, 다양한 패턴에대하여 검증을 할 수 있다. 

참고로, java언어로 작성한 프로그램의 소스코드에 오류가 존재하는지,  개발표준을 준수했는지 검사하기 위하여 PMD(Programming Mistake Detector)라는 툴을 사용할 수 있다. http://pmd.sourceforge.net/pmd-5.0.0/  (자신만의 룰(rule)을 추가할 수도 있다). 불행히도, PMD는 자바언어만 지원한다. 따라서, 화면을 다른 언어로 개발했다고 했을 때, 특정 패턴을 사용한 경우를 찾아 내려면 Multiline Search 지원 툴과 정규 표현식을 사용하면, PMD와 비슷한 결과를 얻을 수 있다.  

8장 페이지와 입씨름하기 - DOM으로 HTML 요리하기

＜div＞, ＜span＞, ＜p＞태그 내에 저장된 모든 컨텐츠를 접근하기 위하여 innerHTML 프로퍼티를 사용하는 방법에 대해서 설명하고 있다. 하지만.. innerHTML이 비표준이므로 표준에 순응하면서 보다 강력한 방법인 DOM에 대해서 설명하고 있다.

 웹페이지 컨텐츠와 구조에 대응되는 객체집합인 DOM(Document Object Model, 문서 객체 모델)은, 웹페이지를 동적으로 조작하는 데 유용한 모델로,  객체가 노드에 대응되고 노드들은 트리구조로 엮여 있다는 것을 설명하고 있다. DOM이  웹 페이지 데이터를 수정하고 접근하는 표준 메커니즘을 제공하므로 반드시 숙지해야 한다.

노드는 4가지 타입으로 구분되는데,  DOM트리의 가장 상위 노드인 Document 노드, HTML 태그에 대응되는 ELEMENT 노드, 엘리먼트 노드의 문자열(TEXT)을 보관하는 TEXT노드, 엘리먼트의 속성을 보관하는 ATTRIBUTE 노드(태그의 속성에 대응)로 나뉘어 진다.

노드의 프로퍼티(Property, 속성)로는, (TEXT와 ATTRIBUTE노드에만 존재하는) 노드 저장값을 나타내는 nodeValue, 숫자로 표현되는 노드의 유형을 나타내는 nodeType,  하나의 노드 밑에 있는 모든 자식 노드들을 포함하고 있는 childNodes, 첫번째 자식노드를 나타내는 firstChild, 마지막 자식노드를 나타내는 lastChild가 존재한다.

DOM을 이용해서, 실제로 HTML페이지를 변경하는 예를 설명하고 있는데, 노드 텍스트를 변경하기 위해서는 1) 자식 노드를 모두 제거하고node.removeChild(), 2) 새로운 텍스트 노드를 생성한 후document.createTextNode(), 3) 새 텍스트 노드를 자식 노드로 추가하는 방식node.appendChild()에 따라야 한다고 설명하고 있다.

DOM을 이용하여, 엘리먼트의 전체 style class를 변경하는 방법(노드의 className 속성이용)과, 엘리먼트의 개별 style 프로퍼티를 변경하는 방법(노드의 style 속성이용)을 설명하고 있고, document 객체의 createElement() 메소드를 통하여 HTML 엘리먼트를 생성할 수 있음을 예제로 보여주고 있다. 책에서는 의사결정 선택 기록을 위해서 ＜div id="history" ＞ 에 ＜p＞ 태그를 생성해서 계속 추가하는 형태로 만들었는데, 아이디어가 좋은 것 같다.

9장 데이터에 생명 불어 넣기 - 프랑켄쉬타인 같은 객체

자바스트립트에서 객체를 어떻게 생성하는 지 설명하고 있다. Java 언어에 익숙한 사람이 처음 JavaScript 언어로 객체를 생성하려고 했다면, "도대체 클래스는 어디서 정의하는 거야?" 하는 의문이 생길 것이다. (2장에서 JavaScript 변수를 선언할 때 별도의 타입을 지정하지 않고 var로 선언한 후, 할당된 값에 따라 타입이 정해는 것과 관련이 있다고 생각하면 되겠다.)  JavaScript에서는 별도로 클래스를 선언하지 않고, 생성자 함수에서 클래스에 필요한 속성과 메서드를 정의하면, new 연산자를 이용하여 생성자 함수가 호출되고  객체가 생성될 수 있는 것이다.  

자바 객체의 속성(프로퍼티)를 설정하려면, "this.속성명=값"의 형식을 이용한다. 객체의 메소드를 정의하는 방법은 이 장의 마지막 부분에 나온다. 중간에 JavaScript가 기본으로 제공하는 날짜를 위한 Date 객체, 객체내부에 객체를 설정하는 방법, 객체를 텍스트로 변환하는 방법, 객체로서 배열, Math 기본 객체에 대한 설명을 지나서, 477페이지에 함수를 메소드로 변환하기에서 설명되고 있다.

객체의 메소드는 "this.메소드명=function(인자..) { 함수명 } "의 형식으로 설정할 수 있다. 6장에서 이벤트의 핸들러를 설정하기 위하여 함수의 참조를 이용하는 방법, 익명함수(함수 리터럴)를 이용하는 방법과 동일하다. 다만, this.메소드명 = 함수리터럴; 형태는 인스턴스마다 불필요한 메소드 복사복을 생성하는 구조이기 때문에 10장에서 클래스 레벨에서 메소드를 정의하는 방법을 설명하고 있다.  

10장 사용자 정의 객체 만들기 - 나만의 방식으로 사용자 정의 객체 만들기

사용자 정의 객체를 보다 효율적으로 만드는 방법에 대해서 설명하고 있다. 즉, this를 사용하게 되면, 인스턴스 레벨에서 프로퍼티나 메소드가 생성되어, 개별 인스턴스 마다 메소드의 복사본을 가지게 되는 문제점이 발생한다.   이러한 문제점을 해결하기 위하여 클래스 레벨에서 메소드를 소유할 수 있게 모든 객체 내부에 존재하는 prototype 객체를 이용한다. 즉, 클래스명.prototype.메소드명=함수리터럴; 이런 식으로 선언하게 되면, 클래스 소유의 인스턴스 메소드가 생성되고, 모든 인스턴스들이 공유할 수 있게 된다. 

같은 방법으로 특정 클래스의 모든 인스턴스가 공유할 수 있는 클래스 프로퍼티를 생성하기 위해서는 클래스명.prototype.프로퍼티명=값; 의 형식을 사용하면 된다.

또한, prototype 객체를 이용하여 JavaScript 가 제공하는 표준 객체를 수정하는 방법에 대해서 설명하고 있다. (이와 같이 특정 언어가 제공하는 기본 클래스에 메소드를 추가하는 방법은 C# 이던지, Objective-C 던지 여러 언어에서 지원되고 있는 것 같다. http://blog.yes24.com/blog/blogMain.aspx?blogid=tobewiseys&artSeqNo=6531736&viewReply=1) 즉, 이미 Javascript가 제공하는 객체의 prototype에 메소드를 추가하는 방식이다.

클래스에 의해 소유되지만 인스턴스 프로퍼티에 접근할 수 없고 오직 클래스 프로퍼티만 접근할 수 있는  클래스 메소드를 생성할 수 있으며, 이는 prototype을 사용하지 않고, 클래스명.클래스메소드명=함수리터럴;과 같은 형태로 만들어질 수 있으며, 클래스명.메소드명(); 현태로 사용될 수 있다고 설명하고 있다.

11장 버그 박멸하기 - 좋은 스크립트라도 때로는 잘못될 수 있습니다.

자바스크립트에서 에러가 발생하는 경우 디버깅하는 방법에 대해서 설명하고 있다. 자바스크립트 관련 에러가 발생하면 IE보다는 파이어폭스를 이용하여 디버깅하는 것이 바람직하며, Firebug라는 디버거 플러그인을 활용하는 것을 추천하고 있다.  다만, 책에서도 반복해서 설명하고 있듯이 브라우저 종류별로 버그 리포팅의 레벨이 다르고 그나마 가장 디버깅하기 편리한 파이어폭스의 버그리포팅도 반드시 신뢰할 수 있는 것이 아니라는 사실에 유의해야 한다고 강조하고 있다. 비록, 브라우저가 불완전한 에러 정보를 만들어 내지만, 일반적으로 문제점들이 시작되는 장소를 찾아내는데 가치있는 단서를 제공하니 버그를 찾기 위한 시작점으로 보는 것이 맞다고 설명하고 있다.

에러의 유형에 대해서도 설명하고 있는데, 

1) 정의되지 않은 변수란, var를 사용해서 생성된 적이 없거나, 생성되었지만 아직까지 값을 할당하지 않은 변수를 의미하고

2) HTML, XML의 속성은 큰따옴표를 사용하고 속성안의 자바스크립트 문자열은 작은따옴표를 사용하는 것을 추천하고 있다. 즉.. ＜input onclick="docuemtn.getElementById('caller').value" ＞

3) 자바스크립트에서 대소문자를 구분하고

4) 비교연산을 할 때 a == b와 같이 =을 두 번사용하지 않고, a=b와 같이 =을 1번만 사용하는 경우는 자주 발생하는 오류이므로 특히 주의를 해야 하고,

5) alert 박스를 이용하여 변수 값 보기는 가능하지만, 너무 많은 팝업이 발생할 수 있으므로, 디버깅을 위한 사용자 정의 콘솔을 만드는 방법에 대해서 설명하고 있으며,

6) 페이지의 head에서 실행되는 스크립트 코드들은 HTML의 body 부분이 로드되어야 웹페이지의 엘리먼트들을 접근할 수 있다는 사실에 주의해야 한다.  특히, head 영역에서 정의된 JavaScript함수는 해당 함수가 호출되기 전까지 문제가 없으나, head 영역에서 직접 실행하는 JavaScript 코드가 body 영역에 있는 HTML 엘리먼트를 접근하려고 할 경우에 문제가 발생할 수 있다는 사실에 주의를 해야 하고, (즉, 객체에 접근을 시도하기 전에 반드시 생성을 먼저 해야 한다. )

7) 전역변수와 지역변수 명이 동일해서 에러가 발생할 수 있으므로, 전역변수와 지역변수 명이 동일하지 않도록 주의해야 한다고 설명하고 있다. 

자바스크립트에서 발생할 수 있는 에러는 언어의 규칙을 위반하여 인터프리터가 발생시키는 구문에러, 객체의 생성 및 초기화와 같이 실행시간에 발생하는 런타임 에러, 프로그램의 잘못된 로직으로 발생하는 논리 에러로 나뉠 수 있으며, 버그를 추적하기 위하여 일부 코드를 주석을 이용하여 무력화 하는 방법을 사용할 수 있음을설명하고 있다.

12장 동적인 데이터 - 스킨쉽을 좋아하는 웹 애플리케이션

이 장에서는 Ajax(Asynchronous JavaScript and XML) 를 이용하여 웹페이지가 웹서버로부터 동적으로 데이터를 받는 것을 설명하고 있다. 

자바스크립트에서 Ajax를 사용하려면 XMLHttpRequest 객체에 대하여 잘 알아야 한다.  이 객체는 웹브라우저가 비동기로 JavaScript가 XML을 요청하여 받을 수 있게 해주는 객체이다.  속성(프로퍼티)로는 요청의 진행상태를 숫자로 나타내는 readyState, HTTP 처리상태 코드를 나타내는 status, 서버로부터 반환된 text형태 문자열인 responseText, 서버로부터 반환된 XML 객체인 responseXML이 있고, 요청의 처리상태가 변하는 이벤트가 발생할 때마다 호출되는 함수를 지정하는 onreadstatechange가 있다.  또한, XMLHttpRequest객체의 메소드로는 요청을 취소하는 abort(), 요청의 타입과 URL을 명시하여 요청을 준비하는 open(), 처리를 위해 서버로 요청을 전송하는 send() 메소드가 있다.

실제로 XMLHttpRequest 객체를 사용하는 방식이 조금 복잡할 수 있는데, 589페이지에 XMLHttpRequest 객체를 사용하여 실제로 요청을 보내는 부분은 설명이 되어 있으나..  응답을 받아서 처리하는 부분은 는 방법에 대한 예제는 624페이지에 일부나와 있다.  Ajax에 대한 내용은 다른 책을 참고하는 것이 바람직해 보인다. (Head First Ajax 등)

------------------- 

사실...  Head First 시리즈는 개념을 잡기에는 좋지만 정리가 잘 된 스타일이라고 보기 어렵다.  개인적으로 JavaScript를 배우기 위해서 처음 공부한 책은 황기태 등 님의 "클릭하세요 자바스크립트 웹 프로그래밍"이라는 책이었다. 이 책의 3장에는   Javascript가 내장된 HTML을 웹브라우저가 어떻게 처리하는지 개념적인 모델을 그림으로 표현하고 있었다.  즉, 자바스크립트는 자바스크립트 엔진이, HTML은 HTML처리 엔진이 처리한다는 내용이 매우 마음에 들었다.  또한, 6장에서는 HTML의 엘리먼트들이 실제로 자바스크립트 객체 풀에서 어떻게 객체들로 생성되는 지 그림으로 표현하고, 이벤트 전달경로가 어떻게 되는지 그림으로 표현되어 있었다.

불행히도 이 책이 절판되고 난 후 ,  같은 저자가 "클랙하세요 DHTML + 자바스크립트 프로그래밍"이란 책이 나왔다. 이 책에도 같은 그림이 있었던 것으로 기억하는데...  Head First JavaScript 책에서 나오지 않는 개념 설명부분들이 있으니 참조하면 도움이 될 것이다.

		DHTML 자바스크립트 프로그래밍  황기태,이재문 공저
예스24 | 애드온2

		자바스크립트 웹 프로그래밍  황기태 등저
예스24 | 애드온2

Javascript의 J도 모르는 사람에게 맞다는 리뷰를 읽고 선택했다.

Java와 Javascript가 같은 것으로 알고 있던 나에게 딱 맞는 책이다.

순서대로 따라가면 - 점점 따라가기 만만치 않다 - 어쨌든 결과물은 나온다.

뒷부분으로 갈수록 프로그램 코딩량이 많아, 샘플 프로그램에서 복사해 쓰게 된다.

"여러분의 상사로부터 감사와 존경을 받으세요."

첫번째 실습에 나오는 농담이다.

지루하지 않게 재밌는 사진과 농담이 잘 섞여 있고,

'바보 같은 질문이란 없습니다'는 궁금한 것을 콕 집어 설명한다.

HTML과 CSS를 먼저 공부하고 보는 게 좋겠다.

기본이 너무 없어 좀 답답했다.

그리고 테스트 할 때는 MS Internet Exploler 말고 다른 걸 써야 한다.

MS IE는 잘 안된다. 홈페이지 가보니 뭘 고치라는데, 잘 모르겠고.

Mozilla Firefox를 설치해서 테스트했다.

헤드 퍼스트 책은 기본적으로 초심자를 위한 책입니다. 

그러나, 그동안 봐왔던 헤드퍼스트책은 완전 초보용 책은 아니었습니다. 

IT 계열의 "어린왕자" 와도 같아서, 어떤 배경지식을 갖고 읽느냐에 따라서, 깊은 내용이 보이기도 하는, 즉 독자에 맞춰서 읽을만한 가치를 보장해주는 그런 책이었습니다. 

그런데, 이 자바스크립트 책은 정말 초보만을 위한 책이었습니다. 

자바스크립트를 좀 써봤다 싶다면, 이 책은 그다지 도움이 되질 않습니다. 

헤드퍼스트 시리즈 치고는 좀 아쉬운 책이었습니다. 

내가 본(생각하는) 헤드퍼스트 시리즈는 친절한 설명과 가려운 곳을 긁어주는..

개념잡기에 아주 그만인 책이다.

헌데, JavaScript 버전은 특유의 상세한 설명도 부족하고, 편집도 별루..

예제를 일일이 비교해서 찾아야 한다니..  같은 폴더에 있으니 알아서 찾아보라

는것이 얼마 안되는 수고지만 독자에게는 정말 짜증스러운 일이라는 걸 모르시나..

내용면에서도 별 영양가가 없다. ＜- 갠적인 의견임

특유의 가려운 부분을 긁어주는 궁금증/의문에 대한 질의도 부족하고 예제 내용은 정말 자바스크립트를 1번도 안해본 사람만이 따라해볼만한 예제위주다.

약간의(설사 복사/붙여넣기를 주로 한 사람이라도) 경험만 있다면 이 책의 내용은 실망을 느껴줄 거 같다.

정말 JavaScript 의 J도 모르는 사람들에게만 추천한다.

덧) HeadFirst 매니아로서 안타까움. ㅋ