Back to Syllabus

Week 2: JavaScript Fundamentals & DOM Manipulation

Foundation 3 Hours

This week deepens students' understanding of JavaScript, focusing on core concepts, DOM manipulation, and event handling.

Learning Objectives

Prerequisites

Detailed Schedule

Session 1: JavaScript Fundamentals (1 hour)

Variables and Data Types (20 minutes)

  • var, let, and const
  • Primitive types (string, number, boolean, null, undefined)
  • Type coercion and comparison operators
  • Template literals

Functions (25 minutes)

  • Function declarations and expressions
  • Arrow functions
  • Parameters and return values
  • Scope and closure

Practice Exercise (15 minutes)

Create a calculator function with different operations

Session 2: Arrays and Objects (1 hour)

Arrays (30 minutes)

  • Array methods (map, filter, reduce)
  • Array manipulation
  • Destructuring
  • Spread operator

Objects (25 minutes)

  • Object literals
  • Properties and methods
  • Object destructuring
  • JSON

Practice Exercise (15 minutes)

Build a todo list using arrays and objects

Session 3: DOM Manipulation (1 hour)

DOM Basics (20 minutes)

  • DOM tree structure
  • Selecting elements
  • Traversing the DOM
  • Creating and modifying elements

Events (25 minutes)

  • Event types and handling
  • Event delegation
  • Custom events
  • Form handling

Practice Exercise (15 minutes)

Create an interactive form with validation

Teaching Resources

Code Examples

Additional Resources

Assessment

In-Class Exercise

Students will create a todo list application with the following features:

  • Add and remove todos
  • Mark todos as complete
  • Filter todos by status
  • Store todos in localStorage

Homework Assignment

Enhance the todo list application with:

  • Due dates for todos
  • Categories/tags for todos
  • Search functionality
  • Data persistence using localStorage

Tips for Teachers

Common Challenges

  • Understanding scope and closure concepts
  • Grasping array methods and their use cases
  • Event delegation and bubbling
  • Asynchronous JavaScript concepts

Teaching Strategies

  • Use console.log() extensively for debugging
  • Demonstrate concepts using browser dev tools
  • Break down complex problems into smaller tasks
  • Provide starter code for exercises