JavaScript enough to follow a few lines in a page

02The page tree is not the server

A selector is text describing the element to find. querySelector returns the first matching element, or null, meaning no matching element, if it finds none. The dot in document.querySelector accesses a named operation on the document object. The parentheses contain its argument.

An event is something the browser reports, such as a click when a button is activated. addEventListener registers a handler, a function to call when that event reaches its target. In the activity, the function between braces runs after the click rather than while the handler is being registered. Its assignment updates the paragraph’s textContent.

A server is a program that responds to requests; it may store account records and decide permissions. These sample files send no request. Their DOM text is local display state. Writing a role word into that display cannot, by itself, grant server-side rights.

Opening an HTML download later uses a file URL, an address referring to a local file. It does not turn the document into an HTTP exchange. Keep the required activity on source and trace; do not paste unknown code into a browser console or start a server for this lesson.

03Predict the status line after the button click

The activity download begins with a waiting paragraph and a button named Mark ready. Unlike the worked immediate assignment, its change waits for a click on the button. Compare the handler target with the element whose text it changes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Desk status</title>
</head>
<body>
  <p id="status">waiting</p>
  <button id="mark" type="button">Mark ready</button>
  <script>
    document.querySelector("#mark").addEventListener("click", function () {
      document.querySelector("#status").textContent = "ready";
    });
  </script>
</body>
</html>

YanoSec / Code
Predicted DOM trace for dom-demo.html. You can finish this card without opening the page or running the script. A file URL refers to the saved local document; reading it does not create an HTTP exchange.

Before a click:
element p, id status, text waiting
element button, id mark, text Mark ready

Click event on #mark runs the function in the script.
querySelector("#status") selects the paragraph whose id is status.
textContent replaces that paragraph's text with ready.

After the click, in this prediction:
status text: ready
No request leaves the browser.
No server account or permission changes.

1. Find the paragraph and button in dom-demo.html. Record paragraph id status with text waiting, and button id mark with text Mark ready.
2. Find addEventListener on #mark. The quoted event name is click. The function in braces is the handler that would run when that button is activated.
3. Follow the handler to #status and its textContent assignment. Predict ready as the paragraph text after the click. Compare with the before-and-after trace.
4. Look for any request or account update in the complete script. None is present. Stop after the source trace; opening the local HTML file later is optional and still does not create a server account.

04Optional challenge

For about ten extra minutes, describe the two roles of the identifiers without changing any source. The button id mark receives the click listener; the paragraph id status receives the text update. Explain why those can be different elements.

05Fresh cases for the checks

Use these fictional cases for the checks below. They have different inputs from the worked examples. Read them here or make notes; no installation or external service is needed.

<p id="message">idle</p>
<p id="role">member</p>
<button id="stamp">Mark</button>
<script>
document.querySelector("#stamp").addEventListener("click", () => {
  document.querySelector("#message").textContent = "queued";
});
</script>
Events: page loads; stamp is clicked once. This snippet describes no network request.

An independent page changes a displayed role from member to editor using textContent. The server’s stored account role remains member; editing entries requires the server to authorize an editor. No request has yet been sent.

06Explain your prediction

Optional written self-check: Describe the event target, changed element, before/after text and whether any request is shown. Keep a local DOM change separate from server-side roles and authorization.