Chapter 2. Building the page at runtime

 

This chapter covers

  • Steps in the lifecycle of a web application
  • Processing HTML code to produce a web page
  • Order of executing JavaScript code
  • Achieving interactivity with events
  • The event loop

Our exploration of JavaScript is performed in the context of client-side web applications and the browser as the engine that executes JavaScript code. In order to have a strong base from which to continue exploring JavaScript as a language and the browser as a platform, first we have to understand the complete web application lifecycle, and especially how our JavaScript code fits into this lifecycle.

In this chapter, we’ll thoroughly explore the lifecycle of client-side web applications from the moment the page is requested, through various interactions performed by the user, all the way until the page is closed down. First we’ll explore how the page is built by processing the HTML code. Then we’ll focus on the execution of JavaScript code, which adds much-needed dynamicity to our pages. And finally we’ll look into how events are handled in order to develop interactive applications that respond to users’ actions.

During this process, we’ll explore some fundamental web application concepts such as the DOM (a structured representation of a web page) and the event loop (determines how events are handled by applications). Let’s dive in!

Do you know?

Q1:

Does the browser always build the page exactly according to the given HTML?

Q2:

2.1. The lifecycle overview

2.2. The page-building phase

2.3. Event handling

2.4. Summary

2.5. Exercises

sitemap