Make the browser follow your instructions

Why we are here

Harbor Together is a fictional community-events page. Its HTML already names events and its CSS makes them readable. A visitor now wants to filter events, remember a short list and check practice form fields. JavaScript can coordinate those actions. Our first job is smaller: make one instruction run, observe the evidence and change it deliberately. You need basic HTML elements, labels and CSS selectors. You do not need previous programming experience.

A program is a written set of instructions. The browser reads JavaScript syntax and carries out operations. The language supplies values, decisions and functions; the browser supplies useful facilities such as the page document. This distinction matters later: a calculation can run in many JavaScript environments, but document belongs to a browser page. A terminal running Node does not automatically have one.

Set up once, then repeat a small loop

Extract the whole ZIP into a folder you own. Keep its folders together. Use a plain-text code editor; a word processor may insert formatting or smart quotes. Open the folder, not just a single file. Turn on visible file extensions if your operating system hides them. A file named app.js.txt will not behave like app.js.

The course uses ordinary HTML, CSS and JavaScript with no package installation or build step. For all examples, start a local static server from the extracted course folder. If Python 3 is already installed, open a terminal in that folder and run:

python3 -m http.server 8000 --bind 127.0.0.1

On Windows with the Python launcher, use py -m http.server 8000 --bind 127.0.0.1. Open http://127.0.0.1:8000/ in your browser. Keep the terminal running; Ctrl+C stops the server. If port 8000 is occupied, use 8001 and change the URL too. This server only serves files. It does not process registrations. Serve this course folder, never a folder containing personal files. Binding to 127.0.0.1 keeps this practice server on your own machine.

If neither Python command exists, use an already installed editor's local preview server, or ask your instructor to help install Python from its official website. Do not disable browser security to make file:// work. You may read the lesson HTML directly without a server, but module and fetch exercises need HTTP. The browser runs JavaScript natively; the server merely delivers its files.

Your first observable program

Open version 01 — download the course ZIP (Extract it and follow the included setup instructions for examples/01/index.html.), then use your browser's Developer Tools menu to open the Console. Menu names and keyboard shortcuts vary. The Console is a scratch area for evaluating an expression and viewing messages from a page. Type 2 + 3 yourself and press Enter. The result is 5. Type "Harbor" + " Together"; the quotes mark text and the result joins it. Never paste unknown code into a console on a signed-in site. Here you are inspecting your own local examples.

Now open examples/01/app.js in your editor:

const siteName = "Harbor Together";
console.log(siteName);
console.log(2 + 3);

The first line gives a value a name. The second asks the Console to display that named value. The third evaluates addition and displays its answer. The parentheses pass a value to console.log. The semicolon marks the end of an instruction. // begins a comment that explains a line to a person; the browser does not execute the comment. Capitalization and punctuation count: siteName and sitename are different names.

The page includes this in its head:

<script defer src="app.js"></script>

src locates the file relative to the HTML. defer lets the browser finish parsing the HTML before this external classic script runs. We will use modules later. Save an edit, reload the page, then observe its Console. An unsaved edit changes nothing in the browser. A browser reload reruns the file; it does not preserve the old JavaScript variables.

Predict, run, explain

Change the final calculation to 2 + 3 * 4. Predict the answer before reloading. Multiplication happens first, giving 14. Change it to (2 + 3) * 4; the grouped addition happens first, giving 20. Programming becomes easier when you state an expected result and compare it with evidence instead of making many unexplained edits.

A red Console message is evidence, not a verdict on your ability. Misspell console as consol, reload, read the reported file and line, then repair it. A ReferenceError means a name could not be resolved in that situation. Fix the first relevant error before chasing later symptoms. Console output may also show an extra undefined after console.log(...): logging displays a message, while the call itself returns no useful value. Those are two separate observations.

Before moving on

You should be able to locate the source file, change one instruction, save, reload and find its output. If the Console is silent, check the page URL, script path and selected Console filter before rewriting the program. A 404 for app.js means a path problem. A syntax error means the file arrived but the browser could not understand it. These require different fixes.

Reference: MDN introduction. The course's project, teaching sequence and examples are original.

Practice and next step

Open exercise 01. Attempt the prediction before running code. Record the observed result and explain any mismatch. The explained solution is separate so you can choose when to look.