Fiches JavaScript

À retenir

• JavaScript s'exécute dans le navigateur ; on l'ajoute avec <script src="script.js" defer>.
• console.log affiche dans la console (F12), où apparaissent aussi les erreurs.
• const par défaut, let si la variable change, jamais var.
• Texte avec variables : accents graves et ${…}.
• Ce qu'on tape dans un champ est un texte : Number() pour calculer.

Mémo

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

const prenom = "Léa";
let score = 0;
score += 5;
console.log(`${prenom} a ${score} points`);
Number("5") + 1   // 6
"5" + 1           // "51"

Pièges à éviter

• Modifier une const : erreur.
• Additionner un texte et un nombre : ils sont collés.
• Oublier defer : le script cherche des éléments pas encore chargés.

Revoir la leçon et ses exercices

À retenir

• Comparer avec === et !==, jamais ==.
• Tableau : push ajoute, length donne la taille, indices à partir de 0.
• for (const x of tableau) parcourt les éléments ; for (let i = 0; i < n; i++) compte.
• Fonction : function nom(p) { return … } ou fléchée const nom = (p) => ….

Mémo

if (age >= 18) { … } else { … }

const fruits = ["pomme", "kiwi"];
fruits.push("mangue");
for (const f of fruits) console.log(f);

function carre(n) { return n * n; }
const double = (n) => n * 2;

Pièges à éviter

• "5" == 5 est vrai : utilise ===.
• Une fonction fléchée avec accolades a besoin de return.

Revoir la leçon et ses exercices

À retenir

• Le DOM est l'arbre des éléments de la page, modifiable en JavaScript.
• querySelector("sélecteur CSS") trouve un élément ; querySelectorAll les trouve tous.
• textContent pour écrire du texte (jamais innerHTML avec une saisie : faille XSS).
• classList.add / remove / toggle pour les classes.
• addEventListener("click" | "input" | "submit", fonction) réagit aux actions du visiteur.
• value lit un champ ; createElement + append ajoutent un élément.

Mémo

const bouton = document.querySelector("#theme");
bouton.addEventListener("click", () => {
  document.body.classList.toggle("sombre");
});

const li = document.createElement("li");
li.textContent = champ.value;
liste.append(li);

Pièges à éviter

• Utiliser innerHTML avec un texte tapé par un visiteur.
• Chercher un élément avant qu'il existe (script sans defer).

Revoir la leçon et ses exercices

À retenir

• Un compteur : une variable let modifiée dans un écouteur de clic.
• On affiche avec textContent, on bloque un bouton avec disabled = true.

Mémo

let clics = 0;
bouton.addEventListener("click", () => {
  clics++;
  total.textContent = clics;
  if (clics >= 10) bouton.disabled = true;
});

Revoir la leçon et ses exercices