(Cette fois, ce n’est pas juste une “introduction” — on plonge vraiment dedans. Prêt(e) avec ton snack cérébral ? 🧠🥨)

JavaScript…
Le magicien en coulisses du web. HTML construit la scène, CSS crée le costume, et JavaScript entre sous les projecteurs en disant : « Place au spectacle ! » 🎭

Il a été créé en 1995 par Brendan Eich. À l’époque, personne ne disait : « Ce langage fera un jour du frontend, du backend, du mobile et du desktop. »

Et pourtant… nous y voilà.

Maintenant, nous construisons une base solide.
Pas superficielle. On répond aussi aux questions : « Pourquoi ça fonctionne comme ça ? »

1️⃣ Comment fonctionne JavaScript ? (Regardons à l’intérieur du moteur)

JavaScript s’exécute généralement dans un moteur de navigateur.

Chrome → Moteur V8
Tu écris du code → Le moteur le lit → Le convertit en code machine → L’exécute

Donc quand tu écris :

console.log("Hello!");

Cette simple ligne passe par un processus complexe en arrière-plan.
Mais pour toi, ça paraît simple — parce que JavaScript est un maître dans l’art de cacher la complexité.

📌 Où écrit-on les scripts ?

Dans le HTML :

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

Dans un fichier séparé :

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

👉 Dans de vrais projets, utilise toujours des fichiers séparés.
Garde ton code propre. Ton “toi du futur” te remerciera.

2️⃣ Variables – Les Boîtes Mémoire 📦

Programmer = Stocker des données + Les traiter + Les afficher.

🟢 let – Utilisation quotidienne

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

Que s’est-il passé ?

score = 10
score + 5 → 15
La nouvelle valeur devient 15

Affichage console : 15

👉 Astuce :
Tu peux aussi écrire :

score += 5;

Même résultat, plus propre.

🔵 const – Constant… mais attention !

const user = "Cansu";

Cela ne peut pas changer.

Mais regarde ceci :

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

Pourquoi pas d’erreur ?

Parce que const verrouille la référence — pas le contenu interne.

👉 Important :
Cette différence est essentielle avec les tableaux et les objets.

🔴 var – Les pièges du scope

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

Ça fonctionne.

Mais :

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

👉 let → portée de bloc
👉 var → portée de fonction

Règle moderne : N’utilise pas var.
On a laissé 1998 derrière nous 😄

3️⃣ Types de Données – Analyse de personnalité de JavaScript 🧬

🧵 String

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

Les backticks (`) permettent l’interpolation.

Ancien style :

"Hello " + name

Le style moderne est plus propre et plus lisible.

🔢 Number & Mathématiques étranges

console.log(0.1 + 0.2);

Attendu : 0.3
Réalité : 0.30000000000000004 😅

Pourquoi ?
Problème de précision en virgule flottante.

👉 Si tu développes une application financière — sois vigilant(e).

🟡 Boolean

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

! → inverse la valeur.

⚫ Truthy & Falsy (Très important !)

if (0) console.log("Ne s’exécute pas");
if ("") console.log("Ne s’exécute pas");
if (null) console.log("Ne s’exécute pas");
if (undefined) console.log("Ne s’exécute pas");

Valeurs falsy :

0
“”
null
undefined
NaN
false

Les connaître t’évitera des bugs subtils.

4️⃣ Opérateurs – Combinaisons puissantes ⚔️

Comparaison

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

Opérateurs logiques

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

&& → ET
|| → OU

Logique de court-circuit

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

Si name est vide → retourne “Guest”.

Technique très utilisée en pratique.

5️⃣ Conditions – Le système de décision 🧠

Opérateur ternaire (version courte)

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

Version courte de 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");
}

Si tu oublies break, l’exécution continue vers le bas.

6️⃣ Boucles – La puissance de la répétition 🔁

for avec tableau

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

.length → nombre d’éléments.

forEach (style moderne)

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

Version fléchée :

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

Plus lisible et plus propre.

7️⃣ Fonctions – Les super-héros du code 🦸

Paramètres par défaut

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

Si aucun argument n’est passé → “Guest”.

Expression de fonction

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

Arrow Function & this

Les fonctions fléchées ne lient pas leur propre this.

Sujet avancé — mais important à retenir 😎

8️⃣ Tableaux & Objets – Modéliser le monde réel 🌍

Tableau

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

Objet

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

Dans les applications réelles — presque tout est un objet.

9️⃣ Manipulation du DOM – Prendre le contrôle de la 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!";
});