JavaScript Window は、ブラウザ ウィンドウのライフサイクルを制御し、それに対してさまざまな操作を行うために使用されるグローバル インターフェイス（オブジェクトの種類）です。
マルチタブブラウザの場合、ウィンドウオブジェクトは単一のタブを表しますが、innerHeight、innerWidth などのプロパティやresizeTo()などのメソッドはブラウザ全体のウィンドウに影響を及ぼします。
ウィンドウオブジェクトのプロパティは現在開いているウィンドウに関する情報を取得するために使用され、そのメソッドはウィンドウを開く、最大化、最小化などの特定のタスクを実行するために使用されます。
ウィンドウオブジェクトを理解するために、それを使用していくつかの操作を実行し、その動作を確認してみましょう。 このメソッドは新しいウィンドウを作成し、さらにそのウィンドウを管理するために使用できるオブジェクトを返します。
上記のコードでは、既存のウィンドウのウィンドウ オブジェクトを使用して、open() メソッドを使用して新しいウィンドウを作成しました。 open() メソッドでは、新しいウィンドウで開く URL (空白のままでも構いません)、ウィンドウの名前、作成するウィンドウの幅と高さを指定できます。
以下はウィンドウ オブジェクトの open() メソッドの構文です：
let newWindow = window.open(url, windowName, );新しいウィンドウを作成中に、必要なだけプロパティを指定できます。
open() メソッドが実行されると、作成された新しいウィンドウのウィンドウ オブジェクトの参照が返され、上記のコードで行ったように変数に代入することができます。 window.open() メソッドが返す値を win 変数に代入しました。
win 変数を使用して新しいウィンドウにアクセスし、ウィンドウの名前を取得したり、新しいウィンドウを開いたウィンドウの場所を取得したりしました。
ウィンドウオブジェクトには多くのプロパティとメソッドがあり、以下にリストアップしました。
ウィンドウの寸法を調べる
ウィンドウオブジェクトの組み込みプロパティを使用すると、ウィンドウの高さと幅を得ることができます。
また、windowオブジェクト(window.document)を使ってドキュメントオブジェクトにアクセスすることができます。
JavaScript Window Object Properties
Wondow オブジェクトのプロパティは、Windows オブジェクトの内部に作成された変数を参照しています。
JavaScript では、利用できるデータはすべてプロパティとして window オブジェクトに添付されています。 window.propertyname ここで、propertynameはプロパティの名前です。
最も一般的なウィンドウ オブジェクトのプロパティの表を以下に示します。
| Property | Description |
|---|---|
| closed | ウィンドウが閉じられたかどうかをブール値を返す |
| document | ウィンドウ内にドキュメント オブジェクトを特定する。 |
| history | ウィンドウのヒストリオブジェクトを指定します。 |
| frames | 現在のウィンドウにあるすべてのフレームの配列を指定する |
| defaultStatus | ウィンドウのステータスバーで表示するデフォルトメッセージを指定する |
| ウィンドウのステータスバーを指定する。 | |
| innerHeight | ウィンドウの内側の高さを指定します。 |
| innerWidth | ウィンドウの内側の幅を指定します。 |
| length | |
| location | ウィンドウのロケーションオブジェクトを指定する |
| name | ウィンドウ名を指定する |
| top | ブラウザ最上部のウィンドウへの参照を指定する | ブラウザ最上部のウィンドウへの参照を指定する。 |
| self | 現在のアクティブなフレームまたはウィンドウを返します。 |
| parent | 現在のウィンドウの親フレームまたはウィンドウを返します。 |
| status | ウィンドウでアクティビティが実行されたとき、ウィンドウのステータスバーに表示されるメッセージを指定します。 |
| screenleft | ユーザーのモニタ画面に対するウィンドウのx座標を指定します |
| screenTop | ユーザーのモニタ画面に対するウィンドウのy座標を指定します |
| screenX | |
| ユーザーのモニター画面に対するウィンドウのx座標を指定します | |
| screenY | ユーザーのモニター画面に対するウィンドウのy座標を指定します |
これらのプロパティがどのように作用するか例を挙げて見ていきましょう。
上の例では、新しいウィンドウの作成に慣れてもらうため、また、新しいウィンドウを作成するとき、現在のウィンドウは別のウィンドウ オブジェクトを持ち、新しいウィンドウは別のウィンドウ オブジェクトを持つことを理解してもらうために、新しいウィンドウを作成しています。
次に、作成された新しいウィンドウのいくつかのプロパティにアクセスすることを試みました。
TASK: 上記のコードのプレイグラウンドでさらにいくつかのウィンドウのプロパティを試して、ウィンドウのプロパティがどのように機能するかを練習して理解する。
JavaScript Window Object Methods
ウィンドウ オブジェクト メソッドは、ウィンドウ オブジェクト内部に作成される関数で、メッセージを表示したりユーザーから入力したりするなど、ブラウザ ウィンドウでさまざまな動作を行うために使用できるものを指しています。
以下に、最も一般的に使用されるウィンドウ オブジェクトのメソッドをいくつかリストアップします：
| Method | Description |
|---|---|
alert() |
メッセージと OK ボタンで警告ボックスを表示する方法を指定しています。 |
blur() |
現在のウィンドウからフォーカスを外すメソッドを指定します。 |
clearInterval() |
|
close() |
カレントウィンドウをクローズするメソッドを指定します。 |
confirm() |
メッセージと「OK」「キャンセル」ボタンを含むダイアログボックスを表示するメソッドを指定する |
focus() |
現在のウィンドウに焦点を設定するメソッドを指定する |
| 現在のウィンドウに焦点を設定するメソッドを指定する。 | |
open() |
新しいブラウザウィンドウを開くメソッドを指定する |
moveTo() |
指定位置にウィンドウを動かすメソッドを指定する |
moveBy() |
現在の位置から窓を相対移動させるメソッドを指定する。 |
prompt() |
入力を促すメソッドを指定します。 |
print() |
現在のウィンドウの内容を印刷するためにprintコマンドを送信するメソッドを指定します。 |
setTimeout() |
指定されたミリ秒の後に式を評価するメソッドを指定します。 |
setInterval() |
指定された時間間隔（ミリ秒単位）で式を評価するメソッドを指定する |
resizeBy() |
ウィンドウのサイズを変更する量を指定する |
resizeTo() |
scroll() |
ウィンドウをドキュメント内の特定の場所にスクロールする |
scrollBy() |
ウィンドウを与えられた値でスクロールする |
stop() |
このメソッドはウィンドウの読み込みを停止します |
例を挙げて、上記のメソッドがどのように動作するか見てみましょう。
上記の例では、いくつかのウィンドウ メソッドを使用しましたが、より多くのメソッドを試すことができます。 次のチュートリアルでは、window オブジェクトのプロパティである History オブジェクトについて学びます。