Up to this point, the websites you have built respond to users the way a printed book responds to a reader: they display information, they follow links, they show images, but they do not change based on what the user does while reading. A form submits. A link navigates. But nothing happens in place, nothing updates without a full page reload, and nothing responds to a user action in the moment.

JavaScript changes this. JavaScript is the language that makes pages respond, update, and behave dynamically while a user is looking at them. When a user clicks a button and a message appears without the page reloading, that is JavaScript. When a navigation menu expands on a small screen, that is JavaScript. When a form shows an error message next to the field that needs attention, that is JavaScript. When a list of items filters as a user types, that is JavaScript.

This chapter introduces JavaScript as the behavior layer of the browser. It explains what JavaScript is, how it fits alongside HTML and CSS, how to connect a JavaScript file to an HTML page, how to use the browser console to understand what your code is doing, and how to write and read the most basic JavaScript statements. It introduces common beginner errors with practical debugging guidance, and it closes with a first small interactive page that brings all three languages together.

This is a beginning. The chapters that follow will teach variables, functions, events, the DOM, logic, loops, and forms. This chapter's job is to make JavaScript feel approachable, understandable in its purpose, and connected to the real work of building websites.

JavaScript is a programming language that runs in the browser. Unlike HTML, which describes the structure of a document, and CSS, which describes its visual presentation, JavaScript describes behavior: what should happen, when it should happen, and what should change.

JavaScript was created in 1995 by Brendan Eich while working at Netscape Communications. It was designed to add interactivity to web pages that were, at the time, entirely static documents. Despite its early origins and occasional awkward history, JavaScript has become one of the most widely used programming languages in the world. It runs in every major web browser without any installation. It is the only programming language that runs natively in the browser. No other language can do what JavaScript does in the browser without being compiled into JavaScript or running on a server.

JavaScript is a scripting language. In traditional programming, a program is compiled into machine code before it runs. In scripting, code is read and executed more directly. Browsers contain a JavaScript engine — a program that reads JavaScript code and runs it. The V8 engine in Chrome and Edge, the SpiderMonkey engine in Firefox, and the JavaScriptCore engine in Safari all do this work invisibly whenever a page with JavaScript is loaded.

JavaScript is also a dynamic language. It is flexible about types, forgiving about some syntax details, and can be written in many styles. This flexibility is both a strength and a source of confusion for beginners. This textbook takes a careful, explicit approach: it will explain what each piece of code means, avoid shortcuts that obscure logic, and build habits that make code readable and maintainable.

In the context of web development, JavaScript's primary job is to interact with the browser and the page. It can read what is on the page, change what is on the page, respond to what users do, and communicate with servers. These abilities make it the foundation of every interactive website on the web.

You have already learned that web pages are built from three layers, each with a distinct job.

These three layers are separate concerns. This separation is intentional and valuable. A page's structure can be understood without knowing its styles. A page's styles can be updated without touching its structure. A page's behavior can be changed without rewriting the underlying HTML. Keeping these layers clean and independent makes websites easier to read, maintain, and debug.

Notice that the JavaScript does not write color values. It does not define the HTML structure. It manages behavior: it listens for the click, and it adds or removes a class. The visual change happens because CSS responds to that class. This is the right pattern.

Just as CSS is linked from an external file, JavaScript is typically stored in an external .js file and linked to the HTML page.

JavaScript is linked to an HTML page using the <script> element. The <script> element takes a src attribute whose value is the path to the JavaScript file, just as <link> takes an href to a CSS file.

The placement of the <script> element in the HTML document matters. JavaScript code can interact with the page's HTML elements, but it can only interact with elements that have already been loaded by the browser. If JavaScript runs before the page has finished loading its HTML, the code will try to find elements that do not yet exist.

The simplest and most reliable solution for beginners is to place the <script> element at the end of the <body> element, just before the closing </body> tag.

By placing the script at the end of the body, all of the HTML elements have been created and loaded before the JavaScript runs. This avoids the common beginner problem of JavaScript trying to select elements that do not exist yet.

The JavaScript file is a plain text file saved with a .js extension. It contains JavaScript code, not HTML. There are no tags in a .js file. JavaScript has its own syntax.

A minimal JavaScript file might look like this:

This file does very little: it runs a single line of code that sends a message to the browser console. The console is a place where JavaScript can display information for developers. Users do not see it. You will learn to use it in the next section.

A clean project folder with HTML, CSS, and JavaScript looks like this:

The browser console is one of the most important tools a JavaScript developer uses. It is a panel inside the browser's developer tools where:

• JavaScript can print messages using console.log()
• Error messages appear when JavaScript code fails
• Warnings appear when code behaves unexpectedly
• You can type and run short JavaScript expressions interactively

You opened the developer tools in Chapter 4. The console is one of the tabs inside that panel.

To open the developer tools and find the console:

• In Chrome, Edge, or Firefox: press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac), then click the Console tab.
• You can also right-click anywhere on the page and choose Inspect, then click Console.

console.log() is a JavaScript statement that sends a message to the console. It is the most common tool for checking whether your JavaScript is running and what values your code is working with.

Each call to console.log() prints one line to the console. The message in parentheses is what gets printed.

When JavaScript code contains a mistake — a misspelling, a missing parenthesis, a reference to something that does not exist — the browser will not just ignore the error. It will log a red error message to the console. That message includes:

• A description of the error
• The file where the error occurred
• The line number where the error occurred

You can type JavaScript directly into the console and press Enter to run it immediately. This is useful for quick experiments. Try typing the following in the console on any web page:

The console will show 4. Try:

The console will show the title of the current page. The console is a live JavaScript environment connected to the page you are viewing. You will use this throughout the course to test small pieces of code before putting them in files.

JavaScript code is made of statements. A statement is one complete instruction. When the JavaScript engine runs your code, it reads and executes statements in order, one at a time, from top to bottom (with exceptions you will learn about later, such as functions and events).

Each line in the following code is a statement:

JavaScript statements end with a semicolon (;). Semicolons are technically optional in many cases because JavaScript has a feature called automatic semicolon insertion that adds them in certain situations. However, writing your semicolons explicitly is a better habit. It prevents a small category of subtle bugs and makes your intentions clear. All examples in this textbook use explicit semicolons.

Comments are notes written in the source code that the JavaScript engine ignores. They exist for human readers: you, your teammates, your future self revisiting the code six months later.

There are two types of comments in JavaScript. A single-line comment begins with // and extends to the end of that line:

A multi-line comment begins with /* and ends with */. Everything between those markers is a comment, even if it spans multiple lines:

Good comments explain why something is done, or note something that might not be obvious to a reader. They do not simply restate what the code says.

JavaScript executes statements in order, from top to bottom, unless something changes that order. Understanding execution order is fundamental to understanding how your programs behave.

Consider this file:

The console output will be:

That seems obvious. But consider:

The second statement is commented out, so it does not run. The console output is:

And consider:

The output here is:

The greet() function is defined but never called. Defining a function does not run the code inside it. Calling a function does. You will learn about functions in Chapter 20, but the principle matters now: code only runs when the JavaScript engine reaches it in the execution sequence, or when it is triggered by something like a function call or an event.

This also explains why placing the <script> element at the end of <body> matters. The browser loads and executes JavaScript as soon as it encounters a <script> element. If that element appears in the <head>, the script runs before any of the body content has been loaded — which means the HTML elements do not yet exist in memory, and any JavaScript that tries to find them will fail.

Before diving into the full power of JavaScript's interaction with the page, it is worth knowing a few very simple ways that JavaScript can produce visible output. These are useful for early learning and quick experiments, though you will rarely use them in production websites.

alert() displays a browser dialog box with a message and an OK button. It pauses the page until the user dismisses it.

When the browser runs this line, a small dialog box appears with the text "Welcome to this page." and an OK button. The page waits until the user clicks OK before continuing.

alert() is one of the oldest JavaScript features. It is rarely used in modern websites because it interrupts the user experience and looks unprofessional. However, it is useful for early experiments because it gives immediate visible proof that JavaScript is running.

confirm() displays a dialog box with a message and two buttons: OK and Cancel. It returns a value depending on which button the user clicks. You will use return values more after Chapter 20.

prompt() displays a dialog box with a text field. The user can type a value and click OK. Again, you will learn how to use the value it returns after Chapter 20.

There is an important relationship between JavaScript and the process of loading an HTML page. Understanding this relationship helps you avoid a very common category of beginner errors.

When a browser loads a web page, it does the following work in roughly this order:

1. It downloads the HTML file.
2. It parses the HTML from top to bottom, building the structure of the page in memory.
3. As it parses, it encounters <link> elements and downloads CSS files.
4. It applies the CSS to the elements it has built.
5. At some point, it encounters <script> elements and downloads and executes the JavaScript files.
6. When the HTML is fully parsed and all subresources have loaded, a load event fires.

Placing <script> at the end of <body> ensures that all HTML has been parsed before the script runs. This is the approach used throughout this textbook.

When the browser reaches the <script> tag at the bottom of the body, all of the HTML above it has been loaded. Any JavaScript that looks for page elements will find them.

There is another pattern you may encounter in examples on the web:

This approach wraps code in a function that only runs after the page's HTML structure has been fully loaded. It allows a <script> in the <head> to safely interact with page elements. You will learn about events and event listeners in Chapter 21. For now, using <script> at the end of <body> is simpler and achieves the same result.

The three languages of the browser are most powerful when they work together as intended: HTML for structure, CSS for presentation, JavaScript for behavior. Let's look at a complete small example to see this collaboration in practice.

Notice two attributes in this HTML: id="status-message" on the paragraph and id="change-button" on the button. IDs give JavaScript a way to find specific elements on the page.

This JavaScript does three things:

1. It finds the button element by its ID.
2. It finds the paragraph element by its ID.
3. It attaches a click listener to the button. When the button is clicked, the paragraph's text changes.

Before clicking: The page shows a heading, a paragraph that reads "The button has not been clicked yet," and a blue button.

After clicking: The paragraph now reads "The button has been clicked!" The button remains where it is. The page never reloaded. The change happened instantly, in place.

This is the fundamental pattern of JavaScript interaction on the web.

JavaScript code that contains mistakes does not always stop working entirely — sometimes it simply behaves unexpectedly. But many errors cause the browser to stop executing a script and log an error message to the console. Learning to recognize common errors will save you significant time.

How to check: Open the Network tab in developer tools and reload the page. If the JavaScript file shows a red 404 error, the path is wrong.

How to check: Look at the error message and the line number it points to. Read that line carefully, character by character.

How to check: Strings must open and close with the same type of quote mark. Most code editors color string literals, which makes this easier to spot visually.

How to check: Many code editors highlight matching pairs of parentheses and braces. Using a good editor helps catch these immediately.

How to check: Always place <script> at the end of <body> until you are comfortable with the defer attribute or DOMContentLoaded events.

How to check: IDs are case-sensitive and must match exactly. Copy-paste the ID from the HTML rather than retyping it.

How to fix: Click the clear button in the console (usually a circle-with-slash icon), or press Ctrl+L (Windows/Linux) or Cmd+K (Mac) to clear it. Then reload the page.

JavaScript does not remove the need for accessible HTML. It adds to it. Before adding JavaScript to any page, the HTML and CSS should already be accessible. Then JavaScript can enhance the experience without breaking it. Review your Mini-Project page for the following:

This last point matters. JavaScript should enhance a working page, not be required for the page to have any content at all. A page that shows a blank screen when JavaScript is disabled has been built on an unstable foundation.