Javascript

📘 Théorie de base¶

1. Qu'est-ce que JavaScript ?¶

JavaScript est un langage de programmation interprété principalement utilisé pour ajouter de l'interactivité aux pages web. Il fonctionne côté client (navigateur), mais peut aussi être utilisé côté serveur (Node.js).

2. Histoire rapide¶

JavaScript a été créé en 1995 par Brendan Eich chez Netscape. Il ne faut pas le confondre avec Java, malgré son nom.

3. Caractéristiques principales¶

Langage interprété : Pas besoin de compilation.
Langage orienté objet : Utilise des objets et des classes.
Langage dynamique : Les types de variables sont définis à l'exécution.
Langage multi-paradigme : Supporte la programmation impérative, fonctionnelle et orientée objet.
Événementiel : Réagit aux actions de l'utilisateur (clics, mouvements de souris, etc.).
Asynchrone : Grâce aux callbacks, promesses et async/await, il peut gérer les opérations longues sans bloquer le reste du code.

4. Utilisations typiques¶

Côté client : Manipulation du DOM, gestion des événements, animations.
Côté serveur : Avec Node.js, JavaScript est aussi utilisé pour créer des serveurs web.

1. Fonctions importantes et mots-clés en JavaScript¶

1.1 🔑 Mots-clés courants¶

Mot-clé	Description
`var`	Déclare une variable (ancienne méthode, portée fonctionnelle)
`let`	Déclare une variable à portée de bloc
`const`	Déclare une constante à portée de bloc
`function`	Déclare une fonction
`return`	Retourne une valeur depuis une fonction
`if`, `else`, `switch`	Contrôle de flux conditionnel
`for`, `while`, `do...while`	Boucles
`break`	Interrompt une boucle ou un switch
`continue`	Passe à l’itération suivante d’une boucle
`try`, `catch`, `finally`	Gestion des erreurs
`throw`	Lance une erreur personnalisée
`class`, `extends`, `super`	Programmation orientée objet
`import`, `export`	Modules JavaScript (ES6)
`async`, `await`	Programmation asynchrone

1.2 🔧 Fonctions intégrées utiles¶

Fonction	Description
`alert()`	Affiche une boîte de dialogue d’alerte
`console.log()`	Affiche un message dans la console
`prompt()`	Demande une saisie utilisateur
`parseInt()`	Convertit une chaîne en entier
`parseFloat()`	Convertit une chaîne en nombre flottant
`isNaN()`	Vérifie si une valeur n’est pas un nombre
`typeof`	Renvoie le type d’une variable
`Array.isArray()`	Vérifie si une valeur est un tableau
`setTimeout()`	Exécute une fonction après un délai
`setInterval()`	Exécute une fonction de manière répétée à intervalle régulier

1.3 Exemple d’utilisation de mots-clés¶

const nom = prompt("Quel est votre nom ?");

if (nom) {
  console.log("Bonjour " + nom);
} else {
  console.log("Nom inconnu");
}

2. 🌱 Les bases de JavaScript¶

2.1 Intégration dans une page HTML¶

<!DOCTYPE html>
<html>
<head>
  <title>Mon script</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Ou directement dans une balise <script> :

<script>
  alert('Bonjour !');
</script>

2.2 Variables¶

let nom = "Alice";    // variable modifiable
const PI = 3.14;      // constante
var age = 30;         // ancienne syntaxe, à éviter

2.3 Types de données¶

string : "Bonjour"
number : 42, 3.14
boolean : true, false
undefined
null
object, array, function

2.4 Opérateurs¶

Arithmétiques : +, -, *, /, %
Comparaison : ==, ===, !=, !==, <, >, <=, >=
Logiques : &&, ||, ! // et, ou et inverse

2.4.1 🔍 `==` vs `===` en JavaScript¶

Expression	`==` (Égalité lâche)	`===` (Égalité stricte)
`'5' == 5`	✅ `true`	❌ `false`
`0 == false`	✅ `true`	❌ `false`
`null == undefined`	✅ `true`	❌ `false`
`'' == false`	✅ `true`	❌ `false`
`5 == 5`	✅ `true`	✅ `true`
`'true' == true`	❌ `false`	❌ `false`

✅ == convertit les types avant comparaison.
✅ === compare valeur et type sans conversion.

Tips

utiliser === pour éviter les surprises liées à la coercition de type.

3. Contrôle de flux¶

3.1 Conditions¶

if (age > 18) {
  console.log("Majeur");
} else {
  console.log("Mineur");
}

Opérateur ternaire :

let message = (age > 18) ? "Majeur" : "Mineur";

3.2 Boucles¶

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

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

4. Fonctions¶

function saluer(nom) {
  return `Bonjour ${nom}`;
}

const direBonjour = (nom) => `Bonjour ${nom}`;

5. Tableaux et objets¶

5.1 Tableaux¶

let fruits = ["pomme", "banane"];
fruits.push("kiwi");
console.log(fruits[0]); // pomme

5.2 Objets¶

let personne = {
  nom: "Alice",
  age: 30,
  parler: function () {
    console.log("Bonjour !");
  }
};

console.log(personne.nom);
personne.parler();

6. DOM (Document Object Model)¶

Definition DOM

6.1 Sélection des éléments¶

const titre = document.querySelector("h1");

6.2 Modification du contenu¶

titre.textContent = "Nouveau Titre";

6.3 Événements¶

document.querySelector("button").addEventListener("click", () => {
  alert("Clic !");
});

6.4 💡 Exemple : compteur qui s'incrémente au clic¶

HTML :

<button id="incrementer">Incrémenter</button>
<p>Compteur : <span id="compteur">0</span></p>

JavaScript :

let compteur = 0;
document.getElementById("incrementer").addEventListener("click", () => {
  compteur++;
  document.getElementById("compteur").textContent = compteur;
});

7. Asynchrone et AJAX¶

7.1 setTimeout / setInterval¶

setTimeout(() => {
  console.log("1 seconde");
}, 1000);

7.2 Promesses¶

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

8. Concepts avancés¶

8.1 Closures¶

function createCounter() {
  let count = 0;
  return () => ++count;
}

const counter = createCounter();
console.log(counter()); // 1

8.2 Classes¶

class Animal {
  constructor(nom) {
    this.nom = nom;
  }

  parler() {
    console.log(`${this.nom} fait du bruit`);
  }
}

8.3 Modules (ES6)¶

// fichier.js
export function addition(a, b) {
  return a + b;
}

// main.js
import { addition } from "./fichier. { .js .copy }";

8.4 Async / Await¶

async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}