JavaScript Basics

What is JavaScript?

JavaScript is a programming language that brings websites to life. Think of a webpage in three layers. HTML provides the basic structure, like the skeleton of a body. CSS adds the style—the colors, fonts, and layout—like the clothes and appearance. JavaScript is the muscle; it adds interactivity and makes things happen.

When you click a button that shows a pop-up, see a countdown timer, or watch an animation on a site, that’s JavaScript at work. It runs directly in your web browser, which means it can change what you see on a page without needing to reload it from a server. This makes websites feel fast and responsive.

Basic Syntax and Comments

JavaScript code is made up of statements, which are like sentences in English. Each statement is an instruction for the computer to follow. It's a good practice to end each statement with a semicolon (;), although it's not always required.

// This is a single-line comment.
let message = "Hello, World!";

/* This is a multi-line comment.
It can span across several lines,
making it useful for longer explanations. */
let anotherMessage = "JavaScript is fun!";

You can also leave notes in your code called comments. The browser ignores them, so they're just for you or other developers to read. A single-line comment starts with //, and a multi-line comment is wrapped between /* and */. Comments help explain what your code is doing, which is very helpful when you come back to it later.

Variables and Data Types

A variable is like a container for storing information. You give it a name and put data inside it. In JavaScript, you can create a variable using the let keyword, followed by the variable name, an equals sign, and the value you want to store.

let name = "Aisha";
let age = 25;
let isStudent = true;

The data you store can be of different types. Here are a few basic ones:

String: Text, like a name or a message. You must wrap strings in single quotes (') or double quotes (").
Number: Any number, including decimals. No quotes are needed.
Boolean: Represents a logical value, which can only be true or false. These are useful for making decisions in your code.

Operators

Operators are symbols that perform operations on your variables and values. You've already seen the assignment operator (=), which assigns a value to a variable. There are also arithmetic operators for doing math.

Operator	Description	Example
`+`	Addition	`5 + 3`
`-`	Subtraction	`5 - 3`
`*`	Multiplication	`5 * 3`
`/`	Division	`6 / 3`
`++`	Increment	`x++` (adds 1 to x)
`--`	Decrement	`x--` (subtracts 1 from x)

The + operator is special. When used with numbers, it adds them. But when used with strings, it joins them together in a process called concatenation.

let firstName = "Sam"; let lastName = "Khan"; let fullName = firstName + " " + lastName; // Result is "Sam Khan"

Adding JavaScript to HTML

To make your JavaScript code actually do something on a webpage, you need to include it in an HTML file. The easiest way to do this is by using the <script> tag. You can place your JavaScript code directly inside this tag.

<!DOCTYPE html>
<html>
<head>
  <title>My First JS Page</title>
</head>
<body>

  <h1>Welcome!</h1>

  <script>
    // Your JavaScript code goes here!
    let greeting = "Hello from JavaScript!";
    console.log(greeting);
  </script>

</body>
</html>

In this example, the JavaScript code inside the <script> tag will run when the browser loads the page. The console.log() function is a handy tool for printing messages to the browser's developer console, which is great for testing and debugging your code.

And that's a quick look at the very basics. You've learned what JavaScript is, how to write it, and how to use variables and operators to work with data. This foundation is the first step toward building dynamic and interactive web experiences.

JavaScript Fundamentals in Roman Urdu