JavaScript/BOM をテンプレートにして作成

開始行:
*BOM｜Browser Object Model https://www.w3schools.com/js/js_window.asp ~ [[Browser Object Model（BOM）>GoogleImage:Browser Object ... -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 = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; ~ ~ **Console ブラウザには開発ツールとして表示されるコンソールウインド... ~ ***コンソールの表示 -Firefoxの場合 --メニュー＞ツール＞Web開発＞開発ツールを表示＞と進んで --コンソール　＞　JS　と ロギング に チェックをつけて下さ... --ショートカット： [command]+[option]+[i]（Windowsは [F12... -Chromeの場合 --メニュー＞表示＞開発/管理＞JavaScriptコンソール --ショートカット： [command]+[option]+[i]（Windowsは [F12... -試しに（コンソールへの文字列の出力） 以下のスクリプトを書いたHTMLをブラウザで開くと、コンソー... <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>' } ~ ~

終了行:
*BOM｜Browser Object Model https://www.w3schools.com/js/js_window.asp ~ [[Browser Object Model（BOM）>GoogleImage:Browser Object ... -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 = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; ~ ~ **Console ブラウザには開発ツールとして表示されるコンソールウインド... ~ ***コンソールの表示 -Firefoxの場合 --メニュー＞ツール＞Web開発＞開発ツールを表示＞と進んで --コンソール　＞　JS　と ロギング に チェックをつけて下さ... --ショートカット： [command]+[option]+[i]（Windowsは [F12... -Chromeの場合 --メニュー＞表示＞開発/管理＞JavaScriptコンソール --ショートカット： [command]+[option]+[i]（Windowsは [F12... -試しに（コンソールへの文字列の出力） 以下のスクリプトを書いたHTMLをブラウザで開くと、コンソー... <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>' } ~ ~

ページ名: