JavaScript for Kids

beginner · 21 lessons

The language of the web. Build interactive websites, games and apps that run in any browser.

Try in Applaa Builder — Free

21 lessons

  1. 1

    What is Programming

    Programming is giving the computer step-by-step instructions. We write code in a language like JavaScript so the computer can run it. Browsers understand JavaScript and can run it on web pages.

    3 min10 XPQuiz
  2. 2

    Variables

    Variables store values. In JavaScript we use let or const. Use const when the value won't change, let when it might.

    3 min10 XPQuiz
  3. 3

    Data Types

    JavaScript has numbers, strings (text in quotes), and booleans (true/false). You don't declare the type; JavaScript figures it out.

    3 min10 XPQuiz
  4. 4

    Conditions (if/else)

    📚 What are conditions in JavaScript? They let your script **branch**: run one path when something is true, another when it is false. Use `if`, `else if`, and `else` with conditions in parentheses.

    5 min10 XPQuiz
  5. 5

    Loops

    📚 What are loops in JavaScript? They repeat a block of code. A classic `for` loop looks like `for (let i = 0; i < n; i++)` and runs a counted number of times. You can also loop arrays with `for...of` or use `while` when you want to keep going until something changes.

    5 min10 XPQuiz
  6. 6

    Functions

    📚 What are Functions in JavaScript? A function is a named, reusable block of code. JavaScript has two main syntaxes: function greet(name) {} (declaration) and const greet = (name) => {} (arrow function). Call them by name as many times as you need, passing different inputs each time.

    5 min10 XPQuiz
  7. 7

    Arrays / Lists

    📚 What are Arrays in JavaScript? An array is an ordered list of values in a single variable. You access items by their index (starting at 0). JavaScript arrays are dynamic - they grow and shrink as needed. They can hold any mix of types and come with dozens of built-in methods.

    8 min10 XPQuiz
  8. 8

    Objects / Dictionaries

    📚 What are Objects in JavaScript? A JavaScript object groups related data and functions together using key-value pairs. Keys (properties) are names; values can be anything: strings, numbers, arrays, even other objects or functions (called methods). Objects model real-world things naturally.

    8 min10 XPQuiz
  9. 9

    Debugging Basics

    📚 What is JavaScript Debugging? Debugging in JavaScript means finding and fixing errors in your code. Browser DevTools is your best friend: open with F12 (or right-click > Inspect), find the Console tab, and you see all console.log() output, error messages, and stack traces.

    8 min10 XPQuiz
  10. 10

    String Methods

    📚 What are JavaScript String Methods? JavaScript strings come packed with built-in methods for transforming, searching, and extracting text. Like Python, JS strings are immutable: methods always return a new string. Chain multiple methods together for powerful one-line transformations.

    8 min10 XPQuiz
  11. 11

    Try and Catch

    📚 What is Try/Catch in JavaScript? try/catch lets your JavaScript code handle errors gracefully. The code inside try runs normally. If anything throws an error, execution jumps to the catch block instead of crashing with an uncaught exception. The error object e has .message and .stack properties.

    8 min10 XPQuiz
  12. 12

    map() and filter()

    📚 What are map() and filter()? map() and filter() are the two most important array methods. map() transforms every item in an array, returning a new array of the same length. filter() keeps only the items where a condition is true. Both take a callback function and never change the original array.

    5 min10 XPQuiz
  13. 13

    Spread and Rest operators

    📚 What are Spread and Rest? The ... operator does two different but related things. As spread, it expands an array or object: [...arr] creates a shallow copy, {...obj} merges objects. As rest, it collects remaining arguments into an array: function f(...args) accepts any number of arguments.

    8 min10 XPQuiz
  14. 14

    Destructuring

    📚 What is Destructuring? Destructuring is a clean way to extract values from arrays and objects into separate variables. Instead of const name = user.name; const age = user.age; you write const { name, age } = user; in one line. It makes code shorter and more expressive.

    8 min10 XPQuiz
  15. 15

    JSON

    📚 What is JSON? JSON (JavaScript Object Notation) is the universal language of data on the web. When your app talks to an API, data travels as a JSON string. JSON.stringify() converts a JavaScript object into a JSON string for sending. JSON.parse() converts it back into an object after receiving.

    8 min10 XPQuiz
  16. 16

    Fetch and async/await

    📚 What is Fetch? fetch() is the modern browser API for making HTTP requests to servers and APIs. It returns a Promise, so you use async/await to handle the result cleanly. fetch() is how JavaScript apps talk to the web: loading data, submitting forms, calling AI APIs.

    5 min10 XPQuiz
  17. 17

    Classes

    📚 What are JavaScript Classes? A class is a blueprint for creating objects. You define properties and methods once in the class, then create as many instances as you need with new. Classes organise related data and behaviour together, making complex code much easier to manage.

    8 min10 XPQuiz
  18. 18

    Modules (import/export)

    📚 What are ES Modules? ES Modules let you split your JavaScript into separate files and share code between them. export makes a value available to other files. import loads it. Modern JavaScript apps (React, Vue, Node.js) are built entirely with modules - each file is its own module.

    8 min10 XPQuiz
  19. 19

    reduce()

    📚 What is reduce()? reduce() is the most powerful array method. It processes every item in an array and builds a single result - it can be a number, string, object, or even another array. The callback receives an accumulator (the running result) and the current item, and returns the next accumulat…

    8 min10 XPQuiz
  20. 20

    setTimeout and setInterval

    📚 What are setTimeout and setInterval? setTimeout() schedules a function to run once after a delay (in milliseconds). setInterval() schedules a function to repeat every N milliseconds until cleared. Both are essential for animations, countdowns, polling, and any time-based behaviour.

    8 min10 XPQuiz
  21. 21

    Template Literals

    📚 What are Template Literals? Template literals are strings wrapped in backticks (`) instead of quotes. Inside them, ${expression} is evaluated and embedded. They make string building much cleaner than concatenating with + signs, and support multi-line strings naturally.

    8 min10 XPQuiz