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>'
 }

~
~