JavaScript Basics

What is JavaScript?

Think of a website as a person. HTML is the skeleton, providing the basic structure. CSS is the clothing and appearance, giving it style. JavaScript is the brain and muscles. It's the programming language that makes websites interactive and dynamic.

Without JavaScript, a webpage is just a static document. You can read it, but you can't really do anything with it. JavaScript lets you create things like interactive maps, animated graphics, and forms that give you feedback instantly. It's the code that runs in your web browser to bring pages to life.

Your First JavaScript Code

You don't need any special tools to start writing JavaScript. You already have everything you need: a web browser. Modern browsers like Chrome, Firefox, and Edge have a built-in tool called the developer console, which is a perfect playground for experimenting with code.

To open it in most browsers on a desktop, just right-click anywhere on a webpage and select "Inspect," then find the "Console" tab.

Let's try a classic first program. Type the following into the console and press Enter:

console.log("Hello, World!");

You should see the message "Hello, World!" printed back at you. The console.log() command is a simple way to display information, and it's incredibly useful for checking your work as you code.

Storing Information

Programming is all about working with data. To do that, we need a way to store and label information. In JavaScript, we use variables and constants for this. Think of them like labeled boxes where you can keep different types of values.

Variable

noun

A named container that holds a value which can be changed or reassigned during the program's execution.

To create a variable, you use the let keyword, followed by a name you choose. It's a good practice to pick names that describe the data they hold.

let userScore;
userScore = 100;

You can also declare the variable and assign it a value in a single step:

let username = "Alex";

Sometimes, you have a value that should never change, like the number of minutes in an hour. For that, you use const.

const minutesInHour = 60;

Use let for values that might change. Use const for values that should stay the same. If you try to change a const, you'll get an error.

Types of Data

Variables can hold different kinds of data. These are called data types. For now, we'll focus on the most common ones.

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

JavaScript is a "dynamically typed" language. This means you don't have to tell a variable what type of data it will hold, and you can even change the type of data it holds later.

let myData = "This is text"; // myData is a String
myData = 5; // Now, myData is a Number

Making Things Happen with Operators

Operators are the symbols that perform actions, like math or making comparisons. They are the verbs of JavaScript.

Arithmetic Operators

These are for doing basic math. You've seen them all before.

Operator	Description	Example
`+`	Addition	`5 + 10`
`-`	Subtraction	`20 - 8`
`*`	Multiplication	`7 * 3`
`/`	Division	`15 / 5`

let wallet = 50;
let priceOfBook = 15;
let remainingMoney = wallet - priceOfBook; // 35

Comparison Operators

These operators compare two values and return a boolean (true or false). They are essential for making decisions in your code.

Operator	Description	Example
`>`	Greater than	`10 > 5` (true)
`<`	Less than	`10 < 5` (false)
`>=`	Greater than or equal to	`7 >= 7` (true)
`<=`	Less than or equal to	`4 <= 2` (false)
`===`	Strictly equal to (same value and type)	`10 === 10` (true)
`!==`	Strictly not equal to	`10 !== "10"` (true)

It's best to always use the triple equals === for checking equality. The double equals == can sometimes give surprising results because it tries to convert types before comparing.

Logical Operators

These operators let you combine multiple boolean expressions.

Operator	Description	Example
`&&`	AND (true if both sides are true)	`(5 > 3) && (10 > 5)` returns `true`
`		`
`!`	NOT (inverts the value)	`!(5 > 3)` returns `false`

Let's see them in action:

let hasTicket = true;
let isOver18 = true;
let canEnter = hasTicket && isOver18; // canEnter is true

let hasCoupon = false;
let isMember = true;
let getsDiscount = hasCoupon || isMember; // getsDiscount is true

Time to check what you've learned.

Quiz Questions 1/6

Using the analogy that a website is like a person, if HTML is the skeleton and CSS is the clothing, what is JavaScript?

Quiz Questions 2/6

When should you use the const keyword instead of let to declare a variable?

You've now taken your first steps with JavaScript. These fundamentals—variables, data types, and operators—are the building blocks you'll use in everything you create.

JavaScript From Zero to Hero