Computer Science
Grade 8
20 min
Introduction to HTML
Introduction to HTML
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the role of JavaScript in making a static HTML page dynamic.
Add JavaScript to an HTML file using the <script> tag.
Select an HTML element using its ID with document.getElementById().
Change the content of an HTML element using the .innerHTML property.
Create a simple function that runs when a user clicks a button.
Use the alert() function to display a pop-up message to the user.
Ever wondered how a website knows when you click a button or how a game on a webpage works? 🤔 That's the magic of JavaScript!
So far, you've learned how to structure a webpage with HTML. In this chapter, we'll add 'brains' to our pages using JavaScript, a programming language that lets us create interactive experiences, respond to user act...
2
Key Concepts & Vocabulary
TermDefinitionExample
JavaScript (JS)A programming language that allows you to implement complex features on web pages. It makes web pages interactive and dynamic.When you click a 'like' button and the count goes up without the page reloading, that's JavaScript at work.
<script> TagAn HTML tag used to embed or reference JavaScript code. It tells the browser, 'The code inside here is JavaScript!'<script> alert('Hello, World!'); </script>
Document Object Model (DOM)A programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content. Think of it as a tree-like map of your HTML elements.JavaScript uses the DOM to find an H1 tag with a specific ID and then change its text....
3
Core Syntax & Patterns
Selecting an Element by ID
document.getElementById('elementID')
This is the most common way to grab a specific HTML element in your JavaScript code. You must give the element a unique 'id' attribute in your HTML for this to work.
Changing Element Content
element.innerHTML = 'New content here!';
Once you have selected an element, you can use the .innerHTML property to replace its current content with new text or even new HTML tags.
Creating a Basic Function
function functionName() { // code to run goes here }
Use this syntax to group your code into a named, reusable block. This is essential for running code in response to an event, like a button click.
Handling a Click Event
<button onclick="functionName()">Click Me&...
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 is building the 'Simple Greeting App'. When they click the button, the paragraph shows 'Hello, !' with no name. What is the logical error in their JavaScript? `HTML: <input id="nameBox"><button onclick="greet()">Greet</button><p id="output"></p>` `JS: function greet() { let name = document.getElementById('nameBox').innerHTML; document.getElementById('output').innerHTML = 'Hello, ' + name + '!'; }`
A.The `let` keyword should be `var`.
B.The `+` symbol cannot be used to join strings with variables.
C.The function is getting the name from the input box using `.innerHTML` instead of the correct property, `.value`.
D.The function name `greet()` is not descriptive enough.
Challenging
You have `<p id="count">0</p>` and a button. You want each button click to increase the number in the paragraph by 1. Which function correctly implements this logic?
A.function increment() { document.getElementById('count').innerHTML++; }
B.function increment() { let current = document.getElementById('count').innerHTML; document.getElementById('count').innerHTML = current + 1; }
C.function increment() { let currentNum = parseInt(document.getElementById('count').innerHTML); document.getElementById('count').innerHTML = currentNum + 1; }
D.function increment() { let currentNum = 0; document.getElementById('count').innerHTML = currentNum + 1; }
Challenging
A page has a heading `<h1 id="title">Menu</h1>` and two buttons, 'Breakfast' and 'Lunch'. The goal is to change the heading to 'Breakfast Menu' or 'Lunch Menu' respectively, using a single, reusable function. Which is the most efficient design?
A.HTML: `<button onclick="changeTitle('Breakfast Menu')">Breakfast</button><button onclick="changeTitle('Lunch Menu')">Lunch</button>` JS: `function changeTitle(newText) { document.getElementById('title').innerHTML = newText; }`
B.HTML: `<button onclick="showBreakfast()">Breakfast</button><button onclick="showLunch()">Lunch</button>` JS: `function showBreakfast(){...}; function showLunch(){...}`
C.HTML: `<button onclick="document.getElementById('title').innerHTML = 'Breakfast Menu';">Breakfast</button><button onclick="document.getElementById('title').innerHTML = 'Lunch Menu';">Lunch</button>`
D.HTML: `<button id="b1">Breakfast</button><button id="b2">Lunch</button>` JS: A single function with a complex if-else statement to check which button was clicked.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free