Week 5 — JS DOM & DBMS Schema Design

intermediate javascript dbms

Goal: Learn how JavaScript interacts with the browser (events, DOM, storage) and master database schema design — both are staples of product company interviews.

Topics

DayFocusTopics
MonJS Iterators & CollectionsIterators: for…in vs for…of · Map & Set
TueJS EventsEvents · Event Bindings · Event Bubbling & Capturing
WedJS DOMEvent Delegation · DOM Manipulation · Web Storage & Cookies
ThuDBMS Schema BasicsER Diagrams · Normalization · Denormalization
FriDBMS Schema AdvancedRelationships & Keys · Schema Design Patterns

Key Concepts

  • Event bubbling vs capturing flow — events bubble up by default, capturing goes top-down
  • Event delegation: attach one listener to a parent instead of N listeners to children (huge for dynamic elements)
  • Map vs plain objects: Map preserves insertion order, allows any key type, has .size
  • localStorage vs sessionStorage vs cookies — storage limits, persistence, and when to use each
  • Normalization forms (1NF through BCNF) — eliminating redundancy step by step
  • When denormalization is actually worth it (read-heavy workloads, reporting tables)
  • ER diagram notation and how to translate it to actual tables

Practice

  • Build a todo list using only DOM manipulation + event delegation (no framework, just vanilla JS)
  • Design a normalized schema for a blog platform (users, posts, comments, tags) — go through 1NF to 3NF
  • Compare your normalized schema with a denormalized version — list the tradeoffs

~13 topics · ~1.5 hrs/day · Focus: read the linked notes, then code each concept