JavaScript changes a page while it is open
JavaScript is the programming language that runs inside a web page and changes it while it is open. It works through the DOM (Document Object Model). This is the page as the browser holds it, a tree of elements that a script can read and change.
With a few lines you can change text, add a class or hide a part of a page.
By the end of this lesson
Note
I can change a page with JavaScript.
Key words
| Word | What it means | Example |
|---|---|---|
| DOM | the page as a tree the browser holds in memory | |
| Selector | text that says which element to find | #count |
| Property | a named value on an element | textContent |
| Class | a label on an element that CSS can style | hidden |
| Function | a named block of code that you can run | |
| Listener | a function that runs when an event happens |
The cells students fill in are left blank in this preview.
The browser turns HTML into a tree
When a browser loads a page, it reads the HTML and builds a tree. Each element becomes a node. An element inside another is its child.
This tree is the DOM. JavaScript does not edit the HTML file. It edits the tree in memory, and the browser redraws the page to match.
A script finds an element, then changes it
First the script finds an element. document.getElementById("count") finds the one with that id. document.querySelector(".dish") finds the first element that matches a CSS selector. document.querySelectorAll(".dish") finds all of them.
Then it changes a property. textContent is the text inside the element.
Try it: change the text of an element
<p id="count">5 dishes shown</p>
<p class="dish">Tomato soup</p>Worked example: common DOM calls
| Call | What it does |
|---|---|
| getElementById("count") | Finds the element with that id |
| querySelector(".dish") | Finds the first match for a selector |
| querySelectorAll(".dish") | Finds every match, as a list |
| element.textContent = "Hi" | Replaces the text inside |
| element.classList.add("hidden") | Adds a class to the element |
| element.classList.toggle("dark") | Adds the class, or removes it if present |
The cells students fill in are left blank in this preview.
Read what the lab page script does
docker exec jupyter python3 steps/js.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The lab script: two functions, three listeners
The script lists the functions the lab page defines, filterDishes and toggleTheme. It then lists the events the page listens for: submit, input and click. Last, it lists four ids the script looks up: count, find-form, word and theme-button.
Each of those ids matches an element in index.html. If an id were wrong, the lookup would find nothing and the script would stop with an error.
A class changes the look without new CSS
Instead of changing each style by hand, a script can add or remove a class. The CSS already says what that class looks like.
A listener runs a function when an event happens. button.addEventListener("click", showMore) means: when this button is clicked, run showMore. The next lesson covers events in detail.
Try it: show and hide with a class
<button id="toggle" type="button">Show or hide</button>
<p id="note" class="hidden">The study room is free after 3.</p>A common mistake
Warning
Many people think JavaScript changes the HTML file. It does not. It changes the page in the browser's memory. Reload the page and the HTML file loads again, so every change the script made is gone.