Computer Science
Grade 8
20 min
Interactive Web Pages
Interactive Web Pages
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define the role of JavaScript in making a web page interactive.
Select specific HTML elements using `document.getElementById()`.
Modify the content of an HTML element using the `.innerHTML` property.
Change the CSS styling of an HTML element using the `.style` property.
Create a JavaScript function that runs in response to a user event, such as a button click.
Use variables to store and update information displayed on a web page.
Explain the relationship between HTML (structure), CSS (style), and JavaScript (behavior).
Ever wonder how a website knows when you click a 'like' button or how an online game keeps score? 🤔 Let's learn the magic behind it!
In this lesson, you'll learn how to use the JavaScript programming language to brin...
2
Key Concepts & Vocabulary
TermDefinitionExample
DOM (Document Object Model)A tree-like structure that represents your HTML document. JavaScript uses the DOM to find, change, add, or delete HTML elements and their content.Think of your HTML page as a family tree. The `<body>` is a parent, and the `<h1>` and `<p>` tags inside it are its children. JavaScript can navigate this tree to find any element.
EventAn action that happens in the browser that JavaScript can respond to. Events are often triggered by the user.When you click a button, that's a 'click' event. When you move your mouse over an image, that's a 'mouseover' event.
Event ListenerA piece of JavaScript code that 'listens' for a specific event on a specific HTML element and runs a function when that...
3
Core Syntax & Patterns
The 'Get and Store' Pattern
let variableName = document.getElementById("elementID");
To work with an HTML element, you must first select it from the DOM using its unique ID and store it in a variable. This makes it easy to refer to the element multiple times in your code.
The 'Event-Function' Pattern
elementVariable.onclick = function() { /* code to run goes here */ };
This is the basic structure for making something happen when a user clicks an element. You assign a function (the code to run) to the `onclick` property of the element you selected.
The 'Dot Notation' for Properties
elementVariable.property = "newValue";
After selecting an element and storing it in a variable, use a dot (`.`) to access its properties li...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A student wants to make a button that toggles a paragraph's visibility. The paragraph has `id="secret"`. Which logic inside the button's `onclick` function would correctly hide the paragraph if it's visible, and show it if it's hidden?
A.let p = document.getElementById("secret"); p.style.display = "none";
B.let p = document.getElementById("secret"); if (p.style.display == "block") { p.style.display = "none"; }
C.let p = document.getElementById("secret"); if (p.style.display == "none") { p.style.display = "block"; } else { p.style.display = "none"; }
D.let p = document.getElementById("secret"); p.style.visibility = "toggle";
Challenging
A page has a score display with `id="score"` initially showing 0. It has two buttons: `id="plus"` and `id="reset"`. The `plus` button adds 1 to the score. The `reset` button sets the score back to 0. If a user clicks: plus, plus, plus, reset, plus. What is the final score displayed?
A.0
B.1
C.2
D.4
Challenging
A developer writes this JavaScript code: `document.getElementById("header").innerHTML = pageTitle; let pageTitle = "My Awesome Page";` The header text does not update. What is the fundamental logical error?
A.The variable `pageTitle` must be declared using `const` instead of `let`.
B.The script is trying to use the variable `pageTitle` before it has been declared and assigned a value.
C.The `.innerHTML` property cannot accept a variable as its value.
D.The `document.getElementById("header")` part needs to be stored in its own variable first.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free