Modern JavaScript (Complete guide, from Novice to Ninja)

Learn to add JavaScript to a web page by placing scripts in the body or head, and by externalizing code to a sandbox.js file linked via a script tag.

Explore the Chrome browser console to test JavaScript, log values with console.log, and run alerts. Understand top-to-bottom execution and prepare for variables and constants.

Explore variables in JavaScript using let, const, and var; assign and log values with the console, and understand when to override. Learn naming constraints, camelcase, and single and multi-line comments.

Explore JavaScript's data types—numbers, strings, booleans, null, undefined, objects, symbols, and arrays—while learning how variables hold any type in a loosely typed language.

Explore strings as a data type to store letters, numbers, and characters, and learn to log, concatenate, index characters, and use length properties and string methods like toUpperCase and toLowerCase.

Learn and compare common string methods in JavaScript, such as lastIndexOf, slice, substring, and replace, demonstrated on an email example to extract and modify text.

Explore numbers in JavaScript by using let and const, performing math operations, mastering order of operations, applying shorthand updates, NaN handling, number string concatenation, and template strings.

Learn how template strings replace concatenation by injecting variables with backticks and ${}, and build dynamic text and HTML templates from blog-like data.

Learn how arrays store collections of values with square-bracket syntax and zero-based indexing. Explore methods like join, indexOf, concat, push, and pop, including destructive mutations and the length property.

Explore the differences between null and undefined in JavaScript, how the browser assigns undefined, how null behaves in arithmetic and template strings, and its use in clearing form fields.

Explore booleans in JavaScript, using true and false, includes on strings and arrays, and common comparison operators to evaluate conditions and decide code paths.

Compare loose and strict equality in JavaScript, showing how double equals performs type conversion and how triple equals checks both value and type for predictable results.

Explains type conversion in JavaScript by turning strings into numbers, numbers into strings, and booleans, using explicit conversion with Number() and the typeof operator, and implicit conversion.

Explore how modern JavaScript controls program execution through loops and conditional statements. Learn to iterate over arrays, decide when to run code, and apply these control flow concepts across projects.

Master for loops in JavaScript by using initialization, condition, and final expression to repeat code blocks. Iterate an array with names.length and output HTML with a template string.

Compare while loops to for loops, explain initialization, condition, and increment, and avoid infinite loops by updating i inside the block; demonstrate iterating names with an array.

Learn how do while loops extend the while loop to run a code block at least once, then repeat while the condition holds.

Master conditional statements by using if to run code blocks only when conditions are true, with examples checking age, ninjas array length, and password length.

Learn how to use if statements, else clauses, and else if chains to evaluate multiple conditions in JavaScript, with practical password length examples and console feedback.

Learn to use logical operators, including and (&&) and or (||), to combine conditions like password length and the at symbol.

Explore how the logical not operator (exclamation mark) reverses a boolean to run code when a condition is false, illustrated with if statements and console logs.

Explore how break and continue control loop flow in JavaScript by iterating a scores array, breaking at 100 and skipping zero to proceed with the next iterations.

Master switch statements in JavaScript to evaluate a variable against multiple cases. Use case blocks, break to prevent fall-through, and a default for unmatched values, noting strict equality.

Explore block scope with let and const, distinguishing global variables from those local to code blocks and noting how nested blocks affect access.

Explore how functions define reusable blocks of code you can call and execute, pass values into, and produce updated results like converting coordinates to addresses.

Explore function declarations and expressions in JavaScript, learn how to declare, name, and call functions, store them in constants, and understand hoisting and when to prefer expressions.

Learn how to define function parameters, pass arguments, and use defaults to control what a function outputs, including using a template string to display values.

Learn to return values from JavaScript functions, using a circle area calculation with radius inputs and the return keyword to reuse the area instead of logging.

Explore arrow functions, a modern, cleaner way to write JavaScript functions, convert regular functions to arrow form, and master parameter handling, single line returns, and this binding basics.

Understand that functions and methods are essentially the same, with methods invoked via dot notation on a data type like a string, while standalone functions use parentheses.

Learn how to use callback functions with other functions and array methods, pass functions as arguments, and iterate arrays with for each, including arrow functions and index usage.

Demonstrates callback functions in action by using for each to build html templates for a list of people and inject the results into the browser.

Explore how JavaScript objects use properties and methods, including real life analogies, and learn to create objects with object literal notation, plus built-in date and math objects.

Create an object with object literal notation using key-value properties like name and blogs. Access and update properties with dot and square bracket notation; log results and typeof check.

Attach methods to a user object using key-value pairs, implement login and logout functions callable with dot notation, and contrast methods with functions while introducing this for the next lecture.

master the this keyword in javascript by understanding how it refers to the method's object or the global window context, and why regular and arrow functions differ.

Learn to store objects inside arrays, turning blocks into rich data items with title and likes. Practice iterating an array of objects to access each blog's title and likes.

Explore the JavaScript math object, using constants like pi and e and methods like round, floor, ceil, and trunc, plus generating random numbers and ranges, and the date object.

Explore primitive and reference types in JavaScript, learn how primitives store on the stack while reference types live on the heap, and see how copying affects values and objects.

Master controlling the document object model to add, change, and remove content, handle click and mouse move events, and preview pages on a live server.

Learn how the browser creates a document object model of an HTML page and how to manipulate it with JavaScript using properties, methods, and element selection.

Master querying the dom with document.querySelector and document.querySelectorAll. Use css selectors to target elements by tag, class, or combinations, and iterate node lists with forEach.

Learn how to query the DOM with getElementById, getElementsByClassName, and getElementsByTagName, compare HTML collection and node list, and understand when to use querySelector and querySelectorAll.

Learn to query the DOM, select elements with querySelector and querySelectorAll, and update or append text and content using innerText and innerHTML, including looping over node lists to render templates.

Learn to get and set HTML attributes with JavaScript using getAttribute and setAttribute. Practice updating href, inner text, class, and style attributes on elements like anchors and paragraphs.

Learn how to modify CSS with JavaScript using style to add or update color, margin, and font size without overwriting styles, and remove them by setting an empty string.

Explore adding, removing, and toggling classes with element.classList. Use querySelector and querySelectorAll, textContent, and if statements to assign error or success states to paragraphs.

Explore the DOM node relations, including parent-child and siblings, and learn to traverse, select, convert HTML collections to arrays, and use chainable properties to modify article elements.

Discover how to handle click events by querying the Dom, attaching event listeners to a button and to-do items, and using the event object to cross items with a line-through.

Learn to delete items from the dom using the remove method and event delegation, and practice creating and inserting new elements with append, prepend, and text content.

Learn event bubbling and delegation in JavaScript, using a single ul listener with e.target to handle events, stop propagation when needed, and remove clicked li elements.

Explore events such as copy, mouse move, and wheel, and learn to attach event listeners to elements and the document while using offset x/y and page x/y values.

Create a popup that reveals on button click, showing Ninja Sale content in a semi-transparent overlay with a close control and overlay click-to-close, using querySelector and addEventListener.

Explore form events in modern JavaScript, handling submit and click events to read form values, and use keyboard events and regular expressions to validate user input.

Explore how to handle form submissions in JavaScript by attaching a submit event listener to the form, preventing the refresh, and retrieving the username value with dot notation or querySelector.

Learn to craft regular expressions to validate form input by specifying patterns, length, character sets, and anchors, testable with tools like RegEx101.

Learn to implement regular expressions in JavaScript, validate a lowercase username of at least six characters, use start and end anchors, and compare pattern.test with string.search.

Validate a username with a regex 6 to 12 characters, letters only, by handling a form submit, preventing default, and displaying feedback in the DOM.

Implement live form validation by listening to key up events on the username field, testing input with a regex, and toggling green or crimson borders to indicate validity.

build a ninja quiz project by wiring up four questions, calculating a percentage score, and exploring the window object while setting up index.html and app.js.

Use Bootstrap CSS to quickly prototype designs while keeping the focus on JavaScript, and learn to apply Bootstrap color utilities, spacing, cards, headings, and nav bars.

Demonstrates building an HTML template for a quiz using Bootstrap, including a top section, a four-question form with radio options, and a submit button, with JavaScript focus.

Learn to create a correct answers array, capture four radio inputs on form submit, compare with the answers, award 25% per correct, and log the score in JavaScript.

Learn to display quiz scores in the browser by updating the DOM with JavaScript, revealing a Bootstrap-styled results panel, and auto-scrolling to show the score after submission.

Explore how the window object acts as the global front-end host and implement automatic scrolling with window.scrollTo after submit, illustrated with console, document, alert, and setTimeout examples.

Animate the submit score by incrementing from zero to the target using setInterval, updating the display every 10 milliseconds and stopping with clearInterval when the target is reached.

Explore the array filter method, using a callback to produce a new, non-destructive array by keeping items that meet a condition, such as scores over 20 or premium users.

Use the map method to create a new array by transforming each item with a callback, including halving prices and mapping product objects without mutating the original.

Learn how the reduce method computes a single value from an array using a callback and an accumulator, including examples that count scores over 50 and sum Mario's totals.

Explore the find method, a modern array tool that returns the first element passing a test in a callback function and stops after finding a qualifying score.

Explore the JavaScript sort method to sort arrays of strings and objects by score, using a compare function and arrow syntax, and understand its destructive behavior and simple one-liner alternatives.

Learn how to chain array methods to filter a product array by price and map it into sale-price promo messages.

Build a feature-rich to-do list project using Bootstrap and Font Awesome, with add, delete, and search functionality, while setting up HTML, CSS, and JavaScript boilerplate and CDN links.

Build a responsive to-do list template with Bootstrap styling, a centered header, a search form, and a flexbox list using Font Awesome icons; connect JavaScript for interactivity.

Add new todos by submitting a form, trim the input, validate non-empty, generate an HTML template, and append it to the to-dos list in the page.

Learn to delete todos efficiently by using event delegation on the ul, detecting clicks on the trash icon, and removing the corresponding li from the dom.

Hook up a search form to filter to dos in real time using the array filter method, keyup events, and CSS to hide items that don't match.