Lesson Plan

• Describe the role of JavaScript in client‑side web interactivity.
• Explain how to include JavaScript using inline, internal, and external methods.
• Apply event‑driven programming to attach listeners and update the DOM.
• Demonstrate how to create a simple interactive component (e.g., quiz) using DOM methods.
• Evaluate performance considerations such as minimizing DOM access and debouncing events.

• Projector or interactive display
• Computer lab with internet access
• Code editor/IDE (e.g., VS Code)
• Sample HTML files and JavaScript starter code
• Printed handout of DOM methods table
• Browser developer tools guide

Begin with a quick demo of a button that changes colour when clicked, prompting students to guess how the effect is achieved. Recall that HTML provides structure while CSS styles appearance, and ask learners to identify what is missing for dynamic behaviour. Explain that today they will learn how JavaScript adds interactivity, and the success criteria are to write, test, and debug a simple event‑driven script.

1. Do‑now (5'): Students answer a short quiz on HTML/CSS basics on their tablets.
2. Mini‑lecture (10'): Explain why JavaScript is needed and the three inclusion methods, showing examples on the projector.
3. Guided coding (15'): Demonstrate selecting an element, adding an event listener, and updating the DOM; students follow along in their IDE.
4. Pair activity (15'): Students build a small interactive quiz component using provided starter code, testing in the browser.
5. Performance tip discussion (5'): Highlight DOM access costs and debounce concept; students identify potential bottlenecks in their code.
6. Check for understanding (5'): Quick exit ticket where each pair writes one best practice for event handling.

Summarise how JavaScript, event listeners, and DOM manipulation work together to create responsive pages. Ask a few volunteers to demonstrate their quiz and explain the code flow. Collect an exit ticket that states one performance tip they will apply at home. Assign homework to enhance the quiz with a scoring system and submit the files online.