What Is JavaScript (JS) and How Do You Use It on a Website?

JavaScript (JS) is the programming language that runs in the browser and makes a web page interactive. HTML gives a page its structure and CSS its appearance; JavaScript adds behavior — responding to clicks, updating content without a reload, validating forms, and fetching data. You add it to a page with a <script> tag (inline, internal, or external), and you can also run it outside the browser with Node.js. The sections below cover what JS does, how to include it, and the load-order and blocking pitfalls that trip people up.

What JavaScript actually does in a page

A browser turns HTML into a document object model (DOM) — a tree of elements. JavaScript can read and change that tree, listen for events, and make network requests. The main capabilities:

DOM manipulation — read, create, change, or remove elements (document.querySelector, element.textContent, appendChild).
Event handling — run code in response to user or browser events (click, submit, keydown, load).
Networking — request data from a server without reloading the page, using fetch or XMLHttpRequest.
Storage and state — keep data in the browser with localStorage or sessionStorage.
Timing and animation — schedule work with setTimeout/setInterval and drive visual changes.

A minimal example: a button that changes text when clicked.

<button id="greet">Click me</button>
<p id="out"></p>

<script>
  document.getElementById("greet").addEventListener("click", () => {
    document.getElementById("out").textContent = "Hello from JavaScript";
  });
</script>

The input is the click; the action is the event listener; the expected result is the paragraph text changing.

Three ways to add JavaScript to a page

Method	How it looks	When to use it
Inline	`<button onclick="doThing()">`	Quick tests only; hard to maintain and mixes behavior into markup
Internal	`<script> ... </script>` inside the HTML	Small page-specific scripts
External	`<script src="app.js"></script>`	Almost always — cacheable, reusable, easier to debug

External files are the norm for real projects. The browser downloads the file once and can cache it, and you keep behavior separate from markup.

Where to put the script tag

Placement controls when the script runs relative to the HTML around it.

In <head> without attributes — the browser stops parsing HTML to download and run the script. If the script touches elements that appear later in the document, they won't exist yet.
defer — downloads in parallel and runs after the HTML is parsed, in order. This is the usual choice for scripts that need the full DOM.
async — downloads in parallel and runs as soon as it's ready, which can be out of order. Use it for independent scripts that don't depend on each other or on the DOM.
Before </body> — the classic approach: the DOM above is already parsed when the script runs.

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

Running JavaScript outside the browser

JavaScript isn't limited to web pages. Node.js is a runtime that executes JS on a server or your machine, which is why the same language can power both the front end and the back end. Typical uses: build tools, command-line scripts, and server APIs.

To try it, install Node.js, then run a file:

node app.js

The input is a .js file; the action is invoking it with node; the expected result is whatever the script logs or does. Note that browser-only APIs like document and window don't exist in Node — code that touches the DOM won't run there.

Loading libraries from a CDN

Instead of bundling every library yourself, you can load popular open-source JavaScript and CSS libraries from a CDN. cdnjs is one such service: it describes itself as a free, open-source CDN for popular libraries, with JavaScript, CSS, and font resources cached globally on Cloudflare's network, and states it is trusted by 12.5% of all websites and serves 250 billion requests per month. A CDN serves the file from a location near the visitor, which can reduce latency compared with serving it from a single origin.

A typical pattern is to load the library first, then your own script that depends on it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="app.js" defer></script>

Check the exact library path and version on the CDN's site rather than guessing, since paths and versions change. If you use defer on your own script but not on the library, ordering can still surprise you — keep dependent scripts in the order they must run.

Common pitfalls

Blocking scripts — a plain <script> in the head pauses HTML parsing. Use defer or async, or place scripts at the end of the body.
Load order — a script that uses a library before the library loads will throw. Load dependencies first, or use defer so order is preserved.
DOM not ready — code that queries elements before they're parsed returns null. Use defer or wait for DOMContentLoaded.
async ordering — async scripts run whenever they finish, so don't rely on their order.
Scope — variables declared with var leak out of blocks; prefer let and const to keep behavior predictable.
Errors stop execution — an uncaught error halts the rest of that script. Check the browser console first when something doesn't work.

How to verify it's working

Open the browser's developer tools (usually F12). The Console shows errors and any console.log output; the Network tab shows whether your script and any CDN files loaded and their status codes. If a click does nothing, check the console for an error, confirm the element's id matches, and confirm the script actually loaded before it ran.