Adaptive

Learn JavaScript Basics

Read the notes, then try the practice. It adapts as you go.When you're ready.

Session Length

~17 min

Adaptive Checks

15 questions

Transfer Probes

Lesson Notes Key Concepts Concept Map Worked Example Start Adaptive Practice

Lesson Notes

JavaScript is the programming language of the web. Every modern website uses it to create interactive, dynamic experiences -- from dropdown menus and form validation to real-time chat applications and complex single-page apps. Originally created in just 10 days by Brendan Eich in 1995, JavaScript has evolved into one of the most widely used languages in the world, running not only in web browsers but also on servers (Node.js), mobile devices, and even desktop applications.

Learning JavaScript begins with understanding variables (declared with let and const), data types (strings, numbers, booleans, arrays, objects), and functions -- including the modern arrow function syntax. Control flow (if/else, loops) determines how your program makes decisions and repeats actions. But what makes JavaScript uniquely powerful for web development is its ability to manipulate the Document Object Model (DOM): the browser's structured representation of a web page. With DOM manipulation, you can dynamically change text, styles, structure, and behavior of a webpage in response to user actions.

JavaScript's event-driven model is central to how it works. When a user clicks a button, submits a form, or scrolls the page, the browser fires an event. JavaScript listens for these events and executes callback functions in response. Understanding events, combined with asynchronous programming (promises, async/await, and the Fetch API for retrieving data from servers), gives you the tools to build modern, responsive web applications. While JavaScript has quirks and legacy patterns that can trip up beginners, its ubiquity, massive ecosystem, and immediate visual feedback in the browser make it one of the most rewarding first languages to learn.

You'll be able to:

Declare and use variables with let and const, understanding their scoping and reassignment rules
Write functions using both traditional and arrow syntax with parameters, return values, and callbacks
Select, modify, create, and remove DOM elements to build interactive web page features
Attach event listeners to handle user interactions like clicks, form submissions, and keyboard input
Use Promises, async/await, and the Fetch API to retrieve and display data from external APIs

One step at a time.

Key Concepts

Variables: let and const

Variables in JavaScript are declared with 'let' (for values that will change) or 'const' (for values that will not be reassigned). The older 'var' keyword is still valid but has scoping quirks that make let/const preferable in modern code. const does not mean the value is immutable -- const objects and arrays can still have their contents modified; only the binding (the variable itself) cannot be reassigned.

Example: let score = 0; // can be reassigned later score = 10; // works fine const name = 'Alice'; // cannot be reassigned // name = 'Bob'; // TypeError: Assignment to constant variable

Data Types

JavaScript has seven primitive types: string ('hello'), number (42, 3.14), boolean (true/false), null (intentional absence of value), undefined (declared but not assigned), BigInt (large integers), and Symbol (unique identifiers). It also has one structural type: objects, which include regular objects, arrays, and functions. JavaScript is dynamically typed -- variables can hold any type and change type during execution.

Example: let age = 25; // number let name = 'Alice'; // string let isStudent = true; // boolean let items = [1, 2, 3]; // array (object type) typeof age; // 'number'

Functions and Arrow Functions

Functions are reusable blocks of code. Traditional functions are declared with the 'function' keyword. Arrow functions (=>) provide a shorter syntax and are commonly used in modern JavaScript, especially as callbacks. Arrow functions also behave differently with 'this' binding, which matters in object-oriented contexts.

Example: // Traditional function function greet(name) { return `Hello, ${name}!`; } // Arrow function (equivalent) const greet = (name) => `Hello, ${name}!`; greet('Alice'); // 'Hello, Alice!'

DOM Manipulation

The Document Object Model (DOM) is the browser's tree-structured representation of an HTML page. JavaScript can read, modify, create, and delete DOM elements using methods like document.querySelector(), element.textContent, element.style, element.classList, and element.innerHTML. DOM manipulation is what makes web pages interactive and dynamic.

Example: // Select an element const heading = document.querySelector('h1'); // Change its text heading.textContent = 'Welcome!'; // Change its style heading.style.color = 'blue'; // Add a CSS class heading.classList.add('highlight');

Events and Event Listeners

Events are actions that occur in the browser -- a user clicking, typing, scrolling, or submitting a form. JavaScript responds to events using addEventListener(), which attaches a callback function to a specific event on a specific element. Common events include 'click', 'submit', 'keydown', 'input', 'load', and 'scroll'.

Example: const button = document.querySelector('#myButton'); button.addEventListener('click', () => { alert('Button clicked!'); });

Arrays

Arrays are ordered collections of values, created with square brackets. JavaScript arrays are dynamic (no fixed size) and can hold mixed types. Essential array methods include push() (add to end), pop() (remove from end), map() (transform each element), filter() (select elements matching a condition), and forEach() (execute a function for each element).

Example: const fruits = ['apple', 'banana', 'cherry']; fruits.push('date'); // ['apple', 'banana', 'cherry', 'date'] fruits[0]; // 'apple' fruits.length; // 4 // map: transform each element const upper = fruits.map(f => f.toUpperCase()); // ['APPLE', 'BANANA', 'CHERRY', 'DATE']

Objects

Objects are collections of key-value pairs (called properties) that represent structured data. Keys are strings (or Symbols); values can be any type, including other objects and functions (called methods when inside an object). Objects are the fundamental building block for structured data in JavaScript and are closely related to JSON (JavaScript Object Notation).

Example: const student = { name: 'Alice', age: 20, major: 'Computer Science', greet() { return `Hi, I'm ${this.name}`; } }; student.name; // 'Alice' student.greet(); // "Hi, I'm Alice"

Promises and Async/Await

JavaScript is single-threaded but handles asynchronous operations (network requests, timers, file reading) using promises. A Promise represents a value that may not be available yet but will be resolved (success) or rejected (failure) in the future. The async/await syntax (introduced in ES2017) makes asynchronous code look and read like synchronous code, greatly improving readability.

Example: // Using async/await async function fetchUser() { try { const response = await fetch('https://api.example.com/user'); const data = await response.json(); console.log(data); } catch (error) { console.error('Failed:', error); } }

More terms are available in the glossary.

Explore your way

Choose a different way to engage with this topic — no grading, just richer thinking.

Explore your way — choose one:

Explore with AI →

Concept Map

See how the key ideas connect. Nodes color in as you practice.

Worked Example

Walk through a solved problem step-by-step. Try predicting each step before revealing it.

Adaptive Practice

This is guided practice, not just a quiz. Hints and pacing adjust in real time.

Small steps add up.

What you get while practicing:

Math Lens cues for what to look for and what to ignore.
Progressive hints (direction, rule, then apply).
Targeted feedback when a common misconception appears.

Teach It Back

The best way to know if you understand something: explain it in your own words.

Keep Practicing

More ways to strengthen what you just learned.

Flashcards Mixed Practice Mistake Journal