# client-side JavaScript timeline

[browser](..) ⟩ [events]() ⟩ client-side JS timeline

{% hint style="info" %}
JavaScript programs begin in a <mark style="color:orange;">**script-execution phase**</mark> and then transition to an <mark style="color:orange;">**event-handling phase**</mark>.
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖解" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FEihyQVWDYHTb40mMigSN%2Ffile.drawing.svg?alt=media&#x26;token=a4783c2e-6178-4e67-9636-da1dcd7b2c34" alt="client-side JavaScript timeline" class="gitbook-drawing">
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JavaScript: The Definitive Guide (15.1 Web Programming Basics)
{% endtab %}

{% tab title="📘 手冊" %}
* Document ⟩ ["DOMContentLoaded" event](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)
{% endtab %}

{% tab title="👥 相關" %}
* create [table-of-contents](../dom/create-insert-delete-nodes/table-of-contents "mention") on [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).
* [use](../../component/use "mention") - do not query web components too early.
* [hide](../../component/use/hide "mention")
* [state-change](type/state-change "mention") events.
{% endtab %}
{% endtabs %}
