When we open a website, we usually see text, images, buttons, forms, menus, animations, and many other elements.
HTML gives the page its structure. CSS controls how those elements look. But something is still missing.
What happens when we click a button?
What happens when a menu opens?
How does a website validate a form, fetch data from a server, or update part of the page without reloading the entire page?
This is where JavaScript comes in.
What Is JavaScript?
JavaScript is a programming language used to add behavior and logic to applications.
On the web, JavaScript makes webpages interactive. It can respond to user actions, change content on a page, validate user input, communicate with servers, and perform application logic.
But JavaScript is not limited to browsers. It can also be used for server-side development, desktop applications, development tools, and many other types of software.
At a simple level, you can think of JavaScript as the language that allows us to describe what an application should do.
For example:
const name = "Abhishek";
console.log(name);
Here, we are giving JavaScript instructions. A JavaScript environment processes those instructions and produces the corresponding result.
That basic idea is important: we write instructions in JavaScript, and a JavaScript environment executes them.
HTML, CSS and JavaScript
A web application usually involves three technologies with different responsibilities.
HTML - Structure
HTML defines the structure and content of a webpage.
For example:
<button>Buy Now</button>
HTML tells the browser that there is a button on the page.
CSS - Presentation
CSS controls how that HTML is presented.
It can control things such as:
Colors
Fonts
Spacing
Size
Layout
Positioning
Responsive behavior
JavaScript - Behavior
JavaScript adds behavior and application logic.
For example, when a user clicks Buy Now, JavaScript can respond to that action and perform some operation.
A simple way to remember the difference is:
HTML → What exists?
CSS → How does it look?
JavaScript → What does it do?
A simple real-world analogy
One analogy I find useful when learning this is to think of a webpage as a human body.
HTML → Skeleton / structure
CSS → Appearance
JavaScript → Brain / behavior
The analogy isn't technically perfect, but it gives us a simple mental model.
The skeleton gives the body its structure, appearance makes it look the way it does, and the brain controls behavior.
Similarly, HTML defines the structure, CSS controls presentation, and JavaScript handles behavior and logic.
Where Does JavaScript Run?
JavaScript needs an environment capable of understanding and executing JavaScript code.
Two common environments are:
Web browsers
Node.js
JavaScript in the Browser
When JavaScript runs inside a browser such as Chrome, Firefox, or Safari, the browser provides an environment in which JavaScript can execute.
Different browsers use different JavaScript engines.
For example:
| Browser | JavaScript Engine |
|---|---|
| Chrome | V8 |
| Firefox | SpiderMonkey |
| Safari | JavaScriptCore |
The browser does much more than just execute JavaScript. It also provides APIs that allow JavaScript to interact with the webpage and the browser environment.
This is what makes browser-based JavaScript useful for building interactive web applications.
For example, JavaScript running in a browser can respond to a button click, update the page, read user input, or request data from a server.
JavaScript with Node.js
JavaScript can also run outside the browser.
This is where Node.js comes in.
Node.js is a JavaScript runtime that allows JavaScript to run outside a browser. It uses Google's V8 JavaScript engine and provides additional capabilities needed for server-side and general-purpose development.
For example, JavaScript running in Node.js can be used to build:
Web servers
APIs
Backend applications
Command-line tools
Development tooling
One distinction is especially important here:
JavaScript
↓
Programming language
V8
↓
JavaScript engine
Node.js
↓
JavaScript runtime built around V8
So Node.js is not a JavaScript engine.
It uses the V8 engine to execute JavaScript and provides additional runtime capabilities around it.
This distinction becomes increasingly important as we start learning how JavaScript works outside the browser.
What Is a JavaScript Engine?
A JavaScript engine is software designed to process and execute JavaScript code.
Different environments can use different engines.
For example:
Chrome → V8
Firefox → SpiderMonkey
Safari → JavaScriptCore
Node.js → V8
When we write JavaScript, the engine takes that source code and processes it so that the instructions can actually be executed by the computer.
A simplified mental model looks like this:
JavaScript Source Code
↓
JavaScript Engine
↓
Execution
↓
Result
The actual internals are more complicated than this. A JavaScript engine doesn't simply read our code and execute each line exactly as written.
It parses and processes the code and performs various execution and optimization steps.
For now, we don't need to go deep into those details.
The important idea is:
A JavaScript engine is the software responsible for processing and executing JavaScript code.
We'll come back to what happens inside the engine later when we explore JavaScript's execution model and engine performance in more detail.
What Happens When JavaScript Code Runs?
Consider this code:
const name = "Abhishek";
console.log(name);
At a high level, we can think about what happens like this:
JavaScript source code
↓
JavaScript engine
↓
Code is processed
↓
Instructions are executed
↓
"Abhishek" is printed
The first statement creates a variable called name and gives it the value "Abhishek".
The second statement asks JavaScript to print the value stored in name to the console.
The important part is that the JavaScript source code we write is not directly understood by the computer as-is. A JavaScript engine is responsible for processing that code and executing it.
There is a lot more happening behind the scenes, but understanding this basic flow gives us the right starting point.
Later, when we learn about execution contexts, the call stack, memory, parsing, compilation, and optimization, this simple model will become much more detailed.
Statements and Expressions
JavaScript code contains different kinds of constructs. Two important concepts are statements and expressions.
An expression is something that produces a value.
For example:
10 + 20
produces:
30
A variable reference can also be part of an expression:
name
A statement, on the other hand, represents an instruction or action that JavaScript can execute.
For example:
const age = 30;
This is a variable declaration statement.
Statements can contain expressions.
For example:
const total = 10 + 20;
Here:
10 + 20
is an expression that produces 30, while the complete line is a variable declaration statement.
We don't need to go too deep into statements and expressions yet. The important thing to remember is:
Expressions produce values. Statements perform actions or represent instructions.
This distinction becomes much more useful as JavaScript code becomes more complex.
Putting Everything Together
We can now build a simple mental model of JavaScript.
And when thinking about a web application:
HTML
↓
Structure
CSS
↓
Presentation
JavaScript
↓
Behavior + Logic
JavaScript is therefore much more than just a way to make buttons clickable.
It is a programming language capable of handling application logic and running in different environments.
The browser provides an environment where JavaScript can interact with webpages and browser features. Node.js provides a runtime for executing JavaScript outside the browser. Underneath these environments, JavaScript engines process and execute the JavaScript code we write.
If there is one mental model I would keep from this article, it is this:
HTML → What exists?
CSS → How does it look?
JavaScript → What does it do?
Once this foundation is clear, the next question naturally becomes:
How does JavaScript actually store and manage the values we create in our programs?
That's where variables come in.
Top comments (1)
The structure/appearance/behavior analogy is still the best way to introduce the web stack. It's funny how modern component frameworks try to blur those lines by cramming HTML and styling straight into JavaScript files via JSX. But underneath it all, the browser engine still has to parse everything back into strict DOM and CSSOM trees to actually render the page. Solid primer.