JavaScript Fundamentals
Introduction to JavaScript
What is JavaScript?
If HTML provides the structure of a webpage, like the skeleton of a body, and CSS adds the styling, like the skin and clothes, then JavaScript is the nervous system. It’s the programming language that makes a website react, respond, and come alive.
Think about a modern website. When you click a "like" button and the count instantly goes up, that's JavaScript. When you see a map you can drag and zoom, that's JavaScript. It's the engine that powers the interactive elements of the web, turning static pages into dynamic experiences.
Originally created for web browsers, JavaScript has grown into a versatile language used in many other areas, including server-side development, mobile apps, and even desktop applications.
How JavaScript Connects
JavaScript doesn't work in isolation. Its primary job in a web browser is to interact with HTML and CSS. It can read and change the structure of an HTML document and alter the CSS styles applied to any element. This powerful ability is how it creates interactivity.
Typically, you link JavaScript to an HTML file using a <script> tag. Let's look at a basic HTML page:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My First JS Page</title>
</head>
<body>
<h1 id="greeting">Hello, World!</h1>
<button>Change Text</button>
<script src="app.js"></script>
</body>
</html>
The <script src="app.js"></script> line at the bottom tells the browser to load and run the JavaScript code from a file named app.js. Placing it at the end of the <body> ensures that the HTML content is loaded before the script tries to manipulate it.
Now, here's the JavaScript code inside app.js that makes the page interactive:
// app.js
const heading = document.getElementById('greeting');
const button = document.querySelector('button');
button.addEventListener('click', () => {
heading.textContent = 'You clicked the button!';
});
This simple script finds the <h1> element and the button on the page. When the button is clicked, the script changes the text inside the heading. This is the core of what JavaScript does: it listens for events (like clicks) and modifies the page in response.
Where JavaScript Runs
JavaScript needs an engine to execute its code. This engine reads the script and turns it into actions the computer can perform. There are two main places, or environments, where you'll find these engines.
In the Browser: Every modern web browser—like Chrome, Firefox, and Safari—has a built-in JavaScript engine. When you visit a website, the browser's engine downloads and runs the JavaScript for that page. This is called client-side execution because it happens on the user's (the client's) computer.
In this environment, JavaScript has access to the web page itself (the Document Object Model, or DOM) and browser-specific features like alerts, storing data, and making network requests.
On a Server with Node.js: For a long time, JavaScript was confined to the browser. But a project called Node.js took Chrome's JavaScript engine and allowed it to run on servers. This is called server-side execution.
When running on a server, JavaScript doesn't have access to a web page or a DOM. Instead, it can interact with the computer's file system, manage databases, and handle network connections directly. This allows developers to build entire applications, from the user interface to the backend logic, all in one language.
Ready to check your understanding?
If HTML is the skeleton and CSS is the skin of a webpage, what is JavaScript analogous to?
Why is it generally recommended to place the <script> tag just before the closing </body> tag in an HTML file?
You now have a solid grasp of what JavaScript is, how it fits with HTML and CSS, and where its code is executed. Next, you'll start diving into the language itself.