ウィンドウ #
ウィンドウオブジェクトとは、ブラウザ上の各ウィンドウを示すオブジェクトである。このオブジェクトには様々なプロパティ、メソッドなどを含んでいる。
主なプロパティ #
ウィンドウオブジェクトの主なプロパティは以下の通り。
| プロパティ名 | 意味 |
|---|---|
| closed | ウィンドウが閉じられている場合true |
| innerHeight | ウィンドウの内側の高さ |
| innerWidth | ウィンドウの内側の幅 |
| length | ウィンドウのframeの数 |
| name | ウィンドウの名前 |
| outerHeight | ウィンドウの外側の高さ |
| outerWidth | ウィンドウの外側の幅 |
| pageXOffset | スクロールで表示されている画面の横位置 |
| pageYOffset | スクロールで表示されている画面の縦位置 |
| self | ウィンドウオブジェクト自身 |
例えばウィンドウの縦横の長さを表示するプログラムを作ってみる。
javascript
window.onload = function() {
var h = document.getElementById('height');
h.innerText = window.innerHeight + 'px';
var l = document.getElementById('length');
l.innerText = window.innerWidth + 'px';
};
window.onresize = function() {
var h = document.getElementById('height');
h.innerText = window.innerHeight + 'px';
var l = document.getElementById('length');
l.innerText = window.innerWidth + 'px';
};
html
<div>ウィンドウの高さ</div>
<div id="height">x px</div>
<br>
<div>ウィンドウの幅</div>
<div id="length">x px</div>
表示例
ウィンドウの高さ
x px
ウィンドウの幅
x px
上記は、ウィンドウの大きさを変えると値が変化する。
主なメソッド #
ウィンドウオブジェクトの主なメソッドは以下の通り。
| メソッド | 意味 |
|---|---|
| alert() | 引数に指定したメッセージを警告ダイアログに出力 |
| blur() | ウィンドウからフォーカスを外す |
| close() | ウィンドウを閉じる |
| confirm() | パラメータに指定されたメッセージを確認ダイアログに出力 |
| createPopup() | ポップアップウィンドウを作成 |
| focus() | ウィンドウをフォーカスする |
| moveBy() | 現在位置からウィンドウを移動（相対指定） |
| moveTo() | ウィンドウを移動する（絶対指定） |
| open() | ウィンドウを作成 |
| resizeBy() | 現在のウィンドウサイズを変更（相対指定） |
| resizeTo() | 現在のウィンドウサイズを変更（絶対指定） |
| scrollBy() | ウィンドウをスクロール（相対指定） |
| scrollTo() | ウィンドウをスクロール（絶対指定） |
| setInterval() | 指定した処理を定期的に実行 |
| setTimeout() | 指定した処理を指定時間後に一度実行する |
タイマー処理 #
先述のメソッドのうち、**setInterval(), setTimeout()**は指定時間後に実行するメソッドである。
以下に、その一例を示す。
javascript
window.onload = function() {
var t = document.getElementById('time');
var interval = window.setInterval(
function() {
var nowDate = new Date();
t.innerHTML = nowDate.toLocaleTimeString();
}
,1000
);
};
html
<p>現在時刻</p>
<p id="time">XX:XX:XX</p>
表示例
現在時刻
XX:XX:XX
上記は１秒毎に現在時刻を取得して更新するプログラムになる。１秒毎に現在時刻を取得する仕組みをタイマー処理(setInterval)で表現している。