Beginner's ES6 Programming. Code for the Web in JavaScript!

Explore JavaScript objects as collections of name-value pairs, using object literal syntax for easy initialization, add and nest entries, and access values with dot or bracket notation, including nested objects.

Explore how JavaScript objects require unique keys, how to attach functions as properties, and how the constructor pattern with new creates reusable donut objects.

Explore essential array operations in JavaScript, including sort, reverse, concat, slice, and join, and learn to access last elements using length and index, with arrays of objects.

Understand variables as placeholders that store data in JavaScript. Learn to declare them with var, assign values using the assignment operator, and log results to the console.

Explore how JavaScript variables store diverse data types, including arrays, strings, numbers, and objects, and learn to inspect types, reassign values, and use functions with console logs.

Explore naming conventions for variables in JavaScript, including reserved words, the rule against starting with a number, underscores usage, case sensitivity, and linking variables to other variables or functions.

Explore how let is stricter than var, declare without assignment, and conditionally assign values inside an if statement, showing block scope in use with console log outputs.

Show how const differs from let by enforcing block scope and preventing reassignment. Explain that const bindings can mutate internal array or object data but can't be reassigned.

Learn the basics of variables in ES6, focusing on let and const, when to use const for unchanged data and let for changeable values, and why var is generally avoided.

Explore the basics of the if statement in JavaScript, executing a code block when a condition is true, using identity operators, console logs, alerts, and simple nested ifs.

Learn the difference between the identity operator (===) and the equality operator (==) in JavaScript, including how type conversion affects comparisons and when to use strict equality in if statements.

Explore JavaScript comparison operators, including triple equals and not equals, with practical if statements comparing bank balances, item costs, and taxes.

Explore nested if statements in JavaScript by validating balance against cost and tax, and examine scope issues using let, const, and var.

Explore logical operators in if statements, using and or to combine conditions like bank balance, cost, and spending ability, with examples like has credit card.

Explore if statements and else clauses, including else if branches, via a cash versus credit purchase flow. Evaluate balance and credit limits, then log outcomes with console messages.

Master how to create reusable code with functions and parameters in JavaScript, passing data to customize outputs. Understand scope, let and const usage, and function invocation with multiple arguments.

Explore hoisting in JavaScript and how accessing variables outside a function can lead to results with impure functions. Learn to avoid these pitfalls by passing parameters to create pure functions.

Explore nested functions and closures by building an outer function that defines a private squarer and an inner multiplier, showing scope control and reusable code.

Explore how nested functions create closures, with inner functions accessing outer variables and parameters while outer scopes cannot access inner ones, illustrated by name and data formatting examples.

Explore concise ES6 code by using map, filter, and arrow functions with implicit returns to transform arrays, filter for even numbers, and simplify logic without extra function keywords.

Explore the for each loop in ES6 JavaScript to double numbers and build a reusable function that processes arrays and returns a doubled results array.

Understand that fat arrows do not create their own this context; they inherit this from the enclosing context, even when using set interval inside a block.

Learn how switch statements evaluate an expression, match cases with triple equals, and use a default to handle unmatched values, offering a cleaner alternative to long if-else.

Explore alternate methods for switch statements in JavaScript, including inline cases, triggering logic inside a case, and the importance of breaks to control flow.

Explore how loops drive repeated actions in JavaScript, from simple console logs to controlling for, while, do-while, and for-in/for-of structures, while avoiding infinite loops.

Learn loop control in JavaScript with a while loop that sums values and exits with break. Then iterate over a names array by index to find a target name.

Compare do while and while loops through a purchase validity check, using a total money variable to show do while runs at least once, while loop may not execute.

Learn how for loops initialize, evaluate a condition, and increment to repeat code, with practical examples using index, arrays, and an ice cream list.

Explore how to control loops with break and continue, including their effects on for and while loops, and how labels help manage nested loops in JavaScript.

Learn how to properly close over loop variables in JavaScript using setTimeout, addressing var vs let scope, and capturing values with a helper function or ES6 block scope.

Explore using for of loops with iterable objects like sets in JavaScript ES6 to eliminate duplicates and print unique names from arrays, using new Set and basic loop controls.

Explore how the DOM represents a web page as a tree, and how JavaScript uses the document API to traverse and manipulate elements with script tags and dev tools.

Explore selecting DOM elements by id and by tag name, and perform subqueries within a parent element to target specific spans while keeping others unchanged.

Manipulate a web page list by selecting a ul with getElementById, grabbing items with getElementsByTagName, and updating innerText using a for loop.

learn to select DOM elements with the query selector, apply inline and dynamic styling with JavaScript, and understand how styling can be overridden.

Learn to select multiple elements with querySelectorAll and apply styles to all matching nodes using a for loop, classes, and DOM relationships, while understanding IDs, specificity, and node lists.

Explore traversing the DOM from elements to their parents using parentNode and childNodes. See examples with querySelector and getElementById, and learn how traversal enables styling of ancestors.

Explore DOM manipulation by selecting divs with tag names and query selectors, updating IDs and classes, and applying CSS styles directly or via class toggling, including looping through elements.

Toggling a class uses classList.toggle to add or remove a class automatically, with setInterval repeatedly applying the change and showing updates via getElementById or querySelector.

Create and append divs, uls, and lis with createElement and appendChild, then build a list from an array using a for loop and attach it to the div.

Extracts event handling into a named function, passes the event object, and uses addEventListener and removeEventListener to fire once for click and focus events, with type checks and time stamp uniqueness.

Learn event propagation and bubbling in the DOM, using stopPropagation to control nested clicks. Implement click-driven styling with classList add/remove and event.target across divs, lists, and the document.

Employ event delegation by attaching a single listener to a parent, handle child clicks via the event target, and filter with nodeName to improve efficiency.

Learn to prevent the default behavior of links by using a click event listener and prevent default, and explore how right-click context menus and browser protections shape user experience.

Learn how to prevent default form submission from refreshing the page in a single page app, by capturing input values, creating list items, and appending them without a reload.

Listen for keydown and keyup events to detect keys by their Unicode key codes, use an event listener to log codes, and test keys like space, tab, and enter.

Demonstrates using keydown and keyup events to show a typing indicator in a textarea, and debounces input with a timeout and clear timeout to update the dom after typing pauses.

Learn that the load event waits for stylesheets and images to load before firing, unlike DOMContentLoaded, and use a window load listener for image offset height and width after load.

Explore a wide range of events beyond lifecycle and user-generated events, including keyboard, click, touch, and orientation events; learn to add and remove event listeners to create responsive pages.