https://www.w3schools.com/js/js_window.asp
Browser Object Model(BOM)は、ブラウザを操作するインターフェイスを提供します。ブラウザオブジェクトには主に以下のようなものがあります。
最上位のオブジェクトで、グローバルに参照できるため、省略して記述することができます。よく用いるものを紹介します。
メッセージとOKボタンのみの警告ダイアログを表示します。
window.alert('Hello World!'); alert('Hello World!'); ← 一般にこちらの省略表記がよく用いられる
OK と Cancel ボタンを持つ確認ダイアログを表示します。
戻り値は、OK:true、Cancel:false となります。
confirm('同意しますか?');
文字入力欄と OK,Cancel ボタンを持つダイアログを表示します。
戻り値は、OK:入力文字列、Cancel:null となります。
prompt('氏名を入力して下さい', 'NAME');
ブラウザ表示領域の幅と高さの情報を提供します。
var w = window.innerWidth;
window の load イベントに対応するイベントハンドラです。
window.onload = function() { doSomething(); // DOM 構築後に実行したい関数の呼び出し };
URLを代入するとそのページへ遷移します。
location.href = 'http://www.example.com';
Webページをリロードします。
location.reload(true); ← true 指定は、キャッシュを破棄したリロード
ブラウザには開発ツールとして表示されるコンソールウインドウがあり、consoleオブジェクト を用いて様々な情報を出力することができます。consoleオブジェクトには、assert、count、debug、dir、dirxml、error、group、groupCollapsed、groupEnd、info、log、markTimeline、profile、profileEnd、time、timeEnd、timeStamp、trace、warnと、全部で20個ほどのメソッドがありますが、特に console.log はプログラムのデバッグには欠かせないメソッドです。
<script> console.log("Hello World!"); </script>
コンソールに情報を出力します。処理中の変数の状態が確認できます。
var object = {name: "apple", color:"red", type: "fruit"}; console.log(object); {name: "apple", color: "red", type: "fruit"}
以下のように、フォーマットを使った出力も可能です。
console.log( "DATA:" + "%s" + " %d", myString, myNumber );
ブラウザオブジェクトのプロパティーを列挙するサンプルです。
<section> <article id="windowInfo"></article> <article id="locationInfo"></article> <article id="navigatorInfo"></article> <article id="screenInfo"></article> </section>
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>' }