Guide to learning JavaScript

Explore how to create and use variables in JavaScript, including strings, numbers, and booleans, with the assignment operator, camelCase naming, and multi-variable declarations.

Explore how arrays store multiple values in a variable using literals and constructors, access items by index starting at 0 with console logs, and create blank arrays with five slots.

Learn to work with arrays in JavaScript using push to add items, inspect length, and compare array types across declarations, with console outputs illustrating results.

Explore advanced JavaScript arrays, mastering push, pop, shift, indexOf, splice, sort, reverse, and join while working dynamically with array values and console logs.

Explore JavaScript arrays by concatenating and joining elements with custom separators, converting to strings, and using slice to extract portions for dynamic, flexible code.

Explore how to use objects to store multiple values with named keys in JavaScript, create and populate objects, and access properties using dot and bracket notation.

Learn to create JavaScript objects with a constructor style using new, passing three arguments to initialize first name, company, and age, and observe independent instances and function-driven updates.

Master the core of JavaScript by using built-in and user-defined functions, exploring scope, global and local variables, and how to pass arguments and return values.

Learn to define and call JavaScript functions, pass arguments, and inspect results with console.log. Explore dynamic function behavior, return values, and building blocks for calculations.

Explore how JavaScript functions accept arguments, perform calculations, and return results, using console.log to display outputs; then create and update objects through functions, and distinguish global versus function scope.

explain how scope within functions differentiates global and local variables, illustrate why undefined appears before declaration, and emphasize declaring variables before use to ensure correct console outputs.

Learn the dom and how the window and document objects expose page content to JavaScript. Understand script placement and event listeners that load the body content for dynamic interaction.

Explore the document object model (DOM) and learn how JavaScript accesses and manipulates HTML elements, using Chrome DevTools to inspect elements, event listeners, and the DOM tree.

Learn to select DOM elements using getElementById and other selectors, then manipulate innerHTML and innerText, update content, and attach events to create interactive web pages.

learn how to select DOM elements by class, id, and tag name using JavaScript, access multiple elements with getElementsByClassName or getElementsByTagName, and manipulate them via the document object.

Learn to select and update web page content using the document object, querySelectorAll, getElementById, and innerHTML.

Select the image by id with getElementById and update its src. Watch DOM rewrite from 400 by 200 to 100 by 100, and set the button background color to red.

Learn to create interactive buttons with the JavaScript DOM on click by selecting elements, updating styles like yellow background, and wiring on click handlers to run functions and update output.

Learn to use mouse event listeners to hover over an image, trigger mouseover and mouseout actions, and inspect the event object, including clientX, to update styles.

Learn to register event listeners with addEventListener, attach multiple handlers, and remove them, comparing to on click while noting cross-browser compatibility and event information handling.

Learn to select multiple elements with querySelectorAll and attach event listeners to each button by looping the node list by class or tag, and handling dynamic lengths.

Learn to access and traverse DOM elements with getElementById and querySelectorAll, loop through child nodes, log names, and add click listeners to divs.

Learn to dynamically create new DOM elements with JavaScript by wiring an event listener, using createElement and createTextNode, and appending nodes to update the page.

learn to implement client-side form validation with JavaScript by handling the form submit event, preventing default submission, and validating name, email, and message fields using document.getElementById and custom checks.

Explore JavaScript fundamentals by declaring variables, understanding undefined and not defined errors, and how strings and numbers interact with plus and division, including concatenation and not a number.

Explore JavaScript operators in detail, including assignment, arithmetic, comparison, and logical operators. Learn to parse input values with parseInt for numeric calculations in the DOM.

Explore JavaScript operators, including increment, decrement, and remainder, and apply them to update values and create alternating row colors in a dynamic list.

Learn how the JavaScript ternary operator sets status based on A > B and updates output with a button-driven example, with a preview of logical operators.

Explore how JavaScript logical operators combine boolean values with and, or, and not, for conditional logic. Learn about built-in methods like parseInt to convert strings to integers.

Explore the built-in Math methods in JavaScript, including Math.ceil, Math.floor, and Math.random, and learn to scale 0–1 results to 0–1000 or 1–1000 for dynamic code.

Create a JavaScript date object and extract day, date, month, year, and time using getDate, getDay, getFullYear, and getTime; the timestamp shows milliseconds since 1970.

Explore JavaScript conditions by using if, else if, else, and the ternary operator, and compare values with strict equality (===) versus type differences, also covering switch and case.

Explore how to build conditions in JavaScript using comparison operators, if/else if/else, and parse integer, and combine logic with and/or to control output; preview switch statements.

Explore how the switch statement streamlines multiple conditions in JavaScript. Learn to use cases, breaks, default, and parse integer to update a container's inner text.

Explore four JavaScript loops, focusing on the while loop, its condition and increment, and how input values update a container with dynamic inner HTML.

Explore the do loop and its while condition to repeat until A is less than ten, outputting content to a container with event listeners.

Explore how to set up a JavaScript for loop by defining the initial value, establishing a stopping condition, and incrementing the index to control repeated execution.

Explore how JSON, an easy alternative to XML, supports data in JavaScript and learn to parse JSON strings into usable objects, then manipulate and display data in the browser.

Explore parsing JSON data in JavaScript, access multiple objects in a list, and loop through items to extract first and last names, then output results to HTML.

Explore how to load external JSON data with Ajax in JavaScript by creating an XMLHttpRequest, opening a connection, and sending a request to fetch and parse JSON.

Learn to build and debug AJAX calls, monitor readyState changes, and use responseText to parse JSON data. Iterate over dynamic results and render names from the data into the page.

Pull data from an external json file using ajax and link data in JavaScript. Access and manipulate properties such as age and eye color to drive web pages.

Learn how to trigger and manage AJAX calls with a button, monitor readyState changes, verify status 200, and handle response text, including server-side PHP integration.

Explore how a server back end creates dynamic responses with PHP echoes, outputs the date, updates the page by targeting the output element with getElementById.

Explore sending data from JavaScript to a server using ajax, starting with a simple get request and later comparing get versus post for security.

Learn how to post data securely to a server using ajax, set the correct content-type header to send form data, and enable JavaScript to interact with servers and databases.

Update a form to support multiple inputs by adding a name field and an age number input, then send data via ajax to a server and handle the response.

Explore JavaScript closures and scope chains to see how inner and outer functions retain access to variables across global and local scopes, enabling private variables and persistent state.

Count vowels in a string with a JavaScript function, displaying total length, vowel count, and other characters, while updating results via an input and button.