Introduction to JavaScript

The Language of the Web

Every time you click a button, see a pop-up, or watch an animation on a website, you're seeing JavaScript in action. While HTML provides the structure (like the skeleton of a house) and CSS adds the style (the paint and furniture), JavaScript brings the interactivity. It's the language that runs inside your web browser, allowing developers to create dynamic and responsive experiences.

Think of it as the code that makes things happen. It can change HTML content, modify CSS styles, and react to what you, the user, are doing on the page.

Storing Information

To do anything useful, a program needs to remember information. In JavaScript, we store data in variables. A variable is like a labeled box where you can keep a piece of information to use later. You create a variable using keywords like let or const.

Use let for variables whose values might change. Use const for variables that should never be reassigned after they are first set, also known as constants.

// Use 'let' for values that can change.
let userScore = 0;
userScore = 10;

// Use 'const' for constant values.
const year = 2024;

The data we store comes in different forms, or data types. JavaScript has several fundamental types to work with.

Data Type	Description	Example
String	A sequence of text	`"Hello, world!"`
Number	Any numeric value, including integers and decimals	`42` or `3.14`
Boolean	A true or false value	`true` or `false`
Null	Represents the intentional absence of any value	`null`
Undefined	A variable that has been declared but not yet assigned a value	`let name;`
Object	A collection of related data as key-value pairs	`{ name: "Alice", age: 30 }`
Array	A list-like collection of data	`[ "apple", "banana", "cherry" ]`

Making Decisions and Repeating Actions

JavaScript can make decisions using conditional statements. The most common is the if...else structure. It checks if a condition is true and runs a block of code. If it's false, it can run a different block of code or do nothing at all.

let hour = 14;

if (hour < 12) {
  console.log("Good morning!");
} else {
  console.log("Good afternoon!");
}

When you need to perform an action repeatedly, you use a loop. A for loop is great when you know how many times you want to repeat an action.

// This loop runs 5 times.
for (let i = 0; i < 5; i++) {
  console.log("This is loop number " + (i + 1));
}

A while loop is useful when you want to repeat an action as long as a certain condition remains true.

let count = 3;

while (count > 0) {
  console.log(count);
  count = count - 1; // Or count--
}

console.log("Blast off!");

Reusable Instructions and Data Collections

Instead of writing the same code over and over, we can package it into a function. A function is a reusable block of code that performs a specific task. You can give it data (called arguments) and it can return a result.

// This function takes two numbers and returns their sum.
function add(a, b) {
  return a + b;
}

let result = add(5, 10); // result is now 15

A variable's scope determines where it can be accessed. Variables declared inside a function are generally only available within that function. This helps prevent different parts of a program from accidentally interfering with each other.

For organizing related data, JavaScript provides two powerful structures: objects and arrays.

An array is an ordered list of values. It's perfect for storing a collection of similar items.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Access the first item: "apple"

An object is a collection of key-value pairs. It's ideal for describing a single entity with multiple properties.

let person = {
  firstName: "Jane",
  lastName: "Doe",
  age: 28,
  isStudent: false
};

console.log(person.firstName); // Access a property: "Jane"

Responding to the User

The real power of JavaScript on the web is its ability to respond to user actions. This is called event handling. An event is something that happens in the browser, like a user clicking a button, submitting a form, or moving their mouse.

You can write code that "listens" for these events and runs a function when they occur. For example, you can tell a button to display a message when it's clicked.

This is how websites feel alive. A form can check for errors before you submit it, a gallery can show a larger image when you click a thumbnail, and a game can respond to your key presses.

Now that you have a grasp of these core concepts, you're ready to build on this foundation. TypeScript, which you'll explore later, takes all of these JavaScript features and adds its own system on top to help you write even more reliable and scalable code.

Quiz Questions 1/6

In the context of web development, what is the primary role of JavaScript?

Quiz Questions 2/6

You need to store a value that you know will not change after it's first assigned, such as a user's date of birth. Which keyword is the best choice for declaring this variable?

TypeScript vs JavaScript