(This time it’s not just an “introduction” — we’re diving in. Got your brain-snack ready? 🧠🥨)

JavaScript…
The magician behind the scenes of the web. HTML builds the stage, CSS designs the costume, and JavaScript steps into the spotlight saying, “Showtime!” 🎭

It was created in 1995 by Brendan Eich. Back then, no one was saying, “This language will one day power frontend, backend, mobile, and desktop apps.”

But here we are.

Now we’re building a solid foundation.
Not surface-level. We’re answering the “Why does it work like this?” questions too.

1️⃣ How Does JavaScript Work? (Let’s Look Inside the Engine)

JavaScript usually runs inside a browser engine.

Chrome → V8 Engine
You write code → The engine reads it → Converts it to machine code → Executes it

So when you write:

console.log("Hello!");

That single line goes through a serious process behind the scenes.
But it looks simple to you — because JavaScript is a master at hiding complexity.

📌 Where Do We Write Scripts?

Inside HTML:

<script>
  console.log("Page loaded");
</script>

In a separate file:

<script src="app.js"></script>

👉 In real projects, always use separate files.
Keep your code clean. Future-you will be grateful.

2️⃣ Variables – Memory Boxes 📦

Programming = Store data + Process it + Display it.

🟢 let – Everyday Use

let score = 10;
score = score + 5;console.log(score);

What happened?

score = 10
score + 5 → 15
New value becomes 15

Console output: 15

👉 Pro tip:
You can also write:

score += 5;

Same result, cleaner look.

🔵 const – Constant… But Be Careful!

const user = "Cansu";

This cannot change.

But watch this:

const list = [1, 2, 3];
list.push(4);console.log(list);

Why no error?

Because const locks the reference — not the internal content.

👉 Important:
This difference is crucial when working with arrays and objects.

🔴 var – Scope Traps

if (true) {
  var test = "Hello";
}console.log(test);

It works.

But:

if (true) {
  let test2 = "Hi";
}console.log(test2); // ERROR

👉 let → block scope
👉 var → function scope

Modern rule: Don’t use var.
We left 1998 behind for a reason 😄

3️⃣ Data Types – JavaScript’s Personality Analysis 🧬

🧵 String

let name = "Cansu";
let message = `Hello ${name}`;
console.log(message);

Backticks (`) allow string interpolation.

Old style:

"Hello " + name

Modern style is cleaner and more readable.

🔢 Number & Weird Math

console.log(0.1 + 0.2);

Expected: 0.3
Reality: 0.30000000000000004 😅

Why?
Floating point precision issues.

👉 If you’re building financial software — pay attention.

🟡 Boolean

let isLoggedIn = false;if (!isLoggedIn) {
  console.log("Please log in");
}

! → negates the value.

⚫ Truthy & Falsy (Very Important!)

if (0) console.log("Won’t run");
if ("") console.log("Won’t run");
if (null) console.log("Won’t run");
if (undefined) console.log("Won’t run");

Falsy values:

0
“”
null
undefined
NaN
false

Knowing this saves you from subtle bugs.

4️⃣ Operators – Power Combos ⚔️

Comparison

console.log(5 > 3);   // true
console.log(5 < 3);   // false

Logical Operators

let age = 20;
let hasLicense = true;if (age > 18 && hasLicense) {
  console.log("Can drive");
}

&& → AND
|| → OR

Short-Circuit Logic

let name = "";
let result = name || "Guest";console.log(result);

If name is empty → returns “Guest”.

Very common technique in real projects.

5️⃣ Conditions – The Decision System 🧠

Ternary Operator (Short Version)

let age = 20;
let message = age >= 18 ? "Adult" : "Child";console.log(message);

Short form of if-else.

Switch

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

If you forget break, execution continues downward.

6️⃣ Loops – The Power of Repetition 🔁

for with Array

let fruits = ["Apple", "Pear", "Banana"];for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

.length → number of elements.

forEach (Modern Style)

fruits.forEach(function(fruit) {
  console.log(fruit);
});

Arrow version:

fruits.forEach(fruit => console.log(fruit));

7️⃣ Functions – The Superheroes of Code 🦸

Default Parameters

function greet(name = "Guest") {
  return `Hello ${name}`;
}console.log(greet());

If no argument is passed → “Guest”.

Function Expression

const add = function(a, b) {
  return a + b;
};

Arrow Function & this

Arrow functions don’t bind their own this.

Advanced topic — but important to remember 😎

8️⃣ Arrays & Objects – Modeling the Real World 🌍

Array

let numbers = [1, 2, 3];
numbers.push(4);console.log(numbers);

Object

let user = {
  name: "Cansu",
  age: 25,
  active: true
};console.log(user.name);

In real-world applications — almost everything is an object.

9️⃣ DOM Manipulation – Taking Control of the Page 👑

<h1 id="title">Hello</h1>
<button id="change">Change</button>

const title = document.getElementById("title");
const button = document.getElementById("change");button.addEventListener("click", () => {
  title.textContent = "JavaScript Power!";
});