[JS初心者]#2 DOM編 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をぞくぞく追加させる処理

<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.をつけてもつけなくても挙動は一緒です。

これまでのページ

[紹介元] HTMLタグが付けられた新着投稿 – Qiita [JS初心者]#2 DOM編 JavaScriptを学ぶ

  • コメント

    1. 匿名希望
      2017/07/25(火) 13:50:08

      AviUtlはUIが独特って言われてるけどウィンドウが分離されてるだけだし
      オブジェクト移動させない限り他の編集ソフトと同じ

    記事に戻る

関連記事