Cours frontend • syntaxe, logique, DOM

Apprendre JavaScript avec une structure claire et moderne.

Une page pensée comme un vrai support de cours: concepts essentiels, exemples lisibles, logique de progression, et base solide pour passer du code simple aux interfaces interactives.

Commencer le cours Voir les exercices

Fondamentaux

Les bases qui rendent le langage lisible et fiable.

Avant le DOM ou les frameworks, il faut comprendre variables, types, fonctions, conditions, boucles et structures de données.

Variables et types

Utilisez `const` par défaut, `let` quand une valeur doit changer, et gardez les types en tête: `string`, `number`, `boolean`, `object`, `undefined`, `null`.

Conditions et boucles

`if`, `switch`, `for`, `while` et `for...of` servent à modéliser le comportement du programme sans répétition inutile.

Fonctions

Une fonction doit avoir un rôle clair. Préférez les petites fonctions composables aux gros blocs difficiles à maintenir.

Syntaxe utile

Des exemples concrets, courts, et directement réutilisables.

Déclarer proprement

Const / Let 
const course = "JavaScript";
let progress = 0;

progress += 1;
console.log(course, progress);

Transformer un tableau

Map 
const values = [1, 2, 3, 4];
const doubled = values.map((value) => value * 2);

console.log(doubled); // [2, 4, 6, 8]

Lire un objet

Object.keys / values 
const user = { name: "Chokri", level: "intermediate" };

console.log(Object.keys(user));
console.log(Object.values(user));

Objets et tableaux

Les structures les plus utilisées dans les vraies interfaces.

Objets

Les objets regroupent des données nommées. Ils sont utiles pour représenter un utilisateur, un produit, un état d’interface ou une configuration.

  • Accès via `object.key` ou `object["key"]`
  • Très utile avec `Object.keys`, `Object.values`, `Object.entries`
  • Base de nombreuses structures d’application

Tableaux

Les tableaux sont parfaits pour stocker des listes d’éléments et les transformer avec des méthodes modernes.

  • `map` pour transformer
  • `filter` pour sélectionner
  • `find` pour retrouver un élément

Patterns modernes

Des habitudes qui rendent le code plus maintenable.

Éviter les scripts cassés

Vérifiez toujours les noms de méthodes, les types manipulés et les erreurs de frappe. Un simple `console.log` mal écrit peut bloquer toute une page.

Découper par intention

Séparez logique, données et rendu. Une fonction qui fait une chose bien est plus facile à relire, tester et réutiliser.

Manipuler le DOM proprement

Ciblez les bons éléments, évitez les mutations globales excessives, et préparez les données avant de les injecter dans l’interface.

Mise en pratique

Trois mini-exercices pour consolider les acquis.

01

Doubler une liste de nombres

À partir d’un tableau `[2, 4, 6]`, créez un nouveau tableau avec chaque valeur multipliée par `2`.

02

Afficher les clés d’un objet

Prenez un objet `student` et affichez ses clés avec `Object.keys(student)`.

03

Nettoyer une chaîne

Transformez une chaîne en tableau avec `split()`, puis modifiez ses valeurs avec `map()`.