• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• JavaScript/BOM へ行く。
  • 1 (2019-07-05 (金) 20:51:15)
  • 2 (2021-05-20 (木) 16:36:01)

---

BOM｜Browser Object Model

https://www.w3schools.com/js/js_window.asp

Browser Object Model（BOM）は、ブラウザを操作するインターフェイスを提供します。ブラウザオブジェクトには主に以下のようなものがあります。

• Window：ブラウザのウィンドウ全体
• Document：DOM（Document Object Model）
• Location ：URL情報
• Navigator：ブラウザの種類やバージョン等
• History：閲覧履歴
• Screen：モニターの情報
• Console：コンソールへの出力
• Storage：Webストレージ
  
  
  
  

Window

最上位のオブジェクトで、グローバルに参照できるため、省略して記述することができます。よく用いるものを紹介します。

window.alert( message )

メッセージとOKボタンのみの警告ダイアログを表示します。

window.alert('Hello World!');
alert('Hello World!');　← 一般にこちらの省略表記がよく用いられる

window.confirm( message )

OK と Cancel ボタンを持つ確認ダイアログを表示します。
戻り値は、OK：true、Cancel：false となります。

confirm('同意しますか？');

window.prompt( message, placeholder )

文字入力欄と OK,Cancel ボタンを持つダイアログを表示します。
戻り値は、OK：入力文字列、Cancel：null となります。

prompt('氏名を入力して下さい', 'NAME');

window.innerWidth / window.innerHeight

ブラウザ表示領域の幅と高さの情報を提供します。

var w =  window.innerWidth;

window.onload

window の load イベントに対応するイベントハンドラです。

window.onload = function() {
  doSomething(); // DOM 構築後に実行したい関数の呼び出し
};

Location

Location オブジェクトの主なプロパティー

• location.href：URL
• location.protocol：プロトコル
• location.host：ホストドメイン
  
  

location.href

URLを代入するとそのページへ遷移します。

location.href = 'http://www.example.com';

location.reload( 真偽値 )

Webページをリロードします。

location.reload(true);  ← true 指定は、キャッシュを破棄したリロード

Navigator

Navigator オブジェクトの主なプロパティー

• appName：ブラウザ名
• appVersion：ブラウザのプラットフォームとバージョン番号
• cookieEnabeld：ブラウザのクッキーが有効か否か
• platform：ユーザーのOS
• userAgent：ブラウザのユーザーエージェント情報
• language：ブラウザの言語情報
  
  
  
  

Screen

Screenオブジェクトの主なプロパティー

• screen.left：メインスクリーンの左端からの水平距離
• screen.top：メインスクリーンの上端からの垂直距離
• screen.width：スクリーンの水平解像度（画素数）
• screen.height：スクリーンの垂直解像度（画素数）
• screen.colorDepth：色深度（一般に24bit）
  
  
  
  

History

Historyオブジェクトの主なメソッド

• history.back( )：ブラウザの「戻る」ボタンと同じ挙動
• history.forward( )：ブラウザの「進む」ボタンと同じ挙動
• history.go( )：任意の履歴移動を実現します。
  例） history.go( -1 ); ← 「戻る」と同じ意味になります。
  
  
  
  

Console

ブラウザには開発ツールとして表示されるコンソールウインドウがあり、consoleオブジェクト を用いて様々な情報を出力することができます。consoleオブジェクトには、assert、count、debug、dir、dirxml、error、group、groupCollapsed、groupEnd、info、log、markTimeline、profile、profileEnd、time、timeEnd、timeStamp、trace、warnと、全部で20個ほどのメソッドがありますが、特に console.log はプログラムのデバッグには欠かせないメソッドです。

コンソールの表示

• Firefoxの場合
  • メニュー＞ツール＞Web開発＞開発ツールを表示＞と進んで
  • コンソール　＞　JS　と ロギング に チェックをつけて下さい。
  • ショートカット： [command]+[option]+[i]（Windowsは [F12] ）

• Chromeの場合
  • メニュー＞表示＞開発/管理＞JavaScriptコンソール
  • ショートカット： [command]+[option]+[i]（Windowsは [F12] ）

• 試しに（コンソールへの文字列の出力）
  以下のスクリプトを書いたHTMLをブラウザで開くと、コンソールにHello World! と表示されるはずです。

  <script>
     console.log("Hello World!");
  </script>

  
  

console.log( )

コンソールに情報を出力します。処理中の変数の状態が確認できます。

var object = {name: "apple", color:"red", type: "fruit"};
console.log(object);
{name: "apple", color: "red", type: "fruit"}

以下のように、フォーマットを使った出力も可能です。

console.log( "DATA：" + "%s" + " %d", myString, myNumber );

その他のメソッド

• console.dir( ) ：オブジェクトが持つプロパティの一覧をリストで出力
• console.count( )：実行する度にカウントアップして回数を出力する
• console.clear( )：コンソール画面をクリアにする
  
  
  
  

サンプルコード

ブラウザオブジェクトのプロパティーを列挙するサンプルです。

• HTML（部分） 情報を書き込むための要素のみ定義しています

  <section>
      <article id="windowInfo"></article>
      <article id="locationInfo"></article>
      <article id="navigatorInfo"></article>
      <article id="screenInfo"></article>
  </section>

• JS

  window.onload = function(){
  
     document.getElementById('windowInfo').innerHTML =
         ' <strong>Window Info</strong><br> '
        +' InnerWidth : ' + window.innerWidth + '<br>'
        +' InnerHeight : ' + window.innerHeight + '<br>'
  
     document.getElementById('locationInfo').innerHTML =
         ' <strong>Location Info</strong><br> '
        +' URL : ' + location.href + '<br>'
        +' Protocol : ' + location.protocol + '<br>'
        +' Host : ' + location.host + '<br>'
  
     document.getElementById('navigatorInfo').innerHTML =
         ' <strong>Navigator Info</strong><br> '
        +' AppricationName : ' + navigator.appName + '<br>'
        +' UserAgent : ' + navigator.userAgent + '<br>'
  
     document.getElementById('screenInfo').innerHTML =
         ' <strong>Screen Info</strong><br> '
        +' ScreenWidth : ' + screen.width + '<br>'
        +' ScreenHeight : ' + screen.height + '<br>'
        +' ColorlDepth : ' + screen.colorDepth + '<br>'
  }