JavaScript Foundations for the Web

Build a foundation in JavaScript values, variables, operators, control flow, functions, arrays, and objects. Learners progress from reading individual expressions to reasoning about how core language features work together.

• ·Course Introduction

  Welcome and orientation: overview of JavaScript fundamentals, browser programming, asynchronous behavior, and modern language features. This introduction explains how the learning path develops skills for reading, writing, debugging, and structuring JavaScript.

• ·JavaScript Values

  JavaScript programs manipulate values such as numbers, strings, booleans, null, undefined, and objects. Learners examine value types and distinguish how different kinds of values behave.

• ·Variables

  Variables provide names for values and allow programs to refer to data over time. Learners compare let and const declarations and trace changes to variable bindings.

• ·Operators

  Operators combine or transform values to produce new results. Learners trace operator precedence, compare strict and loose equality, and reason about logical results.

• ·Conditionals

  Conditional statements control which code runs when a condition is true or false. Learners trace branching logic and identify the path selected by different values.

• ·Functions

  Functions package reusable behavior behind a name and can communicate through parameters and return values. Learners trace function calls and distinguish inputs from returned results.

• ·Arrays

  Arrays store multiple values in an ordered collection indexed from zero. Learners access elements, inspect length, and update array contents using common operations.

• ·Objects

  Objects represent related data through named properties. Learners read and modify properties, compare dot and bracket notation, and reason about missing properties.

• Essentials Synthesis

  This assessment measures integrated reasoning across the essential language features introduced in the module. Learners analyze execution, predict results, and explain how data and control flow move through a short JavaScript program.

Understand how JavaScript executes statements, repeats instructions, changes loop behavior, and selects among multiple branches. Learners will trace increasingly structured control flow and explain how execution moves through nested code.

• ·Execution Order

  JavaScript normally executes statements from top to bottom, while control structures can redirect or repeat that order. Learners identify the exact sequence of executed statements in short code examples.

• ·While Loops

  A while loop evaluates its condition before each iteration and runs its body only when that condition is true. Learners reason about initial conditions, repeated updates, and loop termination.

• ·Do-While Loops

  A do-while loop runs its body before checking the continuation condition. Learners distinguish its guaranteed first iteration from the pre-check behavior of a while loop.

• ·For Loops

  A for loop groups its initialization, condition, and update expressions into one structure. Learners trace how these three parts control iteration and determine how many times the body runs.

• ·Break Statements

  The break statement ends the nearest enclosing loop without completing its remaining iterations. Learners predict which statements execute after a break is reached.

• ·Continue Statements

  The continue statement skips the remaining statements in the current iteration and proceeds according to the loop's iteration rules. Learners distinguish skipping one iteration from ending the entire loop.

• ·Switch Statements

  A switch statement compares one expression with case values and begins execution at the matching case. Learners explain the roles of break and default in controlling which cases run.

• ·Nested Control Flow

  Nested control flow places conditionals, loops, or switch statements inside another control structure. Learners track which conditions and iterations are active and how statements such as break apply to the nearest enclosing structure.

• Program Flow Synthesis

  This synthesis assesses the ability to follow execution across repeated, conditional, and nested paths. Learners determine resulting values, executed statements, and termination points in unfamiliar JavaScript code.

Learn to represent structured data, extract and combine values, and use functions as abstractions for transforming collections. Learners progress from reading data shapes to reasoning about callbacks, higher-order functions, array transformations, and pure functions.

• ·Data Shapes

  Structured data can combine arrays and objects into nested shapes. Learners practice reading those shapes and tracing access through multiple levels.

• ·Array Destructuring

  Array destructuring extracts values by their positions in an array. It also supports skipped positions and default values when an element is absent.

• ·Object Destructuring

  Object destructuring extracts values by property name rather than position. Learners use aliases and defaults to control the resulting variable names and values.

• ·Array Spread

  Array spread inserts the elements of an iterable into another array expression. It can combine ordered data while preserving the source arrays.

• ·Object Spread

  Object spread copies enumerable properties into a new object. Later properties with the same key override earlier values in the resulting object.

• ·Callback Functions

  A callback function is a function supplied to other code so that it can be invoked at a defined point. Learners trace the difference between passing a function and calling it immediately.

• ·Higher-Order Functions

  Higher-order functions treat functions as values by accepting them, returning them, or doing both. This creates reusable abstractions over repeated behavior.

• ·Map

  The map method visits each array element and collects the callback's return values into a new array. The number and order of output elements match the input array.

• ·Filter

  The filter method tests each element with a callback and retains elements that pass the test. The resulting array may be shorter than the original and preserves the retained elements' order.

• ·Reduce

  The reduce method carries an accumulator through a sequence of elements using a callback. An initial accumulator value establishes the starting state and clarifies the callback's first step.

• ·Pure Functions

  A pure function produces the same result for the same inputs and has no observable side effects. Pure functions make data transformations easier to reason about because their behavior is localized to their inputs and return values.

• Data Abstraction Synthesis

  This synthesis assesses whether learners can reason across data representation and functional abstraction. Learners predict intermediate and final values while distinguishing new data from mutated data and pure transformations from side effects.

Learn how JavaScript represents and changes web page content through the DOM, then respond to user actions with event listeners and event data. Learners progress from locating elements and changing their state to reasoning about coordinated browser interactions.

• ·DOM Tree

  The Document Object Model represents page content as connected nodes in a hierarchical tree. Understanding this structure makes it possible to predict how JavaScript can locate and change page content.

• ·Document Object

  The global document object represents the loaded page and exposes methods and properties for inspecting its DOM. Learners will identify what kinds of page-level information can be accessed through document.

• ·Element Selection

  Selector methods such as querySelector and querySelectorAll locate DOM elements using CSS selector syntax. Learners will predict which elements are returned and distinguish a single match from a collection of matches.

• ·Text Content

  The textContent property exposes the text contained within an element and can replace that text when assigned a new value. Learners will reason about how text changes without interpreting the assigned value as HTML.

• ·Element Attributes

  Attributes store additional information on HTML elements, such as identifiers and links. Methods including getAttribute, setAttribute, and removeAttribute allow JavaScript to inspect and update those values.

• ·Element Classes

  The classList object provides methods for managing the set of CSS classes applied to an element. Learners will predict the resulting class membership after each classList operation.

• ·Element Creation

  document.createElement creates an element node in memory without immediately placing it in the document. Learners will identify what properties can be configured before the element becomes visible in the DOM.

• ·DOM Insertion

  DOM insertion methods attach existing or newly created nodes beneath a chosen parent element. Learners will trace how insertion changes the tree and the order of child nodes.

• ·Event Listeners

  Event listeners connect browser events to callback functions. Learners will distinguish registering a listener from invoking its callback and predict when the callback executes.

• ·Event Object

  When an event occurs, the browser passes an event object to the listener callback. Its properties describe details such as the event type and the element on which the event was observed.

• ·Default Actions

  Some browser events have built-in default actions, such as submitting a form or following a link. Calling preventDefault on the event object cancels that default action while allowing the listener to continue running.

• ·Form Values

  Form controls expose user-entered content through their value property. Learners will distinguish an input's current value from its HTML attributes and reason about when that value is read.

• Browser Interaction Synthesis

  This synthesis assesses coordinated reasoning across the DOM tree, document access, selection, content and attribute changes, class management, element creation and insertion, event listeners, event objects, default actions, and form values. Learners will predict the page state and execution behavior after browser interactions occur.

Understand how JavaScript schedules work that completes later, including the call stack, event loop, timers, promises, microtasks, async functions, await, fetch, and asynchronous errors. Learners progress from tracing scheduled callbacks to reasoning about promise-based control flow and asynchronous browser operations.

• ·Asynchronous Execution

  Asynchronous execution allows JavaScript to begin work that completes later while other code continues to run. Learners identify which statements execute immediately and which produce later results.

• ·Call Stack

  The call stack tracks currently executing functions and follows last-in, first-out behavior. Learners use stack state to explain nested calls and the point at which synchronous execution finishes.

• ·Event Loop

  The event loop coordinates the call stack with queues of work that are ready to run. Learners trace why queued callbacks wait until the current synchronous work has completed.

• ·Timers

  Timers schedule callbacks after a minimum delay rather than guaranteeing exact execution at that time. Learners distinguish timer registration from callback execution.

• ·Promises

  A Promise is an object that represents the eventual outcome of an asynchronous operation. Learners identify the promise as a value that can be observed before its result is available.

• ·Promise States

  Promises move from pending to either fulfilled or rejected, and a settled promise does not change state again. Learners classify promise states and connect fulfillment or rejection to an operation's result.

• ·Promise Handlers

  Promise handlers observe fulfillment or rejection without blocking the rest of the program. Learners use then and catch to connect callbacks to the corresponding settlement outcome.

• ·Promise Chaining

  Promise handlers return new promises, allowing asynchronous steps to be connected in sequence. Learners determine how returned values, returned promises, and thrown errors affect later handlers.

• ·Microtasks

  Promise reactions are placed in the microtask queue and run after the current stack is empty, before the event loop proceeds to timer tasks. Learners use this scheduling rule to explain subtle output order.

• ·Async Functions

  An async function always returns a Promise, including when its body returns an ordinary value. Learners connect async function results to promise-based control flow.

• ·Await

  The await expression unwraps a fulfilled Promise value and resumes the surrounding async function later. It pauses that function's progress without blocking unrelated JavaScript execution.

• ·Fetch

  The fetch function starts a network request and returns a Promise that settles with a Response object. Learners distinguish receiving a response from reading the response's asynchronous body data.

• ·Promise Rejection

  Rejected promises represent failed asynchronous operations and must be handled through promise rejection handlers or exception handling around await. Learners trace how handled and unhandled rejections affect control flow.

• Asynchronous Synthesis

  Learners analyze complete asynchronous control flow by predicting execution order, Promise states, resolved values, rejected errors, and the interaction between timers and microtasks. The synthesis requires applying every concept in this module to explain how asynchronous browser code proceeds.

Develop fluency with modern JavaScript syntax and organization patterns, then use them to read, trace, and explain code that combines concise functions, flexible parameters, safe property access, fallback values, classes, and modules.

• ·Arrow Functions

  Arrow functions provide a concise syntax for defining functions, including implicit returns for expression bodies. Learners compare arrow function syntax with regular function syntax and trace the resulting return value.

• ·Template Literals

  Template literals use backticks to create strings and interpolation expressions to insert computed values. Learners predict the final string produced by substitutions and multiline content.

• ·Default Parameters

  Default parameters assign fallback values during function invocation when a corresponding argument is missing or undefined. Learners distinguish omitted and provided values when tracing function calls.

• ·Rest Parameters

  A rest parameter gathers zero or more remaining arguments into a new array. Learners trace which arguments are assigned to named parameters and which are collected by the rest parameter.

• ·Optional Chaining

  Optional chaining stops a property, element, or method access when the value before the chain is null or undefined, producing undefined instead of throwing an error. Learners predict the result of safe access through nested data.

• ·Nullish Coalescing

  The nullish coalescing operator provides a fallback only when its left-hand value is null or undefined. Learners distinguish nullish values from other falsy values such as zero, false, and an empty string.

• ·Logical Assignment

  Logical assignment operators combine a logical test with assignment, conditionally updating a variable or property. Learners predict the effects of &&=, ||=, and ??= based on the current value.

• ·Classes

  Classes provide syntax for defining object construction and shared methods. Learners trace constructor execution, instance properties, and method calls on objects created with new.

• ·JavaScript Modules

  JavaScript modules divide code into files with explicit exports and imports. Learners identify what a module makes available and match exported bindings to the importing syntax that receives them.

• Modern JavaScript Synthesis

  Learners synthesize modern JavaScript features while following values across function calls, object access, instance methods, conditional assignments, and module boundaries. They reason about how these features interact with the language and asynchronous concepts developed earlier.