JavaScript and the web

Introduction

Every web page is made of three languages working together:

This course starts with JavaScript on its own, as a programming language, and ends with it changing real pages. The order matters: changing a page is easy once you can think clearly about values, decisions and functions, and very confusing before that. JavaScript also runs outside the browser (on servers, with Node.js), and the language is the same everywhere.

How it works

A JavaScript program is a list of statements, run one after another from top to bottom. console.log(...) prints values to the console, the place developers read a program's output:

// A first program: print some values.
console.log("Hello, web!");
console.log(42);
console.log(7 * 6);             // worked out first, then printed
console.log("Two plus two is", 2 + 2);

Press Visualize to run it step by step. Text goes in quotes ("Hello" or 'Hello'), and numbers do not. // starts a comment: a note for people, which JavaScript ignores.

Arithmetic. The operators are +, -, *, / and %. The last one is the remainder after dividing: 17 % 5 is 2. It looks odd at first, but it answers useful questions, such as "how many minutes are left over after the full hours?". Math.floor(x) rounds down to a whole number, so Math.floor(17 / 5) is 3.

Variables. A variable is a name for a value. let creates one, and = stores a value in it. Giving a variable a new value replaces the old one. Words such as city make a program readable, because the name says what the value means.

Reading input. prompt() reads one line of input. In a browser it shows a dialog box, and here it reads the next line of the input box. It always gives text, even if the line looks like a number, so Number(prompt()) is needed before arithmetic. When there are no more lines, prompt() gives null.

Putting values into text. A template string uses backticks, and puts any value inside with a dollar sign and braces, as in `Hello, ${name}!`. This is easier to read than joining many pieces with +.

Strict mode. StepVioz runs every program in strict mode, the safer form of JavaScript that most modern code uses. Mistakes such as using a variable that was never declared stop the program with an error instead of passing silently.

Syntax

// A comment
let total = 3 * 4;                 // create a variable
total = total + 1;                 // give it a new value
const name = prompt();             // read a line of text
const age = Number(prompt());      // read a line and convert it to a number
console.log(`${name} is ${age}`);  // print

Example

The variables panel shows each one appear, then change.

// Statements run one at a time; variables hold values.
let city = "Dhaka";
let year = 2026;
console.log(city, year);
year = year + 1;        // a new value replaces the old one
console.log("Next year:", year);

Line by line

1. The comment is skipped.
2. let city = "Dhaka" creates a variable holding text.
3. let year = 2026 creates a variable holding a number, with no quotes.
4. console.log(city, year) prints both, separated by a space.
5. year = year + 1 works out the right side first, using the old value, and then stores the result. There is no let this time, because the variable already exists.
6. The last line prints the new value, 2027.

Expected result

Dhaka 2026
Next year: 2027

In the real world

Every interactive part of a website starts here. A shopping cart keeps its total in a variable, a form reads what you typed, and developers print values to the console while hunting for bugs. Open your browser's developer tools on any page, and you will find a real console in which you can type these same statements.

Common mistakes

• Forgetting the quotes around text. console.log(Hello) looks for a variable called Hello.
• Capital letters in the wrong place. JavaScript is case-sensitive, so Console.log and console.Log do not exist.
• Doing arithmetic on input without converting it. prompt() + 1 joins text, so an input of 5 gives "51".
• Using document or window in these console programs. They belong to a web page, which comes in the last lessons.

Best practices

• Choose names that say what a value means: totalPrice, not x.
• End each statement with a semicolon. JavaScript can often guess where one is missing, but writing them avoids surprises.
• Use comments to explain why, because the code already shows what.
• Run your program often, after every small change.

Summary

A program is a list of statements run in order. console.log prints, let creates a variable and = gives it a value. prompt reads a line of text, Number converts it, and a template string puts values into text.

Mark lesson complete