静岡理工科大学 菅沼ホーム JavaScript 目次 索引

window オブジェクト

[機能]

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

[プロパティ]

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

[メソッド]

  1. alert("文字列")  「文字列」を表示する警告用ダイアログボックスを開く(使用例1参照).

  2. back()  一つ前のページに戻る

  3. blur()  Window を後ろに隠す.

  4. clearInterval(タイマー変数名)  タイマー変数名で指定されたタイマーをクリアする(使用例4参照).

  5. clearTimeout(タイマー変数名)  タイマー変数名で指定されたタイマーをクリアする.再度,同じタイマーを起動することによって,一定時間毎に何かの処理を行いたいような場合に利用する(使用例2,使用例3参照).

  6. close()  Window を閉じる(使用例2参照).

  7. confirm("文字列")  「文字列」を表示する確認用ダイアログボックスを開く.「OK」ボタンをクリックすると true,「キャンセル」ボタンをクリックすると false を返す(使用例1参照).

  8. find("文字列")  指定した文字列を検索する

  9. focus()  Window を前に出す.

  10. forward()  一つ先のページに進む

  11. home()  ホームページに移動

  12. moveBy(x, y)  Window を水平方向へ x,垂直方向へ y だけ移動する.

  13. moveTo(x, y)  Window を左上の座標が (x, y) になる位置に移動する(使用例2参照).

  14. open("URL", "ウィンドウ名", "属性")  Window を開く.各引数の意味は以下の通りである(使用例2参照).

    • 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  ウィンドウの高さ(ピクセル値)

  15. print()  印刷する

  16. prompt("文字列", 値)  「文字列」を表示し,入力欄に「値」がデフォルト値として設定されたダイアログボックスを開く.入力欄に入力された値を返す(使用例1参照).

  17. resizeBy(x, y)  Window を水平方向で x,垂直方向で y だけ大きさを変更する.

  18. resizeTo(x, y)  Window の大きさを (x, y) に変更する(使用例2参照).

  19. scrollBy(x, y)  ブラウザを水平方向に x,垂直方向に y だけスクロールする(使用例4参照).

  20. scrollTo(x, y)  ブラウザを指定された位置 (x, y) までスクロールする(使用例5参照).

  21. setInterval(処理, 時間)  指定された「時間(単位:ミリ秒)」毎に「処理」を繰り返す(使用例4参照).

  22. setTimeout(処理, 時間)  指定されたタイマーを設定する.「時間」に設定した時間(単位:ミリ秒)が経過すると,「処理」に設定した処理を実行する.戻り値はタイマー変数名である(使用例2,使用例3,使用例5参照).

  23. stop()  読み込みを中止する

[使用例]

  1. プログラム(下がそのソースコード)は,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">
    	<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>
    			
  2. プログラム(下がそのソースコード)では,test2.htm を resizable 以外のすべての属性を「no」にし,また,サイズを指定して開いている.その後,開いた Window をスクリーンの中央に移動し,2秒後にその Window のサイズを変更し,さらに4秒後には,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">
    	<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>
    			
  3. プログラム(下がそのソースコード)は,アニメーションの例である.この例では,定期的な動作を行うために使用例2と同じように,setTimeout メソッドを利用している.

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>image</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">
    	<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>
    			
  4. プログラム(下がそのソースコード)では,上の例とは異なり,setInterval メソッドを利用している.

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>image</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">
    	<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>
    			
  5. プログラム(下がそのソースコード)では,開かれてから2秒後に,指定された量だけブラウザをスクロールしている.

    <!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">
    	<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>
    	1.テストホームページ
    	2.テストホームページ
    	3.テストホームページ
    	4.テストホームページ
    	5.テストホームページ
    	6.テストホームページ
    	</PRE>
    	<SCRIPT TYPE="text/javascript">
    		setTimeout("scrollBy(50, 30)", 2000);
    	</SCRIPT>
    </BODY>
    </HTML>
    			
  6. プログラム(下がそのソースコード)は,sessionStorage と localStorage の使用方法である(一部のブラウザ -Chrome- だけで動作可能).

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

      Web Storage ( sessionStorage,localStorage )は,最大データ量( オリジン単位で,5 ~ 10 MB )や最大データ数(無制限)が大きく,意図的に送信しない限り,データはサーバに送信されない.sessionStorage は,ウィンドウやタブ間でデータの共有は不可能であり,ウィンドウやタブが閉じられた時点で消滅する.また,localStorage では,オリジン単位でデータを永続的に保存し,ウィンドウやタブ間でデータを共有することが可能である.なお,オリジンとは,プロトコル( http:// ) + ドメイン( www.sist.ac.jp ) + ポート番号( 80 )の組合せのことである.
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>Web Storage</TITLE>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<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>
    			

静岡理工科大学 菅沼ホーム JavaScript 目次 索引