[JS初心者]#3 ウィンドウオブジェクト編 JavaScriptを学ぶ

# [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をぞくぞく追加させる処理

```HTML
<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に変更する処理

```HTML
<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オブジェクトはグローバル領域なので、省略して書くことが可能

```HTML
<script>
window.onload = function() {
  window.alert('hoge');
  alert('fuga');                                                                                                              
}
</script>
```

window.をつけてもつけなくても挙動は一緒です。

## これまでのページ

- [[JS初心者]#1 イベント編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/d58922441764718a5446)
- [[JS初心者]#2 DOM編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/aec423775da01070e8c9)
- [[JS初心者]#3 ウィンドウオブジェクト編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/5f0f86a9db5c771e6340)
- [[JS初心者]#4 セレクタAPI編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/a26a69f97852e87c0e44)
- [[JS初心者]#5 テスト＆デバッグ編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/838e1b50c6afe5bdc9b3)