Mémo — JavaScript

La référence complète du cours

Brancher le fichier

<body>
  …
  <script src="app.js"></script>  <!-- TOUT EN BAS -->
</body>

Variables

const nom = "Camille";  // ne changera pas → par défaut
let compteur = 0;       // va changer

console.log(valeur);          // afficher dans la console
console.log(typeof valeur);   // afficher le type

Nommage : minuscule au début, camelCase, pas d’accent, un nom qui dit ce que c’est.

Les types

"du texte"     // string
42             // number   (point décimal : 12.5)
true / false   // boolean
null           // « volontairement vide »
undefined      // « pas de valeur du tout »

Opérations

+  -  *  /     // arithmétique
%              // reste de la division : n % 2 === 0 → n est pair

`Bonjour ${prenom}, tu as ${age} ans`   // gabarit : accents graves

Le piège du +

5 + 3       // 8
"5" + 3     // "53"  ← dès qu'un texte est présent, + colle
Number("5") + 3  // 8  ✅

Conversions et nombres

Number("42")        // 42
Number("bonjour")   // NaN
Number.isNaN(x)     // true si la conversion a échoué
String(42)          // "42"
(3.14159).toFixed(2) // "3.14"
Math.floor(4.9)     // 4
Math.random()       // nombre au hasard entre 0 et 1
Math.floor(Math.random() * 5) + 1  // entier au hasard de 1 à 5

Textes

texte.length            // longueur
texte.trim()            // enlève les espaces autour
texte.toUpperCase()     // MAJUSCULES
texte.toLowerCase()     // minuscules
texte.includes("@")     // true / false
texte.replace("a", "b") // remplace
texte[0]                // première lettre
texte.slice(1)          // tout sauf la première lettre

Conditions

if (condition) {
  …
} else if (autreCondition) {
  …
} else {
  …
}

===   égal (valeur ET type)   ← toujours celui-là
!==   différent
>  <  >=  <=

a && b    // ET
a || b    // OU
!a        // NON

Les 2 pièges

= range une valeur, === compare
x === 1 || x === 2 — on répète la variable de chaque côté du ||

Tableaux

const fruits = ["pomme", "banane", "kiwi"];

fruits[0]              // "pomme"  ← on compte à partir de 0
fruits.length          // 3
fruits[1] = "poire";   // remplacer
fruits.push("fraise"); // ajouter à la fin
fruits.indexOf("kiwi") // 2  (position)
fruits.splice(1, 1);   // supprimer 1 élément à la position 1
fruits.join(", ")      // "pomme, banane, kiwi"

Boucles

for (const fruit of fruits) {
  console.log(fruit);
}

of = les valeurs ✅ · in = les index (piège)

Accumuler

let total = 0;             // AVANT la boucle
for (const n of nombres) {
  total = total + n;       // on ajoute, on n'écrase pas
}

Fonctions

function nom(param1, param2) {
  return quelqueChose;
}

const resultat = nom(valeur1, valeur2);

Version fléchée :

const nom = (param) => {
  return quelqueChose;
};

return ≠ console.log

return rend la valeur → réutilisable console.log l’affiche → perdue

return arrête immédiatement la fonction.

Le DOM

Attraper

document.querySelector("#monId");
document.querySelector(".maClasse");
document.querySelector("h1");
document.querySelectorAll(".maClasse");  // TOUS → parcourir avec for…of
document.body;

Modifier

el.textContent = "texte";     // du texte (SÛR)
el.innerHTML = "<li>…</li>";  // du HTML (jamais avec du texte utilisateur)
el.value                      // pour les <input> uniquement
el.src = "photo.jpg";
el.style.color = "red";
el.style.backgroundColor = "yellow";   // camelCase !
el.classList.add("alerte");
el.classList.remove("alerte");
el.classList.toggle("alerte");
el.className = "alerte";      // remplace TOUTES les classes

Créer

const li = document.createElement("li");
li.textContent = texte;
liste.appendChild(li);

liste.innerHTML = "";  // vider un conteneur

Événements

bouton.addEventListener("click", () => {
  …
});

formulaire.addEventListener("submit", (event) => {
  event.preventDefault();   // ← SANS ÇA, LA PAGE SE RECHARGE
  …
});

Événement	Quand
`"click"`	Clic
`"submit"`	Validation d’un formulaire
`"input"`	À chaque frappe dans un champ
`"change"`	Quand un champ perd le focus après modification

Formulaires

champ.value              // toujours du TEXTE
champ.value.trim()
Number(champ.value)
maCase.checked           // true / false
maListe.value            // option sélectionnée
champ.value = "";        // vider un champ
formulaire.reset();      // vider tout le formulaire

Validation type :

const texte = champ.value.trim();

if (texte === "") {
  erreur.textContent = "Champ obligatoire.";
  return;
}

Objets

const p = { prenom: "Camille", age: 19 };

p.prenom            // lire
p.age = 20;         // modifier
p.ville = "Lyon";   // ajouter

Tableau d’objets :

const gens = [
  { prenom: "Camille", age: 19 },
  { prenom: "Alex", age: 21 },
];

for (const g of gens) {
  console.log(g.prenom);
}

Classes

class Compte {
  constructor(titulaire, solde) {
    this.titulaire = titulaire;
    this.solde = solde;
  }

  deposer(montant) {
    this.solde = this.solde + montant;
  }

  afficher() {
    return `${this.titulaire} : ${this.solde} €`;
  }
}

const c = new Compte("Camille", 100);
c.deposer(20);
console.log(c.afficher());

Les 3 oublis classiques

new devant le nom de la classe
this. dans le constructeur
Les parenthèses à l’appel : c.afficher(), pas c.afficher

JSON

const texte = JSON.stringify(objet);   // objet → texte
const objet = JSON.parse(texte);       // texte → objet

JSON exige : guillemets doubles, noms de propriétés entre guillemets, pas de virgule finale, pas de commentaires, pas de fonctions.

localStorage

localStorage.setItem("cle", JSON.stringify(donnees));
const donnees = JSON.parse(localStorage.getItem("cle"));
localStorage.removeItem("cle");

getItem renvoie null si la clé n’existe pas → toujours tester. Jamais de mot de passe ni de donnée sensible dedans.

Erreurs

try {
  // le code qui peut échouer
} catch (erreur) {
  console.log(erreur.message);
  // plan B
}

throw new Error("message clair");

fetch

async function charger() {
  etat.textContent = "Chargement…";

  try {
    const reponse = await fetch(URL);

    if (!reponse.ok) {
      throw new Error(`Erreur ${reponse.status}`);
    }

    const donnees = await reponse.json();
    console.log(donnees);   // toujours regarder d'abord

    // … utiliser les données …
    etat.textContent = "";
  } catch (erreur) {
    etat.textContent = "Une erreur est survenue.";
    console.log(erreur.message);
  }
}

Les 3 règles

await devant fetch ET devant .json()
async devant la fonction qui contient un await
fetch ne plante pas sur un 404 → tester reponse.ok

Symptôme d’un await oublié : Promise { <pending> } dans la console.

Sécurité — les 3 règles du cours

textContent, jamais innerHTML, pour afficher du texte venant d’un utilisateur ou d’Internet (attaque XSS)
Jamais de mot de passe, de jeton ou de clé d’API dans le code d’une page web : tout le monde peut le lire
Toujours valider une saisie avant de s’en servir : vide, trop longue, pas un nombre, hors bornes