📖 Link Materials to Class Agenda:
- Slides (make a copy for your program - link the copy)
- Coding Exercise(s)
- Exit Ticket
-
👋 Welcome (5)
-
🔄 Create & Append (20):
-
Introduce
createElement()
:- A method that creates an HTML element.
- E.g.,
let para = document.createElement("p");
-
Introduce
appendChild()
:- This method appends an element as the last child.
- After creating an element, it's often modified before appending it to the DOM.
- E.g.,
document.body.appendChild(para);
-
Discuss saving created elements:
- Elements are often saved in variables, similar to HTML selectors.
- Modifications, such as changing the innerHTML, are often made before appending.
- E.g.,
para.innerHTML = "This is a paragraph";
-
Show examples of creating multiple elements:
- The importance of getting the syntax correct.
- Provide examples with correct and incorrect syntax and prompt students to identify which is correct.
-
Elaborate on the order of appending:
- The order in which elements are appended matters, especially when nesting elements.
- It's best to start with the innermost element.
- E.g.,
div2.appendChild(para); //para is nested within div2 body.appendChild(div1); //div1 is appended to the body
-
Highlight the use case:
- Useful for nesting elements.
- Variables allow for easy updates.
-
💻 JavaScript Lab (40):
- Allow students to complete tasks independently.
- Offer resources as support and breakdown/walk through content when necessary.
-
⏳ Break (10)
-
💻 Project Work Time (35)
- Have students open their planning doc and project.
- Ask them to:
- Complete any pending tasks from the last work session.
- Add their contact information, including GitHub, email, LinkedIn, and resume.
- Use CSS to format the sizes of all pictures in their project.
- Encourage additional CSS styling to make their projects stand out.
- 👋 Closing (10)
- Recap the day’s lesson.
- Encourage questions and provide clarification if needed.