JavaScript (JS) is a high-level, interpreted programming language used mainly to make web pages interactive and dynamic.

It works alongside:

• HTML → to structure the web page
• CSS → to style the web page
• JavaScript → to add behavior and logic

Example:
👉 HTML can display a button,
👉 CSS can make it look nice,
👉 JavaScript can make it do something when clicked.

🧠 Brief History

• Created by Brendan Eich in 1995 for Netscape Navigator browser.
• Originally called LiveScript, later renamed to JavaScript.
• Now standardized as ECMAScript (ES) — the latest versions are ES6, ES7, etc.
• Runs in all modern web browsers (Chrome, Firefox, Safari, Edge).

⚙️ How JavaScript Works

JavaScript is:

• Client-side → runs directly in the user’s browser (not on the server).
• Interpreted → executes line by line, not compiled beforehand.
• Event-driven → responds to user actions (like clicks or keypresses).

You can also run JavaScript outside browsers using Node.js.

💻 Where to Write JavaScript

You can write JavaScript:

1. Inside HTML files <script> alert("Hello, world!"); </script>
2. In an external file <script src="script.js"></script> In script.js: alert("This is external JavaScript!");

🔡 Basic Syntax and Structure

JavaScript code is written as a series of statements, each ending with a semicolon (;).

Example:

let name = "Raj";
console.log("Hello " + name);

🔢 Variables

Variables are containers for storing data.

Declaring variables:

Keyword	Use	Scope
var	old, function-scoped	❌ not recommended
let	modern, block-scoped	✅ preferred
const	for constants (cannot be reassigned)	✅ preferred for fixed values

Example:

let age = 20;
const name = "Riya";

🧮 Data Types

JavaScript has primitive and non-primitive data types.

Primitive Types:

Type	Example
String	"Hello"
Number	42, 3.14
Boolean	true, false
Undefined	declared but not assigned
Null	empty or no value
Symbol	unique identifier
BigInt	for very large numbers

Example:

let name = "Rohan";  // string
let age = 18;        // number
let isStudent = true; // boolean
let city;             // undefined

➕ Operators

Used to perform operations on values.

Type	Examples
Arithmetic	+ - * / % **
Assignment	= += -= *= /=
Comparison	== === != !== > < >= <=
Logical	`&&
String	+ (concatenation)

Example:

let x = 5, y = 10;
console.log(x + y); // 15
console.log(x > y); // false

🔄 Control Structures

Used to control program flow.

1. If-Else

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

2. Switch

let day = 2;
switch(day) {
  case 1: console.log("Monday"); break;
  case 2: console.log("Tuesday"); break;
  default: console.log("Other day");
}

3. Loops

for(let i = 1; i <= 5; i++) {
  console.log(i);
}

let j = 1;
while(j <= 5) {
  console.log(j);
  j++;
}

🧩 Functions

Functions let you group reusable code.

Example:

function greet(name) {
  console.log("Hello " + name);
}

greet("Aarav"); // Output: Hello Aarav

Arrow Function (ES6+)

const greet = (name) => console.log(`Hello ${name}`);

📦 Arrays

Arrays store multiple values in a single variable.

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[1]); // Banana

fruits.push("Orange"); // add
fruits.pop();          // remove last

📚 Objects

Objects store data in key-value pairs.

let student = {
  name: "Riya",
  age: 21,
  course: "B.Tech"
};

console.log(student.name); // Riya

🎛️ Events and the DOM

JavaScript can interact with HTML through the DOM (Document Object Model).

Example:

<button id="myBtn">Click Me</button>

<script>
  document.getElementById("myBtn").addEventListener("click", function() {
    alert("Button Clicked!");
  });
</script>

📜 Comments

Use comments to describe code.

// This is a single-line comment

/*
This is
a multi-line comment
*/

⚙️ JavaScript in the Browser

You can:

• Log messages → console.log("message");
• Show alerts → alert("Hi!");
• Prompt user → prompt("Enter name:");
• Confirm actions → confirm("Are you sure?");

🚀 Modern JavaScript (ES6+ Features)

Feature	Example
Template Literals	`Hello ${name}`
Let & Const	let, const
Arrow Functions	() => {}
Destructuring	const {a,b} = obj;
Spread Operator	[...arr1, ...arr2]
Classes	class Person {}
Modules	import / export

🧭 Advantages of JavaScript

✅ Runs in all browsers
✅ Easy to learn and flexible
✅ Can be used for both front-end and back-end (via Node.js)
✅ Large community and library support
✅ Powers modern frameworks (React, Angular, Vue)

⚠️ Limitations

⚠️ Can be misused for insecure code (if not careful)
⚠️ Different browsers may interpret JS slightly differently
⚠️ Single-threaded (though async fixes this)

🧩 Example: Simple Interactive Web Page

<!DOCTYPE html>
<html>
<head>
  <title>JS Example</title>
</head>
<body>
  <h2 id="greeting">Hello!</h2>
  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      document.getElementById("greeting").innerText = "You clicked the button!";
    }
  </script>
</body>
</html>

👉 When you click the button, JavaScript updates the text dynamically.

📘 Summary

Topic	Description
Language Type	Interpreted, high-level scripting language
Used For	Adding interactivity to web pages
Runs In	Browser (and Node.js for server-side)
Key Features	Dynamic typing, functions, objects, events
Related To	HTML (structure), CSS (style)