JavaScript introduction: what it is, why we need it, who uses it and your first programs

HTML builds the page, CSS makes it look good, and JavaScript makes it do things: menus that open, forms that check your phone number before sending, prices that update when you change the quantity, M-Pesa payment buttons, live chat, maps, games and whole applications like Gmail and WhatsApp Web. JavaScript is the most widely used programming language in the world, and it's your first real programming language on this hub. This unit starts from zero.

What is JavaScript?

Compared with HTML and CSS:

A short history

• 1995: Brendan Eich created JavaScript at Netscape in about 10 days, to make web pages interactive. It was named "JavaScript" partly for marketing because Java was popular; the two languages are unrelated ("Java is to JavaScript as car is to carpet").
• 1997: standardised as ECMAScript (ES), which is why you hear "ES6" or "ES2015".
• 2008–2009: Google's fast V8 engine (Chrome) and Node.js (JavaScript on servers) transformed what JavaScript could do.
• 2015 (ES6): a huge update: let, const, arrow functions, classes, modules, promises.
• Today: a new ECMAScript version comes every year; JavaScript runs almost everywhere.

Why do we need JavaScript?

Without JavaScript, a web page can only show information and send forms to a server, reloading the page each time. With JavaScript you can:

1. Respond instantly to users: open menus, show/hide content, validate forms before submitting.
2. Update the page without reloading: load more products, show search results as you type, refresh a chat.
3. Calculate: cart totals, loan repayments, unit conversions, BMI, exam grades.
4. Store data in the browser: remember a cart, a dark-mode choice, a draft.
5. Talk to servers and APIs: fetch weather, send orders, start an M-Pesa payment through your backend.
6. Build whole applications: Google Docs, WhatsApp Web, banking dashboards, school portals, games.

Who uses JavaScript?

Where does JavaScript run?

• Browsers: every browser has a JavaScript engine (V8 in Chrome/Edge, SpiderMonkey in Firefox, JavaScriptCore in Safari).
• Servers: Node.js (also Deno and Bun).
• Phones: React Native and hybrid apps.
• Desktops: Electron apps.
• Elsewhere: browser extensions, smart TVs, IoT devices, even spreadsheets (Google Apps Script is JavaScript).

Ways to run JavaScript

1. The editor on this page

The examples below run in a safe sandbox. Press Run, read the output, change the code and run again.

2. The browser console

Press F12 → Console on any website and type 2 + 2, then Enter. Great for quick tests.

3. In an HTML page with <script>

<!DOCTYPE html>
<html>
<body>
  <h1>Hello</h1>
  <script src="app.js"></script>   <!-- external file (best) -->
</body>
</html>

Put scripts at the **end of <body>** or use <script src="app.js" defer> in the <head> so the HTML loads first.

4. Node.js on your computer

Install Node.js (nodejs.org), save hello.js, then run node hello.js in a terminal.

Your first program

console.log("Habari! Welcome to JavaScript.");
console.log(2 + 3);
console.log("I am learning at", "Marzley Tech");

console.log() prints values to the console (the output area). It's how developers see what their code is doing. Text must be in quotes (a string); numbers don't need quotes.

Statements and semicolons

Each instruction is a statement, usually on its own line and ending with a semicolon ;. JavaScript can often insert missing semicolons automatically, but writing them is a clear, safe habit.

Comments

// A single-line comment: the computer ignores this
/* A multi-line comment:
   use it to explain longer ideas */
console.log("Comments help humans understand code"); // comment at the end of a line

Variables: storing information

A variable is a named box that stores a value so you can use it later.

let customer = "Wanjiku";
const pricePerKg = 180;
let kilos = 3;

let total = pricePerKg * kilos;
console.log(customer, "pays KSh", total);

kilos = 5;                       // let variables can change
total = pricePerKg * kilos;
console.log("New total: KSh", total);

• let creates a variable that can change.
• const creates one that can't be reassigned (use it by default; switch to let when the value must change).
• Avoid the old var keyword in new code (it has confusing scope rules).
• Names: start with a letter, _ or $; no spaces; case-sensitive (total ≠ Total); use camelCase (pricePerKg).

Basic maths

console.log(10 + 5);    // 15 addition
console.log(10 - 5);    // 5  subtraction
console.log(10 * 5);    // 50 multiplication
console.log(10 / 4);    // 2.5 division
console.log(10 % 3);    // 1  remainder (modulo)
console.log(2 ** 3);    // 8  power
console.log((2 + 3) * 4); // 20: brackets first

How programs run

JavaScript runs top to bottom, one statement after another (later you'll learn how events, functions and asynchronous code change the order). If a line has an error, the program stops there and the console shows a message:

// This example fails on purpose so you can read the error
console.log("Line 1 runs");
console.log(totl);          // typo: totl was never created
console.log("This line never runs");

Read the error: ReferenceError: totl is not defined. It tells you what went wrong and usually which line. Reading errors calmly is a core programming skill; the help box under the editor explains common errors in simple words.

What JavaScript can do on a page (a preview)

<h2 id="title">Price calculator</h2>
<label>Kilos of sugar: <input id="kg" type="number" value="1" min="1"></label>
<p id="out">Total: KSh 150</p>
<script>
  const input = document.querySelector("#kg");
  const out = document.querySelector("#out");
  input.addEventListener("input", () => {
    const kg = Number(input.value) || 0;
    out.textContent = "Total: KSh " + kg * 150;
  });
</script>

Change the number: the total updates instantly without reloading. You'll learn exactly how in the DOM and events units.

Good habits from day one

• Run code often, after every small change.
• **Use console.log** to check values.
• Read errors instead of panicking.
• Name things clearly (totalPrice, not x).
• Indent consistently (2 spaces is common).
• Type code yourself instead of copy-pasting; your fingers learn too.
• Use AI assistants to explain code and errors, but make sure you understand every line you use.

Common beginner mistakes

Practice tasks

1. Print your name, your town and your favourite food on three lines.
2. Create variables for the price of bread (KSh 65) and quantity (4); print the total.
3. Calculate how many full weeks are in 100 days and the remaining days (use /, Math.floor and %).
4. Open the browser console on any website and do three calculations.
5. Make a deliberate typo, run it, and read the error message.

Summary

• JavaScript is a programming language for behaviour and logic; it runs in browsers, on servers (Node.js), phones and desktops. It is unrelated to Java.
• It makes pages interactive, calculates, stores data, talks to servers and powers full applications.
• Run it in this editor, the browser console, <script> tags (end of body or defer) or Node.js.
• console.log() prints output; comments use // and /* */.
• Variables: const by default, let when the value changes; avoid var.
• Programs run top to bottom; an error stops the script and the message tells you what's wrong.