What is the StudyGrid JavaScript tutorial?

The StudyGrid JavaScript tutorial is a full beginner track: variables, functions, arrays, if/else, the DOM, events, storage, and fetch. Each chapter has copy-and-run examples.

Should I run javascript examples examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn javascript examples in this JavaScript JavaScript lesson (JavaScript Examples).

Is the JavaScript editor the same as Try Python?

No. Try JavaScript is a live page plus a console at /javascript/try. Try Python stays at /try. JavaScript lessons never open the Python editor.

Do I need to install anything to learn JavaScript?

No. Open a chapter, click Try it in JavaScript, and the page and console update in the browser.

Where should I start the JavaScript tutorial?

Start at JavaScript Intro, then Where To, Output, and Syntax. After variables and functions, continue to the DOM and events. Use Next at the bottom of each chapter.

Is the JavaScript tutorial free?

Yes. The JavaScript studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live editor.

JavaScript Examples

129 copy-and-run snippets. Open one in Try JavaScript at /javascript/try, change a value, and run it again. Each language has its own shelf and its own editor.

Start

console.log

console.log("Hello, JavaScript");

Two logs

console.log("first");
console.log("second");

Statement semicolon

let n = 1;
n = n + 2;
console.log(n);

Line comment

// Keep this for later
console.log("ok");

Block comment

/* hours: 8-16 */
console.log(8);

Case sensitive

let Name = "Ada";
let name = "Lin";
console.log(Name, name);

Variables

let reassign

let count = 1;
count = 2;
console.log(count);

const number

const MAX = 10;
console.log(MAX);

var old style

var city = "Oslo";
console.log(city);

Add numbers

console.log(3 + 4);

Remainder

console.log(10 % 3);

Increment

let n = 4;
n += 1;
console.log(n);

typeof string

console.log(typeof "hi");

typeof number

console.log(typeof 7);

Boolean compare

console.log(5 > 2);

Strict equal

console.log(5 === "5");

Loose equal

console.log(5 == "5");

And operator

console.log(true && false);

Or operator

console.log(false || true);

Not operator

console.log(!false);

const array mutate

const nums = [1];
nums.push(2);
console.log(nums);

undefined var

let x;
console.log(x);

null type

console.log(null);

Core

Function return

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Mira"));

Function no args

function ping() {
  return "pong";
}
console.log(ping());

Object literal

const person = { name: "Ada", year: 1815 };
console.log(person.name);

Bracket key

const person = { name: "Ada" };
console.log(person["name"]);

Arrow double

const double = (n) => n * 2;
console.log(double(5));

Arrow one line

const square = n => n * n;
console.log(square(4));

this in method

const cat = {
  name: "Miso",
  speak() { return this.name + " meows"; }
};
console.log(cat.speak());

destructure

const { name } = { name: "Ada", year: 1815 };
console.log(name);

default param

function greet(name = "friend") {
  return "Hi, " + name;
}
console.log(greet());

Strings

String length

console.log("JavaScript".length);

Index char

console.log("Ada"[0]);

Concatenate

console.log("Hello, " + "world");

toUpperCase

console.log("hi".toUpperCase());

trim

console.log("  hi  ".trim());

includes

console.log("JavaScript".includes("Script"));

slice

console.log("JavaScript".slice(0, 4));

replace

console.log("cat".replace("c", "b"));

Template name

const name = "Lin";
console.log(`Hello, ${name}`);

Template math

const n = 3;
console.log(`n squared is ${n * n}`);

template multiline

console.log(`line 1
line 2`);

split words

console.log("a b c".split(" "));

startsWith

console.log("JavaScript".startsWith("Java"));

repeat

console.log("-".repeat(3));

Numbers

toFixed

console.log((3.14159).toFixed(2));

parseInt

console.log(parseInt("42", 10));

Number()

console.log(Number("7"));

String()

console.log(String(7));

NaN check

console.log(Number.isNaN(Number("x")));

Math.round

console.log(Math.round(4.6));

Math.floor

console.log(Math.floor(4.9));

Math.max

console.log(Math.max(3, 9, 1));

Math.abs

console.log(Math.abs(-4));

Random integer 1-6

console.log(Math.floor(Math.random() * 6) + 1);

Math.min

console.log(Math.min(3, 9, 1));

Math.ceil

console.log(Math.ceil(4.1));

power

console.log(2 ** 3);

Arrays

Array literal

const fruits = ["apple", "pear", "fig"];
console.log(fruits[0]);

Array length

console.log([1, 2, 3].length);

push

const nums = [1, 2];
nums.push(3);
console.log(nums);

pop

const nums = [1, 2, 3];
console.log(nums.pop());

join

console.log(["a", "b", "c"].join("-"));

includes item

console.log([1, 2, 3].includes(2));

map double

console.log([1, 2, 3].map((n) => n * 2));

filter even

console.log([1, 2, 3, 4].filter((n) => n % 2 === 0));

find first

console.log([3, 8, 12].find((n) => n > 5));

forEach log

["a", "b"].forEach((x) => console.log(x));

for of

for (const n of [1, 2, 3]) {
  console.log(n);
}

for index

const xs = [10, 20];
for (let i = 0; i < xs.length; i++) {
  console.log(i, xs[i]);
}

reduce sum

console.log([2, 4, 6].reduce((a, b) => a + b, 0));

spread copy

const a = [1, 2];
const b = [...a, 3];
console.log(b);

sort numbers

console.log([3, 1, 2].sort((a, b) => a - b));

slice array

console.log([1, 2, 3, 4].slice(1, 3));

concat arrays

console.log([1, 2].concat([3]));

some

console.log([1, 3, 5].some((n) => n > 4));

every

console.log([2, 4, 6].every((n) => n % 2 === 0));

Flow

if pass

const score = 72;
if (score >= 50) {
  console.log("pass");
}

if else

const n = -1;
if (n >= 0) {
  console.log("plus");
} else {
  console.log("minus");
}

else if

const n = 0;
if (n > 0) console.log("pos");
else if (n < 0) console.log("neg");
else console.log("zero");

ternary

const n = 4;
console.log(n % 2 === 0 ? "even" : "odd");

switch day

const day = "Mon";
switch (day) {
  case "Mon":
    console.log("start");
    break;
  default:
    console.log("other");
}

while countdown

let n = 3;
while (n > 0) {
  console.log(n);
  n--;
}

do while

let n = 0;
do {
  console.log(n);
  n++;
} while (n < 2);

break loop

for (let i = 0; i < 10; i++) {
  if (i === 3) break;
  console.log(i);
}

continue even

for (let i = 0; i < 5; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

Types

Set unique

const s = new Set(["a", "a", "b"]);
console.log(s.size);

Set has

const s = new Set([1, 2]);
console.log(s.has(2));

Map set get

const m = new Map();
m.set("a", 1);
console.log(m.get("a"));

typeof array

console.log(typeof []);

Array.isArray

console.log(Array.isArray([1, 2]));

typeof null

console.log(typeof null);

JSON stringify

console.log(JSON.stringify({ a: 1 }));

JSON parse

console.log(JSON.parse('{"a":1}').a);

Date year

const d = new Date(2026, 0, 1);
console.log(d.getFullYear());

try catch

try {
  throw new Error("nope");
} catch (e) {
  console.log(e.message);
}

class instance

class Cat {
  constructor(name) { this.name = name; }
}
console.log(new Cat("Miso").name);

scope block

let a = 1;
{
  let a = 2;
  console.log(a);
}
console.log(a);

hoist note

console.log(typeof greet);
function greet() { return 1; }

Set add

const s = new Set();
s.add(1);
s.add(1);
console.log([...s]);

Map keys

const m = new Map([["a", 1], ["b", 2]]);
console.log([...m.keys()]);

class method

class Counter {
  constructor() { this.n = 0; }
  inc() { this.n += 1; return this.n; }
}
console.log(new Counter().inc());

throw number

try {
  throw 404;
} catch (e) {
  console.log(e);
}

finally

try {
  console.log("try");
} finally {
  console.log("done");
}

DOM

Change heading

<h1 id="title">Old</h1>
<script>
document.getElementById("title").textContent = "New";
console.log("updated");
</script>

querySelector

<p class="note">Wait</p>
<script>
document.querySelector(".note").textContent = "Ready";
</script>

querySelectorAll

<li>A</li><li>B</li>
<script>
console.log(document.querySelectorAll("li").length);
</script>

createElement

<ul id="list"></ul>
<script>
const li = document.createElement("li");
li.textContent = "pear";
document.getElementById("list").appendChild(li);
</script>

classList add

<p id="n">Hi</p>
<style>.on{color:teal}</style>
<script>
document.getElementById("n").classList.add("on");
</script>

Click counter

<button id="go">+1</button>
<p id="out">0</p>
<script>
let n = 0;
document.getElementById("go").addEventListener("click", () => {
  n += 1;
  document.getElementById("out").textContent = n;
  console.log(n);
});
</script>

Input greet

<input id="name" value="Ada">
<button id="go">Greet</button>
<p id="out"></p>
<script>
document.getElementById("go").addEventListener("click", () => {
  const name = document.getElementById("name").value;
  document.getElementById("out").textContent = "Hello, " + name;
});
</script>

Prevent submit

<form id="f"><button>Send</button></form>
<p id="out"></p>
<script>
document.getElementById("f").addEventListener("submit", (e) => {
  e.preventDefault();
  document.getElementById("out").textContent = "Stopped submit";
});
</script>

setTimeout

<p id="out">wait</p>
<script>
setTimeout(() => {
  document.getElementById("out").textContent = "later";
  console.log("later");
}, 300);
</script>

localStorage set

<p id="out"></p>
<script>
localStorage.setItem("theme", "dark");
document.getElementById("out").textContent = localStorage.getItem("theme");
</script>

JSON in storage

<p id="out"></p>
<script>
localStorage.setItem("user", JSON.stringify({ name: "Ada" }));
const user = JSON.parse(localStorage.getItem("user"));
document.getElementById("out").textContent = user.name;
</script>

Fetch json placeholder

<p id="out">loading</p>
<script>
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((r) => r.json())
  .then((data) => {
    document.getElementById("out").textContent = data.title;
    console.log(data.id);
  })
  .catch((err) => console.log(err.message));
</script>

Change style

<p id="n">Paint me</p>
<script>
document.getElementById("n").style.color = "teal";
</script>

innerHTML list

<div id="box"></div>
<script>
document.getElementById("box").innerHTML = "<strong>Hi</strong>";
</script>

textContent vs html

<p id="n"></p>
<script>
document.getElementById("n").textContent = "<b>plain</b>";
</script>

onclick attribute

<button onclick="console.log('clicked')">Log</button>

window location path

console.log(location.pathname);

Date clock bits

const d = new Date();
console.log(d.getHours(), d.getMinutes());

padStart time

console.log(String(7).padStart(2, "0"));

dataset

<button id="go" data-id="7">Go</button>
<script>
console.log(document.getElementById("go").dataset.id);
</script>

toggle class

<button id="go">Toggle</button>
<p id="n" class="off">box</p>
<style>.on{font-weight:800}</style>
<script>
document.getElementById("go").addEventListener("click", () => {
  document.getElementById("n").classList.toggle("on");
});
</script>

remove child

<ul id="list"><li id="gone">x</li></ul>
<script>
document.getElementById("gone").remove();
console.log(document.querySelectorAll("li").length);
</script>

sessionStorage

<p id="out"></p>
<script>
sessionStorage.setItem("n", "1");
document.getElementById("out").textContent = sessionStorage.getItem("n");
</script>

async await fetch

<p id="out"></p>
<script>
(async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await res.json();
  document.getElementById("out").textContent = data.completed;
})();
</script>