Sections
Types de Données
| Type | Exemple | typeof |
|---|---|---|
| Number | const n = 42; | "number" |
| String | const s = "salut"; | "string" |
| Boolean | const b = true; | "boolean" |
| Array | const a = [1,2,3]; | "object" |
| Object | const o = {x:1}; | "object" |
| undefined | une variable déclarée mais sans valeur assignée | "undefined" |
| null | const x = null; | "object" |
Variables : let, const, var
| Mot-clé | Réassignable | Quand l'utiliser |
|---|---|---|
| const | Non | Choix par défaut — pour tout ce qui ne va pas changer |
| let | Oui | Quand la valeur de la variable va définitivement changer |
| var | Oui | Option obsolète, non utilisée dans du nouveau code |
Opérateurs de Comparaison
| Opérateur | Signification |
|---|---|
=== | Égalité stricte (compare la valeur et le type) |
!== | Inégalité stricte |
== | Égalité non stricte (avec conversion de types, mieux vaut l'éviter) |
> >= < <= | Supérieur à, supérieur ou égal, inférieur à, inférieur ou égal |
&& | ET logique (les deux conditions vraies) |
|| | OU logique (au moins une condition vraie) |
! | NON logique (inverse la valeur) |
Méthodes de Tableaux
| Méthode | Ce qu'elle fait | Exemple |
|---|---|---|
| push() | Ajoute un élément à la fin | arr.push(5) |
| pop() | Supprime et renvoie le dernier élément | arr.pop() |
| shift() | Supprime et renvoie le premier élément | arr.shift() |
| unshift() | Ajoute un élément au début | arr.unshift(0) |
| map() | Crée un nouveau tableau en appliquant une fonction à chaque élément | arr.map(x => x * 2) |
| filter() | Crée un nouveau tableau seulement avec les éléments correspondants | arr.filter(x => x > 5) |
| forEach() | Parcourt chaque élément, ne renvoie rien | arr.forEach(x => console.log(x)) |
| find() | Renvoie le premier élément correspondant | arr.find(x => x > 5) |
| includes() | Vérifie si une valeur existe dans le tableau | arr.includes(5) |
| slice() | Renvoie une partie d'un tableau sans modifier l'original | arr.slice(1, 3) |
| splice() | Supprime/ajoute des éléments, en modifiant l'original | arr.splice(1, 2) |
| join() | Assemble un tableau en un string avec un séparateur | arr.join(", ") |
| reduce() | Réduit un tableau à une seule valeur (comme une somme) | arr.reduce((s,x)=>s+x, 0) |
Méthodes de Strings
| Méthode / propriété | Ce qu'elle fait | Exemple |
|---|---|---|
| length | Longueur du string | "salut".length → 5 |
| toUpperCase() | Convertit en majuscules | "hi".toUpperCase() → "HI" |
| toLowerCase() | Convertit en minuscules | "HI".toLowerCase() → "hi" |
| slice() | Renvoie une partie d'un string | "salut".slice(0,2) → "sa" |
| split() | Divise un string en tableau selon un séparateur | "a,b".split(",") → ["a","b"] |
| includes() | Vérifie si un string contient un sous-string | "salut".includes("alu") → true |
| trim() | Supprime les espaces en début et fin | " hi ".trim() → "hi" |
| replace() | Remplace une partie d'un string | "hi".replace("h","H") → "Hi" |
Conditions et Boucles
| Structure | Syntaxe |
|---|---|
| if / else | if (x > 5) { ... } else { ... } |
| if / else if / else | if (x>90){...} else if (x>70){...} else {...} |
| switch | switch (x) { case 1: ...; break; default: ...; } |
| for | for (let i = 0; i < 10; i++) { ... } |
| while | while (condition) { ... } |
Fonctions
| Type | Syntaxe |
|---|---|
| Fonction normale | function somme(a, b) { return a + b; } |
| Expression de fonction | const somme = function(a, b) { return a + b; }; |
| Fonction fléchée | const somme = (a, b) => a + b; |
| Appeler la fonction | somme(2, 3); // 5 |
Bases du DOM
| Méthode / propriété | Ce qu'elle fait |
|---|---|
| document.querySelector() | Trouve le premier élément correspondant à un sélecteur CSS |
| document.querySelectorAll() | Trouve tous les éléments correspondant à un sélecteur CSS |
| element.innerHTML | Lit ou définit le contenu HTML d'un élément |
| element.textContent | Lit ou définit le texte à l'intérieur d'un élément |
| element.addEventListener() | Associe un gestionnaire d'événements (clic, saisie, etc.) |
| element.classList.add() / remove() / toggle() | Gère les classes CSS d'un élément |
| element.value | La valeur d'un champ de saisie (input, select) |
| element.style | Contrôle direct des styles CSS d'un élément |
Que faire ensuite
Envie d'aller plus loin ?
Tous ces sujets sont expliqués en détail dans le cours gratuit de JavaScript, avec des exercices pratiques après chaque leçon.