Chapter 2: Chapter 2. Building the page at runtime

Introduction

The introduction places JavaScript in the browser-based lifecycle of a client-side web application and identifies the basic roles of HTML, JavaScript, events, the DOM, and the event loop.

• Browser application building blocks: Explain that the browser executes JavaScript in a client-side web application, HTML is processed to build the page, JavaScript makes it dynamic, and events let it respond to user actions.
  Why it matters: These basic roles provide a way to place JavaScript within what happens to a web page.
• DOM and event loop meanings: Distinguish the DOM as a structured representation of a web page from the event loop as what determines how an application handles events.
  Why it matters: The two terms name different parts of the browser application picture.

Key terms: client-side web applications, browser, HTML code, JavaScript code, events, DOM, event loop

2.1 The lifecycle overview

Outlines the client-side web application lifecycle and introduces an example that displays messages while the page loads and when users interact with it.

• Client-side application lifecycle: Trace a client-side web application from the browser’s request and the server’s response through page building, event handling, and the user leaving the page.
  Why it matters: This sequence provides the framework for understanding when a page is built and when it responds to users.
• Loading and interaction messages: Describe how the example displays an initial loading message and adds messages when the user moves the mouse or clicks the page.
  Why it matters: The example makes the difference between an initial page message and later responses to user actions visible.

Key terms: client-side web application, page building, event handling, event handlers, addMessage, getElementById, mousemove event handler, click event handler

2.1 Do you know?

This section poses self-check questions about how browsers build pages and process events, without explaining the answers.

2.2 The page-building phase

Explains how the browser builds a page’s UI from a server response by alternating between HTML parsing and JavaScript execution.

• Page-building steps and triggers: Describe why the browser builds the page before it can be displayed or used, and explain when it parses HTML to build the DOM versus executes JavaScript. State that it can switch between these steps repeatedly.
  Why it matters: This gives you the basic sequence for understanding how a browser turns a response into a usable page.

Key terms: page-building phase, Document Object Model (DOM), script element

2.2.1 Parsing the HTML and building the DOM

The section explains how the browser builds a DOM from HTML, organizes its nodes, corrects invalid markup, and pauses construction when it reaches a script element.

• HTML Parsing and DOM Construction: Explain that the browser builds the page’s initial UI by parsing HTML one element at a time and representing each element as a node in the DOM.
  Why it matters: This connects the HTML you write to the page structure the browser builds.
• DOM Node Family Relationships: Describe parent, child, and sibling relationships among DOM nodes, including the root html node’s exception to the parent rule.
  Why it matters: These relationships let you describe where elements sit in the page structure.
• HTML Blueprint and DOM Corrections: Distinguish HTML from the DOM and explain how the browser can correct invalid HTML, such as a paragraph placed in the head, while building the DOM.
  Why it matters: The resulting DOM may not match the HTML source exactly when the browser repairs an error.
• Script Encounter During Construction: Explain what happens to DOM construction when the browser encounters a script element while building the page.
  Why it matters: It explains why JavaScript can begin running before the browser has finished building the DOM.

Key terms: page-building phase, HTML, DOM, node, root html node, parent, children, siblings, blueprint, head element

2.2.2 Executing JavaScript code

This section explains how scripts run during page building, use browser-provided objects to change the DOM, and interact with HTML that has or has not yet been parsed.

• Window and document access: Explain how JavaScript running in the browser reaches and changes the page through the window and document objects.
  Why it matters: These browser-provided objects are how the script in the example reaches the page.
• Global and function code: Distinguish global code from function code by where each appears and what causes it to execute.
  Why it matters: This distinction explains why defining a function and running its contents are different events.
• Script execution during parsing: Trace how the browser alternates between building the DOM from HTML and executing a script during the page-building phase.
  Why it matters: The pause-and-resume sequence determines the state of the DOM when a script runs.
• DOM availability at script time: Explain why a script can modify an existing DOM element but cannot select an element the browser has not yet created.
  Why it matters: The location of a script affects which HTML elements it can work with immediately.
• Shared state across scripts: Explain why a global variable created by one script element is normally available to a later script element.
  Why it matters: Finishing one script does not normally erase the global variables a later script may use.

Key terms: window object, document, DOM, browser APIs, global code, function code, addMessage, page-building phase, script node, DOM construction

2.3 Event handling

This section explains how browser events are registered, queued, and handled one at a time to make client-side applications interactive.

2.3.1 Event-handling overview

This section explains how the browser queues events and handles them one at a time, why slow handlers make pages unresponsive, and why event-driven code runs asynchronously.

• Single-threaded event queue: Trace how the browser handles events: events enter a shared queue in detection order, and the browser takes an event from the head and runs its handler, if one exists, while other events wait. Distinguish the mechanism that adds events to the queue from the thread handling them.
  Why it matters: The queue explains how events can arrive while JavaScript is already handling another event.
• Slow handler responsiveness: Explain why an event handler that takes a long time to run can make a web application unresponsive.
  Why it matters: Keeping handlers brief helps the page respond to events that are waiting.
• Asynchronous event-driven code: Explain why event-handler invocation is asynchronous and describe the place of events in running page code. Give examples of event sources named in the section.
  Why it matters: Event-driven code cannot assume its handlers will be invoked at a predetermined time or in a predetermined order.

Key terms: single-threaded execution model, event queue, event-handler function, event handlers, unresponsive web applications, asynchronous, events, global code

2.3.2 Registering event handlers

This section explains how to register event handlers and why addEventListener is preferable to assigning them to special properties.

• Purpose and methods of registration: Explain that event-handler registration tells the browser which function to run when a particular event occurs, and name the two methods shown: assigning a function to a special property or using addEventListener.
  Why it matters: Registration connects an event, such as a load or click, to the function you want the browser to run.
• Property assignment versus event listeners: Distinguish the one-handler limit of assigning a function to a special event property from addEventListener, which can register multiple handlers; describe how the example specifies an event type and handler function.
  Why it matters: This distinction helps you avoid accidentally replacing a handler when more than one is needed.

Key terms: event handler, event-handler registration, special properties, addEventListener, event-handler function, mousemove, click

2.3.3 Handling events

This section traces how the event loop handles queued mouse events one at a time and how their handlers change the DOM.

• Sequential event handler execution: Trace how the browser queues mousemove and click events, then runs their associated handlers in order without overlapping their execution.
  Why it matters: It explains why a later event waits even if it occurs while another handler is running.
• Handler changes to the DOM: Describe how the two handlers in the example add list items to the same DOM element in sequence.
  Why it matters: The DOM changes make the handlers’ execution order visible in the example.

Key terms: event queue, event loop, event handler, single-threaded execution model, DOM, mousemove handler, click handler, addMessage

2.4 Summary

2.5 Exercises