導入
HTML は Web ページのコンテンツや書式を格納するために使われ、 CSS は整えられたコンテンツが視覚的にどのように表示されるべきかというスタイルを記号化するし、 JavaScript はリッチな効果、リッチな Web アプリケーションを作成するために使われます。しかしながら、 Web ブラウザの関係で理解されている「JavaScript」という包括的用語は、異なるいくつかの要素を含んでいます。そのひとつはコア言語(ECMAScript) で、もうひとつは DOM (Document Object Model) です。
JavaScript: コア言語 (ECMAScript)
JavaScript のコア言語は ECMA の TC-39 委員会で ECMAScript という名前の言語として標準化されています。2011年3月現在、仕様の最新バージョンは ECMAScript 5 で、ほとんどの Web ブラウザが ECMAScript 3 と一部の ECMAScript 5 を実装しています。
何が ECMAScript の範囲に該当するか
特に、 ECMAScript は以下のことを規定します。
- 言語の文法 (構文解析のルール、キーワード、制御の流れ、オブジェクト リテラルの初期化…)
- エラー処理のメカニズム (throw、try/catch、ユーザ定義のエラー型の作成が可能なこと)
- 型 (boolean、number、string、function、object…)
- グローバルオブジェクト。ブラウザ環境では、このグローバルオブジェクトは window オブジェクトです。いくつかの関数がこのオブジェクトに加えられる (parseInt、parseFloat、decodeURI、encodeURI…)
- プロトタイプ ベースの継承メカニズム
- 組み込みオブジェクトと関数 (JSON、Math、Array.prototype メソッド、Object オブジェクトの内省メソッド…)
- Strict モード
ブラウザのサポート
歴史的に、 ECMAScript の特性は相互運用性のある方法でうまくサポートされました。 2011 年 6 月現在、実装の違いは ECMAScript 5 のサポートについて見つけることができます。いくつかのリソースが、 ECMAScript 5 のブラウザサポートについて示します。
将来
提案された第 4 版の ECMA-262 (ECMAScript 4 または ES4) は、第 3 版が 1999 年に発表されてから初めての ECMAScript のメジャーアップデートになるはずでした。 2008 年 9 月現在、 ECMAScript 第 4 版の提案は ECMAScript Harmony というコードネームで、特に Proxy や const
キーワードなどを定義しているプロジェクトに縮小されています。こちらから進捗状況を追うことができます。
DOM (Document Object Model)
WebIDL
WebIDL の仕様 は DOM 技術と ECMAScript を繋ぐ機能を提供します。
DOM Core
Document Object Model Core は W3C によって標準化されています。 DOM Core は、 HTML や XML 文書をオブジェクトや機構として抽象化し操作するための、言語にとらわれないインターフェースを定義します。例えば、以下のものが DOM によって定義されていることが分かります。
- DOM core では文書構造、ツリーモデルや DOM イベントの構造。 Node 、Element 、DocumentFragment 、Document 、DOMImplementation 、Event 、EventTarget など
- DOM events の具体的なイベントに加えて、 DOM イベントの構造のあまり厳密ではない定義
- その他、 DOM Traversal や DOM Range など
ECMAScript の視点からは、 DOM 仕様で定義されるオブジェクトは「ホストオブジェクト」と呼ばれます。
HTML DOM
Web のマークアップ言語のひとつである HTML は、 DOM に関しても記述されています。 DOM Core における抽象化の概念上に、 更に HTML は要素の意味を定義しています。 HTML DOM は HTML 要素の className
プロパティ、あるいは document.body
のような API などを含んでいます。
HTML 仕様は文書での制限についても定義します。例えば、「順不同リストを意味する ul
要素のすべての子は、そのリストアイテムを意味する li
要素でなければならない」などです。一般的に、標準で定義されていない要素や属性を使用することは認められていません。
注目すべきその他の API
- setTimeout や setInterval 関数は HTML 標準の Window インターフェイスで初めて規定されています。
- XMLHttpRequest。非同期の HTTP リクエストを送ることを許可する API です。
- CSS オブジェクト モデル。 CSSOM は CSS のルールをオブジェクトとして抽象化します。
- WebWorkers。並列処理を許可する API です。
- WebSockets。双方向通信を許可する API です。
- Canvas 2D コンテキスト。 canvas 要素のための描画 API です。
ブラウザのサポート
どの Web 開発者も「DOM は面倒である」ということに悩まされてきました。ブラウザのサポートの統一性は、機能によって大きく異なります。この状況の主な理由は、 DOM の多くの重要な機能は、あったとしてもその仕様が非常に不明確であったという事実です。また、異なる Web ブラウザが、 Internet Explorer のイベントモデルのようなユースケースと重複するために互換性の無い機能を追加してきました。現在(2011 年 6 月現在)の流行は W3C 、とりわけ WHATWG が相互運用性を改善するために細部にわたって古い機能を定義していることです。この流行を追って、ブラウザはこれらの仕様に基づきその実装を改善しています。
ブラウザ間の互換性保持のための一般的なアプローチのひとつとして、 JavaScript のライブラリの使用が挙げられます。これらのライブラリは DOM の機能を抽象化し、異なるブラウザでこれらの API が同じように動作することを保証します。最も広く使われているフレームワークには、 jQuery や prototype、 YUI があります。