JavaScript Basics

Making Web Pages Come to Life

Imagine a website is like a house. HTML is the frame and the walls—the basic structure. CSS is the paint, the furniture, and the decorations that give it style. But what makes it a smart home? That's JavaScript.

JavaScript (JS) is the programming language that adds interactivity to web pages. It's the wiring that lets you turn on lights, open garage doors, and play music. When you click a button, see a pop-up, or watch an animation on a site, you're seeing JavaScript in action. It takes a static page and makes it dynamic.

Storing Information

To do anything useful, a program needs to remember things. It does this using variables. Think of a variable as a labeled box where you can store information. In JavaScript, we create these boxes using the keywords let and const.

Use let for things that might change. Use const (short for constant) for things that should never change.

let currentScore = 0; // This can change
const maxScore = 100; // This is fixed

The information we store comes in different forms, called data types. The most common ones are:

Data Type	Description	Example
String	Textual data. Always wrapped in quotes.	`"Hello, world!"`
Number	Any number, including decimals.	`42` or `3.14`
Boolean	Represents `true` or `false`. Useful for decisions.	`true`
Null	Represents the intentional absence of a value.	`null`
Undefined	A variable that has been declared but not assigned a value yet.	`undefined`

Making Decisions

JavaScript programs constantly make decisions. They use conditional statements to run specific code only when certain conditions are true. The most common way to do this is with an if...else statement.

It works just like it sounds: IF a condition is true, do something. ELSE, do something different.

let temperature = 75;

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

To make these decisions, we use comparison operators to compare values.

Operator	Meaning	Example
`>`	Greater than	`5 > 3` (true)
`<`	Less than	`5 < 3` (false)
`>=`	Greater than or equal to	`5 >= 5` (true)
`<=`	Less than or equal to	`5 <= 4` (false)
`===`	Strictly equal to	`5 === 5` (true)
`!==`	Strictly not equal to	`5 !== '5'` (true)

Notice we use === for equality, not =. A single equals sign (=) is for assigning a value to a variable.

Repeating Actions

Sometimes you need to perform the same action over and over. Instead of writing the same code multiple times, you can use a loop. A for loop is great when you know exactly how many times you want to repeat an action.

// This loop will count from 1 to 5
for (let i = 1; i <= 5; i++) {
  console.log("This is repetition number " + i);
}

Let's break that down:

let i = 1;: We start a counter variable i at 1.
i <= 5;: The loop will continue as long as i is less than or equal to 5.
i++: After each repetition, we increment i by 1.

Another common loop is the while loop, which repeats as long as a condition is true. This is useful when you don't know ahead of time how many repetitions are needed.

let count = 0;

while (count < 3) {
  console.log("Looping...");
  count++;
}

// This will print "Looping..." three times.

These are the fundamental building blocks of JavaScript. By combining variables, operators, and control structures, you can start writing code that makes decisions and performs tasks, bringing your web pages to life.

Time to check your understanding.

Quiz Questions 1/5

In the analogy of a website being a house, what role does JavaScript play?

Quiz Questions 2/5

Which of the following scenarios is the best use case for declaring a variable with let instead of const?

With these basics, you're ready to explore more of what JavaScript can do.

Mastering JavaScript Development