JavaScript is the programming language that runs inside web browsers, making pages interactive — reacting to clicks, updating content without reloading, validating a form before it's submitted. Unlike PHP (covered in the previous series), which runs on the server before a page is sent to the visitor, JavaScript typically runs directly in the visitor's own browser, on their machine.

Where JavaScript Runs

This course focuses entirely on browser JavaScript first — exactly where most beginners start, and where the immediate, visible feedback of seeing a page react makes learning genuinely engaging.

Embedding JavaScript in HTML — Three Ways

External files are the standard approach in real projects — they keep HTML and JavaScript separated (mirroring how CSS is usually kept in its own file too), and the same script file can be reused across multiple HTML pages.

console.log() — Your Most-Used Tool

console.log() prints a value to the browser's developer console — opened with F12 or right-click → Inspect → Console tab. It's the JavaScript equivalent of PHP's echo/var_dump() from the previous course series, and you'll use it constantly while learning and debugging.

The console can also be typed into directly, like a small interactive scratchpad — typing an expression and pressing Enter immediately shows its result, without needing a full HTML page or script file at all.

Statements and Semicolons

Each instruction is a "statement," conventionally ended with a semicolon — similar to PHP. JavaScript can technically infer missing semicolons in many cases ("automatic semicolon insertion"), but this has subtle edge cases that can cause confusing bugs; this course writes semicolons explicitly throughout, which is the safer, more common professional habit.

Comments

Coding Challenges

Chapter 1 used console.log("Hello, JS!") directly on a literal value. Real code almost always needs to store a value first, under a name, so it can be reused and changed — that's what a variable is. JavaScript has three keywords for declaring one: var, let, and const — only two of which are worth reaching for in modern code.

Declaring a Variable

let name = "Philip"; creates a variable called name, holding the value "Philip". There's no need to declare what type of value it will hold up front — JavaScript figures that out automatically from whatever is assigned.

let vs const — Can It Be Reassigned?

let can be reassigned later; const cannot — trying to assign a new value to a const variable throws an error immediately. The rule of thumb: default to const unless the value genuinely needs to change later, then switch to let. This makes code easier to reason about, since a const guarantees that value never changes anywhere below its declaration.

JavaScript's Core Data Types

Unlike languages with separate integer/decimal types, JavaScript has just one number type covering both. null and undefined are subtly different: undefined means a variable was never assigned anything; null means a value was deliberately set to "nothing" on purpose.

Checking a Value's Type

typeof returns a string naming a value's type — useful while learning, and occasionally in real code when a value's type genuinely isn't known in advance.

Template Literals — Building Strings with Variables

Backticks (`) instead of quotes create a template literal, allowing ${ } to embed variables (or any expression) directly inside a string — far more readable than joining strings together with +.

Coding Challenges

Decisions in JavaScript will look immediately familiar coming from PHP — the syntax is nearly identical. The genuinely important new concept here is truthy and falsy values, and the strong recommendation to use === rather than == almost universally.

Comparison Operators

Truthy and Falsy — Values Treated as true/false in a Condition

if / else if / else

Note else if is always two words in JavaScript — unlike PHP, there's no single-word elseif equivalent here.

The Ternary Operator

Identical syntax and use case to PHP's ternary from Fundamentals Chapter 3 — a compact if/else for simple value assignments.

The Logical OR/AND "Default Value" Trick

switch

Behaves identically to PHP's switch (Fundamentals Chapter 3), including the same fall-through behaviour when break is omitted, and JavaScript's switch always compares using strict equality (===) internally — never the loose comparison rules from ==.

Coding Challenges

for and while work essentially identically to PHP. for...of and for...in are new — and easily confused with each other, since their names look so similar despite doing genuinely different things.

for — Known Repeat Count

Identical structure to PHP Fundamentals Chapter 4 — initialiser, condition, step. Note let i rather than a plain variable — declaring the loop counter with let keeps it properly block-scoped to the loop.

while / do...while

Same behaviour as PHP — checks the condition before each iteration. do...while also exists in JavaScript with identical "runs at least once" semantics.

for...of — Iterating Over Values (Arrays, Strings)

for...of gives you each value directly, one at a time — the closest JavaScript equivalent to PHP's foreach ($array as $value) from Fundamentals Chapter 4. It works on arrays, strings (iterating character by character), and several other "iterable" types covered later in the series.

for...in — Iterating Over Keys/Property Names

for...in gives you each key (property name) — designed for plain objects, where there's no single "value" to iterate directly the way an array has. Objects are covered fully in Chapter 7; this is enough to use for...in productively now.

break and continue

Behave identically to PHP — break exits the loop, continue skips to the next iteration.

Coding Challenges

PHP Fundamentals Chapter 5 covered one way to define a function. JavaScript has three distinct syntaxes, each with real behavioural differences — not just three ways to write the same thing. This chapter covers all three, plus scope, which works similarly to PHP but with one important new wrinkle.

Function Declarations

The most familiar style — looks almost identical to PHP's function syntax (Fundamentals Chapter 5), minus the $ prefix on parameters.

Function Expressions

Here the function itself is treated as a value, assigned to a const variable — exactly like assigning a number or string. This reflects something genuinely fundamental about JavaScript: functions are values, storable in variables, passable as arguments, returnable from other functions ("first-class functions"). Chapter 6's array methods (map, filter) rely entirely on this.

Arrow Functions

Arrow functions are a more compact syntax, introduced in 2015 alongside let/const. A single-expression arrow function (like square above) automatically returns that expression's value — no { } braces or explicit return keyword needed, genuinely useful for short, simple functions.

Default Parameters

Identical idea to PHP's default parameters from Fundamentals Chapter 5 — a fallback value used when the argument is omitted entirely.

Function vs Arrow Function — A Genuinely Important Difference: this

Regular functions get their own this, determined by how they're called. Arrow functions deliberately do not have their own this — they inherit it from their surrounding context instead. This matters significantly once objects (Chapter 7) and classes (Intermediate Chapter 6) are introduced; for now, the practical rule is: prefer regular function syntax for object methods, arrow functions for short standalone helpers and callbacks.

Scope — Mostly Like PHP, With One New Wrinkle

A nested function can read variables from the function it's defined inside — this is new compared to PHP, where functions are never nested this way. The outer function's variables remain inaccessible from completely outside, exactly like PHP — but a function defined inside another one has visibility into its parent's scope. This "remembering" behaviour is called a closure, covered in full depth in Intermediate Chapter 2; this chapter just introduces that nested functions can see outer variables.

Coding Challenges

Chapter 5 established that functions are values that can be passed around. This chapter puts that fact to immediate use: JavaScript arrays come with built-in methods that take a function as an argument and run it against every element. Mastering these four methods replaces almost all manual loop-writing for everyday array work.

Creating and Indexing Arrays

An array is declared with const just like any other value — the array's contents can still change even though the binding itself can't be reassigned, the same rule that applied to objects would apply here too. Square brackets create the array; square brackets with an index read from it.

Adding and Removing Elements

push/pop work at the end of the array and are fast; unshift/shift work at the start and have to renumber every other element, so they're slower on large arrays.

forEach — Run a Function for Every Element

forEach takes a function and calls it once per element, passing that element in as the argument. It's a direct replacement for a for loop (Chapter 4) when the only goal is "do something with each item" — it doesn't build a new array or return a useful value.

map — Transform Every Element Into a New Array

map runs a function against every element and collects the return values into a brand-new array, leaving the original unchanged. Use map whenever the goal is "the same number of items, but transformed" — converting, scaling, formatting, and so on.

filter — Keep Only the Elements That Pass a Test

filter runs a function that returns true or false for each element, and keeps only the elements where it returned true. The result is a new, possibly shorter, array — the original is left alone, same as map.

reduce — Combine Every Element Into a Single Value

reduce is the least intuitive of the four, and the most powerful. Its function takes two arguments — the running result so far (accumulator) and the current element — and returns the new running result. The 0 after the function is the starting value for the accumulator, used before any element has been processed.

Chaining Methods Together

Because filter and map each return a new array, their results can be chained directly into the next method call. This reads almost like a sentence: "filter for orders over 5, double each one, then sum them up" — and is the idiomatic JavaScript style for this kind of data processing.

Coding Challenges

Chapter 6 covered arrays — ordered lists of values. Objects solve a different problem: grouping named pieces of related data together. Chapter 5's counter example already used one briefly; this chapter covers objects properly, including how methods and this actually work.

Creating an Object and Reading Properties

An object is a set of key: value pairs, wrapped in curly braces. Each key (also called a property name) maps to a value, which can be of any type — string, number, boolean, even another object or array.

Dot Notation vs Bracket Notation

Dot notation (person.name) is shorter and used by default. Bracket notation (person["name"]) is required whenever the property name is stored in a variable, contains spaces, or is computed at runtime — dot notation cannot do any of that.

Adding, Updating, and Deleting Properties

Properties can be added or changed after creation simply by assigning to them — even though person is declared with const, exactly the same rule that allowed array contents to change in Chapter 6. const only locks the variable binding itself, never the object's internal contents.

Methods — Functions Stored as Properties

A property whose value is a function is called a method. Inside a method, this refers to the object the method was called on — person in this case — which is how greet can reach person.name without naming person directly. This is exactly the regular-function behaviour flagged in Chapter 5: methods should use the function keyword, not arrow syntax, specifically so this works.

Nested Objects and Arrays of Objects

Objects and arrays nest freely inside each other. products here is the same array-of-objects shape used in Chapter 6's cart challenge — it's worth recognising this pattern, since it's extremely common for representing real-world lists of records (rows from a database, items in a cart, entries in a form).

Looping Over an Object's Properties

for...in (introduced in Chapter 4 for arrays, where it's best avoided) is the natural fit for objects — it loops over each property name, which can then be used with bracket notation to read the matching value. Notice bracket notation is required here, since subject is a variable holding the property name.

Coding Challenges

Every chapter so far has run entirely in the console. The DOM (Document Object Model) is the browser's live, in-memory representation of the HTML page — and JavaScript can read and change it directly, which is how a page updates without a reload. This chapter is the bridge between "writing JavaScript" and "JavaScript that actually does something visible."

Selecting a Single Element

document.querySelector() takes a CSS selector — the same syntax used in a stylesheet — and returns the first matching element on the page, or null if nothing matches. #intro selects by ID, .list-item by class, exactly as in CSS.

Selecting Multiple Elements

querySelectorAll() returns every matching element as a NodeList — array-like enough that forEach from Chapter 6 works directly on it, even though it's technically not a true array.

Reading and Changing Text Content

textContent is a property on the element, just like the object properties from Chapter 7 — reading it returns the current text, and assigning to it updates the page immediately, with no reload required.

Changing Styles and Classes

element.style sets individual CSS properties directly (camelCase instead of CSS's hyphenated names — backgroundColor, not background-color). classList is almost always the better choice for anything beyond a one-off tweak, since it keeps styling rules in CSS where they belong and JavaScript just toggles which rules apply.

Responding to Events

addEventListener takes an event name ("click", "input", "submit", and many others) and a function to run when that event happens. This is the first genuinely common, practical use for the function-as-a-value behaviour from Chapter 5 — the function itself is handed over and the browser calls it later, whenever the click actually occurs.

Creating New Elements

createElement builds a new element entirely in memory — it doesn't appear on the page until it's attached somewhere with appendChild (or a similar method). This pattern — combined with an array of data and a loop — is how real pages render dynamic lists.

Coding Challenges

Chapter 8 covered reaching into the page and reacting to clicks. The most common real-world use of that is forms — text fields, checkboxes, dropdowns — where a page needs to read what the user typed, check it, and respond. This chapter ties together querySelector, addEventListener, and the conditional logic from Chapter 3 into one practical workflow.

Reading an Input's Value

Unlike most elements, a form input's current text lives in its value property — not textContent. value is always a string, even for a number input, which matters when doing arithmetic with it.

Listening for Input Changes

The "input" event fires every time the field's value changes — every keystroke, paste, or autofill — making it the right choice for live feedback like character counters or instant validation messages, as opposed to "change", which only fires once the field loses focus.

Handling Form Submission

A form's default behaviour on submit is to reload the page and send its data to a server — almost never what's wanted when JavaScript is handling things instead. event.preventDefault() stops that default behaviour, while still letting the rest of the handler run normally.

Validating Input Before Accepting It

.trim() removes leading/trailing whitespace, so a field containing only spaces is correctly treated as empty. Using return inside the handler stops execution immediately when validation fails, the same early-exit pattern functions have used since Chapter 5 — nothing after it runs until the user fixes the problem and resubmits.

Checkboxes and Select Dropdowns

Checkboxes use checked (a boolean) rather than value for their state. Dropdowns (<select>) use value, same as text inputs, returning whichever <option>'s value attribute is currently selected.

Coding Challenges

Every example so far has run top to bottom, instantly. Real pages constantly wait on things that take time — loading data from a server being the most common. JavaScript handles this with promises, and the modern, readable way to work with them: async/await. This is the final Fundamentals chapter, and it pulls together functions (Ch 5), objects (Ch 7), and the DOM (Ch 8–9) into one realistic workflow.

The Problem: JavaScript Doesn't Wait

setTimeout schedules a function to run later without pausing anything else. JavaScript moves straight on to the next line rather than waiting — this is what "asynchronous" means: code that will run eventually, not necessarily in the order it's written.

Promises — A Placeholder for a Future Value

A Promise represents a value that doesn't exist yet, but will at some point — either successfully (resolve) or with an error (reject). .then() registers a function to run once the promise resolves, receiving the resolved value as its argument.

async/await — Promises Without the .then() Chains

async before a function lets await be used inside it. await pauses that function (not the whole page) until the promise resolves, then continues with the resolved value — reading top-to-bottom almost exactly like the synchronous code from every earlier chapter, while still being genuinely non-blocking.

fetch — Getting Real Data from a Server

fetch() requests a URL and returns a promise. The first await gets the response itself; response.json() then parses the body text into a real JavaScript object — another promise, needing its own await — at which point Chapter 7's dot/bracket notation works on it normally.

Handling Errors with try/catch

A network request can fail — no connection, server error, invalid URL. Wrapping await calls in try/catch means a failure jumps straight to the catch block instead of leaving an unhandled error. Without this, a failed request can silently break the rest of the function with no clear feedback to the user.

Putting It Together: Fetch + DOM

This is the complete, realistic pattern: show a loading state immediately, fetch data, then update the page with the result — or an error message if it fails. Every chapter since Chapter 5 contributes something here: functions, objects, DOM updates, and now asynchronous waiting.

Coding Challenges