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.

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 essential string methods in JavaScript, including length, indexOf, lastIndexOf, search, slice, substring, replace, and case conversion, to extract, modify, and clean text.

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 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.

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 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.

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.

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.

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.

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.

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 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 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 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 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.

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 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 top fixed scroll indicator that updates with window scroll using JavaScript and a progress bar.