JavaScript 구현

JavaScript의 핵심 ECMAScript는 이 언어의 문법과 기본 객체를 설명합니다；

DOM은 웹 페이지 내용을 처리하는 방법과 인터페이스를 설명합니다；

BOM은 브라우저와의 상호작용 방법과 인터페이스를 설명합니다。

ECMAScript, DOM, BOM

ECMAScript는 중요한 표준이지만, JavaScript의 유일한 부분이 아니며,当然, 표준화된 유일한 부분도 아닙니다. 실제로, 완전한 JavaScript 구현은 다음 3개의 다른 부분으로 구성됩니다：

JavaScript는 ECMAScript, DOM 및 BOM을 포함합니다

ECMAScript

ECMAScript는 어떤 특정 브라우저와도 바인딩되지 않으며, 실제로는 어떤 사용자 입력/출력 방법도 언급하지 않습니다(이点是 C와 같은 언어와 달리, 이러한 작업을 완료하기 위해 외부 라이브러리에 의존해야 합니다). 그렇다면 ECMAScript는 무엇인가요? ECMA-262 표준(2장)의 설명은 다음과 같습니다：

“ECMAScript는 다양한 호스트 환경에 핵심 스크립트 프로그래밍 기능을 제공할 수 있으며, 따라서 핵심 스크립트 언어는 특정 호스트 환경과 분리되어 정의됩니다... ...”

웹 브라우저는 ECMAScript의 호스트 환경 중 하나입니다. 하지만, 그것은 유일한 호스트 환경이 아닙니다. 실제로는 Nombas의 ScriptEase와 Macromedia가 Flash와 Director MX에서 동시에 사용하는 ActionScript와 같은 수많은 다른 환경들이 ECMAScript 구현을 포함할 수 있습니다. 그렇다면 ECMAScript는 브라우저 밖에서 무엇을 규정하나요?

간단히 말해, ECMAScript는 다음 내용을 설명합니다:

  • 구문
  • 타입
  • 문장
  • 키워드
  • 보존어
  • 연산자
  • 객체

ECMAScript는 단순히 설명에 불과하며, 스크립트 언어의 모든 속성, 메서드 및 객체를 정의합니다. 다른 언어는 ECMAScript를 기능 기준으로 구현할 수 있으며, JavaScript는 그 중 하나입니다:

ECMAScript, JavaScript, ActionScript, ScriptEase

각 브라우저는 자신만의 ECMAScript 인터페이스 구현을 가지고 있으며, 이 구현은 DOM과 BOM(다음 장에서 다루겠습니다)를 포함한 확장을 받습니다.当然了, ECMAScript를 확장한 다른 구현도 많이 있습니다. 예를 들어 Windows 스크립트 호스트(Windows Scripting Host, WSH), Macromedia가 Flash와 Director MX에서 사용하는 ActionScript, 그리고 Nombas ScriptEase와 같은 것들입니다.

1. ECMAScript의 버전

ECMAScript는 여러 버전으로 나뉘며, ECMA-262라는 표준에서 정의되고 있습니다. 다른 표준과 마찬가지로 ECMA-262는 편집 및 업데이트됩니다. 주요 업데이트가 있을 때마다 새로운 표준 버전이 발행됩니다. 가장 최신 ECMA-262 버전은 5.1로, 2011년 6월에 발행되었습니다.

ECMA-262의 첫 번째 버전은 Netscape의 JavaScript 1.1과 본질적으로 같지만, 모든 브라우저와 관련된 코드를 제거했으며, 추가로 작은 조정이 이루어졌습니다. 먼저, ECMA-262는 Unicode 표준 지원을 요구합니다(다양한 언어를 지원하기 위해). 두 번째로, 객체는 플랫폼无关적이어야 합니다(Netscape의 JavaScript 1.1은 실제로 다른 객체 구현을 가지고 있으며, 예를 들어 Date 객체는 플랫폼에 의존합니다). 이것이 JavaScript 1.1과 1.2가 ECMA-262 규범의 첫 번째 버전에 맞지 않는 주요 원인입니다.

ECMA-262 제2판의 대부분의 업데이트는 편집적입니다. 이 표준의 업데이트는 ISO/IEC-16262와의 엄격한 일치를 위해 이루어졌으며, 특별히 추가, 변경 및 제거된 내용은 없었습니다. ECMAScript는 일반적으로 제2판을 준수하지 않습니다.

ECMA-262 제3판은 이 표준이 처음으로 진정한 업데이트를 받았습니다. 문자 처리, 오류 정의 및 숫자 출력을 업데이트했습니다. 또한 정규 표현식, 새로운 제어 문, try...catch 예외 처리 지원 및 표준의 국제화를 위해 작은 변경 사항을 추가했습니다. 일반적으로 이는 ECMAScript가 진정한 프로그래밍 언어로 자리 잡음을 의미합니다.

2. ECMAScript 부합성이란 무엇인가요

ECMA-262에서 ECMAScript 부합성(conformance)은 명확히 정의되어 있습니다. 스크립트 언어는 다음 네 가지 기본 원칙을 충족해야 합니다:

  • 부합하는 구현은 ECMA-262에서 설명된 모든 '타입, 값, 객체, 속성, 함수 및 프로그램 언어 및 의미'를 지원해야 합니다.(ECMA-262, 첫 페이지)
  • 부합하는 구현은 Unicode 문자 표준(UCS)을 지원해야 합니다.
  • 부합하는 구현은 ECMA-262에서 지정되지 않은 '추가 타입, 값, 객체, 속성 및 함수'를 추가할 수 있습니다. ECMA-262는 이 추가를 규범에서 명시되지 않은 새로운 객체나 객체의 새로운 속성으로 설명합니다
  • 부합하는 구현은 ECMA-262에서 정의되지 않은 '프로그램 및 정규 표현식 문법'을 지원할 수 있습니다.(의미는 내장된 정규 표현식 지원을 대체하거나 확장할 수 있습니다)

모든 ECMAScript 구현은 위의 표준에 부합해야 합니다.

3. 웹 브라우저의 ECMAScript 지원

1996년 Netscape Navigator 3.0이 JavaScript 1.1를 포함하여 출시되었습니다. 그리고 JavaScript 1.1 표준은 새로운 표준의 초안으로 EMCA에 제출되었습니다. JavaScript의 파괴적인 인기 덕분에 Netscape는 1.2 버전을 개발하기 시작했습니다. 하지만 문제는 ECMA가 Netscape의 초안을 받아들이지 않았다는 점입니다. Netscape Navigator 3.0이 출시된 직후, 마이크로소프트는 IE 3.0을 출시했습니다. 이 버전의 IE는 JScript 1.0(마이크로소프트 자체의 JavaScript 구현의 이름)을 포함하고 있으며, 원래는 JavaScript 1.1와 비교해야 할 계획이었습니다. 그러나 문서가 부족하고 일부 부적절한 중복 특성 때문에 JScript 1.0은 JavaScript 1.1의 수준에 도달하지 못했습니다.

ECMA-262 제1판이 최종 확정되기 전에, JavaScript 1.2를 포함한 Netscape Navigator 4.0이 1997년에 출시되었습니다. 그해 후반기에 ECMA-262 표준이 수락되고 표준화되었기 때문에, JavaScript 1.2는 ECMAScript 제1판과 호환되지 않습니다. ECMAScript는 JavaScript 1.1을 기반으로해야 합니다.

JScript의 다음 단계는 IE 4.0에 포함된 JScript 3.0입니다(2.0 버전은 IIS 3.0과 함께 출시되었지만, 브라우저에 포함되지 않았습니다). 마이크로소프트는 JScript 3.0이 세계에서 첫 번째로 ECMA 표준을 준수하는 스크립트 언어라고 강조했습니다. 그때, ECMA-262는 최종 확정되지 않았기 때문에 JScript 3.0도 JavaScript 1.2과 같은 운명을 맞이했습니다 - 최종 ECMAScript 표준에 맞지 않았습니다.

Netscape는 Netscape Navigator 4.06에서 JavaScript 구현을 업그레이드했습니다. JavaScript 1.3이 Netscape가 마침내 ECMAScript 제1판을 완전히 준수하게 되었습니다. Netscape는 Unicode 표준 지원에 참여하며, 모든 객체가 JavaScript 1.2에서 도입된 새로운 기능을 유지하면서 플랫폼 독립성을 실현했습니다.

Netscape가 그의 소스 코드를 Mozilla 프로젝트로 공개했을 때, Netscape Navigator 5.0에 JavaScript 1.4가 통합될 계획이었습니다. 그러나, 과격한 결정 - Netscape의 코드를 완전히 다시 설계하겠다는 것이 이 작업을 망가뜨렸습니다. JavaScript 1.4는 Netscape Enterprise Server의 서버 스크립트 언어로 단순히 발표되었으며, 이후에는 브라우저에 포함되지 않았습니다.

현재 모든 주요 웹 브라우저는 ECMA-262 제3판을 준수하고 있습니다.

다음 표는 대부분의 유명 웹 브라우저에서 ECMAScript 지원을 나열합니다:

브라우저 DOM 호환성
넷스케이프 네비게이터 2.0 -
넷스케이프 네비게이터 3.0 -
넷스케이프 네비게이터 4.0 - 4.05 -
넷스케이프 네비게이터 4.06 - 4.79 에디션 1
Netscape 6.0+ (Mozilla 0.6.0+) 에디션 3
인터넷 익스플로어러 3.0 -
인터넷 익스플로어러 4.0 -
인터넷 익스플로어러 5.0 에디션 1
인터넷 익스플로어러 5.5+ 에디션 3
오페라 6.0 - 7.1 에디션 2
오페라 7.2+ 에디션 3
Safari 1.0+/Konqueror ~ 2.0+ 에디션 3

DOM

DOM(문서 객체 모델)은 HTML과 XML의 애플리케이션 인터페이스(API)입니다. DOM은 전체 페이지를 노드 계층으로 구성된 문서로 계획합니다. HTML이나 XML 페이지의 각 부분은 노드의 유도체입니다. 다음의 HTML 페이지를 고려해보세요:

<html>
  <head>
    <title>샘플 페이지</title>
  </head>
  <body>
    <p>헬로 월드!</p>
  </body>
</html>

이 코드는 DOM을 통해 노드 계층도로 그릴 수 있습니다:

DOM 노드 계층도

DOM은 문서를 트리로 표현하여, 개발자가 문서의 내용과 구조에 전례 없는 통제력을 가지게 합니다. DOM API를 사용하면 노드를 쉽게 삭제, 추가, 교체할 수 있습니다.

1. 왜 DOM은 필수적일까요

IE 4.0와 넷스케이프 네비게이터 4.0부터 다양한 형태의 동적 HTML(DHTML)을 지원하기 시작하면서, 개발자들은 웹페이지를 다시 로드하지 않고도 그的外观과 내용을 수정할 수 있게 되었습니다. 이는 웹 기술의 큰 발전이었지만, 큰 문제도 가져왔습니다. 넷스케이프와 마이크로소프트는 각자 자신의 DHTML을 개발하여, 웹 개발자가 하나의 HTML 페이지만으로 모든 브라우저에서 접근할 수 있었던 시대를 종료했습니다.

산업계는 웹의 플랫폼 간 특성을 유지하기 위해 무엇인가를 하기로 결정했습니다. 그들은 Netscape와 마이크로소프트가 이렇게 하게 되면 웹이 두 개의 독립된 부분으로 분화될 것을 걱정했습니다. 각 부분은 특정 브라우저에만 적용됩니다. 따라서 웹 통신 표준을 지정하는 단체인 W3C(월드와이드웹협회)는 DOM을 개발하기 시작했습니다.

2. DOM의 각 레벨

DOM Level 1은 W3C가 1998년 10월에 제안했습니다. 이는 두 개의 모듈로 구성되어 있으며, DOM Core와 DOM HTML입니다. DOM Core는 XML을 기반으로 한 문서 구조도를 제공하여 문서의 어떤 부분도 접근하고操作할 수 있도록 합니다; DOM HTML은 DOM Core에 추가하여 HTML 전용 객체와 메서드를 추가하여 DOM Core를 확장합니다.

주의하세요, DOM은 JavaScript 독특한 것이 아닙니다. 사실, 많은 다른 언어들이 이를 구현했습니다. 그러나 웹 브라우저의 DOM은 ECMAScript로 구현되었으며, 이제 JavaScript 언어의 매우 중요한 부분이 되었습니다.

DOM Level 1은 단순한 목표인 문서 구조를 계획하는 것이 목표입니다. DOM Level 2의 목표는 넓습니다. 원래 DOM에 대한 확장은 마우스와 사용자 인터페이스 이벤트( DHTML이 이에 대해 풍부한 지원을 제공합니다)、범위, 탐색( DOM 문서의 메서드를 반복적으로 실행하는 것)을 추가하고, CSS(캐싱 스타일 시트)에 대한 지원을 추가하여 객체 인터페이스를 통해 추가했습니다. Level 1에서 도입된 원래 DOM Core는 XML 이름 공간에 대한 지원도 추가했습니다.

DOM Level 2은 새로운 인터페이스 유형을 처리하기 위해 여러 가지 새로운 DOM 모듈을 도입했습니다：

  • DOM 뷰 - 문서의 다양한 뷰를 추적하는 설명(즉, CSS 스타일링 전과 스타일링 후의 문서)
  • DOM 이벤트 - 이벤트 인터페이스를 설명
  • DOM 스타일 - CSS 스타일을 기반으로 처리하는 인터페이스를 설명
  • DOM 탐색 및 범위 - 문서 트리를 탐색하고操作하는 인터페이스를 설명

DOM Level 3은 문서를 일관된 방식으로 로드하고 유지하는 방법(신규 모듈 DOM Load and Save를 포함)과 문서 검증 방법( DOM Validation)을 도입하여 DOM을 확장했습니다. Level 3에서는 DOM Core가 XML 1.0의 모든 특성을 지원하게 되었으며, XML Infoset, XPath, XML Base를 포함합니다.

DOM을 배우는 동안, 누군가가 DOM Level 0을 인용할 수 있습니다. 주의하세요, DOM Level 0이라는 표준은 존재하지 않으며, 이는 단순히 DOM의 역사적 참조점에 불과합니다( DOM Level 0은 IE 4.0과 Netscape Navigator 4.0에서 지원한 원시 DHTML을 의미합니다).

3. 다른 DOM

DOM Core와 DOM HTML 외에도 다양한 언어들이 자신의 DOM 표준을 발표했습니다. 이들은 모두 XML을 기반으로 하며, 각 DOM은 해당 언어에 독특한 메서드와 인터페이스를 추가합니다：

  • 확장 가능 벡터 언어(SVG) 1.0
  • 디지털 표시 언어(MathML) 1.0
  • 동기화 멀티미디어 통합 언어(SMIL)

주석:더 많은 관련 내용을 배우고 싶다면 CodeW3C의 SMIL 강의 와 SVG 강의.

또한, 다른 언어도 자신의 DOM 구현을 개발했으며, 예를 들어 Mozilla의 XML 사용자 인터페이스 언어(XUL)입니다. 그러나 위에 나열된 몇 가지 언어만이 W3C의 권장 표준입니다.

4. 웹 브라우저에서의 DOM 지원

DOM은 웹 브라우저가 구현하기 시작하기 전에도 표준이었습니다. IE는 5.0 버전에서 처음으로 DOM을 시도했지만, 실제로는 5.5 버전 이후에야 정작 DOM 지원을 가지게 되었으며, IE 5.5는 DOM Level 1을 구현했습니다. 그 이후로 IE는 새로운 DOM 기능을 도입하지 않았습니다.

Netscape는 Netscape 6(Mozilla 0.6.0)까지 DOM 지원을 추가했습니다. 현재 Mozilla는 가장 좋은 DOM 지원을 제공하며, 완전한 Level 1, 대부분의 Level 2, 일부 Level 3을 구현했습니다.(Mozilla 개발 팀의 목표는 표준 100% 호환 가능한 브라우저를 만들고, 그들의 노력은 보상을 받았습니다.)

Opera는 7.0 버전까지 DOM 지원을 추가했으며, Safari도 대부분의 DOM Level 1을 구현했습니다. 이들은 IE 5.5와 거의 동일한 수준이며, 일부 경우에는 IE 5.5를 능가했습니다. 그러나 DOM 지원의 면에서 모든 브라우저는 Mozilla에 비해 매우 뒤쳐져 있습니다. 다음 표는 일반 브라우저가 DOM을 지원하는 내용을 나타냅니다.

브라우저 DOM 호환성
Netscape Navigator 1.0 - 4.x -
Netscape 6.0+ (Mozilla 0.6.0+) Level 1、Level 2、Level 3(부분)
IE 2.0 - 4.x -
IE 5.0 Level 1(최소)
IE 5.5+ Level 1(대부분 모두)
Opera 1.0 - 6.0 -
Opera 7.0+ Level 1(대부분 모두)、Level 2(부분)
Safari 1.0+/Konqueror ~ 2.0+ Level 1

주석:DOM의 지식을 더 깊이 배우고 싶다면 CodeW3C의 HTML DOM 강의 와 XML DOM 강의.

BOM

IE 3.0과 Netscape Navigator 3.0은 BOM(Browser Object Model)이라는 기능을 제공하였으며, 브라우저 창에 접근하고操作할 수 있습니다. BOM을 사용하면 개발자는 창을 이동하고 상태 표시줄의 텍스트를 변경하거나 페이지 내용과 직접 관련이 없는 다른 작업을 수행할 수 있습니다. BOM은 JavaScript의 일부로서, 어떤 관련 표준도 없는 것이 특징적이며, 종종 의심스럽게 여겨집니다.

BOM은 주로 브라우저 창과 프레임을 처리하지만, 일반적으로 브라우저 특정 JavaScript 확장은 BOM의 일부로 간주됩니다. 이러한 확장에는 다음이 포함됩니다:

  • 새 브라우저 창을 엽니다
  • 브라우저 창을 이동하고 닫기, 창 크기를 조정하는 것
  • 웹 브라우저 상세 정보를 제공하는 위치 객체
  • 사용자 화면 해상도 상세 정보를 제공하는 화면 객체
  • 쿠키 지원
  • IE는 BOM을 확장하여 ActiveXObject 클래스를 추가하였으며, JavaScript를 통해 ActiveX 객체를 인스턴스화할 수 있습니다.

BOM에 대한 관련 표준이 없기 때문에, 각 브라우저는 자신만의 BOM 구현을 가지고 있습니다. 일부 실질적인 표준은 하나의 창 객체와 하나의 탐색 객체를 가지고 있지만, 각 브라우저는 이러한 객체나 다른 객체에 대해 자신만의 속성과 메서드를 정의할 수 있습니다.

참조: