📖 Upload as Material in Google Classroom:
- Slides (make a copy for your program - upload the copy)
- Coding Exercise(s)
📝 Upload as Assignment in Google Classroom (5 points):
- Exit Ticket (DO NOT MAKE A COPY - upload as link)
🗣️ Do Now + Share Out (5) :
- Have a volunteer from the class share their 'Do Now' with the class.
- Showcase their code and get feedback from other students.
🔘 Events (10) :
- Definition: Event handlers are JavaScript functions that respond to user activities, making web pages interactive.
- Analogy: Compare an event to a doorbell ringing when someone's at the door.
- Discuss the common events: click, key press, mouse over, form submission
- Engage students in identifying various events on web pages.
- Discuss: clicking, double-clicking, typing, hovering
- Teach students that .addEventListener is a preferred way to add event listeners since it keeps JS separate from HTML.
- Showcase the "Hello, World!" example. Discuss the structure of the code and how it interacts with the DOM.
- Introduce the concept of the Document Object Model (DOM) - the bridge between HTML and JS. Use the provided image source for reference.
- Discuss the practice of storing and accessing HTML elements in JS using another image for reference.
💻 Code Along (5) :
- Use the provided events.html and events.js files.
- Instruct students to code alongside you as you walk them through the task.
💻 Code It Solo (15) :
- Guide students to use the events.html and events.js files again.
- Instruct them to complete tasks independently.
- If they finish early, give them the additional JS Events challenge to solve.
👋 Exit Ticket & Closing (5) :
- Direct students to the "Lesson 3.3 - Events" Exit Ticket in Google Classroom.
- Ensure they submit the exit ticket.
- Close with a brief summary of the day's lesson and what they can expect next time.
- n/a