JavaScript For Absolute Beginners

Open Google Chrome and access the developer tools to launch the console. Use console.log to print hello world, explore detaching or docking the console, and try console.clear to clear it.

Master JavaScript arithmetic by performing addition, subtraction, multiplication, division, and modulus on integers and decimals; apply the power operator, square roots, and order of operations.

Learn how variables store data in JavaScript, declare with let, assign values (numbers and strings), use the assignment operator, and log results to the console.

Create variables for physics, chemistry, and maths in JavaScript, perform arithmetic to sum and divide for an average, and store the result in an average variable.

Explore implementing JavaScript data types by defining numbers, strings, and booleans with variables; learn numeric and decimal values, string quotes, and string concatenation, including phone numbers as strings.

Explore undefined and null in JavaScript, mastering variable declarations and assignments, and distinguish between undefined and null while applying these concepts to basic data types.

Learn how to declare constants with const in JavaScript, compare const with let, and understand that const requires inline initialization and cannot be reassigned, while let allows later assignment.

Learn to use the math object in JavaScript to perform number operations, access constants like pi, and apply the absolute function, power function, square root, round, floor, and ceiling.

Explore using the math object random function to generate decimals from zero to one, convert to integers via multiply and round, and apply the maximum and minimum functions.

Learn how to work with strings in JavaScript, including concatenation with the plus operator and spacing; explore string length, uppercase and lowercase conversions, and replace operations.

Explore how string indexing works in JavaScript, with zero-based positions, accessing characters via square brackets, and using length minus one to obtain the last character.

Explore string index methods in JavaScript, including substring, slice, and split, to extract parts of strings, specify start and end indices, and split data into arrays.

Learn how to create strings with template literals in JavaScript using backticks, embed variables with ${}, and evaluate expressions inside the string instead of single or double quotes.

Explore the difference between assignment and equality operators in JavaScript, using double equals for value comparison and triple equals for strict type and value checks.

Explore JavaScript comparison operators, including greater than, less than, greater than or equal to, less than or equal to, and not equal to, and see how they power conditional statements.

Discover type conversion in JavaScript by using typeof to identify variable types and converting strings to numbers or booleans with parseFloat or parseInt, ensuring arithmetic works instead of string concatenation.

Learn to write JavaScript in a separate file and link it to an HTML page with a script tag; verify the connection using console logs.

Learn to write multiple lines of JavaScript in a file and log name and marks with console.log, then configure the code editor theme by applying monocoque in VS Code.

Learn how comments in JavaScript improve code readability by explaining lines and blocks; use // for single-line and /* ... */ for multi-line comments in team projects.

Follow along to solve coding challenge part 1: calculate a discounted price from a list price and discount percentage, then log the result on the console in JavaScript.

Explore computing the circle area in JavaScript by applying pi r squared, using a radius of 50, displaying a message with the result in square meters and removing decimals.

Learn how conditional statements in JavaScript control code flow by evaluating a condition to true or false and executing the if or else block.

Implement the if conditional statement to decide license eligibility by age, using age 18 to print either you are an adult and can apply for license or please try later.

Learn to compare strings in a JavaScript if statement by checking username against 'admin' to grant or deny access. Use equality operators and else logic to display the proper message.

Learn how to use booleans in if conditionals with JavaScript by simulating a login flow that displays welcome or please log in to continue.

Learn how else if works by evaluating a second condition after a false first condition, within an if/else flow, and how multiple else if blocks can chain before an else.

Explore how to use if and else if statements in JavaScript to control a driver's license application flow, determining eligibility for a driver's license or learner's license based on age.

Learn how to implement nested if statements to verify multiple conditions, such as age over 18 and percentage over 70, using an inner if inside an outer one.

Learn how switch statements simplify multi-condition checks in JavaScript, replacing long if-else chains with cases for each day of the week and break to prevent fall-through.

Apply the and operator in JavaScript to combine multiple conditions within a single if statement, using examples like age > 18 and percentage > 70 to determine eligibility.

Master the while loop in JavaScript to repeat code using a counter and a condition, so you can print Hello, world five times without duplicating code.

Learn the do while loop in JavaScript, see how it differs from a regular while loop, and understand that it runs the code once before checking the condition.

Learn how a for loop consolidates initialization, condition, and increment from a while loop, and compare their syntax. See a practical example that prints a message five times.

Explore how to use an if-else statement in JavaScript by checking height against 175 cm to determine if a candidate qualifies to apply for the team.

Explore a JavaScript nested if challenge that checks high school marks, aviation exam scores, and age to determine pilot license eligibility, printing specific rejection reasons.

Create multiplication tables for three, seven, and nine using while, do while, and for loops, iterating from one to ten and logging each product.

Create an array of numbers, loop through it, detect odd numbers using the modulus operator, and log the odd values.

Learn how JavaScript arrays store multiple values in a single location, grow and shrink dynamically, hold mixed types, and use zero-based indices to access each element.

Learn how to create arrays in JavaScript using array literals, access elements by index, modify values, and explore length and mixed data types in a single array.

Learn how to use the spread operator to copy and insert elements from one array into another, illustrated with fruit arrays and the three-dot syntax.

Learn how to use the for...of loop to iterate over array elements without indices, using a fruits array and console.log to print each fruit in JavaScript.

Master array manipulation with push, pop, shift, and unshift. Add items to the end or start, remove from the end or start, and return the removed values.

Learn how to locate the index of elements and remove them from arrays using indexOf and splice in JavaScript. Practice practical fruit-based examples to solidify these array operations.

Learn how to concatenate arrays using the concat method to join multiple arrays, including arrays of different types, while preserving originals.

Learn to reverse arrays and strings in JavaScript with split, reverse, and join. Understand that reverse mutates the array, while split creates an array and join returns a string.

Explore objects as composite values that store multiple properties for entities like a student, using key-value pairs, dynamic properties, and ways to create, access, and modify them.

Learn to create objects with object literals in JavaScript, define properties like name, school, and contact, and access them via dot notation or square bracket notation, then log the object.

Discover nesting objects in JavaScript by placing an engine object inside a car, define engine properties such as cubic capacity and brake horsepower, and access properties using dot notation.

Learn to set and change properties on a JavaScript object by creating a student with name, school, and contact, then update values using dot and bracket notation.

Learn how to avoid property access errors by checking if a property exists on an object before accessing it, using if statements and conditional logging.

Learn how to delete properties from JavaScript objects using the delete operator, including deleting existing properties like student.school, handling non-existent properties, and confirming removal.

Serialize JavaScript objects by converting them to strings with JSON.stringify, then restore them with JSON.parse. Use this for saving object state to memory, database, or a file.

Learn about functions in JavaScript: a reusable block of code defined with a function declaration and executed via function calls.

Define a function in JavaScript with the function keyword, assign a name, use parentheses for parameters, enclose logic in braces, and call the function to execute.

Learn how to pass arguments to functions in JavaScript to make them dynamic, accepting names and visitor numbers, and print personalized greetings with function calls, parameters, and console.log.

Create a reusable area of a circle function in JavaScript that takes a radius and computes pi times radius squared. Log the result to the console for different radii.

Learn to create a function that returns a value by summing three subject marks (physics, chemistry, maths), using return, and capturing the result for display.

Learn why functions should return a value and how to pass that total to a percentage calculator, enabling chaining of total marks and percentage computation in JavaScript for absolute beginners.

Discover how function expressions create functions by assigning a function to a variable, call them like regular functions, and return values such as the sum of two numbers.

Learn how to create arrow functions in JavaScript as a third way to define functions, using const, compare with function declarations and expressions, and write concise one-liners.

Learn how to create nested functions in JavaScript, using an inner calculate total to compute an average. See how the inner function is called and how the average is logged.

Explore the differences between functions and methods, showing how a function becomes a method when assigned to an object's property, and how to call it with the object dot method.

Learn how the this keyword in JavaScript refers to the object, enabling access to its properties and methods, even when the object's name changes.

Understand hoisting in JavaScript: function and variable declarations are kept in memory, allowing calls before declaration and use before declaration (undefined until initialization). Note that function expressions are not hoisted.

Learn how in JavaScript functions act as values that can be assigned to variables or stored in object properties, passed between functions, and invoked via object methods like add.

Learn how default parameters in JavaScript assign fallback values to function arguments, allow overriding with provided values, and avoid getting NaN by providing default values.

Explore function scope, where variables declared inside a function stay local and cannot be accessed outside, illustrated with a price variable whose value differs inside and outside the function.

Explore lexical scope in JavaScript by showing how inner functions access outer variables. Observe how inner variables can shadow outer ones and how scope resolves values.

Explore callbacks in JavaScript by passing a function into another function and executing it inside. See a hello example where a twice function calls hello twice.

Create a function that accepts weight and height and returns BMI using weight divided by height squared. Convert it to an arrow function and log the BMI to the console.

Learn to implement callbacks in JavaScript by calculating salary from hours worked and hourly rate, then using a tax percentage callback to show tax, earned salary, and salary in hand.

Implement a simple banking system with global variables and functions in JavaScript, including balance and account number, deposit and withdraw routines with fund checks and messages.

Explore how JavaScript powers interactive web pages by learning the document object model (DOM) and the DOM API, including HTML structure, head and body, and accessing elements.

Access elements using the getElementById method in the document object model, assign IDs like heading and subheading, and update their content; changes are temporary and the first match is returned.

Learn how to access HTML elements using getElementsByTagName and getElementsByClassName, retrieve multiple elements with a tag name, and select the first element with index 0 to modify content.

Learn how to manipulate HTML content with innerText, textContent, and innerHTML, compare what each returns, and see how to add HTML versus plain text in a list using DOM methods.

Learn how to use the querySelector and querySelectorAll methods to access elements on the DOM using type, class, and ID selectors, and to handle single or multiple matches.

Explore the parent and child nodes, using a div as a container, and learn to access the parent from a child with querySelector and parentNode, plus firstElementChild, lastElementChild, and children.

Learn to identify and traverse siblings in the DOM by selecting the first list item and using nextElementSibling in a loop to access all siblings.

Learn to create and insert HTML elements using JavaScript with document.createElement, textContent, and appendChild, and understand page load order when dynamically adding content.

learn how a document fragment acts as a lightweight container to build elements off the main DOM, then attach the fragment to the page to boost performance.

Learn to insert a new child before a given node inside a parent using the insert before method, and simulate insert after with the next sibling and create elements.

Learn to add items to lists with append and prepend, create elements with document.createElement, set textContent, and attach via the parent node's append, prepend, or appendChild.

Learn to replace and remove a child node in a parent by using replaceChild and removeChild, selecting the node with querySelector, and creating a new node with document.createElement and textContent.

Learn how to clone DOM nodes using the cloneNode method, including cloning with and without child nodes, and appending the cloned node to the document body.

Explore how html attributes map to dom properties, with id and class becoming properties in the document object model. Practice accessing and manipulating these attributes via javascript.

Learn how to use the setAttribute method to change or add attributes like id and class on DOM elements, using querySelector to target elements.

Learn how to use the getAttribute method to read attributes like id and class from a heading element. Use hasAttribute to check existence and guard access with a conditional.

Learn how the remove attribute method deletes a specified attribute from an element, such as removing the id and class attributes from an h1 heading.

Learn to manipulate an element's style attribute using JavaScript, applying inline styles and DOM methods to change color and background color of an H1 heading.

Learn to manipulate an h1 element's classes with JavaScript using the document object model and querySelector. Add, remove, replace, and check classes with classList to control styling and access classes.

Discover how DOM events make web pages interactive by responding to user actions like clicks. Learn to use event handlers to log to the console and update headings with innerHTML.

Learn why inline events in HTML are discouraged and how to move event handling into a separate JavaScript file using DOM Level zero and event listeners for reliable, multiple handlers.

Learn how to use the addEventListener method to attach a click event to a page element, listen for events, and execute a callback that logs output.

Learn to handle mouseover and mouseout events in JavaScript, replacing click handlers to track cursor entry and exit, and update the element text and color accordingly.

Build a simple counter using DOM and DOM events by wiring two buttons to increment and decrement a displayed count, updating the value with event listeners and dynamic DOM updates.

Build a functional simple interest calculator by reading inputs with query selector, computing SI as P × years × rate ÷ 100, and displaying the result on button click.

Build a functional to-do app by turning a Bootstrap-enhanced HTML layout into interactive features, wiring the input and add button and rendering list items.

Access the unordered list with the list group class, then append items to the to-do list and test adding tasks. Plan to attach a done button to remove completed items.

Add a delete button to todo items using createElement and appendChild. Style with bootstrap classes to align tasks on a line and prep a click-to-remove feature for the next lesson.

Attach the delete button to each list item and append the item to the list after creation. Add a done button listener to remove items; save with local storage.

Explore object oriented programming in JavaScript, how classes create objects with properties and methods. Compare object oriented and functional programming using a student example to show data display.

Explore functional programming by saving student and teacher data and displaying it with a display function and console logs, then examine scope pitfalls and the shift toward object oriented programming.

Learn how to implement object oriented programming in JavaScript by creating student and teacher objects with properties and display methods, using this, and comparing it to functional programming.

Learn how to use JavaScript classes to create multiple objects from a class, using a constructor to initialize id, name, and marks, and the new keyword to instantiate student objects.

Learn how to add methods to a class in JavaScript, create and invoke methods like display and hello on student instances, and understand that methods belong to objects.

Explore inheritance by defining a parent class with properties and a method, then using extends to create a child class that inherits the last name and display method.

Explore how to implement inheritance in JavaScript by defining a shared member base class, extending student and teacher classes, and using super to initialize common properties and methods.

Discover how JavaScript originally creates objects with constructor functions, using this to set properties and methods, and instantiate with new, before examining its limitations.

Learn how to use the prototype property to add a method to a constructor, making the method share across all instances for memory efficiency and enabling future inheritance.

Discover asynchronous JavaScript and learn how to wait for events using callbacks, promises, and async keywords.

Explore how callbacks enable asynchronous programming in JavaScript using setTimeout and setInterval to run functions after delays and at intervals, with clearInterval to stop timers.

Learn to build a countdown timer using setInterval and clearInterval, updating a time value every second, stopping at zero, and displaying the countdown on a web page.

Learn how promises in JavaScript represent the result of asynchronous computations, including pending, fulfilled, and rejected states, and how to chain callbacks to handle success or errors.

Create a promise with new Promise and an arrow function, handle resolve and reject, use status to determine fulfillment, and attach then and catch to log success or failure.

Compare callbacks with promises to understand asynchronous JavaScript. Learn how promises replace nested callbacks in sequential transactions by returning a promise and handling resolution.

Learn how to replace callback hell with promises by converting a transact function into a promise with setTimeout delays, using resolve and reject, and chaining then calls.

Explore a banking transaction example using promises, splitting the flow into functions: validate the user and deduct that amount, with the first returning a promise that resolves with the balance.

Implement a withdraw function that returns a promise, checks balance, and resolves with the new balance or rejects for insufficient funds. Chain then and catch to handle success and errors.

Learn how to implement a JavaScript range slider with min, max, and initial values, capture input via an event listener, and log updates for a simple interest calculator.

Build a slider-based simple interest calculator in JavaScript for absolute beginners, part 2, using a bootstrap CDN, with sliders for principal, years, and rate, and a live principal display.

Build a slider-based simple interest calculator by adding fields for principal, years, and interest rate, wiring event listeners, and calculating simple interest and monthly EMI.

Complete the slider based simple interest calculator by calculating interest, total amount, and EMI, updating HTML fields, wiring event listeners, and ensuring correct numeric calculations.

Learn how to use local storage in the browser to save and retrieve key-value data, persist across refreshes and tabs, using setItem, getItem, removeItem, and clear.

Build a mini shopping cart by storing products in local storage, using an input and add button to create item objects and persist the cart with JSON.stringify.

Display cart items from local storage on the homepage by parsing the stored string into an array and rendering each product name in a list.

Build a mini shopping cart using local storage by adding price and quantity fields, updating the cart display, and merging duplicate items to increment quantity.

Handle duplicate cart entries in a mini shopping cart by updating existing product quantities in local storage, using a for loop and integer casting to persist changes.