LogoMark.png

JavaScript/BOM

BOM|Browser Object Model

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

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

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.href = 'http://www.example.com';


location.reload( 真偽値 )

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

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




Navigator

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

Screen

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

History

ブラウザの「戻る」「進む」

Historyオブジェクトを使うと、ブラウザの 戻る・進む の操作が可能です。

履歴操作

履歴を編集することもできます。

編集した履歴に対して 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 はプログラムのデバッグには欠かせないメソッドです。

コンソールの表示

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 );


その他のメソッド

サンプルコード

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




PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-06-17 (木) 09:38:26