JavaScript Basics

The Language of the Web

JavaScript is the programming language that brings websites to life. While HTML structures the content and CSS styles it, JavaScript adds interactivity. Think of it as the language you use to give instructions to a web browser, telling it what to do and when.

Like any language, JavaScript has its own grammar, called syntax. These are the rules we follow to write instructions the computer can understand. We write these instructions, or code, one line at a time. Each complete instruction is called a statement, and in JavaScript, we usually end them with a semicolon (;).

// This is a comment. The browser ignores it.
// Comments are notes for humans.

let message = "Hello, world!"; // This is a statement.

The code above is a simple statement that stores a piece of text. Let's break down how we can store and manage different kinds of information.

Storing Information

To work with data, we need places to put it. In JavaScript, we use variables and constants. Think of a variable as a labeled box where you can store something. You can change what's inside the box whenever you want.

// Use the 'let' keyword to declare a variable.
let userScore = 0;

// We can change the value later.
userScore = 10;

A constant is like a box that’s sealed shut once you put something in it. Its value cannot be changed. We use constants for values that we know will stay the same, like the value of pi or the number of days in a week.

// Use the 'const' keyword to declare a constant.
const yearOfBirth = 1995;

// Trying to change it will cause an error!
// yearOfBirth = 1996; // This line would break the code.

The information we store comes in different forms, known as data types. Here are the most common ones:

Data Type	Description	Example
`String`	Text, wrapped in quotes.	`"Alice"` or `'Hello!'`
`Number`	Any number, with or without decimals.	`42` or `3.14`
`Boolean`	Represents a logical value.	`true` or `false`
`undefined`	A variable that has been declared but not given a value.	`let user;`
`null`	Represents the intentional absence of any object value.	`let selectedUser = null;`

Making Things Happen

Once we have data, we can use operators to work with it. Operators are symbols that perform actions, like math or comparisons.

Arithmetic operators let us do math:

let price = 10;
let tax = 0.88;
let total = price + tax; // Addition -> 10.88

let items = 20;
let itemsPerBox = 5;
let boxesNeeded = items / itemsPerBox; // Division -> 4

Assignment operators are for putting a value into a variable.

let score = 100;

// Add 10 to the current score
score += 10; // now score is 110

Comparison operators compare two values and give us a boolean (true or false) answer. This is how our program can start to make decisions.

let playerAge = 18;

playerAge > 17; // Is playerAge greater than 17? -> true
playerAge === 18; // Is playerAge exactly equal to 18? -> true
playerAge !== 20; // Is playerAge not equal to 20? -> true

Notice the use of === instead of =. A single equals sign assigns a value, while a triple equals sign checks if two values are identical.

Controlling the Flow

A program rarely runs straight from top to bottom. We often need it to make choices or repeat actions. This is called control flow.

The most basic way to make a decision is with an if statement. It runs a block of code only if a certain condition is true.

let temperature = 15;

if (temperature < 20) {
  // This code runs because the condition is true.
  console.log("It's a bit chilly, wear a jacket!");
}

We can add an else block to provide an alternative path for when the condition is false.

let accountBalance = 45;

if (accountBalance >= 50) {
  console.log("You can afford the item.");
} else {
  // This code runs because the condition is false.
  console.log("Sorry, not enough funds.");
}

When we need to repeat an action multiple times, we use a loop. A for loop is great when you know exactly how many times you want to repeat something.

This for loop will start a counter i at 1, run the code inside the curly braces {} as long as i is less than or equal to 3, and add one to i after each pass.

// This loop will run 3 times.
for (let i = 1; i <= 3; i++) {
  console.log("This is loop number " + i);
}

// Output:
// "This is loop number 1"
// "This is loop number 2"
// "This is loop number 3"

With variables, operators, and control structures, you have the fundamental tools to start building logic into your code.

Time to check your understanding of these core concepts.

Quiz Questions 1/6

What is the primary role of JavaScript in web development?

Quiz Questions 2/6

Which of the following correctly describes the difference between a variable declared with let and a constant declared with const?

These building blocks are the foundation for everything else you'll do in JavaScript. Mastering them is the first step toward creating dynamic and interactive websites.

Mastering JavaScript