0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-04-17

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)

rapture_20220417181444.png

確かに。。。

Windowオブジェクトの主なプロパティ

location

locationオブジェクトの主なプロパティやメソッドは以下の通り
rapture_20220417201438.png
例えば

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

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?