HTML & the DOM

Warm-up from memory

Explain why a successful JSON.parse does not prove imported data is a valid plan. Write a function that totals minutes from two records. Today we give those calculations a visible interface.

A browser combines HTML for structure, CSS for presentation, and JavaScript for behavior. HTML tags such as <p> describe elements; an id names a particular element. The DOM is the browser’s object representation of that page.

Enough HTML to read the lab

You do not need an earlier HTML course. Read this small piece first:

<h1>Study time</h1>
<p id="message">Waiting for JavaScript…</p>

<h1> starts a main heading and </h1> ends it. The text between the tags is its content.
<p> and </p> enclose a paragraph.
id="message" is an attribute, extra information inside the opening tag. An id identifies one element on this page.
<script> and </script> enclose JavaScript in the full file. HTML outside those tags is not JavaScript.

The <!doctype html> line tells the browser this is an HTML document. The outer html tags contain the page; lang="en" identifies English. The meta charset line declares the text encoding, and title names the browser tab. You can keep that setup while editing the heading, paragraph, and script. Later labs also include a style section for CSS; you do not need to edit its appearance rules to finish the JavaScript tasks.

Find an element and update its text

document is a browser-provided object representing the webpage. You do not declare it yourself in a webpage script.

document.querySelector("#message") finds the element with id message. The # is selector syntax for an ID. It returns null if nothing matches. Assigning to the element’s textContent changes its displayed text. Treat user input as text, not HTML: textContent displays characters literally instead of interpreting markup.

Our normal console editors run in a Worker and have no document. Use the Webpage lab later on this page for DOM code. Its script is placed after the elements so they exist before the script searches for them. The preview is isolated from the course page; it cannot edit the surrounding site.

Predict before running

First keep the message-building function independent of HTML. What text will it return?

Predict, then run JavaScript

function greeting(name) {
  return `Welcome, ${name}!`;
}

console.log(greeting("Ada"));

Check your prediction

Welcome, Ada!

Trace each statement in order. If your prediction differed, describe the first place your mental model and the result diverged before trying again.

Separate content, appearance, and behavior

HTML describes elements, CSS controls appearance, and JavaScript handles behavior. A selector finds an existing element; it does not create one. A missing selector returns null, so inspect your HTML spelling before calling a method on it. The first browser lab below contains HTML and JavaScript in one downloadable file; later labs also include CSS. Read its HTML first, find the matching selector, then follow the assignment that changes the page.

Separate content, appearance, and behavior JavaScript

const topic = "<strong>Loops</strong>";

console.log(`You chose ${topic}`);

Check your prediction

You chose <strong>Loops</strong>

In the browser use textContent for learner-entered text. It displays angle brackets as text. Assigning untrusted text to innerHTML instead asks the browser to interpret markup.

Your turn

Exercise

HTML & the DOM: practise

Write summaryText(minutes) that returns Planned: 45 minutes when given 45. Test the result before using it in a webpage.

Your working space JavaScript

// Write summaryText and print summaryText(45).

Hint 1: the idea

This task returns a string, not a DOM element.

Hint 2: a first step

Use a template literal containing the minutes parameter.

Show one solution

function summaryText(minutes) {
  return `Planned: ${minutes} minutes`;
}

console.log(summaryText(45));

Planned: 45 minutes

A pure text-building function can run in either editor. In the webpage lab below, replace the greeting with a summary built by this function.

What you should be able to explain

Which part of the lab is HTML, CSS, and JavaScript?
What does a missing selector return?
Why use textContent for a learner’s topic?

Try the webpage

Webpage

Press Run webpage to preview. Each run starts fresh. Edits are not saved automatically.

Press Run webpage, then change "Ada" in the script to your name and run the page again. Next change the heading’s text in the HTML. Notice which edit changes the greeting and which changes the heading.

To use your summaryText function, define it inside the script, then replace message.textContent = greeting("Ada"); with message.textContent = summaryText(45);. Keep the paragraph’s id and the selector matched: both must say message. A missing element gives null, so trying to set its textContent fails. The console-output editor above cannot run this DOM code; use the webpage lab.

Run webpage rebuilds the preview from your edited source. It does not save your changes automatically. Use Download HTML to keep a copy, or Reset code to recover the starting example.