Appearance
C3 · JavaScript & Interactivity
Spec reference: Learning Aim C - Develop a Website to Meet Client Requirements Key idea: JavaScript adds interactivity and dynamic behaviour to web pages.
JavaScript Tutorial for Beginners (freeCodeCamp)
Linking JavaScript to HTML
html
<!-- Best practice: at the END of <body> so HTML loads first -->
<script src="js/script.js"></script>
<!-- Or with defer - loads file without blocking page render -->
<script src="js/script.js" defer></script>Basic JavaScript syntax
javascript
// Variables
let message = "Welcome to Sweet Delights!";
const MAX_ITEMS = 10;
// Function
function greetUser(name) {
alert("Hello, " + name + "!");
}
// Calling the function
greetUser("Alice");
// Arrow function (modern syntax)
const doublePrice = (price) => price * 2;DOM manipulation
The DOM (Document Object Model) is JavaScript's representation of the HTML page. You can use JS to find, change, add or remove HTML elements.
javascript
// Get an element by ID
const heading = document.getElementById("main-title");
// Get elements by class
const cards = document.querySelectorAll(".product-card");
// Change text content
heading.textContent = "New Title";
// Change CSS style
heading.style.color = "#6B3F2A";
// Add/remove a CSS class
document.getElementById("menu").classList.add("open");
document.getElementById("menu").classList.remove("open");
document.getElementById("menu").classList.toggle("open");
// Change an attribute
document.getElementById("banner").src = "images/new-banner.jpg";Event handling
Events are things that happen on the page - clicks, key presses, form submissions:
javascript
// Click event
document.getElementById("order-btn").addEventListener("click", function() {
alert("Your order has been placed!");
});
// Form submission
document.getElementById("contact-form").addEventListener("submit", function(event) {
event.preventDefault(); // Stop the page reloading
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
if (name === "" || email === "") {
alert("Please fill in all fields.");
} else {
alert("Thank you, " + name + "! We'll be in touch.");
}
});
// Mouse hover
document.getElementById("logo").addEventListener("mouseover", function() {
this.style.opacity = "0.8";
});Form validation with JavaScript
Client-side validation gives users instant feedback before the form is submitted:
javascript
function validateForm() {
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let message = document.getElementById("message").value.trim();
let valid = true;
// Clear previous errors
document.getElementById("name-error").textContent = "";
document.getElementById("email-error").textContent = "";
// Validate name
if (name.length < 2) {
document.getElementById("name-error").textContent = "Please enter your full name.";
valid = false;
}
// Validate email
if (!email.includes("@") || !email.includes(".")) {
document.getElementById("email-error").textContent = "Please enter a valid email address.";
valid = false;
}
return valid;
}Practical examples for Unit 15
Mobile hamburger menu
javascript
const menuBtn = document.getElementById("menu-btn");
const navLinks = document.getElementById("nav-links");
menuBtn.addEventListener("click", function() {
navLinks.classList.toggle("open");
});Image gallery lightbox
javascript
const images = document.querySelectorAll(".gallery-img");
images.forEach(function(img) {
img.addEventListener("click", function() {
document.getElementById("lightbox-img").src = this.src;
document.getElementById("lightbox").style.display = "flex";
});
});
document.getElementById("lightbox").addEventListener("click", function() {
this.style.display = "none";
});Back to top button
javascript
window.addEventListener("scroll", function() {
const btn = document.getElementById("back-to-top");
if (window.scrollY > 300) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
});
document.getElementById("back-to-top").addEventListener("click", function() {
window.scrollTo({ top: 0, behavior: "smooth" });
});Summary
| Term | Meaning |
|---|---|
| JavaScript | Client-side programming language that adds interactivity to web pages |
| DOM | Document Object Model - JavaScript's representation of the HTML page |
| Event | Something that happens on a page (click, keypress, scroll, form submit) |
| Event listener | Code that waits for a specific event and runs when it occurs |
| Client-side validation | Checking form inputs in the browser before submission |
defer | Attribute that loads a JS file without blocking page rendering |
Test Yourself
Question 1 of 5
What is the DOM?