How the web works

01The problem

Tallybook's customers pay invoices from a web page on their phones. The page today is a single form that reloads everything on every click, shows totals only after submitting, and is hard to use with a screen reader or on a small screen. In this course you'll build a better one: the "pay an invoice" page of Tallybook's customer portal, talking to the API from the Databases and APIs course.

02The concept

A page load, step by step

1. The browser asks a server for a page (an HTTP request, as in the Linux course).
2. The server returns HTML, which links to CSS and JavaScript files; the browser fetches those too.
3. The browser builds the DOM, a live tree of the page's elements, applies the CSS, and runs the JavaScript.
4. JavaScript can change the DOM, react to clicks and typing, and call APIs without reloading the page.

Three languages, three jobs

Running JavaScript today

Every browser has a console for running JavaScript. Open any page, press F12 (or Ctrl+Shift+J on Windows, Cmd+Option+J on a Mac) and choose Console. Type a line and press Enter. Every JavaScript example in this course runs there. For the HTML examples, save the code as a file ending in .html and open it in your browser, or paste it into a free online editor such as CodePen.

03Example

Your first lines of JavaScript. console.log prints a value:

console.log("Hello from Tallybook");
console.log(2 + 2, typeof "2", "2" + 2, "6" * 2);

Hello from Tallybook
4 string 22 12

The last two results surprise most people. + with a string joins text, so "2" + 2 is "22". But * only works on numbers, so JavaScript quietly converts "6" to a number. Values from forms always arrive as text, so this matters on a payment page: convert them deliberately (lesson 2).

const amountFromForm = "1500";
console.log(amountFromForm + 500);
console.log(Number(amountFromForm) + 500);

1500500
2000

04Walkthrough

1. Open your browser's console and run both blocks. Then try "10" - 3 and "10" + 3.
2. On any website, open DevTools' Elements tab and find the page's <h1>. That's the DOM.
3. Open DevTools' Network tab and reload a page. How many files did it load?
4. For Tallybook's pay-an-invoice page, list one job for each of HTML, CSS and JavaScript.

05Practice

06Check your understanding