Learn JavaScript

A beginner-friendly interactive playground to learn and practice JavaScript basics.

JavaScript Learning Path

Introduction & Setup
What is JavaScript? How to run JS in the browser.
Variables & Data Types
let, const, var, strings, numbers, booleans.
Operators & Expressions
+, -, *, /, %, =, ==, ===, and more.
Control Flow
if, else, else if, switch.
Loops
for, while, do...while.
Functions
Declaring and calling functions, parameters, return values.
Arrays & Objects
Basic array and object usage.
DOM Basics (optional)
How to change web pages with JavaScript.
Practice Projects
Try making a calculator, to-do list, or your own ideas!

Work through each step, try the examples, and experiment in the code editor below!

Learn HTML & CSS New: interactive HTML & CSS playground

Step-by-Step Examples & Exercises

1. Introduction & Setup

Example:

// This is a comment\nconsole.log('JavaScript is running!');

Exercises:

Easy: Change the greeting message.

Medium: Print current date/time.

Hard: Prompt for name and greet.

2. Variables & Data Types

Example:

let age = 15;\nconst name = \"Alex\";\nconsole.log(name + ' is ' + age + ' years old.');

Exercises:

Easy: Create a variable for your favorite color and print it.

Medium: Swap two variables without a temporary variable.

Hard: Parse a number from a string and add 10 to it.

3. Operators & Expressions

Example:

let sum = 7 + 3;\nlet isEqual = (sum === 10);\nconsole.log('Sum:', sum);\nconsole.log('Is sum 10?', isEqual);

Exercises:

Easy: Use -, *, /, % and print results.

Medium: Check if a number is even or odd and print result.

Hard: Implement FizzBuzz up to 15 and log results.

4. Control Flow

Example:

let score = 85;\nif (score >= 80) {\n  console.log('Great job!');\n} else {\n  console.log('Keep practicing!');\n}

Exercises:

Easy: Change the score and show messages.

Medium: Use switch to map a number (17) to a weekday name.

Hard: Determine whether a year is a leap year.

5. Loops

Example:

for (let i = 1; i <= 5; i++) {\n  console.log('Number:', i);\n}

Exercises:

Easy: Print even numbers from 2 to 10.

Medium: Sum numbers from 1 to 20 and print the total.

Hard: Generate a multiplication table for a number (e.g., 7).

6. Functions

Example:

function greet(name) {\n  console.log('Hello, ' + name + '!');\n}\ngreet('Sam');

Exercises:

Easy: Create a function that multiplies two numbers and logs the result.

Medium: Write a function that returns the nth Fibonacci number.

Hard: Write a function that accepts an array and a callback, and returns a filtered array.

7. Arrays & Objects

Example:

let fruits = ['apple', 'banana', 'cherry'];\nconsole.log(fruits[1]); // banana\nlet person = { name: 'Lina', age: 20 };\nconsole.log(person.name);

Exercises:

Easy: Create array of three animals and print the second.

Medium: Count occurrences of a value in an array.

Hard: Sort an array of objects by a numeric property.

8. DOM Basics (optional)

Example:

// This only works in a real web page, not the code runner above!\ndocument.body.style.background = '#ffe4e1';

Exercises:

Easy: Change page background color (open console to test).

Medium: Create and append a new paragraph to the page.

Hard: Toggle a CSS class on an element every second.

9. Practice Projects

Ideas:

Make a simple calculator (add, subtract, multiply, divide two numbers).
Build a to-do list (array of tasks, add/remove items).
Write a program that asks for a name and prints a greeting.

Starter Exercises:

Easy: Small greeting app (prompt for name).

Medium: Simple calculator function (two numbers, four operations).

Hard: To-do list starter: add/remove items from an array and log tasks.