JavaScript - The Complete Guide (Beginner + Advanced)

Learn to set up and import JavaScript on a web page by creating app.js, wiring it with vendor.js, and loading scripts with proper src attributes at page end.

Explore variables and constants in JavaScript using let and const to store data like the last result and the current input in a basic calculator that works with two numbers.

Learn how to declare and name variables in JavaScript using let and const, follow camelCase conventions, avoid starting with digits, and decide when to use semicolons.

Understand how a function call triggers code in vendor.js to push two pieces of information into your HTML, overwriting hardcoded data with dynamically derived results.

Learn to build strings in JavaScript by choosing single or double quotes, use backticks for template literals with interpolated expressions, and manage escaping, multiline strings, and dynamic value insertion.

Learn how the return statement ends a function and stops code execution. Explore returning nothing, conditional exits with if statements, and why only one return can be used here.

Explore how JavaScript executes code by wiring the plus button with addEventListener, reading user input, and updating the current result on click via a function reference.

Learn how to write clear JavaScript comments using single-line // and block /* */ syntax, balancing context with brevity to improve readability without stating the obvious.

Create and manage objects with curly braces to store key-value pairs, log entries, and operations, then inspect the log array to extract detailed results.

Learn to access object data with dot notation, reading properties like operation from log entries, and recognize objects as key-value groups that can hold strings, numbers, arrays, or functions.

Explore MDN, the Mozilla Developer Network, as the JavaScript reference with tutorials, built-in objects, and parseInt, while learning to Google and ask clear questions in forums like Stack Overflow.

Identify common JavaScript errors such as missing closing square brackets and not defined functions, and use the console and developer tools to diagnose and fix runtime issues.

Learn to identify and fix logical errors using console.log debugging, verify input types, and use Chrome DevTools to set breakpoints and trace code execution in JavaScript.

Connect VS Code to Chrome debugging tools with the Chrome extension, set breakpoints, and run the app from the editor. Inspect variables and call stacks in the debug console.

Improve debugging and write efficient code by configuring your IDE, using Chrome DevTools, and leveraging MDN, Google queries, and Stack Overflow to solve problems.

Explore how to use if statements and boolean operators to drive conditional code execution in JavaScript, including value equality, type checks, and comparing numbers and strings.

Refactor a calculator to reuse code using an if statement on calculation type, introducing a calculateResult function that handles add and subtract and sets a dynamic math operator for readability.

Explore operator precedence in JavaScript, comparing arithmetic and boolean operators, and learn how parentheses override order to control evaluation with examples like 3 + 2 * 5.

implement a clickable attack button that deals random damage to the monster based on a chosen max life and a fixed attack value, and update the health bars accordingly.

Implement a bonus life mechanic by using a boolean hasBonusLife, preserving health before hits, and consuming the bonus life in the round function to prevent death, with corresponding UI updates.

Create global constants for identifiers like mode attack and mode strong attack at the top of the file, then use them in conditions to reduce typos.

log every round and event using writeToLog, store entries in a battle log, and print the log to review player and monster actions, health, and game result.

Master practical tricks with JavaScript logical operators. Learn double bang coercion to real booleans from truthy and falsy values, default values with the or operator, and how and returns values.

Explore the four main JavaScript loops—the for, for/of, for/in, and while loops—and learn how to execute code multiple times, iterate arrays, and access object keys dynamically.

Explore the classic for loop in JavaScript, learn initialization, exit conditions, and increments, and compare it to for/of and dynamic array length as you build readable logs.

Explore the for-of loop for iterating arrays, using a new constant per iteration to access each element, and compare it to the traditional index-based for loop with battle log data.

Learn how to use while and do-while loops in JavaScript, compare them with for loops, avoid infinite loops, and understand do-while’s body-first execution for dynamic exit conditions.

Learn how the continue keyword skips the current loop iteration without breaking the loop, unlike break, which stops the entire loop in a for loop from 0 to 4.

Learn to handle unpredictable JavaScript errors with try-catch, throwing and catching errors to fail gracefully. Manage user input and network errors with fallback code and user-friendly messages.

Learn how to use try-catch to handle errors without wrapping the entire program. Declare variables before try and apply a fallback value, with optional finally for cleanup.

Wrap up core control structures in JavaScript, including if and else if, comparison and logical operators, booleans and falsy and truthy values, the ternary expression, and loops with error handling.

Explore hoisting in JavaScript by contrasting var and let/const initialization, revealing how declarations lift to the top and why initialization matters for code clarity.

Explore strict mode in JavaScript and how it prevents re-declaration with var and reliance on implicit globals, and adopt let and const for cleaner, safer code.

Explore how the JavaScript engine executes code by managing the heap and stack, tracking function calls, and the single-threaded event loop in the browser.

Learn how primitive values differ from reference values in JavaScript, how copying copies values versus pointers, and how to make real copies with the spread operator for objects and arrays.

Review JavaScript's past and present, compare var and let in block and global scope, and examine strict mode, describing how the browser executes code with primitives, references, and garbage collection.

Dive into different ways to create functions in JavaScript, including anonymous functions, callbacks, functions in functions, default arguments, rest operator, and built-in functions like bind.

Review how functions define code on-demand, register before execution, and can be called multiple times with varying arguments, including direct and indirect calls, with block scope, parameters, and optional returns.

Learn how anonymous functions work in JavaScript, when to inline them for events, and how naming them aids debugging.

Implement a getPlayerChoice function that prompts for rock, paper, or scissors, validates input, and defaults to rock; use constants and a game-is-running flag.

Implement a rock, paper, scissors game in JavaScript by defining a get computer choice function using Math.random, creating a determine winner function, and handling draw, player wins, and computer wins.

Explore arrow functions as a shorter, anonymous alternative to the function keyword for callbacks. Learn how single-expression bodies imply a return and when to omit parentheses for one argument.

Explore default arguments in JavaScript functions, learn how they supply fallback values when inputs are undefined, and use ternary expressions or the or operator to handle missing arguments.

Use the rest operator to accept any number of arguments and merge them into an array. Make the rest parameter last and only one; place fixed parameters before it.

Explore using result handlers as callbacks with sum up and subtract up. Master bind to preconfigure messages and results in a reusable combine function.

Explore the document and window objects in the browser, accessing body, head, and html content through the console and using window APIs like alert to interact with the page.

Explore querying the DOM with querySelector, getElementById, querySelectorAll, and getElementsByTagName to access elements, understand node versus element concepts, and learn to create, remove, and modify them with JavaScript.

Select multiple elements with query selector all and get elements by tag name, loop over items, compare live versus static lists, and modify text content and styles.

Select header using previous element sibling of unordered list and next element sibling after list, via DOM traversal that distinguishes text from element nodes and improves performance.

Compare DOM traversal techniques with query methods, highlighting how first element child and next element sibling can improve performance and readability, and warn about fragile selections if the HTML structure changes.

Learn how innerHTML replaces all nested HTML content and how textContent sets plain text, then use insertAdjacentHTML to add new elements without re-rendering for better performance.

Explore creating and inserting DOM elements with createElement, using append, prepend, before, after, and replace with; include text nodes and multiple nodes, and notice inserting the element moves it.

Discover how to remove DOM elements in JavaScript by using list.remove for simple cases or removeChild on the parent for broader browser support, including Internet Explorer considerations.

Apply your DOM, HTML, and JavaScript skills by building a movie list app with a modal to add title, image, and rating, then dynamically render and remove items.

Learn to show the add movie modal on click by toggling a visible class, and access the modal and add button using getElementById or querySelector.

Store user input as movie objects in a JavaScript array using title, image, and rating fields; push new movies, toggle the modal, and clear inputs for a smooth user experience.

Attach a click listener to new movie elements, pass an id to delete movie handler, find index with a for loop by id, then splice array and remove DOM element.

Wire up the delete movie modal by wiring the cancel and confirm deletion buttons to close the modal or execute the delete movie flow, binding the movie ID.

Finish the app by ensuring the backdrop closes on cancel and clearing the input. Use a clone-based workaround to reset the confirm deletion button and prevent duplicate event listeners.

Practice the bread and butter of working with JavaScript by selecting and manipulating the DOM elements, altering styles, swapping elements, and understanding attributes vs. properties.

Explore JavaScript arrays and iterables in depth, learning how to create, manipulate, and transform arrays, use key array methods, and understand maps, sets, and the concept of iterables.

Learn what you can store in arrays, from numbers and strings to objects, including uniform and mixed types, and navigate nested and multi-dimensional arrays with index-based access.

Explore adding and removing items in arrays with push, unshift, pop, and shift; learn how splice and direct indexing insert elements and compare performance.

Learn how the concat method adds elements to the end of an array by concatenating one or more arrays, returning a brand new array that avoids nested arrays.

Learn to use find and findIndex on arrays in JavaScript with an anonymous predicate that checks object properties, returning the matching object or its index.

Explore the forEach method as a practical alternative to for/of and for loops; transform price arrays, access indices, and create tax adjusted prices easily.

Experience how arrow functions shine by shortening code, dropping unnecessary parentheses and arguments, and automatically returning single expressions, especially within array methods.

Explore the spread operator for arrays and its relation to the rest operator, use it to copy arrays, pass elements to functions like Math.min, and understand shallow copies of objects.

Learn array destructuring in JavaScript to split an array into first and last names and use the rest operator for remaining data, reading left to right for cleaner code.

Explore maps and sets as core iterable data structures in JavaScript, contrasting them with arrays and objects, and learn how sets enforce uniqueness and maps allow any key type.

Wrap up the module by reviewing array creation, manipulation, and methods, plus the spread operator, destructuring, and sets and maps for performance and memory efficiency.

Explore how JavaScript objects model real-world entities by grouping data into properties and methods, distinguish primitive from reference values, and use object literals and arrays.

Discover how object keys work, using quoted strings for multiword keys and square bracket access. Understand that keys are strings; values can be any type, nonstandard names coerced to strings.

Explore how string and number keys work in JavaScript objects, with numbers coerced to strings and accessed via brackets, including non-negative keys. String keys keep insertion order; numeric keys sort.

Create a demo app that builds a movie object using shorthand and computed property names, stores it in an array, and filters with a search bar.

Learn to implement a search filter for a movie list by reading user input, wiring a click event to a handler, and rendering only movies whose titles include the term.

Learn how chaining enables multiple property and method calls in one expression, using objects like movie.info and Math.random to access .title and toString without extra variables.

Explore the object spread operator in JavaScript to copy objects, understand shallow copying, reference values, and how to overwrite nested values with new arrays.

Explore the shorthand method syntax for objects, removing the function keyword and colon, and adding parentheses after the property name, with notes on how it behaves differently behind the scenes.

Arrow functions avoid binding this, keeping it with the outer context (not the global window in strict mode), as shown in getTeamMembers using forEach to combine teamName with each person.

Explore getters and setters in JavaScript, using get and set to validate and transform values. See how to store internal values, create read-only properties, and access them like normal properties.

Master the basics of JavaScript objects, including creating objects, arrow functions, this, bind, call, apply, destructuring, and the spread operator, to prepare for more advanced topics.

Learn how a constructor creates objects with specific properties by passing arguments to new product, and assign values with this to initialize title, image, description, and price.

Learn how to split app logic into connected classes in JavaScript by creating a product list class and a product item class, each with constructors, render methods, and inter-class collaboration.

Explore getters and setters in classes through a shopping cart example, calculating a cart total with reduce and a price property, and using a setter to update totals.

Explore how inheritance in JavaScript lets you extend a base class to share properties across image and video posts, avoiding code duplication.

Learn to implement inheritance in JavaScript by building a base component with createRootElement, CSS classes, and attributes, then extend it for cart and list rendering using a render hook.

Learn how classes serve as blueprints for objects, use the new keyword to instantiate them, and leverage constructors, public and private properties, and inheritance to create reusable, organized JavaScript code.