What JavaScript Is & Linking app.js

The behaviour layer

HTML labels the content and CSS arranges it. JavaScript makes a page respond: it can read an input, calculate a total and change displayed text without downloading a new HTML document. The browser runs it against a live DOM tree made from your HTML.

Changing the DOM does not edit index.html on disk. If your script adds a message and you reload without saving that script, the original source is loaded again. Distinguish source files, the DOM you inspect in Elements, and the current values in running JavaScript.

Build a tiny first check in your existing project

Open studio-hq in VS Code. In the folder containing index.html, create app.js—not app.js.txt—and add:

console.log('Practice script loaded');

In index.html, add the link once:

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

A deferred classic external script is downloaded while HTML is parsed, then executes after that parsing finishes. It avoids selecting a button before the button exists. The src path is relative to the page; if app.js is inside js/, use js/app.js. This example assumes the same folder.

From that folder run npx serve ., accept the package prompt if appropriate and open the exact printed local URL. Keep the terminal running. This serves your files; it does not edit or publish them. Stop it with Ctrl+C later.

Prove which layer works

Open browser DevTools (F12 on many Windows keyboards; Cmd+Option+I on Mac) and choose Console. Reload. Expect your practice message. In Network, locate app.js: it should load successfully rather than 404. If the script never appears, inspect the HTML link. If it appears but errors, inspect its response and the first Console error.

A message shown once after a reload proves the script ran. A visible page alone does not prove JavaScript is connected—plain HTML still renders when the script is missing.

Change one visible element

Add a practice paragraph in your HTML:

<p id="script-status">Waiting for JavaScript</p>

In your script, study this small selection/update:

const status = document.getElementById('script-status');
if (status) {
  status.textContent = 'JavaScript is connected';
}

getElementById uses the ID without #. It returns an element or null if there is no match. The guard checks the element exists before setting its text. textContent changes plain text, not the file. Inspect Elements to find the new text, then inspect index.html in the editor: its original waiting sentence remains.

You do not need to understand every function syntax yet. Recognise the flow: load a file, find an element, change a property. The upcoming lessons explain values, functions and clicks before you build a full interaction.

Read the first error accurately

JavaScript errors usually show a type, message and source location. A SyntaxError can prevent the file from executing at all; a ReferenceError names a missing variable; a null-property TypeError often means a selector/timing mismatch. The later debugger branch explores them deeply, but every learner needs this basic triage.

Do not paste untrusted code from random pages into Console, especially on sites where you are signed in. Your practice code belongs on your own local page. Never include credentials in logs or tutor prompts.

Guided rehearsal and readiness

Change your practice sentence, save and reload; predict the message before looking. Temporarily misspell only the script path and confirm Network reports the missing file, then restore it. Temporarily change the paragraph ID and explain why selection returns null; restore it before continuing.

Before activity 2.1, show that index.html and app.js load, the script logs once, and the selected paragraph updates. You should be able to locate the script link, explain defer and distinguish a file-load failure from a later interaction bug. The DOM-events lesson will add a click so the visitor, not just page startup, drives a change.