[For Beginners] JavaScript Complete Course

Create a simple html file and a javascript file in a new folder opened with Visual Studio Code. Name them index.html and script.js, and attach script.js with a script tag.

Install the prettier code formatter extension in VS Code to enforce consistent indentation with four spaces, remove extra spaces, and format documents for cohesive team collaboration.

Install and use the material icon theme extension in VS Code to visually identify HTML and JavaScript files with distinct icons, improving project navigation in large codebases.

Explore the const keyword in ES6, its block scope, and how it differs from let. Learn that a constant cannot be reassigned, though objects and arrays can be mutated.

Explore single-line and multi-line comments in JavaScript to annotate code, pause execution for testing, and document functions with inputs and outputs.

Explore the JavaScript string data type, from primitive literals with quotes and backticks to string objects; learn about length, multi-line escapes, and how equality treats strings and objects.

Explore JavaScript string methods to trim, split, slice, replace, toUpperCase, toLowerCase, and concat text.

Introduce BigInt to overcome number limits in JavaScript, show how to convert values, and explain that BigInt stores integers only, avoiding precision loss beyond the max safe integer.

Master the boolean data type in JavaScript, including true and false literals, truthy and falsy values, and why primitive booleans are preferred over boolean objects.

Explore the object data type in JavaScript, create objects with properties and methods, access them via dot or bracket notation, use symbol keys, nest objects, and understand const vs mutability.

Explore how JavaScript's dynamic typing lets a variable change type at runtime, causing addition to become concatenation or boolean results, with advantages and pitfalls.

Explore how a JavaScript array can hold anything as its element, including numbers, booleans, strings, functions, and objects. Access elements by zero-based index and run stored functions to verify.

Learn how holes form in an array when you access beyond its length, creating empty slots, and how strict mode with Object.defineProperty can make the length non-writable.

Demonstrates how shift and unshift operate at the start of a JavaScript array, removing or adding elements, returning the removed item or new length, and handling empty arrays.

Explore JavaScript's splice: delete elements from an array starting at a chosen index with a count, mutating the original array and returning the deleted items; replace with a third parameter.

Explore the delete operator in JavaScript, deleting object properties, array elements, and global variables; learn its true/false return, why it leaves empty slots, and how strict mode affects deletion.

Demonstrate how to use the join method to convert array elements into a string with custom separators, including defaults, and apply it to multi-dimensional arrays for nested data.

Explore how to flatten multi-dimensional arrays with array.flat, control depth (including infinity), and see how empty slots, null, undefined, and objects behave.

Master a custom deep flat in JavaScript by building a recursive solution that flattens nested arrays without using flat, supports arbitrary depth, and demonstrates optional depth adjustments.

Use the spread operator to create a shadow copy of the array, sort the copy, and keep the original array unchanged, demonstrating how to sort without modifying the original.

Understand how to sort arrays with a custom compare function to override ascii order. See how negative, positive, and zero returns control order, and how toLowerCase and localeCompare handle strings.

Learn how stable sort in JavaScript preserves the relative order of similar items when sorting an array of objects by code, and observe how the original sequence remains after sorting.

Apply JavaScript array filter to remove falsy values and empty slots. Refine the predicate to preserve zero while filtering data from APIs by requiring objects to have an id.

Learn how the map method on an array creates a new, same-length array by applying a callback to each element, such as squaring numbers.

Apply the map function to an array of objects to add a new code property, preserving length, using the spread operator, and explore returning strings for a names list.

Explore map best practices, keeping callbacks pure, avoid mixing map with summation, handle falsy values with checks, and use spread to immutably map over object arrays.

Explore how the array reduce method sums values via a callback using previous and current values with an initial value, yielding a final single result through a clear example.

learn how array reduce behaves without an initial value, where first element serves as the initial value and the callback starts from second element, with sum and square examples.

Compare reduce and reduceRight to understand their callback execution order, left to right versus right to left, and apply the appropriate one based on your business logic in JavaScript.

Learn how indexOf and lastIndexOf find the first and last occurrences of values in a JavaScript array, including from index, case sensitivity, and practical examples.

Learn how array.find and array.findLast use a predicate function to locate the first or last element that satisfies a condition, starting from left-to-right or right-to-left and returning undefined if none.

Explore how the array includes method works with primitive values and why it fails for objects, then use a predicate with find to locate objects by city and country.

Explore const versus let in ES6, emphasizing block scope and one-time initialization. Learn how const prevents reassignments while still allowing internal mutations of arrays and objects.

Explore JavaScript date objects and the get methods to extract year, month, date, hours, minutes, seconds, and milliseconds, including UTC conversions and epoch time.

Explore using set methods to change any part of a JavaScript date object - year, month, date, hours, minutes, seconds, or even set a complete date.

Explore the JavaScript math object, its static constants like pi and sqrt(2), and methods for rounding, floor, ceil, trunc, powers, roots, logs, and min and max with arrays.

Explore how if else in JavaScript conditionally executes code based on boolean results, truthy and falsy values, with examples using numbers, arrays, objects, and rest API data.

Master nested if statements in JavaScript to validate backend data, using truthy and falsy checks to verify presence and essential fields like id and product name.

Explore the conditional (ternary) operator in JavaScript, replacing if-else with a one-line expression that returns passed or failed based on a score, and learn nesting and evaluation of conditions.

Explore how a switch statement supports expression-based cases and function calls to determine if a number is even or odd.

Discover how to loop a one dimensional JavaScript array with a for loop from index zero to length minus one, automatically adapting to changes and handling empty arrays.

Iterate a two-dimensional array with nested for loops, using an outer index and an inner index to access inner arrays and print all values in JavaScript.

Learn why using let in for loops creates a lexical scope, preventing variable leakage and reusability issues, by comparing let versus not using let and illustrating with examples.

Use the for...of loop to iterate over arrays and iterables without indexes, using const for elements and lexical scope; note objects are not iterable, while sets and maps are.

Use for...of to iterate over a multidimensional array, avoiding index hunting, by traversing the outer array's inner arrays and printing elements like 10, 20, 30.

Explore how for..in iterates over object keys, array indexes, and string characters, and learn how adding or deleting properties during iteration affects the loop.

Learn how the do while loop in JavaScript executes the code block at least once, then checks the condition, illustrated by printing 1 to 3 before stopping.

Use labels to name blocks and control flow with break and continue, targeting the nearest loop or a labeled outer loop in nested for loops and blocks.

Explore anonymous functions in JavaScript, learn how to store them in variables, use them with setInterval and setTimeout, and return functions from other functions for flexible composition.

Explore arrow functions in ES6, learn basic syntax, parameter handling, and implicit return, compare with traditional functions, and see practical uses like immediate invocation and setInterval counter.

Understand function hoisting in JavaScript by comparing traditional, anonymous, and arrow functions. Hoisting applies to traditional declarations, but not to anonymous or arrow functions, causing reference errors when called early.

Demonstrate how first class functions work in JavaScript by showing variables holding functions, functions as object properties, and returning or passing functions to operate on numbers.

Explore how function overloading works in JavaScript, showing that JavaScript does not support overloading and that the last function with the same name overrides earlier definitions.

Explore default parameters in ES6, including how undefined triggers defaults and why defaults should come last. Apply these patterns to function calls, destructuring, and handling null or empty values.

Learn that JavaScript functions are objects with properties like length and prototype, and extend behavior by adding properties and methods via the prototype, plus new.target for constructor checks.

Explore how the call method rewrites the this context, enabling functions to run with different objects, using examples from bank accounts, array filtering, and prototype inheritance.

Learn how the apply method differs from call by passing arguments as an array and applying a this context to achieve the same outputs.

Explore how JavaScript's bind method attaches a specific object to a function to set its this context, returning a new bound function for later execution.

Discover how to define and call nested functions inside a JavaScript function, and examine how scope governs access to variables across outer and inner blocks.

Explore closures in JavaScript by turning global variables into local state. Use an immediately invoked function expression to reveal a private counter through an inner increment function.

Explore how recursion uses a function calling itself with an ending condition to avoid infinite calls, illustrated by factorials like 4! 24 and 5! 120.

Explore call stack errors from deep recursion, observe the 9191 limit in Chrome, and guard factorial code by detecting platform limits and returning a safe value with a message.

Execute an immediately invoked function expression to create a private scope, keeping variables from the global namespace and running the code once with an anonymous or arrow function.

Explore how callbacks pass functions as parameters to run code after an operation completes, including asynchronous patterns with setTimeout and examples using anonymous or arrow functions to display results.

Master currying in JavaScript to transform a function into single-argument calls, enabling partial application and creation of specialized helpers such as fixed first arguments for tables and logs.

Explore promise chaining with then blocks and fetch, returning values and handling errors. See practical examples retrieving json from a dummy api, with loading indicators and rendered data.

Explore the callback hell problem in JavaScript, where sequential asynchronous tasks create deeply nested callbacks, making debugging and maintenance difficult and highlighting error handling.

Learn how Promise.allSettled creates a single promise that resolves after all given promises settle, yielding an array of each status and value or reason.

Explore how promise.all differs from promise.allSettled, using examples of parallel promises that succeed or fail; learn to handle results as an array or catch errors when any promise rejects.

Learn to use async and await to run promises in sequence, wait for work one and work two, and handle success or failure with resolve, reject, and catch.

Discover the document object model and how to dynamically change HTML with JavaScript, including selecting elements by id, updating inner HTML, applying CSS styles, and handling events.

Discover where to place script imports in html and how onload window.onload can delay execution, allowing safe dom updates like changing #main-heading innerhtml without errors.

Explore how document.getElementById retrieves an element by id to modify its content and style, and learn to handle missing or duplicate ids safely.

Learn how get element by name returns a node list of elements matching a given name, demonstrated with radio buttons grouped by gender and a clear button to reset selections.

Learn how to use getElementsByTagName to retrieve an HTML collection of elements by tag name, loop through them, and apply style changes such as background color.

Learn to use querySelectorAll with basic selectors—tag, class, id, and attribute selectors—to select elements, iterate over the node list, and apply styles such as background color.

Explore using group selectors with querySelectorAll to style multiple elements by comma separating p, h1, and class or id or pseudo selectors like .special.

Learn to use querySelectorAll with descendant, child, and adjacent sibling combinators to select targeted elements, such as divs and paragraphs, and precisely match p4 and p5.

Learn how to reference a parent element in the document object model using getElementById and the parentElement property, then apply a green background to the parent element.

Learn to access child elements in the document object model by referencing a parent element and using first child, last child, and first/last element child, HTML collection of children.

Navigate sibling elements in the DOM by using the parent and first child, then iterate with next element sibling to collect all city names into an array.

Learn how to dynamically create and append DOM elements with JavaScript, including divs, headings, and paragraphs, and apply classes, IDs, and innerHTML to build articles.

Create and append new list items using document.createElement, innerHTML, and appendChild, then render a dynamic list by selecting the parent with querySelector and iterating with forEach over an array.

Create a script element with document.createElement and load it dynamically to run an animation script, improving initial performance by loading the library on demand.

Master creating and appending new elements with document.createElement and innerHTML, moving existing items between incomplete and completed lists using appendChild, and understanding its return value.

Learn to read complete HTML with the inner HTML property, compare it to inner text, and inspect h1, article, and city lists, while noting future security considerations for setting HTML.

Learn how innerHTML updates page content, including text and HTML tags, by building dynamic HTML from JavaScript for lists like cities and articles, with a note on sanitization.

Explore the security issues with innerHTML, including malicious code and alerts; learn to sanitize input and use safe HTML methods when displaying third-party content.

Explore how setHTML sanitizes user input to safely render HTML, avoid script execution, and apply customized sanitization across modern browsers with attention to compatibility.

Use document fragment to batch DOM updates, building list items in a temporary fragment and attaching once to the DOM, improving performance and avoiding flicker.

Explore the before method to insert a heading before a paragraph in the DOM, using createElement and setting the heading text to demonstrate dynamic content insertion.

Demonstrate adding multiple list items before a target JavaScript element by looping an array, creating li elements, and using the before operation with a spread rest approach.

Explore how before() inserts a text node before an h1 in the DOM, using 'latest' and spacing adjustments. Learn the difference between children and childNodes.

Build an array of technologies and insert multiple list items after a JavaScript element using the after method with a spread array, updating the DOM in one operation.

Explore how the after method targets text nodes and demonstrates differences between child elements and child nodes, using querySelector to select a heading and append '2025' after 'technologies'.

Explore cloneNode in JavaScript to create a deep clone of an element and all its descendants, compare shallow vs deep clones, and manage copied IDs when appending to the DOM.

Compare the paint method and appendChild for DOM updates, highlighting batch node addition to boost performance while appendChild adds one node and returns it.

Learn the prepend method to add multiple nodes or strings to the top of a list, using spread syntax to update a ul with new li elements.

Learn how the attributes property exposes a named node map of an element's attributes, with id and type, and how to loop through them using has attribute and has attributes.

Learn how the dataset property exposes all developer-specific data attributes prefixed with data, converts them to camelcase, and enables iterating keys and values as a simple stringmap.

Learn how to use setAttribute to add or update HTML element attributes, including classes and data attributes, with examples showing value handling and case normalization.

Learn to read attribute values with getAttribute, e.g., id and type, and observe lowercase normalization. Use hasAttribute for presence checks; missing attributes return null, while disabled yields an empty string.

Explore how the window object serves as the global object in JavaScript, turning global variables and functions into properties and exposing browser features like location, navigator, history, cookies, and alerts.

Learn to open a blank window at 200x200, then resize it dynamically with resize two or resize by, using setTimeout and setInterval, and control size with plus and minus buttons.

Move a window by precise x,y coordinates using move by and move to, and center it by calculating screen width and height. Understand limitations with window.open and single-tab scenarios.

Close a window opened with window.open using an on close handler that calls window.close; a button opens and closes the window, while windows not opened by window.open cannot be closed.

Use window.prompt() to collect user input with a message, returning a string or null on cancel. Learn to handle the result, convert to a number, and note its synchronous behavior.

Learn how setTimeout introduces asynchronous behavior in JavaScript by executing a callback after a delay, illustrated with console logs and how clearTimeout cancels a scheduled task.

Discover how setTimeout can call a function after a delay and pass any number of arguments with rest parameters.

Explore how setInterval runs a function and updates a timer counter, stopping with clearInterval via an interval id. Learn to prevent multiple intervals by checking and resetting the id.

Navigate with href by using the location.rf property as an alternative to assign, showing how updating the RF attribute triggers sign in background for page navigation.

Learn to detect a user's country via IP address or a rest api and redirect to country-specific sites like India or US, with a global fallback.

Learn to use the URL search params interface to read, iterate, and manipulate query strings: access keys and values, append, delete, has, get, get all, and convert strings to numbers.

Explore the navigator object in window to inspect browser state, platform, memory, network info, and capabilities, including deprecations, cookies, device memory, geolocation, PDF viewing, and user agent details.

Master clipboard events in JavaScript by detecting cut, copy, and paste actions, using event listeners and preventDefault to restrict operations on sensitive fields like password inputs, with practical examples.

Explore the screen object in the window, learning how height, width, available height, color depth, and orientation determine display capabilities and how to detect changes with onchange.

Explore a four-page example that uses the browser history API to implement back and forward buttons. The lecture demonstrates history.back and history.forward with onclick handlers across pages.

Explore how the history.go method uses a delta to jump between pages, with negative values moving backward and positive values moving forward.

Learn to continuously track a user's location with the geolocation API using watchPosition, handle the callback, and store the returned watch ID to stop with clearWatch.

Explore how Ajax in JavaScript updates a page section in the background using XML or JSON, without reloading the entire page and updating the DOM.

Learn to display live scores using ajax with response xml, extracting runs and wickets via querySelector and innerHTML, and auto update the page with setInterval and dom interactions.

Read json data via ajax, convert the response text to a javascript object with json.parse, and update the dom to show runs and wickets.

Learn the readyState property of the XML Http request object, tracing its 0 to 4 states—from unsigned to done—using on ready state change.

Learn to use the response type property to request data as json, xml, or document, observe the default string output, and handle null when formats mismatch.

Learn how to set a timeout for an xml http request, cancel unfinished requests after a specified period, and handle ontimeout to inform the user and close resources.

Learn how ajax tracks ready state changes to read response headers, identify content type and mime type, and handle json data with get all response headers and get response header.

Add an abort feature for in-progress ajax uploads with a cancel button that triggers the abort function on the request object, and toggle its visibility during upload and after completion.

Set a timeout for file uploads via Ajax, use an on timeout handler to abort, show progress, and report completion or cancellation with done/onload and loaded/total.

Learn how to submit data with Ajax by building a newsletter signup form that posts name and email using form data, and ensure inputs include a name attribute for payload.