JavaScript Web Developer Masterclass with NodeJS and ES6

Explore booleans and truthy versus falsy values, including arrays and undefined, and see how boolean conversion drives if statements and simple console logs.

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

Explore variables in JavaScript from concept to practical use, showing how to declare with var, assign values with the assignment operator, and print results to the console.

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.

Explore boolean variables and true or false flags used to track app state. Learn about scope, redeclaration risks, and reserved keywords like class and var in JavaScript.

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 when to use const and let in JavaScript, embrace block scoping, and avoid var by default, using let for mutable values and const for constants.

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.

Learn to use logical operators to combine conditions in if statements, focusing on and and or operators, with examples of bank balance, cost, and spending decisions.

Explore how the not operator in JavaScript flips boolean values in if statements, with examples like has reached credit limit and can purchase, and use not to check undefined.

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.

Explore nested functions and closures by embedding a function inside another, creating a private scope. Use inner helpers like squarer and multiplier to compute values and verify scope with tests.

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.

Learn how es6 introduces concise function expressions using fat arrows, compare them with traditional function declarations, and apply map to extract data from an array of user objects.

Explore fat arrow functions in JavaScript, comparing function expressions and traditional declarations, and learn implicit returns, skipping curly braces or return keywords, with one- and no-argument forms and ESX syntax.

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 arrow functions differ from traditional functions, focusing on this context, constructors with new, and capturing this for intervals, with examples of dog objects to illustrate.

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 switch-case logic in JavaScript, including valid inline patterns and reassigning values inside cases, triggering functions inside cases, and the role of breaks.

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.

Master the while loop in JavaScript by setting an exit condition, incrementing a counter, and avoiding infinite loops with clear console logs.

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

Learn how the do while loop executes its code at least once before checking the condition, and see examples with a counter and a user prompt to exit.

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.

Explore for loops, including initial expression, condition, and increment, and distinguish them from while loops; practice iterating through arrays with length and logging each item.

Build a fizz buzz for loop that prints 1 to 100, replacing three-multiples with fizz and five-multiples with buzz.

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 for in loops over object properties in arbitrary order, access keys and values, and transform objects; contrast with for loops and forEach for arrays, which preserve order.

Discover the for of loop in ES6, replacing for in and for each with iterables like arrays and strings, and enable break and continue for clearer iteration.

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 the document object model (DOM) and learn how JavaScript manipulates web pages by traversing the DOM tree, accessing nodes with document, and using script tags.

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.

Learn to select and modify DOM elements with getElementById and getElementsByTagName, including spans, innerHTML, innerText, and nested sub queries within a parent div.

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.

Learn how to traverse the dom to move from spans to their parent and child elements, use querySelector and getElementById, and inspect or style nodes and text content.

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.

Learn to access divs by tag name, target the last element, and assign ids; use querySelector and querySelectorAll to manipulate classes and inline styles for dynamic, event-driven styling.

Learn how to add, remove, and toggle classes on DOM elements using classList, with practical examples of adding food and foo classes to purple divs and timed updates.

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.

Learn how to listen for key down and key up events, identify key codes such as 32 for space and 13 for enter, and use prevent default to control behavior.

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.

Explore a wide range of JavaScript events—from keyboard and click to touch and orientation—learn to add and remove event listeners, and leverage MDN resources to build interactive web pages.