What is JavaScript? Complete Beginner Guide with Examples

JavaScript (JS) is a programming language that makes websites dynamic and interactive. While HTML creates structure and CSS makes it beautiful, JavaScript adds life and functionality.

HTML → Structure
CSS → Design
JavaScript → Behavior & Logic

---

How to Add JavaScript in HTML

1️⃣ Inline JavaScript

document.write("<h2>Hello from Inline JavaScript!</h2>");

2️⃣ Internal JavaScript

document.write(`
<script>
  document.write("<h3>Internal JS Running</h3>");
</script>
`);

3️⃣ External JavaScript (Best)

```html <script src="script.js"></script> ````

---

JavaScript Statements

Everything in JS is executed as a statement:

document.write("Hello JavaScript!");
console.log("Code executed");

---

Variables in JavaScript

JS has 3 main variable keywords: * `var` (old) * `let` (modern) * `const` (constant value)

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

document.write("Name: " + name + "
");
document.write("Age: " + age);
console.log("Variables printed"); 

---

Data Types

Basic JS types: * String * Number * Boolean * Object * Array * Null * Undefined Example:

let str = "Hello";
let num = 50;
let flag = true;

document.write(str + "
" + num + "
" + flag);
console.log("Data types displayed"); 

---

Operators in JavaScript

* `+`, `-`, `*`, `/`, `%` * `==`, `===`, `!=`, `!==` * `&&`, `||` * `+=`, `-=`, etc. Example:

let a = 10;
let b = 5;
document.write("Sum = " + (a + b));
console.log("Operators tested");

---

Functions in JavaScript

Functions are reusable blocks of code.

1️⃣ Normal Function

function greet(){
  document.write("<h3>Hello from Function!</h3>");
}
greet();
console.log("Function executed");

2️⃣ Function with Parameters

function add(a, b){
  document.write("Sum = " + (a + b));
}
add(3, 7);
console.log("Parameterized function executed");

3️⃣ Arrow Function (Modern)

const welcome = () => {
  document.write("<b>Hello from Arrow Function</b>");
};
welcome();
console.log("Arrow function executed");

---

Conditions (if, else)

let x = 10;
if(x > 5){
  document.write("x is greater than 5");
} else {
  document.write("x is smaller");
}
console.log("Condition evaluated");

---

Loops in JavaScript

1️⃣ for Loop

for(let i = 1; i <= 5; i++){
  document.write(i + " ");
}
console.log("Loop complete");

2️⃣ while Loop

let i = 1;
while(i <= 5){
  document.write(i + " ");
  i++;
}
console.log("While loop ended");

---

Arrays in JavaScript

let arr = ["HTML", "CSS", "JavaScript"];
document.write(arr.join(", "));
console.log("Array printed");

---

Objects in JavaScript

let user = {
  name: "John",
  age: 20
};
document.write(user.name + " (" + user.age + ")");
console.log("Object logged");

---

JavaScript and DOM

Manipulating webpage elements:

document.write("<h2 id='title'>Old Title</h2>");
document.getElementById("title").innerHTML = "Updated by JavaScript";
console.log("DOM modified");

---

console.log() (Debugging)

It prints messages into the JS console panel. Example: ``` console.log("Hello Developer!"); ``` In our blog, logs appear in the green console area.

---

Final Summary

• JavaScript controls website logic and interaction
• Variables store values
• Functions perform reusable tasks
• Loops repeat tasks
• Conditions apply logic
• Objects & Arrays hold data
• You can modify webpage using DOM

Up next, you can learn DOM events, local storage, ES6 features, and real projects.