javaScriptの処理の流れとwindowsオブジェクトの中身

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 の教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく