Learn Modern JavaScript: Getting Started

Learn how JavaScript powers the web as a mature, flexible language used from HTML pages to backend servers with Node.js, Express, MongoDB, and JSON.

Trace the history of JavaScript from its 1995 origin to ECMAScript standards, from ES1 to ES6, and learn how the modern language evolved across browsers.

Learn the essential tools for starting JavaScript: a text editor and a browser JavaScript engine, with the Chrome browser used for testing and exploring examples.

Use the JavaScript console in Chrome developer tools to view output without altering the page, via console.log. Access the console with inspect, enter JavaScript, and test immediately.

Master JavaScript coding conventions by noting case sensitivity, the recommended use of semicolons, and readable whitespace; adopt camelCase for variables, proper indentation, and clear single-line and multi-line comments.

Create and link a JavaScript file to an HTML document, then declare first name and last name variables and log them to the console with a space in between.

Explore how types and values drive JavaScript by manipulating values with variables, and differentiate strings, numbers, booleans, undefined, null, symbols, and objects, including primitive types versus objects.

Learn how to use variables as containers for data in JavaScript, declare with var, assign values, update them, concatenate strings, and perform arithmetic in the console.

Learn how to declare variables with let in modern JavaScript, compare let to var, and understand how scope determines where a variable is accessible in your code.

Explore JavaScript operators, over 30 in total, from increment and modulo to the type of operator and strict equality, and learn when to use strict versus loose comparisons.

Understand JavaScript hoisting by watching how variables sit in memory before execution, why undefined appears, and how declaring variables at the top with the var keyword prevents issues.

Learn how JavaScript objects store multiple values as properties, methods, and arrays using name-value pairs and dot notation; then access data with console.log and built-in date and math objects.

Explore the JavaScript Math object, a predefined set of numeric utilities accessed via dot notation, including random, round, floor, ceil, min, and max.

Master creating a date object with the date constructor and new keyword, observe zero-based month values, and use get time to compute elapsed milliseconds, seconds, and minutes.

Learn how to test the start and end of a string in JavaScript using startsWith and endsWith on the string object wrapper, with position or length parameters and browser support.

Link the JavaScript file to the HTML file with a script tag to wire code. Print a random number from zero to ten to the console using Math.random and Math.round.

Attach the JavaScript file to the HTML page and calculate the hours since January 1, 2000 using date objects, milliseconds, and Math.floor to print full hours to the console.

Declare variables and use the if conditional with strict equality to test undefined values, then apply modulus to determine even or odd numbers and log results to the console.

Learn how to use the if conditional to assess voting eligibility with age, using greater than or equal to 18 and a can vote boolean, and explore true/false outcomes.

Explore truthy and falsey values in JavaScript and how conditional expressions determine truth or false, with examples like undefined, null, zero, -0, empty strings, and false.

Explore string conditionals by using string object methods such as to lowercase, to uppercase, trim, index of, slice, and substring to compare answers and handle case, spaces, and zero-based positions.

Learn how to handle multiple conditions in JavaScript by chaining else if statements to map a date's day number (0–6) to the actual weekday and print it with console.log.

Explore the switch statement as an alternative to if-else, define case blocks for each day of the week, and use break to stop execution; learn when switch improves readability.

Use conditionals and nested if statements to sort three numbers—6, -5, and 2—from largest to smallest, and output the results to the console.

Explore how to use the for loop in JavaScript, with initialization, condition, and modification, and compare it to the while loop. See examples that print 1–10 and reverse a sentence.

Use a for loop between one and one hundred to identify multiples of six, using the modulus operator and a block-scoped let variable to log each result.

Explore the dry code principle in JavaScript, learning to avoid repetition with loops and control structures. Practice writing maintainable JavaScript by applying dry concepts in loop exercises.

Practice implementing a Fibonacci sequence in JavaScript with a loop of your choice, starting with zero and one, up to a thousand, storing and displaying the sequence in the console.

Learn how dynamic arrays grow and shrink by adding elements with indices, push, and unshift, and removing with pop and shift, while tracking length and undefined gaps.

Discover how to loop through arrays with a for loop, sum grades, compute the average using the array length and zero-based indexing, and print the result.

Explore core array methods in JavaScript, including toString, join, reverse, sort, indexOf, and lastIndexOf, and learn how they modify arrays and locate values.

Learn how to modify arrays with the splice method in JavaScript, removing or adding elements by index and count, with the method mutating the original array and returning removed items.

Remove duplicates from a fruits array by sorting with the sort method, then iterate backward to compare adjacent items and splice out duplicates, logging results.

Explore how functions structure JavaScript programs, reduce repetition, isolate code to prevent collisions, and enable reusable, modular behavior through methods and frameworks.

Explore function declarations and function expressions in JavaScript and learn how hoisting affects their behavior. Compare their usage, the role of variables, and when to prefer expressions over declarations.

Illustrates how functions accept arguments via parameters in declarations and expressions, sums two numbers, and logs the result; compares missing-argument handling using conditionals and default parameter values.

Create a reusable JavaScript function that generates a random number between min and max using Math.random, apply floor or ceiling for accuracy, and return the value instead of logging.

Learn how the return statement makes a function reusable by returning values and letting the caller use the result, such as a random number, while handling undefined inputs and refactoring.

Learn how scope defines variable availability, compare var and let behavior, and see how global, function, and block scopes affect hoisting and access in for loops.

Explore JavaScript scope with nested functions, showing how variables resolve from inner to outer environments and how not using var/let can redefine a global variable.

Explore arrow function syntax in JavaScript, compare it with traditional functions, and identify when to use them in high-order functions for cleaner, compact code with optional braces and return.

Create a JavaScript function that returns a fibonacci sequence as an array for a given length, using a for loop and testing with multiple numbers.

Define a single-line arrow function that accepts a number and returns whether it is even or odd using modulo and the ternary operator, with tests for 6 and 7.

Discover how objects combine data and functionality, using a user object with first name, last name, birth date, and methods like full name, increment age, and login check.

Understand how the this keyword refers to the invoking object or to the global object in JavaScript, and how the global object relates to the window and the global environment.

Use the delete operator to remove properties from objects and, with arrays, understand that deleting elements can create sparse arrays.

Discover how to access properties with square brackets in JavaScript, enabling dynamic property retrieval via variables, and build a formatted address from an object for display.

Learn that objects are passed by reference, not copied: variables point to the same object, so changes affect all references; create a separate copy by assigning to a new variable.

Explore how object prototypes power JavaScript inheritance by tracing prototype chains, how objects inherit properties from their prototypes, and how arrays and functions rely on their prototypes.

Define and extend prototypes in JavaScript with Object.create, then observe how changes affect all inheriting objects and how prototype chains form with object literals and constructors.

Explore constructor functions in JavaScript, the new keyword and this, prototypes, and how objects initialize and implicitly return, with car and question constructor examples.

Create a game character object in three parts (object create, constructor, and class) with defaults for speed, strength, hit points, and a damage per second method.

Explore building a constructor function for a game character in JavaScript, using conditional property assignment for speed, strength, and hit points, with a prototype damage per second method.

Explore a class definition for a game character, set default prototype values for speed, strength, and hit points, and implement a damage per second method on the prototype.

Understand the document object model, or dom, as a live representation of HTML you can read and modify with JavaScript, using parent, child, and sibling relationships.

Learn to use browser devtools to inspect the DOM, navigate the Elements panel, and edit HTML and styles in real time.

Master the two-step DOM change process by selecting a DOM element with JavaScript and then updating its properties, such as color, through the element's style attribute.

Learn how to inspect DOM nodes using the console.dir command to view a node's attributes, properties, and styles, and discover what you can change with JavaScript.

Learn how to select DOM elements using CSS selectors with querySelector and querySelectorAll, targeting by tag, id, class, and relationships like child and descendant.

Access and manipulate form elements using dot syntax or the get elements by name method, retrieving and setting values for inputs, radio buttons, and selects in a sample html form.

Traverse dom in modern browsers using first element child, last element child, and children to work with elements while avoiding text nodes, using next and previous element siblings to navigate.

Discover how the HTML5 class list API adds, removes, and toggles classes on a node while preserving existing ones. Use contains to check class presence and length to count classes.

Learn how to modify html content using inner html, outer html, and insert adjacent html, with the four insertion points and query selectors, plus practical examples.

Learn how to add new nodes to the DOM with createElement, createTextNode, appendChild, insertBefore, and insertAdjacentHTML, including creating text and setting attributes.

Apply dynamic DOM manipulation to populate a table from a data object using a fill table function, querying table headings and cells and pairing methods with descriptions.

Master the two-step process: select a DOM node and attach an event listener to respond to user actions like clicks and scrolls, using addEventListener or event properties.

Explore creating and wiring event handlers on a simple page, triggering h2 color changes on click and image swaps on mouseover, with multiple listeners and timed delays using setTimeout.

Learn how a ul listens for double click events to manage its li children using event delegation, filtering element nodes, and turning matching items green, ignoring text nodes.

Explore JavaScript events with a hands-on event reporter page, studying mouse move, click, and key down events and how to add, remove, and toggle listeners.

Explore jQuery, a widely used JavaScript library that streamlines DOM selection, content manipulation, event handling, and cross-browser compatibility via a single global function.

Explore ECMAScript 2016's two main features—array includes for membership checks and the exponentiation operator for powers—plus real-world usage and cross-browser, node, and iOS support.