What Is JavaScript?

HTML gives a web page its structure. CSS gives it its appearance. JavaScript gives it its behavior. These three languages do completely different jobs, and every web page you have ever used runs all three.

The three-layer model

Think of a web page like a building:

• HTML is the skeleton — the beams, walls, and floor plan. It defines what exists on the page and what it means.
• CSS is the interior design — the paint, furniture, and lighting. It controls how everything looks.
• JavaScript is the electricity and plumbing — the systems that make things respond and move. It controls what happens when a user does something.

<!-- HTML: what exists -->
<button class="btn-book">Book This Tour</button>

/* CSS: how it looks */
.btn-book {
  background-color: #2c4a1e;
  color: white;
  padding: 0.75rem 1.5rem;
}

// JavaScript: what happens
document.querySelector('.btn-book').addEventListener('click', function () {
  console.log('Booking started!');
});

All three files are separate. The HTML does not know what the CSS looks like. The CSS does not know what the JavaScript does. This separation is intentional — it keeps each layer focused on one job.

What JavaScript can do

JavaScript runs inside the browser and gives you the ability to:

• Respond to user actions — clicks, key presses, form submissions, scrolling
• Update the page without reloading — change text, show or hide elements, add new content dynamically
• Validate forms — check that a user filled in required fields before submitting
• Store data in the browser — save preferences, favorites, or session state using localStorage
• Animate elements — toggle CSS classes to trigger transitions and animations
• Fetch data from a server — load new content in the background without a full page reload

Every interactive feature you have ever used on a website — a dropdown menu, a photo lightbox, a search filter, a checkout form that highlights missing fields — is JavaScript at work.

What JavaScript cannot do (in the browser)

JavaScript running in a browser has deliberate limits for security reasons:

• It cannot access files on your computer’s hard drive
• It cannot directly communicate with a database — it must go through a server
• It cannot run without the browser (or a runtime like Node.js) executing it
• It cannot bypass browser security restrictions like same-origin policy

These limits protect users. A website cannot read your documents or spy on your other browser tabs.

JavaScript is not Java

JavaScript and Java share the first four letters and nothing else. They are completely different languages, built by different companies, for different purposes. Java is a compiled, statically typed language used for Android apps and enterprise software. JavaScript is an interpreted, dynamically typed language built specifically for the web.

The name “JavaScript” was a marketing decision made in 1995 — Java was popular at the time. Do not let the name confuse you.

Where JavaScript runs

JavaScript was originally created to run only in browsers. Today it also runs on servers using Node.js — the same language, the same syntax, a different environment.

This course focuses entirely on client-side JavaScript — code that runs in the browser, reads and modifies the page, and responds to user actions. You will not need Node.js for anything in this course.

What you will build in this course

Throughout JavaScript Foundations, you will apply every concept you learn directly to the Summit Trail Outfitters site you built in HTML Foundations and styled in CSS Foundations.

By the end of the course, you will have added four real features to the STO site:

1. A hamburger nav toggle — a mobile navigation menu that opens and closes when the user taps the menu button
2. A tour category filter — buttons that show and hide tour cards based on category
3. A contact form validator — inline error messages and a success state for the contact form
4. A tour favorites list — a “Save to Favorites” feature that persists across page reloads using localStorage

Every lesson builds toward one of these features. The code you write is real, production-quality JavaScript — not toy examples.

Exercise

Open your Summit Trail Outfitters index.html file in Chrome. Open the browser DevTools console:

• Mac: Cmd + Option + J
• Windows: Ctrl + Shift + J

You should see a blank panel with a > prompt at the bottom. Click the prompt and type:

console.log('JavaScript is running!');

Press Enter. The text JavaScript is running! appears in the console immediately.

You just ran JavaScript. The browser read your line of code, executed it, and printed the result — all in under a millisecond. This is the console: a live JavaScript environment attached to the page you are viewing.

Recap

• HTML is structure, CSS is presentation, JavaScript is behavior — three separate layers with separate jobs.
• JavaScript responds to user actions, updates the page, validates forms, stores data, and fetches content.
• In the browser, JavaScript cannot read local files, talk directly to a database, or run outside of a runtime.
• JavaScript and Java are completely different languages despite the name.
• In this course, you will build four real STO features: a nav toggle, a tour filter, a contact form validator, and a favorites list.