JavaScript transforme une page en système interactif.

1. JavaScript : langage et environnement

JavaScript est un langage dynamique et multi-paradigme. Dans un navigateur, il est accompagné d’API fournies par l’environnement : DOM, événements, stockage, réseau, timers, etc. Node.js fournit un autre environnement avec ses propres API.

2. Valeurs, types et variables

Préfère const lorsque la variable ne doit pas être réassignée, et let lorsqu’elle doit changer. var existe encore mais possède des règles de portée qui rendent le code moderne plus difficile à raisonner.

const name = "Awa";
let score = 0;
const active = true;
const skills = ["HTML", "CSS", "JavaScript"];

Les types primitifs incluent notamment chaîne, nombre, booléen, null, undefined, bigint et symbol. Les objets regroupent ensuite des données et comportements.

3. Conditions et boucles

if (score >= 10) {
  console.log("Objectif atteint");
} else {
  console.log("Continue");
}

for (const skill of skills) {
  console.log(skill);
}

for...of est adapté aux valeurs d’un tableau ou d’un autre itérable. Évite d’utiliser for...in pour parcourir les valeurs d’un tableau : il parcourt des clés/propriétés.

4. Fonctions : isoler une responsabilité

function formatGreeting(name) {
  return `Bonjour ${name} !`;
}

const double = (value) => value * 2;

Une fonction bien conçue possède un rôle clair, des entrées compréhensibles et un résultat prévisible. Les fonctions sont des objets de première classe : elles peuvent être passées en argument ou retournées par d’autres fonctions.

5. Tableaux et objets

const product = {
  name: "Sneaker",
  price: 45000,
  inStock: true
};

const prices = [12000, 45000, 30000];
const affordable = prices.filter((price) => price <= 30000);

Des méthodes comme map(), filter(), find() et reduce() permettent de transformer des collections avec moins de variables temporaires.

6. DOM : relier le code à la page

Le DOM représente le document sous forme d’objets. JavaScript peut sélectionner des éléments, modifier leur texte, leurs attributs ou leurs classes.

const button = document.querySelector("#save");
const status = document.querySelector("#status");

button.addEventListener("click", () => {
  status.textContent = "Enregistré";
});

Préférer textContent pour du texte réduit aussi les risques liés à l’injection de HTML non prévu.

7. État et rendu

Une interface devient plus simple à maintenir quand tu distingues l’état (les données actuelles) de l’affichage (ce que l’utilisateur voit).

let count = 0;

function render() {
  output.textContent = count;
}

addButton.addEventListener("click", () => {
  count += 1;
  render();
});

8. Asynchrone : attendre sans bloquer l’interface

Les requêtes réseau prennent du temps. Les promesses représentent une valeur disponible plus tard. async/await permet d’écrire cette logique de façon lisible.

async function loadProducts() {
  try {
    const response = await fetch("/api/products");
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Chargement impossible", error);
    return null;
  }
}

Une promesse n’arrête pas tout le programme : le reste de l’environnement continue de fonctionner pendant l’attente.

9. Modules : découper un projet

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from "./math.js";
console.log(add(2, 3));

Les modules limitent les variables globales et permettent de séparer la logique par responsabilités.

10. Erreurs et débogage

• lire la première erreur de la console avant d’en chercher une autre ;
• inspecter les valeurs avec le debugger plutôt que multiplier les console.log ;
• traiter les erreurs réseau et les états de chargement ;
• éviter eval() et l’injection de chaînes non fiables dans du HTML exécutable ;
• garder les fonctions courtes et les noms explicites.