javaScriptの処理の流れ
1
Windowsオブジェクト=グローバルオブジェクトが生成される
2
WindowsオブジェクトのプロパティとしてDocumentオブジェクトが生成される
→DOMツリーを構築しようとする
→Documentオブジェクトのプロパティとして、readyStateがあり、初めはloading
3
Documentオブジェクトに要素オブジェクトやテキストノードが追加
4
scriptがあれば、解析し始める
これは、同期実行され、構文解析している間は、html文書の構文解析は一時停止
5
html文書の内容がすべて読み込まれ、DOMツリーが完成すると、document.readyStateのプロパティの値がinteractiveになる
6
documentオブジェクトに対して、webブラウザが、DOMツリーの完成をつげるDOMContentLoadedイベントを発生させる
7
imgなどの外部リソースがあれば、読み込む
8
すべて読み込むとdocument.readyStateのプロパティの値がcompleteになる
→webブラウザは、windowオブジェクトに対して、loadイベントを発生させる
9
イベントを受け付けて、イベントが発生するとイベントハンドラが非同期的に呼び出される
適当に時間を指定して、見てみる
console.log(document.readyState)
setTimeout(() => { console.log(document.readyState) }, 10)
setTimeout(() => { console.log(document.readyState) }, 1000)
確かに。。。
Windowオブジェクトの主なプロパティ
location
locationオブジェクトの主なプロパティやメソッドは以下の通り
例えば
window.location.reload()
を使うと、ページを再読み込みしてくれる
history
historyオブジェクトは、windowsの閲覧履歴を表すwindow.history.back()
window.history.forward()
で履歴を進んだり戻ったりできる
navigator
navigatorオブジェクトは、webブラウザなどのアプリケーションの情報を表すwindow.navigator.language
はwebブラウザのUI言語を表す
window.navigator.platform
プラットフォームなんかも参照できるらしい(windows,macとか)
screen
screenオブジェクトは、モニタのサイズや、色数などの情報を表すwindow.navigator.availWidth
これで、画面の利用可能な幅を参照できる
大き目のモニターを使うと、大きくなる
document
documentオブジェクトは、windows内に表示されるwebページを表す このオブジェクトからDOMツリーにアクセスしたりするwindow.document.getElementById('id')
こういうのは、素のjsだととてもよくみるのではないだろうか
出典
徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく