Your First Script

Typing JavaScript into the console is great for experimenting, but real code lives in files. In this lesson, you will create your first .js file, add a script to it, and connect it to the STO site so it runs automatically when the page loads.

What a .js file is

A .js file is plain text — nothing more. You can open it in any text editor and read it directly. The .js extension tells the browser (and your editor) that the file contains JavaScript.

There is no special structure required. No wrapper, no boilerplate. JavaScript code starts on line 1.

Creating main.js

In the STO project, create a new file at:

scripts/main.js

If a scripts folder does not exist at the root of your project, create it. This is where client-side JavaScript lives alongside the HTML files and stylesheet.

Open main.js in your editor. It is empty. That is correct — you are about to write the first line.

Writing the first script

Add the following to main.js:

console.log('STO — JavaScript is loaded.');
document.title = 'Summit Trail Outfitters — JS Loaded';

The first line prints a message to the console when the script runs. The second line changes the browser tab title — a visible, instant confirmation that your JavaScript executed.

Save the file.

To run this code in the browser, connect main.js to your HTML. Open index.html and add the following inside the <head> element, just before </head>:

<script src="scripts/main.js" defer></script>

The defer attribute tells the browser to download the script in the background while the rest of the HTML loads, then execute it once the page is ready. You will learn exactly why defer matters in the next lesson.

Save index.html.

Comments in JavaScript

Comments are notes you leave in the code that the browser ignores completely. They explain what your code does and why.

Single-line comment:

// This logs a confirmation message to the console
console.log('STO — JavaScript is loaded.');

Multi-line comment:

/*
  main.js
  Entry point for STO client-side JavaScript.
  This file is loaded with defer on every page.
*/

Single-line comments use //. Everything after // on that line is ignored. Multi-line comments open with /* and close with */.

Get into the habit of adding a short comment at the top of each file explaining what it does. Future you will thank present you.

Semicolons

JavaScript statements end with a semicolon. Technically, semicolons are optional in many cases — the language has automatic semicolon insertion (ASI) rules that add them for you. However, ASI has edge cases that trip up beginners in confusing ways.

This course uses semicolons consistently on every statement. It is a small habit that eliminates an entire category of subtle bugs.

console.log('Tour: Cascade Ridge Trek');  // ✓ consistent
document.title = 'Summit Trail Outfitters';  // ✓ consistent

How to verify it works

Open index.html in Chrome. Open DevTools (Console tab). You should see:

STO — JavaScript is loaded.

Check the browser tab — the title should now read Summit Trail Outfitters — JS Loaded.

If you do not see the log message, double-check that the <script> tag is inside the <head> of index.html and that the src path is scripts/main.js.

Exercise

Add the following to your main.js file. Write each statement on its own line with a comment above it explaining what it does:

// Log the site name
console.log('Summit Trail Outfitters');

// Log the price of the Cascade Ridge Trek
console.log(249);

// Log a welcome message for visitors
console.log('Welcome to Summit Trail Outfitters. Explore our guided hikes.');

// Update the browser tab title
document.title = 'Summit Trail Outfitters — JS Loaded';

Save the file and reload the page in Chrome. Because main.js is now linked to index.html, the console logs appear automatically on every page load. Confirm all three log messages appear in the Console tab and check that the browser tab title has updated.

Recap

A .js file is plain text. JavaScript code starts on line 1 — no boilerplate required.
Create scripts/main.js at the root of the STO project as the entry point for client-side JavaScript. Link it to HTML with <script src="scripts/main.js" defer></script> in the <head>.
document.title changes the browser tab title — a quick, visible way to confirm a script ran.
Single-line comments use //. Multi-line comments use /* */. Comments are ignored by the browser.
This course uses semicolons on every statement to avoid edge-case bugs from automatic semicolon insertion.