Master JavaScript - The Most Complete JavaScript Course 2022

Explore the DOM and JavaScript engine, learn how the Document Object Model connects JavaScript to HTML and CSS, and manipulate elements, attributes, styles, and events in the browser.

Explore how to select DOM elements using tag name, class name, id, and query selectors; manipulate attributes, class lists, and content, and understand caching for efficient DOM access.

Explore how to select elements with getElementById, querySelector, and querySelectorAll, differentiate single versus multiple selectors, and modify content, styles, and classes with NodeList and HTMLCollection.

Create a new list element with document.createElement, set its class and id, assign text content, create and append a span, then append the item to the ul using appendChild.

Learn to manage dom events with event listeners, handle click actions, prevent default navigation, and use the event object to access type, target, and client coordinates.

Master dom events by wiring click and key down listeners to add input values as list items in an unordered list, using create element, create text node, and append child.

Explore dom keyboard events in javascript, including keydown, keyup, focus, blur, and cut and paste, with hands-on practice wiring input listeners and inspecting event properties like key and keyCode.

Explore the importance of ECMAScript 2015 features and how Babel enables transpiling newer code to widely supported JavaScript across browsers, bridging background knowledge and modern development.

Explore lexical scoping and closures and learn currying and function composition, showing how inner functions access outer variables and how to build reusable, composed functions.

Master advanced array methods in JavaScript with map, filter, and reduce to transform arrays, where map returns a new array, filter selects elements, and reduce uses an accumulator.

Explore objects as reference types, understand context and the this keyword, and learn classes, constructors, and inheritance with new and super to create and reuse instances.

Explore how primitive data types are passed by value while objects and arrays are passed by reference, then learn cloning with spread operator and concat to avoid shared references.

Explore how JavaScript uses type coercion to convert values between data types, and compare with the three equals sign versus the double equals sign, including practical examples from the lecture.

Learn how to convert a JavaScript object to JSON with JSON.stringify, send JSON data to a server, and parse the JSON response back into a JavaScript object.

Master how Ajax updates pages without a refresh by exchanging data with servers using fetch. Use promises and JSON to handle responses and access data on the client side.

Master JavaScript explains callbacks and asynchronous programming, including anonymous functions and setTimeout, highlighting non-blocking execution, callback hell, and how promises solve it.

Explore promises in JavaScript, define states (pending, resolved, rejected), compare to callbacks, and practice chaining, error handling with catch, and coordinating multiple promises with Promise.all and fetch.

Learn es7 features, including the includes method for arrays and strings and the exponential operator for power calculations. See case sensitivity and simple square and cube examples.

Explore es8 features such as padStart, padEnd, and object keys, values, and entries, and learn to loop over objects using these helpers and trailing commas in function parameters.

Master async await in JavaScript by learning how async functions return promises, how to consume them with await, and how to fetch and handle data with error handling.

Explore es9 features in ecmascript 2018 by using the spread operator for arrays and objects, passing array elements as function arguments, and extracting rest values to manage car stock data.

Explore ES9 finally and for await of, implement Promise.all with multiple fetch requests to the Pokémon API, and convert promise chains to async/await with try-catch.

Learn how JavaScript modules organize code through named and default exports, and how to import them with various syntax, while discussing bundlers, Babel, and browser support.

Learn es11 features with dynamic and static imports, async/await, and dynamic module loading. See a practical multiply export/import example and a brief look at regexp matching.

Explore JavaScript fundamentals and set up your development environment, from choosing a text editor to launching a local server and creating your first index file.

Learn how to call JavaScript in HTML with inline scripts and external files. Practice using script tags, logging to the console, comments, and relative file paths.

Explore operator precedence in JavaScript through hands-on examples, showing how brackets, unary negation, and arithmetic operators interact, and how the precedence table determines evaluation order.

Master if else statements in JavaScript by learning how conditions trigger actions and how the else block handles alternative paths. Explore booleans, true or false values, and practical examples.

Learn the document object model (dom) and how to manipulate the HTML document. Understand nodes, element nodes, and the document structure to access and modify elements and attributes.

Explore single element selectors with getElementById and querySelector, learn to select by id or class, and manipulate text, innerHTML, and inline styles.

Learn to traverse the DOM by selecting and manipulating lists with querySelector and querySelectorAll, access children, first and last elements, and navigate the HTML collection, parent and sibling relationships.

Learn to handle mouse events in JavaScript by using event listeners for click, double click, mouse down, mouse up, enter, leave, and move, with a dry, reusable event tracker.

Learn to use local storage and session storage in JavaScript to setItem, getItem, removeItem, and clear key-value data, noting local storage persists after close and session storage does not.

Learn to build a dynamic to-do list by creating and displaying list items, handling form submission, and storing tasks in local storage using JSON, with DOM manipulation.

Display items stored in local storage with a forEach loop, synchronize the UI, and implement a clear button that removes items from the DOM and local storage.

Finish a to-do list app by deleting items via the trash icon, confirming deletions, and updating the UI, local storage, using forEach and splice.

Explore the two folders—the start folder and the finished version—and learn from the starting files and wrapper, then set up a live server to display dice and track scores.

Learn to use querySelector, getElementById, and classList to add and remove visibility in a dice game. Reset player scores and prepare the game state.

Trigger the roll dice button to generate a random number from one to six with Math.random and Math.floor, then display the corresponding dice image on the GUI.

Toggle between active players, calculate each player's dice roll, and update per-player and final scores using display logic and a ternary operator, stopping when a player reaches twenty.

Learn how to use the console to inspect arrays and prototypes, understand constructors and prototype chains, and apply array methods like push, length, and slice in JavaScript.

Explore primitives versus objects in JavaScript, where primitives hold values and objects hold references, causing mutations to propagate through references and revealing local versus global scope.

Explore how this keyword binds in a constructor function, how new creates instances, and how this refers to current objects or the global window object in JavaScript.

Explore JavaScript built-in constructors: string, number, boolean, and regular expressions, and how the new keyword creates objects, not primitives, with === and == comparisons.

Discover first-class functions in JavaScript by treating functions as objects: pass them as arguments, store them in variables, and return them via callbacks, illustrated with array and date examples.

Explains closures in JavaScript by showing an inner anonymous function accessing outer function variables after return, using a days-until-birthday example with prefix and suffix to demonstrate scope and memory.

Learn modular architecture by structuring a to-do list app into graphical user interface, calories, and main modules, connected by a bridge main controller to manage data encapsulation and interactions.

Read form data and connect the main controller with the UI using a public getFormData function. Centralize class names in a private object to maintain type, description, calories, and quantity.

Learn to clean the code, add meaningful comments, and group event listeners in a module controller for the calories module. Initialize the app and return objects, improving readability and maintenance.

This lecture demonstrates validating a form by converting inputs to numbers with parseFloat and parseInt, using isNaN to reject non-numeric values, and enforcing positive calories and quantity with simple checks.

Explore organizing calorie data in JavaScript by building a calories storage object and using function constructors for adding and burning calories, with a public API to access all calories.

Add calories by creating a calorie function and storing results in a storage object via the calories controller. Parse form input and push calorie objects into the appropriate arrays.

Learn to dynamically store calories with a unique id in storage, compute the next id from the last entry, and handle the zero-length scenario.

Learn to fetch stored calories and display them in the UI by returning the calorie object from the app UI controller, building type-specific markup, and injecting it with DOM manipulation.

Calculate added and burned calories, store their totals in a calories controller, and compute daily remaining calories and percentage to update the front end.

Display the results in the front UI by wiring a display function to the calories object from the main app controller, then update remaining calories, percentage, and chart visuals.

Finish the first part by entering calories, storing them, and displaying results; implement the second part by deleting items with a click, updating storage and UI, and refining styling.

Learn to delete calories with event delegation, prevent event bubbling, and use the parent node to identify food or exercise items by id, updating storage and the UI accordingly.

Learn to delete calories from storage and update the front UI by removing items based on IDs and positions using map and splice.

Plan the final stage by outlining coding points, fix hardcoded values, and format numbers for a cleaner look and feel. Use flowcharts before coding to guide improvements.

Display current date by extracting year, month, and day with the date function, map month and day names via arrays, and implement a play date function in the UI controller.

Learn to format calories with two decimals and thousands separators using string manipulation and encapsulated private functions, applying tests in the calories controller.

Learn to clear a submission form, display error notifications, and clean the code by wiring the form to an API controller, iterating form fields, and styling alerts.

Explore ES6 features, including blocks and let/const, rest and spread, maps, classes, and default parameters. Understand browser compatibility and why ES6 matters for modern JavaScript, with promises and native modules.

Explore how to declare variables with let and const, understand when to mutate values, and compare function scope versus block scope, including the temporal dead zone in ES6.

Explore ES5 and ES6 blocks and IIFEs, and learn how block scope enables data encapsulation and privacy, contrasting function scope with curly-bracket blocks.

Explore template literals with backticks for easy string construction, interpolation with ${}, and multi-line output, using string methods like startsWith, endsWith, and repeat.

Learn to design a traffic light from scratch using css and sass, apply box-shadow techniques, border-radius, flexbox layout, bem naming, and gradient mesh visuals.

Explain how lexical this behaves in functions, compare arrow and regular functions, and show binding this with call, apply, and bind in events and objects.

Explore for of loops, break and continue, and how to use findIndex, find, and Array.from to search arrays, convert node lists, and manipulate traffic-light style examples.

Master the spread operator in JavaScript for expanding arrays and node lists in function calls and arguments, and learn to join arrays and map elements into new class names.

Learn how default parameters preset function arguments to avoid undefined values, using simple defaults and the ternary operator to handle missing inputs in a JavaScript function constructor example.