[HTML5] 자바스크립트와 DOM (Document Object Model)

자바스크립트와 DOM (Head First HTML5 Programming Chapter 2 요약)

자바스크립트를 이용하여 보다 인터랙티브한 페이지(앱)을 개발할 수 있다. 이때 자바스크립트는 DOM(Document Object Model)을 통해 문서에 있는 각 앨리먼트(element)와 그 내용(content)에 접근하게 되며 새로운 내용(앨리먼트)을 현재의 페이지에 추가할 수 도 있다. 따라서 HTML5를 이용해 웹 웹(Web App)을 개발하거나 사용자 반응을 이끌어내야 하는 다이내믹한 페이지를 개발해야 한다면 무엇보다 이러한 자바스크립트를 충분히 활용할 수 있는 지식과 그 기반이 되는 DOM에 대한 이해가 필수적이다.   

 

관련글 보기 : [웹/모바일 개발] - [HTML5] 자바스크립트와 DOM

 

 

핵심은 자바스크립트

자바스크립트로 작성한 코드를 활용해 유저의 액션에 반응하는 인터랙티브한 페이지를 만들 수 있다. (사실 하나의 페이지라기 보다는 이제는 하나의 어플리케이션 단위로 취급해야 하지 않을까 싶다.) 즉, 페이지의 내용을 동적으로 갱신하거나 그 내용을 변경하고 다른 웹서비스와의 메시지 커뮤니케이션을 통해 외부의 데이터를 주고받음으로써 HTML 이라고 하는 정적인 문서의 기존 개념수준을 웹 앱과 같은 어플리케이션 수준까지 확대, 구현할 수 있게 되었다. 그것의 핵심(도구)은 자바스크립트라는 것. 

자바스크립트의 동작방식 - 자바스크립트는 DOM으로 말한다.

개발자가 HTML 문서 (대개는 자바스크립트 코드가 함께 포함된)를 작성하여 브라우저로 띄우게 되면 브라우저는 해당 문서를 파싱하여 그 문서의 구조와 내용를 객체화한 DOM이라는 트리구조 표현모델로 만드는데 자바스크립트는 바로 이 DOM을 제어할 수 있기 때문에 (현재의 많은 웹사이트에서 보여지는 것과 같이) 다양한 제어와 풍부한 표현이 가능해진다.  

즉, 개발자는 DOM을 이용해 HTML 문서에 있는 마크업과 인터랙티브한 상호작용을 할 수 있다라고 정리할 수 있겠다. 그리고 플리커나 구글과 같은 각 서비스 업체에서 제공하고 있는 수많은 API를 통해 이것이 가능하며 앞으로 이러한 지원은 더욱더 확대될 것이 자명하다. 

쉬운 것부터 접근하자. 기본적으로 HTML 마크업으로 작성한 문서의 앨리먼트 Id와 getElementById() 메소드 및  앨리먼트의 innerHTML 속성만으로도 쉽게 해당 앨리먼트의 내용을 바꿀 수 있다. (하지만 여러분이 웹앱을 개밸하는 개발자가 된다면 오리지날(?) 자바스크립보다는 jQuery를 사용할 확률이 클 것이다.)  

다만 브라우저는 해당 페이지를 모두 읽어들이고 나서야 해당 문서에 대한 DOM을 생성하므로 DOM 관련 코드를 실행하는 자바스크립트의 실행시점에 유의해야 한다. 때문에 DOM을 조작하는 코드는 대개 window.onload 이벤트의 핸들러로 등록한다. 

<script>
function init() {
  // DOM manipulating code
}

window.onload = init;
</script>

만일 jQuery로 작성한 코드라면 아래와 같이 되겠다.

<script>
  $(document).ready(function(){
    // DOM manipulating code
  });
</script>

언어로서의 자바스크립트 - C나 Java와 대동소이

- C나 Java에서는 타입을 지정하지 않고는 변수를 선언하거나 사용할 수 없다. 하지만 자바스크립트는 변수의 타입선언을 하지 않고도 변수를 사용할 수 있다. (이 점이 많은 부수적인 자바스크립트의 언어적 특징을 규정하게 된다.)

- 때문에  하나의 변수에 여러 타입의 값을 자유롭게 담을 수 있으므로 자바스크립트에서의 변수는 generic container 의 역할을 한다고 할 수 있다. 심지어 함수를 할당하는 것도 가능하다. (window.onload = init 에서 init() 함수처럼...)

- 변수 명명시 $로 시작하는 변수명(ex: $importantVar)을 사용할 수 있다. (jQuery에서 $("a")와 같은 변수를 사용 가능한 것이 이 때문인가?)

- 명시적인 변수타입 선언이 없기 때문에 변수 간의 연산시에 적절한 형변환이 발생하게 되므로 신경써야 함. 

- 그 외 for loop나 do while 반복문, case문과 같은 일반적인 언어적 문법특징은 대체로 C, Java와 대동소이