ブラウザオブジェクトとは
- ブラウザオブジェクトは、ブラウザに組み込まれているオブジェクトです
- ブラウザ上の情報は、すべてオブジェクトとして扱うことができます
- これらのオブジェクトを総称して「ブラウザオブジェクト」と呼びます
《主なブラウザオブジェクト一覧》
| 種類 | 説明 |
|---|
| Window |
すべてのブラウザオブジェクトの親となるオブジェクト |
|---|
| Location |
WebページのURLを情報として持つオブジェクト |
|---|
| History |
Webページの閲覧履歴を情報として持つオブジェクト
|
|---|
| Document |
Webページ上の部品の情報を持つオブジェクト
|
|---|
ブラウザオブジェクトも多くのメソッドやプロパティを持っています。
ブラウザオブジェクトのメソッドやプロパティを利用する場合も、先頭にオブジェクト名を指定しますが、その際オブジェクト名の頭文字は小文字にします。
- Locationオブジェクトのhrefプロパティを利用する場合
ただし、「window.」は省略することが一般的なので以下のように記述していきます。
- ブラウザオブジェクトのメソッドやプロパティを呼び出すとき、オブジェクト名の頭文字は小文字にする
- 先頭の「window.」は省略できる
ブラウザのウィンドウ全体の情報
- Windowオブジェクトは、すべてのブラウザオブジェクトの親となるオブジェクトで、ブラウザのウィンドウ全体の情報を保持します
《Windowオブジェクトの主なメソッド一覧》
| メソッド名 | 概要 |
|---|
| alert |
警告用のダイアログボックスを表示する |
|---|
| confirm |
確認用のダイアログボックスを表示する |
|---|
| open |
サブウィンドウを開く
|
|---|
| close |
サブウィンドウを閉じる |
|---|
| setInterval |
タイマーを設定する |
|---|
| clearInterval |
タイマーを解除する
|
|---|
- ダイアログボックスを表示します
- confirmメソッドは「OK」と「キャンセル」の２つのボタンを表示し、どちらのボタンがクリックされたかを示す論理値を戻り値として返します
※戻り値：true…OK false…キャンセル
《確認ダイアログの表示》
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>確認ダイアログの表示</title>
<script>
function check(){
var result = confirm('確認用のメッセージを表示します');
if(result){
console.log('OK');
}else{
console.log('キャンセル');
}
}
</script>
</head>
<body>
<buttononclick="check();">クリック</button>
</body>
</html>
《実行結果》
- openメソッドでブラウザの新規ウィンドウ（新規タブ）を開き、closeメソッドで閉じます
open（ 'URL', 'ウィンドウ名', 'オプション1=値, オプション2=値, …' ）;
※第2引数以降は省略可能
《openメソッドのオプション一覧》
| オプション | 値 | 説明 |
|---|
| width |
ピクセル値 |
ウィンドウの幅
|
|---|
| height |
ピクセル値 |
ウィンドウの高さ |
|---|
| top |
ピクセル値 |
デスクトップ画面の上端からウィンドウまでの距離
|
|---|
| left |
ピクセル値 |
デスクトップ画面の左端からウィンドウまでの距離 |
|---|
- closeメソッドで閉じることができるのは、openメソッドによって開かれたウィンドウ（タブ）のみです
- Documentオブジェクトにも、closeメソッドが存在するため、「window.」は省略せずに必ず記述します
《メインウィンドウ》
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>メインウィンドウ</title>
</head>
<body>
<buttononClick="open('sub.html', null, 'width=300,height=300');">開く</button>
</body>
</html>
《サブウィンドウ》
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>サブウィンドウ</title>
</head>
<body>
<buttononclick="window.close();">閉じる</button>
</body>
</html>
setIntervalメソッドとclearIntervalメソッド
- setIntervalメソッドは、一定の間隔ごとに処理を呼び出す、タイマー機能を開始します
- 一定間隔で表示画像を切り替えるなどの用途で使われます
- タイマーを停止するには、clearIntervalメソッドを使います
setInterval ( 関数名または関数式, 時間感覚 );
- 時間間隔はミリ秒（1/1000秒）単位で指定します
- タイマーが開始されると、指定された処理が一定間隔で実行され続けます
- このメソッドの戻り値は、タイマーに割り当てられたIDです
- IDは、タイマーを停止する際に必要となります
- タイマーを指定するには、clearIntervalメソッドを使います
- このメソッドは、指定されたIDのタイマーを停止します
clearInterval ( タイマーID );
《タイマー機能の利用》
<htmllang="ja">
<head>
<metacharset="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オブジェクトはすべてのブラウザオブジェクトの親にあたるオブジェクトで、ダイアログボックスの表示やタイマー処理を行うことができる
