読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

ブラウザオブジェクト

ブラウザオブジェクトとは

  • ブラウザオブジェクトは、ブラウザに組み込まれているオブジェクトです
  • ブラウザ上の情報は、すべてオブジェクトとして扱うことができます
  • これらのオブジェクトを総称して「ブラウザオブジェクト」と呼びます




《主なブラウザオブジェクト一覧》

種類 説明
Window すべてのブラウザオブジェクトの親となるオブジェクト
Location WebページのURLを情報として持つオブジェクト
History

Webページの閲覧履歴を情報として持つオブジェクト

Document

Webページ上の部品の情報を持つオブジェクト


ブラウザオブジェクトも多くのメソッドやプロパティを持っています。
ブラウザオブジェクトのメソッドやプロパティを利用する場合も、先頭にオブジェクト名を指定しますが、その際オブジェクト名の頭文字は小文字にします。

  • Locationオブジェクトのhrefプロパティを利用する場合


window.location.href

ただし、「window.」は省略することが一般的なので以下のように記述していきます。


location.href


  • ブラウザオブジェクトのメソッドやプロパティを呼び出すとき、オブジェクト名の頭文字は小文字にする
  • 先頭の「window.」は省略できる


ブラウザのウィンドウ全体の情報

  • Windowオブジェクトは、すべてのブラウザオブジェクトの親となるオブジェクトで、ブラウザのウィンドウ全体の情報を保持します


《Windowオブジェクトの主なメソッド一覧》

メソッド名 概要
alert 警告用のダイアログボックスを表示する
confirm 確認用のダイアログボックスを表示する
open

サブウィンドウを開く

close サブウィンドウを閉じる
setInterval タイマーを設定する
clearInterval

タイマーを解除する

confirmメソッド

  • ダイアログボックスを表示します
  • confirmメソッドは「OK」と「キャンセル」の2つのボタンを表示し、どちらのボタンがクリックされたかを示す論理値を戻り値として返します



confirm( '表示するメッセージ' );
※戻り値:true…OK false…キャンセル


《確認ダイアログの表示》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>確認ダイアログの表示</title>
<script>
  function check() {
    var result = confirm( '確認用のメッセージを表示します' );
    if (result) {
      console.log( 'OK' );
    } else {
      console.log( 'キャンセル' );
    }
  }
</script>
</head>
<body>
<button onclick="check();">クリック</button>
</body>
</html>

《実行結果》

  • OKボタンを押した場合