JavaScript Lab | CodeQuest Myanmar

JavaScript Lab | CodeQuest Myanmar | CodeQuest Myanmar

JS Syntax

7 learner topics

JS Syntax

Use Syntax in real JavaScript code and explain what changes when the code runs.

Syntax is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Syntax: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Syntax";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Syntax example, connect it to a button or input, then show the result on the page in real time.

JS Statements

Use Statements in real JavaScript code and explain what changes when the code runs.

Statements is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Statements: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Statements";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Statements example, connect it to a button or input, then show the result on the page in real time.

JS Comments

Use Comments in real JavaScript code and explain what changes when the code runs.

Comments is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Comments: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Comments";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Comments example, connect it to a button or input, then show the result on the page in real time.

JS Variables

Use Variables in real JavaScript code and explain what changes when the code runs.

Variables is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Variables: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const lessonName = "JS Variables";
let completed = false;
completed = true;

console.log(typeof lessonName, completed);

Mission

Run the Variables example, connect it to a button or input, then show the result on the page in real time.

JS Let

Use Let in real JavaScript code and explain what changes when the code runs.

Let is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Let: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const lessonName = "JS Let";
let completed = false;
completed = true;

console.log(typeof lessonName, completed);

Mission

Run the Let example, connect it to a button or input, then show the result on the page in real time.

JS Const

Use Const in real JavaScript code and explain what changes when the code runs.

Const is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Const: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const lessonName = "JS Const";
let completed = false;
completed = true;

console.log(typeof lessonName, completed);

Mission

Run the Const example, connect it to a button or input, then show the result on the page in real time.

JS Types

Use Types in real JavaScript code and explain what changes when the code runs.

Types is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Types: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const lessonName = "JS Types";
let completed = false;
completed = true;

console.log(typeof lessonName, completed);

Mission

Run the Types example, connect it to a button or input, then show the result on the page in real time.

JS Advanced

16 learner topics

JS Functions

Use Functions in real JavaScript code and explain what changes when the code runs.

Functions organizes data and behavior so code can grow beyond one script. Use it to model real course progress, tasks, scores, users, and interface state.

Real-time explanation

The blue focus for this topic is Functions: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

function calculateXp(minutes, streak) {
  return minutes * 5 + streak * 20;
}

console.log(calculateXp(30, 4));

Mission

Run the Functions example, connect it to a button or input, then show the result on the page in real time.

JS Objects

Use Objects in real JavaScript code and explain what changes when the code runs.

Objects organizes data and behavior so code can grow beyond one script. Use it to model real course progress, tasks, scores, users, and interface state.

Real-time explanation

The blue focus for this topic is Objects: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

class CourseProgress {
  constructor(name) {
    this.name = name;
    this.completed = 0;
  }

  finishLesson() {
    this.completed += 1;
  }
}

const progress = new CourseProgress("JavaScript");
progress.finishLesson();
console.log(progress);

Mission

Run the Objects example, connect it to a button or input, then show the result on the page in real time.

JS Classes

Use Classes in real JavaScript code and explain what changes when the code runs.

Classes organizes data and behavior so code can grow beyond one script. Use it to model real course progress, tasks, scores, users, and interface state.

Real-time explanation

The blue focus for this topic is Classes: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

class CourseProgress {
  constructor(name) {
    this.name = name;
    this.completed = 0;
  }

  finishLesson() {
    this.completed += 1;
  }
}

const progress = new CourseProgress("JavaScript");
progress.finishLesson();
console.log(progress);

Mission

Run the Classes example, connect it to a button or input, then show the result on the page in real time.

JS Asynchronous

Use Asynchronous in real JavaScript code and explain what changes when the code runs.

Asynchronous helps JavaScript work with data outside the current file. Real websites use these patterns to fetch server data, update the interface, and keep the page useful while work happens in the background.

Real-time explanation

The blue focus for this topic is Asynchronous: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

async function loadUser() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await response.json();
  console.log(user.name);
}

loadUser();

Mission

Run the Asynchronous example, connect it to a button or input, then show the result on the page in real time.

JS Modules

Use Modules in real JavaScript code and explain what changes when the code runs.

Modules helps JavaScript work with data outside the current file. Real websites use these patterns to fetch server data, update the interface, and keep the page useful while work happens in the background.

Real-time explanation

The blue focus for this topic is Modules: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Modules";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Modules example, connect it to a button or input, then show the result on the page in real time.

JS Meta & Proxy

Use Meta & Proxy in real JavaScript code and explain what changes when the code runs.

Meta & Proxy is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Meta & Proxy: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Meta & Proxy";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Meta & Proxy example, connect it to a button or input, then show the result on the page in real time.

JS Typed Arrays

Use Typed Arrays in real JavaScript code and explain what changes when the code runs.

Typed Arrays organizes data and behavior so code can grow beyond one script. Use it to model real course progress, tasks, scores, users, and interface state.

Real-time explanation

The blue focus for this topic is Typed Arrays: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const missions = ["Read", "Code", "Review"];
const withStatus = missions.map((name, index) => ({
  id: index + 1,
  name,
  done: false,
}));

console.table(withStatus);

Mission

Run the Typed Arrays example, connect it to a button or input, then show the result on the page in real time.

JS DOM Navigation

Use DOM Navigation in real JavaScript code and explain what changes when the code runs.

DOM Navigation lets JavaScript read and update the live web page. Real interactive sites use it to respond to clicks, form input, navigation, and browser events without reloading everything.

Real-time explanation

The blue focus for this topic is DOM Navigation: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const button = document.querySelector("#complete");
const output = document.querySelector("#status");

button.addEventListener("click", () => {
  output.textContent = "Lesson completed in real time";
});

Mission

Run the DOM Navigation example, connect it to a button or input, then show the result on the page in real time.

JS Windows

Use Windows in real JavaScript code and explain what changes when the code runs.

Windows lets JavaScript read and update the live web page. Real interactive sites use it to respond to clicks, form input, navigation, and browser events without reloading everything.

Real-time explanation

The blue focus for this topic is Windows: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Windows";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Windows example, connect it to a button or input, then show the result on the page in real time.

JS Web APIs

Use Web APIs in real JavaScript code and explain what changes when the code runs.

Web APIs helps JavaScript work with data outside the current file. Real websites use these patterns to fetch server data, update the interface, and keep the page useful while work happens in the background.

Real-time explanation

The blue focus for this topic is Web APIs: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

async function loadUser() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await response.json();
  console.log(user.name);
}

loadUser();

Mission

Run the Web APIs example, connect it to a button or input, then show the result on the page in real time.

JS AJAX

Use AJAX in real JavaScript code and explain what changes when the code runs.

AJAX helps JavaScript work with data outside the current file. Real websites use these patterns to fetch server data, update the interface, and keep the page useful while work happens in the background.

Real-time explanation

The blue focus for this topic is AJAX: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

async function loadUser() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await response.json();
  console.log(user.name);
}

loadUser();

Mission

Run the AJAX example, connect it to a button or input, then show the result on the page in real time.

JS JSON

Use JSON in real JavaScript code and explain what changes when the code runs.

JSON helps JavaScript work with data outside the current file. Real websites use these patterns to fetch server data, update the interface, and keep the page useful while work happens in the background.

Real-time explanation

The blue focus for this topic is JSON: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

async function loadUser() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await response.json();
  console.log(user.name);
}

loadUser();

Mission

Run the JSON example, connect it to a button or input, then show the result on the page in real time.

JS jQuery

Use jQuery in real JavaScript code and explain what changes when the code runs.

jQuery is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is jQuery: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS jQuery";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the jQuery example, connect it to a button or input, then show the result on the page in real time.

JS Graphics

Use Graphics in real JavaScript code and explain what changes when the code runs.

Graphics is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Graphics: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Graphics";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Graphics example, connect it to a button or input, then show the result on the page in real time.

JS Examples

Use Examples in real JavaScript code and explain what changes when the code runs.

Examples is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Examples: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Examples";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Examples example, connect it to a button or input, then show the result on the page in real time.

JS Reference

Use Reference in real JavaScript code and explain what changes when the code runs.

Reference is core JavaScript for making a page react in real time. Run the code, inspect the output, then connect it to HTML so users can see the result immediately.

Real-time explanation

The blue focus for this topic is Reference: the example shows real JavaScript behavior that can update output, page state, or user interaction in real time.

const topic = "JS Reference";
const message = "Practice " + topic + " with real browser output.";

console.log(message);

Mission

Run the Reference example, connect it to a button or input, then show the result on the page in real time.

Learn JavaScript with beginner-friendly guidance

Course content

Basic JavaScript

JS Tutorial

Practice rule

Reference

JS Introduction

JS Where To

JS Output

JS Syntax

JS Syntax

JS Statements

JS Comments

JS Variables

JS Let

JS Const

JS Types

JS Operators

JS Operators

JS If Else

JS If Conditions

JS Loops

JS Loops

JS Strings

JS Strings

JS Numbers

JS Numbers

JS Functions

JS Functions

JS Objects

JS Objects

JS Scope

JS Scope

JS Dates

JS Dates

JS Temporal

JS Temporal New

JS Arrays

JS Arrays

JS Sets

JS Sets

JS Maps

JS Maps

JS Iterations

JS Loops

JS Math

JS Math

JS RegExp

JS RegExp

JS DataTypes

JS Data Types

JS Errors

JS Errors

JS Debugging

JS Debugging

JS Conventions

JS Style Guide

JS Reference

JS Reference

JS Projects

JS Projects New

JS Versions

JS 2026

JS HTML

JS HTML DOM

JS Events

JS Advanced

JS Functions

JS Objects

JS Classes

JS Asynchronous

JS Modules

JS Meta & Proxy

JS Typed Arrays

JS DOM Navigation

JS Windows

JS Web APIs

JS AJAX

JS JSON

JS jQuery