A Script on the Page in JavaScript

A web page can run JavaScript. The shop's index.html loads your file with <script src="app.js"></script>, the last thing in the <body>. The browser builds the page from top to bottom and runs the script when it reaches its tag. Everything above the tag already exists by then.

The page the browser built is the DOM: a tree of element objects that your script reaches through document. document.querySelector takes a CSS selector and gives back the first element that matches. The element's textContent is the text inside it. You can read it, and you can assign it:

const subtitle = document.querySelector("h2");
console.log("Before:", subtitle.textContent);
subtitle.textContent = "Fresh today";

This logs Before: Our products (console.log puts a space between its values), and the visitor sees Fresh today instead. The file index.html doesn't change: only the page in the browser does.

When the check opens the page, it must print:

> open the page
  console.log: app.js is running
  console.log: Found: Corner Shop
  screen:
    header
      heading 1: Corner Shop: open today
    main
      heading 2: Our products
      …

Your task: in app.js, log "app.js is running", find the page's h1 and log "Found:" with its text, then change its text to "Corner Shop: open today".

Assignment
Follow the Coding Tutorial to write your first script: a log line, a querySelector for the heading, and a new heading text.

Hint
Log the heading's text before you change it, so the log shows the old text, Corner Shop.