Introduction to Modern JavaScript 

Course Overview

Duration: 5 days
Level: Beginner to Intermediate
Prerequisites: Basic HTML/CSS knowledge helpful but not required

Day 1: JavaScript Fundamentals & Modern Syntax

Core Concepts

• What is JavaScript? History and role in web development

• Setting up development environment (VS Code, browser dev tools, Node.js)

• Variables: let, const vs var - understanding scope and hoisting

• Data types: primitives, objects, arrays

• Template literals and string interpolation

• Basic operators and expressions

Hands-on Lab:

• Create first JavaScript program

• Practice variable declarations and template literals

• Build a simple calculator

Control Flow & Functions

• Conditional statements (if/else, switch, ternary operator)

• Loops: for, while, for...of, for...in

• Functions: traditional vs arrow functions

• Parameters, default parameters, rest parameters

• Function scope and closures introduction

Hands-on Lab:

• Build interactive quiz application

• Create utility functions with different parameter patterns

Daily Project

Build a "Personal Info Card Generator" that takes user input and creates formatted output cards

Day 2: Objects, Arrays & Modern Data Manipulation

Objects Deep Dive

• Object creation and property access

• Object methods and this keyword

• Object destructuring and spread operator

• Object.keys(), Object.values(), Object.entries()

• JSON handling (parse/stringify)

Arrays Mastery

• Array creation and manipulation

• Array destructuring and spread operator

• Essential array methods: push, pop, shift, unshift, slice, splice

Hands-on Lab:

• Create a contact book with object manipulation

• Practice destructuring with real-world data

Functional Array Methods

• map() - transforming data

• filter() - selecting data

• reduce() - aggregating data

• find() and findIndex() - searching data

• some() and every() - testing data

• Method chaining and composition

Hands-on Lab:

• Data analysis project with student grades

• E-commerce product filtering and sorting

Daily Project

Build a "Task Manager" with add, delete, filter, and statistics features using array methods

Day 3: Asynchronous JavaScript & APIs

Understanding Asynchronous Programming

• Synchronous vs asynchronous code

• The event loop and call stack

• Callbacks and callback hell

• Promises: creation, chaining, error handling

• Promise.all(), Promise.race(), Promise.allSettled()

Hands-on Lab:

• Create custom promises

• Practice promise chaining

• Handle promise errors

Modern Async Patterns

• async/await syntax

• Error handling with try/catch

• Fetch API for HTTP requests

• Working with JSON APIs

• CORS and common API issues

Hands-on Lab:

• Fetch data from public APIs (weather, jokes, quotes)

• Build API error handling

• Create loading states

Daily Project

Build a "Weather Dashboard" that fetches weather data from multiple cities and displays it

Day 4: DOM Manipulation & Event Handling

Document Object Model (DOM)

• Understanding the DOM tree

• Selecting elements: querySelector, getElementById, querySelectorAll

• Modern element selection techniques

• Creating and modifying elements

• Adding/removing classes and attributes

• innerHTML vs textContent vs innerText

Hands-on Lab:

• Dynamic content creation

• Style manipulation through JavaScript

• Element positioning and animation

Event Handling

• Event types: click, submit, input, load, resize

• Event listeners vs inline handlers

• Event object and event properties

• Event delegation and bubbling

• Form handling and validation

• Keyboard and mouse events

Hands-on Lab:

• Interactive form with real-time validation

• Keyboard shortcuts implementation

• Dynamic list management

Daily Project

Build an "Interactive Todo App" with drag-and-drop, local storage, and keyboard shortcuts

Day 5: Modern JavaScript Features & Project Integration

ES6+ Advanced Features

• Classes and inheritance

• Modules: import/export (ES6 modules)

• Symbols and iterators

• Map and Set data structures

• Regular expressions basics

• Error handling best practices

Modern JavaScript Patterns

• Module pattern and organization

• Immediately Invoked Function Expressions (IIFE)

• Factory functions vs constructor functions vs classes

• Composition over inheritance

Hands-on Lab:

• Refactor previous projects using classes

• Create modular code structure

• Implement custom error classes

Browser APIs & Performance

• Local Storage and Session Storage

• Geolocation API

• File API basics

• Performance considerations

• Debugging techniques and tools

• Code organization and best practices

Testing & Deployment Prep

• Browser compatibility

• Code linting and formatting

• Basic performance optimization

• Preparing code for production

Hands-on Lab:

• Add persistence to todo app

• Implement geolocation features

• Performance optimization exercises

Final Project Integration

Combine all week's learning into a comprehensive project: "Personal Dashboard App"

• Weather widget (Day 3)

• Todo list (Day 4)

• Contact manager (Day 2)

• Settings with local storage (Day 5)

• Modern JavaScript features throughout