Lesson 14 (DOM & Events)

Lesson 14: DOM and Events

In the prep work for this lesson, the students learned:

1. JavaScript in the browser and in Node.js are two different environments.
2. DOM objects and methods are used to alter an HTML web page.
3. That JavaScript is an event driven language.
4. To handle events in JavaScript using the addEventListener function.
5. What it means to trigger an event.

Large Group Time (Instructor Notes)

Announcements

1. Check with your class Candidate Engagement Manager for any announcements.

For Part-Time Students:

For Full-Time Students:

• Welcome to Day 20!
• Assignment 4 is due by end of Day 23. Will have work time Days 21 and 22.

Topics That Require More Attention

1. Point out that JavaScript is included in a web page by using <script> tags.
2. Functions being passed as arguments to addEventListener will likely confuse some students.
3. If event handling isn't working, remind the students to double check the HTML and the JavaScript to be sure the correct elements are being referenced. As always, typos will make your code fail.
4. Making sure the students understand that the DOM represents the page, can respond to user actions, and can be used to edit the HTML.
5. Encourage use of the developer tools in the browser.

Studio (TF Notes)

1. This is a GREAT studio for automatic, positive feedback ("LOOK! The rocket moves where I tell it to!"). Absolutely encourage your students to play beyond the given tasks.
2. Common student stumbling blocks:
   1. Depending on your students' questions, consider a quick group reminder on how to:
      1. Find and fork the starter code GitHub repository.
      2. Clone the remote repository to a local folder.
   2. There is a fair amount of starter code for this studio. Some students will find that overwhelming, which could cause them to delay starting.
      1. If this issue is widespread in your group, be ready to review the starter HTML with your students. Provide tips for where to start.
3. Syntax errors can be tricky to find in this studio. Be patient. Encourage your students to proceed one small step at a time (code works, make small change, ensure code still works, make change, etc.).
4. Encourage quick-finishers to try the bonus mission.