JavaScript
Lesson details
Learning outcome
I can use JavaScript to add interactivity to a web page.
Key learning points
- JavaScript can be used to change HTML content and styles dynamically to make web pages interactive.
- The Document Object Model (DOM) allows JavaScript to access and modify web page elements.
- Event listeners detect user actions (such as clicks and key presses) and trigger JavaScript functions.
- Functions in JavaScript allow us to write reusable code that updates and responds to user interactions.
Keywords
JavaScript - a programming language used to add interactivity to web pages
DOM (Document Object Model) - a representation of a web page that JavaScript can use to access and change HTML elements
Event listener - a function that waits for a user action (such as a click) and then triggers a response
Common misconception
JavaScript changes the original HTML file.
JavaScript only changes what the user sees in the browser. It does not change the actual HTML file saved on your computer or server.
Teacher tip
Pupils will have encoutered many uses of HTML in the world around them. Tailor the activities in the slides to best reflect the experiences pupils in your school will have had when using HTML-based technology.
Equipment
Pupils will need access to a device with HTML editing software. Examples in this lesson use the RPF Code Editor https://oak.link/html-editor
Licence
Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.What is a wireframe?
Q2.What does the CSS box model explain?
Q3.What is the purpose of a house style?
Q4.What is the purpose of placing divisions inside other divisions?
Q5.What is the main advantage of using a house style?
Q6.Match the tasks to their purposes:
Assessment exit quiz
6 Questions
Q1.What is JavaScript used for in web pages?
Q2.What does DOM stand for in web development?
Q3.What does the following line of code do?
1<script src="scripts.js"></script>Code colour
Q4.What does JavaScript change when it modifies a web page?
Q5.What function in JavaScript waits for a user action, such as a click, and then triggers a response?
Q6.What does the following code do?
1let name = document.getElementById("username").value;Code colour
To help you plan your 11 computer science lesson on: JavaScript, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 11 computer science lesson on: JavaScript, download all teaching resources for free and adapt to suit your pupils' needs.
The starter quiz will activate and check your pupils' prior knowledge, with versions available both with and without answers in PDF format.
We use learning cycles to break down learning into key concepts or ideas linked to the learning outcome. Each learning cycle features explanations with checks for understanding and practice tasks with feedback. All of this is found in our slide decks, ready for you to download and edit. The practice tasks are also available as printable worksheets and some lessons have additional materials with extra material you might need for teaching the lesson.
The assessment exit quiz will test your pupils' understanding of the key learning points.
Our video is a tool for planning, showing how other teachers might teach the lesson, offering helpful tips, modelled explanations and inspiration for your own delivery in the classroom. Plus, you can set it as homework or revision for pupils and keep their learning on track by sharing an online pupil version of this lesson.
Explore more key stage 4 computer science lessons from the HTML programming project unit, dive into the full secondary computer science curriculum, or learn more about lesson planning.