ブラウザ環境、仕様

JavaScript言語は、当初ウェブブラウザ向けに作成されました。それ以来、多くの用途とプラットフォームを持つ言語へと進化しました。

プラットフォームとは、ブラウザ、ウェブサーバー、その他のホスト、あるいはJavaScriptを実行できる「スマート」なコーヒーメーカーなど、様々なものを指します。これらそれぞれは、プラットフォーム固有の機能を提供します。JavaScript仕様では、これをホスト環境と呼びます。

ホスト環境は、言語コアに加えて、独自のオブジェクトと関数を提供します。ウェブブラウザはウェブページを制御する手段を提供し、Node.jsはサーバーサイド機能を提供するなどします。

JavaScriptがウェブブラウザで実行されるときの概要を以下に示します。

windowと呼ばれる「ルート」オブジェクトがあります。これは2つの役割を持っています。

1. まず、グローバルオブジェクトの章で説明されているように、JavaScriptコードのグローバルオブジェクトです。
2. 次に、「ブラウザウィンドウ」を表し、それを制御するためのメソッドを提供します。

例えば、グローバルオブジェクトとして使用できます。

function sayHi() {
  alert("Hello");
}

// global functions are methods of the global object:
window.sayHi();

また、ブラウザウィンドウとして使用して、ウィンドウの高さを表示することもできます。

alert(window.innerHeight); // inner window height

他にもウィンドウ固有のメソッドやプロパティがありますが、これについては後で説明します。

DOM（ドキュメントオブジェクトモデル）

ドキュメントオブジェクトモデル（略してDOM）は、変更可能なオブジェクトとしてすべてのページコンテンツを表します。

documentオブジェクトは、ページへの主な「エントリポイント」です。これを使用して、ページ上のあらゆるものを変更または作成できます。

例えば

// change the background color to red
document.body.style.background = "red";

// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);

ここではdocument.body.styleを使用しましたが、他にも多くのものがあります。プロパティとメソッドは仕様に記載されています。DOM Living Standard.

BOM（ブラウザオブジェクトモデル）

ブラウザオブジェクトモデル（BOM）は、ドキュメント以外のすべてを操作するためにブラウザ（ホスト環境）が提供する追加のオブジェクトを表します。

例えば

• navigatorオブジェクトは、ブラウザとオペレーティングシステムに関する背景情報を提供します。多くのプロパティがありますが、最も広く知られている2つは、navigator.userAgent（現在のブラウザに関する情報）、navigator.platform（プラットフォームに関する情報、Windows/Linux/Macなどを区別するのに役立ちます）です。
• locationオブジェクトを使用すると、現在のURLを読み取り、ブラウザを新しいURLにリダイレクトできます。

locationオブジェクトの使用方法を以下に示します。

alert(location.href); // shows current URL
if (confirm("Go to Wikipedia?")) {
  location.href = "https://wikipedia.org"; // redirect the browser to another URL
}

alert/confirm/prompt関数もBOMの一部です。ドキュメントに直接関連していませんが、ユーザーと通信するための純粋なブラウザメソッドを表します。

概要

標準について言うと、次のようなものがあります。

DOM仕様

ドキュメントの構造、操作、イベントについて説明しています。https://dom.spec.whatwg.orgをご覧ください。

CSSOM仕様

スタイルシートとスタイルルール、それらの操作、ドキュメントへのバインドについて説明しています。https://www.w3.org/TR/cssom-1/をご覧ください。

HTML仕様

HTML言語（例：タグ）とBOM（ブラウザオブジェクトモデル）について説明しています。様々なブラウザ関数：setTimeout、alert、locationなど。https://html.spec.whatwg.orgをご覧ください。DOM仕様を受け継ぎ、多くの追加のプロパティとメソッドを拡張しています。

さらに、一部のクラスはhttps://spec.whatwg.org/で個別に説明されています。

これらのリンクを控えておいてください。学ぶべきことが多すぎて、すべてを網羅して覚えることは不可能です。

プロパティやメソッドについて読みたい場合は、https://developer.mozilla.org/en-US/のMozillaマニュアルも優れたリソースですが、対応する仕様の方が優れている場合があります。読むのは複雑で時間がかかりますが、基礎知識をしっかりとしたものにすることができます。

何かを見つけるには、「WHATWG [用語]」または「MDN [用語]」でインターネット検索するのが便利な場合があります。例：https://google.com?q=whatwg+localstorage、https://google.com?q=mdn+localstorage。

それでは、ドキュメントがUIの中心的な役割を果たしているので、DOMの学習を始めましょう。