Introduction to JavaScript
To understand JavaScript better, it is important to first understand how a website actually works inside a web browser. JavaScript does not work alone; it works as part of the web ecosystem.
How Does a Website Open in a Browser?
When you open any website, you are not opening a single thing.
You are actually opening a collection of files that run inside your web browser such as Chrome, Edge, or Firefox.
A website is created using instructions written by humans. These instructions are written using web languages like:
- HTML
- CSS
- JavaScript
Your browser is designed to understand only specific languages.
If a language is not supported by the browser, the website will not work or display correctly.
In simple terms:
- A website is a set of files
- A browser reads those files
- The browser shows the website on your screen
This is how every website you visit works.
What Problem Existed Before JavaScript?
Before JavaScript was introduced, websites were static.
What does static mean?
Static websites behave in a fixed way:
- The page loads once
- The page stays the same
- Nothing changes unless the page is reloaded
How older websites worked
In early websites:
- You opened a page
- You read text
- You saw images
- You clicked a link
- The entire page reloaded again
There was:
- No instant response
- No interaction
- No dynamic behavior
Websites felt like online newspapers.
You could read them, but you could not interact with them.
How JavaScript Works in a Web Browser
JavaScript is a programming language that runs inside the web browser and controls what a website does while it is open.
JavaScript starts working after the page is loaded.
What JavaScript can do
JavaScript can:
- Detect when a user clicks a button
- Detect what text a user types
- Make decisions based on user actions
- Change text, images, and styles instantly
- Send and receive data without reloading the page
Because of JavaScript, websites feel fast, responsive, and interactive.
Role of JavaScript in Web Development
JavaScript is not responsible for how a website looks.
JavaScript is responsible for how a website behaves.
Each web technology has a clear role:
- HTML – Structure of the page
- CSS – Design and appearance
- JavaScript – Interaction and behavior
Without JavaScript
Without JavaScript, a website would have:
- No dynamic content
- No instant updates
- No modern web application features
Most modern websites depend on JavaScript to function properly.
Client-Side JavaScript vs Server-Side JavaScript
JavaScript can run in two different places:
- Inside the user’s browser
- Inside a server
Based on where it runs, JavaScript is divided into:
- Client-Side JavaScript
- Server-Side JavaScript
What Is Client-Side JavaScript?
Client-side JavaScript runs inside the user’s web browser such as Chrome, Edge, or Firefox.
This is the original and most common use of JavaScript.
What client-side JavaScript does
- Runs after the web page is loaded
- Responds to user actions like click, type, and scroll
- Changes content without reloading the page
- Shows popups, alerts, and messages
- Validates forms before sending data to the server
Example
- Click a button → text changes instantly
- Type in a form → error message appears immediately
All of this happens inside the browser, without contacting the server.
What Is Server-Side JavaScript?
Server-side JavaScript runs on a server, not in the browser.
This is possible using technologies like Node.js, which allow JavaScript to run outside the browser.
What server-side JavaScript does
- Handles user requests
- Connects to databases
- Saves and retrieves data
- Manages authentication and authorization
- Sends responses back to the browser
Example
- User submits a login form
- Server checks username and password
- Server sends a success or error response
This logic runs on the server, not on the user’s device.
Difference Between Client-Side and Server-Side JavaScript
| Feature | Client-Side JavaScript | Server-Side JavaScript |
| Runs where | User’s browser | Server |
| Main purpose | Interaction and UI behavior | Data and business logic |
| Database access | No | Yes |
| Visible to user | Yes | No |
| Example tools | Browser JavaScript, DOM | Node.js, Express |