JavaScript Basics: Make a Web Page Think and React

What is JavaScript and how to add it to a page

JavaScript (JS) is a programming language that runs inside the web browser (and also on servers with Node.js). It makes pages interactive: check forms, change text, show pop-ups, run games.

Add it with a <script> tag, inside the page or as a separate file:

<script>
  console.log("Hello");
</script>
<script src="app.js"></script>

Output: console.log() (developer console), alert() (pop-up), document.write() (old style) or changing an element's text with document.getElementById("id").textContent = …. Input: prompt() or a form field's .value. Comments: // one line or /* many lines */. JavaScript is case-sensitive: Score and score are different.

Variables and data types

A variable is a named box for a value.

let score = 5;        // can change later
const PI = 3.14;      // cannot be reassigned
var old = 1;          // older style, avoid

Names may use letters, digits, _ and $, but cannot start with a digit or be a keyword (like if). Common data types:

• Number: 5, 3.14 (one type for whole and decimal numbers)
• String: text in quotes, "Asha" or 'Hi'
• Boolean: true or false
• undefined (no value yet) and null (empty on purpose)
• Array: a list, [4, 1, 3]; Object: {name: "Asha", age: 15}

typeof x tells the type. JavaScript is dynamically typed: one variable can hold different types at different times.

Operators

• Arithmetic: + − * / % (remainder) ** (power), ++ and −−. Example: 7 % 3 = 1.
• Assignment: = += −= *= /=. Example: x += 2 means x = x + 2.
• Comparison: > < >= <= == != === !==. Use === (equal value and type): 5 == "5" is true, but 5 === "5" is false.
• Logical: && (AND), || (OR), ! (NOT).
• String joining: "Hi " + "Asha" gives "Hi Asha". Careful: "5" + 2 = "52" (text), but "5" * 2 = 10.
• Ternary: cond ? a : b.

Conditions: if, else if, else and switch

let marks = 72;
if (marks >= 90) {
  grade = "A";
} else if (marks >= 33) {
  grade = "Pass";
} else {
  grade = "Try again";
}

The first true condition runs, and the rest are skipped. switch compares one value with many cases:

switch (day) {
  case 0: name = "Sunday"; break;
  case 6: name = "Saturday"; break;
  default: name = "Weekday";
}

Forgetting break makes the code fall through to the next case.

Loops and simple programs

// for: when you know how many times
let sum = 0;
for (let i = 1; i <= 5; i++) { sum += i; }   // sum = 15

// while: repeat while a condition is true
let n = 1;
while (n < 100) { n = n * 2; }               // n = 128

// do…while runs at least once
do { x--; } while (x > 0);

break leaves a loop; continue skips to the next round. Simple programs to practise: sum of 1 to n, multiplication table, even or odd (n % 2 === 0), largest of three numbers, factorial, reversing a number, counting vowels in a word.

Functions

A function is a named block of code. Define it once, call it many times.

function area(l, b) {      // l, b are parameters
  return l * b;           // send a value back
}
let a = area(4, 3);        // 4, 3 are arguments → a = 12

const square = x => x * x; // arrow function
const greet = function(n) { return "Hi " + n; }; // function expression

Variables made with let/const inside a function are local (only seen inside); those outside are global. A function with no return gives undefined. Default parameters: function hi(n = "friend").

String, array and Math methods

String

Index starts at 0. "hello".length → 5; toUpperCase(), toLowerCase(); charAt(1) → "e"; indexOf("l") → 2; slice(1, 4) / substring(1, 4) → "ell"; replace("h", "j"); trim(); split(","); includes("ell") → true.

Array

let a = [4, 1, 3]; a[0] → 4; a.length → 3; push(x) adds at end, pop() removes last, unshift/shift work at the start; indexOf, includes, join("-"), reverse(), slice, splice, concat. sort() sorts as text, so for numbers use sort((x, y) => x - y). Loop helpers: forEach, map, filter.

Math

Math.round(4.5) → 5, Math.floor(4.9) → 4, Math.ceil(4.1) → 5, Math.max(2, 8) → 8, Math.min, Math.sqrt(16) → 4, Math.pow(2, 3) → 8, Math.abs(-3) → 3, Math.PI. Random whole number 1–6: Math.floor(Math.random() * 6) + 1.

Event handling

An event is something that happens on the page: a click, a key press, typing in a box, the page loading, the mouse moving over an element. An event handler is the function that runs when it happens.

<button id="btn">Click me</button>
<p id="out"></p>
<script>
  let count = 0;
  function clicked() {
    count++;
    document.getElementById("out").textContent = "Clicked " + count;
  }
  document.getElementById("btn").addEventListener("click", clicked);
</script>

Common events: click, dblclick, mouseover, mouseout, keydown, input, change, submit, load, focus, blur. Older inline style: <button onclick="clicked()">. In a form, event.preventDefault() stops the page reloading so JavaScript can check the inputs first.

Key formulas and definitions

• let x = 5; (changeable) · const y = 10; (fixed)
• Types: number, string, boolean, undefined, null, array, object
• === checks value and type; == converts first
• if (cond) { … } else if (cond2) { … } else { … }
• for (let i = start; i <= end; i++) { … } · while (cond) { … }
• function name(p1, p2) { return …; } · const f = x => x * 2;
• Index starts at 0: last index = length − 1
• Random 1 to n: Math.floor(Math.random() * n) + 1
• el.addEventListener("click", handler)

Worked examples

Common mistakes

• Using = (assign) instead of === (compare) inside if. if (x = 5) always runs because it sets x to 5.
• Forgetting that "5" + 2 gives "52". Turn input text into a number with Number() or parseInt() first.
• Thinking the first index is 1. Arrays and strings start at index 0, so the last is length − 1.
• Writing addEventListener("click", clicked()) with brackets. That runs the function at once; pass clicked without ().