Introduction

JavaScript is a lightweight, interpreted programming language that adds interactivity to web pages. It runs in the browser and can also be used on servers through environments like Node.js.

Originally created to make websites dynamic, JavaScript has evolved into one of the most popular languages in the world, used for both frontend and backend development.

Its supported by all major browsers and can manipulate HTML, CSS, and handle user events.

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

The line above prints a message in the browser console — a common first step for every developer learning the language.

Variables and Data Types

Variables are used to store information that can be referenced and manipulated later. In JavaScript, you can declare them using let, const, or var.

let name = "Alice"; const year = 2025; var isLearning = true;

JavaScript supports several data types, including strings, numbers, booleans, objects, and arrays.

String: represents text, e.g., "Hello"
Number: any numeric value, e.g., 42
Boolean: true or false
Object: a collection of key-value pairs
Array: an ordered list of items

Functions

Functions are blocks of reusable code designed to perform specific tasks. They can take parameters and return values.

function greet(name) { return "Hello, " + name + "!"; }

The code above defines a function called greet that takes one parameter and returns a greeting message.

Functions can also be written using arrow syntax, which provides a more concise way to define them.

const greetArrow = (name) => "Hello, " + name + "!";

Both versions work the same way, but arrow functions are especially useful in modern JavaScript applications.

Conditionals and Loops

Conditionals help control the flow of a program by executing code only if certain conditions are met.


      if (age >= 18) {
        console.log("You are an adult.");
      } else {
        console.log("You are underage.");
      }

Loops allow repeating a block of code multiple times. The most common ones are for, while, and for...of.

for: runs a fixed number of times
while: runs while a condition is true
for...of: iterates over arrays or iterable objects


      for (let i = 0; i < 5; i++) {
        console.log("Count:", i);
      }

This loop prints numbers from 0 to 4 in the console.

DOM Manipulation

The Document Object Model (DOM) represents the structure of a webpage. JavaScript can interact with it to modify content dynamically.

You can select HTML elements using methods like getElementById() or querySelector().

const title = document.getElementById("main-title"); title.textContent = "Updated Title";

This example finds an element with the id "main-title" and changes its text.

Change text or attributes
Add or remove elements
Respond to user events
Update styles dynamically

DOM manipulation is the foundation of modern interactive web pages and frameworks like React are built on this concept.