Glossary

JavaScript

JavaScript adds behaviour to web interfaces: it responds to events, loads data and updates state. Its presence does not turn an untrusted browser into a safe place for business rules or permissions.

Short definition

The language runs in a host environment, not only inside a page.

JavaScript implements the ECMAScript standard and uses APIs supplied by a specific runtime. In a browser, it works with documents, events, networking and storage; on a server, Node.js can run it in another environment with different APIs. Project packages and commands in such applications are commonly managed with npm. The DOM, window and fetch are therefore not inherent properties of every JavaScript program.

On the web, JavaScript commonly improves the user experience: it immediately validates a form, changes a filter, opens a dialog or loads more data from an API. The server still validates input again, authenticates the client and authorizes the operation. An attacker can create a request without clicking a specific button or running your frontend.

Algorithms in JavaScript commonly combine conditions, loops, and arrays; their exact notation is defined by the language syntax.

What it is used for

User interactions, component state and API calls

JavaScript provides the greatest value where a basic HTML interface needs a fast but still secure response.

catalogue filters, product variants, a cart and incremental data loading
opening a dialog, managing focus and controlling components with a keyboard
sending an API request and displaying progress, an error or the new state
modular frontend components and shared validation or formatting functions
build tools, tests and server-side use in a runtime that provides the environment

Practical example

Loading inventory availability after selecting a variant

After a variant changes, the frontend loads publicly available data and updates the text in an existing element. It does not ignore the error state: the network can fail, and the response may not have the expected structure. The example neither makes a purchase nor performs an authorized change; such an action would be verified on the server.

Using textContent does not insert the server response as HTML. If the application used innerHTML for untrusted data without checks, it could introduce an XSS vulnerability.

JavaScript

const availability = document.querySelector('[data-availability]');

const response = await fetch('/api/variants/42/availability');
if (!response.ok) throw new Error('Dostupnost nelze načíst.');

const data = await response.json();
availability.textContent = data.inStock ? 'Skladem' : 'Není skladem';

How it works

From a user event to an updated interface

Asynchronous code does not mean every change runs in parallel without rules; state, errors and response order need to be managed.

The user takes an action The browser raises a click, form change or navigation event. Native HTML remains the functional path where possible.
The handler checks local state The frontend checks basic input and adapts the interface but does not treat this check as the final protection for data.
Fetch calls the API The request carries a URL, method, headers and body according to the contract. The browser may restrict access to the response through CORS rules.
A Promise resolves the result The code handles success, network errors and an unsuccessful HTTP status; a failure must not leave the user in a false state.
The DOM is updated safely The interface displays the new state as text or through a controlled component, preserves focus and does not insert untrusted content as HTML.

Important concepts and synonyms

ECMAScript, the DOM and the runtime are not the same thing.

JavaScript is sometimes abbreviated to JS; ECMAScript is the language standard, while browser APIs provide a specific environment.

Variables, functions and objects

The language works with values, functions, objects and modules. Dynamic typing makes it easy to begin, but larger codebases need good contracts and tests.

DOM and events

The DOM represents the HTML document. Events allow code to respond to user actions, but handlers must also account for the keyboard, focus and cancellation.

Promise and async/await

A Promise represents the future result of an asynchronous operation. async/await improves readability but does not remove the need to handle errors, timeouts or response races.

Modules

import and export define dependencies between files. Cyclic or excessively deep dependencies complicate both loading and understanding the frontend.

Web APIs and runtimes

The browser provides fetch, the DOM and localStorage. Another runtime has different APIs, so code must not unconditionally assume browser global objects.

Benefits and limitations

Interactivity is valuable only with well-managed state and safe degradation.

Benefits

fast responses to user actions and incremental interface updates
modules and shared functions for a larger frontend
direct work with the browser DOM, forms and HTTP APIs
asynchronous communication without a full page reload

Risks and common mistakes

treating client-side validation as protection for a server operation
using innerHTML for untrusted text and introducing XSS
failing to handle an unsuccessful response or a stale request arriving later
breaking keyboard controls and focus in a custom dialog
replacing a simple link or form with unnecessarily complex client-side logic

When to use it

Enhance a functional foundation instead of replacing it without a reason.

JavaScript suits catalogue filtering, incremental loading, interactive charts, more complex forms and clients for a separate API. For ordinary navigation, form submission and reading content, well-functioning HTML and a server flow are often more valuable as a starting point. Such an interface handles a slow connection, script failure and normal URL sharing more reliably.

Frontend scope should match the product and team. A larger application needs modular boundaries, type checking, tests and clear state management. A smaller page may be easier to understand with a few targeted modules than with a complete client-side architecture.

What to consider

Errors, focus and server-side verification are part of the feature.

Happy-path code is not enough when data travels over a network and different users operate the interface.

define the loading, empty, error and retry states of an asynchronous request in advance
preserve the native HTML path for navigation and forms unless there is a reason to block it
insert API text as text rather than unverified HTML
manage focus and the Escape key correctly when opening and closing a dialog
validate and authorize every change on the server without relying on client-side logic

Common questions

JavaScript in practice

Is JavaScript the same as ECMAScript?

ECMAScript is the language standard. JavaScript in a browser uses this language together with browser APIs such as the DOM and fetch.

Does JavaScript protect an API?

No. Users can modify or bypass browser code. The API therefore always verifies identity, permissions, input and business rules on the server.

Does async/await replace error handling?

No. It makes asynchronous code more readable, but errors still need to be caught, HTTP statuses checked and stale responses handled.

Is the DOM part of JavaScript?

The browser provides the DOM as a host API. JavaScript can also be used in an environment with no DOM at all.

How I build integration interfaces in practice

I connect the frontend to APIs through a clear contract and server-side boundaries.

When developing applications, I handle browser data alongside APIs, validation, security and resilient error processing.

How I work with APIs and integrations Discuss your project without obligation