JavaScript Workbook Lesson Plan (Day 1 - Day 9)
Day 1 - JavaScript Fundamentals
- Code structure (statements, semicolons, comments)
- Variables & Data Types (let, const, naming rules, 8 types)
- Basic operators (arithmetic, concatenation, precedence, ++/--)
- Comparisons (equality, strict equality, type coercion, string comparisons)
- Conditional branching (if/else, else if, ternary)
- Logical operators (||, &&, !, short-circuit)
- Nullish coalescing (??)
- Switch statement
- Practice exercises (console message, sum, login check)
- Final advice (debugging, projects, practice tips)
Day 2 - Core Programming Concepts
- Loops (while, do...while, for, break/continue/labels)
- Switch (vs if/else, fall-through)
- Functions (declaration, parameters vs arguments, naming)
- Function Expressions (callbacks, hoisting)
- Arrow Functions (syntax, use cases)
- JavaScript specials (semicolons, ??, ?:, etc.)
- Code quality (indentation, naming, ESLint)
- Debugging in browser (DevTools, console, breakpoints)
Day 3 - Strings & Arrays (with Intro to Functions & Objects)
- Strings: creation, escape chars, immutability
- String methods (length, at, toUpperCase, toLowerCase, indexOf, slice, substring, substr, includes, localeCompare)
- Arrays: creation, indexing, push/pop/shift/unshift, iteration, map, filter, reduce, join, sort, reverse
- Rest/Spread syntax
- Array-like objects (arguments, Array.from)
- Practice tasks (ucFirst, truncate, array manipulation)
- Preview of Functions & Objects (closures, this, constructors, copying, optional chaining, garbage collection)
Day 4 - Browser: Document, Events
- Browser APIs: Window, DOM, BOM
- DOM tree, nodes, HTML corrections
- Navigating DOM (parent/child/sibling)
- Searching elements (querySelector, getElementById)
- Node properties & manipulation (content, attributes, styles, classList)
- Element size/scrolling (offset, client, scroll)
- Window/document measurements, coordinates, getBoundingClientRect
- Events: bubbling, delegation, event object, custom events
- DOM modification (createElement, cloneNode, insertAdjacentHTML)
- Best practices (accessibility, debugging tools)
Page 1
JavaScript Workbook Lesson Plan (Day 1 - Day 9)
Day 5 - UI Events & Form Controls
- UI Events: mouse, pointer, keyboard, scroll (lazy loading, infinite scroll)
- Form controls: inputs, checkboxes, selects, options
- Focus/blur events, change/input events
- Form submission (submit, validation, preventDefault)
- Practical tasks (editable div, deposit calculator)
- Scenario: Recipe ingredient selector (click, multi-select, tooltips, keyboard navigation, validation)
- Challenge: Interactive book selection (UI + forms)
Day 6 - Error Handling, Promises & Fetch
- Error handling: try/catch/finally, error objects, rethrowing, custom errors, global errors
- Promises: syntax, chaining, error handling, then/catch/finally
- Async/await: syntax, try/catch, multiple promises (Promise.all)
- Fetch API: syntax, response handling (text, json, blob), headers, POST requests
- Forms with Fetch (FormData)
- AbortController (cancel requests)
- CORS and cross-origin requests
- Practical tasks (GitHub API, form submission)
Day 7 - JavaScript Network Operations
- Network requests overview
- AJAX basics, evolution to Fetch
- FormData (collecting, modifying, uploading files)
- Blobs (canvas screenshots, binary data)
- Fetch & CORS (same-origin policy, preflight requests, credentials)
- URL & URLSearchParams (safe URLs, encoding/decoding queries)
- XMLHttpRequest (classic approach, progress tracking, cancelling)
- WebSockets (real-time, text/JSON/binary, reconnection, chat app example, scaling considerations)
Day 8 - Storage (Cookies, LocalStorage, IndexedDB)
- Cookies: reading/writing, encoding, size limits, attributes (secure, samesite, httpOnly)
- LocalStorage vs SessionStorage (methods: setItem, getItem, removeItem, clear)
- JSON storage (JSON.stringify, JSON.parse)
- Storage event (inter-tab communication)
- Hands-on tasks: autosave form, cookie manager, inter-tab sync
- Bonus: third-party cookies, restrictions (Safari/Firefox/Chrome), GDPR consent
- IndexedDB introduction
Day 9 - Advanced: Frames, Windows & Animations
- Frames & Windows: window.open, same-origin, postMessage, clickjacking defenses
- Animations: CSS transitions, keyframes, easing functions, Bezier curves, JS animations (setInterval vs
requestAnimationFrame)
Page 2
JavaScript Workbook Lesson Plan (Day 1 - Day 9)
- Custom timing functions (bounce, elastic, quadratic)
- Performance optimization
- Real-World Project: Dashboard with login popup, secure messaging, animated charts, counters, modals
- Final assembly & testing
Page 3
