ブラウザオブジェクト

ブラウザオブジェクトとは

  • ブラウザオブジェクトは、ブラウザに組み込まれているオブジェクトです
  • ブラウザ上の情報は、すべてオブジェクトとして扱うことができます
  • これらのオブジェクトを総称して「ブラウザオブジェクト」と呼びます




《主なブラウザオブジェクト一覧》

種類 説明
Window すべてのブラウザオブジェクトの親となるオブジェクト
Location WebページのURLを情報として持つオブジェクト
History

Webページの閲覧履歴を情報として持つオブジェクト
Document

Webページ上の部品の情報を持つオブジェクト


ブラウザオブジェクトも多くのメソッドやプロパティを持っています。
ブラウザオブジェクトのメソッドやプロパティを利用する場合も、先頭にオブジェクト名を指定しますが、その際オブジェクト名の頭文字は小文字にします。

  • Locationオブジェクトのhrefプロパティを利用する場合


window.location.href

ただし、「window.」は省略することが一般的なので以下のように記述していきます。


location.href


  • ブラウザオブジェクトのメソッドやプロパティを呼び出すとき、オブジェクト名の頭文字は小文字にする
  • 先頭の「window.」は省略できる


ブラウザのウィンドウ全体の情報

  • Windowオブジェクトは、すべてのブラウザオブジェクトの親となるオブジェクトで、ブラウザのウィンドウ全体の情報を保持します


《Windowオブジェクトの主なメソッド一覧》

メソッド名 概要
alert 警告用のダイアログボックスを表示する
confirm 確認用のダイアログボックスを表示する
open

サブウィンドウを開く
close サブウィンドウを閉じる
setInterval タイマーを設定する
clearInterval

タイマーを解除する

confirmメソッド

  • ダイアログボックスを表示します
  • confirmメソッドは「OK」と「キャンセル」の２つのボタンを表示し、どちらのボタンがクリックされたかを示す論理値を戻り値として返します



confirm（ '表示するメッセージ' ）;
※戻り値：true…OK false…キャンセル


《確認ダイアログの表示》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>確認ダイアログの表示</title>
<script>
  function check() {
    var result = confirm( '確認用のメッセージを表示します' );
    if (result) {
      console.log( 'OK' );
    } else {
      console.log( 'キャンセル' );
    }
  }
</script>
</head>
<body>
<button onclick="check();">クリック</button>
</body>
</html>

《実行結果》

  • OKボタンを押した場合

openメソッドとcloseメソッド

openメソッド
  • openメソッドでブラウザの新規ウィンドウ（新規タブ）を開き、closeメソッドで閉じます



open（ 'URL', 'ウィンドウ名', 'オプション1=値, オプション2=値, …' ）;
※第2引数以降は省略可能


《openメソッドのオプション一覧》

オプション 値 説明
width ピクセル値

ウィンドウの幅
height ピクセル値 ウィンドウの高さ
top ピクセル値

デスクトップ画面の上端からウィンドウまでの距離
left ピクセル値 デスクトップ画面の左端からウィンドウまでの距離

closeメソッド
  • closeメソッドで閉じることができるのは、openメソッドによって開かれたウィンドウ（タブ）のみです
  • Documentオブジェクトにも、closeメソッドが存在するため、「window.」は省略せずに必ず記述します



window.close();


《メインウィンドウ》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メインウィンドウ</title>
</head>
<body>
  <button onClick="open( 'sub.html', null, 'width=300,height=300' );">開く</button>
</body>
</html>


《サブウィンドウ》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サブウィンドウ</title>
</head>
<body>
  <button onclick="window.close();">閉じる</button>
</body>
</html>

setIntervalメソッドとclearIntervalメソッド

  • setIntervalメソッドは、一定の間隔ごとに処理を呼び出す、タイマー機能を開始します
  • 一定間隔で表示画像を切り替えるなどの用途で使われます
  • タイマーを停止するには、clearIntervalメソッドを使います



setInterval ( 関数名または関数式, 時間感覚 );

  • 時間間隔はミリ秒（1/1000秒）単位で指定します
  • タイマーが開始されると、指定された処理が一定間隔で実行され続けます
  • このメソッドの戻り値は、タイマーに割り当てられたIDです
  • IDは、タイマーを停止する際に必要となります
  • タイマーを指定するには、clearIntervalメソッドを使います
  • このメソッドは、指定されたIDのタイマーを停止します



clearInterval ( タイマーID );



《タイマー機能の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
<script>
  var count = 0;
  var timer = setInterval( output, 1000 );
  function output() {
    count++;
    console.log( count + '秒経過' );
    if(count >= 10) {
      clearInterval( timer );
    }
  }
</script>
</head>
<body>
</body>
</html>


  • 1000ミリ秒（1秒）ごとにoutput関数を呼び出しています
  • output関数は、経過時間をコンソールに表示します
  • output関数が10回呼び出された時点で、タイマー機能を停止します


setTimeout/clearTimeout

  • setInterval/clearIntervalが処理を開始する間隔を指定するのに対し、setTimeout/clearTimeoutは、処理が終了してから何秒後に次の処理を開始するかを指定します
  • アニメーションのような、完了までに時間がかかる処理を実行する場合には、setTimeout/clearTimeoutを利用します


  • windowオブジェクトはすべてのブラウザオブジェクトの親にあたるオブジェクトで、ダイアログボックスの表示やタイマー処理を行うことができる