Skip to content

Latest commit

 

History

History
73 lines (59 loc) · 2.86 KB

unit-1-lesson-6.md

File metadata and controls

73 lines (59 loc) · 2.86 KB
Raw

Lesson 1.6: DOM Manipulation, Part 1 & Project Work Time


Lesson Materials

📖 Link Materials to Class Agenda:


Key Points

  • 👋 Welcome & Do Now (10):

  • ↔️ JavaScript & HTML DOM (5):

    • Check-In Questions:
      • What is JavaScript used for again?
      • How is it different from HTML and CSS?
    • Discussion Points:
      • Understanding how a webpage loads and creates a Document Object Model (DOM) of the page.
      • Recognizing the DOM as the blueprint of a webpage, constructed as a tree of objects.

  • 📦 Storing HTML Elements (10):

    • Accessing HTML Elements:
      • The document object represents the entire webpage.
      • Explain how to access the document object and then the specific HTML element.
    • Code Explanation:
      • Use the document.querySelector() method.
      • Discuss the three different ways to select HTML elements:
        1. By the HTML element/tag name.
        2. By a period followed by their class.
        3. By a hashtag followed by their id.

  • ✨ DOM Manipulation (15):

    • Using JS to change HTML:
      • Define a JS property and how to retrieve or assign its value by accessing the DOM.
      • Introduction to the innerHTML property.
    • Manipulating the DOM with Events:
      • Explain why it's beneficial to attach an event.
      • Highlight the steps for DOM Manipulation:
        1. Variables: store HTML elements.
        2. Event: what needs to happen to cause the change.
        3. Action: what will happen when the event is triggered.
    • Event Types:
      • List various event types, such as "click", "mouseover", "mouseout", etc.
      • Introduce the .addEventListener() method.

  • 🌃 Updating Images (5):

    • Discuss the src attribute of the <img> tag and how it can be updated in JavaScript using the src property.

  • **Code Solo (15):

    • Allow students to apply what they've learned by coding on their own.

  • ⏳ Break (10)

  • 💻 Project Work Time (40):

    • Project Tasks:
      • Review what was completed in the last work session.
      • Add contact information to the Contact page.
      • Format image sizes.
      • Apply additional styling.
    • Git Integration:
      • Ensure code is saved on Replit.
      • Introduce the Git option from the Tools Menu on Replit.
      • Discuss writing a concise commit message and staging and committing all changes.
      • Instruct on how to push commits and verify on GitHub.

  • 👋 Closing (10):

    • Direct students to the "Lesson 1.6 - DOM Manipulation, Part 1" Exit Ticket in the Class Agenda and ensure they complete it.
    • Double check and ensure all students have submitted their exit ticket.