JavaScript Essentials

JavaScript makes software respond.

What makes a quiet page answer back? The moment a menu opens, a total changes or a message arrives without a reload, JavaScript is usually doing the thinking.

JavaScript is a programming language. In a browser it can react to clicks, validate forms, update a page, store small amounts of data and request information from an API. With runtimes such as Node.js it can also power servers, command-line tools, build systems and automated tests.

You can build quizzes, calculators, interactive dashboards, games, checkout flows and complete web applications. You need no account and no installation for the first browser examples: the browser already runs JavaScript. Later modules install Node.js so you can use npm, Vite and project tests.

<button id="welcome">Say hello</button>
<p id="message"></p>

<script>
  const button = document.querySelector('#welcome');
  button.addEventListener('click', () => {
    document.querySelector('#message').textContent = 'Karibu!';
  });
</script>

Start with values and transformations.

JavaScript programs read values, make decisions and produce effects. Keep calculations in small functions. A function is easier to test when its result depends on its inputs instead of hidden page state.

function totalWithFee(amount, feeRate = 0.015) {
  if (!Number.isFinite(amount) || amount < 0) {
    throw new Error('Amount must be a positive number');
  }
  return amount + amount * feeRate;
}

const checkoutTotal = totalWithFee(149);
console.log(checkoutTotal.toFixed(2)); // "151.24"

Use the data type that matches the meaning

• Strings represent text, even when the text contains digits.
• Numbers support arithmetic; convert form input deliberately.
• Booleans represent yes/no state.
• null can represent an intentionally empty value; undefined often means no value was supplied.
• Prefer const; use let only when the binding must change.

Listen, update, preserve meaning.

The DOM is the browser's object representation of the HTML document. Select the element you need, listen for a meaningful event, update the smallest necessary state, then render the result. Keep the HTML usable before JavaScript loads where practical.

<form id="greeting-form">
  <label for="name">Your name</label>
  <input id="name" name="name" required>
  <button>Say hello</button>
</form>
<p id="greeting-message" aria-live="polite"></p>

const form = document.querySelector('#greeting-form');
const message = document.querySelector('#greeting-message');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const name = String(data.get('name')).trim();
  message.textContent = name ? 'Karibu, ' + name + '!' : 'Add your name first.';
});

Important safety rule

Use textContent for ordinary user-provided text. Do not place untrusted input into innerHTML; that can turn text into executable markup.

Loading and errors are normal states.

Network requests can be slow, return an unsuccessful HTTP status, or fail entirely. Show useful status text, check response.ok, catch errors and give the user a way to retry. Do not log an error and leave the screen blank.

async function loadResources() {
  status.textContent = 'Loading resources…';
  try {
    const response = await fetch('/data/resources.json');
    if (!response.ok) throw new Error('Request failed: ' + response.status);
    const resources = await response.json();
    renderResources(resources);
    status.textContent = resources.length + ' resources loaded';
  } catch (error) {
    status.textContent = 'Could not load resources. Try again.';
    console.error(error);
  }
}