JavaScript Web Developer Masterclass with NodeJS and ES6

Master how to build JavaScript objects with unique keys, attach functions, and use the constructor pattern with new to create reusable donut objects.

Explore how JavaScript stores data types using variables, arrays, and objects, with examples of numbers, strings, and key-value objects. Learn to use typeof, console log, and variable reassignment and counting.

Learn JavaScript variable naming rules, including reserved words and the no-start-with-number constraint; explore underscore prefixes, case sensitivity, and how variables can reference other variables or function results.

Understand how var is function-scoped in javascript and how let introduces block scope in ES6. See how variables behave inside and outside blocks and how let prevents unintended reassignment.

Explore how let enforces block scope, can be declared without assignment, and contrasts with var, while using if statements and console log to display hi plus a name.

Explore const versus let by demonstrating block scoped constants, which cannot be reassigned, while showing how arrays and objects inside a const can still be mutated.

Learn the basics of the if statement in JavaScript: test a condition, run a block when true, and use comparison operators like === with console logs.

Compare double equals and triple equals in JavaScript, showing how type conversion affects comparisons, the identity operator, and when to use explicit conversion for reliable results.

Master JavaScript comparisons: use triple equals for strict equality and operators like greater than, less than, and greater than or equal to, shown with bank balance, item cost, and tax.

Learn how nested if statements control flow, check balance against cost and tax, and understand scope with let, const, and var in JavaScript.

Master if statements with else and else if to implement conditional logic, including nested checks for cash, credit, and credit limits.

Master the basics of JavaScript functions, from declaring and naming to scope and invocation, learning how reusable, modular functions call and log output to the console in ES6.

Discover how to make code reusable by building and invoking functions with parameters, managing scope with const and let, and passing different values to strings and numbers in JavaScript.

Explore how the return keyword gives a function’s computed value back to the caller, contrasting it with console.log, and see basic examples of doubling numbers, adding results, and function hoisting.

Explore hoisting in JavaScript and how accessing variables outside function scope creates impure behavior, with examples using const my name and a suggestion to pass parameters for purity.

Learn function expressions, declaring functions as variables with var, let, or const, and understand their hoisting behavior. See how to pass functions as parameters and build reusable, pure functions.

Demonstrate how primitive values pass by value and how objects and arrays can mutate, showing how to manage non-primitive properties without unintended changes.

Examine how nested functions create closures, letting inner functions access outer variables while outer scope stays hidden. See how a funnel metaphor formats names and builds a data object.

Learn how to un-nest functions to reduce global namespace clutter, using a person formatter and a data formatter that invoke external helpers like year format names, with comments.

This lecture demonstrates concise ES6 function styling using arrow functions, implicit returns, and map and filter to reduce code to two lines while highlighting modulo-based even-number filtering.

Apply the forEach loop to iterate an array of numbers, double each value, and build a new array; present an ES6 rewrite using const and push.

Discover how primitive values are passed by value in functions, so original numbers and strings stay unchanged. Learn how objects and arrays can be mutated, altering the original data.

Explore how JavaScript handles an indefinite number of arguments with the old arguments object and the modern rest parameters, converting to arrays and applying a multiplier.

Explore how fat arrow functions inherit the this context from their enclosing scope, avoiding their own this, and how set interval interacts with that enclosing context in JavaScript.

Learn how switch statements evaluate an expression, match cases with break, use strict equality, and apply a default catch-all to replace long if-else chains in JavaScript.

Understand how break statements are optional, exit a switch, and prevent fall-through to other cases. See examples with a fruit switch, and learn when to use break versus return.

Implement a JavaScript switch mapping numbers to low, mid, and high ranges with a default, and build a set volume function that logs the range using triple equals.

Explore how to use a switch statement inside a function to return a donut flavor, then pass that return value to another function and log the selection.

Master loops in JavaScript by understanding how to repeat actions set number of times, exploring for, while, do while, and for in and for of loops, and avoiding infinite loops.

Explore how to use while loops in JavaScript to accumulate sums, break out of loops, and iterate over arrays by index and length.

Explore the difference between do while and while loops in JavaScript through a purchase check. See how a total money variable, a check function, and console output drive the logic.

Learn to control loops in JavaScript using break and continue. Master for and while loops, and use labels to break or continue outer and inner loops.

Learn how to correctly close over for loop values with setTimeout using closures, var versus let scoping, and ES6 techniques to print each index accurately.

Explore the for-of loop with arrays, strings, and other iterable objects, and see how sets remove duplicates using new Set(original array) while comparing iterations.

Explore how to interact with the browser DOM using onload handlers, window and document objects, and simple techniques to read, modify, and loop through HTML elements.

Create an extra div with id results to show changed-word counts, using getElementById and length on the words array, and switch from spans to p tags for accuracy.

Learn to manipulate web page lists with getElementById, select list items by tag name, and update innerText using loops to change content dynamically.

Demonstrate grabbing a div with a query selector, applying inline styling and style tags, and inspecting the resulting inline styles via dev tools.

Explore how to select multiple elements with querySelectorAll, use IDs and classes for precise styling, and apply styles via the DOM using a for loop and descendant selectors.

Use getElementById to grab an element by its id, inspect it in the console, and then reassign the id to a new value like bottom to see the dom update.

Discover how to toggle a class with element.classList.toggle, use setInterval to flip a class (like foo) every few seconds, and access classList via id or selectors.

Create and append new DOM elements with createElement and appendChild, set text content, and apply classes with classList.add to build dynamic lists from data.

Create and append DOM elements such as div, ul, and li using createElement and appendChild, driven by data with a for loop for dynamic list construction.

Remove elements from the DOM using removeChild, check direct children, and refactor into a reusable function that removes by type, demonstrated with a chocolate ice cream list.

Learn how the dom event interface handles user and api events, use event listeners with callbacks, and inspect the event object’s type and properties to drive your JavaScript behavior.

Learn to attach precise event listeners to a button inside a div using querySelector, handling click events and focus events, with both modern addEventListener and old-school onclick attributes.

Learn to attach and remove event listeners using named function references for click and focus events, manage one-time actions with inner text changes and a timestamp-based guard.

Explore event propagation and bubbling, stop propagation with mouse events, and implement document-wide listeners to toggle backgrounds via dynamic class changes on targets.

Explore the common design pattern of event delegation by attaching a single click listener to a parent element and filtering events using the target node name.

Learn to prevent default event behavior, such as stopping a link from navigating, and explore when overriding browser actions like the context menu affects user experience.

Prevent default form submission from refreshing the page in a single-page app, and append items to a list using DOM methods.

Show key down and key up events to reflect typing in a textarea, updating 'user is typing' and using a timeout to debounce and clear the timer.

Use the DOMContentLoaded event to run code after the HTML is loaded and parsed, without waiting for images. Attach an event listener to delay execution until the DOM is ready.

Explore the load event versus DOM content loaded, noting that load waits for external stylesheets and images. Attach a window load listener to access image dimensions after assets load.

Adjust image styling with JavaScript by setting width and height auto to preserve proportions, using 500 pixels as an example. Leverage the load event and looping to resize images efficiently.