Mastering JavaScript from Beginner to Pro
JavaScript Basics
The Language of the Web
Websites used to be static, like pages in a book. You could read them, but you couldn't really interact with them. Then came JavaScript. It's the programming language that breathes life into web pages, making them dynamic and interactive. Think of things like updating news feeds, animated graphics, or even just a simple pop-up message. That's all JavaScript at work.
It was created in 1995 by a programmer named Brendan Eich at Netscape. He reportedly built the first version in just ten days! Originally called Mocha, then LiveScript, it was eventually renamed JavaScript. Despite the name, it has very little to do with another language called Java. Today, it's one of the cornerstones of the web, alongside HTML and CSS.
Your First Lines of Code
The best part about JavaScript is that you don't need any special software to start writing it. Your web browser has a built-in tool called the developer console, which is a perfect place to experiment.
To open it in most browsers like Chrome, Firefox, or Edge, just right-click anywhere on a webpage and select "Inspect" or "Inspect Element." A new panel will appear. Look for a tab called "Console" and click on it. You're now looking at a live JavaScript environment.
Let's write our first line. Type the following into the console and press Enter:
console.log("Hello, World!");
You should see the text Hello, World! printed back to you. Congratulations, you've just executed JavaScript code! The console.log() command is a simple but powerful tool for printing information, which is incredibly useful for seeing what your code is doing.
Storing Information
To do anything useful, programs need to remember things. They do this using variables. Think of a variable as a labeled box where you can store a piece of information. You give the box a name, and you can look inside it or change its contents later.
In modern JavaScript, we create variables using the keywords let and const.
// Use 'let' for variables that might change.
let score = 100;
console.log(score); // Prints 100
score = 150; // We can update it.
console.log(score); // Prints 150
Sometimes you have a value that should never change, like the year you were born or the number of minutes in an hour. For these, we use const, which stands for constant.
// Use 'const' for values that stay the same.
const hoursInADay = 24;
console.log(hoursInADay);
// If you try to change it...
// hoursInADay = 25; // ...this will cause an error!
The information we store in variables comes in different forms, or data types.
| Data Type | Description | Example |
|---|---|---|
| String | Text, wrapped in quotes. | "Hello, learners!" |
| Number | Any number, with or without decimals. | 42 or 3.14 |
| Boolean | A simple true or false value. | true or false |
JavaScript automatically figures out the data type for you when you create a variable. There are other types, but these three are the most common ones you'll use at first.
Making Things Happen
Variables and data types are the nouns of JavaScript. To create verbs—to make things happen—we use operators. These are symbols that perform operations on our data. You already know many of them from math class.
Arithmetic operators let us perform calculations.
let a = 10;
let b = 5;
console.log(a + b); // Addition: 15
console.log(a - b); // Subtraction: 5
console.log(a * b); // Multiplication: 50
console.log(a / b); // Division: 2
We can also compare values using comparison operators. These operations always result in a boolean value: true or false.
| Operator | Meaning | Example (a = 10, b = 5) | Result |
|---|---|---|---|
> | Greater than | a > b | true |
< | Less than | a < b | false |
=== | Equal to | a === 10 | true |
!== | Not equal to | b !== 10 | true |
Notice the triple equals sign (
===). Using three equals signs checks if two values are equal and if they are the same data type. It's the safest way to check for equality in JavaScript.
Finally, logical operators allow us to combine boolean values to make more complex decisions.
let isLoggedIn = true;
let hasAdminRights = false;
// && (AND): true only if both sides are true
console.log(isLoggedIn && hasAdminRights); // false
// || (OR): true if at least one side is true
console.log(isLoggedIn || hasAdminRights); // true
// ! (NOT): flips the value
console.log(!isLoggedIn); // false
These building blocks—variables, data types, and operators—are the foundation of all JavaScript programs. With them, you can start building logic and creating the interactive experiences that make the web dynamic.
What is the primary role of JavaScript in web development?
Which keyword is used to declare a variable in JavaScript when you know the value should not be reassigned?