No history yet

JavaScript Fundamentals

The Building Blocks of Code

Think of JavaScript as the language you use to give instructions to a web page. To give good instructions, you first need a way to store and label information. This is where variables come in.

A variable is like a labeled box where you can keep something. You give the box a name, and you can put stuff inside it, take it out, or replace it with something else.

In JavaScript, you can create a variable using the keyword let, followed by a name for your variable.

let message;
message = "Hello, world!";

let userAge = 25;

There's another keyword, const, for creating a "constant" variable. This is like a box that gets locked once you put something in it. Its value can't be changed.

The information you store inside these variables has different types. The most common ones you'll encounter are:

  • Strings: Plain text, like "Hello, world!". You write them inside quotes.
  • Numbers: Any kind of number, like 25 or 3.14. You don't use quotes for these.
  • Booleans: Can only be one of two values: true or false. They are perfect for answering yes-or-no questions.

Reusable Instructions

Imagine you have a task you need to do over and over again, like greeting a user. Instead of writing the same code every time, you can bundle it into a function. A function is a reusable block of code that performs a specific action.

It's like a recipe. You define the steps once, give it a name, and then you can "call" that recipe by name whenever you want to cook that dish.

// Define the function
function greetUser(name) {
  return "Welcome, " + name + "!";
}

// Call the function and use its result
let greeting = greetUser("Alice");
console.log(greeting); // Prints "Welcome, Alice!"

The name in parentheses is a parameter. It’s like an ingredient in our recipe, a placeholder for a value you'll provide when you call the function. The return keyword sends a value back out of the function after it's done.

It's also important to know that variables created inside a function have local scope. This means they only exist inside that function. If you try to access them from outside, JavaScript won't know what you're talking about. It's like a rule: what happens in the function, stays in the function.

Making Decisions and Repeating Actions

Your code often needs to make decisions. For this, we use control structures. The most common one is the if statement. It checks if a condition is true, and if it is, runs a block of code.

You can add an else block to run a different set of instructions if the condition is false. It’s like a fork in the road.

let temperature = 75;

if (temperature > 80) {
  console.log("It's a hot day!");
} else {
  console.log("It feels nice outside.");
}

What if you need to repeat an action multiple times? That's what loops are for. A for loop is great when you know exactly how many times you want to repeat something.

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

This loop sets up a counter i starting at 0. It will keep running as long as i is less than 5, and it adds 1 to i after each run.

Bringing Web Pages to Life

So how does all this connect to a web page? Every HTML document is represented by the browser as a tree-like structure called the Document Object Model, or DOM.

Think of the DOM as a live map of your webpage's elements. JavaScript can read this map and use it to find, change, add, or remove HTML elements and their content. This is how you make pages interactive.

For example, you can use JavaScript to find an HTML element by its id and change its text content. Let's say you have this HTML:

<h1 id="main-title">Original Title</h1>

You could use the following JavaScript to grab that <h1> element and change what it says:

// Find the element with the id 'main-title'
let titleElement = document.getElementById("main-title");

// Change its text content
titleElement.textContent = "A New, Dynamic Title!";

After this code runs, the user will see "A New, Dynamic Title!" on the page without it ever having to reload. This is the fundamental power of JavaScript in web development.

Quiz Questions 1/6

What is the primary role of the Document Object Model (DOM) in web development?

Quiz Questions 2/6

A variable declared with the const keyword can be reassigned to a new value later in the code.

These are the core pieces of JavaScript. Variables store information, functions package up instructions, control structures make decisions, and the DOM connects it all to the webpage. Mastering these basics is the first step toward building dynamic and interactive web experiences.