Inline JavaScript
Definition
Inline JavaScript covers any script that lives in the markup. The common form is a script element containing code directly; the older form is an event handler attribute on a tag, like onclick holding a line of code. A page produced in a chat window almost always uses the first, because everything has to arrive in one file. Placement matters: a plain script element blocks HTML parsing while it runs, so a script in the head that touches elements further down finds nothing there yet. Adding type set to module changes that — module scripts are deferred automatically and run after the document has been parsed.
Why It Matters
The upside is the same as for any inlining: one file, one request, nothing to lose when the page is copied around. The downsides accumulate as the page grows. A 40 KB script in the HTML is re-downloaded on every page view rather than cached once, and it cannot be minified by a build you are not running. The bigger issue is security posture. A Content Security Policy that blocks inline scripts is one of the most effective defences against cross-site scripting, and a page built entirely from inline code cannot adopt it without either a nonce on every script tag or moving the code out into files. Sites that must pass a security review usually end up moving it.
How It Works
The parser reaches the script element, stops, and hands the contents to the JavaScript engine before continuing with the rest of the document — unless the element is a module, in which case execution waits until parsing is done. Code inside a classic script shares the global scope, so two inline blocks declaring the same variable name will collide; wrapping each in a function or using a module avoids it. A static host serves the whole thing as one HTML document, so there is no separate content type to get right and no extra request. Splitting the code into a .js file later means the server must send it as text/javascript and the src path must resolve, otherwise the page silently loses its behaviour.
Real-World Example
A trainer publishes a quiz generated in a chat session at safety-quiz.99helpers.site using 99helpers. All 12 KB of logic sits in one script element, the page is a single 18 KB file, and it works offline once loaded. When the quiz later needed to run inside a client's intranet, the client's Content Security Policy blocked inline scripts outright — the fix was lifting the code into 'quiz.js' and uploading it alongside the HTML, with no change to the code itself.
Common Mistakes
- ✕Putting a classic script in the head that reaches for an element defined below it — the element does not exist yet and the lookup returns null
- ✕Using onclick attributes for anything non-trivial, which scatters logic through the markup and is the first thing a security policy blocks
- ✕Letting two inline blocks declare the same global name, then debugging a value that one of them quietly overwrote
- ✕Assuming inline code is private — anyone can read the whole script with view-source, keys included
Related Terms
Inline CSS
CSS written inside the HTML document rather than in a separate .css file — either in a style element in the head or in a style attribute on a single element. It removes a network request and keeps everything in one file.
ES Module
JavaScript's built-in module format, using import and export statements. Browsers load ES modules natively from a script tag with type set to module, with no bundler involved.
Single-File Web App
A single-file web app is a complete, working application contained in one HTML document, with the styles and the JavaScript written inside the same file. Open it in a browser and it runs — there is nothing to install and nothing to build.
Content Security Policy
A response header that tells the browser which sources a page is allowed to load scripts, styles, images and frames from. Anything outside the policy is blocked before it runs.
Minification
Minification strips everything from CSS, JavaScript and HTML that a browser does not need — spaces, line breaks, comments, long variable names — leaving smaller files that behave identically.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →