JavaScript Basics

Bringing Pages to Life

HTML gives a webpage its structure, and CSS makes it look good. But JavaScript is what makes a webpage interactive. It’s the language that lets users click buttons, submit forms, and see content change without reloading the page. Think of it like building a car. HTML is the frame and body. CSS is the paint job and interior design. JavaScript is the engine, transmission, and electrical system—everything that makes the car actually do something.

JavaScript code runs directly in the user's web browser, which makes it fast and responsive. You can add it to any HTML file, and it will execute as the page loads.

To include JavaScript in an HTML file, you use the <script> tag. You can place your code directly inside this tag or, more commonly, link to an external file with a .js extension.

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

<!-- Method 2: External Script File -->
<script src="scripts/main.js"></script>

For bigger projects, keeping your JavaScript in separate .js files is the best practice. It keeps your code organized and your HTML file clean.

Storing Information

Programming is all about working with data. To do that, we need places to store it. In JavaScript, we use variables. A variable is like a labeled box where you can keep a piece of information. You can change what's in the box, but the label stays the same.

To declare a variable, you use the let or const keyword, followed by the variable's name. Use let for values that might change and const for values that will never change (constants).

let userScore = 100; // This can change
const siteName = "WebFun"; // This won't change

userScore = 150; // 'let' allows reassignment
// siteName = "NewFun"; // This would cause an error!

Variables can hold different types of data. These data types determine what kind of values they can store and what you can do with them. JavaScript has several fundamental data types.

Data Type	Description	Example
String	A sequence of text	`"Hello, world!"`
Number	Any numeric value, including integers and decimals	`42`, `3.14`
Boolean	A logical value, either `true` or `false`	`true`
Null	Represents the intentional absence of any value	`null`
Undefined	A variable that has been declared but not assigned a value	`undefined`

JavaScript is a dynamically typed language. This means you don't have to specify the data type when you declare a variable. The browser's JavaScript engine figures it out automatically when the code runs.

Making Things Happen

Once you have data stored in variables, you can perform operations on it using operators. Operators are symbols that perform specific tasks, like addition or comparison.

Expression

noun

A piece of code that produces a value. It can be a simple value like 5 or a combination of variables, values, and operators like 5 + userScore.

The most common operators are arithmetic operators for doing math.

let score = 10;
let bonus = 5;

let totalScore = score + bonus; // Addition: 15
let pointsPerKill = score - bonus; // Subtraction: 5
let finalMultiplier = score * 2; // Multiplication: 20
let halvedScore = score / 2; // Division: 5
let remainder = 10 % 3; // Modulo (remainder): 1

We also have comparison operators to compare two values, which always result in a boolean (true or false).

let userAge = 25;

userAge > 18;  // Greater than: true
userAge === 25; // Strictly equal to: true
userAge !== 30; // Strictly not equal to: true

Always use the strict equality operator (===) instead of the loose one (==). It prevents unexpected bugs by checking both value and type, without trying to convert them first.

Making Decisions and Repeating Actions

Programs rarely run straight from top to bottom. They need to make decisions and repeat tasks. Control structures let you direct the flow of your code.

The if statement is the most basic decision-making tool. It runs a block of code only if a specific condition is true.

let temperature = 25; // in Celsius

if (temperature > 30) {
  console.log("It's a hot day!");
} else if (temperature > 20) {
  console.log("It's a pleasant day.");
} else {
  console.log("It's a bit chilly.");
}

When you need to repeat an action multiple times, you use a loop. The for loop is perfect when you know exactly how many times you want to repeat an action.

This loop will start a counter i at 0, run the code inside, and increment i by one. It continues until the condition i < 3 is no longer true.

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

The console is a developer tool in your browser where you can print messages using console.log(). It's incredibly useful for checking variable values and debugging your code.

Another common loop is the while loop. It repeats a block of code as long as a condition remains true.

let countdown = 3;

while (countdown > 0) {
  console.log(countdown);
  countdown = countdown - 1;
}

console.log("Blast off!");

These are the fundamental building blocks of JavaScript. By combining variables, operators, and control structures, you can start to build logic and create dynamic experiences on your web pages.

Let's 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 HTML tag is used to include JavaScript code in a web page?

With these basics, you're ready to explore how JavaScript interacts with HTML to create truly interactive websites.

JavaScript Mastery: From Zero to Hero