JavaScript on a Web Page

After this lesson you can

• Load a script into a web page with a script tag and open the page with Live Preview
• Use the browser's Console to see a script's output and errors and to try a line of JavaScript

Key takeaways

• A web page is a text file of HTML. Its tags, such as <h1> for a heading, say what each piece of the page is.
• The tag <script type="module" src="app.js"></script> loads app.js into the page. Put it at the end of the body, and open the page with Live Preview.
• The Console, in the browser's developer tools (F12), shows what console.log prints and any errors, with the file and line beside each one.
• When a page looks fine but doesn't do what it should, the Console is the first place to look.

So far your JavaScript has printed into a terminal. Most JavaScript in the world runs somewhere else: inside a web page, in a visitor's browser. Every button that reacts, every form that checks itself and every game in a browser tab starts the way this lesson does: a page loads a JavaScript file. And when a button "does nothing", the first thing a developer does is open the browser's Console, which you'll learn to use here.

You don't need to know HTML for this course. The page in this lesson comes ready-made, and this lesson explains only the parts JavaScript needs.

A web page in a few lines

A web page is a text file, written in HTML, that a browser turns into the page you see. HTML works like the labels on moving boxes: each piece of the page is wrapped in a label that says what it is. Those labels are called tags, and they're written in angle brackets.

• <h1> (read "h-one") starts the page's main heading, and </h1>, with a slash, ends it.
• <p> starts a paragraph, and </p> ends it.

A start tag, its end tag and everything between them make one element: the heading element, the paragraph element.

In your daily-grind folder, make a file named index.html with this in it. It's the page's whole file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Daily Grind</title>
</head>
<body>
  <h1>The Daily Grind</h1>
  <p>Today's specials are on the chalkboard inside.</p>
  <script type="module" src="app.js"></script>
</body>
</html>

Most of it is the standard wrapping every web page has, and you can copy it as it is. Three lines are the ones that matter here: the heading, the paragraph, and the <script> line. If you'd like to learn what every line means, the HTML in Depth course covers HTML from the start.

The script tag loads your JavaScript

The <script> element is how a page says "and run this program too". It's like a note on a package: "instructions inside, see attached".

<script type="module" src="app.js"></script>

• src="app.js" names the file to load, src being short for source. The file sits in the same folder as the page.
• type="module" says the file is a modern JavaScript module. Modules are how bigger programs are split into files, which Module 3 teaches. Every page in this course loads its script this way.
• The <script> element goes at the end of the page's body, right before </body>, so the heading and paragraph are already on the page when the script runs.

Now make app.js, in the same folder, with two statements:

console.log("Good morning from The Daily Grind!");
console.log("Pumpkin Spice Latte: $5.25");

Open the page with Live Preview

A real website sends its pages from a web server, a program that hands files to a browser when it asks for them. Live Preview runs a small web server on your own computer, so your page arrives the way a real site's would.

1. In VS Code's Explorer, right-click index.html and choose Show Preview. The page opens in a panel inside VS Code, showing the heading and the paragraph.
2. To use the browser's developer tools, open the page in your browser instead: press Ctrl+Shift+P (Cmd+Shift+P on macOS) to open the Command Palette, and choose Live Preview: Show Preview (External Browser).

The address in the browser starts with http://127.0.0.1:. The 127.0.0.1 part is the address every computer uses for itself, so the page comes from your own computer.

Live Preview matters because of type="module". If you double-click index.html instead, the address starts file:///, and the browser refuses to load a module from a file: the page shows, but app.js never runs. Its Console explains why, with a message that starts like this:

Access to script at 'file:///C:/Users/you/Documents/javascript-course/daily-grind/app.js' from origin 'null' has been blocked by CORS policy

That message means "open me from a server". Close the tab and use Live Preview.

The Console: where a page's JavaScript talks to you

The page shows the heading and the paragraph, but no specials: console.log doesn't write on the page. It writes in the browser's Console, a panel in the developer tools (DevTools for short) that every browser has built in.

• Windows: press F12, or Ctrl+Shift+J to go straight to the Console.
• macOS: press Cmd+Option+J in Chrome or Edge.

Click the Console tab if it isn't open. Your two lines are there, and the file and line number of each one is on the right:

Good morning from The Daily Grind!          app.js:1
Pumpkin Spice Latte: $5.25                  app.js:2

The Console also runs JavaScript you type. Click next to the > at the bottom, type 3 * 4.75 and press Enter: it answers 14.25. Type console.log("Hello from the Console") and it prints the line, then undefined. That second word is the Console reporting that console.log gave nothing back; you can ignore it for now, and the Functions chapter explains it.

Errors show up in the Console too

Change line 2 of app.js to consol.log("Pumpkin Spice Latte: $5.25");, save, and reload the page (F5, or Cmd+R on macOS). The page looks exactly the same, and that's the point: a broken script doesn't break how the page looks. The Console shows the problem in red:

Good morning from The Daily Grind!                 app.js:1
Uncaught ReferenceError: consol is not defined     app.js:2
    at app.js:2:1

It's the same error Node gave you in Your First JavaScript Program: the name ReferenceError, the message consol is not defined, and the file and line, app.js:2. Uncaught means nothing in the program stepped in to handle the error, so the script stopped there. Click app.js:2 and DevTools opens the file at that line. Fix the typo, save and reload, and the red line is gone.

Try it. Add a third special to app.js, save and reload, and find it in the Console. Then a peek at what's coming: add this line at the end of app.js, save and reload.

document.querySelector("h1").textContent = "The Daily Grind is open!";

The heading on the page changes. That's JavaScript changing a web page, and Module 4 teaches you how it works.

Check yourself

2 questions to try on the lesson page.

So what

Every interactive page starts with a <script> element that loads a JavaScript file, and the Console is where that JavaScript talks to you: what it printed, what went wrong and on which line. Opening the Console is the first move when a page doesn't do what it should.

Key terms

• Script
• Tag
• Module script
• Browser Console
• Developer Tools

Cheat sheets

• JavaScript on a Web Page