基本知識
現在主流ブラウザはIE6~11,Chrome,Safari,FireFoxとなる。
JavaScriptとBOM関係
簡単に言うと、JavaScriptはブラウザで動き、ブラウザを操作するための言語である。そのブラウザの構成はBOMです。
JavaScriptとBOMはコミュニケーションしてるからこそ、今私たちが見てるブラウザになってる。
BOMとは
JavaScript Browser Object Model (BOM)
それを理解するために以下を先に説明します。
ブラウザの機能構成（オブジェクト構成）
ブラウザはwindow、location、Navigator、Screen、History、Documentで構成されてる。
windowがlocation、Navigator、Screen、History、Documentの親
- windowオブジェクト
JavaScriptではすべてのグローバル変数は、Windowオブジェクトのプロパティとなります。（HTML DOM ）のdocument オブジェクトもWindowオブジェクトのプロパティとなります。
var a = 0;
と
window.a = 0;
同じとなる。
または
window.document.getElementById("header");
と
document.getElementById("header");
も同じ
window
window.innerHeight
window.innerWidth
window.open() → 新しいウィンド開く
window.close() → 今のウィンドを閉じる
window.moveTo() → 今のウィンドを移動する
window.resizeTo() → ウィンドを調整する
- Navigatorオブジェクト
navigator
navigator.appName
navigator.appCodeName
navigator.platform
navigator.cookieEnabled → (trueかfalseが戻る)
navigator.product → ブラウザエンジンの商品名
navigator.appVersion
navigator.userAgent
navigator.platform
navigator.language
※注意
Navigatorオブジェクトはブラウザ所有者に修正される可能があるので、プログラミングにはこのオブジェクトを使ってブラウザバージョン情報を取得するのはお勧めしません。
- Screenオブジェクト
screen
screen.width
screen.height
screen.availWidth → 使用可能な広さ
screen.availHeight → 使用可能な高さ
screen.colorDepth
screen.pixelDepth
-
locationオブジェクト
location
window.location.href → 今現在のURL
window.location.hostname
window.location.pathname → 今現在HTMLのパス
window.location.protocol → プロトコル(httpかhttps)
window.location.assign → リロードする
- documentオブジェクト
今現在htmlページ情報が含まれる
いわゆるHTML DOMツリー要素です。例えば<body>情報、<table>情報などなど
悪意のあるjsだとcookie情報も盗まれる。
document
document.title
'My little baby'
document.getElementById('name')
null
document.cookie
''
- historyオブジェクト
こんなものです。戻る ブラウザの閲覧記録となる。
history
history.back
history.forward
その他
- ダイヤログ
window.alert(1)
window.confirm("はい");
window.prompt("入力してください","password"); → 何かを入力しないと進めません。キャンセルするとNULLが戻る
以上です。
全体こんな感じでコンソールでやってます。
参考記事