Lesson 3.4: DOM Manipulation, Part 1

Lesson Materials

📖 Upload as Material in Google Classroom:

📝 Upload as Assignment in Google Classroom (5 points):

🗣️ Do Now + Share Out (5) :
- Gauge students' initial understanding and engage them in discussion.
💬 innerHTML (5) :
- Introduction to innerHTML:
  - Explain the use JavaScript to change HTML content.
  - A JS property is a characteristic or attribute that can be assigned a value.
- Accessing the DOM:
  - Discuss how to retrieve or assign a value to a property.
- Explain how innerHTML allows you to change the text/content of HTML elements.
- Discuss the importance of attaching events for making changes in real-time.
- Introduce various event types like "click", "mouseover", etc.
💻 Code Along (5) :
- Guide students through coding tasks related to the day's lesson.
🌃 Updating Images (5) :
- Discuss updating the src attribute of tags in JavaScript.
- Steps:
  - Choose an img tag selector.
  - Add the .src property.
  - Assign the desired image URL inside quotes.
💻 Code Solo (15) :
- Allow students to practice what they've learned independently.
👋 Exit Ticket & Closing (5) :
- Direct students to Google Classroom to complete the "Lesson 3.4 - DOM Manipulation, Part 1" Exit Ticket.
- Recap the day's lessons, answer any last-minute questions, and ensure all students have submitted their exit tickets.