📖 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)
👋 Welcome & Do Now (5) :
- Introduce the topic of the day.
- Ask students to preview the topic and prepare to discuss the following:
- What's happening with the variables on lines 1 and 2?
- What occurred when the comments were removed?
- Check-In:
- Discuss the purpose of JavaScript.
- Contrast JavaScript from HTML and CSS.
- Briefly explain how a browser creates a Document Object Model (DOM) of a page.
- Discuss the objects in the model tree.
- Emphasize:
- The relationship between HTML Documents, DOM, and JavaScript.
- The power of JavaScript in accessing and modifying the DOM.
📦 Storing HTML Elements (5) :
- Discuss how the document object represents the entire webpage.
- Explain how we can access and make changes to specific HTML elements.
- Use the provided image source to give a visual representation of the DOM tree.
- Highlight the concept:
- Variables can store numbers, strings, and even HTML tags.
- By storing HTML tags in variables, we can manipulate the HTML and CSS using JavaScript.
- Elaborate on how to access the DOM and save HTML.
- Declaring a variable.
- Using document.querySelector() to specify selectors.
- Discuss the three ways to select HTML elements: By element/tag name, by class (with a period prefix), and by ID (with a hashtag prefix).
💻 Code Along (5) :
- Direct students to open the provided files: storingElements.html and storingElements.js.
- Code in real-time and encourage students to follow along.
- Discuss how selectors are used in CSS and how they are similarly used in JavaScript.
- Discuss class selectors and the importance of the period prefix.
- Note: Emphasize that querySelector() only selects the first instance of the specified element. If multiple elements are to be selected, consider giving each a unique class or using a loop.
💻 Code Solo(10) :
- Ask students to independently work on the storingElements.js file.
- Challenge advanced students with the additional challenge provided under "HTML DOM".
- As they code, remind them about the difference in selecting elements by tag name, class, and ID.
👋 Exit Ticket and Closing (5) :
- Direct students to the "Lesson 3.2 - DOM Intro & Storing HTML Exit Ticket" in Google Classroom.
- Ask students to complete and submit the exit ticket.
- Before they leave, remind them to double-check if they've submitted their exit ticket.
- n/a