Introduction to JavaScript

The Language of the Web

So far, you’ve learned about HTML and CSS. Think of them like this: HTML is the skeleton of a webpage, giving it structure. CSS is the clothing and paint, giving it style. But the page is still static—it doesn’t do anything. That's where JavaScript comes in.

JavaScript is the programming language that brings websites to life. It handles interactivity, from simple pop-up alerts to complex animations, form submissions, and fetching new data without reloading the page. It's the engine that makes a website feel like an application rather than just a document.

Originally created in just 10 days in 1995 at Netscape, it was designed to be a simple scripting language for browsers. Today, it's one of the most popular programming languages in the world, powering the interactive front-end of nearly every modern website.

How JavaScript Fits In

JavaScript code lives inside an HTML document, just like CSS. You add it using the <script> tag. You can either write the JavaScript directly inside this tag or, more commonly, link to an external .js file.

<!-- Method 1: Inline Script -->
<script>
  // JavaScript code goes here
  alert('Hello, world!');
</script>

<!-- Method 2: External Script File -->
<!-- This is the preferred way to organize code. -->
<script src="scripts/main.js"></script>

The <script> tag is usually placed right before the closing </body> tag. This ensures that the browser loads all the HTML content first, so your script has access to all the page elements it might need to interact with.

Core Building Blocks

Like any language, JavaScript has its own grammar and vocabulary. Let's start with the most basic concept: variables. A variable is a container for storing a value. You can think of it as a labeled box where you can put information.

variable

noun

A named container for storing data values. In JavaScript, the value of a variable can be changed during the execution of a program.

To declare a variable in modern JavaScript, you use the let keyword, followed by the variable name. You can assign it a value using the equals sign (=).

let message = "Hello, welcome to my website!";
let visitorCount = 150;

Statements in JavaScript are typically ended with a semicolon (;). While sometimes optional, it's a good practice to include it to avoid ambiguity.

Variables can hold different types of data. The two examples above show a string (text, wrapped in quotes) and a number. Other common data types include booleans (true or false), arrays (lists of values), and objects (collections of related data).

JavaScript lets you perform operations on these variables. You can do math with numbers or combine strings together.

let price = 10;
let quantity = 3;
let totalPrice = price * quantity; // totalPrice is now 30

let firstName = "Jane";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // fullName is now "Jane Doe"

This is just the beginning. With these simple tools—variables, data types, and operations—you can start building dynamic behavior into your web pages.

Quiz Questions 1/6

If HTML is the skeleton and CSS is the clothing of a webpage, what is JavaScript?

Quiz Questions 2/6

What is the primary purpose of JavaScript in web development?

JavaScript Fundamentals