JavaScript - The complete guide

Discover where to place JavaScript in HTML, including head and body placements, external vs internal scripts, and techniques like async and defer to optimize page loading.

Discover why JavaScript dominates the web and how to start coding, create files, view outputs, and update HTML content with document.write and innerHTML.

Learn how to generate dynamic output with JavaScript by selecting elements with getElementById, class, or tag name, updating text in paragraphs, and using console logs and window onload.

Learn JavaScript syntax basics, including literals, strings in quotes, numbers, variable declaration and assignment, console logging, operators, string concatenation, comments, case sensitivity, and valid identifier rules.

Explore how var, let, and const declare variables in JavaScript and how block scope affects values inside and outside blocks.

Explore JavaScript operators, including arithmetic and assignment, comparison, logical, and the ternary operator. See increment, decrement, string concatenation, and append to history in practical examples.

Learn about data types, including numbers, strings, and objects, and how JSON and curly braces define structures. Use the typeof operator to identify variable types and inspect values.

Explore strings and template literals in JavaScript, using single or double quotes, escaping with backslashes, and creating multiline strings while embedding variables or expressions.

Explore essential string methods in JavaScript, including length, indexOf, lastIndexOf, search, slice, substring, replace, and case conversion, to extract, modify, and clean text.

Explore JavaScript number handling, including converting numbers to strings, adjusting precision, and fixed formatting for decimals and money, with practical string-number conversions.

Learn to create and access arrays in JavaScript using array literals and the Array constructor, use zero-based indexing, and read the length property to inspect size.

Learn how to manipulate arrays in JavaScript using pop, push, shift, unshift, and concat, including removing and adding elements and merging arrays.

Learn how to create and use functions in JavaScript, including function declarations and arrow functions in ES6, pass arguments, return results, and reuse code for a calculator example.

Create a fruit object in JavaScript, defining properties such as name, color, and id, then access values and call function properties to output messages.

Discover how JavaScript uses events to make web pages dynamic and interactive. Learn common events like click, mouseover, keydown, and onload, and how to use functions to respond.

Explore typing events in JavaScript by binding on key events to an input and counting characters without refreshing the page. Read the input value with getElementById and update dynamically.

Learn how to implement if-else logic in JavaScript using let variables and compare X and Y to drive decisions. Use the ternary operator for two-branch choices and explore else if.

Learn how to use a switch statement in JavaScript to evaluate a variable and define cases with break and default. The lesson highlights preventing fall-through and handling unmatched cases.

Master JavaScript loops, including for, while, do while, for in, and for of, by iterating over data length with clear syntax, conditions, and increments to build iterative messages.

Learn how to use for in and for of to iterate over object properties and strings, build messages, and print values in JavaScript.

Explore while and do...while loops by counting from zero to ten, explaining condition placement, incremental updates, and why do...while runs at least once before evaluating the condition.

Explore how break and continue control flow in loops. Use break to exit early from a loop and continue to skip a single iteration, with examples in for loops.

Explore how to use try, catch, finally in JavaScript to handle errors, throw custom errors, and run code after error handling, demonstrated with input validation and a catch me example.

Explore JavaScript scope and hoisting, distinguishing local and global variables and how functions control accessibility. See how declarations behave inside and outside functions, and how let and var influence hoisting.

Learn how to enable use strict at the start, enforce strict mode to declare variables, and enforce restrictions that improve secure JavaScript by preventing undeclared variable usage and deletions.

Learn how the this keyword in JavaScript refers to the owning object in methods, to the global object in functions, and to undefined in strict mode.

Define and use JavaScript classes with a constructor, instantiate objects with the new keyword like users, and implement methods such as age using the date object and proper scope.

Use browser developer tools, console logs, and the debugger to locate and fix syntax and logical errors in JavaScript, and set breakpoints in Chrome or Visual Studio Code.

Demonstrate the document object model, its tree of HTML elements, and how JavaScript accesses, inspects, and dynamically modifies DOM content and events.

Learn how to use the document object to access and manipulate elements with getElementById and class name, update innerHTML, attributes and styles, attach onclick events, and create or remove nodes.

Explore how to use selectors to target elements by tag name, id, and class, and combine CSS selectors and descendant queries to retrieve the first matching element.

Learn how to use JavaScript to change image attributes by selecting an element with its id, then update the src and width attributes using assets paths and click events.

Learn how to apply css properties with javascript by using the style property to change visibility and display on events like click and mouseover, enabling simple animations.

Attach event listeners to elements using addEventListener to handle events such as click and mouseover. These listeners don't overwrite existing handlers and allow multiple events, such as on an image.

Explore event propagation, focusing on bubbling and capturing, and how inner elements fire first in bubbling while capturing uses a capture flag to run outer-to-inner.

Explore the browser object model, using the window object to manage cookies, timing, screen size and orientation, open new windows, and respond to dynamic resizing.

Explore using window.location to read and manipulate the current URL, including domain, hostname, protocol, port, and hash, and load new documents with assign while styling navigation.

Explore how JavaScript uses the window history API to inspect where users come from, navigate back and forth, and safely redirect them to control user flow.

Learn to use the navigator object to read browser data such as cookie enabled, app name, version, engine, platform, language, online status, and user agent, plus JavaScript driven client-side information.

Learn to create interactive popup windows in JavaScript using window.confirm and window.alert, collect a name with input and placeholder, and warn before leaving while showing personalized messages.

Explore timing in JavaScript by using set time out and set interval to delay or repeat functions, and learn to clear time out and clear interval to control execution.

Learn to use the window object instead of the document to access the page width and height, and to listen for resize events with addEventListener.

Explore the map function in JavaScript to transform array elements and update values by index, using an array and a function, with a browser demonstration.

Learn how to use JavaScript's filter to create a subset of array values that meet a condition, such as numbers greater than 30.

Explore how the reduce function uses an accumulator and the current value to sum numbers, complementing map and filter and enabling shopping cart total calculations.

Explore building a shopping cart with reduce() in JavaScript, summing cart item totals by multiplying quantity and price, and comparing reduce and reduceRight for accumulating the final amount.

Explore how some() and every() work as quick boolean checks on array elements, returning true or false when values are bigger than a threshold, with practical inline examples.

Explore indexOf and lastIndexOf, two array search functions that operate from left to right and from right to left. See how the starting position affects results with a practical example.

Learn how to use JavaScript's forEach to iterate arrays, replace traditional for loops, pass values to functions, build messages, and print outputs to perform common tasks.

Learn to define a class and use extends to enable inheritance with super and constructors. Build a fruits example that demonstrates inherited properties and customized messages showing name and color.

Explore how to implement getters and setters in a class to control values before returning them, such as a fruit's name and color.

Explore callbacks in JavaScript by passing a function as an argument to another function, enabling sequencing and waiting for asynchronous tasks to finish.

Explore promises in JavaScript, including the three states (pending, fulfilled, rejected), creating a promise with resolve and reject, and analyzing outcomes with a timeout example.

Explore async and await by understanding promises, creating and resolving or rejecting them, and using then and await with practical examples.

Explore destructuring in JavaScript, using array and object patterns, rest operator to collect remaining items, ignore elements, and simplify assignments.

Explore how call, apply, and bind let a method run on different objects, reusing this. Build fruit objects to demonstrate passing arguments and accessing properties across objects.

Explore the apply function in JavaScript, contrast it with call, and learn how apply passes arguments as an array rather than as separate values, with practical examples.

Explore how bind attaches a function to an object and preset arguments, demonstrating with fruit objects, color, and a message function, and compare bind to apply and call.

Explore the differences between jQuery and JavaScript, learn how to include the jQuery library from official website or via npm install, and compare selectors from document.getElementById to jQuery's concise syntax.

Learn how to use jQuery to manipulate text, show/hide elements, toggle content, style via CSS, and build dynamic interactions.

Build a JavaScript countdown timer using the inbuilt date function to display days, hours, minutes, and seconds, updating DOM elements with getElementById and Math.floor toward a wedding date.

Explore building a tab component in JavaScript, creating multiple tabs, toggling tab content with classes, and using a loop to handle any number of tabs.

Learn to make a navigation bar sticky using CSS fixed positioning and a scroll script that uses the window object to toggle a sticky class based on scroll offset.

Learn how to implement cookie consent using local storage in JavaScript, creating a cookie container and toggling visibility with CSS classes, and persisting user acceptance across sessions.

Learn to build a modal popup with JavaScript: create a modal element, toggle visibility with a button, include a close button, style a full-screen overlay, and close on outside clicks.

Learn to build a top fixed scroll indicator that updates with window scroll using JavaScript and a progress bar.