JavaScript Basics

The Building Blocks

JavaScript is the language that brings websites to life. While HTML structures a page and CSS styles it, JavaScript adds interactivity. Think of it as the engine that makes things happen, from simple animations to complex web applications.

To get started, we need a way to store information. In programming, we use variables. A variable is like a labeled box where you can keep a value. You can change the value later if you need to.

// Use 'let' for variables that might change.
let userAge = 30;

// Use 'const' for variables that will not change.
const birthYear = 1994;

These variables hold different kinds of information, or data types. JavaScript has several fundamental types.

Data Type	Description	Example
String	Text, wrapped in quotes.	`let name = "Alice";`
Number	Any number, with or without decimals.	`let price = 19.99;`
Boolean	A true or false value.	`const isLoggedIn = true;`
Null	Represents the intentional absence of a value.	`let middleName = null;`
Undefined	A variable that has been declared but not yet assigned a value.	`let address;`

For storing collections of data, we often use objects and arrays, which we'll explore in more detail later.

Making Things Happen

Writing the same code over and over is tedious. That's where functions come in. A function is a reusable block of code that performs a specific task. You define it once and can run it anytime you need.

// Define a function that greets a person
function greet(name) {
  return `Hello, ${name}!`;
}

// Call the function and store the result
let greeting = greet("World");
console.log(greeting); // Outputs: "Hello, World!"

An important concept related to functions is scope. A variable created inside a function can only be used within that function. It's like a tool you take out to do a job and put away when you're done; it isn't just lying around for anyone to access.

Think of scope as local vs. global. Variables inside a function are local to it, while variables outside are global and accessible everywhere.

Decisions and Repetition

Programs often need to make decisions. JavaScript uses if and else statements to run different code depending on whether a condition is true or false. This is called a control structure.

let temperature = 15;

if (temperature > 25) {
  console.log("It's a hot day!");
} else {
  console.log("It's not too hot.");
}

What if you need to repeat an action multiple times? That's what loops are for. A for loop is perfect for running a block of code a specific number of times.

// This loop runs 5 times
for (let i = 1; i <= 5; i++) {
  console.log(`This is repetition number ${i}`);
}

Interacting with the Page

JavaScript's real power on the web comes from its ability to interact with the HTML of a page. The browser creates a representation of the page called the Document Object Model, or DOM. You can think of the DOM as a tree of objects, where each object represents an HTML element, like a heading, paragraph, or button.

We can use JavaScript to find elements in this DOM tree and change them. This is called DOM manipulation.

Let's say our HTML has a paragraph and a button like this:

<p id="message">Hello there!</p>
<button id="changeBtn">Click Me</button>

We can write JavaScript to find these elements and make the button change the paragraph's text when clicked. This involves two steps: selecting the elements and then responding to a user action, which is known as event handling.

// 1. Select the elements from the DOM
const messageParagraph = document.getElementById("message");
const changeButton = document.getElementById("changeBtn");

// 2. Add an 'event listener' to the button
// This function runs when the button is clicked
changeButton.addEventListener("click", function() {
  // 3. Change the paragraph's text content
  messageParagraph.textContent = "The text has changed!";
});

In this example, we listen for a click event on the button. When that event happens, the function we provided runs, selecting the paragraph and updating its text. This simple pattern is the foundation of all interactive websites.

Time to check your understanding.

Quiz Questions 1/5

What is the primary role of JavaScript in web development?

Quiz Questions 2/5

A reusable block of code that performs a specific task is called a ______, while a labeled container for storing a value is known as a ______.

These are the core fundamentals of JavaScript. By understanding how to store data, write reusable functions, control the flow of your program, and interact with the webpage, you have the essential tools to start building dynamic web experiences.

JavaScript vs TypeScript