Skip to content

Latest commit

 

History

History
63 lines (42 loc) · 3.71 KB

unit-1-lesson-5.md

File metadata and controls

63 lines (42 loc) · 3.71 KB
Raw

Lesson 1.5: Events, DOM Intro, & Project Planning


Lesson Materials

📖 Link Materials to Class Agenda:


Key Points

  • 👋 Welcome & Do Now (10):

    • Begin by welcoming everyone and explaining the objectives of the lesson.
    • Ask participants to share their answers to the 'Do Now' questions and clarify any misconceptions.

  • ⌨️ Event Handlers (20):

    • Explain that events are actions that can be detected by JavaScript, such as clicks, key presses, and page loads.
    • Define event handlers as special JavaScript functions that respond to events and make web pages interactive.
    • Use an analogy to explain event handlers, for example: "It’s kind of like a doorbell ringing when someone's at the door."
    • List common events, such as click events, key press events, mouse over events, and form submission events.

  • 💻 Code Along (15):

    • Share your screen and guide participants through a coding exercise that involves creating event handlers.
    • Start by declaring variables for HTML elements and explain the importance of the selector and event.
    • Use both HTML attributes (e.g., onclick) and the JavaScript addEventListener method to connect HTML elements to JavaScript functions.
    • Encourage participants to code along and ask questions.

  • ⏳ Break (10):

  • 🪳 Debugging & Clean Code (10):

    • Discuss the importance of debugging and share debugging strategies, such as making things visible, slowing down the analysis, and testing code in chunks.
    • Emphasize the importance of clean code and discuss clean code best practices, such as meaningful naming conventions, declaring variables in the appropriate scope, and writing self-explanatory code.

  • 💻 Project Intro & Planning (40)

    • Students will continue working on their projects.
    • They should continue filling out their planning documents if they haven't already.
    • Students will continue forward integrating HTMl/CSS/JS into their portfolios.

  • 👋 Closing (10):

    • Recap the key takeaways from the lesson.
    • Address any questions or concerns.

Common Misconceptions

  1. Confusing the DOM with HTML: Some students might think that the DOM and the HTML of a page are the same things. It's important to clarify that the DOM is a live object-oriented representation of the web page which can be manipulated with JavaScript, whereas the HTML is just text.

  2. Thinking that JavaScript and the DOM are the same: Some students might not understand that JavaScript is a language, and the DOM is an API (Application Programming Interface) for interacting with web pages.

  3. Understanding Event Handlers: Students might think that event handlers are a part of the JavaScript language itself, rather than functions that are called in response to events in the DOM.

  4. Debugging is about removing errors only: Some students might think that debugging is only about removing errors, whereas it is a broader process that includes identifying, isolating, and fixing errors in the program.

  5. Writing Clean Code is not necessary: Some students might underestimate the importance of writing clean, well-organized code. They might think that as long as the code works, it doesn't matter how it's written.

  6. Adding Event Listeners: Students often forget to add event listeners to the DOM elements or add them incorrectly which results in no action on the event trigger.

Additional Materials

  • n/a