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 ); ← 「戻る」と同じ意味になります。
履歴操作
履歴を編集することもできます。
- history.pushState(stateオブジェクト, タイトル, url) :履歴を追加する
- history.replaceState(stateオブジェクト, タイトル, url):履歴を修正する
編集した履歴に対して history.back / history.forward を行うとwindow.onpopstateイベントが発生します。履歴の変化を監視するには、window.onpopstateイベントハンドラーを使用します。以下、事例です。
window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); };
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>' }