window

［機能］

　　ウインドウの生成，移動，サイズ変更，スクロール，タイマーなど，ウィンドウに対する様々な処理

［プロパティ］

closed　　Window が閉じられていると true を返す（使用例２参照）
console　　ブラウザのコンソールへ情報を出力するメソッドを提供する Console オブジェクトへの参照
使用例： console.log("value = " + x);
innerHeight　　Window の表示領域の高さ
innerWidth　　Window の表示領域の幅
length　　Window のフレーム数
localStorage　　ローカルストレージオブジェクトへの参照（使用例６参照）
- getItem(key)　　指定したキーに対応する値の取得（存在しないときは null ）
- setItem(key, value)　　データの追加（既に存在するキーの場合は更新）
- removeItem(key)　　指定したキーに対応するデータの削除
- clear()　　全データの削除
- key(index)　　index で指定されたキーの取得
- length　　データ件数
name　　Window の名前（使用例２参照）
opener　　現在の Window を開いた Window （使用例２参照）
outerHeight　　Window の外側の高さ
outerWidth　　Window の外側の幅
pageXOffset　　Window の横方向のオフセット
pageYOffset　　Window の縦方向のオフセット
parent　　親 Window
self　　自分自身
sessionStorage　　セッションストレージオブジェクトへの参照（使用例６参照）
- getItem(key)　　指定したキーに対応する値の取得（存在しないときは null ）
- setItem(key, value)　　データの追加（既に存在するキーの場合は更新）
- removeItem(key)　　指定したキーに対応するデータの削除
- clear()　　全データの削除
- key(index)　　index で指定されたキーの取得
- length　　データ件数
status　　ステータスバーに表示するメッセージ

［メソッド］

alert("文字列")　　「文字列」を表示する警告用ダイアログボックスを開く（使用例１参照）．
back()　　一つ前のページに戻る
blur()　　Window を後ろに隠す．
clearInterval(タイマー変数名)　　タイマー変数名で指定されたタイマーをクリアする（使用例４参照）．
clearTimeout(タイマー変数名)　　タイマー変数名で指定されたタイマーをクリアする．再度，同じタイマーを起動することによって，一定時間毎に何かの処理を行いたいような場合に利用する（使用例２，使用例３参照）．
close()　　Window を閉じる（使用例２参照）．
confirm("文字列")　　「文字列」を表示する確認用ダイアログボックスを開く．「OK」ボタンをクリックすると true，「キャンセル」ボタンをクリックすると false を返す（使用例１参照）．
find("文字列")　　指定した文字列を検索する
focus()　　Window を前に出す．
forward()　　一つ先のページに進む
home()　　ホームページに移動
moveBy(x, y)　　Window を水平方向へｘ，垂直方向へ y だけ移動する．
moveTo(x, y)　　Window を左上の座標が (x, y) になる位置に移動する（使用例２参照）．
open("URL", "ウィンドウ名", "属性")　　Window を開く．各引数の意味は以下の通りである（使用例２参照）．
- URL　　表示する URL（HTML ファイル名)を指定する．全く新しい Window を作成して開く場合は，
```
let nw = open("test.html", "test1");
nw.document.open();
nw.document.write("･････");
　　・・・・・
nw.document.close();				
```
  のように，document オブジェクトを利用して，その内容を生成する必要がある．
  
  ウィンドウ名　　ウィンドウ名を指定する．ウィンドウ名を同じにすると，同じウィンドウに表示される．フレームの NAME で指定された名前と同じにすると，そのフレームに表示される．
  属性　　以下の各属性に対して「=yes」，「=no」，または，「=ピクセル値」をカンマで区切って入力する．なお，省略すると「yes」とみなされる．
  - toolbar　　ツールバー
  - location　　ロケーションバー
  - directories　　ディレクトリバー
  - status　　ステータスバー
  - menubar　　メニューバー
  - scrollbars　　スクロールバー
  - resizable　　サイズ変更
  - width　　ウィンドウの幅(ピクセル値)
  - height　　ウィンドウの高さ(ピクセル値)
print()　　印刷する
prompt("文字列", 値)　　「文字列」を表示し，入力欄に「値」がデフォルト値として設定されたダイアログボックスを開く．入力欄に入力された値を返す（使用例１参照）．
resizeBy(x, y)　　Window を水平方向でｘ，垂直方向で y だけ大きさを変更する．
resizeTo(x, y)　　Window の大きさを (x, y) に変更する（使用例２参照）．
scrollBy(x, y)　　ブラウザを水平方向にｘ，垂直方向に y だけスクロールする（使用例４参照）．
scrollTo(x, y)　　ブラウザを指定された位置 (x, y) までスクロールする（使用例５参照）．
setInterval(処理, 時間)　　指定された「時間（単位:ミリ秒）」毎に「処理」を繰り返す（使用例４参照）．
setTimeout(処理, 時間)　　指定されたタイマーを設定する．「時間」に設定した時間（単位:ミリ秒）が経過すると，「処理」に設定した処理を実行する．戻り値はタイマー変数名である（使用例２，使用例３，使用例５参照）．
stop()　　読み込みを中止する

［使用例］

プログラム（下がそのソースコード）は，alert，confirm，及び，prompt の使用例である．最初に confirm によって確認ダイアログボックスが表示される．「OK」ボタンをクリックすると，prompt により入力欄付のダイアログボックスが表示される．また，「キャンセル」ボタンをクリックすると alert による警告ダイアログボックスが表示される．いずれの場合も，最後に，変数 data の値を表示した警告ダイアログボックスが表示される．

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>window</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<H1 STYLE="text-align: center">ダイアログ</H1>
	<SCRIPT TYPE="text/javascript">
		let data = -1;
		if (confirm("次へ進みますか？"))
			data = prompt("データを入力してください", 0);
		else
			alert("本当によろしいですか？");
		alert("data = " + data);
	</SCRIPT>
</BODY>
</HTML>

プログラム（下がそのソースコード）では，test2.htm を resizable 以外のすべての属性を「no」にし，また，サイズを指定して開いている．その後，開いた Window をスクリーンの中央に移動し，２秒後にその Window のサイズを変更し，さらに４秒後には，test2.htm を開いた Window 自身をクローズしている（ブラウザによっては不可能である場合がある）．test2.htm では，100 ミリ秒毎に test2.htm を開いた Window を監視しており，その Window が閉じられると自分自身も閉じている．この例では，定期的に監視するために setTimeout メソッドを利用している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>window</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<H1 STYLE="text-align: center">Window の生成</H1>
	<SCRIPT TYPE="text/javascript">
		nw = open("test2.htm", "test2", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=700, height=300");
		x = screen.width / 2 - 500;
		y = screen.height / 2 - 250;
		nw.moveTo(x, y);
	</SCRIPT>
</BODY>
</HTML>
------------------------------- test2.htm ---------------------------
<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>test2</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY onLoad='timerID1 = setTimeout("Last()", 100);' CLASS="white">
	<SCRIPT TYPE="text/javascript">
		document.write('<H1>' + name + '</H1>\n');
		document.write('<H2>テストホームページ</H2>\n');
		document.write('<H3>テストホームページ</H3>\n');
		timerID1 = null;
		timerID2 = setTimeout("resizeTo(1000, 500)", 2000);
		timerID3 = setTimeout("opener.close();", 4000);
		function Last()
		{
			if (opener == null || opener.closed)
				close();
			else {
				clearTimeout(timerID1);
				timerID1 = setTimeout("Last()", 100);
			}
		}
	</SCRIPT>
</BODY>
</HTML>

プログラム（下がそのソースコード）は，アニメーションの例である．この例では，定期的な動作を行うために使用例２と同じように，setTimeout メソッドを利用している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>image</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<H1 STYLE="text-align: center">アニメーション</H1>
	<P STYLE="text-align: center"><IMG SRC="fig1.jpg" NAME="fig"></P>
	<P STYLE="text-align: center">
		<INPUT TYPE="button" VALUE="スタート" onClick="a_start()">　　
		<INPUT TYPE="button" VALUE="ストップ" onClick="a_stop()">
	</P>
	<SCRIPT TYPE="text/javascript">
		no = 0;
		mv = false;
		fg = new Array(3);
		for (let i1 = 0; i1 < 3; i1++) {
			fg[i1]     = new Image();
			fg[i1].src = "fig" + (i1+1) + ".jpg";
		}
		timerID = setTimeout("", 100);

		function a_start()
		{
			if (!mv) {
				mv = true;
				ani();
			}
		}

		function a_stop()
		{
			if (mv)
				mv = false;
		}

		function ani()
		{
			clearTimeout(timerID);
			if (mv) {
				no++;
				if (no > 2)
					no = 0;
				fig.src = fg[no].src;
				timerID = setTimeout("ani()", 200);
			}
		}
	</SCRIPT>
</BODY>
</HTML>

プログラム（下がそのソースコード）では，上の例とは異なり，setInterval メソッドを利用している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>image</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<H1 STYLE="text-align: center">アニメーション</H1>
	<P STYLE="text-align: center"><IMG SRC="fig1.jpg" NAME="fig"></P>
	<P STYLE="text-align: center">
		<INPUT TYPE="button" VALUE="スタート" onClick="a_start()">　　
		<INPUT TYPE="button" VALUE="ストップ" onClick="a_stop()">
	</P>
	<SCRIPT TYPE="text/javascript">
		no = 0;
		mv = false;
		fg = new Array(3);
		for (let i1 = 0; i1 < 3; i1++) {
			fg[i1]     = new Image();
			fg[i1].src = "fig" + (i1+1) + ".jpg";
		}

		function a_start()
		{
			if (!mv) {
				timerID = setInterval('ani()',200);
				mv      = true;
			}
		}

		function a_stop()
		{
			if (mv) {
				clearInterval(timerID);
				mv = false;
			}
		}

		function ani()
		{
			no++;
			if (no > 2)
				no = 0;
			fig.src = fg[no].src;
		}
	</SCRIPT>
</BODY>
</HTML>

プログラム（下がそのソースコード）では，開かれてから２秒後に，指定された量だけブラウザをスクロールしている．

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>window</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<SCRIPT TYPE="text/javascript">
		open("test5.htm", "test5", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=250, height=100");
	</SCRIPT>
</BODY>
</HTML>
------------------------------- test5.htm ---------------------------
<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>window</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<PRE>
	１．テストホームページ
	２．テストホームページ
	３．テストホームページ
	４．テストホームページ
	５．テストホームページ
	６．テストホームページ
	</PRE>
	<SCRIPT TYPE="text/javascript">
		setTimeout("scrollBy(50, 30)", 2000);
	</SCRIPT>
</BODY>
</HTML>

プログラム（下がそのソースコード）は，sessionStorage と localStorage の使用方法である（一部のブラウザ -Chrome- だけで動作可能）．

　　ローカルな環境にデータを保存する機能としてクッキーが存在する．クッキーには，最大データ量（ 4 KB ）や最大データ数（ 20 ）が少ない，自動的にサーバに送信される，ウィンドウ間で共有可能，有効期限を指定できる，などの特徴がある．

　　Web Storage （ sessionStorage，localStorage ）は，最大データ量（オリジン単位で，5 ～ 10 MB ）や最大データ数（無制限）が大きく，意図的に送信しない限り，データはサーバに送信されない．sessionStorage は，ウィンドウやタブ間でデータの共有は不可能であり，ウィンドウやタブが閉じられた時点で消滅する．また，localStorage では，オリジン単位でデータを永続的に保存し，ウィンドウやタブ間でデータを共有することが可能である．なお，オリジンとは，プロトコル（ https:// ） + ドメイン（ informatics.sist.ac.jp ） + ポート番号（ 80 ）の組合せのことである．

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>Web Storage</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<SCRIPT TYPE="text/javascript">
		/************************************/
		/* Web Stirage に対するプログラム例 */
		/*      coded by Y.Suganuma         */
		/************************************/
		session = true;
		sw      = true;
				// Web Storage の切り替え
		function change() {
			document.getElementById("key").style.display = "none";
			document.getElementById("value").style.display = "none";
			document.getElementById("bt").style.display = "none";
			if (session) {
				session = false;
				document.getElementById("type").innerHTML = "localStorage";
			}
			else {
				session = true;
				document.getElementById("type").innerHTML = "sessionStorage";
			}
		}
				// データ件数
		function data_num() {
			document.getElementById("key").style.display = "none";
			document.getElementById("value").style.display = "none";
			document.getElementById("bt").style.display = "none";
			let str = "データ件数：";
			if (session)
				str += sessionStorage.length;
			else
				str += localStorage.length;
			document.getElementById("tx").value = str;
		}
				// データの追加と削除
		function add() {
			document.getElementById("key").style.display = "";
			document.getElementById("value").style.display = "";
			document.getElementById("bt").style.display = "";
			sw = true;
		}

		function del() {
			document.getElementById("key").style.display = "";
			document.getElementById("value").style.display = "none";
			document.getElementById("bt").style.display = "";
			sw = false;
		}

		function add_del() {
			let str;
			let key   = document.getElementById("key_v").value;
			if (sw) {
				let value = document.getElementById("value_v").value;
				if (session)
					sessionStorage.setItem(key, value);
				else
					localStorage.setItem(key, value);
				str = "(" + key + " : " + value + ") を追加しました";
			}
			else {
				let value;
				if (session) {
					value = sessionStorage.getItem(key);
					sessionStorage.removeItem(key);
				}
				else {
					value = localStorage.getItem(key);
					localStorage.removeItem(key);
				}
				str = "(" + key + " : " + value + ") を削除しました";
			}
			document.getElementById("tx").value = str;
		}
				// 全てのデータの削除
		function del_all() {
			document.getElementById("key").style.display = "none";
			document.getElementById("value").style.display = "none";
			document.getElementById("bt").style.display = "none";
			if (session)
				sessionStorage.clear();
			else
				localStorage.clear();
			document.getElementById("tx").value = "全てのデータを削除しました";
		}
				// 全てのデータの出力
		function out() {
			document.getElementById("key").style.display = "none";
			document.getElementById("value").style.display = "none";
			document.getElementById("bt").style.display = "none";
			let str = "";
			if (session) {
				for (let i1 = 0; i1 < sessionStorage.length; i1++) {
					let key   = sessionStorage.key(i1);
					let value = sessionStorage.getItem(key);
					str += "(" + key + " : " + value + ") \n";
				}
			}
			else {
				for (let i1 = 0; i1 < localStorage.length; i1++) {
					let key   = localStorage.key(i1);
					let value = localStorage.getItem(key);
					str += "(" + key + " : " + value + ") \n";
				}
			}
			document.getElementById("tx").value = str;
		}
	</SCRIPT>
</HEAD>
<BODY  STYLE="font-size:130%">
	<P STYLE="text-align:center">
		<INPUT TYPE="button" VALUE="Web Storage Type" onClick="change()" STYLE="font-size:90%"> ： <SPAN ID="type">sessionStorage</SPAN><BR><BR>
		<INPUT TYPE="button" VALUE="件数" onClick="data_num()" STYLE="font-size:90%">　
		<INPUT TYPE="button" VALUE="追加" onClick="add()" STYLE="font-size:90%">　
		<INPUT TYPE="button" VALUE="削除" onClick="del()" STYLE="font-size:90%">　
		<INPUT TYPE="button" VALUE="全削除" onClick="del_all()" STYLE="font-size:90%">　
		<INPUT TYPE="button" VALUE="全出力" onClick="out()" STYLE="font-size:90%"><BR><BR>
		<SPAN ID ="key" STYLE="display: none">キー : <INPUT TYPE="text" ID="key_v" SIZE="5" STYLE="font-size:120%"></SPAN>
		<SPAN ID ="value" STYLE="display: none">　値 : <INPUT TYPE="text" ID="value_v" SIZE="5" STYLE="font-size:120%"></SPAN>
		<SPAN ID="bt" STYLE="display: none">　<INPUT TYPE="button" VALUE="OK" onClick="add_del()" STYLE="font-size:90%"><BR><BR></SPAN>
		<TEXTAREA TYPE="text" ID="tx" COLS="30" ROWS="5" STYLE="font-size: 120%"></TEXTAREA>
	</P>
</BODY>
</HTML>

window オブジェクト