Plan d'enseignement - Cours 122

Vue d'ensemble des 15 séances

Séance	Date	Module	Contenu	Exercices Nuxy
1	21.01	M1	Bases JavaScript	1.1 - 1.9
2	28.01	M2	Conditions	2.1 - 2.6
3	04.02	M3	Boucles	3.1 - 3.4
4	11.02	M4	Fonctions	4.1 - 4.4
5	25.02	M5	Tableaux (bases)	5.1 - 6.10
6	04.03	M1-M7	Démo CinéJS + Intro DOM	7.1 - 7.7
7	11.03	M7	DOM	-
8	25.03	M8	Événements & Formulaires	8.1 - 8.8
9	01.04	M9	Promesses & API (bases)	9.1 - 9.4
10	22.04	M9	Promesses & API (CRUD)	9.5 - 9.8
11	29.04	M10	Mini-projet (partie 1)	10.1 - 10.3
12	06.05	M10	Mini-projet (partie 2)	10.4 - 10.6
13	13.05	M10	Mini-projet (partie 3)	-
14	20.05	-	Révisions & Préparation examen	-
15	27.05	-	EXAMEN BLANC	-

Semaines sans cours

• 18 février (vacances)
• 18 mars (pas de cours)
• 8 et 15 avril (vacances de Pâques)

Séance 1 - 21 janvier 2026

Thème : Bases JavaScript

Objectifs :

• Comprendre ce qu'est JavaScript et son rôle
• Savoir utiliser la console du navigateur (DevTools)
• Déclarer des variables avec let et const
• Connaître les types de données de base
• Effectuer des opérations et manipuler du texte
• Utiliser les méthodes console

Ressources :

• Présentation Introduction à JS
• Variables et constantes
• Types de données
• Chaînes de caractères
• Nuxy - Exercices interactifs

Devoirs Nuxy : Exercices 1.1 à 1.9 (tout le module 1)

Séance 2 - 28 janvier 2026

Thème : Conditions

Objectifs :

• Écrire des conditions avec if, else if, else
• Utiliser les opérateurs de comparaison (===, !==, <, >)
• Combiner des conditions avec && et ||
• Gérer des cas multiples avec switch/case
• Utiliser l'opérateur ternaire

Ressources :

• Opérateurs
• Conditions

Devoirs Nuxy : Exercices 2.1 à 2.6

Séance 3 - 4 février 2026

Thème : Boucles

Objectifs :

• Kahoot "JavaScript les bases" - Lien pour s'entraîner seul
• Répéter des actions avec while
• Parcourir avec for et for...of
• Comprendre do...while et break

Ressources :

• Boucles

Devoirs Nuxy : Exercices 3.1 à 3.4

Séance 4 - 11 février 2026

Thème : Fonctions

Objectifs :

• Déclarer et appeler des fonctions
• Passer des paramètres
• Retourner des valeurs avec return
• Utiliser la syntaxe arrow function

Ressources :

• Fonctions
• Fonctions fléchées

Devoirs Nuxy : Exercices 4.1 à 4.4

Séance 5 - 25 février 2026

Thème : Tableaux - Les bases

Objectifs :

• Créer et manipuler des tableaux
• Accéder aux éléments par index
• Modifier un tableau (push, pop, shift, unshift)
• Parcourir avec forEach
• Trier avec sort() et filtrer avec filter()

Ressources :

• Tableaux

Devoirs Nuxy : Terminer les modules 5 et 6 complets (exercices 5.1 à 5.11, 6.1 à 6.10)

Important

Ces méthodes (filter, map, sort, reduce) seront réutilisées dans le projet final ! Les modules 5 et 6 doivent être terminés pour la séance 6.

Séance 6 - 4 mars 2026

Thème : Démo CinéJS - Synthèse M1-M6 + Introduction au DOM

Récupérer le projet CinéJS

Étape 1 — Créer votre copie du projet

1. Ouvrir le dépôt template : github.com/fallinov/esig-122-demo-films
2. Cliquer sur le bouton vert "Use this template" → "Create a new repository"

3. Cocher "Include all branches" (pour avoir la branche solution)
4. Repository name : esig-122-demo-films
5. Visibilité : Public
6. Cliquer sur "Create repository"

Étape 2 — Cloner et ouvrir dans WebStorm

1. Copier l'URL de votre dépôt : https://github.com/VOTRE-PSEUDO/esig-122-demo-films.git

2. Dans WebStorm : File → New → Project from Version Control...
3. Coller l'URL et cliquer sur Clone
4. Ouvrir index.html dans le navigateur avec Live Edit (icône navigateur en haut à droite)

En classe

Développement live de l'app CinéJS (gestionnaire de films) — phases 1 à 4 (console uniquement) :

• Phase 1 — Données : tableau d'objets films avec 16 films
• Phase 2 — Affichage console : afficherFilmsConsole() avec for...of, if/else, template literals
• Phase 3 — Tri : trierParNote() avec spread [...] et sort()
• Phase 4 — Recherche : rechercherFilm() avec filter(), includes(), toLowerCase()

Les phases 5-6 (affichage HTML et contrôles interactifs) seront traitées à la séance 7.

Code de la démo : branche sfa-demo-4.3

Concepts révisés

Module	Concepts
M1	Variables, const, template literals
M2	Conditions, if/else
M3	Boucles for...of
M4	Fonctions, paramètres, return
M5	filter, sort, spread [...], includes, toLowerCase
M6	Tableau d'objets, accès aux propriétés (notation point)

Devoirs : Rattraper Nuxy jusqu'au module 6 inclus pour ceux qui sont en retard

Séance 7 - 11 mars 2026

Thème : CinéJS (suite) + DOM

Exercices Nuxy (~30 min)

Temps en autonomie pour avancer sur les exercices du module 7 (DOM) :

• Exercices 7.1 à 7.7 sur nuxy.ch

CinéJS — Phases 5-6 (~45 min)

Suite de la démo séance 6 : on passe de la console à la page HTML.

• Phase 5 — Affichage HTML : creerCarteFilm() et afficherFilmsHTML() avec querySelector, innerHTML, forEach
• Phase 6 — Contrôles interactifs : rafraichir() avec addEventListener("input", ...), chaînage recherche → tri → affichage

Concepts DOM introduits

Concept	Description
querySelector()	Sélectionner un élément par son id ou sélecteur CSS
innerHTML	Injecter du HTML généré avec des template literals
addEventListener	Réagir aux actions de l'utilisateur (frappe clavier)
.value	Lire la valeur d'un champ <input>

Ressources :

• Introduction au DOM
• Accéder aux éléments
• Modifier le contenu
• Créer des éléments

Exercice facultatif : PokéCount

Premier vrai projet dans WebStorm ! Une app de compteur de Pokémon qui met en pratique le DOM dans un projet complet avec HTML, CSS et JavaScript.

• Étapes 1-4 : liaison JS/HTML, querySelector, textContent, variables, fonction capturer()
• Énoncé PokéCount
• Démo en ligne

Séance 8 - 25 mars 2026

Thème : Événements et Formulaires

Objectifs :

• Ajouter des écouteurs d'événements (addEventListener)
• Utiliser l'objet event
• Gérer des événements sur plusieurs éléments
• Empêcher le comportement par défaut (preventDefault)
• Lire les valeurs des champs de formulaire
• Gérer les cases à cocher
• Valider et soumettre un formulaire

Ressources :

• Événements
• Créer des formulaires
• Récupérer les données
• Validation

Devoirs Nuxy : Exercices 8.1 à 8.8

Exercice facultatif : PokéCount (suite)

Continuer le projet PokéCount avec les événements et la persistance :

• Étapes 5-8 : conditions pour couleurs, addEventListener, callbacks, localStorage
• Énoncé PokéCount

Séance 9 - 1er avril 2026

Thème : Promesses et API - Les bases

Objectifs :

• Comprendre le concept de Promesse (Promise)
• Chaîner des Promesses (.then, .catch)
• Utiliser async/await
• Récupérer des données avec fetch() (GET)

Ressources :

• API JSONPlaceholder

Devoirs Nuxy : Exercices 9.1 à 9.4

Séance 10 - 22 avril 2026

Thème : Promesses et API - CRUD complet

Objectifs :

• Gérer les erreurs API (try/catch)
• Envoyer des données (POST)
• Modifier des données (PUT)
• Supprimer des données (DELETE)

Ressources :

• API JSONPlaceholder

Devoirs Nuxy : Exercices 9.5 à 9.8

Important

Le CRUD complet est essentiel pour le mini-projet qui suit !

Séance 11 - 29 avril 2026

Thème : Mini-projet - Structure et affichage

Objectifs :

• Structurer un projet HTML/CSS/JS complet
• Charger des données depuis une API
• Afficher dynamiquement une liste de produits
• Implémenter une recherche en temps réel

Début du mini-projet

À partir de cette séance, nous construisons ensemble une application complète : un Gestionnaire de produits qui combine tous les concepts vus depuis le début du cours.

Devoirs Nuxy : Exercices 10.1 à 10.3

Séance 12 - 6 mai 2026

Thème : Mini-projet - Fonctionnalités avancées

Objectifs :

• Trier et filtrer par catégorie
• Ajouter un produit via formulaire (POST)
• Modifier et supprimer des produits (PUT/DELETE)
• Application complète et fonctionnelle

Devoirs Nuxy : Exercices 10.4 à 10.6

Bonus possibles :

• Confirmation avant suppression
• Styles et animations
• Statistiques (nombre, moyenne des prix)

Séance 13 - 13 mai 2026

Thème : Mini-projet - Finalisation et polish

Objectifs :

• Finaliser le mini-projet
• Améliorer l'interface utilisateur
• Gérer les cas limites et les erreurs
• Revue de code et bonnes pratiques

Alternative facultative : Mini-Pokédex

Pour les élèves qui souhaitent un projet supplémentaire, le Mini-Pokédex reprend les mêmes concepts (DOM, filter, sort, événements) avec des données Pokémon locales :

• 7 étapes progressives (4-6h de travail)
• Énoncé Mini-Pokédex
• Démo en ligne

Séance 14 - 20 mai 2026

Thème : Révisions et préparation à l'examen

Objectifs :

• Révision des concepts clés (M1-M10)
• Exercices de synthèse type examen
• Questions/réponses sur les points difficiles

Séance 15 - 27 mai 2026

EXAMEN BLANC

Format :

• Questions théoriques (QCM, vrai/faux)
• Lecture et analyse de code
• Écriture de code (exercices pratiques)
• Couvre tous les modules 1-10

Note

L'épreuve de module officielle sera planifiée ultérieurement par l'école.

Récapitulatif des objectifs

Objectif officiel	Module(s)
Enjeux de la programmation navigateur	M1, M7
Syntaxe de base du langage	M1-M4
Gérer des listes et structures de données	M5-M6
Manipuler dynamiquement les éléments (DOM)	M7
Créer et manipuler les formulaires	M8
Gérer les interactions utilisateur	M8
Gérer les erreurs	M9
Consommer une API (CRUD)	M9-M10