LogoMark.png

JavaScript/BOM の変更点

#author("2021-06-17T09:38:26+09:00;2021-06-17T09:33:57+09:00","default:inoue.ko","inoue.ko")
*BOM｜Browser Object Model
https://www.w3schools.com/js/js_window.asp
~

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

-Window：ブラウザのウィンドウ全体
-Document：[[DOM（Document Object Model）>JavaScript/DOM]]
-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（部分）&small(情報を書き込むための要素のみ定義しています);
 <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>'
 }

~
~