JavaScript Basics: Variables, Functions & Your First Script

JavaScript is the programming language of the web. HTML gives a page structure and CSS makes it look good — but JavaScript makes it do things: react to clicks, update text, validate forms, fetch data and much more.

Variables: storing information

A variable is a named container for a value. Modern JavaScript uses two keywords:

const name = "Coder";   // const = value never changes
let clicks = 0;         // let = value can change later

Use const by default, and let only when you know the value will change (like a counter). You will still see var in old tutorials — avoid it in new code.

Data types you will meet first

Type	Example	Used for
String	"Hello"	Text
Number	42, 3.14	Maths, counters
Boolean	true / false	Yes/no decisions
Array	[1, 2, 3]	Lists of values
Object	{ name: "Ali" }	Grouped data

Functions: reusable blocks of code

A function is a block of code you can run whenever you want:

function greet() {
  console.log("Hello!");
}

greet(); // runs the function

Functions can also accept parameters and return results:

function add(a, b) {
  return a + b;
}

const total = add(2, 3); // 5

Connecting JavaScript to the page

The magic happens when JavaScript talks to your HTML. Two key tools:

1. document.getElementById("...") — find an element on the page.
2. .addEventListener("click", fn) — run a function when it is clicked.

document.getElementById("btn").addEventListener("click", greet);

Try it yourself

The editor below has a heading, a button and an empty paragraph. The JavaScript tab:

• stores a name in a const
• counts clicks with a let variable
• updates the paragraph every time you press the button

Try these challenges:

1. Change the name variable to your own name.
2. Make the click counter increase by 2 instead of 1.
3. Change the greeting text to something else.
4. Bonus: after 5 clicks, make the message say "That's enough clicking!" (hint: use an if statement).

Press Run after each change to see the result instantly.

Practice exercises

These build on the same counter page in the editor. Each one uses a concept from a section above.

Exercise 1 (easy): Add a const city variable with your city's name, and include it in the greeting message — "Hello Coder from Karachi! …".

Solution:

const city = "Karachi";
// inside greet(), extend the message:
"Hello " + name + " from " + city + "! You clicked " + clicks + " time(s).";

Exercise 2 (medium): Write a function double(n) that returns n * 2 (see the add example above), then show doubled clicks in the message: "…clicked 3 time(s), doubled: 6".

Solution:

function double(n) {
  return n * 2;
}
// in the message:
" time(s), doubled: " + double(clicks);

Exercise 3 (challenge): Add a second button labelled "Reset" in the HTML tab (give it id="reset"), then wire it up in JavaScript: clicking it should set clicks back to 0 and clear the output paragraph. Notice why clicks had to be let, not const.

Solution:

<button id="reset">Reset</button>

document.getElementById("reset").addEventListener("click", function () {
  clicks = 0;
  document.getElementById("output").textContent = "";
});