Récapitulatif JavaScript

Syntaxe, Variables et Portée

ConceptExemple de codeDescription et Usage
Intégration 
<!-- Fichier externe (recommandé) -->
<script src="script.js" defer></script>
 Le code JS se place dans des balises <script>. L'attribut defer est recommandé pour ne pas bloquer le chargement du HTML.
Déclaration 
let age = 25;       // Variable modifiable
const PI = 3.14;    // Constante (immuable)
var old = "Vieux";  // Ancienne syntaxe
 let et const (ES6+) respectent la portée de bloc ({}). var a une portée de fonction et est à éviter aujourd'hui.
Portée (Scope) 
let global = "Je suis partout";

function test() {
    let local = "Juste ici";
    console.log(global); // OK
}
// console.log(local); // Erreur !
 Globale : accessible partout. Locale : accessible uniquement dans le bloc ou la fonction où elle est déclarée.

Opérateurs

CatégorieOpérateursDescription
Arithmétiques + (Addition / Concaténation)
- (Soustraction)
* (Multiplication)
/ (Division)
% (Modulo - Reste de division)
++ (Incrémentation : +1)
-- (Décrémentation : -1)
** (Exposant) 		Permettent d'effectuer des calculs. Attention, le + sert aussi à coller des chaînes de caractères entre elles.
Comparaison == (Égal valeur - conversion auto)
=== (Strictement égal : valeur ET type)
!= (Différent valeur)
!== (Strictement différent)
>, < (Plus grand/petit)
>=, <= (Ou égal) 		Toujours privilégier l'égalité stricte === et !== pour éviter les erreurs de conversion de type implicite (ex: 5 == "5" est vrai, mais 5 === "5" est faux).
Logiques && (ET)
|| (OU)
! (NON) 		Utilisés pour combiner des conditions. ! inverse le résultat (vrai devient faux).

Fonctions de Base et Manipulation

Fonction / PropriétéExempleDescription
Chaînes & Tableaux 
let str = "Bonjour";
let len = str.length; // 7 (Propriété)
let pos = str.indexOf("o"); // 1
let sub = str.substring(0, 3); // "Bon"
let newStr = str.replace("jour", "soir");
let min = str.toLowerCase();
 Méthodes et propriétés essentielles pour manipuler du texte ou connaitre la taille d'un tableau/chaîne.
Conversion 
let n = parseInt("42px"); // 42
let f = parseFloat("3.14"); // 3.14
let s = (123).toString(); // "123"
 Transforme les types de données.
Interaction 
alert("Info");
let rep = confirm("Ok ?"); // true/false
let val = prompt("Nom ?"); // string
 Boîtes de dialogue natives (bloquantes).

Structures de Contrôle et Boucles

StructureExemple de codeDescription
Conditionnelles 
if (age >= 18) { ... } 
else if (age > 12) { ... }
else { ... }

// Switch
switch(val) {
  case 1: ... break;
  default: ...
}
 Permet d'exécuter du code selon des conditions.
Boucle for 
for (let i = 0; i < 5; i++) {
    console.log(i);
}
 Utilisée lorsque le nombre d'itérations est connu.
Boucle while 
while (i < 5) { i++; }
 Tant que la condition est vraie (vérifiée avant).
Boucle do...while 
do { 
  i++; 
} while (i < 5);
 Exécute le code au moins une fois, puis vérifie la condition.
Break / Continue break; (stop)
continue; (suivant)		 Contrôle le flux dans les boucles.

Fonctions

Une fonction est un bloc de code réutilisable. Il est important de distinguer les fonctions qui effectuent une action simple de celles qui renvoient une valeur.

Cas d'utilisationExemple de codeDescription
Sans paramètre
Sans valeur de retour		 
function direBonjour() {
    console.log("Bonjour !");
}

// Appel
direBonjour();
 La fonction exécute simplement une série d'instructions (ici, un affichage console) et ne renvoie rien.
Avec paramètres
Sans valeur de retour		 
function saluer(prenom) {
    console.log("Bonjour " + prenom);
}

// Appel avec argument
saluer("Alice"); // Affiche "Bonjour Alice"
 La fonction reçoit des données en entrée (arguments) pour adapter son comportement, mais ne renvoie toujours rien au programme principal.
Avec paramètres
ET valeur de retour		 
function carre(nombre) {
    return nombre * nombre;
}

// Appel et stockage du résultat
let resultat = carre(5); 
console.log(resultat); // 25
 Le mot-clé return est crucial. Il renvoie le résultat du calcul à l'endroit où la fonction a été appelée. La fonction s'arrête immédiatement après le return.
Fonction Fléchée (ES6) 
// Syntaxe concise pour une ligne
const somme = (a, b) => a + b;

// Avec bloc de code
const direAurevoir = () => {
    console.log("Au revoir");
};
 Une syntaxe moderne plus courte. Si la fonction tient sur une ligne, le return est implicite (pas besoin de l'écrire).

Tableaux et Objets

TypeExemple de codeDescription
Tableau Simple 
let tab = [1, 2, 3];
tab.push(4); // Ajoute
console.log(tab[0]); // 1
 Liste ordonnée indexée numériquement (0, 1, 2...).
Multidimensionnel 
let mat = [[1,2], [3,4]];
console.log(mat[1][0]); // 3
 Tableau de tableaux.
Objet (Associatif) 
let user = { nom: "Guy", age: 30 };
console.log(user.nom); // Guy
console.log(user["age"]); // 30
 Collection de paires clé/valeur.

BOM (Browser Object Model)

Le BOM permet d'interagir avec la fenêtre du navigateur.

ObjetPropriétés/MéthodesExemple
window L'objet global. window.resizeTo(500, 500) (redimensionner)
window.close() (fermer l'onglet/fenêtre)
window.innerWidth (largeur viewport)
navigator Infos navigateur. navigator.language (ex: "fr-FR")
navigator.cookieEnabled (true/false)
navigator.userAgent (version système)
location Gestion URL. location.href (URL actuelle)
location.assign("https://...") (Rediriger)
location.reload() (Recharger)
history Historique nav. history.back() (Précédent)
history.forward() (Suivant)
history.length (Nb pages dans l'historique)
screen Infos Écran. screen.width (Largeur totale écran)
screen.height (Hauteur totale écran)
screen.availWidth (Largeur disponible sans barre tâches)

DOM (Document Object Model)

Manipulation du contenu HTML et CSS.

ActionMéthodesDescription
Sélection document.getElementById("id")
document.getElementsByTagName("p")
document.getElementsByClassName("cls")
document.querySelector("#id .cls") 		getElementById retourne 1 élément.
getElementsByTagName retourne une collection (plusieurs).
querySelector est le plus moderne et polyvalent.
Contenu el.textContent = "Texte brut";
el.innerHTML = "<b>HTML</b>";
document.write("Texte"); 		textContent est sécurisé pour du texte.
innerHTML interprète les balises.
write écrit directement dans le flux (écrase tout si page chargée).
Manipulation document.createElement("div")
parent.append(el) (Ajoute à la fin)
parent.prepend(el) (Ajoute au début)
el.remove() (Supprime l'élément) 		Permet de construire ou détruire le DOM dynamiquement. append est plus souple que l'ancien appendChild.
Style el.style.backgroundColor = "red"; Modifie le style en ligne (attribut style). Utiliser CamelCase pour les propriétés CSS.

Événements

MéthodeExemple de codeNote
addEventListener 
btn.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("Clic !");
});
 Standard moderne. Sépare JS et HTML.
Attribut HTML <button onclick="func()"> Ancienne méthode, déconseillée.

Asynchrone, Exceptions et POO

ConceptExempleDescription
Timer setTimeout(fn, 1000)
setInterval(fn, 1000)		 Exécuter une fois après délai ou en boucle.
Exceptions 
try { ... } catch(e) { ... }
 Gestion des erreurs sans planter le script.
POO 
class Chat extends Animal { ... }
 Classes et héritage (ES6).
Get/Set 
get nom() { return ... }
 Accesseurs et mutateurs de propriétés.

API et Stockage

TechnoExempleDescription
Fetch (API) fetch(url).then(res => res.json()) Remplaçant moderne de XMLHttpRequest.
XHR (Ancien) new XMLHttpRequest() Ancienne méthode AJAX.
Web Storage localStorage.setItem("key", "val") Stockage persistant (local) ou temporaire (session).
Cookies document.cookie = "a=1"; Stockage lié aux requêtes HTTP.

jQuery

Bibliothèque pour simplifier le DOM et l'AJAX.

ActionjQueryJS Natif
Sélection $(".class") document.querySelectorAll(".class")
Modif. $("#id").html("Txt").css("color","red") el.innerHTML="Txt"; el.style.color="red"
Event $("btn").on("click", fn) el.addEventListener("click", fn)
AJAX $.ajax({url:..., success:...}) fetch(url).then(...)