개요

HTML이 웹 페이지의 구조와 내용을, CSS가 서식과 외관을 결정한다면, JavaScript는 상호작용성을 추가하여 풍부한 웹 어플리케이션을 만듭니다.

그러나, 웹 브라우저 맥락에서 포괄적으로 쓰이는 용어로써의 "JavaScript"는 사실 매우 다른 요소 여럿을 포함하는 것입니다. 그 중 하나는 핵심 언어(ECMAScript)고, 다른 하나는 DOM(Document Object Model)을 포함한 Web API입니다.

핵심 언어, JavaScript(ECMAScript)

JavaScript의 핵심 언어는 ECMA TC39 위원회가 ECMAScript라는 이름으로 표준화했습니다.

핵심 언어는 node.js 등 비브라우저 환경에서도 사용됩니다.

어떤 것들이 ECMAScript에 속할까?

ECMAScript는 다음 항목을 정의합니다.

  • 언어 구문 (구문 분석 규칙, 키워드, 흐름 제어, 객체 리터럴 초기화 등)
  • 오류 처리 방법 (throw, try...catch, 사용자 정의 Error 유형 등)
  • 자료형 (불리언, 숫자, 문자열, 함수, 객체 등)
  • 전역 객체. 브라우저에서 전역 객체는 window 객체지만, ECMAScript는 브라우저에 국한되지 않는 API(parseInt, parseFloat, decodeURI, encodeURI 등)만 정의합니다.
  • 프로토타입 기반 상속 구조
  • 내장 객체 및 함수 (JSON, Math, Array.prototype 메서드, Object 내성검사 메서드 등)
  • 엄격 모드

브라우저 지원

2016년 10월 기준 주요 브라우저의 현버전은 ECMAScript 5.1과 ECMAScript 2015를 구현하지만, 여전히 사용되는 오래된 브라우저는 ECMAScript 5만 구현합니다.

미래

2015년 7월 17일, ECMAScript 6판이 ECMA General Assembly에 의해 공식으로 채택되고 표준으로 출판됐습니다. 이후 ECMAScript는 매년 새로운 판을 출판하고 있습니다.

국제화 API

ECMAScript 국제화 API 명세는 ECMAScript 언어 명세의 부속이며, 마찬가지로 ECMA TC39가 표준화했습니다. 국제화 API는 JavaScript 어플리케이션에 콜레이션(문자열 비교), 숫자 서식, 날짜 및 시간 서식 기능을 제공하므로, 어플리케이션이 언어를 선택하고 필요에 맞춰 기능을 적용할 수 있는 방법입니다. 초기 표준안은 2012년 12월에 통과했으며 브라우저 구현 상태는 Intl 객체 문서에서 추적 중입니다. 최근에는 국제화 명세도 매년 비준하고 있으며 브라우저 구현도 계속하여 향상 중입니다.

DOM API

WebIDL

WebIDL 명세는 DOM 기술과 ECMAScript 사이를 연결하는 역할을 합니다.

DOM의 핵심

DOM(Document Object Model)의 표준은 W3C에 의해 관리된다. HTML이나 XML 문서를 오브젝트로 추상화하여 언어에 관계없이 이들을 다루는 방법이 정의되어 있다. DOM에서 정의된 것들 중에 다음과 같은 것들이 중요하다.

  • 문서 구조, 나무 모델(tree model), DOM core에 있는 이벤트 구조. Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget 등 …
  • 덜 엄격한 DOM 이벤트 구조, DOM events에 속하는 특정 이벤트.
  • DOM TraversalDOM Range 등

ECMAScript에서는 DOM 명세에 의해 정의된 오브젝트들을 "호스트 오브젝트"라고 부른다.

HTML DOM

웹 마크업 언어인 HTML은 DOM 코어에 정의된 추상화 개념에 엘리먼트의 의미를 더한 레이어라고 할 수 있겠다. HTML DOM은 HTML 엘리먼트의 className 같은 속성과 document.body 같은 API도 포함한다.

HTML 명세는 문서의 제약도 정의한다. 예를들어 순서가 없는 리스트를 나타내는 ul 의 모든 자식들은 리스트 요소를 나타내는 li 엘리먼트여야 한다. 또한 표준에 정의되지 않은 엘리먼트와 속성을 사용하는것도 금지된다.

알아둘만한 다른 API

  • setTimeout 과 setInterval 함수는 HTML 표준의 Window 인터페이스에 처음으로 정의되었다.
  • XMLHttpRequest는 비동기적 HTTP 요청을 보낼 수 있게 해주는 API이다.
  • CSS Object Model는 CSS 규칙을 오브젝트처럼 다룰 수 있도록 추상화 해준다.
  • WebWorkers는 병렬 처리를 가능하게 하는 API이다.
  • WebSockets는 양방향 저수준 통신을 가능하게 하는 API이다.
  • Canvas 2D Context는 canvas 엘리먼트에 그릴 수 있게 해주는 API이다.

브라우저 지원

모든 웹 개발자들은 DOM이 엉망이라는 것을 경험했을 것이다. 기능마다 브라우저 지원 여부가 다르다. 가장 주요한 이유는 DOM의 많은 기능에 대한 명세가 불분명하기 때문이다. 또한 브라우저들에 인터넷 익스플로러 이벤트 모델같이 호환되지 않는 기능들이 추가되었기 때문이다. 2011년 6월 현재 W3C와 WHATWWG가 브라우저 호환성을 개선하기 위해 오래된 기능들에 대한 자세한 명세를 만들고 있다. 이런 흐름으로 본다면 브라우저들은 이 명세를 기반으로하여 개선될 것이다.

또 자주 쓰이는 접근은 여러 브라우저에서 호환이 되게 만든 자바스크립트 라이브러리를 사용하는 것이다. 이 라이브러리들은 DOM을 추상화해 여러 브라우저에서도 같은 기능을 쓸 수 있게 해준다. 가장 널리 쓰이는 프레임워크로는 jQuery, prototypeYUI가 있다.

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, teoli, ethertank, jaemin_jo
최종 변경자: mdnwebdocs-bot,