JavaScript is a programming language that runs in the web browser and adds interaction and changing behavior to otherwise static HTML and CSS pages. section 10.4 section 1.3
Use JavaScript when a page must respond to actions, create or remove elements, load data, or update displayed content. An event handler is code that runs automatically when a specified event occurs, such as a click. section 10.4 section 13.5
Typical browser-page tasks include:
- Responding to thumbnail clicks by creating an overlay, loading the full-size image, and displaying a lightbox. section 10.4
- Fetching JSON data and populating a course catalog with filtering, sorting, and text search. section 13.5
- Running as frontend code in the browser rather than supplying data through backend server code. section 1.3
Interactive photo gallery
A gallery can attach a click event handler to each thumbnail. When a visitor clicks, JavaScript identifies the full-size image, creates an overlay and image element, and displays the lightbox. Small HTML and CSS changes are manageable, but generated JavaScript may be complex enough that careless edits break the feature. section 10.4 section 10.7.3
document.addEventListener('DOMContentLoaded',
function () { #1
const thumbnails = document.querySelectorAll(
'.thumbnail'); #2
thumbnails.forEach((thumbnail) => { #3
thumbnail.addEventListener('click',
function (e) { #4
const imageName = e.target.src.split('/')
.pop().replace('-thumbnail', ''); #5
const overlay = document.createElement('div'); #6
overlay.classList.add('overlay'); #7
const img = document.createElement('img'); #8
img.src = `images/${imageName}`; #9
overlay.appendChild(img); #10
document.body.appendChild(overlay); #11
overlay.addEventListener('click', function () { #12
document.body.removeChild(overlay); #12
}); #12
});
});
});
Inspect the annotated lightbox code to follow the sequence from page loading and thumbnail selection to overlay creation and image display. section 10.7.3
Prompt-generated course catalog
A detailed prompt can ask for separate HTML, CSS, and JavaScript files. The JavaScript fetches a JSON file, fills the page with course data, populates dropdowns, and responds to filtering, sorting, and search actions. section 13.5 section 13.6.3
