[JS初心者]#3 ウィンドウオブジェクト編 JavaScriptを学ぶ
ウィンドウオブジェクトとは？
ブラウザで表示されるウィンドウのオブジェクトである。
多くのオブジェクト、プロパティ、メソッドを持っています。
- プロパティ一覧
| プロパティ名 | 意味 |
|---|---|
| closed | ウィンドウが閉じられていた場合はtrue |
| defaultStatus | デフォルトでウィンドウのステータスバーに表示される値 |
| document | documentオブジェクト |
| frames | frameオブジェクト（配列） |
| history | Historyオブジェクト |
| innerHeight | ウィンドウの内側の高さ |
| innerWidth | ウィンドウの内側の幅 |
| length | ウィンドウのframeの数 |
| location | Locationオブジェクト |
| name | ウィンドウの名前 |
| navigator | ウィンドウに対するNavigatorオブジェクト |
| opener | 親ウィンドウオブジェクト |
| outerHeight | ウィンドウの外側の高さ |
| outerWidth | ウィンドウの外側の幅 |
| pageXOffset | スクロールで表示されている横位置 |
| pageYOffset | スクロールで表示されている縦位置 |
| parent | 親ウィンドウのオブジェクト（フレーム使用時） |
| screen | Screenオブジェクト |
| screenLeft | スクリーン上のウィンドウの横位置 |
| screenTop | スクリーン上のウィンドウの縦位置 |
| screenX | スクリーン上のウィンドウのX座標 |
| screenY | スクリーン上のウィンドウY座標 |
| self | 自分自身のウィンドウオブジェクト |
| status | ウィンドウのステータスバーに表示される値 |
| top | トップ・ウィンドウのオブジェクト |
- メソッド一覧
| メソッド名 | 意味 |
|---|---|
| alert() | パラメータに指定されたメッセージを警告ダイアログに出力 |
| blur() | ウィンドウからフォーカスを外す |
| clearInterval() | setInterval()の解除 |
| cleartimeout() | setTimeout()の解除 |
| close() | ウィンドウを閉じる |
| confrim() | パラメータに指定されたメッセージを確認ダイアログに出力 |
| createPopup() | ポップアップウィンドウを生成 |
| focus() | ウィンドウをフォーカスする |
| moveBy() | 現在位置からウィンドウを移動 |
| moveTo() | ウィンドウを移動 |
| open() | ウィンドウを生成 |
| postMessage() | メッセージを送信 |
| print() | ウィンドウを印刷 |
| prompt() | パラメータに指定されたメッセージを入力ダイアログに出力 |
| resizeBy() | 現在のウィンドウサイズから変更 |
| resizeTo() | ウィンドウサイズを変更 |
| scroll() | ウィンドウをスクロール |
| scrollBy() | 現在のスクロール位置からスクロール |
| scrollTo() | ウィンドウをスクロール |
| setInterval() | 指定した処理を定期的に実行 |
| setTimeout() | 指定した処理を指定時間後に一度実行 |
タイマー処理をしてみる
- setInterval()
1秒ごとにhogeをぞくぞく追加させる処理
<div id='hoge'>
</div>
<script>
window.onload = function() {
var targetId = document.getElementById('hoge');
var interval = window.setInterval(
function() {
// 追加するdivタグを定義
var divElement = document.createElement('div');
divElement.innerHTML = "hoge";
// ターゲットにdivを追加
targetId.appendChild(divElement);
}, 1000 // 実行時間でms
);
}
</script>
- setTimeout()
1秒後にfugaをhogeに変更する処理
<div id='fuga'>
fuga
</div>
<script>
window.onload = function() {
// 実行時間でms
var interval = window.setTimeout('changeText()', 1000);
}
function changeText() {
var targetId = document.getElementById('fuga');
targetId.innerText = 'hoge';
}
</script>
その他
windowオブジェクトはグローバル領域なので、省略して書くことが可能
<script>
window.onload = function() {
window.alert('hoge');
alert('fuga');
}
</script>
window.をつけてもつけなくても挙動は一緒です。