Computer Science - ICT Grade 8 Web Development JavaScript Basics

Grade 8 Computer Science (ICT) Study Guide: Web Development – JavaScript Basics

1. The Driving Question

"You’ve seen websites that react when you click, hover, or type—like a button that changes color, a form that checks your password, or a game that tracks your score. How do those websites ‘think’ and respond to you in real time? And why can’t plain HTML and CSS do that on their own?"

2. The Core Idea – Built, Not Listed

Imagine you’re at a pizza restaurant where the menu isn’t just a static list—it’s a smart menu. When you select "pepperoni," the price updates instantly. If you try to order a pizza at 3 AM, a little alert pops up: "Sorry, we’re closed!" The menu doesn’t just show information; it reacts to your choices.

That’s what JavaScript does for websites. HTML is the skeleton (the structure of the menu), CSS is the paint and decorations (making it look nice), but JavaScript is the waiter—listening for your order, making decisions, and updating the page without reloading. It’s a programming language that runs inside your browser, turning static pages into interactive experiences.

Here’s how it works in code: - You select an element (like a button) using its id or class.
- You listen for an event (like a click or keypress).
- You run a function (a set of instructions) when that event happens.
- The function changes the page—updating text, hiding/showing elements, or even fetching new data.

Key Vocabulary:
1. Variable
- Definition: A container that stores a value (like a label on a box).
- Example: let pizzaToppings = ["pepperoni", "mushrooms"]; (a list of toppings you might order).
- Note: In JavaScript, variables can change (let) or stay constant (const). In college, you’ll learn how this differs in languages like Python or C++.

1. Function
2. Definition: A reusable block of code that performs a specific task (like a recipe).
3. Example: function calculateTotal(price, tax) { return price + (price * tax); } (figures out your pizza bill).

4. Note: In advanced CS, functions become "first-class citizens"—they can be passed as arguments, returned from other functions, or even stored in variables.

5. Event Listener

6. Definition: A command that waits for a specific action (like a click) and then runs code.
7. Example: document.getElementById("orderButton").addEventListener("click", placeOrder); (calls placeOrder() when the button is clicked).

8. Note: In frameworks like React, event listeners are often handled differently (e.g., onClick props).

9. DOM (Document Object Model)

10. Definition: A tree-like structure that represents the HTML elements on a page, which JavaScript can modify.
11. Example: document.querySelector(".menu-item").textContent = "Out of stock"; (changes the text of a menu item).
12. Note: In college, you’ll learn how the DOM is just one type of "object model"—others include the BOM (Browser Object Model) or XML DOM.

3. Assessment Translation

How This Appears on Assessments:
- Classroom Formative (Exit Tickets/Quizzes):
- Format: Short coding tasks (e.g., "Write a function that changes the text of a <p> element when a button is clicked") or multiple-choice questions about syntax.
- Proficient Response: Code runs without errors, uses correct syntax (e.g., addEventListener), and achieves the goal (e.g., text updates on click).
- Developing Response: Code has syntax errors (e.g., missing parentheses), or the logic is incomplete (e.g., the function runs but doesn’t update the DOM).

• State Standardized Tests (e.g., CSTA or ISTE-aligned):
• Format: Multiple-choice (e.g., "Which line of code adds a click event to a button?") or drag-and-drop (e.g., "Arrange these lines to make a function that hides an element").

• Distractor Patterns:

  
  
  • Confusing getElementById with querySelector.
  • Forgetting to pass the event type (e.g., "click") to addEventListener.
  • Mixing up textContent and innerHTML (the latter can execute code, which is a security risk).

• Project-Based Assessments:

• Task: Build a simple interactive webpage (e.g., a to-do list where items can be added/deleted).
• Proficient: Uses functions, event listeners, and DOM manipulation correctly; code is commented and organized.
• Developing: Hardcodes values (e.g., document.getElementById("item1").textContent = "Buy milk"; instead of using variables), or logic is repetitive.

Model Proficient Response (Short Coding Task):
Prompt: "Write a function that changes the background color of a <div> with the id box to red when a button is clicked."

// Select the button and the box
let button = document.getElementById("colorButton");
let box = document.getElementById("box");

// Add a click event listener to the button
button.addEventListener("click", function() {
  // Change the box's background color
  box.style.backgroundColor = "red";
});

Why This Works: - Correctly selects elements using getElementById.
- Uses addEventListener with the event type "click".
- Modifies the DOM (style.backgroundColor) inside the function.

4. Mistake Taxonomy

Mistake 1: Forgetting to Select the Element
Prompt: "Write code to change the text of a <p> with the id message to 'Hello!' when a button is clicked."

Common Wrong Response:

document.addEventListener("click", function() {
  textContent = "Hello!";
});

Why It Loses Credit: - Doesn’t select the <p> element (missing getElementById or querySelector).
- textContent is used like a global variable, not a property of the element.
- The event listener is on the document, not the button.

Correct Approach:

let button = document.getElementById("myButton");
let message = document.getElementById("message");

button.addEventListener("click", function() {
  message.textContent = "Hello!";
});

Mistake 2: Syntax Errors in Function Definitions
Prompt: "Write a function called doubleNumber that takes a number as input and returns its double."

Common Wrong Response:

function doubleNumber(num) {
  num * 2;
}

Why It Loses Credit: - Missing return statement (the function doesn’t output anything).
- The calculation is correct, but the result isn’t sent back to the caller.

Correct Approach:

function doubleNumber(num) {
  return num * 2;
}

Mistake 3: Confusing textContent and innerHTML
Prompt: "Write code to update a <div> with the id output to show the user’s name, which is stored in a variable userName."

Common Wrong Response:

let userName = "Alex";
document.getElementById("output").innerHTML = userName;

Why It Loses Credit (Sometimes): - While this works, using innerHTML is a security risk if userName comes from user input (it can execute malicious code). textContent is safer.
- On assessments, this might lose points if the rubric specifies "use the most secure method."

Correct Approach:

let userName = "Alex";
document.getElementById("output").textContent = userName;

5. Connection Layer

1. Within Computer Science:
   [JavaScript functions] → [Algorithms] — A function is like a mini-algorithm: it takes input, processes it, and returns output. Understanding functions in JavaScript makes it easier to grasp algorithms (like sorting or searching) later.

2. Across Subjects:
   [Event listeners] → [Newton’s Third Law (Physics)] — An event listener is like Newton’s law: "For every action (click), there is an equal and opposite reaction (code runs)." Both describe cause-and-effect systems where one thing triggers another.

3. Outside School:
   [DOM manipulation] → [Video Game Modding] — Games like Minecraft or Roblox let players modify the game world using scripts. DOM manipulation is the same idea: you’re "modding" the webpage by changing its elements in real time.

6. The Stretch Question

"What happens if you try to select an element that doesn’t exist on the page (e.g., document.getElementById("nonexistent"))? Why doesn’t JavaScript throw an error immediately, and how could you handle this case in your code?"

Pointer Toward the Answer: JavaScript doesn’t throw an error right away because it’s designed to be forgiving—it returns null instead. This is useful for checking if an element exists before trying to modify it. For example:

let element = document.getElementById("nonexistent");
if (element) {
  element.textContent = "Found!";
} else {
  console.log("Element not found.");
}

In college, you’ll learn about "defensive programming"—writing code that anticipates and handles errors gracefully. This is a simple example of that principle.