From a Web Page to a Data Flow

Continue from Course 03

In Course 03, you built browser behavior, handled state and communicated over HTTP. This course slows down the central mechanism so you can explain it before adding more code.

You do not need to understand the complete application immediately. Work in this order for every lesson:

1. Read the situation in plain language.
2. Predict what should happen.
3. Read the small code example.
4. Trace one value with your finger or on paper.
5. Continue only when you can explain the result in your own words.

If an example is unclear, return to the last working step. Adding more code will not make an unclear step easier.

Knowing JavaScript syntax is necessary, but syntax alone does not explain how an application works. A small frontend application combines five responsibilities:

data + state + logic + rendering + user interactions

In simple words:

We will grow one resource library throughout the course. A resource has a title, topic, duration and availability. The first version contains only one value:

const title = 'Understanding HTTP';

const titleElement = document.querySelector('#resource-title');
titleElement.textContent = title;

Trace before running

1. JavaScript creates the value Understanding HTTP.
2. querySelector obtains a reference to an existing DOM element.
3. textContent places the value inside that element.
4. The browser paints the updated interface.

JavaScript value
      |
      v
DOM update
      |
      v
Visible interface

The value and the DOM element are related, but they are not the same thing. Changing title later does not automatically update the DOM. Plain JavaScript needs an explicit update.

Predict before you execute

let title = 'Understanding HTTP';
titleElement.textContent = title;

title = 'Working with State';

What remains visible? Understanding HTTP remains visible because the assignment changes the variable, not the DOM. A second DOM update would be required.

The complete model we will build

Data source
    |
    v
Application state
    |
    v
Processing
    |
    v
render()
    |
    v
DOM and interface
    ^
    |
User event

Do not memorize the drawing as decoration. At every lesson, point to the step that the new code owns.

Common mistake

Students often say, "the HTML contains my data." The DOM contains the current presentation. The application may also hold data that is not currently visible, such as unavailable resources or a complete list before filtering.

Check your understanding

For the first example, identify the data, the DOM reference and the operation that connects them. Then change only the variable and explain why the screen does not change.

Do not continue until you can finish this sentence: "The variable changed, but the page did not change because..."

What to remember

An interface is the visible result of data processing. In plain JavaScript, a data change and a DOM update are separate operations that your application must connect deliberately.